calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vhg6j0bp2: Add frosted top bar and progress rail to the mobile feed

Browse Source
This commit is contained in:
calcazar
2026-10-20 08:53:40 -06:00
parent cfdca1f270
commit a757c960eb
3 changed files with 118 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/mobile.css
+55 -2
View File
@@ -174,7 +174,7 @@
.is-cur.slide-playing .slide-meta { animation: none; }
/* Own-post menu: frosted "..." at the top right, the card's delete confirm under it. */
.slide-menu { position: absolute; top: 70px; right: 12px; z-index: 6; }
.slide-menu { position: absolute; top: calc(70px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 6; }
.slide-menu-btn {
appearance: none;
display: grid;
@@ -309,7 +309,7 @@
/* New-posts pill floats over the top of the reel. */
.reel-pill {
position: absolute;
top: 76px;
top: calc(76px + env(safe-area-inset-top, 0px));
left: 0;
right: 0;
z-index: 8;
@@ -377,3 +377,56 @@
.dk-beat svg { animation: none !important; }
.slide-art { transition: none !important; }
}
/* Top bar (spec "Top bar"): frosted pills over the feed. Over a media slide they use a
dark translucent glass with white text; over a text slide the theme glass. The bar
ends 56px (plus the top inset) down, above the own-post menu at 70px. */
.ph-top {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 0;
pointer-events: none;
}
.ph-top > * { pointer-events: auto; }
.ph-glass {
background: var(--glass);
-webkit-backdrop-filter: blur(16px) saturate(1.6);
backdrop-filter: blur(16px) saturate(1.6);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--ink);
transition: background .3s var(--ease), color .3s var(--ease);
}
.reel-feed[data-on-media="true"] .ph-glass {
background: var(--media-glass);
color: var(--on-media);
box-shadow: inset 0 0 0 1px var(--on-media-line);
}
.ph-brand { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 10px; border-radius: 14px; }
.ph-brand .type-wordmark { font-size: 13px; }
.ph-theme { appearance: none; border: 0; margin: 0; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 14px; cursor: pointer; }
.ph-theme svg { width: 20px; height: 20px; }
.ph-theme:active { transform: scale(.94); }
/* Progress rail: position in the loaded feed, on the right edge. */
.rail-v {
position: absolute;
right: 5px;
top: 50%;
height: 110px;
margin-top: -55px;
width: 3px;
border-radius: 2px;
background: var(--line-2);
z-index: 15;
overflow: hidden;
pointer-events: none;
}
.rail-v i { display: block; width: 100%; background: var(--accent); border-radius: 2px; transition: height .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .rail-v i { transition: none; } }