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>
36 lines
749 B
CSS
36 lines
749 B
CSS
/* Pull layers into one stack so sticky overlap works */
|
|
.scroll-section {
|
|
height: var(--stack-slot);
|
|
position: relative;
|
|
}
|
|
|
|
.scroll-section + .scroll-section {
|
|
margin-top: calc(-1 * var(--stack-pull));
|
|
}
|
|
|
|
.scroll-section--final {
|
|
height: var(--stack-slot-last);
|
|
min-height: 260px;
|
|
}
|
|
|
|
.stack-stop,
|
|
.stop {
|
|
height: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
/* Only the active layer shows its body; tabs always visible */
|
|
.scroll-section:not(.is-active) .body,
|
|
.scroll-section:not(.is-active) .layer-inner,
|
|
.scroll-section:not(.is-active) .frame-body,
|
|
.scroll-section:not(.is-active) .unit-body {
|
|
visibility: hidden;
|
|
height: 0;
|
|
min-height: 0;
|
|
margin-top: 0 !important;
|
|
padding: 0;
|
|
border: none;
|
|
overflow: hidden;
|
|
box-shadow: none;
|
|
}
|