fix(ui): one continuous chrome gradient across nav + sticky sub-headers (#1478)
The TopNav and each sticky sub-header pinned beneath it (Gallery's filter bar, the Browse/Series/Settings/Subscriptions tabs bars) each painted their OWN dark-to-transparent gradient (Gallery) or a solid surface band (the rest), so the fade read as happening twice — dark, fade out, then dark again — instead of one gradient flowing from the nav down through the sub-nav. Operator asked to treat the sub-nav as part of the nav with a single gradient. New shared .fc-chrome-continues primitive (app.css): the nav fades from opaque to a shared --fc-chrome-seam alpha (on views flagged meta.stickyChrome), and the sub-header continues from that exact seam alpha to transparent over its own height. Both reference the same var so the alphas meet at the 64px boundary — no re-darkening, no doubling. Percentage stops keep it spanning the filter bar's expanding refine panel; the primitive's blur keeps tabs/controls legible where the old solid bars had none. --fc-chrome-seam is the single tuning knob. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -61,3 +61,35 @@
|
||||
background: rgb(var(--v-theme-accent) / 0.12);
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* --- Continuous chrome fade (operator-asked 2026-07-13: "group the sub-nav as
|
||||
part of the nav and use a single gradient in them"). ------------------------
|
||||
The TopNav and any sticky sub-header pinned directly beneath it (Gallery's
|
||||
filter bar, the Browse/Series/Settings/Subscriptions tabs bars) used to each
|
||||
paint their OWN dark-to-transparent gradient (or a solid band), so the fade
|
||||
read as happening TWICE — dark, fade out, then dark again. Instead the two
|
||||
share ONE obsidian fade: the nav paints the TOP half (opaque → the seam
|
||||
alpha) and the sub-header paints the CONTINUATION (seam alpha → transparent)
|
||||
over its own height. Both reference --fc-chrome-seam, so the alphas meet
|
||||
exactly at the 64px boundary — no re-darkening, no doubling, one gradient.
|
||||
|
||||
--fc-chrome-seam is the single knob: raise it for a heavier sub-header (more
|
||||
legible tabs/controls over scrolling content), lower it for a lighter fade. */
|
||||
:root {
|
||||
--fc-chrome-rgb: 20, 23, 26; /* obsidian #14171A — matches the TopNav */
|
||||
--fc-chrome-seam: 0.46; /* alpha where the nav hands off to the sub-header */
|
||||
}
|
||||
/* Applied to a sticky sub-header so it continues the nav's fade instead of
|
||||
restarting it. Percentage stops so the fade always spans the element's height
|
||||
(survives the filter bar's expanding refine panel). The blur keeps tabs and
|
||||
controls legible as the fill thins toward transparent — the solid-surface
|
||||
bars it replaces had none, so it must live here. */
|
||||
.fc-chrome-continues {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 0%,
|
||||
rgba(var(--fc-chrome-rgb), 0) 100%
|
||||
);
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user