/** * KeyboardNavigation - Focus styles * * The focus ring color is supplied through the CSS variable --kbnav-focus-color, * which is set by the plugin's inline style block. The inline block also * overrides it inside @media (prefers-color-scheme: dark), so the dark color * is applied automatically when the visitor's system is in dark mode. * * The focus outline is only rendered when has the `kbnav-keyboard` * class, which is added by JS the moment the user presses a navigation key * and removed on any mouse/touch input. */ :root { --kbnav-focus-color: #2271b1; } html.kbnav-keyboard a:focus, html.kbnav-keyboard button:focus, html.kbnav-keyboard [role="button"]:focus, html.kbnav-keyboard input[type="button"]:focus, html.kbnav-keyboard input[type="submit"]:focus, html.kbnav-keyboard input[type="reset"]:focus, html.kbnav-keyboard [tabindex]:focus { outline: 3px solid var(--kbnav-focus-color) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--kbnav-focus-color) 30%, transparent) !important; transition: outline 0.1s ease, box-shadow 0.1s ease; border-radius: 2px; } /* Fallback for browsers without color-mix() */ @supports not (color: color-mix(in srgb, red, blue)) { html.kbnav-keyboard a:focus, html.kbnav-keyboard button:focus, html.kbnav-keyboard [role="button"]:focus, html.kbnav-keyboard input[type="button"]:focus, html.kbnav-keyboard input[type="submit"]:focus, html.kbnav-keyboard input[type="reset"]:focus, html.kbnav-keyboard [tabindex]:focus { box-shadow: 0 0 0 4px rgba(34, 113, 177, 0.25) !important; } } /* Suppress focus outlines from clicks while in mouse mode */ html.kbnav-mouse a:focus, html.kbnav-mouse button:focus, html.kbnav-mouse [role="button"]:focus, html.kbnav-mouse input[type="button"]:focus, html.kbnav-mouse input[type="submit"]:focus, html.kbnav-mouse input[type="reset"]:focus { outline: none; box-shadow: none; }