diff options
Diffstat (limited to 'web/source/css/base.css')
| -rw-r--r-- | web/source/css/base.css | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/web/source/css/base.css b/web/source/css/base.css index 765453ac2..6a5a6dd36 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -68,6 +68,40 @@ $br-inner: 0.2rem; */ $fa-fw: 1.28571429em; +/* + Outline to give links when they're + focused (ie., by clicking or tabbing to them). +*/ +$link-focus-outline: 0.25rem dotted $link-fg; + +/* + Outline to give buttons when they're + focused (ie., by clicking or tabbing to them). +*/ +$button-focus-outline: 0.25rem dashed $button-focus-border; + +/* + Outline to give input elements like radio buttons + and checkboxes when they're focused (ie., by clicking + or tabbing to them). +*/ +$input-clickable-focus-outline: 0.25rem dashed $input-focus-border; + +/* + Outline to give summary elements when they're + focused (ie., by clicking or tabbing to them). +*/ +$summary-focus-outline: 0.25rem dotted $link-fg; + +/* + Outline to give <pre> elements when they're + focused (ie., by clicking or tabbing to them). + + This is used when we've got a preformatted + code block with a scroll bar inside of it. +*/ +$pre-focus-outline: 0.25rem dashed $link-fg; + /****************************************** ***** SECTION 2: BASIC GLOBAL STYLING ***** *******************************************/ @@ -88,6 +122,9 @@ body { a { color: $link-fg; + &:focus-visible { + outline: $link-focus-outline; + } } /* @@ -144,6 +181,14 @@ main { &:hover { background: $button-hover-bg; } + + &:focus-visible { + outline: $button-focus-outline; + } +} + +summary:focus-visible { + outline: $summary-focus-outline; } /* @@ -164,6 +209,11 @@ input, select, textarea, .input { border-color: $input-focus-border; } + &[type=checkbox]:focus-visible, + &[type=radio]:focus-visible { + outline: $input-clickable-focus-outline; + } + &:invalid, .invalid & { border-color: $input-error-border; } @@ -342,6 +392,10 @@ pre, pre[class*="language-"] { white-space: pre; overflow-x: auto; + &:focus { + outline: $pre-focus-outline; + } + /* Code inside a pre block, ie., |