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>
|
||||
|
||||
<!-- 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 -->
|
||||
<canvas id="vis-canvas"></canvas>
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,38 @@ html, body {
|
|||
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 ---- */
|
||||
#vis-canvas,
|
||||
#synth-vis-canvas {
|
||||
|
|
@ -800,7 +832,7 @@ html, body {
|
|||
}
|
||||
|
||||
.rl-buttons {
|
||||
bottom: 196px;
|
||||
bottom: 92px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue