fix: dark-theme hero buttons green in dark mode; correct source-order comment
Both ::deep and global selectors are (0,3,0); override wins on source order (deepdrft-styles.css linked after scoped bundle in App.razor).
This commit is contained in:
@@ -29,15 +29,17 @@
|
||||
the shared WaveformVisualizerControlState and raises Changed; the visualizer bridge subscribes. This
|
||||
host only toggles open/closed and centers the panel — it stays purely presentational. *@
|
||||
|
||||
<MudTooltip Text="Visualizer settings">
|
||||
<MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
|
||||
Size="@IconSize"
|
||||
Color="Color.Secondary"
|
||||
Disabled="@(!RendererInfo.IsInteractive)"
|
||||
OnClick="@Toggle"
|
||||
aria-label="Visualizer settings"
|
||||
aria-expanded="@_open" />
|
||||
</MudTooltip>
|
||||
<div class="dd-lava-lamp-trigger">
|
||||
<MudTooltip Text="Visualizer settings">
|
||||
<MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
|
||||
Size="@IconSize"
|
||||
Color="Color.Secondary"
|
||||
Disabled="@(!RendererInfo.IsInteractive)"
|
||||
OnClick="@Toggle"
|
||||
aria-label="Visualizer settings"
|
||||
aria-expanded="@_open" />
|
||||
</MudTooltip>
|
||||
</div>
|
||||
|
||||
@* 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
|
||||
|
||||
@@ -776,6 +776,45 @@ body:has(.waveform-visualizer-control-overlay) {
|
||||
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
|
||||
Shared block rendered just below the hero/header on every release detail page
|
||||
|
||||
Reference in New Issue
Block a user