feat: LevelMeterFab tints the minimized-dock FAB icon by live audio level

2026-06-08 07:15:57 -04:00
parent b7b539743b
commit 165d935ae7
4 changed files with 188 additions and 4 deletions
@@ -0,0 +1,27 @@
+:root {
+    --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;
+}
+
+.lmf-green :deep(svg) {
+    color: var(--lmf-green);
+    filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.45));
+}
+
+.lmf-yellow :deep(svg) {
+    color: var(--lmf-yellow);
+    filter: drop-shadow(0 0 6px rgba(244, 196, 48, 0.45));
+}
+
+.lmf-orange :deep(svg) {
+    color: var(--lmf-orange);
+    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.45));
+}