daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

polish(p15): mute panel, revert scroll to knob, waveform icon + strong toggle state

Browse Source 
Mute --deepdrft-panel-ground; WAVE scroll MudSlider back to RadialKnob; new DDIcons Waveform/WaveformFilled glyph for the waveform toggle; strong green ON-state chip vs dim OFF; refresh popover pointer-capture comment.
This commit is contained in:
daniel-c-harvey
2026-06-17 18:03:16 -04:00
parent 412b96ba16
commit 6ecc7f1f37
5 changed files with 80 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+13 -16
View File
@@ -426,7 +426,7 @@ h2, h3, h4, h5, h6,
/* ── Row layout (§3). Each row is a horizontal band. Row 1 (MODE) and row 3 (WAVE) use
space-between so the right-pinned control (color / width) hugs the far edge. Row 2 (LAVA) uses
flex-start so its label + four knobs group left rather than spreading edge-to-edge.
align-items: center so the WAVE slider and section label vertically center with each other (defect #4). ── */
align-items: center so the section label and knobs vertically center with each other. ── */
.waveform-visualizer-control-panel .wvc-row {
display: flex;
flex-direction: row;
@@ -473,29 +473,26 @@ h2, h3, h4, h5, h6,
opacity: 0.85;
}
/* ── The lamp toggles (§3 row 1). Iconographic lit/unlit lamp glyph, GREEN because interactive (§5).
Color="Color.Primary" already drives the glyph currentColor to the pinned green --mud-palette-primary;
this just sizes the hit-target to read as a row-1 peer of the knobs. ── */
/* ── The toggles (§3 row 1). Two state classes control the active-state chip treatment:
ON (.wvc-toggle-on): green-accent filled chip — unmistakably active at a glance.
OFF (.wvc-toggle-off): fully transparent background, glyph at low opacity — clearly inactive.
The MudIconButton glyph is already driven green (Color.Primary → pinned green accent, interactive §5).
The chip background reinforces state without recolouring the glyph further. ── */
.waveform-visualizer-control-panel .wvc-toggle {
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: background 0.15s ease;
}
/* ── The scroll SLIDER (§8). Track/thumb green (the pinned --mud-palette-primary, interactive). Give it
a sensible width so it reads as "position along a continuum" next to the rotary width knob. ── */
.waveform-visualizer-control-panel .wvc-slider {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
min-width: 160px;
flex: 1 1 auto;
align-self: center;
.waveform-visualizer-control-panel .wvc-toggle-on {
background: color-mix(in srgb, var(--deepdrft-green-accent) 28%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--deepdrft-green-accent) 55%, transparent);
}
.waveform-visualizer-control-panel .wvc-slider .mud-slider {
width: 100%;
.waveform-visualizer-control-panel .wvc-toggle-off .mud-icon-button {
opacity: 0.38;
}
/* Caption icons render LIGHT (§5/§9: static/decorative = light). !important beats the scoped