diff options
| -rw-r--r-- | ext/css/context.css | 68 | ||||
| -rw-r--r-- | ext/css/display.css | 47 | ||||
| -rw-r--r-- | ext/css/material.css | 160 | ||||
| -rw-r--r-- | ext/css/search.css | 9 | ||||
| -rw-r--r-- | ext/css/settings.css | 10 |
5 files changed, 249 insertions, 45 deletions
diff --git a/ext/css/context.css b/ext/css/context.css index a77511ad..4345d3a6 100644 --- a/ext/css/context.css +++ b/ext/css/context.css @@ -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; +} +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; } -.toggle-off:active, -.toggle-handle:active { +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:active { +.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: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; diff --git a/ext/css/display.css b/ext/css/display.css index 44b607ee..b016a231 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -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 { diff --git a/ext/css/material.css b/ext/css/material.css index 9745d27e..9cde17f3 100644 --- a/ext/css/material.css +++ b/ext/css/material.css @@ -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,12 +459,24 @@ 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 { +button:focus:not(:focus-visible):not(:hover):not(:active) { + background-color: var(--accent-color); + border-color: var(--accent-color); +} +button:focus-visible { background-color: var(--accent-color-light); + border-color: var(--accent-color-light); } -button:active { +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 { +button.danger:focus:not(:focus-visible):not(:hover):not(:active) { + background-color: var(--danger-color); + border-color: var(--danger-color); +} +button.danger:focus-visible { background-color: var(--danger-color-light); + border-color: var(--danger-color-light); } -button.danger:active { +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 { +button.low-emphasis:hover, +button.low-emphasis:focus { + border-color: var(--accent-color); background-color: var(--accent-color-transparent5); - border-color: var(--accent-color-light); } -button.low-emphasis:focus { +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, +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); +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:focus { +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, +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; } diff --git a/ext/css/search.css b/ext/css/search.css index eb537ba4..72df8a67 100644 --- a/ext/css/search.css +++ b/ext/css/search.css @@ -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); } diff --git a/ext/css/settings.css b/ext/css/settings.css index 4a8879fc..8255d0b8 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -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 { |