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

fix: LevelMeterFab icon tint via inline style, bypass Blazor CSS isolation scoping of :root

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-08 08:25:56 -04:00
parent b88af29731
commit 1c942ffb2b
3 changed files with 12 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor
+3 -2
View File
@@ -1,7 +1,8 @@
@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
<button class="lmf-fab-btn @_bandClass" type="button" @onclick="OnClick">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lmf-icon" aria-hidden="true">
<button class="lmf-fab-btn" type="button" @onclick="OnClick">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="lmf-icon" aria-hidden="true"
style="@_svgStyle">
<path fill="currentColor" d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>
</button>
DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.cs
+8
View File
@@ -28,6 +28,14 @@ public partial class LevelMeterFab : ComponentBase, IAsyncDisposable
private double _smoothedDb = SilenceFloorDb;
private string _bandClass = string.Empty;
private string _svgStyle => _bandClass switch
{
"lmf-green" => "color: #2ECC71; filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.45));",
"lmf-yellow" => "color: #F4C430; filter: drop-shadow(0 0 6px rgba(244, 196, 48, 0.45));",
"lmf-orange" => "color: #FF6B35; filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.45));",
_ => ""
};
protected override async Task OnParametersSetAsync()
{
// The cascade is IsFixed, so the provider's re-renders do NOT re-run
DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.css
+1 -13
View File
@@ -1,10 +1,3 @@
/* Band color variables — tune here, applied everywhere below */
:root {
--lmf-green: #2ECC71;
--lmf-yellow: #F4C430;
--lmf-orange: #FF6B35;
}
/* Circular FAB matching MudFab Size.Large (56px) with MudBlazor primary palette */
.lmf-fab-btn {
width: 56px;
@@ -35,14 +28,9 @@
outline-offset: 3px;
}
/* The icon SVG — transitions on both color and glow */
/* Transition fires when _svgStyle changes between band states */
.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)); }