diff --git a/index.html b/index.html index a9f3190..c730e71 100644 --- a/index.html +++ b/index.html @@ -125,7 +125,7 @@ --background-hover: #cccccc; /* Button :hover/selected */ --background-active: #eeeeee; /* Button :active */ - --outline-focus: #222222; /* Button :focus outline */ + --outline-focus: #cccccc; /* Button :focus outline */ --border-radius: 1rem; --border-color: #333333; /* Control borders */ diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss index 00164be..c364aa5 100644 --- a/src/scss/_placeholders.scss +++ b/src/scss/_placeholders.scss @@ -37,10 +37,9 @@ } @include focus { - outline-color: var(--outline-focus); - outline-width: 0.2rem; - background-color: var(--background-hover); - color: var(--text-hover); + outline: var(--outline-focus) auto thick !important; + background-color: var(--background-base); + color: var(--text-base); z-index: 1; } diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index 1f989ad..978f803 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -20,7 +20,7 @@ box-shadow: var(--box-shadow); margin: 0; box-sizing: border-box; - overflow: hidden; + overflow: visible; font-size: 1.5rem; a, button { diff --git a/src/scss/style.scss b/src/scss/style.scss index 1445330..ca28579 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -60,7 +60,7 @@ a { color: var(--text-base); } -button { +button, [type=button] { @extend %button; } @@ -86,7 +86,7 @@ input { } } -.js-focus-visible :focus:not(.focus-visible) { +.js-focus-visible :focus:not(.focus-visible):not(:focus-visible) { outline: none; } @@ -204,6 +204,7 @@ input { flex-direction: column; align-items: center; padding: 0.5rem 2rem; + overflow: hidden; .clock__time { text-align: center; @@ -365,9 +366,10 @@ input { line-height: 1; /* Workaround for focus outlines until https://github.com/Leaflet/Leaflet/pull/7259 gets released */ - @include focus { - outline: -webkit-focus-ring-color auto thin !important; - outline: revert !important; + * { + @include focus { + outline-style: auto !important; + } } }