diff --git a/routes/_components/Media.html b/routes/_components/Media.html index 195a23a3..3a44e1a3 100644 --- a/routes/_components/Media.html +++ b/routes/_components/Media.html @@ -4,7 +4,7 @@ {{#if media.type === 'video'}} diff --git a/scss/global.scss b/scss/global.scss index 41209b1a..f831fed1 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -116,4 +116,13 @@ ul, li, p { .hidden { opacity: 0; -} \ No newline at end of file +} + +*:focus { + outline: 2px solid var(--focus-outline); +} + +button::-moz-focus-inner { + border: 0; +} + diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss index ecb92ef5..48578f05 100644 --- a/scss/themes/_base.scss +++ b/scss/themes/_base.scss @@ -60,4 +60,5 @@ --mask-opaque-bg: rgba($toast-bg, 0.8); --deemphasized-text-color: #666; + --focus-outline: $focus-outline; } diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss index fedc1162..46ab57a0 100644 --- a/scss/themes/_default.scss +++ b/scss/themes/_default.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); @import "_base.scss"; diff --git a/scss/themes/_offline.scss b/scss/themes/_offline.scss index 292d2ecd..d41f7a54 100644 --- a/scss/themes/_offline.scss +++ b/scss/themes/_offline.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 15%); @import "_base.scss"; diff --git a/scss/themes/gecko.scss b/scss/themes/gecko.scss index 7f9fd6c1..b9985037 100644 --- a/scss/themes/gecko.scss +++ b/scss/themes/gecko.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); @import "_base.scss"; diff --git a/scss/themes/hotpants.scss b/scss/themes/hotpants.scss index c44345a7..d1d1a184 100644 --- a/scss/themes/hotpants.scss +++ b/scss/themes/hotpants.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 15%); @import "_base.scss"; diff --git a/scss/themes/majesty.scss b/scss/themes/majesty.scss index d3fbb2f3..4d3d4824 100644 --- a/scss/themes/majesty.scss +++ b/scss/themes/majesty.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); @import "_base.scss"; diff --git a/scss/themes/oaken.scss b/scss/themes/oaken.scss index 3204af40..fbb8bc18 100644 --- a/scss/themes/oaken.scss +++ b/scss/themes/oaken.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); @import "_base.scss"; diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss index ce56d3e3..c303582f 100644 --- a/scss/themes/scarlet.scss +++ b/scss/themes/scarlet.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); @import "_base.scss"; diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss index 86b32ce5..71796d14 100644 --- a/scss/themes/seafoam.scss +++ b/scss/themes/seafoam.scss @@ -7,6 +7,7 @@ $main-bg-color: white; $secondary-text-color: white; $toast-border: #fafafa; $toast-bg: #333; +$focus-outline: lighten($main-theme-color, 30%); @import "_base.scss"; diff --git a/templates/2xx.html b/templates/2xx.html index 48e09755..0ecb6289 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -10,9 +10,9 @@