/* * Themes. Each theme sets the same tokens; `data-theme` on picks one * (client/theme.js, from the account or this device), and ids come from * shared/themes.js. The theme picker puts `data-theme` on its preview cards, * so a card shows its theme with these same tokens. * * Tracks and patterns are colour-coded by a per-element `--hue`; the * `--tint-*` tokens are the saturation and lightness that hue is drawn at, * so a light theme can pull those colours down where a dark one pushes them * up: `hsl(var(--hue) var(--tint))`. * Where something should follow the theme rather than a track, `--hue: * var(--accent-hue)` draws it in the accent colour at the same levels. */ :root, [data-theme="dark"] { --bg: #0b0b13; --panel: #13141f; --panel-2: #1a1c2a; --line: #2a2d40; --line-strong: #474b66; --fg: #d4d9e6; --muted: #6d7490; --accent: #7fffd4; --accent-hue: 160; /* the accent's hue, for drawing it at the --tint-* levels */ --on-accent: #06231b; --danger: #ff6b8a; --on-danger: #2a0610; --shadow: rgb(0 0 0 / 0.5); --tint: 70% 60%; /* the track colour itself: borders, dots, notes */ --tint-bright: 80% 70%; /* highlights, hovers, sliders, graphs */ --tint-hot: 90% 75%; /* accented notes, live balls */ --tint-text: 70% 70%; /* text in the track colour */ --tint-line: 60% 40%; /* borders of tinted blocks */ --tint-fill: 45% 22%; /* tinted block backgrounds */ --tint-fill-deep: 45% 18%; --tint-fill-on: 55% 30%; /* the block that's playing / the segment that's on */ --tint-dim: 45% 30%; /* idle timeline segments */ --radius: 6px; color-scheme: dark; } [data-theme="light"] { --bg: #f3f4f9; --panel: #ffffff; --panel-2: #e9ecf4; --line: #d3d8e5; --line-strong: #adb4c9; --fg: #1b1f2e; --muted: #646d87; --accent: #0a7f60; --accent-hue: 164; /* the accent's hue, for drawing it at the --tint-* levels */ --on-accent: #ffffff; --danger: #cf2b52; --on-danger: #ffffff; --shadow: rgb(24 28 44 / 0.18); --tint: 60% 42%; --tint-bright: 65% 36%; --tint-hot: 75% 30%; --tint-text: 55% 32%; --tint-line: 50% 64%; --tint-fill: 60% 91%; --tint-fill-deep: 60% 94%; --tint-fill-on: 60% 82%; --tint-dim: 45% 74%; color-scheme: light; } [data-theme="goth"] { --bg: #060308; --panel: #0e0a12; --panel-2: #17101d; --line: #2c1f36; --line-strong: #4a3556; --fg: #d8cfe3; --muted: #7c6b8c; --accent: #b993ff; --accent-hue: 261; /* the accent's hue, for drawing it at the --tint-* levels */ --on-accent: #140a26; --danger: #ff3d62; --on-danger: #2a0610; --shadow: rgb(0 0 0 / 0.7); --tint: 55% 55%; --tint-bright: 65% 68%; --tint-hot: 80% 76%; --tint-text: 55% 68%; --tint-line: 45% 36%; --tint-fill: 35% 17%; --tint-fill-deep: 35% 13%; --tint-fill-on: 45% 25%; --tint-dim: 35% 26%; color-scheme: dark; } [data-theme="dawn"] { --bg: #fbf1ea; --panel: #fff9f5; --panel-2: #f5e4d9; --line: #e7d2c4; --line-strong: #cdae9c; --fg: #3a2830; --muted: #8f7078; --accent: #c9541f; --accent-hue: 19; /* the accent's hue, for drawing it at the --tint-* levels */ --on-accent: #fff9f5; --danger: #c22c52; --on-danger: #ffffff; --shadow: rgb(90 50 40 / 0.2); --tint: 62% 48%; --tint-bright: 70% 40%; --tint-hot: 80% 34%; --tint-text: 55% 36%; --tint-line: 55% 66%; --tint-fill: 70% 91%; --tint-fill-deep: 70% 94%; --tint-fill-on: 65% 83%; --tint-dim: 50% 74%; color-scheme: light; } [data-theme="forest"] { --bg: #0a140f; --panel: #101d15; --panel-2: #17281d; --line: #263c2d; --line-strong: #3f5c48; --fg: #d8e6da; --muted: #7d9784; --accent: #9be07a; --accent-hue: 101; /* the accent's hue, for drawing it at the --tint-* levels */ --on-accent: #082010; --danger: #ff7a6b; --on-danger: #2a0c08; --shadow: rgb(0 0 0 / 0.55); --tint: 55% 58%; --tint-bright: 65% 68%; --tint-hot: 80% 76%; --tint-text: 55% 70%; --tint-line: 45% 38%; --tint-fill: 35% 20%; --tint-fill-deep: 35% 16%; --tint-fill-on: 45% 28%; --tint-dim: 35% 28%; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); } body { font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif; } button, input, select { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } button { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 11px; cursor: pointer; } button:hover:not(:disabled) { border-color: var(--accent); } button:disabled { opacity: 0.4; cursor: default; } button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } button.ghost, a.ghost { background: transparent; border-color: transparent; color: var(--fg); } button.ghost:hover:not(:disabled) { border-color: var(--line); } button.danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); } button.toggle.on { background: var(--danger); color: var(--on-danger); } input, select { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 8px; } input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } input[type=range] { padding: 0; border: 0; background: none; accent-color: hsl(var(--hue, 160) var(--tint-bright)); } .muted { color: var(--muted); } .error { color: var(--danger); } .loading { padding: 48px; text-align: center; color: var(--muted); } .brand { font: 700 18px ui-monospace, Menlo, monospace; color: var(--fg); letter-spacing: -0.02em; } .brand span { color: var(--accent); } /* ---- shell ---- */ header.site { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--line); } header.site .user { display: flex; align-items: center; gap: 10px; } header.site img { width: 26px; height: 26px; border-radius: 50%; } .sign-in { max-width: 360px; margin: 18vh auto 0; text-align: center; display: grid; gap: 18px; justify-items: center; } .sign-in .brand { font-size: 40px; margin: 0; } .sign-in .tagline { margin: -10px 0 8px; color: var(--muted); } .dev-login { display: flex; gap: 8px; } /* Sized to sit under Google's large pill button. Apple's guidelines: white on dark backgrounds, black on light — their colours, not the theme's. */ .apple-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 220px; padding: 0 20px; border-radius: 20px; font: 500 15px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; cursor: pointer; } .apple-button svg { width: 16px; height: 16px; margin-top: -2px; } .apple-button, .apple-button:hover:not(:disabled) { border: 1px solid transparent; } .apple-button.on-dark { background: #fff; color: #000; } .apple-button.on-light { background: #000; color: #fff; } .apple-button:disabled { opacity: 0.6; cursor: default; } .notice { color: var(--muted); } .song-list { max-width: 720px; margin: 32px auto; padding: 0 16px; } .new-song { display: flex; gap: 8px; } .new-song input { flex: 1; } .song-list h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 32px 0 8px; } .song-list ul { list-style: none; margin: 0; padding: 0; } .song-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; background: var(--panel); } .song-list li a { flex: 1; font-weight: 600; } /* ---- editor ---- */ .editor { padding: 12px 20px 40px; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .toolbar .title { font-size: 18px; font-weight: 600; background: transparent; border-color: transparent; min-width: 0; flex: 0 1 320px; } .toolbar .title:hover { border-color: var(--line); } .status { font-size: 12px; color: var(--muted); } .status.error, .status.conflict { color: var(--danger); } .transport { margin-left: auto; display: flex; align-items: center; gap: 12px; } .transport input { width: 64px; margin-left: 6px; } .transport .play { min-width: 92px; font-weight: 600; } .transport .play.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 18px; overflow-x: auto; scrollbar-width: none; } .tabs a { padding: 8px 14px; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a.active { color: var(--fg); border-bottom-color: var(--accent); } /* ---- instruments ---- */ .instruments { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .track { border: 1px solid var(--line); border-left: 4px solid hsl(var(--hue) var(--tint)); border-radius: var(--radius); background: var(--panel); } .track.muted { opacity: 0.55; } .track header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; } .track header .name { font-weight: 600; flex: 1 1 120px; max-width: 200px; min-width: 0; } .track header .volume { width: 110px; } .track header .disclosure { width: 28px; padding: 5px 0; } .chain { display: flex; gap: 10px; padding: 0 10px 12px; overflow-x: auto; align-items: flex-start; } .module { flex: 0 0 320px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px; } .module-heading { margin-bottom: 8px; } .module h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--hue) var(--tint-text)); margin: 0; display: flex; align-items: center; gap: 6px; } .module.effect h3 { color: var(--fg); } .module .description { margin: 3px 0 0; font-size: 12px; color: var(--muted); line-height: 1.35; } .badge { font-size: 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; } .module .actions { margin-left: auto; display: flex; } .module .actions button { padding: 0 6px; } .module.add-effect { flex-basis: 180px; border-style: dashed; background: transparent; padding: 8px; } .module.add-effect .picker-button { width: 100%; } /* the main mix: a track-shaped card for effects on the whole song */ .track.mix { border-left: 4px solid var(--muted); margin-top: 8px; } /* Belongs to no track, so it takes the neutral foreground, not a track hue. */ .track.mix input[type=range] { accent-color: var(--fg); } .track.mix input[type=range].centered::-webkit-slider-thumb { background: var(--fg); } .track.mix input[type=range].centered::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--line) var(--from), var(--fg) var(--from) var(--to), var(--line) var(--to)); } .track.mix .segmented button.on { background: var(--line); border-color: var(--muted); } .track.mix h2 { margin: 0; font-size: 14px; font-weight: 600; } .track.mix .effects-summary { font-size: 12px; } .track.mix .hint { margin: -4px 10px 8px 46px; } .track.mix .module.effect h3 { color: var(--fg); } /* collapsed track: the instrument's primary params in one row */ .track .summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 10px 10px 46px; } .track .summary .effects-summary { font-size: 12px; } /* module picker */ .picker-button { display: inline-flex; align-items: center; gap: 6px; } .picker-button span { color: var(--muted); font-size: 11px; } .picker { position: fixed; inset: auto; margin: 0; padding: 6px; overflow-y: auto; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px var(--shadow); } .picker h5 { margin: 8px 8px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .picker-section:first-child h5 { margin-top: 2px; } .picker-item { display: grid; gap: 2px; width: 100%; text-align: left; background: transparent; border-color: transparent; padding: 7px 8px; } .picker-item:hover:not(:disabled), .picker-item:focus-visible { background: var(--panel-2); border-color: var(--line); } .picker-item.current { border-color: var(--line); } .picker-item.current strong::after { content: ' ✓'; color: var(--accent); } .picker-item .description { font-size: 12px; color: var(--muted); line-height: 1.35; } .picker-item .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .tag { font-size: 10px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 0 7px; } /* param controls */ .params { display: grid; gap: 2px; } .params .group + .group { margin-top: 8px; } .params h4 { margin: 0 0 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .params .param, .params .preset { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px; gap: 6px; align-items: center; font-size: 12px; min-height: 22px; } .params .param.choice { grid-template-columns: 80px minmax(0, 1fr); } .params .label, .params .preset > span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .params .param:hover .label { color: var(--fg); } .params .preset { grid-template-columns: 80px minmax(0, 1fr); margin-bottom: 6px; } .params .param.inactive { opacity: 0.35; } .params input[type=range] { width: 100%; min-width: 0; } .params output { text-align: right; color: var(--muted); font: 11px ui-monospace, Menlo, monospace; white-space: nowrap; } .params select { padding: 2px 4px; font-size: 12px; min-width: 0; } .segmented { display: flex; min-width: 0; } .segmented button { flex: 1 1 auto; min-width: 0; padding: 1px 3px; font-size: 11px; border-radius: 0; margin-left: -1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .segmented button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; } .segmented button:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .segmented button.on { background: hsl(var(--hue, 160) var(--tint-fill-on)); border-color: hsl(var(--hue, 160) var(--tint-line)); position: relative; } /* A range straddling zero fills outward from its center, not from the left. */ input[type=range].centered { accent-color: transparent; } input[type=range].centered::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--line) var(--from), hsl(var(--hue, 160) var(--tint-bright)) var(--from) var(--to), var(--line) var(--to)); } input[type=range].centered::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: hsl(var(--hue, 160) var(--tint-bright)); } input[type=range].centered { -webkit-appearance: none; appearance: none; height: 16px; } input[type=range].centered::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); } input[type=range].centered::-moz-range-progress { background: transparent; } .graph { display: block; width: 100%; height: 36px; background: var(--bg); border-radius: 4px; margin: 2px 0 6px; } .graph path { fill: none; stroke: hsl(var(--hue, 160) var(--tint-bright)); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .graph path.fill { stroke: none; fill: hsl(var(--hue, 160) var(--tint-bright) / 0.12); } .module.effect .graph path { stroke: var(--fg); } .module.effect .graph path.fill { fill: color-mix(in srgb, var(--fg) 8%, transparent); } .params.compact { display: flex; flex-wrap: wrap; gap: 4px 16px; } .params.compact .param { grid-template-columns: auto 110px 64px; } /* ---- patterns ---- */ .patterns { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; } .patterns.empty { display: block; text-align: center; padding: 48px; } .pattern-list ul { list-style: none; margin: 0 0 8px; padding: 0; } .pattern-list li button { width: 100%; text-align: left; border-left: 3px solid hsl(var(--hue) var(--tint)); border-radius: 0 var(--radius) var(--radius) 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pattern-list li.active button { background: var(--panel-2); border-color: var(--line); border-left-color: hsl(var(--hue) var(--tint)); font-weight: 600; } .pattern-editor { min-width: 0; } .pattern-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; } .pattern-header .name { font-weight: 600; width: 200px; } .pattern-header label select { margin-left: 6px; } .track-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .track-tabs button { border-bottom: 3px solid hsl(var(--hue) var(--tint) / 0.35); } .track-tabs button.active { border-bottom-color: hsl(var(--hue) var(--tint)); background: var(--panel-2); font-weight: 600; } .track-tabs small { color: var(--muted); font-weight: 400; margin-left: 4px; } .step-grid .octave { display: flex; gap: 6px; margin-bottom: 6px; } .step-grid .octave em { font-style: normal; color: hsl(var(--hue) var(--tint-text)); margin-left: 4px; font-size: 12px; } .grid-wrap { display: flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow-x: auto; } .labels { flex: 0 0 86px; border-right: 1px solid var(--line); } .labels .corner { height: 20px; } .row-label { display: block; width: 100%; height: 24px; padding: 0 8px; border: 0; border-radius: 0; text-align: left; background: transparent; font: 11px ui-monospace, Menlo, monospace; color: var(--muted); } .row-label.black { background: var(--bg); } .row-label:hover { color: var(--fg); } .cells { flex: 1; min-width: calc(var(--steps) * 22px); touch-action: none; user-select: none; } .step-numbers, .row { display: grid; grid-template-columns: repeat(var(--steps), 1fr); } .step-numbers { height: 20px; font: 10px ui-monospace, Menlo, monospace; color: var(--muted); } .step-numbers span { padding: 3px 0 0 3px; } .step-numbers span.now { background: hsl(var(--hue) var(--tint) / 0.35); color: var(--fg); } .row { height: 24px; cursor: pointer; } .row.black { background: var(--bg); } .cell { border-left: 1px solid var(--line); border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); } .cell.beat { border-left-color: var(--line-strong); } .cell.now { background: hsl(var(--hue) var(--tint) / 0.12); } .cell.on { background: hsl(var(--hue) var(--tint)); border-color: hsl(var(--hue) var(--tint-line)); margin: 3px 0; } .cell.on.start, .cell.on.single { margin-left: 2px; border-radius: 3px 0 0 3px; } .cell.on.end, .cell.on.single { margin-right: 2px; border-radius: 0 3px 3px 0; } .cell.on.single { border-radius: 3px; } .cell.on.held, .cell.on.end { border-left-color: transparent; } .cell.on.accent { background: hsl(var(--hue) var(--tint-hot)); box-shadow: 0 0 8px hsl(var(--hue) var(--tint-bright) / 0.6); } .cell.on.now { filter: brightness(1.3); } /* Pitched notes can be dragged to resize: say so with the cursor and a grip on the tail. */ .cells.pitched .cell.on { cursor: ew-resize; position: relative; } .cells.pitched .cell.on.end::after, .cells.pitched .cell.on.single::after { content: ''; position: absolute; right: 3px; top: 25%; bottom: 25%; width: 2px; border-radius: 1px; background: hsl(var(--hue) var(--tint-fill) / 0.7); } .note-length { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; } .note-length span { margin-right: 4px; } .note-length button { padding: 3px 9px; font: 12px ui-monospace, Menlo, monospace; } .note-length button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .hint { font-size: 12px; margin-top: 8px; } .sequencer-choice { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; } .kind-dot { color: hsl(var(--hue) var(--tint)); font-size: 9px; margin-right: 6px; vertical-align: 2px; } /* The generative editors take the theme's colour, not their track's. */ .bounce-editor { --hue: var(--accent-hue); display: grid; grid-template-columns: minmax(0, 520px) minmax(240px, 320px); gap: 18px; align-items: start; } .bounce-canvas { display: block; width: 100%; aspect-ratio: 1; touch-action: none; cursor: crosshair; border-radius: var(--radius); } .bounce-controls .field.check input { justify-self: start; } .bounce-controls .field { grid-template-columns: 92px minmax(0, 1fr) auto; } .bounce-controls .field output { min-width: 60px; } .ball-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 13px; } .ball-row span { flex: 1; } .wall-tuning .field { grid-template-columns: 96px 1fr; } .wall-tuning .field.selected > span { color: var(--fg); } .tubule-canvas { cursor: pointer; } .zone-grid { display: grid; grid-template-columns: 48px repeat(var(--sections), minmax(0, 1fr)); gap: 4px; align-items: center; font-size: 12px; } .zone-grid button { padding: 4px 2px; font: 11px ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zone-grid button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .zone-tune { display: flex; gap: 6px; margin-top: 8px; } .zone-tune select { flex: 1; min-width: 0; } .bounce-controls h4 .muted { font-weight: normal; font-size: 12px; margin-left: 4px; } /* ---- song ---- */ .palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; } .chip { border-left: 3px solid hsl(var(--hue) var(--tint)); } .arrangement { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; } .arrangement li { display: grid; grid-template-columns: 40px minmax(160px, 320px) 1fr; gap: 10px; align-items: start; } .arrangement .bar { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); text-align: right; padding-top: 11px; } .arrangement .block { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 8px; text-align: left; /* height follows length: a 16-step bar is 44px */ height: max(36px, calc(var(--length) / 16 * 44px)); background: hsl(var(--hue) var(--tint-fill)); border: 1px solid hsl(var(--hue) var(--tint-line)); padding: 9px 10px; } .arrangement .block:hover { border-color: hsl(var(--hue) var(--tint-bright)); } .arrangement li.now .block { border-color: hsl(var(--hue) var(--tint-bright)); box-shadow: 0 0 0 1px hsl(var(--hue) var(--tint-bright)); } .arrangement .name { font-weight: 600; position: relative; } .arrangement .length { margin-left: auto; color: hsl(var(--hue) var(--tint-text)); font: 11px ui-monospace, Menlo, monospace; padding-top: 2px; position: relative; } .arrangement .progress { position: absolute; left: 0; right: 0; top: 0; background: hsl(var(--hue) var(--tint-bright) / 0.18); pointer-events: none; } .block-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-top: 3px; } .block-actions button { padding: 3px 8px; font-size: 13px; } .block-actions select { padding: 3px 6px; font-size: 13px; max-width: 160px; margin: 0 4px; } .song-view .empty { padding: 32px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); } /* ---- visuals ---- */ .visuals { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .visuals-main { min-width: 0; } .preview { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 52vh; border-radius: var(--radius); border: 1px solid var(--line); background: #000; margin-bottom: 14px; } .viz-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .viz-timeline li { display: grid; grid-template-columns: 44px minmax(120px, 200px) minmax(0, 1fr); gap: 10px; align-items: start; } .viz-timeline .bar { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); text-align: right; padding-top: 11px; } .viz-timeline .block { display: flex; align-items: flex-start; gap: 8px; text-align: left; height: max(36px, calc(var(--length) / 16 * 40px)); background: hsl(var(--hue) var(--tint-fill)); border: 1px solid hsl(var(--hue) var(--tint-line)); padding: 9px 10px; font-weight: 600; } .viz-timeline .block .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viz-timeline .block.selected, .viz-timeline .block:hover { border-color: hsl(var(--hue) var(--tint-bright)); } .viz-timeline .block.selected { box-shadow: 0 0 0 1px hsl(var(--hue) var(--tint-bright)); } .viz-timeline li.now .block { background: hsl(var(--hue) var(--tint-fill-on)); } .viz-timeline .swatch { width: 16px; height: 16px; border-radius: 50%; border: 3px solid; flex: none; } .viz-blocks { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; } .viz-block { background: var(--panel-2); border-color: var(--line); padding: 8px 12px; } .viz-block small { color: var(--accent); } .viz-block.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .viz-block.continued { background: transparent; border-style: dashed; color: var(--muted); } .viz-block.continued:hover { color: var(--fg); } .viz-block.missing { color: var(--danger); border-style: dashed; } .add-viz { border-style: dashed; color: var(--muted); max-width: 130px; } .add-viz:hover, .add-viz.open { color: var(--fg); } .add-viz.open { border-style: solid; border-color: var(--accent); } .viz-block.pending { border: 1px dashed var(--accent); color: var(--accent); background: transparent; border-radius: var(--radius); font-size: 14px; } /* the visual browser, opened under a block by + Visual */ .visuals.browsing .preview { position: sticky; top: 0; z-index: 2; } .viz-browser { grid-column: 1 / -1; margin: 4px 0 12px; padding: 12px 14px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid hsl(var(--hue) var(--tint)); border-radius: var(--radius); } .viz-browser > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; } .viz-browser > header > div { flex: 1 1 240px; font-size: 13px; } .viz-browser > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .viz-browser h4 { margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .viz-browser h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; } .viz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; } .viz-card { position: relative; display: grid; align-content: start; gap: 3px; text-align: left; padding: 9px 30px 10px 11px; background: var(--panel-2); min-height: 72px; } .viz-card span { font-size: 12px; line-height: 1.35; color: var(--muted); } .viz-card.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* Already on the block: tinted in the block's colour, apart from new picks. */ .viz-card.added { background: hsl(var(--hue) var(--tint-fill-deep)); border-color: hsl(var(--hue) var(--tint-line)); } .viz-card.removing { background: var(--panel-2); border-style: dashed; border-color: var(--danger); } .viz-card.removing strong { text-decoration: line-through; color: var(--muted); } .viz-card.removing em { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .viz-block.removing { text-decoration: line-through; opacity: 0.5; border-style: dashed; } .viz-card em { justify-self: start; margin-top: 4px; font-style: normal; font-size: 11px; font-weight: 600; color: hsl(var(--hue) var(--tint-text)); background: hsl(var(--hue) var(--tint-line) / 0.35); border-radius: 999px; padding: 1px 8px; } .viz-card i { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 ui-monospace, Menlo, monospace; font-style: normal; background: var(--accent); color: var(--on-accent); } .play-here { margin-left: auto; } .visuals-config { position: sticky; top: 12px; display: grid; gap: 8px; } .visuals-config .back { justify-self: start; padding-left: 0; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .panel header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .panel h3 { margin: 0; font-size: 15px; flex: 1; } .panel h3 small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); } .panel h4 { margin: 14px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .panel .hint { font-size: 12px; margin: 0 0 10px; } .panel-actions { display: flex; } .panel-actions button { padding: 3px 8px; } .panel .field { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13px; } .panel .field > span { color: var(--muted); } .panel .field select { min-width: 0; } .panel .field output { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); min-width: 56px; text-align: right; } .panel .field.overridden > span { color: var(--fg); } .panel .field.overridden > span::after { content: ' •'; color: var(--accent); } .panel input[type=color] { width: 100%; height: 28px; padding: 2px; } .panel input[type=range] { width: 100%; min-width: 0; } .panel .reset { padding: 0 6px; } .slot { border-top: 1px solid var(--line); padding: 8px 0 4px; } .slot-head { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; font-size: 13px; } .slot-name { font: 12px ui-monospace, Menlo, monospace; color: var(--fg); } .slot-head select { min-width: 0; } .slider { display: grid; grid-template-columns: 96px 1fr 56px; gap: 8px; align-items: center; font-size: 12px; margin-top: 4px; } .slider > span { color: var(--muted); padding-left: 10px; } .slider output { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); text-align: right; } @media (max-width: 900px) { .visuals { grid-template-columns: minmax(0, 1fr); } .visuals-config { position: static; } } @media (max-width: 720px) { .editor { padding: 10px 16px 32px; } .patterns { grid-template-columns: minmax(0, 1fr); } .pattern-list ul { display: flex; flex-wrap: wrap; gap: 4px; } .transport { margin-left: 0; } .arrangement li { grid-template-columns: 28px minmax(0, 1fr); } .block-actions { grid-column: 2; padding-top: 0; } .viz-timeline li { grid-template-columns: 36px minmax(0, 1fr); } .bounce-editor { grid-template-columns: minmax(0, 1fr); } .viz-blocks { grid-column: 2; } } /* ---- site shell: nav, buttons-as-links ---- */ header.site { gap: 16px; } header.site .site-nav { display: flex; gap: 2px; flex: 1; } header.site .site-nav a { padding: 5px 10px; border-radius: var(--radius); color: var(--muted); } header.site .site-nav a:hover { color: var(--fg); } header.site .site-nav a.active { color: var(--fg); background: var(--panel-2); } header.site .me { display: flex; align-items: center; gap: 8px; color: var(--fg); } header.site .me:hover span { text-decoration: underline; } a.button { display: inline-block; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 11px; color: var(--fg); } a.button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; } .missing { padding: 48px; text-align: center; } .empty-state { padding: 32px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); } .notice { color: var(--muted); } .badge.public { color: var(--accent); border-color: var(--accent); } .song-list h1, .profile h1, .song-page h1 { font-size: 22px; margin: 0 0 12px; } .song-list h1 { margin-bottom: 18px; } /* ---- tabs as buttons (the feed) ---- */ .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; color: var(--muted); margin-bottom: -1px; } .tabs button.active { color: var(--fg); border-bottom-color: var(--accent); } .tabs button:hover:not(.active) { color: var(--fg); } /* ---- feed & song cards ---- */ .feed { max-width: 720px; margin: 20px auto 40px; padding: 0 16px; } .feed .tabs { margin: 0 0 18px; } .song-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .song-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; display: grid; gap: 8px; } .song-card-main { display: flex; gap: 12px; align-items: flex-start; color: var(--fg); } .song-card-main:hover strong { color: var(--accent); } .song-card .play-mark { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--accent); font-size: 12px; padding-left: 2px; } .song-card-main:hover .play-mark { border-color: var(--accent); } .song-card-text { display: grid; gap: 2px; min-width: 0; padding-top: 6px; } .song-card-text strong { font-size: 15px; } .song-card-desc { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .song-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; padding-left: 46px; } .owner { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); } .owner:hover { text-decoration: underline; } .owner img { width: 18px; height: 18px; border-radius: 50%; } .load-more { display: block; margin: 16px auto 0; } /* ---- genre tags & picker ---- */ .tag-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; } .genre-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; line-height: 18px; } .genre-picker { display: grid; gap: 6px; } .genre-picker-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 6px; font-size: 13px; } .genre-picker-head input { width: 180px; } .genre-picker-head .muted { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; } .genre-family { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 10px; align-items: start; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .genre-list { display: flex; flex-wrap: wrap; gap: 4px; } .genre-chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: transparent; color: var(--muted); position: relative; } .genre-chip.family { color: var(--fg); font-weight: 600; justify-self: start; } .genre-chip:hover:not(:disabled) { color: var(--fg); } .genre-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } .genre-chip.small { padding: 0 8px; font-size: 11px; } .genre-chip.suggested:not(.on)::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* ---- profile ---- */ .profile { max-width: 720px; margin: 24px auto 40px; padding: 0 16px; } .profile-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; } .profile-head img, .avatar-blank { width: 72px; height: 72px; border-radius: 50%; flex: none; } .avatar-blank { display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-size: 28px; font-weight: 700; color: var(--muted); text-transform: uppercase; } .profile-id { flex: 1; min-width: 0; } .profile-id h1 { margin: 0; } .profile .bio { margin: 8px 0 0; white-space: pre-wrap; } .profile .interests { margin: 10px 0 0; font-size: 13px; } .profile h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 8px; } .profile-form { display: grid; gap: 14px; margin-bottom: 28px; } .profile-form h2 { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--fg); margin: 0; } .profile-form label, .field-label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); } .profile-form label input, .profile-form textarea { color: var(--fg); font-size: 14px; } .profile-form textarea, .publish textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; font: inherit; color: inherit; resize: vertical; } .handle-input { display: flex; align-items: center; gap: 4px; } .handle-input input { flex: 1; } .form-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ---- song page ---- */ .song-page { max-width: 1100px; margin: 16px auto 40px; padding: 0 16px; } .stage { position: relative; } .stage-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; border-radius: var(--radius); border: 1px solid var(--line); background: #000; cursor: pointer; } .big-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 18px; font-weight: 600; border-radius: 999px; background: color-mix(in srgb, var(--bg) 75%, transparent); border: 1px solid var(--accent); color: var(--fg); backdrop-filter: blur(6px); } .big-play:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); } .big-play span { color: var(--accent); } .big-play:hover:not(:disabled) span { color: inherit; } .transport-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 20px; } .transport-row .play { min-width: 92px; font-weight: 600; } .transport-row .play.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .song-timeline { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; } .segments { position: relative; flex: 1; display: flex; gap: 2px; height: 14px; } .segment { flex: 1 1 0; min-width: 2px; padding: 0; border: 0; border-radius: 2px; background: hsl(var(--hue) var(--tint-dim)); } .segment:hover { background: hsl(var(--hue) var(--tint-line)); } .segment.now { background: hsl(var(--hue) var(--tint)); } .playhead { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fg); pointer-events: none; } .song-timeline .time { font: 12px ui-monospace, Menlo, monospace; color: var(--muted); white-space: nowrap; } .song-head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; } .song-head .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 10px; } .song-head .description { margin: 12px 0 0; max-width: 60ch; white-space: pre-wrap; color: var(--fg); } .owner-tools { flex: none; display: grid; gap: 8px; justify-items: end; font-size: 13px; } .owner-tools .notice { margin: 0; } .song-page .cta { margin-top: 28px; } /* ---- publish tab ---- */ .publish { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .publish h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; } .publish h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; } .publish .publish-form h3 + .genre-picker { margin-bottom: 22px; } .publish-status { position: sticky; top: 12px; } .publish-status h3 { color: var(--fg); font-size: 15px; text-transform: none; letter-spacing: 0; } .publish-status .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; word-break: break-all; } .publish-status .form-actions { margin-top: 12px; } @media (max-width: 900px) { .publish { grid-template-columns: minmax(0, 1fr); } .publish-status { position: static; } } @media (max-width: 720px) { header.site { padding: 10px 12px; gap: 10px; } header.site .me span { display: none; } .genre-family { grid-template-columns: minmax(0, 1fr); } .profile-head { flex-wrap: wrap; } .song-head { flex-direction: column; } .owner-tools { justify-items: start; } } /* ---- choosing a username ---- */ .choose-username { max-width: 420px; margin: 14vh auto 0; padding: 0 16px; } .choose-username .panel { display: grid; gap: 10px; padding: 20px 22px 18px; } .choose-username h1 { margin: 0; font-size: 22px; } .choose-username p { margin: 0 0 6px; } .choose-username .handle-input input { font-size: 16px; padding: 8px 10px; } .choose-username .form-actions { margin-top: 8px; } /* ---- themes: the picker and the settings page ---- */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } /* Each card carries its theme's data-theme, so its tokens are that theme's. */ .theme-card { display: grid; gap: 6px; padding: 6px 6px 8px; text-align: left; position: relative; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); } .theme-card:hover:not(:disabled) { border-color: var(--muted); } .theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .theme-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-card .swatch { display: grid; gap: 4px; padding: 6px; height: 54px; align-content: start; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; } .theme-card .swatch i { display: block; height: 5px; border-radius: 3px; } .theme-card .swatch .accent { background: var(--accent); width: 42%; } .theme-card .swatch .text { background: var(--fg); width: 78%; } .theme-card .swatch .muted { background: var(--muted); width: 58%; } .theme-card .swatch .tint { display: flex; gap: 3px; height: 8px; margin-top: 2px; } .theme-card .swatch .tint b { flex: 1; border-radius: 2px; background: hsl(var(--hue) var(--tint)); } .theme-card strong { font-size: 13px; padding: 0 2px; } .theme-card small { color: var(--muted); font-size: 11px; line-height: 1.3; padding: 0 2px; margin-top: -4px; } .theme-card .check { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 ui-monospace, Menlo, monospace; background: var(--accent); color: var(--on-accent); } .settings { max-width: 640px; margin: 24px auto 40px; padding: 0 16px; display: grid; gap: 16px; } .settings h1 { font-size: 22px; margin: 0 0 4px; } .settings .panel { display: grid; gap: 10px; padding: 16px 18px; } .settings .panel h2 { margin: 0; font-size: 16px; } .settings .panel p { margin: 0; } .settings .settings-status { font-size: 12px; min-height: 1.2em; } .settings dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; } .settings dt { color: var(--muted); } .settings dd { margin: 0; } header.site .user .settings-link { color: var(--muted); padding: 5px 8px; border-radius: var(--radius); } header.site .user .settings-link:hover, header.site .user .settings-link.active { color: var(--fg); } header.site .user .settings-link.active { background: var(--panel-2); } .choose-username { max-width: 520px; } .choose-username .field-label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); margin-top: 6px; }