Houmeres/LLeMbas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 23 Wiki Activity

A tab bar's edge fade that stays hidden until something is off the edge

Browse Source 
The local-attached covers were as wide as the scroll shadows and solid for
only 40% of that, so most of each shadow showed at rest -- invisible on Moria,
a grey sliver at both ends of every tab bar on Shire. The covers are now twice
the shadow's width and solid across all of it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Homer
2026-09-28 06:53:45 +00:00
co-authored by Claude Opus 5.5
parent db22962164
commit dfd8418d95
4 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/web/static/css/admin.css
+11 -3
View File
@@ -167,16 +167,24 @@ a.tabs__tab { text-decoration: none; }
pinned to the scrollport with `background-attachment: local`, which is the old
trick and works everywhere -- the `local` layers scroll with the content and
cover the `scroll` ones exactly when there is nothing more to see.
⚠ "Cover" has to mean all of it. The covers used to be as wide as the
shadows and solid for only 40% of that width, so the other 60% of every
shadow always showed through, with nothing to scroll to. On Moria that is
near-black on near-black and nobody saw it. On Shire it was a grey sliver at
both ends of every tab bar. Each cover is now twice the shadow's width and
solid across the first half, which is the whole shadow. It fades only past
the shadow's end, so once content is scrolled the shadow shows as before.
*/
.tabs__bar {
background-image:
linear-gradient(to right, var(--bg) 40%, transparent),
linear-gradient(to left, var(--bg) 40%, transparent),
linear-gradient(to right, var(--bg) 50%, transparent),
linear-gradient(to left, var(--bg) 50%, transparent),
linear-gradient(to right, var(--scrim), transparent 1.5rem),
linear-gradient(to left, var(--scrim), transparent 1.5rem);
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 1.5rem 100%;
background-size: 3rem 100%, 3rem 100%, 1.5rem 100%, 1.5rem 100%;
background-attachment: local, local, scroll, scroll;
/* A tab is a destination, so a flick should land on one rather than between
two. */