daniel-c-harvey
30 lines
1.2 KiB
CSS
30 lines
1.2 KiB
CSS
/* The seven-knob band. Blazor gates its presence (the host renders this component only while the
|
|
lava-lamp is on), so this is purely a layout rule for the visible state — no collapse machinery, no
|
|
transitions, no glass surface. A plain transparent horizontal flex row of the seven knobs that wraps
|
|
to a second line only if the band is genuinely too narrow. */
|
|
.mix-visualizer-controls-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 0.85rem 1rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
/* One control: a RadialKnob with its Material icon caption underneath. RadialKnob has no icon slot, so
|
|
the icon rides adjacent (§7d). Center the pair so the seven read as a tidy bar. */
|
|
.mix-visualizer-control {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
/* The caption icon is a MudIcon (a Razor component), so Blazor CSS isolation does not stamp the scope
|
|
attribute onto its element — reach it with ::deep. Tinted to the secondary accent and the
|
|
overlay-label opacity so it matches the session-hero NowPlaying captions (§7e). */
|
|
.mix-visualizer-control ::deep .mix-visualizer-control-icon {
|
|
color: var(--mud-palette-secondary);
|
|
opacity: 0.78;
|
|
}
|