[style](trx-frontend-http): fade the scrolled tab strip edge
CI / lint (pull_request) Successful in 2m19s
CI / test (pull_request) Successful in 8m17s
CI / frontend (pull_request) Successful in 3m0s
CI / reuse (pull_request) Successful in 3s
CI / lint (push) Successful in 2m17s
CI / test (push) Successful in 7m33s
CI / frontend (push) Successful in 2m9s
CI / reuse (push) Successful in 3s
CI / lint (pull_request) Successful in 2m19s
CI / test (pull_request) Successful in 8m17s
CI / frontend (pull_request) Successful in 3m0s
CI / reuse (pull_request) Successful in 3s
CI / lint (push) Successful in 2m17s
CI / test (push) Successful in 7m33s
CI / frontend (push) Successful in 2m9s
CI / reuse (push) Successful in 3s
The page tabs scroll rather than wrap, so the last visible tab was sliced
mid-word ("Se…" for Settings), which reads as a rendering fault instead of
as an invitation to scroll.
Fade the trailing edge with a mask. A colour-matched cover gradient is
the usual trick, but the card is transparent, so a cover would have to
track the page background across both themes and all nine styles; a mask
is colour-agnostic. Only the trailing edge is faded, leaving the first
tab crisp while the strip sits at rest.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit was merged in pull request #25.
This commit is contained in:
@@ -1549,6 +1549,15 @@ small { color: var(--text-muted); }
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
/* Fade the trailing edge so a tab scrolled out of view reads as "there is more"
|
||||||
|
* rather than as a label cut mid-word. A mask rather than a colour-matched
|
||||||
|
* cover gradient: the card is transparent, so a cover would have to track the
|
||||||
|
* page background across both themes and all nine styles. Only the trailing
|
||||||
|
* edge is faded, so the first tab stays crisp when the strip is at rest. */
|
||||||
|
.tab-bar-nav {
|
||||||
|
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
|
||||||
|
mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
|
||||||
|
}
|
||||||
.tab-bar-nav::-webkit-scrollbar { height: 3px; }
|
.tab-bar-nav::-webkit-scrollbar { height: 3px; }
|
||||||
.tab-bar-nav::-webkit-scrollbar-thumb {
|
.tab-bar-nav::-webkit-scrollbar-thumb {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|||||||
Reference in New Issue
Block a user