Drop :active styles

index.html

@@ -137,7 +137,6 @@
 
             --background-disabled: #555555; /* Disabled controls */
             --background-hover: #cccccc; /* Button :hover/selected */
-            --background-active: #eeeeee; /* Button :active */
 
             --outline-focus: #eeeeee; /* Button :focus outline */
 
@@ -151,7 +150,6 @@
             --text-disabled: #999999; /* Disabled controls */
 
             --text-hover: var(--background-base); /* Text in :hover/selected buttons */
-            --text-active: var(--background-dark); /* Text in :active buttons */
 
             --text-night: #ddffff; /* Clock time at night */
             --text-day: #ffdd33; /* Clock time in day */

src/components/Sidebar.vue

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

src/components/sidebar/PlayerListItem.vue

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

src/scss/_mixins.scss

@@ -69,17 +69,12 @@
 	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, &:active, &:focus {
+	&:hover, &:focus {
 		background-color: var(--background-disabled);
 		color: var(--text-disabled);
 	}

src/scss/_placeholders.scss

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

src/scss/leaflet/_controls.scss

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

src/scss/style.scss

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