diff --git a/src/client/lazy-app/Compress/Options/Checkbox/style.css b/src/client/lazy-app/Compress/Options/Checkbox/style.css index fe2548cf..ef00ed23 100644 --- a/src/client/lazy-app/Compress/Options/Checkbox/style.css +++ b/src/client/lazy-app/Compress/Options/Checkbox/style.css @@ -2,6 +2,26 @@ display: inline-block; position: relative; --size: 17px; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 200%; + height: 200%; + background-color: var(--main-theme-color); + border-radius: 999px; + opacity: 0.25; + + transform: translate(-50%, -50%) scale(0); + transition-property: transform; + transition-duration: 250ms; + } + + &:focus-within::before { + transform: translate(-50%, -50%) scale(1); + } } .real-checkbox { diff --git a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css index c65acb8a..501a4e94 100644 --- a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css +++ b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css @@ -47,6 +47,10 @@ range-input::before { height: 12px; } +range-input:focus-within .thumb { + outline: white solid 2px; +} + .thumb-wrapper { position: absolute; left: 6px; diff --git a/src/client/lazy-app/Compress/Options/Toggle/style.css b/src/client/lazy-app/Compress/Options/Toggle/style.css index c3b1a356..c1d14ba4 100644 --- a/src/client/lazy-app/Compress/Options/Toggle/style.css +++ b/src/client/lazy-app/Compress/Options/Toggle/style.css @@ -11,6 +11,10 @@ padding: 3px calc(var(--thumb-size) / 2 + 3px); } +.checkbox:focus-within .track { + outline: white solid 2px; +} + .thumb { position: relative; width: var(--thumb-size); diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css index dfe2c414..0e8814dc 100644 --- a/src/client/lazy-app/Compress/Options/style.css +++ b/src/client/lazy-app/Compress/Options/style.css @@ -53,6 +53,16 @@ composes: option-toggle; grid-template-columns: auto 1fr; gap: 1em; + + border-top: 1px solid #fff4; + + transition-property: background-color; + transition-duration: 250ms; +} + +.option-reveal:focus-within, +.option-reveal:hover { + background-color: #fff2; } .option-one-cell { @@ -118,6 +128,11 @@ svg { fill: var(--header-text-color); } + + &:focus { + outline: var(--header-text-color) solid 2px; + outline-offset: 0.25em; + } } .save-button,