Focus visible styles (#1426)
* Add focus-visible styles * Add focus-visible styles * Add focus-visible styles * Add focus-visible styles * Add focus-visible styles
This commit is contained in:
toasted-nutbread
GitHub
parent
7315ecdd1a
commit
ad0f8bfe39
@ -144,7 +144,13 @@ label {
|
||||
|
||||
/* Toggle */
|
||||
.toggle>input[type=checkbox] {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.toggle>input[type=checkbox]:not(:checked)~.toggle-group {
|
||||
transform: translateX(-50%);
|
||||
@ -205,12 +211,21 @@ body[data-loaded=true] .toggle-group {
|
||||
background-image: linear-gradient(#337ab7, #265a88);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.toggle-on:focus,
|
||||
.toggle-on:hover {
|
||||
input[type=checkbox]:focus~.toggle-group>.toggle-on,
|
||||
input[type=checkbox]~.toggle-group>.toggle-on:hover {
|
||||
background-color: #265a88;
|
||||
background-image: linear-gradient(#2d65a0, #265a88 50%);
|
||||
}
|
||||
.toggle-on:active {
|
||||
input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-on:not(:hover) {
|
||||
background-color: #337ab7;
|
||||
background-image: linear-gradient(#337ab7, #265a88);
|
||||
}
|
||||
input[type=checkbox]:focus-visible~.toggle-group>.toggle-on {
|
||||
background-color: #265a88;
|
||||
background-image: linear-gradient(#2d65a0, #265a88 50%);
|
||||
}
|
||||
input[type=checkbox]~.toggle-group>.toggle-on:active,
|
||||
input[type=checkbox]~.toggle-group>.toggle-on:active:focus {
|
||||
background-color: #204d74;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
@ -244,16 +259,28 @@ body[data-loaded=true] .toggle-group {
|
||||
background-repeat: repeat-x;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.toggle-off:focus,
|
||||
.toggle-off:hover,
|
||||
.toggle-handle:focus,
|
||||
.toggle-handle:hover {
|
||||
input[type=checkbox]:focus~.toggle-group>.toggle-off,
|
||||
input[type=checkbox]~.toggle-group>.toggle-off:hover,
|
||||
input[type=checkbox]~.toggle-group>.toggle-handle:hover {
|
||||
background-color: #e6e6e6;
|
||||
background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
|
||||
border-color: #adadad;
|
||||
}
|
||||
.toggle-off:active,
|
||||
.toggle-handle:active {
|
||||
input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-off:not(:hover) {
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(#ffffff, #e0e0e0);
|
||||
border-color: #cccccc;
|
||||
}
|
||||
input[type=checkbox]:focus-visible~.toggle-group>.toggle-off,
|
||||
input[type=checkbox]~.toggle-group>.toggle-off:hover {
|
||||
background-color: #e6e6e6;
|
||||
background-image: linear-gradient(#e0e0e0, #e6e6e6 50%);
|
||||
border-color: #adadad;
|
||||
}
|
||||
input[type=checkbox]~.toggle-group>.toggle-off:active,
|
||||
input[type=checkbox]~.toggle-group>.toggle-handle:active,
|
||||
input[type=checkbox]~.toggle-group>.toggle-off:active:focus,
|
||||
input[type=checkbox]~.toggle-group>.toggle-handle:active:focus {
|
||||
background-color: #d4d4d4;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
@ -279,21 +306,32 @@ body[data-loaded=true] .toggle-group {
|
||||
.nav-button+.nav-button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.nav-button:hover {
|
||||
.nav-button:hover,
|
||||
.nav-button:focus {
|
||||
z-index: 1;
|
||||
border-color: #aaaaaa;
|
||||
background-image: linear-gradient(#e8e8e8, #d0d0d0);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
.nav-button:focus:not(:focus-visible) {
|
||||
background-image: linear-gradient(#f8f8f8, #e0e0e0);
|
||||
border-color: #cccccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
.nav-button:focus-visible {
|
||||
z-index: 1;
|
||||
border-color: #aaaaaa;
|
||||
background-image: linear-gradient(#e8e8e8, #d0d0d0);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.nav-button:active {
|
||||
.nav-button:active,
|
||||
.nav-button:active:focus {
|
||||
z-index: 1;
|
||||
border-color: #808080;
|
||||
background-image: linear-gradient(#c8c8c8, #e0e0e0);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.nav-button:focus {
|
||||
outline: none;
|
||||
}
|
||||
.nav-button>.icon {
|
||||
--icon-size: 16px 16px;
|
||||
display: block;
|
||||
|
||||
@ -138,9 +138,12 @@
|
||||
|
||||
--notification-text-color: #ffffff;
|
||||
--notification-background-color: #333333;
|
||||
--notification-background-color-light: #555555;
|
||||
--notification-background-color-lighter: #666666;
|
||||
--notification-shadow-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
--action-button-active-color: var(--scrollbar-thumb-color);
|
||||
--action-button-hover-color: #dddddd;
|
||||
--action-button-active-color: #c1c1c1;
|
||||
}
|
||||
:root[data-theme=dark] {
|
||||
/* Colors */
|
||||
@ -199,9 +202,12 @@
|
||||
|
||||
--notification-text-color: #2f2f2f;
|
||||
--notification-background-color: #e1e1e1;
|
||||
--notification-background-color-light: #bbbbbb;
|
||||
--notification-background-color-lighter: #aaaaaa;
|
||||
--notification-shadow-color: rgba(255, 255, 255, 0.25);
|
||||
|
||||
--action-button-active-color: var(--scrollbar-thumb-color);
|
||||
--action-button-hover-color: #282828;
|
||||
--action-button-active-color: #444444;
|
||||
}
|
||||
|
||||
|
||||
@ -502,6 +508,12 @@ button.sidebar-button:hover,
|
||||
button.sidebar-button:focus {
|
||||
background-color: var(--sidebar-button-background-color-hover);
|
||||
}
|
||||
button.sidebar-button:focus:not(:focus-visible):not(:hover) {
|
||||
background-color: var(--sidebar-button-background-color);
|
||||
}
|
||||
button.sidebar-button:focus-visible {
|
||||
background-color: var(--sidebar-button-background-color-hover);
|
||||
}
|
||||
button.sidebar-button:active {
|
||||
background-color: var(--sidebar-button-background-color-active);
|
||||
}
|
||||
@ -512,6 +524,12 @@ button.sidebar-button.danger:hover,
|
||||
button.sidebar-button.danger:focus {
|
||||
background-color: var(--sidebar-button-danger-background-color-hover);
|
||||
}
|
||||
button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) {
|
||||
background-color: var(--sidebar-button-danger-background-color);
|
||||
}
|
||||
button.sidebar-button.danger:focus-visible {
|
||||
background-color: var(--sidebar-button-danger-background-color-hover);
|
||||
}
|
||||
button.sidebar-button.danger:active {
|
||||
background-color: var(--sidebar-button-danger-background-color-active);
|
||||
}
|
||||
@ -536,6 +554,12 @@ button.sidebar-button.danger:hover .sidebar-button-icon,
|
||||
button.sidebar-button.danger:focus .sidebar-button-icon {
|
||||
background-color: var(--sidebar-button-danger-icon-color);
|
||||
}
|
||||
button.sidebar-button.danger:focus:not(:focus-visible):not(:hover) .sidebar-button-icon {
|
||||
background-color: var(--sidebar-button-icon-color);
|
||||
}
|
||||
button.sidebar-button.danger:focus-visible .sidebar-button-icon {
|
||||
background-color: var(--sidebar-button-danger-icon-color);
|
||||
}
|
||||
button.sidebar-button.sidebar-button-highlight>.sidebar-button-icon {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
@ -616,6 +640,10 @@ button.action-button:focus {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
button.action-button:focus-visible {
|
||||
background-color: var(--action-button-hover-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
button.action-button:active {
|
||||
background-color: var(--action-button-active-color);
|
||||
box-shadow: none;
|
||||
@ -1579,6 +1607,12 @@ button.footer-notification-close-button:active {
|
||||
font-size: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
button.footer-notification-close-button:focus-visible {
|
||||
background-color: var(--notification-background-color-light);
|
||||
}
|
||||
button.footer-notification-close-button:focus-visible:active {
|
||||
background-color: var(--notification-background-color-lighter);
|
||||
}
|
||||
.footer-notification-close-button-icon {
|
||||
display: block;
|
||||
width: calc(16em / var(--font-size-no-units));
|
||||
@ -1709,9 +1743,14 @@ button.footer-notification-close-button:active {
|
||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
|
||||
opacity: 0.375;
|
||||
}
|
||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
|
||||
opacity: 1;
|
||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
|
||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
|
||||
opacity: 0.375;
|
||||
}
|
||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
|
||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
|
||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
|
||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
|
||||
|
||||
@ -351,6 +351,21 @@ label.checkbox {
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.checkbox>input[type=checkbox]:focus:not(:focus-visible)+.checkbox-body::after {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: var(--selectable-indicator-transition1);
|
||||
}
|
||||
.checkbox>input[type=checkbox]:focus-visible+.checkbox-body::after,
|
||||
.checkbox>input[type=checkbox]:focus-visible:focus+.checkbox-body::after,
|
||||
.checkbox>input[type=checkbox]:focus-visible:active+.checkbox-body::after,
|
||||
.checkbox:active>input[type=checkbox]:focus-visible+.checkbox-body::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.checkbox>input[type=checkbox]:focus+.checkbox-body::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -444,13 +459,25 @@ label.toggle {
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.toggle>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
|
||||
.toggle>input[type=checkbox]+.toggle-body>.toggle-knob::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.toggle>input[type=checkbox]:active:focus+.toggle-body>.toggle-knob::after,
|
||||
.toggle:active>input[type=checkbox]:focus+.toggle-body>.toggle-knob::after {
|
||||
.toggle>input[type=checkbox]:active+.toggle-body>.toggle-knob::after,
|
||||
.toggle:active>input[type=checkbox]+.toggle-body>.toggle-knob::after {
|
||||
opacity: 1;
|
||||
}
|
||||
.toggle>input[type=checkbox]:focus:not(:focus-visible)+.toggle-body>.toggle-knob::after {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: var(--selectable-indicator-transition1);
|
||||
}
|
||||
.toggle>input[type=checkbox]:focus-visible+.toggle-body>.toggle-knob::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.toggle>input[type=checkbox]:checked+.toggle-body>.toggle-knob {
|
||||
transform: translateX(1em);
|
||||
}
|
||||
@ -580,6 +607,18 @@ label.radio {
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.radio>input[type=radio]:focus:not(:focus-visible)+.radio-body::after {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: var(--selectable-indicator-transition1);
|
||||
}
|
||||
.radio>input[type=radio]:focus-visible+.radio-body::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.radio>input[type=radio]:focus+.radio-body::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -732,14 +771,20 @@ button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
box-shadow: var(--button-shadow-params) var(--shadow-color-off);
|
||||
transition: background-color var(--animation-duration) ease-in, box-shadow var(--animation-duration) ease-in, border-color var(--animation-duration) ease-in;
|
||||
transition:
|
||||
background-color var(--animation-duration) ease-in,
|
||||
box-shadow var(--animation-duration) ease-in,
|
||||
border-color var(--animation-duration) ease-in;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
button:hover {
|
||||
transition: background-color var(--animation-duration) ease-out, box-shadow var(--animation-duration) ease-out, border-color var(--animation-duration) ease-out;
|
||||
transition:
|
||||
background-color var(--animation-duration) ease-out,
|
||||
box-shadow var(--animation-duration) ease-out,
|
||||
border-color var(--animation-duration) ease-out;
|
||||
}
|
||||
button:hover {
|
||||
box-shadow: var(--button-shadow-params) var(--shadow-color-light);
|
||||
@ -754,14 +799,21 @@ button {
|
||||
border-color: var(--accent-color);
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
button:hover {
|
||||
button:hover,
|
||||
button:focus {
|
||||
background-color: var(--accent-color-light);
|
||||
border-color: var(--accent-color-light);
|
||||
}
|
||||
button:focus {
|
||||
background-color: var(--accent-color-light);
|
||||
button:focus:not(:focus-visible):not(:hover):not(:active) {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
button:active {
|
||||
button:focus-visible {
|
||||
background-color: var(--accent-color-light);
|
||||
border-color: var(--accent-color-light);
|
||||
}
|
||||
button:active,
|
||||
button:active:focus {
|
||||
border-color: var(--accent-color-lighter);
|
||||
background-color: var(--accent-color-lighter);
|
||||
}
|
||||
@ -772,14 +824,21 @@ button.danger {
|
||||
border-color: var(--danger-color);
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
button.danger:hover {
|
||||
button.danger:hover,
|
||||
button.danger:focus {
|
||||
background-color: var(--danger-color-light);
|
||||
border-color: var(--danger-color-light);
|
||||
}
|
||||
button.danger:focus {
|
||||
background-color: var(--danger-color-light);
|
||||
button.danger:focus:not(:focus-visible):not(:hover):not(:active) {
|
||||
background-color: var(--danger-color);
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
button.danger:active {
|
||||
button.danger:focus-visible {
|
||||
background-color: var(--danger-color-light);
|
||||
border-color: var(--danger-color-light);
|
||||
}
|
||||
button.danger:active,
|
||||
button.danger:active:focus {
|
||||
border-color: var(--danger-color-lighter);
|
||||
background-color: var(--danger-color-lighter);
|
||||
}
|
||||
@ -790,14 +849,21 @@ button.low-emphasis {
|
||||
border-color: var(--button-border-color);
|
||||
background-color: var(--accent-color-transparent0);
|
||||
}
|
||||
button.low-emphasis:hover {
|
||||
background-color: var(--accent-color-transparent5);
|
||||
border-color: var(--accent-color-light);
|
||||
}
|
||||
button.low-emphasis:hover,
|
||||
button.low-emphasis:focus {
|
||||
border-color: var(--accent-color);
|
||||
background-color: var(--accent-color-transparent5);
|
||||
}
|
||||
button.low-emphasis:active {
|
||||
button.low-emphasis:focus:not(:focus-visible):not(:hover):not(:active) {
|
||||
border-color: var(--button-border-color);
|
||||
background-color: var(--accent-color-transparent0);
|
||||
}
|
||||
button.low-emphasis:focus-visible {
|
||||
border-color: var(--accent-color);
|
||||
background-color: var(--accent-color-transparent5);
|
||||
}
|
||||
button.low-emphasis:active,
|
||||
button.low-emphasis:active:focus {
|
||||
border-color: var(--accent-color);
|
||||
background-color: var(--accent-color-transparent25);
|
||||
}
|
||||
@ -808,28 +874,39 @@ button.low-emphasis.danger {
|
||||
border-color: var(--button-border-color);
|
||||
background-color: var(--danger-color-transparent0);
|
||||
}
|
||||
button.low-emphasis.danger:hover {
|
||||
border-color: var(--danger-color-light);
|
||||
background-color: var(--danger-color-transparent5);
|
||||
}
|
||||
button.low-emphasis.danger:hover,
|
||||
button.low-emphasis.danger:focus {
|
||||
border-color: var(--danger-color);
|
||||
background-color: var(--danger-color-transparent5);
|
||||
}
|
||||
button.low-emphasis.danger:active {
|
||||
button.low-emphasis.danger:focus:not(:focus-visible):not(:hover):not(:active) {
|
||||
border-color: var(--button-border-color);
|
||||
background-color: var(--danger-color-transparent0);
|
||||
}
|
||||
button.low-emphasis.danger:focus-visible {
|
||||
border-color: var(--danger-color);
|
||||
background-color: var(--danger-color-transparent5);
|
||||
}
|
||||
button.low-emphasis.danger:active,
|
||||
button.low-emphasis.danger:active:focus {
|
||||
border-color: var(--danger-color);
|
||||
background-color: var(--danger-color-transparent25);
|
||||
}
|
||||
|
||||
/* Disabled buttons */
|
||||
button:disabled,
|
||||
button.danger:disabled {
|
||||
button:disabled:focus,
|
||||
button:disabled:hover,
|
||||
button:disabled:active {
|
||||
color: var(--button-text-color);
|
||||
border-color: var(--disabled-color);
|
||||
background-color: var(--disabled-color);
|
||||
cursor: default;
|
||||
}
|
||||
button.low-emphasis:disabled,
|
||||
button.low-emphasis.danger:disabled {
|
||||
button.low-emphasis:disabled:focus,
|
||||
button.low-emphasis:disabled:hover,
|
||||
button.low-emphasis:disabled:active {
|
||||
color: var(--disabled-color);
|
||||
border-color: var(--disabled-color);
|
||||
background-color: transparent;
|
||||
@ -858,7 +935,14 @@ button.input-suffix-button.input-suffix-icon-button:hover,
|
||||
button.input-suffix-button.input-suffix-icon-button:focus {
|
||||
background-color: var(--input-background-color-dark);
|
||||
}
|
||||
button.input-suffix-button.input-suffix-icon-button:active {
|
||||
button.input-suffix-button.input-suffix-icon-button:focus:not(:focus-visible):not(:hover):not(:active) {
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
button.input-suffix-button.input-suffix-icon-button:focus-visible {
|
||||
background-color: var(--input-background-color-dark);
|
||||
}
|
||||
button.input-suffix-button.input-suffix-icon-button:active,
|
||||
button.input-suffix-button.input-suffix-icon-button:active:focus {
|
||||
background-color: var(--input-background-color-darker);
|
||||
}
|
||||
button.input-suffix-button.input-suffix-icon-button>.icon {
|
||||
@ -906,6 +990,12 @@ button.icon-button:active {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
button.icon-button:focus:not(:focus-visible),
|
||||
button.icon-button:focus:hover:not(:focus-visible),
|
||||
button.icon-button:focus:active:not(:focus-visible) {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.icon-button>.icon-button-inner::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@ -922,7 +1012,23 @@ button.icon-button:active {
|
||||
visibility: hidden;
|
||||
transition: var(--selectable-indicator-transition1);
|
||||
}
|
||||
.icon-button:focus>.icon-button-inner::after {
|
||||
.icon-button:focus>.icon-button-inner::after,
|
||||
.icon-button:active>.icon-button-inner::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: var(--selectable-indicator-transition2);
|
||||
}
|
||||
.icon-button:focus:not(:focus-visible)>.icon-button-inner::after {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: var(--selectable-indicator-transition1);
|
||||
}
|
||||
.icon-button:focus-visible>.icon-button-inner::after,
|
||||
.icon-button:focus-visible:active>.icon-button-inner::after,
|
||||
.icon-button:focus>.icon-button-inner::after,
|
||||
.icon-button:focus:active>.icon-button-inner::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@ -1009,7 +1115,13 @@ button.popup-menu-item:focus {
|
||||
background-color: var(--menu-item-hover-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
button.popup-menu-item:active {
|
||||
button.popup-menu-item:focus:not(:focus-visible):not(:hover):not(:disabled) {
|
||||
background-color: transparent;
|
||||
}
|
||||
button.popup-menu-item:focus-visible:not(:disabled) {
|
||||
background-color: var(--menu-item-hover-color);
|
||||
}
|
||||
button.popup-menu-item:active:not(:disabled) {
|
||||
background-color: var(--menu-item-active-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -103,7 +103,14 @@ h1 {
|
||||
#search-button:focus {
|
||||
background-color: var(--input-background-color-dark);
|
||||
}
|
||||
#search-button:active {
|
||||
#search-button:focus:not(:focus-visible):not(:hover) {
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
#search-button:focus-visible {
|
||||
background-color: var(--input-background-color-dark);
|
||||
}
|
||||
#search-button:active,
|
||||
#search-button:active:focus {
|
||||
background-color: var(--input-background-color-darker);
|
||||
}
|
||||
|
||||
|
||||
@ -407,7 +407,15 @@ a.heading-link-light {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.outline-item:hover {
|
||||
.outline-item:hover,
|
||||
.outline-item:focus {
|
||||
outline: none;
|
||||
background-color: var(--outline-item-background-color-hover);
|
||||
}
|
||||
.outline-item:focus:not(:focus-visible) {
|
||||
background-color: var(--outline-item-background-color);
|
||||
}
|
||||
.outline-item:focus-visible {
|
||||
background-color: var(--outline-item-background-color-hover);
|
||||
}
|
||||
.outline-item-left {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user