fix(ui): one continuous chrome gradient across nav + sticky sub-headers (#1478)
CI / lint (push) Successful in 2s
CI / frontend-build (push) Successful in 20s
CI / backend-lint-and-test (push) Successful in 44s
CI / integration (push) Successful in 3m50s

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:
2026-07-13 14:42:07 -04:00
parent 61b14e8f65
commit eed42a260a
8 changed files with 81 additions and 34 deletions
+32
View File
@@ -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);
}