From 1c942ffb2b302cb77bac767f46acdd6002380f76 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Mon, 8 Jun 2026 08:25:56 -0400
Subject: [PATCH] fix: LevelMeterFab icon tint via inline style, bypass Blazor
 CSS isolation scoping of :root

---
 .../Controls/AudioPlayerBar/LevelMeterFab.razor    |  5 +++--
 .../Controls/AudioPlayerBar/LevelMeterFab.razor.cs |  8 ++++++++
 .../AudioPlayerBar/LevelMeterFab.razor.css         | 14 +-------------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor b/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor
index 47a3b94..1e88095 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor
@@ -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>
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.cs b/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.cs
index 22b13e5..b667eb4 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.cs
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.cs
@@ -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
diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.css
index 8b16e52..c25497f 100644
--- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.css
+++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/LevelMeterFab.razor.css
@@ -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)); }