-
-
-
diff --git a/playground/css/a-immersive.css b/playground/css/a-immersive.css
index b141e5c..ce062a9 100644
--- a/playground/css/a-immersive.css
+++ b/playground/css/a-immersive.css
@@ -64,35 +64,15 @@ html, body {
}
/* ---- Output mode toggle (floating) ---- */
-.output-toggle-float {
- position: fixed;
- top: 30px;
- right: 12px;
- z-index: 30;
- display: flex;
- border-radius: 6px;
+.pill-toggle-sm {
+ border-radius: 4px;
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));
+ border: 1px solid rgba(255, 255, 255, 0.08);
}
-.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;
+.pill-toggle-sm .pill-opt {
+ padding: 3px 10px;
+ font-size: 11px;
}
/* ---- Fullscreen canvas ---- */
diff --git a/playground/js/a-app.js b/playground/js/a-app.js
index 60915d9..85a53e4 100644
--- a/playground/js/a-app.js
+++ b/playground/js/a-app.js
@@ -738,16 +738,8 @@ function wireBottomSheet() {
// ---- Controls wiring ----
function wireControls() {
- // Output mode toggle (sheet)
- document.querySelectorAll('#output-toggle .pill-opt').forEach(btn => {
- btn.addEventListener('click', () => {
- syncOutputToggles(btn.dataset.mode);
- setOutputMode(btn.dataset.mode);
- });
- });
-
- // Output mode toggle (floating)
- document.querySelectorAll('#output-toggle-float .otf-opt').forEach(btn => {
+ // Output mode toggle (floating bar)
+ document.querySelectorAll('#output-toggle-float .pill-opt').forEach(btn => {
btn.addEventListener('click', () => {
syncOutputToggles(btn.dataset.mode);
setOutputMode(btn.dataset.mode);
@@ -778,8 +770,7 @@ function wireControls() {
}
function syncOutputToggles(mode) {
- document.querySelectorAll('#output-toggle .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
- document.querySelectorAll('#output-toggle-float .otf-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
+ document.querySelectorAll('#output-toggle-float .pill-opt').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
}
function setOutputMode(mode) {