fix(playground): fix RL button position on desktop and add floating output toggle

- Fix RL buttons stuck high on desktop: media query was overriding
  bottom to 196px, now matches mobile 92px
- Add floating Visual/Synth toggle at top-right of immersive view,
  synced with the existing sheet toggle
This commit is contained in:
w1n5t0n 2026-03-22 02:11:31 +02:00
parent 3db90b035a
commit 6b6881da7d
2 changed files with 39 additions and 1 deletions

View file

@ -30,6 +30,12 @@
</div> </div>
</div> </div>
<!-- Output mode toggle (floating, top-right) -->
<div class="output-toggle-float" id="output-toggle-float">
<button class="otf-opt active" data-mode="visual">Visual</button>
<button class="otf-opt" data-mode="synth">Synth</button>
</div>
<!-- Fullscreen flow field canvas --> <!-- Fullscreen flow field canvas -->
<canvas id="vis-canvas"></canvas> <canvas id="vis-canvas"></canvas>

View file

@ -63,6 +63,38 @@ html, body {
color: var(--accent); color: var(--accent);
} }
/* ---- Output mode toggle (floating) ---- */
.output-toggle-float {
position: fixed;
top: 30px;
right: 12px;
z-index: 30;
display: flex;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
.otf-opt {
padding: 6px 14px;
font-size: 12px;
font-family: inherit;
color: var(--text-dim);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s;
}
.otf-opt.active {
background: var(--accent-dim);
color: var(--accent);
font-weight: 600;
}
/* ---- Fullscreen canvas ---- */ /* ---- Fullscreen canvas ---- */
#vis-canvas, #vis-canvas,
#synth-vis-canvas { #synth-vis-canvas {
@ -800,7 +832,7 @@ html, body {
} }
.rl-buttons { .rl-buttons {
bottom: 196px; bottom: 92px;
gap: 32px; gap: 32px;
} }