UI round 2: drag restored, no-ring law, #141414 empty side + outline, dashed stop ticks

Root-cause find: the sidebar 'highlighting' on ←/→ was :focus-visible —
pointer-clicked elements match it only after a keypress, so any key in
the quiz lit the still-focused session row. The arrows never moved
focus. Fix: the no-ring law (owner) — *:focus/:focus-visible outlines
removed app-wide in globals.css; surfaces keep their own affordances
and the dock's keyboard walk keeps its ring utilities.

Slider repairs:
- mousedown-preventDefault had killed click + drag in Chromium —
  removed (with tabIndex -1); the slider is natively interactive again,
  and the ring law makes its focus invisible anyway.
- Focused arrows step the STOP index on the input itself (native would
  step 1% and snap straight back — dead keys); the global handler
  skips INPUT targets, so no double-step. Enter still submits.
- Empty side: var(--muted) matched the card and vanished — now #141414
  (the owner's main-background pick), and the pill carries a border
  again (border-border).
- Dashed tick per snap stop below the bar, inset by the thumb's
  half-width so each tick sits under the thumb's center at that stop.
This commit is contained in:
amosblomqvist
2026-10-02 00:52:08 +03:00
parent 62cfb8112b
commit 2f301322aa
2 changed files with 93 additions and 45 deletions
+12
View File
@@ -15,6 +15,18 @@
* future settings UI reassigns them (configurable per the owner).
*/
/* The no-ring law (owner, UI round 2026-10-01): the browser's default
focus/focus-visible outline appears NOWHERE in the app. Pointer focus
never showed it; any keypress while a clicked element still held focus
DID (:focus-visible re-evaluates on key input — a clicked sidebar
session lit up when the quiz's ←/→ were pressed). Surfaces carry their
own hover/active/selected affordances; the dock's keyboard walk uses
its own ring utilities, unaffected by an outline reset. */
*:focus,
*:focus-visible {
outline: none;
}
/* Palette (owner's hexes): main #141414, raised #1C1C1C, edges #434343.
Mono chrome = JetBrains Mono; prose = Source Sans 3; titles = CMU Serif. */
:root {