Revert "Drop :active styles"

This reverts commit 146aadb9

index.html

@@ -163,6 +163,7 @@
 
             --background-disabled: #555555; /* Disabled controls */
             --background-hover: #363636; /* :hovered buttons/menu items */
+            --background-active: #eeeeee; /* Button :active */
             --background-selected: #BDBDBD; /* Selected buttons/menu items */
 
             --outline-focus: #eeeeee; /* :focus outline */
@@ -178,6 +179,7 @@
 
             --text-hover: var(--text-base); /* Text in :hover buttons */
             --text-selected: var(--background-base); /* Text in selected buttons */
+            --text-active: var(--background-dark); /* Text in :active buttons */
             --text-shadow: 0.1rem 0.1rem #000000; /* Text in selected buttons */
 
             --text-night: #ddffff; /* Clock time at night */

src/components/Sidebar.vue

@@ -260,7 +260,7 @@ export default defineComponent({
 				}
 			}
 
-			&:hover, &:focus-visible, &.focus-visible {
+			&:hover, &:focus-visible, &.focus-visible, &:active {
 				background-color: transparent;
 			}
 		}

src/components/sidebar/PlayerListItem.vue

@@ -141,7 +141,7 @@ export default defineComponent({
 			}
 		}
 
-		&:hover, &:focus {
+		&:hover, &:focus, &:active {
 			.player__name ::v-deep(span) {
 				color: inherit !important;
 			}

src/scss/_mixins.scss

@@ -81,12 +81,17 @@
 	border-color: var(--background-dark);
 }
 
+@mixin button-active {
+	background-color: var(--background-active);
+	color: var(--text-active);
+}
+
 @mixin button-disabled {
 	background-color: var(--background-disabled);
 	color: var(--text-disabled);
 	cursor: not-allowed;
 
-	&:hover, &:focus {
+	&:hover, &:active, &:focus {
 		background-color: var(--background-disabled);
 		color: var(--text-disabled);
 	}

src/scss/_placeholders.scss

@@ -36,6 +36,10 @@
 		z-index: auto;
 	}
 
+	&:active {
+		@include button-active;
+	}
+
 	&[disabled], &[aria-disabled="true"] {
 		@include button-disabled;
 	}

src/scss/leaflet/_controls.scss

@@ -29,8 +29,8 @@
 	}
 
 	/* Avoid applying the base background colour twice, in case its semi-transparent */
-	> a:not(:hover):not(:focus):not([aria-expanded=true]),
-	> button:not(:hover):not(:focus):not([aria-expanded=true]) {
+	> a:not(:hover):not(:focus):not(:active):not([aria-expanded=true]),
+	> button:not(:hover):not(:focus):not(:active):not([aria-expanded=true]) {
 		background-color: transparent;
 	}
 
@@ -311,7 +311,7 @@
 	animation: fade 0.3s linear;
 	animation-fill-mode: forwards;
 
-	&:hover, &:focus {
+	&:hover, &:active, &:focus {
 		background-color: var(--background-base);
 	}
 

src/scss/style.scss

@@ -251,6 +251,10 @@ input {
 			outline: none !important;
 		}
 
+		&:active + label {
+			@include button-active;
+		}
+
 		&:disabled + label {
 			@include button-disabled;
 		}