From cb168c800a261f2ae1edd6257c85ddf7c271399a Mon Sep 17 00:00:00 2001 From: npeter83 Date: Tue, 11 Aug 2026 00:45:14 +0200 Subject: [PATCH] =?UTF-8?q?fix(ui):=20R10=20S4=20review=20r3=20=E2=80=94?= =?UTF-8?q?=20preserve=20glass-card=20edge=20on=20pills,=20ease=20transfor?= =?UTF-8?q?m?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two low-severity follow-ups from the third /code-review round: - .pill's resting border-color is now scoped `.pill:not(.glass-card)`, so a glass-card-resting pill (PlexSidebar scope/facet, PlexPlaylistView layout) keeps glass-card's own border incl. its lighter top-edge specular highlight, instead of having it flattened to a uniform var(--border). - add `transform` to the recipe transition so the `active:translate-y-px` press nudge on the Sidebar tag/date pills eases again (it lost the utility transition). Verified plain pills keep their resting border (Feed + YOUR TAGS) and active pills still paint solid accent. --- frontend/src/index.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index dba7d92f..3ae68bfb 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -434,12 +434,19 @@ body { .pill, .is-current { color: var(--muted); - border-color: var(--border); /* inert unless the site also adds a border-width utility */ transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, - box-shadow 0.15s ease; /* so an on-state shadow (Tabs/SettingsPanel) fades in, not pops */ + box-shadow 0.15s ease, + transform 0.15s ease; /* box-shadow: an on-state shadow (Tabs) fades; transform: an active:translate press eases */ + } + /* Resting border colour for the plain pills. NOT applied to a glass-card-resting pill (`.pill.glass-card`), + whose own border — including its lighter top-edge specular highlight — must survive. Inert unless the + site also adds a border-width utility. */ + .pill:not(.glass-card), + .is-current { + border-color: var(--border); } .pill:hover, .is-current:hover {