/* ========================================================================== vv-audio.css — shared base styles for Violet Vector audio web apps -------------------------------------------------------------------------- Scope discipline: every shared class is prefixed with `vv-`. Plugin pages keep their legacy class names alongside (no ambient selectors like `.header` here) so migrating a single page at a time cannot break the layout of other pages that import this file later. Theming: pages set `--vv-accent` on `` (or a container) to re-color the header, knobs, learn-mode outlines, etc. A few neutral tokens are also exposed for backgrounds and outlines. ========================================================================== */ :root { --vv-bg: #030008; --vv-bg-2: #08000e; --vv-border: #ffffff22; --vv-border-soft:#ffffff11; --vv-text: #ccccdd; --vv-text-dim: #ffffff55; --vv-accent: #bb44ff; --vv-learn: #ffee00; --vv-danger: #ff2040; --vv-success: #22cc55; /* Touch targets — all interactive elements aim for ≥44px on mobile */ --vv-tap: 44px; --vv-tap-sm: 36px; } /* -------------------------------------------------------------------------- Base reset — scoped so we don't stomp on pages that haven't migrated -------------------------------------------------------------------------- */ .vv-app *, .vv-app *::before, .vv-app *::after { box-sizing: border-box; } .vv-app { margin: 0; padding: 0; font-family: 'JetBrains Mono', monospace; background: var(--vv-bg); color: var(--vv-accent); overflow-y: auto; overflow-x: hidden; min-height: 100vh; touch-action: manipulation; -webkit-user-select: none; user-select: none; display: flex; flex-direction: column; } /* -------------------------------------------------------------------------- Shared header — rendered by VVHeader.mount() -------------------------------------------------------------------------- */ .vv-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; background: #000005ee; border-bottom: 2px solid var(--vv-accent); border-bottom-color: color-mix(in srgb, var(--vv-accent) 30%, transparent); flex-shrink: 0; min-height: 48px; } .vv-header-back { color: var(--vv-accent); text-decoration: none; font-size: 20px; line-height: 1; padding: 6px 8px; min-width: var(--vv-tap-sm); min-height: var(--vv-tap-sm); display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } .vv-header-back:hover { background: #ffffff0c; } .vv-header h1 { font-size: 16px; letter-spacing: 4px; text-shadow: 0 0 10px color-mix(in srgb, var(--vv-accent) 30%, transparent); font-weight: 800; margin: 0; } .vv-header-spacer { flex: 1 1 0; min-width: 0; } .vv-header-btn { background: transparent; border: 1px solid var(--vv-border); border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--vv-text-dim); letter-spacing: 1px; font-family: inherit; flex-shrink: 0; min-height: var(--vv-tap-sm); min-width: var(--vv-tap-sm); line-height: 1; } .vv-header-btn:hover { color: var(--vv-text); border-color: #ffffff44; } .vv-header-btn.active { background: color-mix(in srgb, var(--vv-learn) 14%, transparent); border-color: color-mix(in srgb, var(--vv-learn) 50%, transparent); color: var(--vv-learn); box-shadow: 0 0 10px color-mix(in srgb, var(--vv-learn) 30%, transparent); } .vv-header-master { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .vv-header-master span { font-size: 9px; opacity: 0.5; letter-spacing: 1px; } .vv-header-master input[type=range] { width: 60px; accent-color: var(--vv-accent); } @media (max-width: 600px) { .vv-header { padding: 6px 8px; gap: 4px; min-height: 40px; } .vv-header h1 { font-size: 12px; letter-spacing: 2px; } .vv-header-master input[type=range] { width: 50px; } } /* -------------------------------------------------------------------------- MIDI Learn badges / armed outlines (generic — works for any `vv-learnable`) Mirrors the original `pt-*` look but scoped to shared class names. The page-local classes remain functional since vv-midi-learn.js adds both. -------------------------------------------------------------------------- */ .vv-learnable { position: relative; } .vv-learn-armed { animation: vv-learn-pulse 0.7s ease-in-out infinite; outline-offset: 1px; border-radius: 4px; } @keyframes vv-learn-pulse { 0%, 100% { outline: 2px solid var(--vv-learn); box-shadow: 0 0 6px color-mix(in srgb, var(--vv-learn) 35%, transparent); } 50% { outline: 2px solid color-mix(in srgb, var(--vv-learn) 80%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--vv-learn) 60%, transparent); } } .vv-cc-badge { position: absolute; top: -4px; right: -4px; background: var(--vv-learn); color: #000; font-size: 8px; font-weight: 800; letter-spacing: 0.5px; padding: 1px 4px; border-radius: 3px; line-height: 1.1; pointer-events: none; box-shadow: 0 0 4px color-mix(in srgb, var(--vv-learn) 40%, transparent); z-index: 5; } .vv-learn-mode .vv-learnable { cursor: crosshair; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vv-learn) 22%, transparent); } .vv-ctx-menu { position: fixed; background: #0a0515; border: 1px solid color-mix(in srgb, var(--vv-learn) 40%, transparent); border-radius: 6px; padding: 4px; z-index: 9998; box-shadow: 0 4px 20px rgba(0,0,0,0.9), 0 0 14px color-mix(in srgb, var(--vv-learn) 15%, transparent); font-family: 'JetBrains Mono', monospace; min-width: 160px; } .vv-ctx-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: color-mix(in srgb, var(--vv-learn) 80%, transparent); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 8px 10px; cursor: pointer; border-radius: 3px; min-height: var(--vv-tap-sm); } .vv-ctx-menu button:hover { background: color-mix(in srgb, var(--vv-learn) 15%, transparent); color: var(--vv-learn); } .vv-ctx-title { color: #ffffff66; font-size: 8px; padding: 4px 10px 6px; border-bottom: 1px solid #ffffff11; margin-bottom: 4px; letter-spacing: 1.5px; } /* -------------------------------------------------------------------------- Shared knob component — rendered by VVKnob.create() -------------------------------------------------------------------------- */ .vv-knob { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; } .vv-knob-label { font-size: 9px; letter-spacing: 2px; font-weight: 700; opacity: 0.9; text-align: center; } .vv-knob-canvas { cursor: ns-resize; touch-action: none; width: 64px; height: 64px; display: block; } @media (min-width: 600px) { .vv-knob-canvas { width: 72px; height: 72px; } } .vv-knob-value { font-size: 10px; font-weight: 700; opacity: 0.75; min-height: 12px; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Shared on-screen keyboard — rendered by VVOsk.mount() -------------------------------------------------------------------------- */ .vv-osk { display: none; flex-shrink: 0; padding: 6px 4px 10px; background: linear-gradient(180deg, #08001a 0%, #030008 100%); border-top: 1px solid #ffffff12; } .vv-osk.visible { display: block; } .vv-osk-toolbar { display: flex; gap: 4px; padding: 0 4px 6px; align-items: center; } .vv-osk-oct-btn { background: #0a0515; border: 1px solid var(--vv-border); border-radius: 4px; color: var(--vv-accent); font-family: inherit; font-size: 10px; font-weight: 700; padding: 6px 10px; cursor: pointer; letter-spacing: 1px; min-height: var(--vv-tap-sm); min-width: var(--vv-tap-sm); } .vv-osk-oct-btn.active { background: color-mix(in srgb, var(--vv-accent) 15%, transparent); border-color: color-mix(in srgb, var(--vv-accent) 45%, transparent); } .vv-osk-oct-btn:hover { border-color: color-mix(in srgb, var(--vv-accent) 30%, transparent); } .vv-osk-rotate-btn { background: #0a0515; border: 1px solid var(--vv-border); border-radius: 4px; color: var(--vv-text-dim); font-family: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer; min-height: var(--vv-tap-sm); min-width: var(--vv-tap-sm); } .vv-osk-keys { display: flex; position: relative; height: 140px; touch-action: none; } @media (min-height: 700px) { .vv-osk-keys { height: 170px; } } /* Brighter white keys — same aesthetic as the original PT OSK */ .vv-osk-white { flex: 1; background: linear-gradient(180deg, #2a2035 0%, #1a1325 50%, #110c1a 100%); border: 1px solid #ffffff25; border-top: 2px solid #ffffff15; border-radius: 0 0 6px 6px; margin: 0 1px; cursor: pointer; transition: all .05s; z-index: 1; position: relative; } .vv-osk-white:active, .vv-osk-white.playing { background: linear-gradient(180deg, color-mix(in srgb, var(--vv-accent) 40%, #1a0a28) 0%, color-mix(in srgb, var(--vv-accent) 25%, #10061a) 50%, #1a0c28 100%); border-color: color-mix(in srgb, var(--vv-accent) 55%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--vv-accent) 20%, transparent) inset, 0 4px 10px color-mix(in srgb, var(--vv-accent) 15%, transparent); } .vv-osk-black { position: absolute; height: 58%; background: linear-gradient(180deg, #140a1e 0%, #0a0512 60%, #06030a 100%); border: 1px solid #ffffff12; border-radius: 0 0 4px 4px; z-index: 2; cursor: pointer; transition: all .05s; box-shadow: 0 2px 6px rgba(0,0,0,0.6); } .vv-osk-black:active, .vv-osk-black.playing { background: linear-gradient(180deg, color-mix(in srgb, var(--vv-accent) 35%, #100420) 0%, color-mix(in srgb, var(--vv-accent) 20%, #0a0215) 60%, #0c0518 100%); border-color: color-mix(in srgb, var(--vv-accent) 40%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--vv-accent) 22%, transparent) inset; } .vv-osk-label { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 8px; opacity: 0.3; pointer-events: none; font-weight: 700; letter-spacing: 1px; } .vv-osk.landscape { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 998; background: var(--vv-bg); padding: 8px; display: flex; flex-direction: column; } .vv-osk.landscape .vv-osk-keys { flex: 1; height: auto; } /* -------------------------------------------------------------------------- Shared layout helpers for audio app panels -------------------------------------------------------------------------- */ .vv-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; padding: 8px; } .vv-row-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .vv-row-wrap > * { flex: 1 1 auto; min-width: 64px; } /* Touch target guarantee for buttons inside a vv-app — not applied globally so pages with legacy buttons aren't affected */ .vv-app .vv-btn, .vv-app .vv-tap { min-height: var(--vv-tap-sm); min-width: var(--vv-tap-sm); } /* Fallback for browsers without color-mix support: the rules above only affect tinting, not structural layout, so the fallback is safe. */ @supports not (color: color-mix(in srgb, red, blue)) { .vv-header-btn.active { background: #ffee0022; border-color: #ffee0088; } .vv-learn-armed { outline-color: #ffee00; } .vv-cc-badge { box-shadow: 0 0 4px #ffee0066; } }