diff options
Diffstat (limited to 'core/css/styles.scss')
| -rw-r--r-- | core/css/styles.scss | 39 |
1 files changed, 33 insertions, 6 deletions
diff --git a/core/css/styles.scss b/core/css/styles.scss index ab6eddaae8c..b21394a52c6 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -20,7 +20,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr margin: 0; padding: 0; border: 0; - outline: 0; font-weight: inherit; font-size: 100%; font-family: inherit; @@ -30,6 +29,23 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr scrollbar-width: thin; } +.js-focus-visible :focus:not(.focus-visible) { + outline: none; +} + +:focus-visible { + box-shadow: 0 0 0 2px var(--color-primary); + outline: none; +} + +/** Let vue apps handle the focus themselves */ +#content-vue :focus-visible, +#app-navigation-vue :focus-visible, +.vue :focus-visible { + box-shadow: none; + outline: none; +} + html, body { height: 100%; } @@ -294,6 +310,11 @@ body { #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label { opacity: .8; } +#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label { + box-shadow: var(--color-primary) 0 0 0 2px; + opacity: 1; + border-radius: 9999px; +} #show + label, #dbpassword + label, #personal-show + label { position: absolute !important; @@ -975,12 +996,18 @@ span.ui-icon { #contactsmenu { .menutoggle { - background-size: 20px 20px; - padding: 14px; cursor: pointer; - // Force white - background-image: var(--original-icon-contacts-white); - filter: var(--primary-invert-if-bright); + &:before { + background-size: 20px 20px; + background-repeat: no-repeat; + background-position-x: 3px; + background-position-y: 4px; + padding: 14px; + content: ' '; + // Force white + background-image: var(--original-icon-contacts-white); + filter: var(--primary-invert-if-bright); + } &:hover, &:focus, |