daniel-c-harvey
38 lines
1.5 KiB
CSS
38 lines
1.5 KiB
CSS
/* Lifts the detail content above the fixed waveform backdrop (z-index: 0). */
|
|
.mix-detail-foreground {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* The lava-lamp toggle + its inline knob-bar. The anchor stacks the button over the bar and lets the
|
|
bar grow downward/leftward in place when expanded, without shoving the masthead. The bar itself is
|
|
absolutely positioned under the button (top-right of the detail body), so its open/close animation
|
|
reads as the controls growing out from the icon rather than reflowing the page (lava reframe §7b). */
|
|
.mix-visualizer-controls-anchor {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/* MixVisualizerControls renders the .mix-visualizer-controls-bar as its single root. It is a child
|
|
Razor component, so its scope attribute is not stamped here — reach the bar with ::deep to position
|
|
it as a floating-but-inline element anchored to the toggle's bottom-right. */
|
|
.mix-visualizer-controls-anchor ::deep .mix-visualizer-controls-bar {
|
|
position: absolute;
|
|
top: calc(100% + 0.5rem);
|
|
right: 0;
|
|
z-index: 3;
|
|
transform-origin: top right;
|
|
}
|
|
|
|
/* Medium square cover — deliberately smaller than the 360px cut cover so the
|
|
waveform backdrop keeps room. The placeholder/art MudPaper fills this frame. */
|
|
.mix-detail-cover {
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 220px;
|
|
margin: 0 auto 2rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
|
|
}
|