ilia/levkin.ca
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix stack cover: single sticky folder unit, hide inactive bodies.

Browse Source 
Tested all four variants in browser — only active layer body visible while
tabs stay staggered; scroll covers previous layers correctly.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ilia
2026-05-20 23:11:57 -04:00
co-authored by Cursor
parent bb8469ca10
commit cfe1cf3922
14 changed files with 499 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stack/stack.css
+24 -26
View File
@@ -4,6 +4,7 @@
:root {
--mono: 'IBM Plex Mono', ui-monospace, monospace;
--sans: 'Instrument Sans', system-ui, sans-serif;
--card-tab-h: 0.5rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
@@ -35,26 +36,17 @@ body {
}
.layer {
position: relative;
position: sticky;
margin: 0;
border-radius: 8px 8px 6px 6px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.layer-inner {
position: sticky;
top: var(--stack-reveal);
z-index: 10;
}
.layer-tab {
position: sticky;
z-index: 55;
left: 10px;
right: 10px;
height: 6px;
margin-bottom: -6px;
margin: 0 10px -6px;
border-radius: 5px 5px 0 0;
background: inherit;
filter: brightness(1.12);
@@ -63,26 +55,32 @@ body {
pointer-events: none;
}
.layer-0 { background: #1c1c20; }
.layer-0 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 0); }
.layer-1 { background: #24242c; }
.layer-1 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 1); }
.layer-2 { background: #2c2c36; }
.layer-2 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 2); }
.layer-3 { background: #343440; }
.layer-3 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 3); }
.layer-4 { background: #3c3c4a; }
.layer-4 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 4); }
.layer-5 { background: #444454; }
.layer-5 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 5); }
.layer-6 { background: #4c4c5e; }
.layer-6 .layer-tab { top: calc(var(--stack-stick) + var(--stack-step) * 6); }
.layer-inner {
padding: 1.2rem 1.35rem 2rem;
min-height: var(--stack-body-h);
}
.layer-0 { background: #1c1c20; top: calc(var(--stack-stick) + var(--stack-step) * 0); }
.layer-0 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--card-tab-h)); }
.layer-1 { background: #24242c; top: calc(var(--stack-stick) + var(--stack-step) * 1); }
.layer-1 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 1 - var(--card-tab-h)); }
.layer-2 { background: #2c2c36; top: calc(var(--stack-stick) + var(--stack-step) * 2); }
.layer-2 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 2 - var(--card-tab-h)); }
.layer-3 { background: #343440; top: calc(var(--stack-stick) + var(--stack-step) * 3); }
.layer-3 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 3 - var(--card-tab-h)); }
.layer-4 { background: #3c3c4a; top: calc(var(--stack-stick) + var(--stack-step) * 4); }
.layer-4 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 4 - var(--card-tab-h)); }
.layer-5 { background: #444454; top: calc(var(--stack-stick) + var(--stack-step) * 5); }
.layer-5 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 5 - var(--card-tab-h)); }
.layer-6 { background: #4c4c5e; top: calc(var(--stack-stick) + var(--stack-step) * 6); }
.layer-6 .layer-inner { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 6 - var(--card-tab-h)); }
.layer-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem;
margin-bottom: 0.65rem; padding-bottom: 0.5rem;