/* Audio/MIDI Web UI — Shared Styles Version: 1.0.0 License: MIT Philosophy: timeless, plain, restrained; keyboard-first; no dependencies. */ /* ============================= Design Tokens ============================= */ :root { /* Color system */ --bg: #0f1115; /* dark by default; swapped by media query */ --panel: #151923; --elev: #1b2030; --text: #e8eaf0; --muted: #a9b0c0; --subtle: #6c7280; --stroke: #2a3142; --accent: #3aa3ff; /* primary accent */ --accent-2: #59d38c; /* secondary accent (meters, success) */ --danger: #ff5d6e; --warn: #ffbf4d; /* Shadows & radii */ --radius: 12px; --radius-sm: 8px; --shadow-1: 0 1px 0 rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --fs-1: clamp(12px, 0.78rem, 14px); --fs-2: clamp(13px, 0.86rem, 15px); --fs-3: clamp(14px, 0.94rem, 16px); --fs-4: clamp(16px, 1.1rem, 18px); /* section titles */ --fs-5: clamp(18px, 1.25rem, 22px); /* page title */ /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* Component metrics */ --field-h: 40px; --btn-h: 36px; --ring: 2px; } @media (prefers-color-scheme: light) { :root { --bg: #f7f8fa; --panel: #ffffff; --elev: #f2f4f8; --text: #111317; --muted: #3b4150; --subtle: #707789; --stroke: #d9dde7; --shadow-1: 0 1px 0 rgba(15,17,21,.04), 0 6px 20px rgba(15,17,21,.06); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); } } /* Explicit theme override via data-theme on */ html[data-theme="dark"] { color-scheme: dark; --bg: #0f1115; --panel: #151923; --elev: #1b2030; --text: #e8eaf0; --muted: #a9b0c0; --subtle: #6c7280; --stroke: #2a3142; --shadow-1: 0 1px 0 rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); } html[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --panel: #ffffff; --elev: #f2f4f8; --text: #111317; --muted: #3b4150; --subtle: #707789; --stroke: #d9dde7; --shadow-1: 0 1px 0 rgba(15,17,21,.04), 0 6px 20px rgba(15,17,21,.06); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); } /* ============================= Base & Layout ============================= */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 400 var(--fs-3)/1.45 var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-5); } .page-title { font-size: var(--fs-5); letter-spacing: .2px; margin: 0 0 var(--space-4); } .section-title { font-size: var(--fs-4); margin: var(--space-6) 0 var(--space-3); } .subtle { color: var(--subtle); } .mono { font-family: var(--font-mono); font-size: var(--fs-2); } .card { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow-1); } .card.pad { padding: var(--space-5); } .hr { height: 1px; background: var(--stroke); border: 0; margin: var(--space-6) 0; } /* Utility stacks */ .stack { display: grid; gap: var(--space-4); } .stack-sm { display: grid; gap: var(--space-2); } .cluster { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .grid { display: grid; gap: var(--space-4); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 820px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } } /* ============================= Interactive Primitives ============================= */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: calc(var(--radius-sm) - 2px); } button, .btn { --_bg: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, transparent), color-mix(in oklab, var(--accent) 72%, transparent)); --_text: #07121c; appearance: none; border: 0; cursor: pointer; user-select: none; height: var(--btn-h); padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--_bg); color: var(--_text); font-weight: 600; letter-spacing: .2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.25); transition: transform .06s ease, box-shadow .2s ease, filter .2s ease; } button:hover { filter: brightness(1.04); } button:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--stroke); box-shadow: none; font-weight: 500; } .btn-muted { background: color-mix(in oklab, var(--panel) 70%, var(--bg)); color: var(--text); } .btn-danger { --_bg: linear-gradient(180deg, color-mix(in oklab, var(--danger) 88%, transparent), color-mix(in oklab, var(--danger) 72%, transparent)); } .btn-icon { width: var(--btn-h); padding: 0; display: inline-grid; place-items: center; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--text); font-size: var(--fs-2); border: 1px solid var(--stroke); } /* Fieldset & labels */ .field { display: grid; gap: 6px; } label { font-size: var(--fs-2); color: var(--muted); } .help { font-size: var(--fs-1); color: var(--subtle); } input[type="text"], input[type="number"], input[type="search"], select, .select, textarea { height: var(--field-h); width: 100%; background: color-mix(in oklab, var(--panel) 85%, transparent); border: 1px solid var(--stroke); border-radius: var(--radius-sm); color: var(--text); padding: 0 var(--space-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } textarea { min-height: 120px; padding: var(--space-3); resize: vertical; } select { background-image: none; } /* Slider */ input[type="range"] { -webkit-appearance: none; width: 100%; height: 22px; background: transparent; } input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: color-mix(in oklab, var(--panel) 70%, transparent); border-radius: 999px; border: 1px solid var(--stroke); } input[type="range"]::-moz-range-track { height: 6px; background: color-mix(in oklab, var(--panel) 70%, transparent); border-radius: 999px; border: 1px solid var(--stroke); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.4); border: 1px solid color-mix(in oklab, var(--accent) 28%, black); } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 28%, black); box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.4); } /* Switch */ .switch { --w: 46px; --h: 26px; position: relative; width: var(--w); height: var(--h); } .switch input { position: absolute; inset: 0; opacity: 0; } .switch .track { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in oklab, var(--panel) 70%, transparent); border: 1px solid var(--stroke); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: background .2s ease; } .switch .thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform .2s ease; box-shadow: 0 2px 10px rgba(0,0,0,.3); } .switch input:checked + .track { background: color-mix(in oklab, var(--accent) 22%, transparent); } .switch input:checked + .track .thumb { transform: translateX(20px); } /* Tabs */ .tabs { display: flex; gap: 2px; padding: 2px; background: color-mix(in oklab, var(--panel) 85%, transparent); border: 1px solid var(--stroke); border-radius: var(--radius-sm); } .tabs button { flex: 1; background: transparent; color: var(--muted); border-radius: 8px; box-shadow: none; height: 34px; font-weight: 600; } .tabs button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); border: 1px solid var(--stroke); } /* Toolbar */ .toolbar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--radius-sm); } .toolbar .spacer { flex: 1; } /* Table */ .table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); } .table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--stroke); text-align: left; } .table th { color: var(--muted); font-weight: 600; } .table tr:hover { background: color-mix(in oklab, var(--panel) 82%, transparent); } /* Progress / Meters */ progress { width: 100%; height: 10px; appearance: none; } progress::-webkit-progress-bar { background: color-mix(in oklab, var(--panel) 75%, transparent); border-radius: 999px; border: 1px solid var(--stroke); } progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-2), color-mix(in oklab, var(--accent) 65%, var(--accent-2))); border-radius: 999px; } progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-2), color-mix(in oklab, var(--accent) 65%, var(--accent-2))); border-radius: 999px; } .meter { height: 10px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; } .meter span { display: block; height: 100%; background: color-mix(in oklab, var(--panel) 70%, transparent); border-radius: 2px; } .meter span.on { background: linear-gradient(180deg, var(--accent-2), color-mix(in oklab, var(--accent-2) 65%, black)); } /* Pads (MPC-style) */ .pad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--space-3); width: 100%; } .pad-btn { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 88%, transparent), color-mix(in oklab, var(--panel) 65%, transparent)); border: 1px solid var(--stroke); box-shadow: var(--shadow-1); font-weight: 700; color: var(--muted); } .pad-btn[data-active="true"], .pad-btn:active { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, var(--panel)), color-mix(in oklab, var(--accent) 18%, var(--panel))); color: #0e1722; } /* Code */ code, pre { font-family: var(--font-mono); font-size: var(--fs-2); } pre { background: var(--elev); border: 1px solid var(--stroke); border-radius: var(--radius); padding: var(--space-4); overflow: auto; } /* Helpers */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .mute { color: var(--muted); } /* Footer */ footer { margin-top: var(--space-8); color: var(--subtle); font-size: var(--fs-2); }