diff --git a/index.html b/index.html
index 03100bf..b4956e8 100644
--- a/index.html
+++ b/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 */
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 3f1289d..3e8240b 100644
--- a/src/components/Sidebar.vue
+++ b/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;
}
}
diff --git a/src/components/sidebar/PlayerListItem.vue b/src/components/sidebar/PlayerListItem.vue
index b20ab50..9905abe 100644
--- a/src/components/sidebar/PlayerListItem.vue
+++ b/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;
}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 7cfe156..76c7ccc 100644
--- a/src/scss/_mixins.scss
+++ b/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);
}
diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss
index 68e3067..e79e348 100644
--- a/src/scss/_placeholders.scss
+++ b/src/scss/_placeholders.scss
@@ -36,6 +36,10 @@
z-index: auto;
}
+ &:active {
+ @include button-active;
+ }
+
&[disabled], &[aria-disabled="true"] {
@include button-disabled;
}
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index ab7cccc..bff3973 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/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);
}
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 9ed3449..0190d98 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -251,6 +251,10 @@ input {
outline: none !important;
}
+ &:active + label {
+ @include button-active;
+ }
+
&:disabled + label {
@include button-disabled;
}