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

fix(LevelMeterFab): replace MudFab with hand-rolled button+SVG so band color tinting is no longer overridden by MudBlazor internals

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-08 07:46:49 -04:00
parent 9169493d41
commit 7eae599490
4 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.css
+36 -15
View File
@@ -1,27 +1,48 @@
/* Band color variables — tune here, applied everywhere below */
:root {
--lmf-green: #2ECC71;
--lmf-green: #2ECC71;
--lmf-yellow: #F4C430;
--lmf-orange: #FF6B35;
}
/* The wrapper div is the isolation anchor; MudFab wraps the glyph in its own
markup, so the band tint reaches the rendered SVG via :deep(). currentColor
on the idle (no-band) state inherits MudFab's Color.Primary contrast text. */
.lmf-root :deep(svg) {
transition: color 120ms ease-out;
/* Circular FAB matching MudFab Size.Large (56px) with MudBlazor primary palette */
.lmf-fab-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
background-color: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 3px 5px -1px rgba(0,0,0,.2),
0px 6px 10px 0px rgba(0,0,0,.14),
0px 1px 18px 0px rgba(0,0,0,.12);
transition: box-shadow 150ms ease-out;
padding: 0;
}
.lmf-green :deep(svg) {
color: var(--lmf-green);
filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.45));
.lmf-fab-btn:hover {
box-shadow: 0px 7px 8px -4px rgba(0,0,0,.2),
0px 12px 17px 2px rgba(0,0,0,.14),
0px 5px 22px 4px rgba(0,0,0,.12);
}
.lmf-yellow :deep(svg) {
color: var(--lmf-yellow);
filter: drop-shadow(0 0 6px rgba(244, 196, 48, 0.45));
.lmf-fab-btn:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 3px;
}
.lmf-orange :deep(svg) {
color: var(--lmf-orange);
filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.45));
/* The icon SVG — transitions on both color and glow */
.lmf-icon {
width: 24px;
height: 24px;
transition: color 120ms ease-out, filter 120ms ease-out;
}
/* Band tints — applied directly to the SVG via fill="currentColor" */
.lmf-green .lmf-icon { color: var(--lmf-green); filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.45)); }
.lmf-yellow .lmf-icon { color: var(--lmf-yellow); filter: drop-shadow(0 0 6px rgba(244, 196, 48, 0.45)); }
.lmf-orange .lmf-icon { color: var(--lmf-orange); filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.45)); }