From 7dbe0a77146f52742cec1aea45d0ddf9ff015806 Mon Sep 17 00:00:00 2001 From: robo-mop Date: Wed, 22 Mar 2023 06:35:12 +0530 Subject: [PATCH 1/4] Add focus effects to inputs Provides better keyboard accessibility for: * Checkboxes * Range Inputs * Copy-over Buttons * Option-reveal Elements Along with some minor design improvements --- .../Compress/Options/Checkbox/style.css | 20 +++++++++++++++++++ .../Range/custom-els/RangeInput/style.css | 4 ++++ .../Compress/Options/Toggle/style.css | 4 ++++ .../lazy-app/Compress/Options/style.css | 15 ++++++++++++++ 4 files changed, 43 insertions(+) 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, From 2000e16ba2ec77835ab8b655131f413d2b249405 Mon Sep 17 00:00:00 2001 From: robo-mop Date: Wed, 22 Mar 2023 14:06:46 +0530 Subject: [PATCH 2/4] Make text-fields match the dark theme --- src/client/lazy-app/Compress/Options/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css index 0e8814dc..4d13fecf 100644 --- a/src/client/lazy-app/Compress/Options/style.css +++ b/src/client/lazy-app/Compress/Options/style.css @@ -83,11 +83,11 @@ } .text-field { - background: var(--white); - color: var(--black); + background-color: var(--black); + color: var(--white); font: inherit; border: none; - padding: 6px 0 6px 10px; + padding: 6px 6px 6px 10px; width: 100%; box-sizing: border-box; border-radius: 4px; From edf9cb755ec7f0ffa0f80920f4fd34e5ef5a5a4e Mon Sep 17 00:00:00 2001 From: robo-mop Date: Wed, 12 Apr 2023 13:19:45 +0530 Subject: [PATCH 3/4] Add styles to save-import buttons --- src/client/lazy-app/Compress/Options/index.tsx | 6 ++++++ src/client/lazy-app/Compress/Options/style.css | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx index 0130865f..9dcdc932 100644 --- a/src/client/lazy-app/Compress/Options/index.tsx +++ b/src/client/lazy-app/Compress/Options/index.tsx @@ -197,6 +197,12 @@ export default class Options extends Component { } title="Import saved side settings" onClick={this.onImportSideSettingsClick} + disabled={ + // Disabled if this side's settings haven't been saved + (!this.state.leftSideSettings && + this.props.index === 0) || + (!this.state.rightSideSettings && this.props.index === 1) + } > diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css index 4d13fecf..ff599168 100644 --- a/src/client/lazy-app/Compress/Options/style.css +++ b/src/client/lazy-app/Compress/Options/style.css @@ -142,6 +142,11 @@ svg { stroke: var(--header-text-color); } + + &:focus { + outline: var(--header-text-color) solid 2px; + outline-offset: 0.25em; + } } .button-opacity { From d168f7a447cd5b8b4aab8744fc178bb019024614 Mon Sep 17 00:00:00 2001 From: robo-mop Date: Wed, 12 Apr 2023 13:52:07 +0530 Subject: [PATCH 4/4] Add focus animation to back button --- src/client/lazy-app/Compress/style.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/client/lazy-app/Compress/style.css b/src/client/lazy-app/Compress/style.css index e8d418e5..fa407615 100644 --- a/src/client/lazy-app/Compress/style.css +++ b/src/client/lazy-app/Compress/style.css @@ -113,6 +113,13 @@ & > svg { width: 47px; + overflow: visible; + } + + &:focus .back-blob { + stroke: var(--deep-blue); + stroke-width: 5px; + animation: strokePulse 500ms ease forwards; } @media (min-width: 600px) { @@ -124,6 +131,15 @@ } } +@keyframes strokePulse { + from { + stroke-width: 8px; + } + to { + stroke-width: 5px; + } +} + .back-blob { fill: var(--hot-pink); opacity: 0.77;