Files
daniel-c-harvey cb899a2913 Anchor ambient visualizer to viewport bottom; occlude via z-index not clip
Drop the --player-height bottom inset so the fixed visualizer fills the
viewport; the inset player bar no longer leaves a page-background gap. The
spacer now occludes via opaque page-surface + z-index. Visualizer no longer
reads --player-height, so spacer.ts coalescing is removed.
2026-06-24 09:06:45 -04:00

41 lines
1.1 KiB
CSS

/* Spacer to prevent content overlap. position:relative + z-index:1 establishes a stacking context
that paints above the WaveformVisualizer backdrop (fixed, z-index:0), and the opaque page-surface
background makes the spacer read as solid page — occluding the visualizer where it sits in flow,
the same way the app bar covers the top. Theme-aware alias, so it inverts for free. */
.player-spacer {
width: 100%;
flex-shrink: 0;
position: relative;
z-index: 1;
background: var(--deepdrft-page-surface);
}
.player-spacer.expanded {
height: var(--player-height, 60px);
}
.player-spacer.minimized {
height: 60px;
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}