daniel-c-harvey
26 lines
941 B
CSS
26 lines
941 B
CSS
/* The controls live inside the lava-lamp popover (Wave 4). Four knob+icon stacks laid out in a row.
|
||
On a narrow viewport the row wraps to 2×2 so all four stay reachable (spec §7d: none may drop). */
|
||
.mix-visualizer-controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
gap: 1rem 1.25rem;
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
/* One control: a RadialKnob with its Material icon as a caption underneath. RadialKnob has no icon
|
||
slot, so the icon rides adjacent (spec §7e). Center the pair so the four read as a tidy row. */
|
||
.mix-visualizer-control {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
/* 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. */
|
||
.mix-visualizer-control ::deep .mix-visualizer-control-icon {
|
||
opacity: 0.7;
|
||
}
|