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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user