Fix stack cover: shared sticky line, z-index, show body only on stack.
All folders stick at --stack-reveal; higher layers paint over lower ones. Bodies hidden until panel aligns on the stack line (no vertical list). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+15
-22
@@ -38,19 +38,25 @@ body {
|
||||
|
||||
.unit {
|
||||
position: sticky;
|
||||
top: var(--stack-reveal);
|
||||
margin: 0;
|
||||
border: 1px solid #2a3448;
|
||||
background: #161a22;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 6px 0 #0a0c10, 0 12px 24px rgba(0,0,0,0.4);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.unit-head {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(100% + var(--stack-step) * var(--layer, 0));
|
||||
display: flex; align-items: center; gap: 0.5rem;
|
||||
padding: 0.4rem 0.65rem;
|
||||
background: #1a2030;
|
||||
border-bottom: 1px solid #2a3448;
|
||||
border: 1px solid #2a3448;
|
||||
border-bottom: none;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.unit-head button.jump {
|
||||
@@ -76,26 +82,13 @@ body {
|
||||
background: #161a22;
|
||||
}
|
||||
|
||||
.u0 { top: calc(var(--stack-stick) + var(--stack-step) * 0); }
|
||||
.u0 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-tab-h)); }
|
||||
|
||||
.u1 { top: calc(var(--stack-stick) + var(--stack-step) * 1); }
|
||||
.u1 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 1 - var(--stack-tab-h)); }
|
||||
|
||||
.u2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); }
|
||||
.u2 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 2 - var(--stack-tab-h)); }
|
||||
|
||||
.u3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); }
|
||||
.u3 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 3 - var(--stack-tab-h)); }
|
||||
|
||||
.u4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); }
|
||||
.u4 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 4 - var(--stack-tab-h)); }
|
||||
|
||||
.u5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); }
|
||||
.u5 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 5 - var(--stack-tab-h)); }
|
||||
|
||||
.u6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); }
|
||||
.u6 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 6 - var(--stack-tab-h)); }
|
||||
.u0 { z-index: 10; --layer: 0; }
|
||||
.u1 { z-index: 11; --layer: 1; }
|
||||
.u2 { z-index: 12; --layer: 2; }
|
||||
.u3 { z-index: 13; --layer: 3; }
|
||||
.u4 { z-index: 14; --layer: 4; }
|
||||
.u5 { z-index: 15; --layer: 5; }
|
||||
.u6 { z-index: 16; --layer: 6; }
|
||||
|
||||
.unit-body strong { color: #e5e7eb; display: block; margin-bottom: 0.2rem; }
|
||||
.unit-body p { color: #6b7280; font-size: 0.7rem; }
|
||||
|
||||
Reference in New Issue
Block a user