fix(ui): R10 S4 review r3 — preserve glass-card edge on pills, ease transform
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.
This commit is contained in:
@@ -434,12 +434,19 @@ body {
|
|||||||
.pill,
|
.pill,
|
||||||
.is-current {
|
.is-current {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
border-color: var(--border); /* inert unless the site also adds a border-width utility */
|
|
||||||
transition:
|
transition:
|
||||||
color 0.15s ease,
|
color 0.15s ease,
|
||||||
background-color 0.15s ease,
|
background-color 0.15s ease,
|
||||||
border-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,
|
.pill:hover,
|
||||||
.is-current:hover {
|
.is-current:hover {
|
||||||
|
|||||||
Reference in New Issue
Block a user