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; }