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:
parent
3db90b035a
commit
6b6881da7d
2 changed files with 39 additions and 1 deletions
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue