initial gamepad/keyboard navigation support

Far from complete, but this does the bulk of the work, the rest is just
fixing places where the selection moves in weird ways after doing some
things, and overall improving the look and feel of it.

3 files changed, 26 insertions, 4 deletions

diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index c43bce1..694acf1 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -111,7 +111,8 @@
 .contentMenu li:last-child {margin-right: 0px}
 .contentMenu li:first-child {margin-left: 0px}
 
-.contentMenu li:hover {opacity: 0.7}
+.contentMenu li:hover,
+.contentMenu li.active-selection {opacity: 0.7}
 
 .contentMenu li[active] {
 	opacity: 1.0;
@@ -305,7 +306,8 @@ button:has(img):has(span) img {
 	transition: opacity 0.2s ease-in-out;
 }
 
-button:has(img):has(span):hover img {
+button:has(img):has(span):hover img,
+button:has(img):has(span).active-selection img {
 	opacity: 1.0;
 }
 
@@ -315,7 +317,8 @@ button:has(img):has(span) span {
 	transition: right 0.2s ease-in-out;
 }
 
-button:has(img):has(span):hover span {
+button:has(img):has(span):hover span,
+button:has(img):has(span).active-selection span {
 	right: 0.1em;
 }
 
diff --git a/src/app/css/selection.css b/src/app/css/selection.css
new file mode 100644
index 0000000..04e1d5d
--- /dev/null
+++ b/src/app/css/selection.css
@@ -0,0 +1,19 @@
+#selection {
+	z-index: 99999999999999;
+
+	transition: 0.15s ease-in-out;
+	transition-property:
+		opacity, border-radius,
+		transform, width, height, top, left;
+
+	position: fixed;
+	pointer-events: none;
+	transform: scale(1.0);
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: calc(var(--padding) / 2);
+}
+
+#selection.keyboard-selecting,
+#selection.controller-selecting {
+	transform: scale(1.1);
+}
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index fb8fbf7..c0b6497 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -42,7 +42,7 @@ a.disabled:not("[onclick='kill('game')']") {
 	pointer-events: none;
 }
 
-a:hover {
+a:hover, a.active-selection {
 	filter: brightness(80%) !important;
 }