Phase 10 reframe R4: seven-knob inline visualizer controls, always-on lava loop, filled lava-lamp icon

2026-06-16 17:17:14 -04:00
parent fe28573b68
commit 41ac7a5a93
9 changed files with 518 additions and 343 deletions
@@ -4,6 +4,28 @@
    z-index: 1;
 }

+/* The lava-lamp toggle + its inline knob-bar. The anchor stacks the button over the bar and lets the
+   bar grow downward/leftward in place when expanded, without shoving the masthead. The bar itself is
+   absolutely positioned under the button (top-right of the detail body), so its open/close animation
+   reads as the controls growing out from the icon rather than reflowing the page (lava reframe §7b). */
+.mix-visualizer-controls-anchor {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+/* MixVisualizerControls renders the .mix-visualizer-controls-bar as its single root. It is a child
+   Razor component, so its scope attribute is not stamped here — reach the bar with ::deep to position
+   it as a floating-but-inline element anchored to the toggle's bottom-right. */
+.mix-visualizer-controls-anchor ::deep .mix-visualizer-controls-bar {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    z-index: 3;
+    transform-origin: top right;
+}
+
 /* Medium square cover — deliberately smaller than the 360px cut cover so the
   waveform backdrop keeps room. The placeholder/art MudPaper fills this frame. */
 .mix-detail-cover {