Merge dark-theme-hero-buttons into dev

Green hero Share/Play/Queue, lava-lamp, and gas-lamp affordances in dark theme.
This commit is contained in:
daniel-c-harvey
2026-06-20 01:51:01 -04:00
2 changed files with 50 additions and 9 deletions
@@ -29,15 +29,17 @@
the shared WaveformVisualizerControlState and raises Changed; the visualizer bridge subscribes. This the shared WaveformVisualizerControlState and raises Changed; the visualizer bridge subscribes. This
host only toggles open/closed and centers the panel — it stays purely presentational. *@ host only toggles open/closed and centers the panel — it stays purely presentational. *@
<MudTooltip Text="Visualizer settings"> <div class="dd-lava-lamp-trigger">
<MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)" <MudTooltip Text="Visualizer settings">
Size="@IconSize" <MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
Color="Color.Secondary" Size="@IconSize"
Disabled="@(!RendererInfo.IsInteractive)" Color="Color.Secondary"
OnClick="@Toggle" Disabled="@(!RendererInfo.IsInteractive)"
aria-label="Visualizer settings" OnClick="@Toggle"
aria-expanded="@_open" /> aria-label="Visualizer settings"
</MudTooltip> aria-expanded="@_open" />
</MudTooltip>
</div>
@* The tinted modal scrim that also HOLDS the panel. DarkBackground = the mild tint; OnClick on the scrim @* The tinted modal scrim that also HOLDS the panel. DarkBackground = the mild tint; OnClick on the scrim
dismisses (knob-drag-safe, see header). The panel is the overlay's centered child; it stops click dismisses (knob-drag-safe, see header). The panel is the overlay's centered child; it stops click
@@ -776,6 +776,45 @@ body:has(.waveform-visualizer-control-overlay) {
color: var(--deepdrft-primary); color: var(--deepdrft-primary);
} }
/* Dark-theme interactive affordances in the Session/Mix release-detail hero overlay.
The co-located ReleaseHeroOverlay.razor.css forces .release-hero-play and
.release-hero-share icons to --deepdrft-white unconditionally (correct for the
over-image light-theme contract). In dark theme the play and share glyphs adopt
green to match the "green = interactive" convention. Both the scoped ::deep rule
([b-xxx] .release-hero-play .mud-icon-button) and this global rule
(.deepdrft-theme-dark .release-hero-play .mud-icon-button) compute to specificity
(0,3,0) — a tie — so the override wins on source order: deepdrft-styles.css is
linked after DeepDrftPublic.styles.css in App.razor, making it the later rule.
No !important needed. .mud-progress-circular is included alongside .mud-icon-button
in the play slot to colour the loading spinner green as well.
Light theme: pixel-identical to before. */
.deepdrft-theme-dark .release-hero-play .mud-icon-button,
.deepdrft-theme-dark .release-hero-play .mud-progress-circular,
.deepdrft-theme-dark .release-hero-share .mud-icon-button {
color: var(--deepdrft-primary);
}
/* Dark-theme lava-lamp visualizer-settings trigger.
The MudIconButton uses Color.Secondary, which resolves to off-white in dark mode.
The .dd-lava-lamp-trigger marker div (added to WaveformVisualizerControlPopover.razor)
scopes this rule to only that trigger, preventing bleed onto other Secondary icon
buttons sharing the same host pages. Applied at all host sites (Mix, Cut, Session,
NowPlaying) since the wrapper travels with the component. Light theme: unchanged. */
.deepdrft-theme-dark .dd-lava-lamp-trigger .mud-icon-button {
color: var(--deepdrft-primary);
}
/* Dark-theme gas-lamp dark-mode toggle.
The MudIconButton uses Color.Inherit and sits inside .dd-nav-actions (the right-side
cluster of the nav bar). In dark theme it inherits the nav text colour (off-white);
green makes it consistent with the "green = interactive" convention. The selector is
scoped to .dd-nav-actions so no other icon buttons are affected. Covers both the
desktop nav and the mobile nav (which also renders its gas-lamp inside .dd-nav-actions).
Light theme: unchanged. */
.deepdrft-theme-dark .dd-nav-actions .mud-icon-button {
color: var(--deepdrft-primary);
}
/* ============================================================================= /* =============================================================================
RELEASE DESCRIPTION BLURB RELEASE DESCRIPTION BLURB
Shared block rendered just below the hero/header on every release detail page Shared block rendered just below the hero/header on every release detail page