From 7ca39170f3a65fc514b429a17ce64add74456d2e Mon Sep 17 00:00:00 2001 From: skalthoff <32023561+skalthoff@users.noreply.github.com> Date: Mon, 2 Feb 2026 13:15:39 -0800 Subject: [PATCH] Fix styling: active states, focus rings, spinner theming, hairline borders - Add :active pressed-state styling to editor toolbar buttons, context menu items, and selection popup wide-button - Remove redundant outline:0 from editor toolbar buttons so base :focus-visible rule applies - Fix context menu focus suppression to only apply on mouse focus, preserving keyboard :focus-visible ring - Add text-align: left on page number input focus for editing feedback - Replace hardcoded spinner colors (#f3f3f3/#7e7e7e) with CSS variables (--fill-quinary/--fill-secondary) for dark mode support - Add 1dppx media query fallbacks for 0.5px borders on range thumb, tool-toggle, split-toggle, and switch knob - Add reusable hairline-border mixin --- src/common/stylesheets/abstracts/_mixins.scss | 7 +++++++ src/common/stylesheets/base/_base.scss | 3 +++ src/common/stylesheets/components/_context-menu.scss | 6 +++++- src/common/stylesheets/components/_editor.scss | 5 ++++- src/common/stylesheets/components/_modal-popup.scss | 6 ++++++ src/common/stylesheets/components/_outline-view.scss | 4 ++-- src/common/stylesheets/components/_toolbar.scss | 4 ++++ src/common/stylesheets/components/_view-popup.scss | 11 +++++++++-- 8 files changed, 40 insertions(+), 6 deletions(-) diff --git a/src/common/stylesheets/abstracts/_mixins.scss b/src/common/stylesheets/abstracts/_mixins.scss index 6a40b29c9..fab86487a 100644 --- a/src/common/stylesheets/abstracts/_mixins.scss +++ b/src/common/stylesheets/abstracts/_mixins.scss @@ -237,6 +237,13 @@ } } +@mixin hairline-border($property: border, $color: currentColor, $width: 0.5px) { + #{$property}: $width solid $color; + @media (resolution: 1dppx) { + #{$property}-width: 1px; + } +} + @mixin popup { position: absolute; z-index: $z-index-find-popup; diff --git a/src/common/stylesheets/base/_base.scss b/src/common/stylesheets/base/_base.scss index ea7dee5e0..677ba5a6e 100644 --- a/src/common/stylesheets/base/_base.scss +++ b/src/common/stylesheets/base/_base.scss @@ -145,6 +145,9 @@ input[type="range"] { border: 0.5px var(--fill-senary); box-shadow: 0 1px 0.75px 0 rgba(0, 0, 0, 0.05), 0 0.25px 0.25px 0 rgba(0, 0, 0, 0.15); + @media (resolution: 1dppx) { + border-width: 1px; + } } &:active:not(:disabled) { diff --git a/src/common/stylesheets/components/_context-menu.scss b/src/common/stylesheets/components/_context-menu.scss index 4c476e442..26dd3b66d 100644 --- a/src/common/stylesheets/components/_context-menu.scss +++ b/src/common/stylesheets/components/_context-menu.scss @@ -54,12 +54,16 @@ opacity: 0.5; } - &:hover, &:focus { + &:hover, &:focus:not(:focus-visible) { outline: none; box-shadow: none; background: var(--fill-quinary); } + &:active { + background: var(--fill-quarternary); + } + .icon { display: flex; align-items: center; diff --git a/src/common/stylesheets/components/_editor.scss b/src/common/stylesheets/components/_editor.scss index c361b6870..fe09787ac 100644 --- a/src/common/stylesheets/components/_editor.scss +++ b/src/common/stylesheets/components/_editor.scss @@ -62,13 +62,16 @@ background-color: transparent; border: none; cursor: pointer; - outline: 0; vertical-align: middle; text-align: center; &:hover { background-color: var(--fill-quinary); } + + &:active { + background-color: var(--fill-quarternary); + } } } } diff --git a/src/common/stylesheets/components/_modal-popup.scss b/src/common/stylesheets/components/_modal-popup.scss index d09a42c77..890cba1fe 100644 --- a/src/common/stylesheets/components/_modal-popup.scss +++ b/src/common/stylesheets/components/_modal-popup.scss @@ -286,6 +286,9 @@ border-radius: 6px; color: var(--fill-secondary); border: 0.5px solid transparent; + @media (resolution: 1dppx) { + border-width: 1px; + } background: unset; box-shadow: none; position: relative; @@ -379,6 +382,9 @@ background: var(--accent-white); border: 0.5px solid rgba(0, 0, 0, 0.02); border-radius: 100px; + @media (resolution: 1dppx) { + border-width: 1px; + } box-shadow: 0 0.2px 0.25px 0 rgba(0, 0, 0, 0.12); transition: inset-inline-start $transition; diff --git a/src/common/stylesheets/components/_outline-view.scss b/src/common/stylesheets/components/_outline-view.scss index 8ac092ecd..52dedbe9d 100644 --- a/src/common/stylesheets/components/_outline-view.scss +++ b/src/common/stylesheets/components/_outline-view.scss @@ -75,8 +75,8 @@ .spinner { width: 40px; height: 40px; - border: 4px solid #f3f3f3; - border-top: 4px solid #7e7e7e; + border: 4px solid var(--fill-quinary); + border-top: 4px solid var(--fill-secondary); border-radius: 50%; animation: spin1 1.5s linear infinite; } diff --git a/src/common/stylesheets/components/_toolbar.scss b/src/common/stylesheets/components/_toolbar.scss index 4a3782fdc..5141a7493 100644 --- a/src/common/stylesheets/components/_toolbar.scss +++ b/src/common/stylesheets/components/_toolbar.scss @@ -50,6 +50,10 @@ #pageNumber { width: 52px; text-align: right; + + &:focus { + text-align: left; + } } #numPages { diff --git a/src/common/stylesheets/components/_view-popup.scss b/src/common/stylesheets/components/_view-popup.scss index faa762469..c5349204d 100644 --- a/src/common/stylesheets/components/_view-popup.scss +++ b/src/common/stylesheets/components/_view-popup.scss @@ -39,8 +39,8 @@ .spinner { width: 16px; height: 16px; - border: 3px solid #f3f3f3; - border-top: 3px solid #7e7e7e; + border: 3px solid var(--fill-quinary); + border-top: 3px solid var(--fill-secondary); border-radius: 50%; animation: spin1 1.5s linear infinite; } @@ -120,6 +120,9 @@ border-radius: 6px; color: var(--fill-secondary); border: 0.5px solid transparent; + @media (resolution: 1dppx) { + border-width: 1px; + } &.active, &:active, &.active-pseudo-class-fix { background: var(--material-button, #FFFFFF); @@ -141,6 +144,10 @@ width: 100%; color: var(--fill-primary); height: 22px; + + &:active { + background: var(--fill-quarternary); + } } .custom-sections {