diff --git a/playground/a-immersive.html b/playground/a-immersive.html index ae3f78e..e24ef85 100644 --- a/playground/a-immersive.html +++ b/playground/a-immersive.html @@ -30,6 +30,12 @@ + +
+ + +
+ diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css index af0045a..6b78cf7 100644 --- a/playground/css/a-immersive.css +++ b/playground/css/a-immersive.css @@ -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; }