From 600d5c39daaae884dc4623d8105f2ce3a052e7fa Mon Sep 17 00:00:00 2001 From: npeter83 Date: Fri, 9 Oct 2026 00:27:28 +0200 Subject: [PATCH] feat(ui): a button over a picture answers the pointer with an accent ring The media variant's hover darkened its body from 60 to 75% black, which no one could see on a poster; a rail's scroll arrow over a card could not be told from the card's own Play under it. Its hover is now a 2px accent ring over an 80% body (owner pick B), on every card control, Plex and YouTube, and the rail arrows. DESIGN.md B3 names it beside the edged pills, with its log row. --- docs/DESIGN.md | 9 ++++++--- frontend/src/components/ui/buttonStyles.ts | 7 +++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/DESIGN.md b/docs/DESIGN.md index 59c5aa18..e5032807 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -135,9 +135,11 @@ style guide. - **State layers (B3):** hover and pressed are a layer, not a colour swap: the text colour mixed at **10%** (hover) / **16%** (pressed) over whatever the control sits on, so it reads on the page, a card and glass alike. A filled control mixes its own text colour into its fill at 14% / 24%. Opacity dimming and - `bg-card` hovers are violations (invisible on a light card). Selected stays the solid accent. The one - exception is an edged pill (a chip, a toolbar or form trigger, a segment): its hover is the accent edge - (`.pill:hover`, `glass-hover`), which reads on every surface too (owner decision F14). + `bg-card` hovers are violations (invisible on a light card). Selected stays the solid accent. The + exceptions are an edged pill (a chip, a toolbar or form trigger, a segment): its hover is the accent edge + (`.pill:hover`, `glass-hover`), which reads on every surface too (owner decision F14); and a dark + translucent button on a picture (the `media` variant: a card's hover row, a rail's scroll arrows, Restart), + whose hover is a 2px accent ring over a darker body, since a layer is lost in the picture. A card that is one row with actions answers as a whole: the layer is the card's, under its badges and buttons, and the row's open button spans the card beneath the actions (a hover that stopped at the first badge read as broken; owner, E28 — `AdminUsers` user rows). @@ -714,4 +716,5 @@ of a full-width panel and nothing on the right. | 2026-10-08 | Captions on touch | A `Tooltip` opens for a mouse and a key's focus only, never for a finger | A caption on tap; a long-press caption | On an iPad the tap that showed the caption was taken as a hover and lost its click (every rail button took two taps), and no finger sends the mouseleave that hides it; the rail's labels setting names the buttons on touch | | 2026-10-08 | Header search on touch | No key cap on a touch screen; the pill grows to 52 px so a ring shows round the 44 px Go; Go drops to its icon by the column's width | Keep the key cap; a 44 px Go overhanging a 40 px pill | On a tablet the 44 px key cap and Go sat on the pill's edge and cut the placeholder; an overhanging Go breaks the nested radii | | 2026-10-08 | Plex subtitles and the control bar | The player draws the cues itself; while the bar shows they rise above it (200 ms), then settle back | The browser's own cues, moved by `line` | On an iPad the bar covered the text; a native cue cannot be animated or measured, and our layer behaves the same on every engine | +| 2026-10-08 | Hover on a button over a picture | The `media` variant's hover is a 2px accent ring over a darker body (Plex + YT cards, rail arrows; option B) | An accent fill (reads as "selected"); a white wash (weak on a bright poster) | The 60 → 75% black step was invisible, and over a card a rail arrow could not be told from the card's own Play under it | | 2026-10-08 | Plex "Add to collection" | A movie or show card's menu row opens a panel beside the card: its library's manual collections tick in place, a name + Enter creates one with the title in it (admin; option A) | An Add submenu with a "New…" dialog; the per-title editor modal from the menu | A collection took a trip to the Collections page, a name, a title search, then a second search per title; the panel is the video card's "Add to playlist" | diff --git a/frontend/src/components/ui/buttonStyles.ts b/frontend/src/components/ui/buttonStyles.ts index f41472a8..7892826a 100644 --- a/frontend/src/components/ui/buttonStyles.ts +++ b/frontend/src/components/ui/buttonStyles.ts @@ -46,7 +46,10 @@ const BUTTON_VARIANTS: Record = { glass: "font-medium glass-card glass-hover act:hover:text-accent", // The player chrome is dark in the light theme too: a theme-fg state layer would be a dark wash. overlay: "font-medium text-white/80 act:hover:text-white act:hover:bg-white/15", - media: "font-medium bg-black/60 text-white act:hover:bg-black/75", + // On a picture a layer is lost in the picture's own light and dark: the hover is the accent edge + // (B3's edged-pill rule), a 2px ring over a darker body (owner pick B). + media: + "font-medium bg-black/60 text-white act:hover:bg-black/80 act:hover:ring-2 act:hover:ring-accent", "danger-soft": "font-medium border border-danger/60 text-danger state-layer act:hover:border-danger", link: "font-semibold text-accent act:hover:underline", @@ -112,7 +115,7 @@ const ICON_VARIANTS: Record = { glass: "glass-card glass-hover act:hover:text-accent", // The player chrome and a thumbnail are dark in the light theme too, so these two paint with // white and black, not with the theme's fg (whose state layer would be a dark wash on a dark video). - media: "bg-black/60 text-white act:hover:bg-black/75", + media: "bg-black/60 text-white act:hover:bg-black/80 act:hover:ring-2 act:hover:ring-accent", overlay: "text-white/80 act:hover:text-white act:hover:bg-white/15", };