/* MTAedit — style cloned from /opt/Recode/static/index.html */ :root, [data-theme="dark"] { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1c2129; --bg-card: #1c2333; --bg-hover: #22272e; --bg-input: #0d1117; --border: #30363d; --border-light: #3d444d; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; --accent: #58a6ff; --accent-dim: #1f6feb; --success: #3fb950; --success-dim: #238636; --warning: #d29922; --warning-dim: #9e6a03; --error: #f85149; --error-dim: #da3633; --purple: #bc8cff; --cyan: #39d2e0; --orange: #f0883e; --radius: 8px; --radius-lg: 12px; --transition: 0.2s ease; --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace; } [data-theme="light"] { --bg-primary: #f0f2f5; --bg-secondary: #f6f8fa; --bg-tertiary: #eef1f5; --bg-card: #ffffff; --bg-hover: #f0f3f6; --bg-input: #ffffff; --border: #d0d7de; --border-light: #bbc0c7; --text-primary: #1f2328; --text-secondary: #656d76; --text-muted: #8b949e; --accent: #0969da; --accent-dim: #0550ae; --success: #1a7f37; --warning: #9a6700; --error: #cf222e; --purple: #8250df; --cyan: #1b7c83; --orange: #bc4c00; } /* Theme-driven font scaling — applied via data-font-size on . * Bare `:root` sets the default so the page paints at 14px even * before applySettings runs and sets data-font-size. */ :root { font-size: 14px; } :root[data-font-size="small"] { font-size: 13px; } :root[data-font-size="medium"] { font-size: 14px; } :root[data-font-size="large"] { font-size: 16px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font); /* font-size driven by :root[data-font-size] so the theme setting can scale the entire UI proportionally. */ font-size: 1rem; line-height: 1.5; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; } /* Hide all scrollbars globally — elements still scroll via wheel / * keyboard / touch, the visual bar just doesn't render. Per user * request. */ * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { width: 0; height: 0; display: none; } /* App shell — height reserves room for the fixed footer at the bottom (the editor's flex children compute against this height, so without the carve-out the timeline + sidebar would slide under the footer). Footer renders ~38px tall on desktop, ~64px when the trademark line wraps below 900px. */ .app { display: flex; flex-direction: column; height: calc(100vh - 38px); } @media (max-width: 900px) { .app { height: calc(100vh - 64px); } } /* Header */ header#header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: 0.2px; } .brand-mark { flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(76, 139, 245, 0.35)); } .brand-text { background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* "MTA Studio Editor" / "Library" / "Device" — the suite name comes in * the gradient, and the per-app suffix sits immediately after in a * softer weight so the wordmark reads as one thing. */ .brand-app { font-weight: 400; opacity: 0.85; /* Parent .brand-text uses -webkit-background-clip: text + transparent fill. In Chromium/WebKit that clip doesn't always extend to a child span's own text runs — so without its own gradient the child would render as invisible "transparent on transparent". Give it the same gradient so "Edit" / "Connect" / "Manage" actually show. */ background: linear-gradient(135deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } #app-version-badge, .app-version-badge { font-size: 11px; font-weight: 400; color: var(--text-muted); -webkit-text-fill-color: var(--text-muted); background: none; align-self: center; vertical-align: middle; margin-left: -4px; letter-spacing: 0.2px; } /* #app-footer styling now lives in /static/footer.js so it travels with the script that injects the footer into every page (auth/admin/editor). This block intentionally left blank. */ #song-info { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } #song-info span { white-space: nowrap; } .header-me { color: var(--text-secondary, #8b949e); font-size: 12px; margin-left: 16px; } .header-me strong { color: var(--text-primary, #e6edf3); font-weight: 600; margin-left: 4px; } #song-title { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; } #song-artist { font-size: 13px; color: var(--text-secondary); } .editable-meta { cursor: text; padding: 1px 4px; border-radius: 3px; border: 1px solid transparent; transition: border-color var(--transition), background var(--transition); } .editable-meta:hover { border-color: var(--border); } .editable-meta[contenteditable="true"] { background: var(--bg-input); border-color: var(--accent); outline: none; color: var(--text-primary); } /* Empty editable cell — render a "Click to add foo" placeholder so the span is visible / clickable instead of zero-width. Wiped on focus. */ .editable-meta.is-empty { color: var(--text-muted); font-style: italic; opacity: 0.75; } .editable-meta.is-empty:hover { opacity: 1; } #song-duration, #song-bpm, #song-key { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); padding: 2px 7px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px; } #gpu-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; background: rgba(63,185,80,0.15); color: var(--success); } #gpu-indicator.cpu { background: rgba(139,148,158,0.25); color: var(--text-secondary); } header nav { display: flex; gap: 8px; } /* Buttons — Recode glassmorphic style */ .btn, header nav button, #transport button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; /* Fixed 36px tall so every .btn lines up — header, overlays, * sidebar, action bars all read as the same control. Use box-sizing * so the border doesn't push it past 36. */ box-sizing: border-box; height: 36px; padding: 0 16px; border: 1px solid rgba(139,148,158,0.2); border-radius: 6px; background: rgba(139,148,158,0.08); color: var(--text-primary); font-family: var(--font); font-size: 13px; font-weight: 500; /* Anchors styled as .btn (e.g. Open in the project manager) inherit the default underline without this — kill it everywhere. */ text-decoration: none; cursor: pointer; transition: all var(--transition); white-space: nowrap; backdrop-filter: blur(4px); } .btn:hover, header nav button:hover, #transport button:hover { background: rgba(139,148,158,0.15); border-color: rgba(139,148,158,0.3); } .btn:active, header nav button:active, #transport button:active { transform: scale(0.98); } .btn:disabled, header nav button:disabled, #transport button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-primary { background: rgba(31,111,235,0.2); border-color: rgba(31,111,235,0.3); color: var(--accent); } .btn-primary:hover { background: rgba(31,111,235,0.3); border-color: rgba(31,111,235,0.4); } .btn-success { background: rgba(63,185,80,0.15); border-color: rgba(63,185,80,0.25); color: var(--success); } .btn-success:hover { background: rgba(63,185,80,0.25); } .btn-danger { background: rgba(248,81,73,0.15); border-color: rgba(248,81,73,0.25); color: var(--error); } .btn-danger:hover { background: rgba(248,81,73,0.25); } /* Inline confirm: first click "arms" the button, second click runs. Pulses red so the user can see it's waiting for confirmation. */ .btn-armed, .btn.btn-armed, .project-delete.btn-armed { background: var(--error) !important; border-color: var(--error) !important; color: #fff !important; animation: btn-armed-pulse 1.4s ease-in-out infinite; } @keyframes btn-armed-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248,81,73,0.5); } 50% { box-shadow: 0 0 0 4px rgba(248,81,73,0.0); } } /* Inline action status flash — used by flashBtnStatus() to paint a * button green/red/blue for a moment after it's clicked, replacing * the textual label with a success/error/busy indicator so the * outcome lands exactly where the user acted. */ .btn.btn-status-success, .btn.btn-status-error, .btn.btn-status-busy { transition: background 0.2s, border-color 0.2s, color 0.2s; } .btn.btn-status-success { background: rgba(63, 185, 80, 0.22) !important; border-color: rgba(63, 185, 80, 0.45) !important; color: var(--success) !important; } .btn.btn-status-error { background: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--error) !important; } .btn.btn-status-busy { background: rgba(88, 166, 255, 0.18) !important; border-color: rgba(88, 166, 255, 0.4) !important; color: var(--accent) !important; } .btn-sm { padding: 4px 10px; font-size: 12px; } #btn-export { } #btn-realign { } /* Layout */ .layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } .main-wrapper { flex: 1; display: flex; flex-direction: row; min-width: 0; overflow: hidden; } /* Sidebar — sits in a fixed slot reserved on .layout via padding-left, * but the actual aside is always position:absolute so width changes * (collapse / hover-expand) never reflow the main pane. */ .layout { position: relative; padding-left: 320px; transition: padding-left 0.18s ease; } body[data-sidebar="collapsed"] .layout { padding-left: 56px; } .sidebar { position: absolute; top: 0; left: 0; bottom: 0; width: 320px; background: var(--bg-secondary); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; /* Trim 2px off the top so the first section lines up with the * transport row. */ padding: 13px 16px 16px; display: flex; flex-direction: column; gap: 16px; z-index: 10; transition: width 0.18s ease, padding 0.18s ease, box-shadow 0.18s ease; } .sidebar[hidden] { display: none; } /* Section icon + label always exist in the DOM; only the label/body * are hidden when collapsed. */ .sidebar-section h3 { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .sidebar-section-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } /* Per-section accent colour so each card's header reads at a glance. * Stroke svgs use currentColor, so a single `color` override does it. */ .sidebar-section[data-section="projects"] .sidebar-section-icon { color: #4c8bf5; } .sidebar-section[data-section="source"] .sidebar-section-icon { color: #58c4ff; } .sidebar-section[data-section="song"] .sidebar-section-icon { color: #66d68a; } .sidebar-section[data-section="chapters"] .sidebar-section-icon { color: #ffb454; } .sidebar-section[data-section="chords"] .sidebar-section-icon { color: #bc8cff; } .sidebar-section[data-section="status"] .sidebar-section-icon { color: #ffd166; } .sidebar-section-label { flex: 1 1 auto; } /* Sidebar toggle lives in the transport bar (next to the time * readout). Chevron flips direction based on collapsed/pinned. */ .sidebar-toggle-btn { transition: transform 0.18s ease; } body[data-sidebar="collapsed"] .sidebar-toggle-btn { transform: rotate(180deg); } /* Lyric-editor toggle mirrors the sidebar toggle but on the right. * Chevron flips from ">" to "<" when the editor is collapsed. The * editor panel shrinks to a 30px vertical strip showing the "Lyrics" * tab. Same 0.18s transition curve as the sidebar. */ .editor-toggle-btn { transition: transform 0.18s ease; } body[data-editor="collapsed"] .editor-toggle-btn { transform: rotate(180deg); } body[data-editor="collapsed"] #editor { flex: 0 0 30px !important; min-width: 30px !important; max-width: 30px !important; padding: 0 !important; } body[data-editor="collapsed"] #editor #lyrics-document, body[data-editor="collapsed"] #editor #editor-actions { display: none; } .editor-collapsed-tab { display: none; } body[data-editor="collapsed"] .editor-collapsed-tab { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; margin: 0; background: var(--bg-secondary); border: 0; cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease; } body[data-editor="collapsed"] .editor-collapsed-tab > span { writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); } body[data-editor="collapsed"] .editor-collapsed-tab:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)); } body[data-editor="collapsed"] .editor-collapsed-tab:hover > span { color: var(--accent); } /* ---------- Collapsed: 56px icon strip, no main-pane shift ---------- */ body[data-sidebar="collapsed"] .sidebar { width: 56px; padding: 13px 6px 16px; } body[data-sidebar="collapsed"] .sidebar-section { padding: 10px 0; text-align: center; border: none; background: transparent; } body[data-sidebar="collapsed"] .sidebar-section h3 { justify-content: center; margin: 0; font-size: 0; } body[data-sidebar="collapsed"] .sidebar-section-label, body[data-sidebar="collapsed"] .sidebar-section-body { display: none; } /* ---------- Hover-expand (only when collapsed) ---------- */ body[data-sidebar="collapsed"] .sidebar:hover { width: 320px; padding: 13px 16px 16px; box-shadow: 4px 0 24px rgba(0,0,0,0.5); } body[data-sidebar="collapsed"] .sidebar:hover .sidebar-section { padding: 14px; text-align: left; border: 1px solid var(--border); background: var(--bg-card); } body[data-sidebar="collapsed"] .sidebar:hover .sidebar-section h3 { justify-content: flex-start; margin: 0 0 12px; font-size: 11px; } body[data-sidebar="collapsed"] .sidebar:hover .sidebar-section-label, body[data-sidebar="collapsed"] .sidebar:hover .sidebar-section-body { display: block; } .sidebar-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .sidebar-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 0 0 12px; font-weight: 600; } .sidebar-section .kv-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; color: var(--text-secondary); border-bottom: 1px dashed var(--border); } .sidebar-section .kv-row:last-child { border-bottom: none; } .sidebar-section .kv-row .value { font-family: var(--font-mono); color: var(--text-primary); } #sidebar-sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } #sidebar-sections li { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; transition: background var(--transition), color var(--transition); border-left: 2px solid transparent; } #sidebar-sections li:hover { background: var(--bg-hover); color: var(--text-primary); } #sidebar-sections li.active { background: rgba(88,166,255,0.08); color: var(--accent); border-left-color: var(--accent); padding-left: 6px; } #sidebar-sections li .timecode { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } #sidebar-sections li.active .timecode { color: var(--accent); } .upload-row { margin-top: 10px; display: flex; gap: 6px; } .upload-row > label, .upload-row > a { flex: 1 1 0; min-width: 0; cursor: pointer; } #sidebar-projects { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; } .sidebar-project { display: flex; flex-direction: column; padding: 6px 8px; margin-bottom: 4px; border-radius: 4px; font-size: 12px; cursor: pointer; color: var(--text-secondary); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-left: 2px solid transparent; text-decoration: none; } .sidebar-project:hover { background: var(--bg-hover); color: var(--text-primary); } .sidebar-project.active { background: rgba(88,166,255,0.08); color: var(--accent); border-left-color: var(--accent); padding-left: 6px; position: relative; } /* Close pill on the active sidebar project — hidden until the row is hovered, slides in with the door-arrow icon + "Close" label. Far more discoverable than the 22px × glyph it replaced. */ .sidebar-project-close { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; opacity: 0; transform: translateY(-2px); transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .sidebar-project-close svg { display: block; flex-shrink: 0; } .sidebar-project-close-label { line-height: 1; } .sidebar-project.active:hover .sidebar-project-close, .sidebar-project-close:focus-visible { opacity: 1; transform: translateY(0); } .sidebar-project-close:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: var(--text-primary); } .sidebar-project-close.btn-armed { opacity: 1; transform: translateY(0); background: rgba(244,67,54,0.18); border-color: rgba(244,67,54,0.55); color: #ff8a8a; text-transform: uppercase; letter-spacing: 0.5px; animation: sidebar-close-pulse 1.2s ease-in-out infinite; } @keyframes sidebar-close-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,67,54,0.0); } 50% { box-shadow: 0 0 0 4px rgba(244,67,54,0.18); } } .sidebar-project .project-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-project .project-sub { font-size: 10px; color: var(--text-muted); display: flex; justify-content: space-between; } .sidebar-projects-totals { position: sticky; bottom: 0; margin-top: 8px; padding: 8px 0 0; font-size: 10px; font-weight: 600; color: var(--text-secondary); display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.4px; } .sidebar-projects-actions { display: flex; gap: 8px; margin-top: 10px; } .sidebar-projects-actions .btn { flex: 1 1 0; min-width: 0; } #sidebar-actions { display: flex; flex-direction: column; gap: 6px; } #sidebar-actions .btn { justify-content: flex-start; width: 100%; } #sidebar-actions .btn:disabled { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; } #sidebar-actions .action-hint { font-size: 10px; color: var(--text-muted); margin-top: 2px; padding: 0 4px; } #sidebar-source-info .source-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 11px; } #sidebar-source-info .source-row:last-child { border-bottom: none; } #sidebar-source-info .source-row .k { color: var(--text-secondary); } #sidebar-source-info .source-row .v { color: var(--text-primary); font-family: var(--font-mono); text-align: right; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sidebar-source-info .badge-info { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } #sidebar-source-info .badge-info.present { background: rgba(63,185,80,0.15); color: var(--success); } #sidebar-source-info .badge-info.absent { background: rgba(139,148,158,0.2); color: var(--text-muted); } #sidebar-source-info .link-action { display: block; margin-top: 8px; padding: 6px 8px; background: rgba(88,166,255,0.1); border: 1px solid rgba(88,166,255,0.25); border-radius: 4px; color: var(--accent); font-size: 11px; text-align: center; cursor: pointer; font-weight: 600; } #sidebar-source-info .link-action:hover { background: rgba(88,166,255,0.2); } #sidebar-source-info .note { font-size: 10px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; } #lyrics-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 210; display: flex; align-items: center; justify-content: center; } #lyrics-modal[hidden] { display: none; } #send-merish-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 220; display: flex; align-items: center; justify-content: center; } #send-merish-modal[hidden] { display: none; } /* Merish + Projects open as centered modals from inside the editor — * sized to 90vw / 90vh so they feel like a real workspace, with the * standard .modal header / body chrome from the rest of the app. */ #merish-overlay, #projects-overlay { position: fixed; top: 0; left: 0; right: 0; /* Leave room for the sticky site footer at the bottom (38px, 64px on narrow viewports) — without this the overlay covers the footer entirely. */ bottom: 38px; background: var(--bg-primary); z-index: 180; display: flex; align-items: stretch; justify-content: stretch; } @media (max-width: 900px) { #merish-overlay, #projects-overlay { bottom: 64px; } } #merish-overlay[hidden], #projects-overlay[hidden] { display: none; } .modal.modal-fullscale { width: 100vw; height: 100vh; max-width: none; max-height: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 0; border: none; } .modal.modal-fullscale .modal-body { flex: 1 1 auto; overflow: hidden; padding: 0; display: flex; flex-direction: column; min-height: 0; } /* Merish view inside a modal — its own header is redundant with the * modal-header above it, and its calc(100vh - …) height was pushing * the workspace up over the modal chrome. Fill the modal-body * naturally and hide the inner title. */ #merish-overlay .merish-view { height: 100%; max-width: none; margin: 0; padding: 12px 16px 16px; } #merish-overlay .merish-view-head { padding: 0 0 8px 0; background: transparent; border: none; border-radius: 0; } #merish-overlay .merish-view-head .merish-title-text { display: none; /* the modal-header already shows the title */ } .merish-empty { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 120px; padding: 24px; background: var(--bg-tertiary); border: 1px dashed var(--border); border-radius: 6px; color: var(--text-muted); font-size: 13px; text-align: center; } /* Connect onboarding panel — replaces the bare IP/Port row in the * disconnected state with a richer panel including help. */ .merish-connect-panel { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 30px; background: radial-gradient(circle at 0% 0%, rgba(76,139,245,0.10), transparent 55%), radial-gradient(circle at 100% 100%, rgba(188,100,255,0.08), transparent 55%), var(--bg-card, #1c2333); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); } /* New two-card Connect layout. Tight header at top, side-by-side * primary/secondary cards, expandable setup instructions below. * Matches the card-heavy look of the rest of the app (projects, * settings, Merish workspace). */ .merish-connect-header { text-align: left; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .merish-connect-header .merish-connect-title { font-size: 22px; margin-bottom: 6px; text-align: left; } .merish-connect-header .merish-connect-tag { color: var(--text-secondary, #8b949e); font-size: 13px; line-height: 1.5; margin: 0 0 10px; } .merish-connect-header .merish-connect-chips { justify-content: flex-start; margin-top: 0; } .merish-connect-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; margin-bottom: 18px; } @media (max-width: 900px) { .merish-connect-grid { grid-template-columns: 1fr; } } .merish-connect-card { background: color-mix(in srgb, var(--bg-card) 60%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .merish-connect-card-primary { background: radial-gradient(circle at 0% 0%, rgba(76,139,245,0.08), transparent 60%), color-mix(in srgb, var(--bg-card) 60%, transparent); border-color: color-mix(in srgb, var(--purple, #bc8cff) 25%, var(--border)); } .merish-connect-card-head { display: flex; align-items: flex-start; gap: 12px; } .merish-connect-card-head h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text-primary); } .merish-connect-card-lede { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #8b949e); } .merish-connect-card-ico { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: radial-gradient(circle at 30% 30%, rgba(108,170,255,0.25), transparent 60%), radial-gradient(circle at 70% 70%, rgba(188,100,255,0.22), transparent 60%), rgba(255,255,255,0.03); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); } /* Primary card contains the download-cards grid — let them flow full * width inside the card rather than the extra wrapper padding they * had as a standalone section. */ .merish-connect-card .desktop-cta-cards-wrap { padding: 0; background: none; border: 0; box-shadow: none; } .merish-connect-card .desktop-cta-grid { grid-template-columns: 1fr; /* stack inside a narrower card column */ gap: 10px; } @media (min-width: 1100px) { .merish-connect-card .desktop-cta-grid { /* Side-by-side when the panel is wide enough. */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } /* Discovery status dot in the primary card head (native app only). */ .merish-connect-card-head .merish-dot { margin-top: 6px; flex-shrink: 0; } /* Expandable first-time setup section at the bottom of the panel. */ .merish-connect-setup { border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-card) 70%, transparent); padding: 0; } .merish-connect-setup > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text-primary); position: relative; user-select: none; } .merish-connect-setup > summary::-webkit-details-marker { display: none; } .merish-connect-setup > summary::after { content: "▸"; float: right; font-size: 11px; color: var(--text-muted); transition: transform 150ms ease; } .merish-connect-setup[open] > summary::after { transform: rotate(90deg); } .merish-connect-setup .merish-connect-steps { padding: 4px 16px 16px; } /* Legacy head retained for layouts outside the onboarding panel. */ .merish-connect-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; } .merish-connect-head .merish-dot { margin-top: 6px; flex-shrink: 0; } /* New hero for the disconnected Merish onboarding panel — a centered device illustration, bigger gradient title, lede tag, and a row of compatibility chips. Replaces the tiny-dot-plus-stacked-text look. */ .merish-connect-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 26px; padding: 6px 0 2px; } .merish-connect-hero-ico { position: relative; width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: 24px; background: radial-gradient(circle at 30% 30%, rgba(108,170,255,0.22), transparent 60%), radial-gradient(circle at 70% 70%, rgba(188,100,255,0.20), transparent 60%), rgba(255,255,255,0.02); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 28px rgba(76,139,245,0.18); } .merish-connect-hero-ico::after { /* Soft outer halo — pulses gently so the onboarding panel has some life while it's waiting for the user to connect. */ content: ""; position: absolute; inset: -4px; border-radius: 28px; background: radial-gradient(circle at center, rgba(108,170,255,0.22), transparent 70%); filter: blur(6px); z-index: -1; animation: merish-hero-pulse 3.6s ease-in-out infinite; } @keyframes merish-hero-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.96); } 50% { opacity: 1.0; transform: scale(1.04); } } .merish-connect-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; background: linear-gradient(135deg, #6aa2ff 0%, #9d7aff 50%, #bc64ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .merish-connect-tag { margin: 0; max-width: 560px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; } .merish-connect-tag strong { color: var(--text-primary); font-weight: 600; } .merish-connect-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; } .merish-device-chip { display: inline-flex; align-items: center; padding: 5px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: #cfd8ff; background: linear-gradient(135deg, rgba(108,170,255,0.12), rgba(188,100,255,0.12)); border: 1px solid rgba(108,170,255,0.25); border-radius: 999px; white-space: nowrap; } @media (max-width: 600px) { .merish-connect-title { font-size: 22px; } .merish-connect-hero-ico { width: 80px; height: 80px; } } .merish-connect-form { display: grid; grid-template-columns: 1fr 110px auto; gap: 12px; align-items: end; margin-bottom: 24px; } /* Send-to-Merish modal: IP + port + Connect button laid out so all three share the same 36px height (matches the global .btn rule). */ .send-merish-connect-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: stretch; } .send-merish-connect-row input { height: 36px; box-sizing: border-box; padding: 0 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; } .send-merish-connect-row input:focus { outline: none; border-color: var(--accent); } .send-merish-connect-row .btn { /* Override .btn-sm if it ever sneaks in here — explicit 36px keeps the row a clean rectangle. */ height: 36px; padding: 0 18px; font-size: 13px; } .merish-connect-field { display: flex; flex-direction: column; gap: 6px; } .merish-connect-field > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .merish-connect-field input { height: 30px; padding: 0 12px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-family: inherit; box-sizing: border-box; transition: border-color .15s, box-shadow .15s, background .15s; } .merish-connect-field input:focus { outline: none; border-color: rgba(108,140,250,0.6); box-shadow: 0 0 0 3px rgba(88,166,255,0.18); background: rgba(0,0,0,0.45); } .merish-connect-btn { height: 30px !important; padding: 0 22px !important; background: linear-gradient(135deg, #4c8bf5, #6f7af8 50%, #bc64ff) !important; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; border: 0 !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(76,139,245,0.32); } .merish-connect-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(76,139,245,0.42); } @media (max-width: 600px) { .merish-connect-form { grid-template-columns: 1fr; } } /* ─── Connect onboarding steps (v0.2.356+) ────────────────────────── * Two numbered cards stacked under the connect form: Transfer mode + * port forwarding. Each card has a gradient-bordered numbered badge * floating in the top-left, a coloured left accent bar, and a glass * background that picks up the same blue→purple brand gradient as the * home cards. */ .merish-connect-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .merish-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 22px 22px 18px; background: linear-gradient(135deg, rgba(76,139,245,0.06), rgba(188,100,255,0.04)), rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease; } .merish-step::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, #4c8bf5 0%, #bc64ff 100%); border-top-left-radius: 14px; border-bottom-left-radius: 14px; } .merish-step:hover { border-color: rgba(106,162,255,0.35); } .merish-step-num { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #4c8bf5 0%, #bc64ff 100%); color: #fff; font-size: 22px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(76,139,245,0.32), inset 0 1px 0 rgba(255,255,255,0.18); flex-shrink: 0; } .merish-step-body { min-width: 0; } .merish-step-title { margin: 4px 0 6px; font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.1px; } .merish-step-title em { font-style: normal; background: linear-gradient(135deg, #6aa2ff, #bc64ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; } .merish-step-lede { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; } .merish-step-list { margin: 0 0 10px; padding-left: 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.75; } .merish-step-list li { margin: 4px 0; } .merish-step-list strong { color: var(--text-primary); font-weight: 600; } .merish-step-list code { background: rgba(0,0,0,0.40); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-size: 12px; color: var(--text-primary); } .merish-step-list em { color: var(--text-muted); font-style: italic; } .merish-step-list a { color: var(--accent, #6aa2ff); text-decoration: underline; } .merish-step-list a:hover { text-decoration: none; } .merish-step-warn { margin: 14px 0 0; padding: 10px 14px; background: rgba(255, 165, 0, 0.10); border: 1px solid rgba(255, 165, 0, 0.35); border-radius: 8px; color: var(--text-primary); font-size: 12.5px; line-height: 1.55; } @media (max-width: 600px) { .merish-step { grid-template-columns: 40px 1fr; padding: 18px 16px 18px 14px; gap: 14px; } .merish-step-num { width: 36px; height: 36px; font-size: 18px; } .merish-step-title { font-size: 15px; } } /* Legacy merish-connect-help rules (still used elsewhere — leave for now). */ .merish-connect-help { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; } .merish-connect-help details { background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 10px 14px; transition: background .15s; } .merish-connect-help details[open] { background: rgba(0, 0, 0, 0.28); } .merish-connect-help summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-primary); user-select: none; } .merish-connect-help summary::-webkit-details-marker { display: none; } .merish-connect-help summary::after { content: "+"; margin-left: auto; color: var(--text-muted); font-size: 18px; transition: transform .15s; } .merish-connect-help details[open] summary::after { content: "−"; } .merish-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(76,139,245,0.18); color: var(--accent, #58a6ff); font-size: 12px; font-weight: 700; flex-shrink: 0; } .merish-connect-help ol, .merish-connect-help ul { margin: 12px 0 4px; padding-left: 22px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; } .merish-connect-help p { margin: 12px 0 8px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; } .merish-connect-help strong { color: var(--text-primary); } .merish-connect-help code { background: rgba(0,0,0,0.45); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-size: 12px; color: var(--text-primary); } .merish-connect-help em { color: var(--text-muted); font-style: italic; } .merish-connect-help a { color: var(--accent, #6ea8ff); text-decoration: underline; } .merish-connect-help a:hover { text-decoration: none; } .merish-connect-help p.merish-warn { background: rgba(255, 165, 0, 0.10); border: 1px solid rgba(255, 165, 0, 0.35); border-radius: 8px; padding: 10px 14px; margin-top: 14px; color: var(--text-primary); font-size: 12.5px; line-height: 1.55; } .merish-connect-help p.merish-tip { background: rgba(106, 162, 255, 0.10); border: 1px solid rgba(106, 162, 255, 0.35); border-radius: 8px; padding: 10px 14px; margin-top: 12px; color: var(--text-primary); font-size: 12.5px; line-height: 1.55; } .merish-empty[hidden] { display: none !important; } .merish-empty p { margin: 0; } #projects-overlay .modal-body.projects-overlay-inner { overflow-y: auto; padding: 16px 24px 24px; } /* Processing modal — full-screen blur during long jobs */ #processing-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 500; display: flex; align-items: center; justify-content: center; } #processing-modal[hidden] { display: none; } #processing-modal .processing-inner { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px 24px; width: min(700px, 92vw) !important; max-width: none !important; height: 580px !important; max-height: 90vh !important; box-sizing: border-box; display: flex; flex-direction: column; text-align: center; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } /* Multi-file mode: same box as the default, just left-aligned body * text since per-file rows carry the granular status. */ #processing-modal.multi-file .processing-inner { text-align: left; } #processing-modal.multi-file .processing-spinner { display: none; } #processing-modal.multi-file h2 { text-align: center; font-size: 18px; margin-bottom: 2px; } #processing-modal.multi-file .processing-step-name { text-align: center; margin-bottom: 14px; } #processing-modal.multi-file .processing-bar { height: 10px; } #processing-modal.multi-file .processing-pct { text-align: center; } /* Mini per-substep progress bars inside the processing modal. * Populated by updateProcessingModal when the job's progress messages * include a "Step X of Y: NAME" prefix. Each row shows the step name, * its own fill, and its own percent readout. Rows that have completed * get an accent-green fill + ✓ glyph so the user sees the whole pipeline * advancing through stages. */ /* Substeps list uses the same card-row design as the multi-file * filelist — each job step renders as a card with icon, label, * progress bar, and status. The pf-* class rules below apply to * rows in BOTH .processing-filelist and .processing-substeps. */ .processing-substeps { list-style: none; margin: 14px 0 0; padding: 6px 2px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .processing-substeps[hidden] { display: none; } /* Cancel button centred under the progress area. Only visible while * the modal has an active job — hidden again on terminal states. */ .processing-cancel-wrap { margin-top: 14px; display: flex; justify-content: center; } .processing-cancel-wrap[hidden] { display: none; } .processing-filelist { list-style: none; margin: 12px 0 0; padding: 6px 2px; flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 6px; } .processing-filelist[hidden] { display: none; } .pf-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; transition: background 0.2s ease, border-color 0.2s ease; } .pf-row.is-running { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .pf-row.is-done { border-color: color-mix(in srgb, var(--success, #238636) 55%, var(--border)); background: color-mix(in srgb, var(--success, #238636) 8%, var(--bg-primary)); } .pf-row.is-failed { border-color: color-mix(in srgb, var(--error-dim, #da3633) 60%, var(--border)); background: color-mix(in srgb, var(--error-dim, #da3633) 8%, var(--bg-primary)); } .pf-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--text-secondary); } .pf-row.is-pending .pf-icon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); opacity: 0.35; } .pf-row.is-running .pf-icon::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } .pf-row.is-done .pf-icon::before { content: "✓"; font-size: 14px; font-weight: 700; color: var(--success, #3fb950); } .pf-row.is-failed .pf-icon::before { content: "✕"; font-size: 14px; font-weight: 700; color: var(--error-dim, #f85149); } .pf-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .pf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pf-name { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-size { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); flex-shrink: 0; } .pf-bar { height: 4px; background: var(--bg-card); border-radius: 2px; overflow: hidden; } .pf-fill { height: 100%; width: 0%; background: linear-gradient( 90deg, rgba(31,111,235,0.6), rgba(88,166,255,0.8), rgba(188,140,255,0.6) ); background-size: 200% 100%; animation: shimmer 2s linear infinite; transition: width 0.3s ease; } .pf-row.is-done .pf-fill { background: var(--success, #238636); animation: none; } .pf-row.is-failed .pf-fill { background: var(--error-dim, #da3633); animation: none; } .pf-row.is-pending .pf-fill { width: 0% !important; } .pf-row.is-pending .pf-name { opacity: 0.5; } .pf-row.is-pending .pf-size { display: none; } .pf-status { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-row.is-done .pf-status { color: var(--success, #3fb950); } .pf-row.is-failed .pf-status { color: var(--error-dim, #f85149); } .processing-spinner { display: none; } .processing-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; } .processing-actions[hidden] { display: none; } #processing-modal h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text-primary); height: 22px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .processing-step-name { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px; height: 14px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .processing-bar { height: 8px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 8px; position: relative; } .processing-fill { height: 100%; width: 0%; background: linear-gradient( 90deg, rgba(31,111,235,0.35), rgba(88,166,255,0.6), rgba(188,140,255,0.35) ); background-size: 200% 100%; animation: shimmer 2s linear infinite; transition: width 0.3s ease; } .processing-pct { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .processing-msg { font-size: 11px; color: var(--text-secondary); height: 16px; line-height: 16px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Inline "opening / loading" spinner reusable inside any .btn — used by the Backup button's "Opening…" state while the modal spins up (which needs a SystemInfo round-trip before rendering). */ .btn-busy { opacity: 0.75; cursor: wait; } .btn-busy-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px; margin-right: 6px; } #lyrics-modal .modal { width: 960px; height: 800px; min-width: 360px; min-height: 260px; max-width: 95vw; max-height: 95vh; resize: both; overflow: hidden; display: flex; flex-direction: column; } #lyrics-modal .modal-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } #lyrics-modal #lyrics-textarea { flex: 1 1 auto; width: 100%; resize: none; min-height: 0; } /* Vocal-source radio on stem rows */ .stem-waveform-row.vocal-source { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88,166,255,0.3); } /* Chord-source highlight on stem rows — uses the same warm amber as * the C badge so they read as the same selection at a glance. When a * stem is BOTH a vocal source and a chord source, the chord box-shadow * stacks beside the vocal border (different sides of the row). */ .stem-waveform-row.chord-source { border-color: #c48a2a; box-shadow: 0 0 0 1px rgba(196,138,42,0.3); } .stem-waveform-row.vocal-source.chord-source { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88,166,255,0.3), inset 3px 0 0 #c48a2a; } .stem-waveform-row.dragging { opacity: 0.35; cursor: grabbing; } .stem-waveform-row.drop-above { border-top: 3px solid var(--accent); margin-top: -2px; } .stem-waveform-row.drop-below { border-bottom: 3px solid var(--accent); margin-bottom: -2px; } .stem-waveform-row .stem-name-input { cursor: text; } /* Default cursor across the whole row is the normal arrow — only the * track-number badge shows the grab affordance. Buttons and * waveform areas keep their own cursors (pointer / default). */ .stem-waveform-row { cursor: default; } .stem-waveform-row .stem-num { cursor: grab; } .stem-waveform-row.dragging .stem-num, .stem-waveform-row .stem-num:active { cursor: grabbing; } .stem-waveform-row .stem-waveform { cursor: default; } .stem-waveform-row button { cursor: pointer; } /* Active state for the V (vocal source) badge — matches the mute/solo * treatment, lit up when this stem is one of the vocal sources. */ .stem-waveform-row.vocal-source .stem-btn.vocal { background: var(--accent-dim); color: #fff; border-color: var(--accent-dim); } /* Active state for the C (chord source) badge — uses a warm amber so * the vocal and chord sources read as distinct categories at a glance. */ .stem-waveform-row.chord-source .stem-btn.chord { background: #c48a2a; color: #fff; border-color: #c48a2a; } #mix-presets { display: flex; flex-wrap: wrap; gap: 6px; } #mix-presets button { flex: 0 0 auto; min-width: 0; } #mix-presets.mix-presets-transport { display: inline-flex; gap: 3px; flex-wrap: nowrap; } .transport-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; } .stem-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); } .stem-row:last-child { border-bottom: none; } .stem-row .stem-mute { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--text-secondary); } .stem-row.muted .stem-mute { background: var(--error-dim); color: #fff; border-color: var(--error-dim); } .stem-row .stem-label { display: flex; flex-direction: column; min-width: 0; } .stem-row .stem-name { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stem-row .stem-role { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .stem-row.role-vocal .stem-role { color: var(--accent); } .stem-row.role-harmonic .stem-role { color: var(--purple); } .stem-row.role-bass .stem-role { color: var(--cyan); } .stem-row.role-drums .stem-role, .stem-row.role-percussion .stem-role { color: var(--warning); } .stem-row input[type="range"] { width: 72px; -webkit-appearance: none; appearance: none; height: 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 2px; outline: none; cursor: pointer; } .stem-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 1px solid var(--bg-card); cursor: pointer; } .stem-row input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 1px solid var(--bg-card); cursor: pointer; } #mix-presets button.active { background: rgba(31,111,235,0.35); border-color: rgba(31,111,235,0.5); color: var(--accent); } .chord-chips { display: flex; flex-wrap: wrap; gap: 4px; } .chord-chip { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; background: rgba(188,140,255,0.15); color: var(--purple); border: 1px solid rgba(188,140,255,0.25); border-radius: 4px; cursor: pointer; transition: all var(--transition); } .chord-chip:hover { background: rgba(188,140,255,0.25); border-color: rgba(188,140,255,0.4); } .chord-redetect { flex-basis: 100%; margin-top: 6px; } /* Send-to-Merish folder browser rows */ .sm-fs-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--border); cursor: default; color: var(--text-primary); } .sm-fs-row:last-child { border-bottom: none; } .sm-fs-dir { cursor: pointer; font-weight: 500; } .sm-fs-dir:hover { background: var(--bg-hover); } .sm-fs-file:hover { background: var(--bg-hover); } .sm-fs-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); } .sm-fs-icon svg { width: 14px; height: 14px; } .sm-fs-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Per-type icon colours — mirror the Connect-card palette so users recognise file types across both views. */ .sm-fs-row[data-type="folder"] .sm-fs-icon { color: #e0b860; } .sm-fs-row[data-type="mta"] .sm-fs-icon { color: #5ab0ff; } .sm-fs-row[data-type="midi"] .sm-fs-icon { color: #b58aff; } .sm-fs-row[data-type="audio"] .sm-fs-icon { color: #4caf50; } .sm-fs-row[data-type="wav"] .sm-fs-icon { color: #ff8c42; } .sm-fs-row[data-type="video"] .sm-fs-icon { color: #e0707b; } .sm-fs-row[data-type="image"] .sm-fs-icon { color: #f5c452; } .sm-fs-row[data-type="text"] .sm-fs-icon { color: #9aa0a6; } .sm-fs-row[data-type="backup"] .sm-fs-icon { color: #7a8691; } .sm-fs-row[data-type="data"] .sm-fs-icon { color: #6fbcc9; } /* Inline new-folder edit row inside the Send-to-Merish browser. Uses the same dark-input styling as the other modal inputs so it doesn't render as a bare white browser-default field. */ .sm-fs-row.pending { background: var(--bg-hover); } .sm-fs-row .sm-inline-edit { flex: 1; height: 26px; padding: 0 8px; background: var(--bg-tertiary); border: 1px solid var(--accent); border-radius: 4px; color: var(--text-primary); font-family: inherit; font-size: 12px; } .sm-fs-row .sm-inline-edit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.18); } .sm-fs-row .sm-inline-edit::placeholder { color: var(--text-muted); } /* Send-to-Merish progress step list */ .sm-step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; transition: border-color 0.18s ease, background 0.18s ease; } .sm-progress-header { padding: 10px 14px 12px; margin-bottom: 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; border-left: 3px solid var(--accent); } .sm-progress-filename { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); word-break: break-all; } .sm-progress-path { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 4px; word-break: break-all; } .sm-progress-path:empty { display: none; } /* 28px circular state indicator. Drawn entirely with CSS so each state can animate / recolour cleanly without swapping any DOM. */ .sm-step-icon { position: relative; width: 28px; height: 28px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; background: transparent; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; line-height: 1; transition: border-color 0.18s ease, background 0.18s ease; } /* Pending — empty thin ring, slightly muted row. */ .sm-step[data-state="pending"] { opacity: 0.55; } /* Active — spinning arc. border-top transparent + linear spin gives a classic loader without an extra inline SVG. */ .sm-step[data-state="active"] { border-color: var(--accent); background: rgba(88, 166, 255, 0.06); } .sm-step[data-state="active"] .sm-step-icon { border-color: var(--accent); border-top-color: transparent; animation: sm-spin 0.8s linear infinite; } /* Done — solid green disc with white check. */ .sm-step[data-state="done"] { border-color: rgba(76, 175, 80, 0.4); } .sm-step[data-state="done"] .sm-step-icon { background: #4caf50; border-color: #4caf50; } .sm-step[data-state="done"] .sm-step-icon::before { content: "✓"; } /* Failed — solid red disc with white cross + red row border. */ .sm-step[data-state="failed"] { border-color: var(--error); background: rgba(244, 67, 54, 0.06); } .sm-step[data-state="failed"] .sm-step-icon { background: var(--error); border-color: var(--error); } .sm-step[data-state="failed"] .sm-step-icon::before { content: "✕"; } .sm-step-label { color: var(--text-primary); font-weight: 600; font-size: 13px; flex-shrink: 0; } .sm-step-detail { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } @keyframes sm-spin { to { transform: rotate(360deg); } } /* Queue checklist above the per-item step panel. Shown only when * the Send-to-Merish modal is opened with 2+ projects — each row * ticks off as the current project finishes. Mirrors the visual * idiom of the multi-file audio-import modal so the interaction * feels familiar. */ .sm-queue-list { list-style: none; padding: 6px; margin: 10px 0 12px; display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; background: rgba(15, 15, 18, 0.35); border: 1px solid var(--border); border-radius: 6px; } .sm-queue-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; font-size: 12px; transition: background 120ms ease, color 120ms ease, opacity 120ms ease; } .sm-queue-row[data-state="pending"] { opacity: 0.55; } .sm-queue-row[data-state="running"] { background: color-mix(in srgb, var(--purple, #bc8cff) 18%, transparent); color: color-mix(in srgb, var(--purple, #bc8cff) 95%, white); } .sm-queue-row[data-state="done"] { color: #8ee3a4; background: rgba(63, 185, 80, 0.08); } .sm-queue-row[data-state="failed"] { color: #fca5a5; background: rgba(248, 81, 73, 0.10); } .sm-queue-num { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); min-width: 28px; flex-shrink: 0; } .sm-queue-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .sm-queue-status { flex-shrink: 0; font-size: 11px; color: inherit; opacity: 0.85; } /* Sidebar "+ Click track" button next to the BPM value. Inherits * the standard .btn-sm footprint but sits inline so it tucks beside * the BPM number without pushing the row to two lines. */ .sidebar-click-btn { margin-left: 8px; padding: 4px 10px !important; height: auto !important; min-height: 0 !important; font-size: 11px !important; line-height: 1 !important; display: inline-flex; align-items: center; color: color-mix(in srgb, var(--purple, #bc8cff) 90%, white); background: color-mix(in srgb, var(--purple, #bc8cff) 12%, transparent); border-color: color-mix(in srgb, var(--purple, #bc8cff) 30%, transparent); } .sidebar-click-btn:hover { background: color-mix(in srgb, var(--purple, #bc8cff) 25%, transparent); border-color: color-mix(in srgb, var(--purple, #bc8cff) 50%, transparent); color: #fff; } /* Icon before the number: subtle dot for pending, spinner for * running, check for done, × for failed. Uses an ::before on the * .sm-queue-num so we don't need extra DOM. */ .sm-queue-num::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--text-muted); vertical-align: 0; transform: translateY(1px); } .sm-queue-row[data-state="running"] .sm-queue-num::before { background: color-mix(in srgb, var(--purple, #bc8cff) 95%, white); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple, #bc8cff) 30%, transparent); animation: sm-queue-pulse 1s ease-in-out infinite; } .sm-queue-row[data-state="done"] .sm-queue-num::before { background: #3fb950; } .sm-queue-row[data-state="failed"] .sm-queue-num::before { background: #f85149; } @keyframes sm-queue-pulse { 0%, 100% { transform: translateY(1px) scale(1); } 50% { transform: translateY(1px) scale(1.3); } } #sidebar-chords .empty, #sidebar-sections .empty { font-size: 12px; color: var(--text-muted); font-style: italic; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; } .inline-detect { /* Inline Detect buttons in the sidebar are intentionally small — * override the global 36px .btn height so they don't dominate * their cards. */ padding: 3px 10px; height: auto; min-height: 0; font-size: 11px; white-space: nowrap; } /* Banner (processing strip above layout) */ #banner { background: linear-gradient(90deg, rgba(88,166,255,0.15), rgba(88,166,255,0.05)); border-bottom: 1px solid var(--accent); padding: 10px 20px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); z-index: 90; } #banner[hidden] { display: none; } #banner.error { background: linear-gradient(90deg, rgba(248,81,73,0.15), rgba(248,81,73,0.05)); border-bottom-color: var(--error); } #banner.success { background: linear-gradient(90deg, rgba(63,185,80,0.15), rgba(63,185,80,0.05)); border-bottom-color: var(--success); } #banner .banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 1.2s ease-in-out infinite; flex-shrink: 0; } #banner.error .banner-dot { background: var(--error); box-shadow: 0 0 6px var(--error); } #banner.success .banner-dot { background: var(--success); box-shadow: 0 0 6px var(--success); animation: none; } #banner .banner-text { flex: 1; color: var(--text-primary); font-weight: 500; } #banner .banner-bar { position: relative; width: 200px; height: 6px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } #banner .banner-fill { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient( 90deg, rgba(31,111,235,0.35), rgba(88,166,255,0.4), rgba(188,140,255,0.35) ); background-size: 200% 100%; animation: shimmer 2s linear infinite; transition: width 0.5s ease; } #banner .banner-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-width: 38px; text-align: right; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Toasts */ #toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 300; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; color: var(--text-primary); font-size: 12px; max-width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: slide-in 0.2s ease; pointer-events: auto; backdrop-filter: blur(4px); } .toast.toast-success { border-left-color: var(--success); } .toast.toast-success .toast-icon { color: var(--success); } .toast.toast-error { border-left-color: var(--error); } .toast.toast-error .toast-icon { color: var(--error); } .toast.toast-warning { border-left-color: var(--warning); } .toast.toast-warning .toast-icon { color: var(--warning); } .toast.toast-info { border-left-color: var(--accent); } .toast.toast-info .toast-icon { color: var(--accent); } .toast-icon { font-size: 14px; font-weight: 700; flex-shrink: 0; } .toast.fade-out { animation: slide-out 0.2s ease forwards; } @keyframes slide-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slide-out { to { transform: translateX(30px); opacity: 0; } } /* Timeline region (multi-stem view) — now the LEFT column */ #timeline { flex: 1 1 auto; min-width: 0; background: var(--bg-secondary); border-right: 1px solid var(--border); padding: 8px 16px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; } /* Two scroll-locked rails (chapters + chords) wrapped in one shared * card so they read as a single "markers" panel. Card padding aligns * with .stem-waveform-row so the 210px label column lines up with * the stem-controls column directly beneath. */ #waveform-rails { display: flex; flex-direction: column; gap: 1px; padding: 2px 12px 3px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); flex-shrink: 0; } /* Single-row grid: heading sits in the 210px label column on the * left, vertically centred with the lane on its right. */ .waveform-rail { display: grid; grid-template-columns: 210px 1fr; column-gap: 10px; align-items: center; } .waveform-rail + .waveform-rail { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); padding-top: 1px; margin-top: 1px; } .waveform-rail-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: left; line-height: 1; user-select: none; } .marker-lane { height: 20px; background: transparent; border: 0; position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .marker-lane::-webkit-scrollbar { height: 0; display: none; } /* Soft rounded corners at the lane's viewport edges — replaces the * previous mask-image fade. overflow-x: auto on .marker-lane already * clips horizontally; a small border-radius just rounds the edges * so a chapter / chord scrolling off doesn't meet a hard right-angle * cut. Applied to both marker lanes for visual consistency. */ #marker-lane-sections, #marker-lane-chords { border-radius: 4px; } .marker-lane-content { position: relative; height: 100%; width: 100%; } #stem-rows { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 4px 4px 8px 0; min-height: 0; } /* Fit mode — CSS flex does the work: every row gets an equal share * of the available space via flex: 1 1 0; min-height: 0 lets them * shrink below their natural size; overflow: hidden clips anything * (inc. the controls column) that doesn't fit its slice. JS doesn't * compute heights any more — it just measures each row after layout * settles and tells wavesurfer to draw its canvas at that height. */ #stem-rows.fit-mode { /* Allow the column to scroll once the per-row min-height below * forces the combined stem height past the viewport. Without * overflow-y: auto the rows would get clipped at the edge. */ overflow-y: auto; } /* Highlight the whole stem column while an external audio file is * being dragged over it so the user knows dropping will append. */ #stem-rows.is-drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; } /* Persistent "drop more audio here" footer — thin dashed row at the * bottom of the stems list; doubles as a click-to-pick file picker. * Stays flex: 0 so it never steals vertical space from the stems. */ .stem-addmore-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; margin-top: 6px; border: 1px dashed color-mix(in srgb, var(--border) 70%, var(--accent)); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-card) 60%, transparent); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .stem-addmore-footer:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); border-color: var(--accent); color: var(--text-primary); } .stem-addmore-footer .stem-addmore-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); font-weight: 700; font-size: 13px; line-height: 1; } #stem-rows.fit-mode .stem-waveform-row { flex: 1 1 0; min-height: 60px; overflow: hidden; } .stem-waveform-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: stretch; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .stem-waveform-row.muted { opacity: 0.45; } .stem-waveform-row.solo { border-color: var(--success); box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 35%, transparent); } .stem-waveform-row .stem-controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; justify-content: flex-start; padding: 4px 2px 6px; /* Pin the controls column to the wave height so it never forces * the grid row taller than the wave. min-height: 0 is critical — * without it CSS grid falls back to the column's min-content * height (all the controls stacked) and stretches the row. */ height: var(--wave-h, 108px); min-height: 0; overflow: hidden; } /* Spacer absorbs the leftover vertical room between the name + * LMS/volume rows (pushed to the top) and the thin audio level bar * pinned at the bottom. */ .stem-waveform-row .stem-controls-spacer { flex: 1 1 auto; min-height: 0; } /* Segmented LED-style live level meter at the bottom of each stem's * controls column. Driven by StemPlayer.getLevel(slug) every animation * frame via MultiTimeline.updatePlayhead. */ .stem-waveform-row .stem-audio-bar { flex: 0 0 auto; height: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 2px; margin: 3px 2px 0; overflow: hidden; position: relative; /* Dark vertical gaps between LED segments — stacked ON TOP of * the fill via ::after so they cut through the gradient. */ } .stem-waveform-row .stem-audio-bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to right, transparent 0, transparent 5px, var(--bg-secondary) 5px, var(--bg-secondary) 7px ); z-index: 2; } .stem-waveform-row .stem-audio-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient( to right, #39d353 0%, #39d353 55%, #e3b341 75%, #f85149 100% ); box-shadow: 0 0 3px rgba(57, 211, 83, 0.5) inset; transition: width 0.06s linear; z-index: 1; } /* Compact (fit) mode keeps the level meter visible but shrinks the * spacer to nothing so it hugs the bottom edge of the tight card. */ .stem-waveform-row.compact .stem-controls-spacer { display: none; } .stem-waveform-row.compact .stem-audio-bar { height: 7px; /* margin-top: auto pushes the bar to the bottom of the card so * there's breathing room above it even on tight compact rows. */ margin: auto 0 2px; } .stem-waveform-row .stem-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; } /* Small role icon next to the track-number badge. Tint via * --role-fill (set per-row by JS from _roleColor) so it matches the * waveform + volume-bar colour. */ .stem-waveform-row .stem-name-row .stem-family-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--role-fill, var(--accent)); } .stem-waveform-row .stem-name-row .stem-family-icon svg { width: 100%; height: 100%; display: block; } .stem-waveform-row.compact .stem-name-row .stem-family-icon { width: 14px; height: 14px; } /* Custom family picker — replaces the native still * works mechanically; only the skin changes. */ .split-modal-fields select { width: 100%; display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 6px 30px 6px 10px; border-radius: 4px; cursor: pointer; min-height: 28px; outline: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color 120ms; } .split-modal-fields select:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .split-modal-fields select:focus { border-color: var(--accent); } /* Plain-English hint line under each slider so a musician knows * what a given value buys them without needing to know demucs. */ .split-modal-slider-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); line-height: 1.4; text-transform: none; letter-spacing: 0; } .pm-field-genre-wrap input[data-field="genre_custom"] { /* Already inherits .pm-field input styles above. */ } /* ─── Global native-checkbox theme ──────────────────────────────── * Bare `` used for multi-select / select-all * controls (row checks in Manage, the Merish files list, etc.) get * a consistent themed look so they don't stand out as browser- * default white squares. Toggle-style switches (.set-toggle / * .set-chk / .pm-filter-toggle wrappers) already have their own * appearance and are excluded via :not() selectors so we don't * fight them. */ input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input) { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid color-mix(in srgb, var(--text-muted) 55%, transparent); border-radius: 4px; background: var(--bg-input, var(--bg-card)); cursor: pointer; position: relative; flex-shrink: 0; transition: background 120ms, border-color 120ms, box-shadow 120ms; vertical-align: middle; } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):hover { border-color: color-mix(in srgb, var(--accent, #58a6ff) 70%, transparent); } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):checked { background: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):checked::after { content: ""; position: absolute; left: 4px; top: 0.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):indeterminate { background: var(--accent, #58a6ff); border-color: var(--accent, #58a6ff); } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):indeterminate::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; transform: translateY(-50%); height: 2px; background: #fff; border-radius: 1px; } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #58a6ff) 35%, transparent); } input[type="checkbox"]:not(.set-toggle input):not(.set-chk input):not(.pm-filter-toggle input):disabled { opacity: 0.45; cursor: not-allowed; } .pm-field-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .pm-field-hint { font-size: 11px; color: var(--text-muted); } .pm-detail-stems-section { padding-top: 4px; } /* Set-list card — ordered queue of projects the user is planning to export or send to the Merish. Drag/reorder via ↑/↓, persists to localStorage so the queue survives reloads. */ .pm-setlist { background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px 12px; margin: 10px 0; } .pm-setlist-head { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .pm-setlist-title { font-weight: 600; font-size: 11px; letter-spacing: 0.8px; color: var(--accent); text-transform: uppercase; } .pm-setlist-count { color: var(--text-muted); font-size: 11px; } .pm-setlist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .pm-setlist-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px; padding: 4px 8px; background: var(--bg-tertiary); border-radius: 6px; font-size: 12.5px; } .pm-setlist-idx { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 11px; font-size: 11px; font-weight: 700; } .pm-setlist-title-cell strong { color: var(--text-primary); font-weight: 600; margin-right: 8px; } .pm-setlist-title-cell span { color: var(--text-muted); font-size: 11px; } /* Filter chip row above the project list. */ .pm-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .pm-filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .pm-filter-chip select, .pm-filter-chip input { background: transparent; border: none; color: var(--text-primary); font-size: 12px; font-family: inherit; text-transform: none; letter-spacing: normal; outline: none; min-width: 90px; } .pm-filter-chip input { width: 56px; min-width: 0; } .pm-filter-dash { color: var(--text-muted); } /* Filter-bar Reset button sits in the same row as the .pm-filter-chip * toggles ("Favorites only", "Show archived"). Our base .btn locks a * 36 px height which is visibly taller than the chips; match their * box model so the row reads as one uniform strip. Scoped to this * specific button so the rest of the app's 36 px button rule stands. */ #pm-filter-clear { height: auto !important; min-height: 0 !important; padding: 8px 12px !important; font-size: 11px !important; line-height: 1 !important; text-transform: uppercase; letter-spacing: 0.5px; } /* ─── Manage-section button colour accents ────────────────────────── * Each action gets a subtle tint so you can tell Export / Send / * Setlist-add / Archive / Delete apart at a glance instead of reading * the icon every time. Tints mirror the colour used elsewhere for the * same action: blue = info/export, purple = Merish-brand send, amber * = set-list build, red = destructive. Applied to the per-row action * column, the bulk-action bar, AND the Set-list header so the three * surfaces read consistently. */ /* Export — cyan/teal */ .pm-row-export, #pm-bulk-export, #pm-setlist-export { background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.30); color: #7dd3fc; } .pm-row-export:hover, #pm-bulk-export:hover, #pm-setlist-export:hover { background: rgba(56, 189, 248, 0.24); border-color: rgba(56, 189, 248, 0.50); color: #e0f2fe; } /* Send to Merish — purple (the brand's accent everywhere else) */ .pm-row-send, #pm-bulk-send, #pm-setlist-send { background: color-mix(in srgb, var(--purple, #bc8cff) 18%, transparent); border-color: color-mix(in srgb, var(--purple, #bc8cff) 35%, transparent); color: color-mix(in srgb, var(--purple, #bc8cff) 90%, white); } .pm-row-send:hover, #pm-bulk-send:hover, #pm-setlist-send:hover { background: color-mix(in srgb, var(--purple, #bc8cff) 32%, transparent); border-color: color-mix(in srgb, var(--purple, #bc8cff) 55%, transparent); color: #fff; } /* Setlist toggle — amber (build-list vibe). Active set-member state * (the button that removes from setlist) gets a filled chip instead * of the ghost outline so it's immediately obvious it's in the list. */ .pm-row-setlist { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.30); color: #fcd34d; } .pm-row-setlist:hover { background: rgba(251, 191, 36, 0.22); border-color: rgba(251, 191, 36, 0.50); color: #fde68a; } .pm-row-setlist[data-in-setlist="1"] { background: rgba(251, 191, 36, 0.30); border-color: rgba(251, 191, 36, 0.60); color: #fef3c7; } /* Tag — indigo */ #pm-bulk-tag { background: rgba(129, 140, 248, 0.15); border-color: rgba(129, 140, 248, 0.30); color: #c7d2fe; } #pm-bulk-tag:hover { background: rgba(129, 140, 248, 0.25); border-color: rgba(129, 140, 248, 0.50); color: #eef2ff; } /* Archive — neutral grey for the "archive" action; warm orange when * the button is already in "restore" mode so users can spot archived * rows at a glance. */ .pm-row-archive { color: #94a3b8; } .pm-row-archive:hover { background: rgba(148, 163, 184, 0.18); border-color: rgba(148, 163, 184, 0.40); color: #e2e8f0; } .pm-row-archive.is-archived { background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.30); color: #fdba74; } .pm-row-archive.is-archived:hover { background: rgba(249, 115, 22, 0.26); border-color: rgba(249, 115, 22, 0.55); color: #fed7aa; } /* Delete (per-row). Bulk + set-list clear already use .btn-danger so * they're red; this gives the per-row trash icon the same language. */ .pm-row-del { color: #fca5a5; } .pm-row-del:hover { background: rgba(248, 113, 113, 0.18); border-color: rgba(248, 113, 113, 0.40); color: #fecaca; } /* Clear selection — subdued grey so it doesn't compete with the * coloured action buttons next to it. */ #pm-bulk-clear { color: #94a3b8; } #pm-bulk-clear:hover { background: rgba(148, 163, 184, 0.18); border-color: rgba(148, 163, 184, 0.40); color: #e2e8f0; } /* Row status dot — solid green when ready, hollow amber when partial. */ .pm-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; vertical-align: 1px; } .pm-status-dot.is-ready { background: #4caf50; } .pm-status-dot.is-partial { background: #e3b341; } /* Inline favorite star button inside the row title. */ .pm-fav-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 4px; margin-right: 4px; vertical-align: -2px; transition: color 0.12s; } .pm-fav-btn:hover { color: #e3b341; } .pm-fav-btn.is-on { color: #e3b341; } /* Tag pills shown inline under the row subtitle. */ .pm-tag-pill { display: inline-block; background: rgba(88,166,255,0.12); color: #5ab0ff; border: 1px solid rgba(88,166,255,0.3); border-radius: 10px; padding: 1px 7px; font-size: 10px; margin-left: 4px; text-transform: lowercase; } /* Archived pill shown next to the title. */ .pm-archived-pill { display: inline-block; background: rgba(255,255,255,0.06); color: var(--text-muted); border-radius: 10px; padding: 1px 7px; font-size: 10px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.5px; } /* Toggle-style filter chip (checkbox labelled). */ .pm-filter-toggle { cursor: pointer; } .pm-filter-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--border-light, var(--border)); border-radius: 3px; margin: 0; cursor: pointer; position: relative; vertical-align: -2px; } .pm-filter-toggle input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .pm-filter-toggle input[type="checkbox"]:checked::after { content: "✓"; color: #fff; font-size: 10px; position: absolute; left: 1px; top: -2px; font-weight: 700; } /* Two-column layout inside the expanded detail. */ .pm-detail-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pm-detail-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 900px) { .pm-detail-twocol { grid-template-columns: 1fr; } } /* Pipeline-status checklist. */ .pm-detail-health { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .pm-detail-health-head { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .pm-detail-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .pm-health-row { display: flex; align-items: center; gap: 8px; font-size: 12px; } .pm-health-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; } .pm-health-row[data-ok="1"] .pm-health-mark { background: rgba(76,175,80,0.18); color: #4caf50; } .pm-health-row[data-ok="0"] .pm-health-mark { background: rgba(255,255,255,0.05); color: var(--text-muted); } .pm-health-row[data-ok="1"] .pm-health-lbl { color: var(--text-primary); } .pm-health-row[data-ok="0"] .pm-health-lbl { color: var(--text-muted); } /* Lyrics preview in the expanded detail. */ .pm-lyrics-preview { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .pm-lyrics-preview.is-empty { color: var(--text-muted); font-style: italic; font-size: 12px; } .pm-lyrics-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .pm-lyrics-meta { font-weight: 500; } .pm-lyrics-body { font-size: 12px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; } /* Inline audio preview — stem dropdown + HTML5 player. */ .pm-audio-preview { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .pm-audio-preview audio { flex: 1; min-width: 0; height: 36px; /* Chromium's native audio control is opaque white-on-light-grey by default and clashes with the dark app theme. Hue-rotate + invert + a slight opacity bleed the control into the surrounding card; the color-scheme hint tells Chromium to render its internal glyphs in dark-mode variants so the rotation lands in the right hue. */ color-scheme: dark; opacity: 0.92; border-radius: 18px; background: transparent; } .pm-audio-preview audio::-webkit-media-controls-panel { background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent); border-radius: 18px; } .pm-audio-preview audio::-webkit-media-controls-timeline, .pm-audio-preview audio::-webkit-media-controls-volume-slider { /* Subtle accent tint on the progress + volume scrubbers so the play bar reads as part of the app rather than a browser widget. */ filter: hue-rotate(210deg) saturate(0.9); } .pm-audio-preview audio::-webkit-media-controls-current-time-display, .pm-audio-preview audio::-webkit-media-controls-time-remaining-display { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; } .pm-audio-preview .pm-audio-stem { background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary); border-radius: 6px; padding: 6px 8px; font-size: 12px; min-width: 100px; max-width: 160px; outline: none; cursor: pointer; } .pm-audio-preview .pm-audio-stem:focus { border-color: var(--accent); } /* Top strip of the expanded detail: album art thumbnail + audio. */ .pm-detail-header-row { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .pm-cover-art { flex-shrink: 0; width: 80px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--bg-tertiary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; } .pm-cover-art img.pm-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } .pm-cover-loading { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; } .pm-cover-placeholder { color: var(--text-muted); opacity: 0.45; } .pm-detail-header-body { flex: 1; min-width: 0; display: flex; align-items: center; } /* Duplicate banner. */ .pm-detail-dup { background: color-mix(in srgb, var(--warning) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); color: var(--text-primary); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.4; } .pm-detail-dup strong { color: var(--warning); } .pm-dup-link { color: var(--accent); text-decoration: underline; margin-right: 4px; } /* Read-only info card — created/modified/duration/size/ID/lyrics source. */ .pm-detail-info { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; } .pm-detail-info-head { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .pm-detail-info-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; } .pm-detail-info-grid dt { font-size: 11px; color: var(--text-muted); font-weight: 500; } .pm-detail-info-grid dd { margin: 0; font-size: 12px; color: var(--text-primary); font-family: var(--font-mono); word-break: break-all; } .pm-detail-pid code { background: rgba(0,0,0,0.35); padding: 2px 6px; border-radius: 4px; font-size: 11px; color: var(--text-muted); } .pm-stem-list { display: flex; flex-wrap: wrap; gap: 8px; } .pm-stem-chip { --stem-color: #8b949e; display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px 8px 14px; background: color-mix(in srgb, var(--stem-color) 14%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--stem-color) 45%, transparent); border-left: 4px solid var(--stem-color); border-radius: 6px; min-width: 110px; transition: background 140ms, border-color 140ms; } .pm-stem-chip:hover { background: color-mix(in srgb, var(--stem-color) 22%, var(--bg-card)); border-color: color-mix(in srgb, var(--stem-color) 65%, transparent); } .pm-stem-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .pm-stem-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: color-mix(in srgb, var(--stem-color) 70%, var(--text-muted)); font-weight: 600; } /* Family-coloured chips — palette matches the timeline waveform * "progress" tones in multi_timeline.js so the same stem reads as * the same colour across the app. */ .pm-stem-chip[data-role="vocal"] { --stem-color: #58a6ff; } .pm-stem-chip[data-role="bass"] { --stem-color: #39d2e0; } .pm-stem-chip[data-role="drums"], .pm-stem-chip[data-role="percussion"] { --stem-color: #d29922; } .pm-stem-chip[data-role="guitar"] { --stem-color: #bc8cff; } .pm-stem-chip[data-role="keys"], .pm-stem-chip[data-role="harmonic"] { --stem-color: #3fb950; } .pm-stem-chip[data-role="strings"] { --stem-color: #f0883e; } .pm-stem-chip[data-role="brass"], .pm-stem-chip[data-role="winds"] { --stem-color: #ffa45c; } .pm-stem-chip[data-role="click"] { --stem-color: #6e7681; } .pm-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); font-size: 13px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.08); border-radius: 10px; } .project-card .project-delete:disabled { opacity: 0.4; cursor: wait; } /* Settings panel overlay */ #settings-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; } #settings-panel[hidden] { display: none; } /* Compact icon-only header buttons (settings cog, help) — fixed * frame size so adjacent icon buttons always have the same case * regardless of the glyph inside. The icon centers via the parent * .btn flex-row alignment. */ .btn.btn-icon-only { width: 36px; height: 36px; padding: 0; line-height: 1; align-self: center; } .btn.btn-icon-only svg { display: block; width: 18px; height: 18px; } /* Standard-size icon button — same padding & height as a text .btn * (like Save) but with an SVG glyph centered instead of text. Used by * Undo / Redo so they line up with the header's text buttons. */ .btn.btn-icon-std { padding: 8px 14px; line-height: 0; } .btn.btn-icon-std svg { display: block; } /* Tabbed settings modal — matches Recode's settings modal exactly * (max-width: 1300px; width: 95vw; height: 90vh). * Specificity bumped via `.modal.settings-modal` so it beats the * generic `.modal` rule that appears later in the file. */ .modal.settings-modal { width: 95vw; max-width: 1300px; height: 90vh; max-height: none; display: flex; flex-direction: column; } .settings-layout { flex: 1; display: flex; min-height: 0; } .settings-nav { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 6px 0 8px; margin-top: -4px; display: flex; flex-direction: column; background: var(--bg-tertiary); } .settings-nav-item { white-space: nowrap; } .settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--text-secondary); cursor: pointer; border-left: 3px solid transparent; transition: all var(--transition); } /* Honour the [hidden] attribute despite our explicit display:flex above * (CSS specificity would otherwise win over the UA stylesheet). The * permission-gating in settings_ui.js sets hidden=true on superuser * tabs for non-admin users; without this rule those tabs stay visible. */ .settings-nav-item[hidden], .settings-nav-divider[hidden], .settings-nav-section[hidden], .set-section[hidden] { display: none !important; } .settings-nav-item .nav-icon { flex-shrink: 0; width: 20px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; } .settings-nav-item .nav-icon svg { display: block; } .settings-nav-item:hover { color: var(--text-primary); background: var(--bg-hover); } .settings-nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-hover); font-weight: 600; } .settings-panel-body { flex: 1; padding: 22px 28px; overflow-y: auto; min-width: 0; } .settings-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--bg-tertiary); border-top: 1px solid var(--border); } .settings-status { font-size: 12px; color: var(--text-muted); transition: color var(--transition); } .settings-status[data-kind="dirty"] { color: var(--warning); } .settings-status[data-kind="saving"] { color: var(--accent); } .settings-status[data-kind="saved"]::before { content: "✓ "; color: var(--success); font-weight: 700; } .settings-status[data-kind="error"] { color: var(--error); } .set-section { display: none; } .set-section.active { display: block; } .set-section-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); } .set-section-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; } .set-row { margin-bottom: 18px; } /* Click-track sound picker — one radio-row per sample with a preview * button on the right. Each label is the whole clickable row so the * radio toggles without needing pixel-perfect aim. */ .click-sound-list { display: flex; flex-direction: column; gap: 6px; max-width: 520px; } /* Summary block inside the Generate Click Track modal — compact * two-column key/value rows, same visual language as the sidebar * kv-row readouts. */ .click-modal-summary { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; font-size: 13px; margin: 4px 0 14px; } .click-modal-summary .label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; align-self: center; } .click-modal-summary .value { color: var(--text-primary); font-weight: 600; } .click-modal-summary .value.muted { color: var(--text-muted); font-weight: 400; font-style: italic; } .click-sound-row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color 120ms, background 120ms; } .click-sound-row:hover { border-color: color-mix(in srgb, var(--purple, #bc8cff) 40%, var(--border)); } .click-sound-row input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--purple, #bc8cff); cursor: pointer; } .click-sound-row input[type="radio"]:checked ~ .click-sound-name { color: var(--text-primary); font-weight: 600; } .click-sound-row:has(input[type="radio"]:checked) { border-color: color-mix(in srgb, var(--purple, #bc8cff) 55%, var(--border)); background: color-mix(in srgb, var(--purple, #bc8cff) 8%, var(--bg-input)); } .click-sound-name { font-size: 14px; color: var(--text-primary); } .click-sound-meta { font-size: 12px; color: var(--text-muted); } .click-sound-preview { padding: 0 10px; } .set-row > label:not(.set-toggle) { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 6px; } .set-row select, .set-row input[type="text"], .set-row textarea { width: 100%; max-width: 360px; padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 13px; font-family: inherit; } .set-row textarea { font-family: var(--font-mono); font-size: 12px; resize: vertical; line-height: 1.5; max-width: 480px; } /* Empty-lyrics placeholder shown inside the editor when timings.lines has no words. Matches the editor's vertical centering. */ .lyrics-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 60px 32px; color: var(--text-muted); } .lyrics-empty-icon { color: var(--accent); opacity: 0.9; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; } .lyrics-empty-title { font-size: 18px; font-weight: 600; color: var(--text-secondary); } .lyrics-empty-hint { font-size: 13px; line-height: 1.5; max-width: 460px; } .lyrics-empty-hint strong { color: var(--text-primary); } /* Security tab — Recode-style helpers ported into mta-studio */ .form-group { margin-bottom: 12px; } .form-group:last-child { margin-bottom: 0; } .form-group > label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; } .form-group input[type="text"], .form-group input[type="password"], .form-group select { width: 100%; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; box-sizing: border-box; } .form-group input[type="text"]:focus, .form-group input[type="password"]:focus, .form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.15); } .set-desc { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; font-weight: normal; text-transform: none; letter-spacing: 0; } .set-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; padding: 4px 0; color: var(--text-secondary); user-select: none; } .set-chk input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 34px; height: 18px; background: var(--bg-input); border-radius: 9px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; border: 1px solid var(--border); margin: 0; } .set-chk input[type="checkbox"]::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 1px; left: 1px; transition: transform 0.2s; } .set-chk input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .set-chk input[type="checkbox"]:checked::after { transform: translateX(16px); } .set-row select:focus, .set-row input[type="text"]:focus, .set-row textarea:focus { outline: none; border-color: var(--accent); } .set-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 8px; } .set-grid-2 .set-row { margin-bottom: 0; } .settings-nav-divider { height: 1px; background: var(--border); margin: 12px 0; } .settings-nav-section { padding: 4px 16px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .set-control { display: flex; align-items: center; gap: 12px; } .set-control input[type="range"] { flex: 1; max-width: 320px; } .set-value { min-width: 70px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); } /* Toggle switches — pixel-for-pixel port of Recode's `.set-chk` style. */ .set-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text-primary); user-select: none; } .set-toggle input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 34px; height: 18px; background: var(--bg-hover); border-radius: 9px; position: relative; cursor: pointer; transition: background var(--transition); flex-shrink: 0; border: 1px solid var(--border); margin: 0; } .set-toggle input[type="checkbox"]::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 1px; left: 1px; transition: transform var(--transition); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .set-toggle input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .set-toggle input[type="checkbox"]:checked::after { transform: translateX(16px); } .set-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .set-hint { margin-top: 6px; font-size: 11px; color: var(--text-muted); line-height: 1.5; } .modal { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 600px; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-header h2 { font-size: 16px; margin: 0; } /* Empty editor: shown when ?view=editor with no project. Sidebar is * visible so the user can upload an MTA or pick a project. The main * pane just carries a centered "no project" hint. */ body.editor-empty .editor-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; color: var(--text-secondary); padding: 48px 24px; } body.editor-empty .editor-empty-state .editor-empty-icon { color: var(--accent); opacity: 0.85; margin-bottom: 14px; } body.editor-empty .editor-empty-state h2 { font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--text-primary); } body.editor-empty .editor-empty-state p { margin: 0 0 24px; font-size: 14px; max-width: 440px; } body.editor-empty .editor-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* Drop-zone inside #stem-rows when the editor has no project. Big * target, shows an upload icon + call to action. Hovering with a * dragged file lights it up with the accent border. */ .stems-dropzone { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; margin: 12px; min-height: 240px; border: 2px dashed rgba(139,148,158,0.35); border-radius: 12px; background: rgba(255,255,255,0.02); color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .stems-dropzone:hover { border-color: rgba(76,139,245,0.55); background: rgba(76,139,245,0.05); color: var(--text-primary); } .stems-dropzone.is-hovered { border-color: var(--accent); background: rgba(76,139,245,0.12); color: var(--text-primary); transform: scale(1.005); } .stems-dropzone-icon { color: var(--accent); opacity: 0.85; margin-bottom: 14px; } .stems-dropzone-title { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .stems-dropzone-sub { font-size: 13px; max-width: 420px; } /* Overlay headers (Library + Device) match the editor's main header * exactly: same height, padding, background, gap, border. */ .overlay-header { padding: 12px 24px !important; background: var(--bg-secondary); border-bottom: 1px solid var(--border); gap: 24px !important; } .overlay-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Overlay title: gradient app-mark + label */ .overlay-title { display: inline-flex; align-items: center; gap: 10px; } .overlay-title-mark { flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(76,139,245,0.35)); } /* Mini-mark icon used inside cross-link buttons in overlay nav and the * editor's main header (Library / Device buttons). Slightly down-shifted * so the icon's optical centre aligns with the text baseline. */ .overlay-mini-mark { flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4)); } .modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; } .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } /* Status dot */ .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); display: inline-block; } .dot.ok { background: var(--success); box-shadow: 0 0 6px var(--success); } .dot.warn { background: var(--warning); } .dot.err { background: var(--error); } /* Badges */ .badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; text-transform: uppercase; } /* ===== Help modal — same shell as #settings-panel ===== */ #help-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; } #help-panel[hidden] { display: none; } /* Section pane visibility — only the active one shows */ .help-section { display: none; } .help-section.active { display: block; } /* Content typography — adapted from /opt/Recode/static/index.html */ .help-content h3 { color: var(--text-primary); margin: 28px 0 12px 0; font-size: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .help-content h3:first-child, .help-content .help-section > h3:first-child { margin-top: 0; } .help-content h4 { color: var(--accent); margin: 22px 0 10px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .help-content p, .help-content li { font-size: 13px; color: var(--text-secondary); line-height: 1.7; } .help-content p { margin: 8px 0; } .help-content ul, .help-content ol { padding-left: 22px; margin: 8px 0; } .help-content li { margin-bottom: 4px; } .help-content strong { color: var(--text-primary); font-weight: 600; } .help-content em { color: var(--text-primary); font-style: italic; } .help-content code { background: var(--bg-tertiary); padding: 2px 6px; border-radius: 3px; font-size: 12px; color: var(--cyan); font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); } /* Tip / warn-tip callout boxes */ .help-content .tip { background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 14px 0; border-radius: 0 6px 6px 0; font-size: 12px; color: var(--text-secondary); line-height: 1.6; } .help-content .warn-tip { background: color-mix(in srgb, var(--error) 10%, transparent); border-left: 3px solid var(--error); padding: 10px 14px; margin: 14px 0; border-radius: 0 6px 6px 0; font-size: 12px; color: var(--text-secondary); line-height: 1.6; } /* Example boxes — for code snippets / sample output */ .help-content .example-box { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin: 14px 0; } .help-content .example-box .example-title { font-size: 11px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.5px; font-weight: 600; } /* Flow diagrams — pipeline / chapter layout illustrations */ .help-content .flow-diagram { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .help-content .flow-step { padding: 8px 14px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-primary); text-align: center; white-space: nowrap; } .help-content .flow-step.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary)); color: var(--accent); font-weight: 600; } .help-content .flow-step.success { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--bg-tertiary)); color: var(--success); font-weight: 600; } .help-content .flow-step.danger { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, var(--bg-tertiary)); color: var(--error); } .help-content .flow-arrow { color: var(--text-muted); font-size: 16px; } /* Preset cards — palette / option grids */ .help-content .preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; } .help-content .preset-card { padding: 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 8px; } .help-content .preset-card .preset-name { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 4px; } .help-content .preset-card .preset-vals { font-size: 11px; color: var(--cyan); font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); margin-bottom: 6px; } .help-content .preset-card .preset-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; } .help-content pre { background: var(--bg-secondary, var(--bg-tertiary)); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); } /* ────────────────────────────────────────────────────────────────── * Inline alert (injected by the inlineAlert() helper). Replaces the * corner toast for actions where the user is reading a specific * panel / modal. data-kind tints it: error (default), warning, info, * success. * ────────────────────────────────────────────────────────────────── */ .inline-alert { margin: 0 0 12px; padding: 10px 12px; background: color-mix(in srgb, var(--error) 12%, transparent); border: 1px solid color-mix(in srgb, var(--error) 40%, transparent); border-radius: 6px; color: var(--error); font-size: 13px; line-height: 1.4; } .inline-alert[data-kind="warning"] { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); } .inline-alert[data-kind="info"] { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); } .inline-alert[data-kind="success"] { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); } /* ────────────────────────────────────────────────────────────────── * Lightweight stem volume sliders — overrides the heavier shared * "input[type=range]" styling above so the per-stem fader feels like * a level meter you can drag. Fill picks up --role-fill (set per-row * by _roleColor in multi_timeline.js). Thumb is invisible at rest; * a tiny dot appears on hover. * ────────────────────────────────────────────────────────────────── */ .stem-waveform-row .stem-vol { height: 3px; border-radius: 2px; --thumb-w: 0px; background: linear-gradient( to right, var(--role-fill, var(--accent)) 0, var(--role-fill, var(--accent)) calc(var(--fill-ratio, 0) * 100%), rgba(255,255,255,0.06) calc(var(--fill-ratio, 0) * 100%), rgba(255,255,255,0.06) 100% ); transition: height 0.1s ease, background 0.12s ease; } .stem-waveform-row .stem-vol:hover { height: 4px; } .stem-waveform-row .stem-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; transition: background 0.1s ease, transform 0.1s ease; } .stem-waveform-row .stem-vol::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 0; cursor: pointer; transition: background 0.1s ease, transform 0.1s ease; } .stem-waveform-row .stem-vol:hover::-webkit-slider-thumb { background: var(--role-fill, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-fill, var(--accent)) 25%, transparent); } .stem-waveform-row .stem-vol:hover::-moz-range-thumb { background: var(--role-fill, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-fill, var(--accent)) 25%, transparent); } .stem-waveform-row .stem-vol:active::-webkit-slider-thumb { background: #fff; transform: scale(1.15); } .stem-waveform-row .stem-vol:active::-moz-range-thumb { background: #fff; transform: scale(1.15); } /* Compact (fit-mode / narrow) — even thinner. */ .stem-waveform-row.compact .stem-vol { height: 2px; border-radius: 1px; } .stem-waveform-row.compact .stem-vol:hover { height: 3px; } .stem-waveform-row.compact .stem-vol::-webkit-slider-thumb { width: 7px; height: 7px; } .stem-waveform-row.compact .stem-vol::-moz-range-thumb { width: 7px; height: 7px; }