digital-garbageandClaude Sonnet 5.5
a9cf49d97f
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2959 lines
186 KiB
CSS
2959 lines
186 KiB
CSS
/* ════════════════════════════════════════════════════════════════════
|
||
FunPack · Cutting Room — cinematic dark editing suite
|
||
════════════════════════════════════════════════════════════════════ */
|
||
/* ── theme tokens ──────────────────────────────────────────────────────
|
||
Two palettes, one vocabulary. The stylesheet below never names a colour;
|
||
it only names a role. `data-theme` is stamped on <html> at boot by
|
||
theme.js — "auto" is resolved there, so CSS only ever sees dark|light.
|
||
───────────────────────────────────────────────────────────────────── */
|
||
:root, :root[data-theme="dark"] {
|
||
color-scheme: dark;
|
||
--shadow-ink: rgba(0,0,0,.85);
|
||
--ink-0: #0c0b09; /* app bg */
|
||
--ink-1: #131210; /* zones */
|
||
--ink-2: #1a1814; /* heads / raised */
|
||
--ink-3: #221f19; /* hover */
|
||
--line: #2a261e;
|
||
--line-2: #37322833;
|
||
--line-hi: #4a4334; /* clip hover border */
|
||
--text: #ece7db;
|
||
--muted: #918a7a;
|
||
--faint: #645e51;
|
||
--surface-deep: #110f0c; /* deepest chrome / gradient floor */
|
||
--surface-deep-2: #12100c;
|
||
--surface-deep-3: #12100d;
|
||
--surface-deep-4: #121009; /* settings sidebar */
|
||
--surface-deep-5: #14110d;
|
||
--surface-deep-6: #14120d; /* menu rail */
|
||
--surface-modal: #16140f; /* modal / popover body */
|
||
--surface-pop: #1b1813; /* menu popover */
|
||
--surface-pop-2: #161410; /* popover gradient floor */
|
||
--surface-raised: #1e1b16; /* raised gradient top */
|
||
--surface-raised-2: #1f1c16;
|
||
--surface-raised-3: #211d16; /* clip body top */
|
||
--surface-raised-4: #19160f; /* clip body floor */
|
||
--surface-raised-5: #1a1711; /* audio track */
|
||
--surface-raised-6: #1a1712;
|
||
--surface-raised-7: #1b1812; /* timeline drop card */
|
||
--surface-raised-8: #1d1a14; /* context menu */
|
||
--surface-raised-9: #17140f;
|
||
--surface-log: #0c0b09f2; /* log panel */
|
||
--scroll-thumb: #2f2b22;
|
||
--scroll-thumb-hi: #3d382c;
|
||
--ink-void: #060606; /* media letterbox */
|
||
--black: #000; /* true black behind media */
|
||
--overlay-1: #ffffff08;
|
||
--overlay-2: #ffffff10;
|
||
--overlay-3: #ffffff18;
|
||
--overlay-4: #ffffff22;
|
||
--hi: #fff; /* on-media white */
|
||
--hi-soft: #fff8;
|
||
--scrim-1: #0006;
|
||
--scrim-2: #0009;
|
||
--scrim-3: #000a;
|
||
--scrim-4: #000c;
|
||
--scrim-slate: #080808ee; /* preview slate */
|
||
--fade-black: #00000088; /* transition tail */
|
||
--accent: #f3a93c;
|
||
--accent-hi: #ffc36b;
|
||
--accent-lo: #e0972a; /* gradient floor */
|
||
--accent-soft: rgba(243,169,60,.14);
|
||
--on-accent: #1a1206; /* text on a filled accent */
|
||
--on-accent-2: #241503;
|
||
--accent-dim: #2a2418; /* accent-tinted surface */
|
||
--accent-dim-2: #3d3420;
|
||
--accent-dim-3: #2a2218; /* tour chip */
|
||
--warn: #e8a040;
|
||
--teal: #57d0c6;
|
||
--teal-2: #3ab3a8;
|
||
--teal-3: #2d9a90;
|
||
--teal-4: #2a6a62;
|
||
--teal-hi: #c8fff4; /* text on teal-tinted chrome */
|
||
--teal-soft: rgba(87,208,198,.14);
|
||
--on-teal: #0a1a18;
|
||
--sel: rgb(45,212,191); /* clip selection ring */
|
||
--danger: #e8607a;
|
||
--danger-2: #e06c75;
|
||
--danger-hi: #fecaca;
|
||
--good: #79c479;
|
||
--good-2: #57c98e;
|
||
--pink: rgb(255,120,180); /* rating heart */
|
||
--pink-hi: #ffb3d4;
|
||
--violet: #c084fc;
|
||
--violet-2: #d8b4fe;
|
||
--violet-3: #e9d5ff;
|
||
--violet-4: #f3e8ff;
|
||
--violet-5: #c79bf2; /* refinement key badge */
|
||
--violet-6: #b8a0ff; /* audio placeholder */
|
||
--violet-7: #c4b0ff;
|
||
--indigo: #7c6cf0; /* v2v source stripe */
|
||
--blue: #60a5fa;
|
||
--blue-2: #93c5fd;
|
||
--blue-3: #7eb0ff;
|
||
--blue-4: #5b8def;
|
||
--blue-line: #2a4468;
|
||
--blue-dim: #3a5a8a;
|
||
--blue-dim-2: #1a2840;
|
||
--blue-dim-3: #121c2e;
|
||
--blue-dim-4: #141c28;
|
||
--blue-dim-5: #0f141c;
|
||
--blue-macro: rgb(88,166,214); /* shortcut macro box */
|
||
--audio-dim: #1e3a2f;
|
||
--audio-dim-2: #152820;
|
||
--audio-line: #2d5a45;
|
||
--audio-dim-3: #1a3530;
|
||
--audio-dim-4: #122820;
|
||
--audio-line-2: #2d6a58;
|
||
--stripe: #1a1a1a; /* pending hatch */
|
||
--carry: #1e2a28;
|
||
--carry-2: #243532;
|
||
--ov-preview-1: #2a2430; /* overlay text preview bg */
|
||
--ov-preview-2: #121018;
|
||
--grip: #8a8f98; /* splitter grip */
|
||
--grip-2: #5b6068;
|
||
--popup: rgba(24,26,30,0.99); /* rating popup */
|
||
--popup-line: rgba(180,190,200,0.3);
|
||
--backdrop: rgba(6,5,4,.66); /* modal scrim */
|
||
--backdrop-2: rgba(8,7,6,.92); /* welcome scrim */
|
||
--backdrop-3: rgba(8,7,5,.88); /* tour scrim */
|
||
--backdrop-4: rgba(6,5,4,.78);
|
||
--backdrop-5: rgba(19,18,16,.94); /* tour card */
|
||
--scrim-media: rgba(0,0,0,.55);
|
||
--scrim-media-2: rgba(0,0,0,.45);
|
||
--scrim-media-3: rgba(0,0,0,.85);
|
||
--surface-pop-3: #1a1813;
|
||
}
|
||
|
||
|
||
:root[data-theme="light"] {
|
||
color-scheme: light;
|
||
--shadow-ink: rgba(24,34,48,.30);
|
||
--ink-0: #f5f7fa; /* app bg */
|
||
--ink-1: #ffffff; /* zones */
|
||
--ink-2: #eef1f6; /* heads / raised */
|
||
--ink-3: #e1e7ef; /* hover */
|
||
--line: #d3dae3;
|
||
--line-2: #8a97a833;
|
||
--line-hi: #b9c3cf; /* clip hover border */
|
||
--text: #16202c;
|
||
--muted: #59677a;
|
||
--faint: #8d9aab;
|
||
--surface-deep: #e7ebf1; /* deepest chrome / gradient floor */
|
||
--surface-deep-2: #e9edf3;
|
||
--surface-deep-3: #e9edf3;
|
||
--surface-deep-4: #e9edf3; /* settings sidebar */
|
||
--surface-deep-5: #eceff4;
|
||
--surface-deep-6: #eceff4; /* menu rail */
|
||
--surface-modal: #ffffff; /* modal / popover body */
|
||
--surface-pop: #ffffff; /* menu popover */
|
||
--surface-pop-2: #f2f5f9; /* popover gradient floor */
|
||
--surface-raised: #f4f7fa; /* raised gradient top */
|
||
--surface-raised-2: #f4f7fa;
|
||
--surface-raised-3: #f4f7fa; /* clip body top */
|
||
--surface-raised-4: #e9edf3; /* clip body floor */
|
||
--surface-raised-5: #f2f5f9; /* audio track */
|
||
--surface-raised-6: #f2f5f9;
|
||
--surface-raised-7: #ffffff; /* timeline drop card */
|
||
--surface-raised-8: #ffffff; /* context menu */
|
||
--surface-raised-9: #eceff4;
|
||
--surface-log: #ffffffee; /* log panel */
|
||
--scroll-thumb: #c3ccd8;
|
||
--scroll-thumb-hi: #a9b5c4;
|
||
--ink-void: #0a0c0f; /* media letterbox */
|
||
--black: #000; /* true black behind media */
|
||
--overlay-1: #0f1a2a08;
|
||
--overlay-2: #0f1a2a10;
|
||
--overlay-3: #0f1a2a18;
|
||
--overlay-4: #0f1a2a22;
|
||
--hi: #ffffff; /* on-media white */
|
||
--hi-soft: #ffffffcc;
|
||
--scrim-1: #0006;
|
||
--scrim-2: #0009;
|
||
--scrim-3: #000a;
|
||
--scrim-4: #000c;
|
||
--scrim-slate: #0a0c0fee; /* preview slate */
|
||
--fade-black: #00000088; /* transition tail */
|
||
--accent: #2f7fd4;
|
||
--accent-hi: #5aa4ec;
|
||
--accent-lo: #2668b0; /* gradient floor */
|
||
--accent-soft: rgba(47,127,212,.13);
|
||
--on-accent: #ffffff; /* text on a filled accent */
|
||
--on-accent-2: #ffffff;
|
||
--accent-dim: #dbe7f6; /* accent-tinted surface */
|
||
--accent-dim-2: #c4d8f0;
|
||
--accent-dim-3: #dbe7f6; /* tour chip */
|
||
--warn: #b26a00;
|
||
--teal: #12857c;
|
||
--teal-2: #0f6f68;
|
||
--teal-3: #0c5c56;
|
||
--teal-4: #0a4a45;
|
||
--teal-hi: #0a4a45; /* text on teal-tinted chrome */
|
||
--teal-soft: rgba(18,133,124,.15);
|
||
--on-teal: #ffffff;
|
||
--sel: rgb(15,111,104); /* clip selection ring */
|
||
--danger: #c62a48;
|
||
--danger-2: #c0392f;
|
||
--danger-hi: #7f1d1d;
|
||
--good: #2f8f4e;
|
||
--good-2: #127a45;
|
||
--pink: rgb(197,45,116); /* rating heart */
|
||
--pink-hi: #a01a5c;
|
||
--violet: #7c3aed;
|
||
--violet-2: #6d28d9;
|
||
--violet-3: #5b21b6;
|
||
--violet-4: #4c1d95;
|
||
--violet-5: #6d28d9; /* refinement key badge */
|
||
--violet-6: #6d28d9; /* audio placeholder */
|
||
--violet-7: #5b21b6;
|
||
--indigo: #4f46e5; /* v2v source stripe */
|
||
--blue: #1d6fd0;
|
||
--blue-2: #1a5fb4;
|
||
--blue-3: #1a5fb4;
|
||
--blue-4: #2563eb;
|
||
--blue-line: #a8c4e8;
|
||
--blue-dim: #7ba7dd;
|
||
--blue-dim-2: #dbe8f8;
|
||
--blue-dim-3: #cbdcf2;
|
||
--blue-dim-4: #dbe8f8;
|
||
--blue-dim-5: #cbdcf2;
|
||
--blue-macro: rgb(29,111,208); /* shortcut macro box */
|
||
--audio-dim: #dcf0e4;
|
||
--audio-dim-2: #c6e6d3;
|
||
--audio-line: #8fcaa9;
|
||
--audio-dim-3: #d8f0e8;
|
||
--audio-dim-4: #c2e6d8;
|
||
--audio-line-2: #83c7b1;
|
||
--stripe: #cbd3dd; /* pending hatch */
|
||
--carry: #dde9e7;
|
||
--carry-2: #cadedb;
|
||
--ov-preview-1: #efeaf6; /* overlay text preview bg */
|
||
--ov-preview-2: #dcd6e8;
|
||
--grip: #8a8f98; /* splitter grip */
|
||
--grip-2: #b6bdc7;
|
||
--popup: rgba(255,255,255,0.99); /* rating popup */
|
||
--popup-line: rgba(80,95,115,0.28);
|
||
--backdrop: rgba(24,34,48,.34); /* modal scrim */
|
||
--backdrop-2: rgba(232,237,243,.94); /* welcome scrim */
|
||
--backdrop-3: rgba(24,34,48,.6); /* tour scrim */
|
||
--backdrop-4: rgba(24,34,48,.5);
|
||
--backdrop-5: rgba(255,255,255,.96); /* tour card */
|
||
--scrim-media: rgba(0,0,0,.55);
|
||
--scrim-media-2: rgba(0,0,0,.45);
|
||
--scrim-media-3: rgba(0,0,0,.85);
|
||
--surface-pop-3: #ffffff;
|
||
}
|
||
|
||
:root {
|
||
--media-w: 280px;
|
||
--properties-w: 340px;
|
||
--inspector-h: 340px;
|
||
--timeline-h: 320px;
|
||
--menubar-h: 34px;
|
||
/* Inter is the open Helvetica/SF-alike — Apple ships SF free, but its licence covers
|
||
work FOR Apple platforms only, so it can't be bundled here. system-ui sits right
|
||
behind it, which IS San Francisco on a Mac. */
|
||
--font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
|
||
--font-ui: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
||
--radius: 9px;
|
||
|
||
|
||
|
||
/* Type scale — the macOS text styles from Apple's HIG. Every size in this file is a
|
||
step on it; nothing is 11.5px any more. Body is 13, the macOS default. */
|
||
--fs-title-1: 22px; --lh-title-1: 26px;
|
||
--fs-title-2: 17px; --lh-title-2: 22px;
|
||
--fs-title-3: 15px; --lh-title-3: 20px;
|
||
--fs-body: 13px; --lh-body: 16px;
|
||
--fs-callout: 12px; --lh-callout: 15px;
|
||
--fs-subhead: 11px; --lh-subhead: 14px;
|
||
--fs-footnote: 10px; --lh-footnote: 13px;
|
||
|
||
/* 4pt grid. */
|
||
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
|
||
|
||
/* Control metrics. One height for anything clickable, so a row of mixed controls
|
||
lines up without per-component padding guesses. */
|
||
--ctl-h: 26px; /* buttons, selects */
|
||
--ctl-h-sm: 22px; /* compact / in-row */
|
||
--ctl-h-lg: 30px; /* text fields, primary actions */
|
||
--ctl-r: 6px;
|
||
--ctl-pad-x: 10px;
|
||
--shadow: 0 10px 30px -12px color-mix(in srgb, var(--shadow-ink) 82.4%, transparent);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html, body { height: 100%; margin: 0; }
|
||
body {
|
||
background:
|
||
radial-gradient(1200px 600px at 80% -10%, var(--surface-pop) 0%, transparent 60%),
|
||
var(--ink-0);
|
||
color: var(--text);
|
||
font: var(--fs-body)/1.45 var(--font-ui);
|
||
overflow: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
body.dragging { cursor: col-resize; user-select: none; }
|
||
|
||
/* film grain overlay */
|
||
.grain {
|
||
position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: .035;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||
mix-blend-mode: overlay;
|
||
}
|
||
|
||
button, input, select, textarea { font-family: inherit; color: var(--text); }
|
||
::selection { background: var(--accent-soft); }
|
||
|
||
/* scrollbars */
|
||
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
||
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--ink-1); }
|
||
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hi); }
|
||
*::-webkit-scrollbar-track { background: transparent; }
|
||
|
||
/* ───────────────────────── MENU BAR ───────────────────────── */
|
||
.menubar {
|
||
height: var(--menubar-h); display: flex; align-items: center; gap: 18px;
|
||
padding: 0 14px; background: linear-gradient(var(--surface-modal), var(--surface-deep));
|
||
border-bottom: 1px solid var(--line); position: relative; z-index: 200;
|
||
}
|
||
.brand { font-family: var(--font-display); font-weight: 800; letter-spacing: .2px; font-size: var(--fs-title-3); display: flex; align-items: center; gap: 8px; }
|
||
.brand-mark { color: var(--accent); font-size: 12px; transform: translateY(-1px); filter: drop-shadow(0 0 6px var(--accent-soft)); }
|
||
.brand-sub { color: var(--faint); font-weight: 500; font-size: var(--fs-callout); }
|
||
/* The brand is a link back to the hub in both frontends. */
|
||
a.brand { text-decoration: none; color: inherit; }
|
||
a.brand:hover .brand-sub { color: var(--accent-hi); }
|
||
|
||
.menus { display: flex; gap: 2px; }
|
||
|
||
/* ── Simple ⇄ Editor ──────────────────────────────────────────────────────
|
||
One app, two faces. The switch sits beside the wordmark because it changes
|
||
what the whole window is, not what one panel shows. */
|
||
.mode-switch {
|
||
display: inline-flex; flex: 0 0 auto; padding: 2px; gap: 2px;
|
||
border: 1px solid var(--line); border-radius: 7px; background: var(--ink-1);
|
||
}
|
||
.mode-btn {
|
||
border: 0; border-radius: 5px; background: transparent; color: var(--muted);
|
||
height: 22px; padding: 0 var(--sp-2); cursor: pointer;
|
||
font-family: inherit; font-size: var(--fs-subhead); line-height: var(--lh-subhead);
|
||
transition: background .12s, color .12s;
|
||
}
|
||
.mode-btn:hover { color: var(--text); }
|
||
.mode-btn.on { background: var(--accent-soft); color: var(--accent-hi); }
|
||
|
||
/* Where the transport bar lands when the timeline is hidden. */
|
||
.mode-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
||
.mode-actions:empty { display: none; }
|
||
|
||
/* Simple mode: everything that needs explaining is gone. Nothing is disabled and no
|
||
state is dropped — the timeline, ratings and advanced panes are still there, and
|
||
switching back shows them exactly as they were. */
|
||
:root[data-ui-mode="simple"] .zone.timeline,
|
||
:root[data-ui-mode="simple"] #split-bottom,
|
||
:root[data-ui-mode="simple"] #split-left,
|
||
:root[data-ui-mode="simple"] #split-right,
|
||
:root[data-ui-mode="simple"] .dock-tabs,
|
||
:root[data-ui-mode="simple"] .composer-btn,
|
||
:root[data-ui-mode="simple"] .insp-engine-strip,
|
||
:root[data-ui-mode="simple"] .rating-bar,
|
||
:root[data-ui-mode="simple"] .insp-fold,
|
||
:root[data-ui-mode="simple"] .mode-full-only { display: none !important; }
|
||
|
||
.menu { position: relative; }
|
||
.menu-btn {
|
||
background: transparent; border: 0; height: var(--ctl-h); padding: 0 var(--sp-2);
|
||
border-radius: var(--ctl-r);
|
||
font-size: var(--fs-callout); color: var(--text); cursor: pointer; letter-spacing: .2px;
|
||
}
|
||
.menu.open .menu-btn, .menu-btn:hover { background: var(--ink-3); }
|
||
.menu-pop {
|
||
position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px;
|
||
background: var(--surface-pop); border: 1px solid var(--line); border-radius: 10px;
|
||
box-shadow: var(--shadow); padding: 6px; z-index: 300;
|
||
animation: pop .12s ease; transform-origin: top left;
|
||
}
|
||
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
|
||
.menu-item {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||
padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; white-space: nowrap;
|
||
}
|
||
.menu-item:hover { background: var(--accent-soft); color: var(--accent-hi); }
|
||
.menu-item.disabled { color: var(--faint); pointer-events: none; }
|
||
.menu-item .hint { color: var(--faint); font-size: var(--fs-subhead); }
|
||
.menu-item:hover .hint { color: var(--accent); }
|
||
.menu-sep { height: 1px; background: var(--line); margin: 5px 6px; }
|
||
.menu-label { padding: 4px 10px 3px; font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.menu-veil { position: fixed; inset: 0; z-index: 150; }
|
||
|
||
.menubar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
|
||
.health-chip, .save-chip {
|
||
font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--muted);
|
||
display: flex; align-items: center; gap: 6px; padding: 3px var(--sp-2);
|
||
border: 1px solid var(--line); border-radius: 20px;
|
||
}
|
||
.health-chip .led { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
|
||
.health-chip.ok .led { background: var(--good); box-shadow: 0 0 8px var(--good); }
|
||
.health-chip.bad .led { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
|
||
.save-chip { border-color: transparent; color: var(--faint); }
|
||
.save-chip.dirty { color: var(--accent); }
|
||
|
||
/* backend log viewer */
|
||
.log-btn { background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; color: var(--muted);
|
||
font-size: 11px; padding: 3px 11px; cursor: pointer; }
|
||
.log-btn:hover { color: var(--accent-hi); background: var(--ink-3); }
|
||
.log-btn.active { color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
|
||
.log-panel { position: fixed; z-index: 9000; right: 14px; top: 48px; width: min(720px, 88vw); height: min(420px, 60vh);
|
||
background: var(--surface-log); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column;
|
||
box-shadow: 0 16px 40px -12px var(--black); overflow: hidden; }
|
||
.log-panel[hidden] { display: none; } /* explicit display:flex above would otherwise beat the hidden attribute */
|
||
.log-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--line);
|
||
font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
|
||
.log-actions { display: flex; gap: 6px; align-items: center; }
|
||
.log-freeze-indicator { font-family: var(--font-ui); font-size: 10px; color: var(--faint); white-space: nowrap; }
|
||
.log-body { flex: 1; margin: 0; padding: 8px 10px; overflow: auto; white-space: pre-wrap; word-break: break-word;
|
||
font-family: var(--font-ui); font-size: 11px; line-height: 1.45; color: var(--text); background: var(--ink-void); }
|
||
.log-body .log-error { color: var(--danger); }
|
||
.log-body .log-warn { color: var(--warn); }
|
||
.log-body .log-ok { color: var(--good); }
|
||
|
||
/* ──────────── WORKSPACE — OpenCut-style NLE: Assets | Preview | Properties / Timeline ──────────── */
|
||
/* (layout borrowed from OpenCut: three resizable columns over a full-width timeline) */
|
||
.workspace { height: calc(100% - var(--menubar-h)); display: flex; flex-direction: column; min-height: 0; }
|
||
.main-row { flex: 1; display: flex; min-height: 0; min-width: 0; }
|
||
|
||
.zone { background: var(--ink-1); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
|
||
.dock-panel[hidden] { display: none !important; }
|
||
|
||
.media { width: var(--media-w); flex: 0 0 auto; border-right: 1px solid var(--line); container-type: inline-size; container-name: media-zone; }
|
||
.preview { flex: 1; min-width: 120px; }
|
||
.inspector { width: var(--properties-w); flex: 0 0 auto; border-left: 1px solid var(--line); }
|
||
.timeline { height: var(--timeline-h); min-height: 200px; border-top: 1px solid var(--line); }
|
||
|
||
/* Timeline peek (Settings > Appearance): the timeline sits as a strip showing only its
|
||
header — title, transport, Composer — and opens to its full height when pointed at.
|
||
It grows UPWARD because it is the last row of a column, so the strip stays under the
|
||
cursor as it opens and the pointer never falls out of what it just opened.
|
||
.peek-drag-open is held by timeline_peek.js for the length of a drag: during one the
|
||
pointer is in drag mode and a strip that stays shut is a target you cannot hit. */
|
||
:root[data-timeline-peek="1"] .zone.timeline {
|
||
/* Sizes to its contents: the header, plus the strip or the timeline. flex: 0 0 auto is
|
||
load-bearing — .zone is a shrinkable column child, and a fixed height with min-height: 0
|
||
let the workspace squeeze it to 1px. */
|
||
height: auto;
|
||
min-height: 0;
|
||
flex: 0 0 auto;
|
||
}
|
||
/* CLOSED is height 0, not display:none — display cannot be transitioned, and the swap has to
|
||
animate. overflow: hidden is what keeps the resting state clean: at height 0 there is no
|
||
sliver of lane or cut-off clip to read as a broken timeline, and on the way open the same
|
||
clipping is simply what a reveal looks like. */
|
||
:root[data-timeline-peek="1"] .zone.timeline .zone-body {
|
||
flex-grow: 0;
|
||
flex-shrink: 0;
|
||
flex-basis: 0;
|
||
height: 0;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
transition: height .18s cubic-bezier(.22,.61,.36,1),
|
||
flex-basis .18s cubic-bezier(.22,.61,.36,1);
|
||
}
|
||
:root[data-timeline-peek="1"] .zone.timeline.peek-open .zone-body,
|
||
:root[data-timeline-peek="1"] .zone.timeline.peek-drag-open .zone-body {
|
||
flex-basis: var(--timeline-h);
|
||
height: var(--timeline-h);
|
||
overflow: auto;
|
||
}
|
||
/* The strip. It IS the closed state, so it collapses as the timeline arrives — the two
|
||
animate against each other and the zone's total height stays continuous. */
|
||
.tl-peek-strip { display: none; }
|
||
:root[data-timeline-peek="1"] .tl-peek-strip {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 auto;
|
||
height: 26px;
|
||
overflow: hidden;
|
||
border-top: 1px solid var(--line);
|
||
font-size: var(--fs-subhead);
|
||
color: var(--faint);
|
||
letter-spacing: .02em;
|
||
white-space: nowrap;
|
||
cursor: default;
|
||
user-select: none;
|
||
transition: height .18s cubic-bezier(.22,.61,.36,1),
|
||
opacity .12s ease, color .12s ease;
|
||
}
|
||
:root[data-timeline-peek="1"] .tl-peek-strip:hover { color: var(--text); }
|
||
:root[data-timeline-peek="1"] .zone.timeline.peek-open .tl-peek-strip,
|
||
:root[data-timeline-peek="1"] .zone.timeline.peek-drag-open .tl-peek-strip {
|
||
height: 0;
|
||
opacity: 0;
|
||
border-top-color: transparent;
|
||
}
|
||
/* Dragging the splitter would fight the strip for the height, so it goes with it. The
|
||
preference IS the height decision while it is on. */
|
||
:root[data-timeline-peek="1"] #split-bottom { display: none; }
|
||
/* Anything anchored to the timeline's height reads the CLOSED size: measured header + strip. */
|
||
:root[data-timeline-peek="1"] {
|
||
--timeline-anchor: calc(var(--timeline-peek-h, 34px) + 26px);
|
||
}
|
||
/* Reduced motion: it still opens and closes, just without the slide. */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
:root[data-timeline-peek="1"] .zone.timeline .zone-body,
|
||
:root[data-timeline-peek="1"] .tl-peek-strip { transition: none; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* degrade gracefully as columns are toggled off — preview takes the slack, else properties, else media */
|
||
.main-row[data-preview="0"][data-settings="1"] .inspector { flex: 1; width: auto; }
|
||
.main-row[data-preview="0"][data-settings="0"] .media,
|
||
.main-row[data-media="0"][data-preview="0"] .inspector { flex: 1; width: auto; }
|
||
|
||
/* hide a splitter when one of its two neighbours is hidden */
|
||
.main-row[data-media="0"] #split-left,
|
||
.main-row[data-preview="0"][data-settings="0"] #split-left { display: none; }
|
||
.main-row[data-preview="0"] #split-right,
|
||
.main-row[data-settings="0"] #split-right { display: none; }
|
||
|
||
/* panel toggle tabs (timeline header, top-right) */
|
||
.dock-tabs { display: flex; gap: 4px; margin-left: 12px; flex: 0 0 auto; }
|
||
.dock-tab {
|
||
background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
|
||
color: var(--faint); font-size: 11px; padding: 4px 10px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
|
||
}
|
||
.dock-tab:hover { color: var(--muted); border-color: var(--muted); }
|
||
.dock-tab.on { background: var(--accent-soft); color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
|
||
.dock-tab:only-child { cursor: default; }
|
||
|
||
/* Pinned shortcuts: same chip shape as the panel toggles so the row reads as one strip,
|
||
with a leading dot marking them as "goes somewhere" rather than "shows a panel". */
|
||
.pinned-tabs { margin-left: 0; margin-right: 4px; }
|
||
.pinned-tab { color: var(--muted); border-style: dashed; cursor: pointer; }
|
||
.pinned-tab::before { content: "◆"; margin-right: 5px; color: var(--accent); font-size: 9px; }
|
||
.pinned-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
|
||
/* A lone pin is still a button — the panel-toggle rule that disables the last visible
|
||
panel must not reach into this nav. */
|
||
.pinned-tab:only-child { cursor: pointer; }
|
||
|
||
.pin-modal { max-width: 460px; }
|
||
.pin-lead { font-size: 13px; color: var(--text); margin-bottom: 4px; }
|
||
.pin-hint { font-size: 11px; color: var(--faint); line-height: 1.45; margin-bottom: 10px; }
|
||
.pin-slots { display: flex; flex-direction: column; gap: 6px; }
|
||
.pin-slot {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
||
width: 100%; text-align: left; cursor: pointer;
|
||
padding: 9px 11px; border-radius: 8px;
|
||
background: var(--ink-2); border: 1px solid var(--line);
|
||
transition: border-color .12s, background .12s;
|
||
}
|
||
.pin-slot:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--ink-3); }
|
||
.pin-slot.occupied { border-style: solid; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
|
||
.pin-slot-name { font-size: 12px; font-weight: 600; color: var(--text); }
|
||
.pin-slot-sub { font-size: 11px; color: var(--faint); margin-top: 2px; }
|
||
.pin-slot-pos { font-size: 10px; color: var(--faint); font-family: var(--font-ui); flex-shrink: 0; }
|
||
.pin-clear-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
|
||
padding-top: 10px; border-top: 1px solid var(--line); }
|
||
|
||
.zone-head {
|
||
/* min-height, not height: the right-hand status block wraps when the zone is narrow,
|
||
and a fixed height let it spill over the zone above AND the toolbar below. */
|
||
min-height: 34px; flex: 0 0 auto; display: flex; align-items: center;
|
||
gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
|
||
padding: var(--sp-1) var(--sp-3); background: linear-gradient(var(--surface-pop-3), var(--surface-pop-2));
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.zone-title {
|
||
font-size: var(--fs-callout); line-height: var(--lh-callout); color: var(--text); font-weight: 600;
|
||
}
|
||
.zone-title::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: var(--sp-2); border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
|
||
.transport-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
||
.transport-actions .btn.compact { min-height: var(--ctl-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-subhead); }
|
||
.transport-actions .btn:disabled { opacity: 0.42; pointer-events: none; cursor: default; }
|
||
.transport-actions .btn.render {
|
||
background: linear-gradient(var(--teal-2), var(--teal-3)); color: var(--on-teal); border-color: var(--teal-2);
|
||
font-weight: 600; box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--teal) 55%, transparent);
|
||
}
|
||
.transport-actions .btn.render:hover { filter: brightness(1.08); }
|
||
.zone-head-right { margin-left: auto; font-family: var(--font-ui); font-size: var(--fs-subhead);
|
||
color: var(--faint); display: flex; gap: var(--sp-1) var(--sp-2); align-items: center;
|
||
flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
|
||
.zone-body { flex: 1; overflow: auto; padding: var(--sp-4); min-height: 0; }
|
||
|
||
/* splitters */
|
||
.splitter { background: transparent; position: relative; flex: 0 0 auto; }
|
||
.splitter::after { content: ""; position: absolute; background: var(--line); transition: background .15s; }
|
||
.splitter:hover::after { background: var(--accent); }
|
||
.splitter-v { width: 7px; cursor: col-resize; }
|
||
.splitter-v::after { inset: 0 3px; }
|
||
.splitter-h { height: 7px; cursor: row-resize; }
|
||
.splitter-h::after { inset: 3px 0; }
|
||
|
||
/* ───────────────────────── BUTTONS / FIELDS ───────────────────────── */
|
||
.btn { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--ctl-r);
|
||
min-height: var(--ctl-h); padding: 0 var(--ctl-pad-x); cursor: pointer;
|
||
font-size: var(--fs-callout); line-height: var(--lh-callout);
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||
white-space: nowrap; /* a toolbar label wrapping inside a 22px chip reads as broken */
|
||
transition: border-color .12s, background .12s; }
|
||
.btn:hover { border-color: var(--accent); }
|
||
.btn.primary { background: linear-gradient(var(--accent), var(--accent-lo)); color: var(--on-accent); border-color: var(--accent); font-weight: 700; box-shadow: 0 4px 14px -6px var(--accent); }
|
||
.btn.primary:hover { filter: brightness(1.08); }
|
||
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 0 var(--sp-2); }
|
||
.btn.ghost:hover { color: var(--accent-hi); background: var(--ink-3); }
|
||
.btn.ghost.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
|
||
/* "This is switched on but cannot do anything" chip, shown beside Generate. */
|
||
.btn.action-warn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
|
||
.btn.action-warn:hover { color: var(--accent-hi); border-color: var(--accent); }
|
||
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
|
||
/* Live elapsed counter on a transport button. Tabular figures keep the label from twitching
|
||
as the digits change; the seconds are zero-padded in JS so the string only ever grows at
|
||
the minute boundary, not once a second. */
|
||
.btn.btn-timer { font-variant-numeric: tabular-nums; }
|
||
.btn.tiny { min-height: var(--ctl-h-sm); padding: 0 var(--sp-2); font-size: var(--fs-subhead); }
|
||
|
||
label.field { display: block; margin-bottom: 12px; }
|
||
label.field > span { display: block; font-size: var(--fs-subhead); line-height: var(--lh-subhead);
|
||
color: var(--muted); margin-bottom: var(--sp-1); font-weight: 500; }
|
||
/* Field label with an inline enable toggle (e.g. Postfix). Matches the field-label look. */
|
||
.field-toggle { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; cursor: pointer; }
|
||
.field-toggle > input { width: auto; margin: 0; }
|
||
.field-toggle > span { font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.field > textarea:disabled { opacity: .45; cursor: not-allowed; }
|
||
input, select, textarea {
|
||
width: 100%; background: var(--ink-0); border: 1px solid var(--line); border-radius: var(--ctl-r);
|
||
min-height: var(--ctl-h-lg); padding: 5px var(--sp-2);
|
||
font-size: var(--fs-body); line-height: var(--lh-body);
|
||
outline: none; transition: border-color .12s, box-shadow .12s;
|
||
}
|
||
textarea { min-height: 0; }
|
||
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
|
||
textarea { resize: vertical; line-height: 1.5; }
|
||
.fields-row { display: flex; gap: 10px; }
|
||
.fields-row > label.field { flex: 1; }
|
||
input[type=number] { font-family: var(--font-ui); }
|
||
|
||
/* ───────────────────────── MEDIA BROWSER ───────────────────────── */
|
||
.mb-section { margin-bottom: 18px; }
|
||
.mb-section-title { display: flex; align-items: center; justify-content: space-between;
|
||
font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--muted);
|
||
margin-bottom: var(--sp-2); font-weight: 600; }
|
||
.project-row { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--ctl-r); cursor: pointer; border: 1px solid transparent; }
|
||
.project-row:hover { background: var(--ink-2); }
|
||
.project-row.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 27%, transparent); }
|
||
.project-row .pj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.project-row .pj-meta { font-family: var(--font-ui); font-size: 11px; color: var(--faint); }
|
||
.mediabin {
|
||
border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 26px 14px; text-align: center;
|
||
color: var(--faint); font-size: 12px; transition: border-color .15s, background .15s;
|
||
}
|
||
.mediabin.drag { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
|
||
.mediabin.uploading { border-style: solid; border-color: var(--accent); color: var(--text); cursor: default; }
|
||
.mediabin .big { font-size: 26px; opacity: .5; margin-bottom: 8px; }
|
||
.mediabin { cursor: pointer; padding: 18px 14px; }
|
||
.media-upload-bar {
|
||
width: 100%; max-width: 220px; height: 5px; margin: 8px auto 4px;
|
||
background: var(--ink-2); border-radius: 3px; overflow: hidden;
|
||
}
|
||
.media-upload-bar-fill { height: 100%; background: var(--accent); transition: width .12s linear; }
|
||
.soon { font-family: var(--font-ui); font-size: 10px; letter-spacing: 1px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
|
||
|
||
/* bin tabs (Media / Shortcuts / Transitions) */
|
||
.mb-bin-shell { display: flex; flex-direction: column; min-height: 0; }
|
||
.mb-bin-scroll { display: flex; flex-direction: column; gap: 10px; }
|
||
.bin-tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
|
||
overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
|
||
.bin-tabs-sticky {
|
||
position: sticky; top: 0; z-index: 3; margin-bottom: 10px;
|
||
background: color-mix(in srgb, var(--ink-0) 92%, transparent);
|
||
backdrop-filter: blur(6px);
|
||
padding-top: 2px;
|
||
}
|
||
.bin-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--faint);
|
||
font-family: var(--font-ui); font-size: 10px; letter-spacing: .4px; padding: 6px 7px; cursor: pointer;
|
||
flex: 0 0 auto; white-space: nowrap; }
|
||
.bin-tab:hover { color: var(--muted); }
|
||
.bin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||
.bin { display: flex; flex-direction: column; gap: 10px; }
|
||
|
||
/* media grid — default compact (pickers, modals); media browser scales with panel width */
|
||
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
|
||
#media-zone .media-grid {
|
||
gap: clamp(8px, 2.5cqw, 14px);
|
||
}
|
||
#media-zone .media-grid[data-cols="0"] {
|
||
--mb-cell: clamp(96px, 46cqw, 240px);
|
||
grid-template-columns: repeat(auto-fill, minmax(var(--mb-cell), 1fr));
|
||
}
|
||
#media-zone .media-grid[data-cols="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); --mb-cell: 92cqw; }
|
||
#media-zone .media-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); --mb-cell: 44cqw; }
|
||
#media-zone .media-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); --mb-cell: 29cqw; }
|
||
#media-zone .media-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); --mb-cell: 21cqw; }
|
||
#media-zone .media-thumb {
|
||
height: auto;
|
||
aspect-ratio: 16 / 10;
|
||
min-height: 64px;
|
||
}
|
||
#media-zone .media-icon { font-size: clamp(22px, calc(var(--mb-cell) * 0.32), 36px); }
|
||
#media-zone .media-kind-badge {
|
||
font-size: clamp(8px, calc(var(--mb-cell) * 0.08), 10px);
|
||
padding: 3px 5px;
|
||
}
|
||
#media-zone .media-name-row { min-height: 30px; padding: 4px 6px 6px; align-items: flex-start; }
|
||
#media-zone .media-name {
|
||
font-size: clamp(11.5px, calc(var(--mb-cell) * 0.115), 13.5px);
|
||
line-height: 1.3;
|
||
white-space: normal;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
#media-zone .media-act { width: 18px; height: 18px; font-size: 11px; }
|
||
#media-zone .media-name-edit { font-size: clamp(11.5px, calc(var(--mb-cell) * 0.115), 13.5px); }
|
||
/* Bin views: list = a row per item, icons = bare small thumbnails (the name is the tooltip). */
|
||
#media-zone .media-grid[data-view="list"][data-cols] { grid-template-columns: minmax(0, 1fr); gap: 4px; --mb-cell: 40px; }
|
||
#media-zone .media-grid[data-view="list"] .media-card { display: flex; align-items: center; }
|
||
#media-zone .media-grid[data-view="list"] .media-thumb { width: 56px; height: 40px; flex: none; }
|
||
#media-zone .media-grid[data-view="list"] .media-name-row { flex: 1; min-width: 0; align-items: center; }
|
||
#media-zone .media-grid[data-view="list"] .media-name-actions { opacity: 1; }
|
||
#media-zone .media-grid[data-view="icons"][data-cols] { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; --mb-cell: 46px; }
|
||
#media-zone .media-grid[data-view="icons"] .media-thumb { height: 46px; }
|
||
#media-zone .media-grid[data-view="icons"] .media-name { display: none; }
|
||
#media-zone .media-grid[data-view="icons"] .media-name-row { position: absolute; top: 0; right: 0; left: 0; min-height: 0; padding: 1px; justify-content: flex-end; flex-wrap: wrap; background: color-mix(in srgb, var(--ink-void) 70%, transparent); }
|
||
.media-card { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--ink-0); }
|
||
.media-card:hover { border-color: var(--muted); }
|
||
.media-card.previewing { border-color: var(--teal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 35%, transparent); }
|
||
.media-thumb { height: 56px; display: flex; align-items: center; justify-content: center; background: var(--ink-void); position: relative; }
|
||
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||
.media-vid-thumb { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
|
||
.media-icon { font-size: 20px; color: var(--faint); }
|
||
.media-vid-ph { color: color-mix(in srgb, var(--accent-hi) 70%, var(--faint)); }
|
||
.media-aud-ph { color: color-mix(in srgb, var(--violet-6) 75%, var(--faint)); }
|
||
.media-kind-badge {
|
||
position: absolute; left: 3px; top: 3px; z-index: 2;
|
||
display: inline-flex; align-items: center; gap: 2px;
|
||
font-size: 9px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .04em;
|
||
line-height: 1; padding: 2px 4px; border-radius: 4px;
|
||
background: var(--scrim-4); border: 1px solid var(--overlay-3); pointer-events: none;
|
||
}
|
||
.media-kind-ico { font-size: 9px; line-height: 1; }
|
||
.media-kind-lbl { opacity: .92; }
|
||
.media-kind-badge.kind-image { color: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 35%, transparent); }
|
||
.media-kind-badge.kind-video { color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent-hi) 35%, transparent); }
|
||
.media-kind-badge.kind-audio { color: var(--violet-7); border-color: color-mix(in srgb, var(--violet-6) 35%, transparent); }
|
||
.media-kind-badge.kind-other { color: var(--muted); }
|
||
.media-name-row { display: flex; align-items: center; gap: 2px; padding: 2px 3px 3px; min-height: 22px; }
|
||
.media-name { flex: 1; min-width: 0; font-size: 10px; color: var(--muted); padding: 1px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.media-name-actions { display: flex; flex-shrink: 0; gap: 1px; opacity: 0; transition: opacity .12s; }
|
||
.media-card:hover .media-name-actions,
|
||
.media-card:focus-within .media-name-actions { opacity: 1; }
|
||
.media-act {
|
||
width: 16px; height: 16px; padding: 0; font-size: 10px; line-height: 1; flex-shrink: 0;
|
||
border: none; border-radius: 3px; background: var(--ink-2); color: var(--muted); cursor: pointer;
|
||
}
|
||
.media-act:hover { color: var(--accent-hi); background: var(--ink-3); }
|
||
.media-act.media-del:hover { color: var(--danger); }
|
||
.media-act.media-pin { filter: grayscale(1); }
|
||
.media-act.media-pin:hover { filter: none; }
|
||
.media-act.media-pin.active { filter: none; background: var(--accent-soft); }
|
||
.media-pin-badge { position: absolute; top: 3px; left: 3px; font-size: 10px; line-height: 1;
|
||
padding: 2px 3px; border-radius: 4px; background: var(--scrim-media); pointer-events: none; }
|
||
/* Reference mark. Reads as a letter, not an icon, so it sits beside the pin without
|
||
competing with it — and the badge carries the index, which is the load-bearing part. */
|
||
.media-act.media-ref { font-weight: 700; }
|
||
.media-act.media-ref.active { color: var(--ink-0); background: var(--accent); }
|
||
.media-ref-badge { position: absolute; top: 3px; right: 3px; font-size: 9px; font-weight: 700;
|
||
line-height: 1; padding: 2px 4px; border-radius: 4px; color: var(--ink-0);
|
||
background: var(--accent); pointer-events: none; }
|
||
.media-name-edit {
|
||
flex: 1; min-width: 0; box-sizing: border-box; margin: 0; padding: 2px 4px; font-size: 10px;
|
||
background: var(--ink-0); border: 1px solid var(--accent); border-radius: 4px; color: var(--text);
|
||
}
|
||
.media-card.picked { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
|
||
.media-bin-actions {
|
||
display: flex; gap: 6px; flex-wrap: wrap;
|
||
position: sticky; top: 0; z-index: 4; padding: 4px 0;
|
||
background: color-mix(in srgb, var(--ink-0) 92%, transparent);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.media-bin-footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; align-items: center; }
|
||
.media-bin-controls { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
|
||
.media-bin-type { margin: 0; }
|
||
.media-bin-sort { display: flex; align-items: center; gap: 8px; }
|
||
.media-bin-cols { display: flex; align-items: center; gap: 8px; }
|
||
.media-bin-cols-switch { flex: 1; min-width: 0; }
|
||
.media-bin-cols-switch .insp-seg { flex: 1; min-width: 0; padding-left: 4px; padding-right: 4px; }
|
||
.media-bin-sort-lbl { flex: 0 0 auto; font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.media-bin-sort-sel { flex: 1; min-width: 0; padding: 5px 7px; font-size: 12px; }
|
||
.media-bin-count { margin: 0; }
|
||
.media-grid-empty { grid-column: 1 / -1; padding: 4px 2px; }
|
||
.media-group-hdr {
|
||
grid-column: 1 / -1;
|
||
font-family: var(--font-ui); font-size: 9px; letter-spacing: .8px; text-transform: uppercase;
|
||
color: var(--faint); padding: 6px 2px 2px; margin-top: 2px;
|
||
}
|
||
.media-group-hdr:first-child { margin-top: 0; padding-top: 2px; }
|
||
.media-select-btn.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--ink-0)); }
|
||
.media-select-mode .media-card { cursor: default; }
|
||
.media-select-mode .media-card:not(.picked):hover { border-color: var(--accent-hi); }
|
||
|
||
/* media picker (replaces image <select>s) */
|
||
.media-picker { display: flex; flex-direction: column; gap: 8px; width: 100%; }
|
||
.media-picker.compact .mpk-sel { padding: 6px 8px; }
|
||
.media-picker.disabled { opacity: .55; pointer-events: none; }
|
||
.mpk-sel { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--ink-0); }
|
||
.mpk-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; overflow: hidden; background: var(--ink-void); display: flex; align-items: center; justify-content: center; }
|
||
.mpk-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||
.mpk-meta { flex: 1; min-width: 0; }
|
||
.mpk-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.mpk-actions { display: flex; gap: 4px; flex-shrink: 0; }
|
||
.mpk-grid-wrap { display: none; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--ink-1); }
|
||
.mpk-grid-wrap.open { display: block; }
|
||
.mpk-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
|
||
.mpk-empty { grid-column: 1 / -1; padding: 8px 4px; }
|
||
.mpk-none .media-thumb { color: var(--faint); }
|
||
|
||
/* library lists (shortcuts / transitions) */
|
||
.bin-toolbar { display: flex; gap: 5px; flex-wrap: wrap; }
|
||
.bin-toolbar .btn { flex-shrink: 0; }
|
||
.lib-search { width: 100%; }
|
||
/* library add/edit form */
|
||
.lib-form { border: 1px solid var(--accent); border-radius: 8px; background: var(--ink-2); padding: 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
|
||
.lib-form.lib-form-modal { border: none; background: transparent; padding: 0; margin: 0; }
|
||
.lib-form-title { font-size: 11px; color: var(--accent); font-weight: 600;}
|
||
.lib-field { display: flex; flex-direction: column; gap: 3px; }
|
||
.lib-field > span { font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.lib-in { width: 100%; background: var(--ink-0); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 12px; padding: 5px 7px; font-family: var(--font-ui); resize: vertical; }
|
||
.lib-form-actions { display: flex; gap: 6px; }
|
||
|
||
.lib-list { display: flex; flex-direction: column; gap: 5px; }
|
||
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px;
|
||
padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink-0); }
|
||
.lib-row.lib-row-nle { grid-template-columns: minmax(0, 1fr) auto; }
|
||
.lib-row:hover { border-color: var(--muted); }
|
||
.lib-main { flex: 1; min-width: 0; }
|
||
.lib-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.lib-sub { font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* Composer ▸ Files — on-disk file manager */
|
||
.files-group { margin-top: 12px; }
|
||
.files-group:first-of-type { margin-top: 6px; }
|
||
.files-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.files-group-title { font-size: 12px; font-weight: 700; color: var(--text); }
|
||
.files-dir { font-family: var(--font-ui); font-size: 10px; color: var(--faint); margin: 2px 0 6px; word-break: break-all; }
|
||
.files-list { display: flex; flex-direction: column; gap: 4px; }
|
||
.files-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px;
|
||
padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink-0); }
|
||
.files-row:hover { border-color: var(--muted); }
|
||
.files-main { min-width: 0; }
|
||
.files-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.files-meta { font-size: 10px; color: var(--faint); }
|
||
|
||
/* media drop onto a clip */
|
||
.clip.drop-target { border-color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal-soft); }
|
||
.clip-thumb { position: absolute; inset: 0; z-index: 0; opacity: .22; overflow: hidden; border-radius: 8px; }
|
||
.clip.src-mixed .clip-thumb { opacity: .32; }
|
||
.clip.src-image .clip-thumb { opacity: .28; }
|
||
.clip-thumb-guide { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 3px;
|
||
padding: 2px 5px 2px 6px; font-size: 9px; font-family: var(--font-ui); letter-spacing: .02em;
|
||
color: var(--teal-hi); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal-4) 92%, transparent) 28%);
|
||
border-top-left-radius: 6px; pointer-events: none; }
|
||
.clip-thumb-guide-icon { color: var(--teal-soft); font-weight: 700; }
|
||
.clip-thumb-guide-txt { text-transform: uppercase; font-size: 9px; opacity: .9; }
|
||
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||
.clip-thumb > span { position: absolute; right: 6px; bottom: 4px; font-size: 13px; color: var(--hi-soft); }
|
||
.clip.has-media .clip-head, .clip.has-media .clip-text { position: relative; z-index: 1; }
|
||
|
||
/* inspector image-source preview */
|
||
.img-src { display: flex; gap: 10px; align-items: center; }
|
||
.img-src-prev { width: 64px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--ink-void); display: flex; align-items: center; justify-content: center; }
|
||
.img-src-prev img { width: 100%; height: 100%; object-fit: cover; }
|
||
.img-src-info { min-width: 0; }
|
||
.img-src-name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
|
||
|
||
/* link source row */
|
||
.link-source { margin: 8px 0 0; }
|
||
.link-bound { font-size: 11px; color: var(--teal); margin-top: 6px; }
|
||
|
||
/* ───────────────────────── PREVIEW / PROGRAM MONITOR ───────────────────────── */
|
||
.program { padding: 0; background: var(--ink-void); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; position: relative; }
|
||
|
||
/* video canvas — fills the zone above transport */
|
||
.pm-canvas { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; background: var(--ink-void); }
|
||
.pm-canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px 10px color-mix(in srgb, var(--shadow-ink) 76.5%, transparent); z-index: 1; }
|
||
/* The letterbox stays black behind real video in both themes. An EMPTY stage is just a
|
||
panel, and a black rectangle with a vignette reads as a broken player in the light one. */
|
||
.pm-canvas:has(> .program-empty), .pm-canvas:has(> .pm-gen-splash) { background: var(--ink-1); }
|
||
.pm-canvas:has(> .program-empty)::after, .pm-canvas:has(> .pm-gen-splash)::after { box-shadow: none; }
|
||
.pm-canvas.media-previewing .pm-stage,
|
||
.pm-canvas.media-previewing .pm-slate,
|
||
.pm-canvas.media-previewing .pm-segment-badge,
|
||
.pm-canvas.media-previewing .pm-segment-badge { visibility: hidden; }
|
||
.pm-media-preview { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; cursor: default; }
|
||
.pm-media-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; cursor: default; }
|
||
.pm-media-preview-label { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 10px; font-family: var(--font-ui); color: var(--teal); background: var(--scrim-3); border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); border-radius: 12px; padding: 3px 9px; pointer-events: none; }
|
||
.pm-media-preview-aud { width: min(92%, 420px); position: relative; z-index: 1; }
|
||
.pm-media-preview-vid { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; position: relative; z-index: 1; cursor: default; background: var(--black); }
|
||
.pm-media-preview-label-vid { color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent-hi) 35%, var(--line)); }
|
||
.pm-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
|
||
.pm-fx-viewport { position: absolute; inset: 0; display: none; overflow: hidden; }
|
||
.pm-fx-viewport.active { display: block; }
|
||
.pm-fx-zoom { width: 100%; height: 100%; transform-origin: center center; will-change: transform; }
|
||
.pm-video { width: 100%; height: 100%; display: block; object-fit: contain; position: relative; z-index: 0; }
|
||
.pm-blank-frame { max-width: 100%; max-height: 100%; width: auto; height: auto; flex: 0 1 auto; background: var(--black); }
|
||
.program-empty { text-align: center; color: var(--faint); }
|
||
.program-empty .reel { font-size: 40px; opacity: .35; margin-bottom: 10px; }
|
||
.pm-gen-splash { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); }
|
||
.pm-gen-icon { font-size: 36px; animation: pm-spin 3s linear infinite; }
|
||
@keyframes pm-spin { to { transform: rotate(360deg); } }
|
||
.pm-gen-label { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }
|
||
.gen-readout { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: 12px; color: var(--accent-hi); background: var(--scrim-2); border: 1px solid var(--line); padding: 5px 12px; border-radius: 20px; display: flex; align-items: center; gap: 8px; z-index: 2; white-space: nowrap; }
|
||
.gen-readout .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s infinite; flex: 0 0 auto; }
|
||
/* An error is a paragraph, not a status word. The busy readout stays a compact nowrap pill
|
||
because it updates every second and must not reflow the canvas; the error state gets to
|
||
wrap, scroll and be selected, because it is the thing the user has to read and act on. */
|
||
.gen-readout.error {
|
||
color: var(--danger);
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
text-align: left;
|
||
align-items: flex-start;
|
||
max-width: min(760px, 92%);
|
||
max-height: 40vh;
|
||
overflow-y: auto;
|
||
border-radius: 12px;
|
||
padding: 9px 14px;
|
||
line-height: 1.5;
|
||
user-select: text;
|
||
cursor: text;
|
||
}
|
||
.gen-readout.error .pulse { margin-top: 5px; }
|
||
.gen-readout .gen-copy { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; }
|
||
.gen-readout.error .pulse { background: var(--danger); animation: none; }
|
||
.gen-bar { width: 90px; height: 5px; background: var(--overlay-4); border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
|
||
.gen-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s; }
|
||
.gen-interrupt { font-family: var(--font-ui); font-size: 11px; color: var(--danger); background: transparent; border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--line)); border-radius: 12px; padding: 2px 9px; cursor: pointer; flex: 0 0 auto; }
|
||
.gen-interrupt:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }
|
||
@keyframes pulse { 50% { opacity: .25; } }
|
||
|
||
/* minibar: rendered-segment overview strip + scrub */
|
||
.pm-minibar { height: 14px; flex: 0 0 auto; display: flex; position: relative; background: var(--ink-2); border-top: 1px solid var(--line); cursor: col-resize; user-select: none; }
|
||
.pm-chip { height: 100%; flex-shrink: 0; background: var(--ink-3); border-right: 1px solid var(--ink-2); transition: opacity .1s; }
|
||
.pm-chip.rendered { background: linear-gradient(180deg, var(--teal), var(--teal-2)); opacity: .55; }
|
||
.pm-chip.rendered.stale { background: linear-gradient(180deg, var(--accent-hi), var(--teal-2)); opacity: .62; }
|
||
.pm-chip.pending { background: repeating-linear-gradient(-45deg, var(--ink-3), var(--ink-3) 4px, var(--stripe) 4px, var(--stripe) 8px); opacity: .45; }
|
||
.pm-chip.ghost { background: repeating-linear-gradient(-45deg, var(--accent-dim), var(--accent-dim) 4px, var(--accent-dim-2) 4px, var(--accent-dim-2) 8px); opacity: .65; }
|
||
.pm-chip.gap { background: repeating-linear-gradient(-45deg, var(--ink-2), var(--ink-2) 4px, var(--ink-1) 4px, var(--ink-1) 8px); opacity: .35; border-right-style: dashed; }
|
||
.pm-chip.mixed { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, var(--teal-2)), var(--teal-4)); opacity: .72; }
|
||
.pm-chip.carry { background: repeating-linear-gradient(-45deg, var(--carry), var(--carry) 3px, var(--carry-2) 3px, var(--carry-2) 6px); opacity: .5; }
|
||
.pm-chip.video { background: linear-gradient(180deg, var(--blue-dim), var(--blue-line)); opacity: .7; }
|
||
.pm-chip:hover { opacity: 1 !important; }
|
||
.pm-slate { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--scrim-slate); color: var(--muted); pointer-events: none; text-align: center; padding: 16px; }
|
||
.pm-slate-title { font-size: 13px; color: var(--accent-hi); font-family: var(--font-ui); }
|
||
.pm-slate-sub { font-size: 11px; color: var(--faint); max-width: 280px; }
|
||
.pm-segment-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 10px; font-family: var(--font-ui); color: var(--accent-hi); background: var(--scrim-3); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; padding: 3px 9px; pointer-events: none; }
|
||
.pm-needle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--hi); opacity: .85; transform: translateX(-50%); pointer-events: none; z-index: 2; }
|
||
|
||
/* transport bar */
|
||
.pm-transport { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-top: 1px solid var(--line); background: var(--ink-1); flex-wrap: wrap; }
|
||
.pm-tc { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .4px; margin-left: 4px; }
|
||
.pm-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: 0 0 auto; }
|
||
.pm-anchor-sel { font-size: 12px; padding: 2px 6px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; max-width: 160px; }
|
||
.pm-anchor-btn { font-size: 12px; white-space: nowrap; }
|
||
|
||
/* ───────────────────────── INSPECTOR ───────────────────────── */
|
||
.insp-tag { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--muted); font-weight: 600; }
|
||
.insp-hint { font-size: 11px; color: var(--faint); margin: -4px 0 12px; }
|
||
.insp-hint.warn { color: var(--accent-hi, var(--accent)); }
|
||
.insp-hint .btn { margin-left: 6px; vertical-align: baseline; }
|
||
.insp-block { margin-bottom: 16px; }
|
||
/* global prompt — first entry in the inspector list (scrolls with content) */
|
||
.insp-global { margin: 0 0 14px; padding: 10px 10px 8px;
|
||
background: var(--ink-2); border: 1px solid var(--line); border-radius: 9px; }
|
||
.insp-global-title { font-size: 11px; color: var(--accent); margin-bottom: 6px; font-weight: 600;}
|
||
.insp-global-ta { width: 100%; background: var(--ink-0); border: 1px solid var(--line); border-radius: 7px;
|
||
color: var(--text); font-size: 12px; padding: 7px 8px; resize: vertical; font-family: var(--font-ui); line-height: 1.45; }
|
||
.insp-global .insp-hint { margin: 6px 0 0; }
|
||
|
||
/* project / scene switch */
|
||
.insp-switch { display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
|
||
.insp-seg { flex: 1; background: var(--ink-1); border: none; color: var(--muted); padding: 7px 0; cursor: pointer;
|
||
font-size: 11px; transition: background .12s, color .12s; }
|
||
.insp-seg + .insp-seg { border-left: 1px solid var(--line); }
|
||
.insp-seg:hover:not(:disabled) { background: var(--ink-3); color: var(--accent-hi); }
|
||
.insp-seg.active { background: var(--accent-soft); color: var(--accent-hi); }
|
||
.insp-seg:disabled { opacity: .4; cursor: default; }
|
||
|
||
/* engine context strip (scene view → jump to project engine settings) */
|
||
.insp-engine-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||
margin-bottom: 12px; padding: 7px 10px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; }
|
||
.insp-engine-strip-txt { font-size: 11px; color: var(--muted); }
|
||
|
||
/* collapsible Studio / Chain cards */
|
||
.insp-engine { margin: 10px 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--ink-2); overflow: hidden; }
|
||
.insp-engine-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px;
|
||
background: linear-gradient(var(--ink-3), var(--ink-2)); border: none; cursor: pointer;
|
||
font-family: var(--font-ui); font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--accent); text-align: left; }
|
||
.insp-engine-head:hover { color: var(--accent-hi); }
|
||
.insp-engine-chev { font-size: 11px; color: var(--faint); flex: 0 0 auto; }
|
||
.insp-engine-title { flex: 1 1 auto; }
|
||
.insp-engine-badge { flex: 0 0 auto; font-size: 9px; letter-spacing: .4px; color: var(--teal);
|
||
border: 1px solid var(--teal-soft); border-radius: 4px; padding: 1px 6px; text-transform: none; }
|
||
.insp-engine-body { padding: 4px 10px 10px; }
|
||
.insp-engine-pickers { margin-bottom: 4px; }
|
||
|
||
.insp-fold { margin: 6px 0; border: 1px solid var(--line-2); border-radius: 7px; background: var(--ink-0); }
|
||
.insp-fold > summary.insp-fold-sum { cursor: pointer; padding: 6px 9px; font-family: var(--font-ui);
|
||
font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); list-style: none; user-select: none; }
|
||
.insp-fold > summary.insp-fold-sum::-webkit-details-marker { display: none; }
|
||
.insp-fold > summary.insp-fold-sum::before { content: "▸ "; color: var(--faint); }
|
||
.insp-fold[open] > summary.insp-fold-sum::before { content: "▾ "; }
|
||
.insp-fold-body { padding: 2px 9px 8px; }
|
||
.insp-fold-body .insp-hint { margin: 4px 0 0; }
|
||
|
||
/* read-only length/fps value when inheriting */
|
||
.len-readout { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); padding: 6px 8px;
|
||
background: var(--ink-0); border: 1px dashed var(--line); border-radius: 7px; }
|
||
|
||
/* locked trim handle (scene length is Custom) */
|
||
.clip-trim.locked { cursor: not-allowed; }
|
||
.clip-trim.locked::after { opacity: 1; background: var(--accent); height: 14px; }
|
||
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
|
||
.chk input { width: auto; }
|
||
.split-pv { background: var(--ink-0); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
|
||
.pv-line { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 12px; }
|
||
.pv-badge { font-family: var(--font-ui); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 33%, transparent); border-radius: 4px; padding: 1px 5px; flex: 0 0 auto; }
|
||
.pv-badge.anchor { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 33%, transparent); }
|
||
.pv-badge.postfix { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 33%, transparent); }
|
||
.pv-badge.trans { color: var(--faint); border-color: transparent; font-size: 9px; }
|
||
.pv-badge.rkey { color: var(--violet-5); border-color: color-mix(in srgb, var(--violet-5) 33%, transparent); text-transform: none; letter-spacing: 0; }
|
||
.pv-badge.rkey.default { color: var(--faint); border-color: var(--overlay-4); }
|
||
.sync-preview-btn { margin-top: 8px; width: 100%; }
|
||
|
||
/* Sampler panel (sp-*) */
|
||
.insp-tag.sp-sub { font-size: 9px; margin-top: 8px; background: var(--ink-2); }
|
||
.sp-macro { border: 1px solid color-mix(in srgb, var(--blue-macro) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--blue-macro) 6%, transparent); padding: 8px; margin: 6px 0; }
|
||
.sp-macro-title { font-weight: 600; font-size: 11px; margin-bottom: 6px; color: var(--teal); }
|
||
.sp-macro-presets { display: flex; gap: 6px; margin-bottom: 6px; }
|
||
.sp-macro-slider { display: flex; align-items: center; gap: 8px; }
|
||
.sp-macro-slider input[type=range] { flex: 1; }
|
||
.sp-macro-val { font-family: var(--font-ui); font-size: 11px; color: var(--muted); min-width: 32px; }
|
||
.pv-warn { color: var(--accent-hi); font-size: 12px; display: flex; gap: 7px; margin-bottom: 8px; }
|
||
.pv-raw { margin-top: 8px; }
|
||
.pv-raw summary { cursor: pointer; color: var(--faint); font-size: 11px; font-family: var(--font-ui); }
|
||
.pv-raw pre { white-space: pre-wrap; background: var(--ink-2); border-radius: 6px; padding: 8px; font-size: 11px; font-family: var(--font-ui); color: var(--muted); margin: 6px 0 0; }
|
||
|
||
/* ───────────────────────── TIMELINE (NLE) ───────────────────────── */
|
||
.timeline .zone-body { padding: 0; display: flex; flex-direction: column; }
|
||
|
||
/* Buttons no longer wrap their own labels, so the ROW wraps instead when it runs out
|
||
of width — the toolbar gets a second line rather than a row of ragged chips. */
|
||
.tl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2);
|
||
padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); flex: 0 0 auto; }
|
||
.tl-toolbar .btn:disabled { opacity: 0.42; pointer-events: none; cursor: default; }
|
||
.tl-toolbar .btn.ghost:disabled:hover { color: var(--muted); background: transparent; border-color: transparent; }
|
||
.tl-toolbar .tl-spacer { flex: 1; }
|
||
.tl-tc { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
|
||
.tl-zlabel { font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.tl-keys { font-size: 11px; color: var(--faint); margin-right: 10px; opacity: .8; }
|
||
.tl-notice { margin-left: 12px; font-size: 11px; color: var(--accent-hi); display: inline-flex; align-items: center; gap: 6px; }
|
||
.tl-notice-dismiss { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 11px; padding: 0 2px; }
|
||
.tl-notice-dismiss:hover { color: var(--text); }
|
||
.slot-picker-input { width: 100%; box-sizing: border-box; margin: 8px 0 12px; padding: 8px 10px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 13px; }
|
||
.slot-picker-actions { display: flex; gap: 8px; justify-content: flex-end; }
|
||
.tl-rating-block { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--line); }
|
||
.tl-rate-btn { color: var(--accent-hi); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.tl-rate-btn.has-rating { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 30%, var(--ink-2)); }
|
||
|
||
/* Studio-style rating picker (Movie Editor) */
|
||
.me-rating-picker {
|
||
position: fixed; z-index: 10001; width: 340px;
|
||
background: var(--popup); border: 1px solid var(--popup-line);
|
||
border-radius: 8px; box-shadow: 0 16px 48px color-mix(in srgb, var(--shadow-ink) 64.7%, transparent);
|
||
color: var(--text); font: 12px var(--font-sans); box-sizing: border-box; overflow: hidden;
|
||
}
|
||
.me-rating-picker * { box-sizing: border-box; }
|
||
.me-rating-picker-head {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 9px 12px 8px; border-bottom: 1px solid var(--overlay-2);
|
||
font-weight: 700; font-size: 13px;
|
||
}
|
||
.me-rating-picker-close {
|
||
background: none; border: none; color: var(--faint); cursor: pointer;
|
||
font-size: 16px; padding: 0 2px; line-height: 1;
|
||
}
|
||
.me-rating-picker-close:hover { color: var(--text); }
|
||
|
||
/* Sampler quick-access bar: same fixed-popup shape as the rating picker, a
|
||
thin hovering panel above the timeline rather than a modal. */
|
||
.sq-panel {
|
||
position: fixed; z-index: 10001; width: 300px; max-height: 60vh; overflow-y: auto;
|
||
background: var(--popup); border: 1px solid var(--popup-line);
|
||
border-radius: 8px; box-shadow: 0 16px 48px color-mix(in srgb, var(--shadow-ink) 64.7%, transparent);
|
||
color: var(--text); font: 12px var(--font-sans); box-sizing: border-box;
|
||
}
|
||
.sq-panel * { box-sizing: border-box; }
|
||
.sq-head {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 9px 12px 8px; border-bottom: 1px solid var(--overlay-2);
|
||
font-weight: 700; font-size: 13px; position: sticky; top: 0; background: var(--popup);
|
||
}
|
||
.sq-body { padding: 10px 12px 12px; }
|
||
.sq-body .sw-rows { margin-top: 0; }
|
||
.sq-body .sw-rows-label:first-child { margin-top: 0; }
|
||
|
||
/* Picker wheel: a hub plus radial items, each absolutely positioned by its
|
||
own inline transform (the geometry lives in wheel.js, this just supplies
|
||
the look). Anchored at {left,top} = the point it was opened/dragged to,
|
||
with every child centered on that point via translate(-50%,-50%) before
|
||
its own radial offset. */
|
||
.fp-wheel { position: fixed; z-index: 10002; width: 0; height: 0; }
|
||
.fp-wheel-hub {
|
||
position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
|
||
width: 40px; height: 40px; border-radius: 50%; cursor: grab;
|
||
background: var(--popup); border: 1px solid var(--popup-line); color: var(--text);
|
||
font-size: 16px; box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 55%, transparent);
|
||
}
|
||
.fp-wheel-hub:active { cursor: grabbing; }
|
||
.fp-wheel-item {
|
||
position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
||
background: var(--popup); border: 1px solid var(--popup-line); color: var(--text);
|
||
box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 45%, transparent);
|
||
cursor: pointer;
|
||
}
|
||
.fp-wheel-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--ink-3); }
|
||
.fp-wheel-item-icon { font-size: 16px; line-height: 1; }
|
||
.fp-wheel-item-label { font-size: 8px; line-height: 1.1; max-width: 48px; text-align: center;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
|
||
.me-rating-section { padding: 8px 10px 6px; border-bottom: 1px solid var(--overlay-1); }
|
||
.me-rating-section-label {
|
||
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
|
||
color: color-mix(in srgb, var(--accent) 90%, transparent); margin-bottom: 6px;
|
||
}
|
||
.me-rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
|
||
.me-rating-grid-pos { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
|
||
.me-rating-opt-wrap { display: flex; gap: 3px; align-items: stretch; }
|
||
.me-rating-opt-wrap .me-rating-opt { flex: 1; }
|
||
.me-rating-opt {
|
||
background: var(--overlay-1); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
||
border-radius: 6px; padding: 7px 8px; cursor: pointer; text-align: left; color: var(--text);
|
||
transition: background 0.1s, border-color 0.1s; display: flex; flex-direction: column; gap: 3px;
|
||
}
|
||
.me-rating-opt:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--hi); }
|
||
.me-rating-opt.active { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--hi); }
|
||
.me-rating-opt-label { font-size: 11px; font-weight: 600; line-height: 1.2; }
|
||
.me-rating-opt-reward { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||
.me-rating-opt-hint { font-size: 9px; color: var(--faint); line-height: 1.3; }
|
||
.me-rating-opt:hover .me-rating-opt-hint { color: var(--muted); }
|
||
.me-rating-heart {
|
||
flex-shrink: 0; width: 26px; padding: 0;
|
||
background: var(--overlay-1); border: 1px solid color-mix(in srgb, var(--pink) 20%, transparent);
|
||
border-radius: 6px; color: color-mix(in srgb, var(--pink) 50%, transparent); cursor: pointer;
|
||
font-size: 13px; transition: background 0.1s, border-color 0.1s, color 0.1s;
|
||
}
|
||
.me-rating-heart:hover { background: color-mix(in srgb, var(--pink) 12%, transparent); border-color: color-mix(in srgb, var(--pink) 60%, transparent); color: var(--pink-hi); }
|
||
.me-rating-heart.active { background: color-mix(in srgb, var(--pink) 20%, transparent); border-color: color-mix(in srgb, var(--pink) 80%, transparent); color: var(--pink-hi); }
|
||
.me-rating-nuclear { padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
|
||
|
||
.tl-scroll { flex: 1; overflow-x: auto; overflow-y: auto; position: relative; }
|
||
.tl-stage { display: flex; flex-direction: row; height: 100%; min-height: 100%; }
|
||
.tl-gutter { flex: 0 0 auto; position: sticky; left: 0; z-index: 7; display: flex; flex-direction: column;
|
||
background: var(--ink-1); border-right: 1px solid var(--line-2); }
|
||
.tl-gutter-ruler { flex: 0 0 24px; border-bottom: 1px solid var(--line);
|
||
position: sticky; top: 0; z-index: 9; background: var(--ink-1); }
|
||
.tl-gutter-tracks { flex: 0 0 auto; display: flex; flex-direction: column; }
|
||
.tl-gutter-lane { display: flex; align-items: center; justify-content: center; text-align: center;
|
||
padding: 0 4px; font-size: 11px; color: var(--faint); border-bottom: 1px solid var(--line-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
box-sizing: border-box; flex: 0 0 auto; }
|
||
.tl-gutter-lane.video { color: var(--faint); }
|
||
.tl-gutter-aud { flex: 0 0 auto; border-top: 1px solid var(--line); }
|
||
.tl-gutter-aud .tl-gutter-lane:last-child { border-bottom: none; }
|
||
.tl-content { position: relative; flex: 1 1 auto; min-height: 100%; }
|
||
|
||
/* ruler */
|
||
.tl-ruler2 { position: sticky; top: 0; z-index: 8; height: 24px; flex: 0 0 24px; border-bottom: 1px solid var(--line); cursor: pointer;
|
||
background: var(--ink-0); user-select: none; }
|
||
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
|
||
.tl-tick-label { position: absolute; left: 4px; top: 4px; font-family: var(--font-ui); font-size: 10px; color: var(--faint); white-space: nowrap; }
|
||
|
||
|
||
/* tracks area (video + audio lanes) */
|
||
.tl-tracks { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; }
|
||
.tl-track2 { position: relative; flex: 0 0 auto; box-sizing: border-box; padding: 12px 0; }
|
||
.tl-audio-lanes { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--ink-0); }
|
||
.tl-audio-head { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
|
||
.tl-audio-head .chk { font-size: 11px; }
|
||
.tl-audio-add { font-size: 12px; padding: 2px 6px; max-width: 200px; }
|
||
.tl-audio-lane { position: relative; flex: 0 0 44px; height: 44px; box-sizing: border-box; border-bottom: 1px solid var(--line-2); }
|
||
.tl-audio-lane.orig-lane { background: color-mix(in srgb, var(--teal) 4%, var(--ink-0)); }
|
||
.tl-audio-lane.overlay-lane { background: color-mix(in srgb, var(--blue) 5%, var(--ink-0)); }
|
||
.tl-gutter-lane.orig { color: var(--teal-soft); }
|
||
.tl-gutter-lane.overlay { color: var(--blue-2); }
|
||
.tl-aud-clip.overlay { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
|
||
.tl-aud-clip.overlay .tl-aud-wave canvas { opacity: .95; }
|
||
.tl-audio-lane:last-child { border-bottom: none; }
|
||
|
||
/* overlay graphics lane (text + images) */
|
||
.tl-overlay-lanes { flex: 0 0 auto; border-top: 1px solid var(--line); }
|
||
.tl-overlay-lane { position: relative; flex: 0 0 40px; height: 40px; box-sizing: border-box; border-top: 1px solid var(--overlay-1); background: color-mix(in srgb, var(--violet) 4%, var(--ink-0)); }
|
||
.tl-overlay-lane.top { background: color-mix(in srgb, var(--violet) 7%, var(--ink-0)); }
|
||
.tl-overlay-lane.drop-target { background: color-mix(in srgb, var(--violet) 14%, var(--ink-0)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 33%, transparent); }
|
||
.tl-overlay-lane-body { position: absolute; inset: 0; }
|
||
.tl-gutter-ov { flex: 0 0 auto; border-top: 1px solid var(--line); }
|
||
.tl-gutter-lane.overlay { color: var(--violet-2); font-size: 10px; flex-direction: row; gap: 2px; padding: 0 3px; justify-content: space-between; }
|
||
.tl-gutter-lane.overlay.top { color: var(--violet-3); font-weight: 600; }
|
||
.tl-gutter-ov-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
|
||
.tl-gutter-ov-rm {
|
||
flex: 0 0 16px; width: 16px; height: 16px; padding: 0; border: none; border-radius: 3px;
|
||
background: transparent; color: var(--violet-2); font-size: 10px; line-height: 1; cursor: pointer; opacity: .75;
|
||
}
|
||
.tl-gutter-ov-rm:hover { opacity: 1; background: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger-hi); }
|
||
.insp-layer-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
|
||
.tl-ov-clip {
|
||
position: absolute; top: 4px; bottom: 4px; min-width: 40px;
|
||
border-radius: 6px; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line));
|
||
background: color-mix(in srgb, var(--violet) 12%, var(--ink-1));
|
||
cursor: grab; overflow: hidden;
|
||
}
|
||
.tl-ov-clip.selected { border-color: var(--violet); box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 45%, transparent); }
|
||
.tl-ov-clip.trimming { cursor: ew-resize; }
|
||
.tl-ov-clip.text { font-family: var(--font-ui); font-weight: 600; font-size: 11px; color: var(--violet-4); }
|
||
.tl-ov-body { position: absolute; inset: 0 8px; display: flex; align-items: center; padding: 0 4px; pointer-events: none; }
|
||
.tl-ov-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.tl-ov-trim { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; }
|
||
.tl-ov-trim.left { left: 0; }
|
||
.tl-ov-trim.right { right: 0; }
|
||
.tl-ov-trim::after {
|
||
content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 2px; height: 18px;
|
||
background: color-mix(in srgb, var(--violet) 55%, var(--faint)); border-radius: 2px; opacity: 0;
|
||
transition: opacity .12s;
|
||
}
|
||
.tl-ov-trim.left::after { left: 2px; }
|
||
.tl-ov-trim.right::after { right: 2px; }
|
||
.tl-ov-clip:hover .tl-ov-trim::after, .tl-ov-clip.trimming .tl-ov-trim::after { opacity: 1; }
|
||
.tl-ov-rm {
|
||
position: absolute; top: 2px; right: 2px; z-index: 3; width: 18px; height: 18px; padding: 0;
|
||
border: none; border-radius: 4px; background: var(--scrim-media-2); color: var(--violet-4); font-size: 11px;
|
||
line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s;
|
||
}
|
||
.tl-ov-clip:hover .tl-ov-rm, .tl-ov-clip.selected .tl-ov-rm { opacity: 1; }
|
||
.tl-ov-rm:hover { background: var(--danger); color: var(--hi); }
|
||
.pm-overlays { position: absolute; z-index: 4; pointer-events: none; overflow: hidden; box-sizing: border-box; }
|
||
.pm-ov-box {
|
||
position: absolute; pointer-events: auto; cursor: grab; max-width: 92%; text-align: center;
|
||
text-shadow: 0 1px 4px var(--scrim-media-3); white-space: pre-wrap; line-height: 1.15;
|
||
border: 1px dashed transparent; border-radius: 4px; padding: 2px 4px;
|
||
transform: translate(-50%, -50%); transform-origin: center center;
|
||
}
|
||
.pm-ov-box.selected { border-color: color-mix(in srgb, var(--violet) 70%, transparent); }
|
||
.pm-ov-box.dragging { cursor: grabbing; opacity: .92; }
|
||
.pm-ov-box img { display: block; max-height: 70vh; pointer-events: none; }
|
||
.pm-ov-handles { position: absolute; inset: -5px; pointer-events: none; }
|
||
.pm-ov-handle {
|
||
position: absolute; width: 9px; height: 9px; border-radius: 2px; pointer-events: auto;
|
||
background: var(--violet); border: 1px solid var(--hi); box-shadow: 0 0 0 1px color-mix(in srgb, var(--shadow-ink) 41.2%, transparent);
|
||
}
|
||
.pm-ov-handle.nw { top: 0; left: 0; cursor: nwse-resize; }
|
||
.pm-ov-handle.ne { top: 0; right: 0; cursor: nesw-resize; }
|
||
.pm-ov-handle.sw { bottom: 0; left: 0; cursor: nesw-resize; }
|
||
.pm-ov-handle.se { bottom: 0; right: 0; cursor: nwse-resize; }
|
||
.pm-ov-flip-bar {
|
||
position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
|
||
display: flex; gap: 4px; pointer-events: auto;
|
||
}
|
||
.pm-ov-flip-btn {
|
||
width: 24px; height: 22px; padding: 0; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line));
|
||
border-radius: 5px; background: var(--scrim-media); color: var(--violet-3); font-size: 13px; line-height: 1; cursor: pointer;
|
||
}
|
||
.pm-ov-flip-btn:hover, .pm-ov-flip-btn.active { background: color-mix(in srgb, var(--violet) 25%, var(--scrim-media)); border-color: var(--violet); }
|
||
.ov-keep-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
|
||
.ov-keep-row input { accent-color: var(--violet); }
|
||
.ov-flip-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.ov-flip-row .btn.active { border-color: var(--violet); color: var(--violet-3); }
|
||
.insp-layer-actions .btn.active { border-color: var(--violet); color: var(--violet-3); }
|
||
|
||
/* overlay settings modals */
|
||
.ov-modal-overlay { align-items: center; padding: 24px 16px; }
|
||
.ov-modal { width: min(420px, 94vw); max-height: min(88vh, 720px); border-radius: 16px; border-color: color-mix(in srgb, var(--violet) 18%, var(--line)); box-shadow: 0 24px 64px color-mix(in srgb, var(--shadow-ink) 64.7%, transparent); }
|
||
.ov-modal.ov-modal-md { width: min(560px, 94vw); }
|
||
.ov-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 6%, var(--surface-raised-6)), var(--surface-deep-5)); }
|
||
.ov-modal-head-text { flex: 1; min-width: 0; }
|
||
.ov-modal-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
|
||
.ov-modal-sub { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted); }
|
||
.ov-modal-close { flex: 0 0 32px; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
|
||
.ov-modal-close:hover { background: var(--overlay-2); color: var(--text); }
|
||
.ov-modal-body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
|
||
.ov-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); background: var(--surface-deep-2); }
|
||
.ov-form { display: flex; flex-direction: column; gap: 12px; }
|
||
.ov-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.ov-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
|
||
.ov-field.full { grid-column: 1 / -1; }
|
||
.ov-label { font-size: 11px; color: var(--muted); font-weight: 600;}
|
||
.ov-input, .ov-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); color: var(--text); padding: 10px 12px; font: inherit; }
|
||
.ov-textarea { min-height: 72px; resize: vertical; line-height: 1.35; }
|
||
.ov-input:focus, .ov-textarea:focus, .ov-color:focus { outline: none; border-color: color-mix(in srgb, var(--violet) 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 12%, transparent); }
|
||
.ov-color { width: 100%; height: 40px; padding: 4px; cursor: pointer; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); }
|
||
.ov-range-field { gap: 8px; }
|
||
.ov-range-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
||
.ov-range-val { font-family: var(--font-ui); font-size: 11px; color: var(--violet-2); }
|
||
.ov-range { width: 100%; accent-color: var(--violet); }
|
||
.ov-text-preview { border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(ellipse at center, var(--ov-preview-1) 0%, var(--ov-preview-2) 72%); min-height: 96px; display: grid; place-items: center; padding: 20px; }
|
||
.ov-text-preview-inner { max-width: 100%; white-space: pre-wrap; word-break: break-word; }
|
||
|
||
/* Extra text-style controls (bold/italic/align toggles, outline, shadow, box) */
|
||
.ov-textstyle { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
|
||
.ov-style-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.ov-align-group { display: inline-flex; gap: 4px; margin-left: auto; }
|
||
.ov-style-btn { width: 34px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line);
|
||
background: var(--ink-2); color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; }
|
||
.ov-style-btn:hover { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); color: var(--text); }
|
||
.ov-style-btn.active { border-color: var(--violet); color: var(--violet-3); background: color-mix(in srgb, var(--violet) 12%, var(--ink-2)); }
|
||
.ov-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); height: 40px; }
|
||
.ov-check input { accent-color: var(--violet); }
|
||
.ov-checklist { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; background: var(--ink-2); }
|
||
.ov-modal-wide { width: min(560px, 92vw); }
|
||
.ov-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
|
||
.ov-image-card { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); cursor: pointer; text-align: left; }
|
||
.ov-image-card:hover { border-color: color-mix(in srgb, var(--violet) 35%, var(--line)); background: color-mix(in srgb, var(--violet) 5%, var(--ink-2)); }
|
||
.ov-image-card.selected { border-color: var(--violet); box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 40%, transparent); }
|
||
.ov-image-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--black); display: block; }
|
||
.ov-image-name { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.ov-empty { font-size: 13px; color: var(--muted); line-height: 1.45; }
|
||
|
||
.tl-audio-lane-body { position: absolute; inset: 0; }
|
||
.tl-aud-clip { position: absolute; top: 4px; bottom: 4px; box-sizing: border-box;
|
||
background: linear-gradient(180deg, var(--audio-dim), var(--audio-dim-2)); border: 1px solid var(--audio-line); border-radius: 5px;
|
||
min-width: 0; overflow: hidden; }
|
||
.tl-aud-wave { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
|
||
.tl-aud-wave canvas { display: block; width: 100%; height: 100%; }
|
||
.tl-aud-controls { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: 6px;
|
||
padding: 0 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--audio-dim-2) 92%, transparent) 0%, color-mix(in srgb, var(--audio-dim-2) 55%, transparent) 45%, transparent 100%); }
|
||
.tl-aud-clip.scene-aud { cursor: pointer; }
|
||
.tl-aud-clip.scene-aud.selected { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-soft); }
|
||
.tl-aud-clip.ins { background: linear-gradient(180deg, var(--blue-dim-2), var(--blue-dim-3)); border-color: var(--blue-line); }
|
||
.tl-aud-clip.ins .tl-aud-controls { background: linear-gradient(90deg, color-mix(in srgb, var(--blue-dim-3) 92%, transparent) 0%, color-mix(in srgb, var(--blue-dim-3) 55%, transparent) 45%, transparent 100%); }
|
||
.tl-aud-clip.sep { background: linear-gradient(180deg, var(--audio-dim-3), var(--audio-dim-4)); border-color: var(--audio-line-2); }
|
||
.tl-aud-clip.sep .tl-aud-controls { background: linear-gradient(90deg, color-mix(in srgb, var(--audio-dim-4) 92%, transparent) 0%, color-mix(in srgb, var(--audio-dim-4) 55%, transparent) 45%, transparent 100%); }
|
||
.tl-aud-clip.ins.selected, .tl-aud-clip.sep.selected {
|
||
border-color: var(--teal);
|
||
box-shadow: inset 0 0 0 1px var(--teal-soft);
|
||
}
|
||
.tl-aud-trim { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 3; }
|
||
.tl-aud-trim.left { left: 0; }
|
||
.tl-aud-trim.right { right: 0; }
|
||
.tl-aud-trim::after {
|
||
content: ""; position: absolute; top: 50%; transform: translateY(-50%);
|
||
width: 2px; height: 18px; background: var(--faint); border-radius: 2px; opacity: 0; transition: opacity .12s;
|
||
}
|
||
.tl-aud-trim.left::after { left: 2px; }
|
||
.tl-aud-trim.right::after { right: 2px; }
|
||
.tl-aud-clip.ins:hover .tl-aud-trim::after, .tl-aud-clip.ins.trimming .tl-aud-trim::after,
|
||
.tl-aud-clip.sep:hover .tl-aud-trim::after, .tl-aud-clip.sep.trimming .tl-aud-trim::after { opacity: 1; }
|
||
.tl-aud-name { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
|
||
.tl-aud-vol { width: 56px; max-width: 42%; flex: 0 1 56px; min-width: 0; accent-color: var(--teal); }
|
||
.tl-aud-rm { flex: 0 0 auto; opacity: 0.9; min-width: 22px; }
|
||
.tl-aud-clip.ins:hover .tl-aud-rm,
|
||
.tl-aud-clip.sep:hover .tl-aud-rm { opacity: 1; color: var(--danger); }
|
||
.tl-emptyhint { position: absolute; left: 16px; top: 20px; color: var(--faint); font-style: italic; }
|
||
|
||
.clip { position: absolute; top: 12px; bottom: 12px; box-sizing: border-box;
|
||
background: linear-gradient(var(--surface-raised-3), var(--surface-raised-4)); border: 1px solid var(--line); border-radius: 8px;
|
||
padding: 6px 9px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
|
||
transition: border-color .12s, box-shadow .12s; }
|
||
.clip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .55; }
|
||
.clip:hover { border-color: var(--line-hi); }
|
||
.clip:active { cursor: grabbing; }
|
||
.clip.spacing { opacity: .85; z-index: 50; cursor: grabbing; box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-ink) 58.8%, transparent); transition: none; }
|
||
body.tl-spacing { cursor: grabbing; user-select: none; }
|
||
.clip:not(.ghost) { cursor: grab; }
|
||
.clip:not(.ghost).spacing { cursor: grabbing; }
|
||
.tl-dropline { position: absolute; top: 6px; bottom: 6px; width: 2px; background: var(--accent);
|
||
box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 80%, transparent); z-index: 60; pointer-events: none; }
|
||
.tl-dd { position: relative; display: inline-block; }
|
||
.tl-dd-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 200; min-width: 200px;
|
||
background: var(--surface-raised-7); border: 1px solid var(--line); border-radius: 8px; padding: 8px;
|
||
display: flex; flex-direction: column; gap: 7px; box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-ink) 64.7%, transparent); }
|
||
.tl-dd-panel[hidden] { display: none; }
|
||
.tl-dd-head { font-size: 11px; color: var(--muted); font-weight: 600;}
|
||
.tl-dd-sel { width: 100%; }
|
||
.tl-dd-val { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
|
||
.tl-dd-val[hidden] { display: none; }
|
||
.tl-dd-val input { width: 78px; }
|
||
.aud-track { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0; background: var(--surface-raised-5); }
|
||
.aud-track-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
|
||
.aud-track-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.clip.selected { border-color: var(--teal-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel) 35%, transparent); z-index: 2; }
|
||
.clip.selected::before { background: var(--teal-soft); opacity: 0.85; }
|
||
.clip.selected.focus { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-soft); z-index: 3; }
|
||
.clip.selected.focus::before { background: var(--teal); opacity: 1; }
|
||
.tl-aud-clip.scene-aud.selected:not(.focus) { border-color: var(--teal-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel) 35%, transparent); }
|
||
.clip.excluded { opacity: .42; }
|
||
.clip.excluded::before { background: var(--faint); }
|
||
.clip.clip-video { background: linear-gradient(var(--blue-dim-4), var(--blue-dim-5)); border-color: var(--blue-line); }
|
||
.clip.clip-video::before { background: var(--blue-4); opacity: .75; }
|
||
.clip.clip-video .clip-no { color: var(--blue-3); font-weight: 600; }
|
||
.clip.src-v2v::before { background: var(--indigo); }
|
||
.tl-track2.drop-target-track { outline: 1px dashed var(--teal); outline-offset: -2px; background: color-mix(in srgb, var(--sel) 4%, transparent); }
|
||
.clip.pending:not(.rendered) { border-style: dashed; border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
|
||
.clip.ghost { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); opacity: .72; cursor: default; }
|
||
.clip.ghost::before { background: var(--accent); opacity: .35; }
|
||
.clip.ghost .ghost-label { font-style: italic; color: var(--accent-hi); }
|
||
.clip.gen-cut::before { background: color-mix(in srgb, var(--teal) 55%, var(--accent)); }
|
||
.clip.subclip { border-left: 2px solid color-mix(in srgb, var(--teal) 70%, transparent); }
|
||
/* Mixed = full-strength clip with dual anchor+guide accent (not carry-grayed). */
|
||
.clip.src-mixed { border-color: color-mix(in srgb, var(--teal-soft) 42%, var(--line)); }
|
||
.clip.src-mixed::before { background: linear-gradient(180deg, var(--accent) 0%, var(--accent) 45%, var(--teal-soft) 100%); opacity: .9; }
|
||
|
||
.clip.src-carry { border-style: dashed; border-color: color-mix(in srgb, var(--teal-soft) 35%, var(--line)); }
|
||
.clip.src-carry::before { background: var(--teal-soft); opacity: .45; }
|
||
.clip.src-image::before { background: var(--accent); opacity: .7; }
|
||
/* Selection must win over source-type border accents (video/rendered clips included). */
|
||
.clip.selected,
|
||
.clip.selected.src-mixed,
|
||
.clip.selected.src-carry,
|
||
.clip.selected.src-image,
|
||
.clip.selected.src-v2v,
|
||
.clip.selected.clip-video,
|
||
.clip.selected.rendered,
|
||
.clip.selected.clip-video.rendered,
|
||
.clip.selected.ghost,
|
||
.clip.selected.pending:not(.rendered) {
|
||
border-color: var(--teal-soft);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel) 35%, transparent), 0 0 0 2px color-mix(in srgb, var(--sel) 28%, transparent);
|
||
z-index: 2;
|
||
}
|
||
.clip.selected.focus,
|
||
.clip.selected.focus.src-mixed,
|
||
.clip.selected.focus.src-carry,
|
||
.clip.selected.focus.src-image,
|
||
.clip.selected.focus.src-v2v,
|
||
.clip.selected.focus.clip-video,
|
||
.clip.selected.focus.rendered,
|
||
.clip.selected.focus.clip-video.rendered,
|
||
.clip.selected.focus.ghost {
|
||
border-color: var(--teal);
|
||
box-shadow: inset 0 0 0 1px var(--teal-soft), 0 0 0 2px color-mix(in srgb, var(--sel) 45%, transparent);
|
||
z-index: 3;
|
||
}
|
||
.clip.selected::before,
|
||
.clip.selected.src-carry::before,
|
||
.clip.selected.clip-video::before,
|
||
.clip.selected.src-v2v::before { background: var(--teal-soft); opacity: 0.85; }
|
||
.clip.selected.focus::before,
|
||
.clip.selected.focus.src-carry::before,
|
||
.clip.selected.focus.clip-video::before,
|
||
.clip.selected.focus.src-v2v::before { background: var(--teal); opacity: 1; }
|
||
.tl-sel-badge {
|
||
font-size: 11px; font-weight: 600; color: var(--teal);
|
||
background: color-mix(in srgb, var(--teal) 12%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--teal-soft) 55%, var(--line));
|
||
border-radius: 10px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
|
||
}
|
||
.clip-src-stack { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
|
||
.clip-anchor-mark { font-size: 11px; color: var(--accent); }
|
||
.clip-guide-mark { font-size: 11px; color: var(--teal-soft); margin-left: -1px; }
|
||
.clip-src-label { font-size: 9px; font-family: var(--font-ui); color: var(--teal-soft); letter-spacing: .04em; text-transform: uppercase; }
|
||
.clip-src.carry-only { font-size: 12px; color: var(--teal-soft); opacity: .85; }
|
||
.pm-segment-badge.mixed-mode { color: var(--teal-hi); border-color: color-mix(in srgb, var(--teal-soft) 45%, var(--line)); }
|
||
/* a clip that has a rendered video available (in temp) */
|
||
.clip.rendered::after { content: "●"; position: absolute; bottom: 5px; right: 10px; top: auto; font-size: 9px;
|
||
color: var(--good-2); text-shadow: 0 0 5px color-mix(in srgb, var(--good-2) 70%, transparent); pointer-events: none; z-index: 1; }
|
||
.clip.trimming { border-color: var(--accent); z-index: 5; }
|
||
.clip-head { display: flex; align-items: center; gap: 6px; min-width: 0; flex-shrink: 0; position: relative; z-index: 2; }
|
||
.clip-head-bar { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
|
||
.clip-no { font-family: var(--font-ui); font-size: 11px; color: var(--accent); font-weight: 600; flex-shrink: 0; }
|
||
.clip-src { font-size: 12px; color: var(--faint); flex-shrink: 0; }
|
||
.clip-dur { font-family: var(--font-ui); font-size: 10px; color: var(--faint); white-space: nowrap; }
|
||
.clip-rm.btn.tiny { min-height: 18px; padding: 0 6px; font-size: var(--fs-footnote); flex-shrink: 0; }
|
||
.clip-move.btn.tiny { min-height: 18px; padding: 0 5px; font-size: 9px; flex-shrink: 0; color: var(--muted); }
|
||
.clip-move.btn.tiny:hover { color: var(--accent-hi); }
|
||
.clip-move.disabled { opacity: .3; cursor: default; pointer-events: none; }
|
||
.clip-text { font-size: 12px; line-height: 1.35; color: var(--text); overflow: hidden;
|
||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||
.clip-text.empty { color: var(--faint); font-style: italic; }
|
||
.clip-rated { font-size: 10px; font-family: var(--font-ui); font-weight: 600; color: var(--accent-hi); line-height: 1.2;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
|
||
padding: 2px 6px; border-radius: 4px;
|
||
background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
|
||
.clip.has-media .clip-rated { position: relative; z-index: 1; }
|
||
.clip-fx { font-size: 10px; font-family: var(--font-ui); color: var(--muted); line-height: 1.2;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; cursor: pointer;
|
||
padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line);
|
||
background: color-mix(in srgb, var(--line) 30%, transparent); }
|
||
.clip-fx:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
|
||
.clip.has-media .clip-fx { position: relative; z-index: 1; }
|
||
.clip-gen-prompt {
|
||
font-size: 10px; line-height: 1.25; flex-shrink: 0; min-height: 0;
|
||
border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
|
||
padding-top: 3px; margin-top: 1px;
|
||
}
|
||
.clip-gen-prompt-label {
|
||
display: block; font-family: var(--font-ui); font-size: 9px; letter-spacing: .4px;
|
||
text-transform: uppercase; color: var(--faint); margin-bottom: 1px;
|
||
}
|
||
.clip-gen-prompt-text {
|
||
color: var(--accent-hi); overflow: hidden;
|
||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||
}
|
||
.clip.has-media .clip-gen-prompt { position: relative; z-index: 1; }
|
||
.clip.prompt-mismatch { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
|
||
.clip.anchor-mismatch { border-color: color-mix(in srgb, var(--teal-soft) 42%, var(--line)); }
|
||
.clip.stale-render.rendered::after { color: var(--accent-hi); text-shadow: 0 0 5px color-mix(in srgb, var(--accent) 70%, transparent); }
|
||
.clip-gen-anchor .clip-gen-prompt-label { color: var(--teal-soft); }
|
||
.clip-gen-anchor .clip-gen-prompt-text { color: var(--teal-hi); }
|
||
.ic-btn { width: 18px; height: 18px; padding: 0; font-size: 11px; line-height: 1; border: 1px solid var(--line);
|
||
background: var(--ink-1); color: var(--muted); border-radius: 4px; cursor: pointer; }
|
||
.ic-btn:hover { color: var(--text); border-color: var(--muted); }
|
||
.ic-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
|
||
.clip-trim { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; }
|
||
.clip-trim::after { content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 2px; height: 26px; background: var(--faint); border-radius: 2px; opacity: 0; transition: opacity .12s; }
|
||
.clip:hover .clip-trim::after, .clip.trimming .clip-trim::after { opacity: 1; }
|
||
.trim-tip { position: absolute; bottom: 4px; right: 4px; background: var(--ink-0); border: 1px solid var(--accent);
|
||
color: var(--accent); font-family: var(--font-ui); font-size: 10px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
|
||
|
||
/* cut line at clip boundaries; transition overlap is on the outgoing clip tail */
|
||
.seam-cut {
|
||
position: absolute; top: 6px; bottom: 6px; width: 2px;
|
||
transform: translateX(-50%); z-index: 3; pointer-events: none;
|
||
background: var(--line-2); border-radius: 1px;
|
||
}
|
||
.seam-cut.has-vt { background: color-mix(in srgb, var(--teal) 55%, var(--line)); }
|
||
.tl-seam-gap-handle {
|
||
position: absolute; top: 0; bottom: 0; left: 0; width: 10px;
|
||
transform: translateX(-50%); cursor: ew-resize; pointer-events: auto;
|
||
}
|
||
.tl-seam-gap-handle:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
|
||
|
||
/* editorial pause between clips */
|
||
.tl-gap {
|
||
position: absolute; top: 10px; bottom: 10px; z-index: 1;
|
||
background: repeating-linear-gradient(
|
||
-45deg,
|
||
color-mix(in srgb, var(--ink-2) 85%, transparent),
|
||
color-mix(in srgb, var(--ink-2) 85%, transparent) 4px,
|
||
color-mix(in srgb, var(--ink-1) 85%, transparent) 4px,
|
||
color-mix(in srgb, var(--ink-1) 85%, transparent) 8px
|
||
);
|
||
border: 1px dashed color-mix(in srgb, var(--faint) 60%, transparent);
|
||
border-radius: 4px; box-sizing: border-box; cursor: pointer;
|
||
}
|
||
.tl-gap:hover, .tl-gap.resizing { border-color: var(--accent); }
|
||
.tl-gap-label {
|
||
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
||
font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
|
||
pointer-events: none; user-select: none;
|
||
}
|
||
.tl-gap-handle {
|
||
position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2;
|
||
}
|
||
.tl-gap-handle::after {
|
||
content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
|
||
width: 2px; height: 20px; background: var(--accent); border-radius: 2px; opacity: 0.6;
|
||
}
|
||
.tl-gap:hover .tl-gap-handle::after, .tl-gap.resizing .tl-gap-handle::after { opacity: 1; }
|
||
.tl-gap-tip {
|
||
position: absolute; bottom: 2px; right: 2px; background: var(--ink-0); border: 1px solid var(--accent);
|
||
color: var(--accent); font-family: var(--font-ui); font-size: 10px; padding: 1px 5px;
|
||
border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 3;
|
||
}
|
||
|
||
/* transition tail on the outgoing clip (NLE-style overlap) */
|
||
.clip-vt-tail {
|
||
position: absolute; top: 0; right: 0; bottom: 0; pointer-events: auto; z-index: 2;
|
||
border-top-right-radius: 7px; border-bottom-right-radius: 7px; cursor: ew-resize;
|
||
}
|
||
.clip-vt-tail.vt-crossfade { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--teal) 35%, transparent)); }
|
||
.clip-vt-tail.vt-fadeblack { background: linear-gradient(90deg, transparent, var(--fade-black)); }
|
||
.clip-vt-tail.vt-wipeleft { background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--accent) 40%, transparent)); }
|
||
.clip-vt-tail.vt-wiperight { background: linear-gradient(270deg, transparent 20%, color-mix(in srgb, var(--accent) 40%, transparent)); }
|
||
|
||
/* playhead */
|
||
.tl-playhead { position: absolute; top: -24px; bottom: 0; width: 2px; background: var(--teal); z-index: 6; pointer-events: none; }
|
||
.tl-playhead::before { content: ""; position: absolute; top: -24px; left: -5px; border: 6px solid transparent; border-top-color: var(--teal); }
|
||
|
||
.empty-stage { color: var(--faint); padding: 30px; text-align: center; width: 100%; }
|
||
|
||
/* ── project-menu buttons (Easy Gen) ──────────────────────────────────────
|
||
The Editor's welcome card is gone — the full-screen wizard splash is the only
|
||
start screen now. Easy Gen's project menu still uses these button styles. */
|
||
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||
.welcome-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
text-align: left;
|
||
padding: 14px 15px;
|
||
border-radius: 11px;
|
||
border: 1px solid var(--line);
|
||
background: var(--ink-1);
|
||
cursor: pointer;
|
||
transition: border-color .12s, background .12s, transform .08s;
|
||
}
|
||
.welcome-btn:hover:not(.disabled) {
|
||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||
background: var(--ink-2);
|
||
transform: translateY(-1px);
|
||
}
|
||
.welcome-btn.primary {
|
||
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
|
||
background: color-mix(in srgb, var(--accent) 10%, var(--ink-1));
|
||
}
|
||
.welcome-btn.primary:hover:not(.disabled) {
|
||
background: color-mix(in srgb, var(--accent) 16%, var(--ink-2));
|
||
}
|
||
.welcome-btn.ghost { opacity: .88; }
|
||
.welcome-btn.disabled {
|
||
opacity: .45;
|
||
cursor: default;
|
||
transform: none;
|
||
}
|
||
.welcome-btn-label { font-weight: 600; font-size: 13px; color: var(--text); }
|
||
.welcome-btn.primary .welcome-btn-label { color: var(--accent-hi); }
|
||
.welcome-btn-hint { font-size: 11px; color: var(--faint); line-height: 1.35; }
|
||
@media (max-width: 520px) {
|
||
.welcome-actions { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ───────────────────────── MODALS (Models settings) ───────────────────────── */
|
||
.modal-overlay { position: fixed; inset: 0; z-index: 500; background: var(--backdrop); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 7vh 16px; animation: fade .15s ease; }
|
||
@keyframes fade { from { opacity: 0; } }
|
||
.modal { width: min(760px, 96vw); max-height: 82vh; display: flex; flex-direction: column; background: var(--surface-modal); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; animation: pop .16s ease; }
|
||
.modal.modal-wide { width: min(920px, 96vw); }
|
||
.modal.modal-mini { width: min(380px, 92vw); }
|
||
.engine-modal-content { padding-bottom: 24px; }
|
||
.engine-modal-summary { font-size: 12px; color: var(--muted); font-family: var(--font-ui); margin-bottom: 12px; padding: 8px 10px; background: var(--ink-2); border-radius: 8px; border: 1px solid var(--line); }
|
||
.modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--surface-pop), var(--surface-pop-2)); }
|
||
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
|
||
.modal-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
|
||
|
||
/* Temp files browser */
|
||
.tmp-count { white-space: nowrap; }
|
||
.tmp-body { margin-top: 12px; }
|
||
.tmp-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
|
||
.tmp-card { cursor: default; padding-bottom: 6px; }
|
||
.tmp-card .media-thumb { height: 76px; }
|
||
.tmp-card .media-name { font-size: 11px; word-break: break-all; }
|
||
.tmp-meta { padding: 0 8px; }
|
||
.tmp-card-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px 0; }
|
||
.tmp-card-acts .btn { flex: 1; white-space: nowrap; }
|
||
.modal-content { padding: 16px; overflow: auto; }
|
||
|
||
.composer { background: var(--ink-0); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
|
||
.composer.flash { animation: composer-flash .9s ease; }
|
||
@keyframes composer-flash { 0%, 100% { box-shadow: none; border-color: var(--line); } 25% { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); } }
|
||
.composer-title { font-size: 11px; color: var(--accent); margin-bottom: 10px; font-weight: 600;}
|
||
.composer-row { display: flex; gap: 10px; align-items: center; }
|
||
.composer-row select { flex: 1; }
|
||
.composer-row .composer-search { flex: 1.2; min-width: 0; }
|
||
.composer-row .btn { flex: 0 0 auto; }
|
||
.composer-preview { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
|
||
.composer-preview:empty { display: none; }
|
||
|
||
/* Global-prompt templates bar (above the prompt) */
|
||
.compose-templates { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
|
||
.compose-templates .compose-tpl-select { flex: 1; min-width: 0; }
|
||
.compose-templates .btn { flex: 0 0 auto; }
|
||
|
||
/* Variables panel (below the prompt) */
|
||
.compose-vars { margin-top: 8px; }
|
||
.composer-var-toggle { padding-left: 2px; }
|
||
.compose-var-hint { margin-top: 4px; }
|
||
.compose-var-hint.compose-var-warn { color: var(--accent); }
|
||
.compose-var-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
|
||
.compose-var-head { display: flex; gap: 8px; align-items: center; }
|
||
.compose-var-head .compose-var-filter { flex: 1; min-width: 0; }
|
||
.compose-var-head .btn { flex: 0 0 auto; }
|
||
/* Open: prompt and list split the window, and the list scrolls on its own — the prompt
|
||
never scrolls out of sight while working through a long list. */
|
||
.compose-bin.vars-open .compose-ta { flex: 1 1 0; min-height: 120px; }
|
||
.compose-bin.vars-open .compose-vars { flex: 1 1 0; min-height: 180px; display: flex; flex-direction: column; }
|
||
.compose-bin.vars-open .compose-var-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
|
||
.compose-var-row { display: flex; gap: 6px; align-items: flex-start; }
|
||
.compose-var-row > .compose-var-dollar, .compose-var-row > .compose-var-eq,
|
||
.compose-var-row > .btn { margin-top: 5px; }
|
||
.compose-var-dollar { color: var(--accent); font-family: var(--font-ui); opacity: 0.8; }
|
||
.compose-var-eq { color: var(--muted); }
|
||
.compose-var-row .compose-var-name { flex: 0 0 30%; min-width: 0; }
|
||
/* Value is an auto-growing textarea (JS sets the height) — no resize handle, no scrollbar. */
|
||
.compose-var-row .compose-var-val { flex: 1; min-width: 0; resize: none; overflow: hidden; }
|
||
/* At rest: exactly one unwrapped line, same height as the name field beside it. */
|
||
.compose-var-row .compose-var-val:not(:focus) { white-space: nowrap; height: 30px; }
|
||
.compose-var-row .btn { flex: 0 0 auto; }
|
||
|
||
/* config validation banner */
|
||
/* Pipeline requirements panel */
|
||
.node-search { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
|
||
.node-search-input { flex: 1 1 auto; min-width: 0; }
|
||
.node-search-count { font-family: var(--font-ui); font-size: 11px; color: var(--faint); flex: 0 0 auto; }
|
||
|
||
/* Node groups: a heading over the flat grid, never a container. */
|
||
.node-group { margin-bottom: 10px; }
|
||
.node-group-head { display: flex; align-items: center; gap: 8px; width: 100%;
|
||
padding: 6px 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
|
||
.node-group-fold { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
|
||
background: none; border: 0; cursor: pointer; padding: 0; text-align: left;
|
||
color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em;
|
||
text-transform: uppercase; }
|
||
.node-group-fold:hover { color: var(--fg); }
|
||
.node-group-byp { flex: 0 0 auto; }
|
||
.node-group-byp.risky { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
|
||
.node-group-caret { font-family: var(--font-ui); flex: 0 0 auto; }
|
||
.node-group-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.node-group-count { font-family: var(--font-ui); color: var(--faint); text-transform: none; }
|
||
.node-group-bad { color: var(--danger); text-transform: none; letter-spacing: 0; }
|
||
.node-group-field { margin: 10px 0 4px; }
|
||
/* Loaders are pinned above everything else: choosing model files is the one step every
|
||
project has, and on a big pipeline they used to be scattered among nodes nobody touches. */
|
||
.node-group-pinned { margin-bottom: 18px; }
|
||
.node-group-pinned .node-group-head { border-bottom-color: color-mix(in srgb, var(--teal) 45%, var(--line)); }
|
||
.node-group-pinned .node-group-name { color: var(--teal); }
|
||
.node-group-fold.static { cursor: default; }
|
||
.node-group-note { font-size: var(--fs-subhead); color: var(--faint); margin: -2px 0 8px; }
|
||
|
||
/* list inputs: one string widget holding N rows (text encoders, LoRAs) */
|
||
.list-field { display: block; margin-bottom: 12px; min-width: 0; }
|
||
.list-field-name { display: block; font-size: var(--fs-subhead); line-height: var(--lh-subhead);
|
||
color: var(--faint); margin-bottom: 4px; }
|
||
.list-rows { display: flex; flex-direction: column; gap: 4px; }
|
||
.list-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
|
||
.list-row.list-head { font-size: 10px; color: var(--faint); text-transform: uppercase;
|
||
letter-spacing: .04em; padding-bottom: 2px; }
|
||
.list-cell { flex: 1 1 0; min-width: 0; }
|
||
.list-cell input, .list-cell select { width: 100%; min-width: 0; max-width: 100%; }
|
||
.list-cell input[type="checkbox"] { width: auto; }
|
||
/* the first column is the file/name picker and deserves the room */
|
||
.list-row > .list-cell:first-of-type { flex: 3 1 0; }
|
||
/* the two gutters are fixed so the header line sits over the columns it names */
|
||
.list-ord { display: flex; flex-direction: column; gap: 1px; flex: 0 0 18px; }
|
||
.list-rm-head { flex: 0 0 20px; }
|
||
.list-row > .wire-rm { flex: 0 0 20px; padding: 0; }
|
||
.list-ord > button { padding: 0 3px; line-height: 1; font-size: 8px; }
|
||
.list-ord > button:disabled { opacity: .3; cursor: default; }
|
||
.list-empty { font-size: 12px; color: var(--faint); }
|
||
|
||
/* picker mode: the file is the row's identity, its settings trail behind it */
|
||
.list-picker .list-row { gap: 8px; }
|
||
.list-pick-name { flex: 3 1 0; min-width: 0; text-align: left; overflow: hidden;
|
||
text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui);
|
||
font-size: 12px; color: var(--text); background: var(--surface-raised-4);
|
||
border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
|
||
.list-pick-name:hover { border-color: var(--teal); }
|
||
.list-picker .list-cell { flex: 0 0 96px; }
|
||
|
||
.mn-pick-pop { min-width: 320px; max-width: min(520px, 90vw); }
|
||
.mn-pick-search { width: 100%; margin-bottom: 6px; }
|
||
.mn-pick-list { max-height: 46vh; overflow: auto; }
|
||
.mn-pick-list .mn-role-item { display: flex; justify-content: space-between; gap: 10px;
|
||
font-family: var(--font-ui); }
|
||
.mn-pick-used { color: var(--faint); font-size: 10px; text-transform: uppercase;
|
||
letter-spacing: .04em; align-self: center; }
|
||
.mn-pick-empty { padding: 6px 8px; font-size: 12px; color: var(--faint); }
|
||
|
||
/* inputs a node calls advanced: present, but not in the way of the normal path */
|
||
.wire-advanced { margin-top: 4px; }
|
||
.wire-advanced > summary { font-size: 11px; color: var(--faint); cursor: pointer;
|
||
padding: 2px 0; list-style: none; }
|
||
.wire-advanced > summary::before { content: "▸ "; }
|
||
.wire-advanced[open] > summary::before { content: "▾ "; }
|
||
|
||
.req-panel { margin-bottom: 18px; }
|
||
.req-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||
.req-title { font-size: 11px; color: var(--teal); font-weight: 600; }
|
||
.req-dismiss { margin-left: auto; background: none; border: 0; cursor: pointer;
|
||
color: var(--faint); font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
|
||
.req-dismiss:hover { color: var(--fg); background: var(--line); }
|
||
.req-collapsed { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
|
||
.req-collapsed .req-dot { color: var(--danger); }
|
||
.req-fold { margin-top: 6px; }
|
||
.req-fold-sum { font-size: 11px; color: var(--faint); cursor: pointer; padding: 4px 0; }
|
||
.req-opt-head { font-size: 11px; color: var(--faint); margin: 8px 0 4px; font-weight: 600;}
|
||
/* One line, never wrapping: the row is a status, not a paragraph. */
|
||
.req-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; margin-bottom: 3px; font-size: 12px; }
|
||
.req-row .req-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.req-row.ok { background: color-mix(in srgb, var(--teal) 8%, transparent); }
|
||
.req-row.missing { background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
|
||
.req-row.opt { background: transparent; opacity: 0.7; }
|
||
.req-dot { font-family: var(--font-ui); font-weight: 700; flex: 0 0 auto; width: 14px; }
|
||
.req-row.ok .req-dot { color: var(--teal); }
|
||
.req-row.missing .req-dot { color: var(--danger); }
|
||
.req-label { flex: 1; }
|
||
.req-type { font-family: var(--font-ui); font-size: 10px; color: var(--faint); flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; }
|
||
.req-hint { width: 100%; margin-top: 3px; margin-left: 22px; font-size: 11px; color: var(--muted); }
|
||
/* Square, so it reads as an action on the row rather than a second label. */
|
||
.req-add { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; line-height: 1;
|
||
display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
|
||
.req-empty { color: var(--faint); font-size: 12px; padding: 8px 0; }
|
||
|
||
.valid-banner { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 12px; border: 1px solid var(--line); }
|
||
.valid-banner .valid-dot { font-family: var(--font-ui); font-weight: 700; }
|
||
.valid-banner.ok { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: color-mix(in srgb, var(--teal) 9%, transparent); }
|
||
.valid-banner.warn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, transparent); }
|
||
.valid-banner.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 9%, transparent); }
|
||
|
||
.slot-list { display: flex; flex-direction: column; gap: 12px; }
|
||
.slot-card { background: var(--ink-1); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
|
||
.slot-card { border-left: 3px solid var(--accent); }
|
||
.slot-card.slot-warn { border-left-color: var(--accent); }
|
||
.slot-card.slot-bad { border-color: var(--danger); border-left-color: var(--danger);
|
||
background: color-mix(in srgb, var(--danger) 9%, var(--ink-1));
|
||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
|
||
.slot-head { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
|
||
.slot-card.open .slot-head { margin-bottom: 10px; }
|
||
.slot-chev { color: var(--faint); width: 12px; flex: 0 0 auto; font-size: 11px; }
|
||
.slot-role { font-weight: 600; }
|
||
.slot-node { font-family: var(--font-ui); font-size: 11px; color: var(--muted); background: var(--ink-0); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); }
|
||
.slot-badge { font-family: var(--font-ui); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; border: 1px solid; }
|
||
.slot-badge.ok { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 50%, var(--line)); }
|
||
.slot-badge.warn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
|
||
.slot-badge.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
|
||
.slot-badge.exposed { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
|
||
.slot-head .btn { margin-left: auto; }
|
||
/* single-column settings everywhere in the Settings window: side-by-side fields
|
||
(e.g. Engine's Conditioning/Sampler pickers) stack so tiny screens still fit */
|
||
.sw-body .insp-engine-pickers { flex-direction: column; gap: 8px; }
|
||
|
||
/* node page header: long labels/badges wrap instead of pushing bypass/remove out of reach;
|
||
actions live in one right-aligned cluster that wraps as a unit */
|
||
.node-page .slot-head { flex-wrap: wrap; cursor: default; row-gap: 6px; }
|
||
.node-page .slot-head .slot-role { overflow-wrap: anywhere; }
|
||
.node-page .slot-head .slot-node { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.node-page .slot-head .slot-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
|
||
.node-page .slot-head .slot-actions .btn { margin-left: 0; }
|
||
|
||
.issue-box { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
|
||
.issue { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; }
|
||
.issue-dot { font-family: var(--font-ui); flex: 0 0 auto; }
|
||
.issue-error .issue-dot, .issue-error .issue-msg { color: var(--danger); }
|
||
.issue-warn .issue-dot, .issue-warn .issue-msg { color: var(--accent); }
|
||
.slot-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 14px; }
|
||
/* selects shrink with their track instead of forcing the row wider than the pane
|
||
(a select's intrinsic min width is its longest option — e.g. wire labels) */
|
||
.slot-fields > label.field { min-width: 0; }
|
||
.slot-fields > label.field input, .slot-fields > label.field select { min-width: 0; max-width: 100%; }
|
||
.slot-fields label.field, .composer-preview label.field { margin-bottom: 0; }
|
||
|
||
/* eye toggle: expose a node input to the main editor window */
|
||
label.field.with-eye { position: relative; padding-right: 26px; }
|
||
.eye-btn { position: absolute; top: 0; right: 0; width: 22px; height: 18px; padding: 0; line-height: 1;
|
||
background: transparent; border: 1px solid var(--line); border-radius: 5px; color: var(--faint);
|
||
cursor: pointer; font-size: 11px; }
|
||
.eye-btn:hover { color: var(--muted); border-color: var(--muted); }
|
||
.eye-btn.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
|
||
.eye-btn.link-pick { color: var(--teal); }
|
||
.eye-btn.link-pick.on { color: var(--ink-0); background: var(--teal); border-color: var(--teal); }
|
||
label.field.linked input, label.field.linked select { opacity: .6; }
|
||
.link-tag { position: absolute; top: 0; right: 0; font-size: 9px; color: var(--teal); font-family: var(--font-ui); }
|
||
|
||
/* linked-inputs section */
|
||
.links-section { background: var(--ink-0); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
|
||
.links-head { display: flex; align-items: center; gap: 10px; }
|
||
.links-head .composer-title { margin-bottom: 0; }
|
||
.links-head-right { margin-left: auto; display: flex; gap: 6px; }
|
||
.links-hint, .links-empty { font-size: 11px; color: var(--faint); margin-top: 8px; }
|
||
.link-card { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 8px; background: var(--ink-1); }
|
||
.link-head { display: flex; align-items: center; gap: 8px; }
|
||
.link-ico { color: var(--teal); }
|
||
.link-name { flex: 1; font-weight: 600; }
|
||
.link-head .danger { margin-left: 4px; }
|
||
.link-value { margin: 8px 0 0; }
|
||
.link-members { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
|
||
.link-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 10px;
|
||
color: var(--muted); background: var(--ink-0); border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px 2px 7px; }
|
||
.chip-x { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 10px; padding: 0 2px; }
|
||
.chip-x:hover { color: var(--danger); }
|
||
|
||
.wire-box { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
|
||
.wire-title { font-size: 11px; color: var(--teal); margin-bottom: 8px; font-weight: 600;}
|
||
.wire-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
|
||
.wire-out { font-family: var(--font-ui); font-size: 11px; color: var(--muted); flex: 0 0 auto; min-width: 130px; }
|
||
.wire-arrow { color: var(--teal); }
|
||
.wire-dest { font-family: var(--font-ui); font-size: 11px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
|
||
.wire-dest.wire-muted { color: var(--faint); opacity: .7; }
|
||
.wire-select { flex: 1; min-width: 0; }
|
||
.wire-multi { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
|
||
.wire-multi-row { display: flex; gap: 5px; align-items: center; min-width: 0; }
|
||
.wire-multi-row .wire-select { flex: 1; min-width: 0; }
|
||
.wire-rm { padding: 1px 5px; color: var(--danger-2); }
|
||
.wire-add { align-self: flex-start; }
|
||
/* Input-source arrow points left (← instead of →) */
|
||
.wire-row .wire-arrow.src { color: var(--accent); }
|
||
|
||
/* pipeline missing-nodes setup modal */
|
||
.pipe-setup-modal { max-width: 520px; width: min(520px, 96vw); }
|
||
.pipe-setup-lead { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
|
||
.pipe-setup-list { margin: 0 0 12px; padding-left: 18px; color: var(--text); font-size: 13px; }
|
||
.pipe-setup-list li { margin: 6px 0; }
|
||
.pipe-setup-sub { display: block; font-size: 11px; color: var(--faint); font-family: var(--font-ui); margin-top: 2px; }
|
||
.pipe-setup-warn { margin: 10px 0; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.45;
|
||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--muted); }
|
||
.pipe-setup-manual-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
|
||
.pipe-setup-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
|
||
.pipe-setup-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
|
||
/* Model family picker — the first question in setup, since it decides which nodes and
|
||
which model files everything after it looks for. */
|
||
.pipe-setup-family { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
|
||
.pipe-setup-family-btn { display: block; width: 100%; text-align: left; padding: 10px 12px;
|
||
border-radius: 8px; line-height: 1.4; }
|
||
.pipe-setup-family-btn.active { border-color: var(--accent); background: var(--accent-soft); }
|
||
.pipe-setup-family-title { font-size: 13px; color: var(--text); display: flex; align-items: baseline;
|
||
gap: 8px; flex-wrap: wrap; }
|
||
.pipe-setup-family-title .pipe-setup-sub { display: inline; margin-top: 0; font-family: inherit;
|
||
text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
|
||
.pipe-setup-family-btn .pipe-setup-sub { font-family: inherit; font-size: 11px; color: var(--muted); }
|
||
.pipe-setup-readiness { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
|
||
border: 1px solid var(--line); background: var(--overlay-1); }
|
||
.pipe-setup-link { display: inline-block; margin-bottom: 10px; font-size: 12px; }
|
||
.restart-card .restart-cancel { margin-top: 4px; }
|
||
|
||
/* restart overlay */
|
||
.restart-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
|
||
background: color-mix(in srgb, var(--ink-0) 88%, transparent); backdrop-filter: blur(3px); }
|
||
.restart-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 40px;
|
||
background: var(--ink-1); border: 1px solid var(--line); border-radius: 14px; }
|
||
.restart-msg { color: var(--muted); text-align: center; white-space: pre-line; font-size: 13px; line-height: 1.5; }
|
||
.restart-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line);
|
||
border-top-color: var(--accent); animation: spin .8s linear infinite; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
||
/* staggered zone reveal on load */
|
||
.zone { animation: rise .5s both; }
|
||
.media { animation-delay: .02s; }
|
||
.preview { animation-delay: .08s; }
|
||
.inspector { animation-delay: .12s; }
|
||
.timeline { animation-delay: .16s; }
|
||
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
|
||
|
||
.clip-trim-left { left: 0; right: auto; cursor: ew-resize; }
|
||
.clip-trim-left.locked { cursor: not-allowed; opacity: .35; }
|
||
.clip-filmstrip { position: absolute; left: 0; right: 0; bottom: 2px; height: 14px; display: flex; gap: 1px;
|
||
opacity: .75; pointer-events: none; overflow: hidden; border-radius: 0 0 6px 6px; }
|
||
.clip-fs-cell { flex: 1; min-width: 0; overflow: hidden; }
|
||
.clip-fs-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.tl-dd-panel.inline { position: static; box-shadow: none; border: none; padding: 0; margin-top: 6px; }
|
||
.tl-add-panel { min-width: 160px; display: flex; flex-direction: column; gap: 2px; padding: 6px; }
|
||
.tl-add-row { display: block; width: 100%; text-align: left; padding: 6px 10px; border: none; border-radius: 6px;
|
||
background: transparent; color: var(--text); font-size: 12px; cursor: pointer; }
|
||
.tl-add-row:hover:not(:disabled) { background: var(--ink-2); }
|
||
.tl-add-row:disabled { opacity: .45; cursor: default; }
|
||
.tl-dd-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
|
||
.insp-fold { margin: 8px 0; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px 8px; }
|
||
.insp-fold-sum { cursor: pointer; font-size: 12px; color: var(--muted); padding: 8px 0; list-style: none; }
|
||
.insp-fold-sum::-webkit-details-marker { display: none; }
|
||
.engine-preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
|
||
.engine-preset-label { font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.slot-picker-overlay { z-index: 12000; }
|
||
.slot-picker-modal { max-width: 420px; }
|
||
.slot-picker-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; max-height: 50vh; overflow-y: auto; }
|
||
.slot-picker-row { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
|
||
padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-0); color: var(--text); cursor: pointer; }
|
||
.slot-picker-row:hover { border-color: var(--teal); }
|
||
.slot-picker-hint { font-size: 10px; color: var(--teal); font-family: var(--font-ui); }
|
||
.slot-picker-input {
|
||
width: 100%; box-sizing: border-box; margin: 12px 0;
|
||
padding: 8px 10px; font-size: 13px; border-radius: 8px;
|
||
border: 1px solid var(--line); background: var(--ink-0); color: var(--text);
|
||
}
|
||
.slot-picker-actions { display: flex; gap: 8px; justify-content: flex-end; }
|
||
|
||
/* workflow import wizard */
|
||
.wf-body { display: flex; flex-direction: column; gap: 16px; }
|
||
.wf-steps { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; font-family: var(--font-ui); color: var(--muted); }
|
||
.wf-step { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); }
|
||
.wf-step.active { color: var(--teal); border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); }
|
||
.wf-step.done { color: var(--muted); opacity: .7; }
|
||
.wf-panel { display: flex; flex-direction: column; gap: 12px; }
|
||
.wf-lead { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }
|
||
.wf-h3 { margin: 0; font-size: 16px; font-family: var(--font-display); }
|
||
.wf-h4 { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
|
||
.wf-meta { font-size: 11px; color: var(--muted); font-family: var(--font-ui); }
|
||
.wf-warn { font-size: 12px; color: var(--warn); padding: 8px 10px; background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
|
||
.wf-hint { font-size: 12px; color: var(--muted); padding: 8px 10px; background: var(--ink-2); border-radius: 8px; border: 1px solid var(--line); }
|
||
.wf-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
|
||
.wf-drop.hover, .wf-drop:hover { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 5%, transparent); }
|
||
.wf-paste { width: 100%; box-sizing: border-box; font-family: var(--font-ui); font-size: 11px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-0); color: var(--text); resize: vertical; }
|
||
.wf-node-list { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
|
||
.wf-node-row { display: flex; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
|
||
.wf-node-row:last-child { border-bottom: none; }
|
||
.wf-node-cls { font-family: var(--font-ui); color: var(--teal); min-width: 140px; }
|
||
.wf-node-lbl { color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.wf-link-list { max-height: 120px; overflow: auto; font-size: 11px; font-family: var(--font-ui); color: var(--muted); }
|
||
.wf-link-row { padding: 3px 0; }
|
||
.wf-bind-list { display: flex; flex-direction: column; gap: 10px; }
|
||
.wf-bind-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 10px; align-items: center; }
|
||
.wf-bind-label { font-size: 13px; }
|
||
.wf-bind-sel { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-0); color: var(--text); }
|
||
.wf-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
|
||
.wf-summary { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
|
||
.wf-import-banner { font-size: 12px; color: var(--teal); padding: 8px 10px; background: color-mix(in srgb, var(--teal) 6%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); border-radius: 8px; margin-bottom: 12px; }
|
||
.guided-hint { font-size: 11px; color: var(--muted); margin-bottom: 10px; line-height: 1.45; }
|
||
.wire-locked { font-size: 11px; color: var(--faint); font-style: italic; padding: 4px 8px; background: var(--ink-2); border-radius: 6px; border: 1px solid var(--line); }
|
||
|
||
/* welcome tour (?mode=tour) */
|
||
body.tour-mode { overflow: hidden; }
|
||
.tour-root { position: fixed; inset: 0; z-index: 200000; pointer-events: none; }
|
||
.tour-backdrop { position: absolute; inset: 0; pointer-events: auto; }
|
||
.tour-backdrop.faq-mode { background: var(--backdrop-3); }
|
||
.tour-spotlight {
|
||
position: fixed; border-radius: 10px; pointer-events: none;
|
||
box-shadow: 0 0 0 9999px var(--backdrop-4);
|
||
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
|
||
transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
|
||
}
|
||
.tour-card {
|
||
position: fixed; z-index: 2; pointer-events: auto;
|
||
width: min(420px, calc(100vw - 32px));
|
||
padding: 16px 18px 14px;
|
||
background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-pop-2) 100%);
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.tour-card.centered { z-index: 3; }
|
||
.tour-card-head { margin-bottom: 8px; }
|
||
.tour-step-no { font: 10px/1 var(--font-ui); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
|
||
.tour-card-title { margin: 6px 0 0; font: 700 18px/1.25 var(--font-display); }
|
||
.tour-card-body { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.55; }
|
||
.tour-chapters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
||
.tour-chapter {
|
||
font: 10px/1 var(--font-ui); padding: 4px 8px; border-radius: 999px;
|
||
border: 1px solid var(--line); background: var(--ink-0); color: var(--muted); cursor: pointer;
|
||
}
|
||
.tour-chapter.active { color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
|
||
.tour-nav { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
|
||
.tour-banner {
|
||
position: fixed; top: calc(var(--menubar-h) + 8px); left: 50%; transform: translateX(-50%);
|
||
z-index: 4; pointer-events: auto;
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 6px 10px 6px 14px; border-radius: 999px;
|
||
background: var(--backdrop-5); border: 1px solid var(--line);
|
||
font-size: 12px; box-shadow: var(--shadow);
|
||
}
|
||
.tour-banner-label { font-family: var(--font-display); font-weight: 700; color: var(--accent-hi); }
|
||
.tour-banner-note { color: var(--muted); font-size: 11px; }
|
||
.tour-toast {
|
||
position: fixed; bottom: calc(var(--timeline-anchor, var(--timeline-h)) + 20px); left: 50%; transform: translateX(-50%) translateY(8px);
|
||
z-index: 200001; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s;
|
||
padding: 10px 14px; border-radius: 10px; max-width: min(480px, 92vw);
|
||
background: var(--accent-dim-3); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); font-size: 12px;
|
||
}
|
||
.tour-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
.tour-faq-card { max-height: min(78vh, 720px); overflow: auto; }
|
||
.tour-faq-search {
|
||
width: 100%; box-sizing: border-box; margin-bottom: 10px;
|
||
padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
|
||
background: var(--ink-0); color: var(--text);
|
||
}
|
||
.tour-faq-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
|
||
.tour-faq-cat { font: 600 11px/1 var(--font-ui); color: var(--teal); text-transform: uppercase; margin-top: 8px; }
|
||
.tour-faq-item { border: 1px solid var(--line); border-radius: 8px; background: var(--ink-0); padding: 8px 10px; }
|
||
.tour-faq-item summary { cursor: pointer; font-size: 13px; font-weight: 600; }
|
||
.tour-faq-item p { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
|
||
.tour-faq-empty { color: var(--muted); font-size: 12px; margin: 0; }
|
||
|
||
/* ───────────────────────── PLAN (legacy) ───────────────────────── */
|
||
/* The plan-strip UI is gone; only the off-plan clip marker survives. */
|
||
.clip.off-plan { outline: 1px dashed color-mix(in srgb, var(--teal) 45%, transparent); outline-offset: -2px; }
|
||
|
||
/* ───────────────────────── COMPOSER BUTTON (header) ───────────────────────── */
|
||
/* Matches the neighbouring .dock-tab panel toggles (shape, size, typography); the
|
||
teal ◆ dot keeps it identifiable as the Composer action. */
|
||
.composer-btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
|
||
color: var(--faint); font-size: var(--fs-subhead); line-height: var(--lh-subhead);
|
||
padding: 4px var(--sp-2); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
|
||
}
|
||
.composer-btn:hover { color: var(--muted); border-color: var(--muted); }
|
||
.composer-btn .composer-dot { font-size: 9px; color: var(--teal); transform: translateY(-.5px); }
|
||
.composer-btn.on {
|
||
background: var(--accent-soft); color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
|
||
}
|
||
.composer-btn.on .composer-dot { color: var(--teal); filter: drop-shadow(0 0 5px var(--teal-soft)); }
|
||
|
||
/* ───────────────────────── FLOATING WINDOW (Composer, …) ───────────────────────── */
|
||
.fw {
|
||
position: fixed; left: 0; top: 0; z-index: 4000;
|
||
display: flex; flex-direction: column; overflow: hidden;
|
||
background: var(--ink-1); border: 1px solid var(--line); border-radius: 11px;
|
||
box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--shadow-ink) 91.8%, transparent), 0 0 0 1px var(--scrim-1);
|
||
}
|
||
.fw[hidden] { display: none; }
|
||
.fw.fw-maxed {
|
||
left: 12px !important; top: calc(var(--menubar-h) + 10px) !important;
|
||
width: calc(100vw - 24px) !important; height: calc(100vh - var(--menubar-h) - 22px) !important;
|
||
border-radius: 11px;
|
||
}
|
||
.fw-bar {
|
||
flex: 0 0 38px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 13px;
|
||
background: linear-gradient(var(--surface-raised-2), var(--surface-raised-9)); border-bottom: 1px solid var(--line);
|
||
cursor: move; user-select: none;
|
||
}
|
||
.fw.fw-maxed .fw-bar { cursor: default; }
|
||
.fw-title { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
|
||
.fw-dot { color: var(--teal); font-size: 9px; }
|
||
.fw-title-text { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .2px; }
|
||
.fw-sub { font-size: 11px; color: var(--faint); font-weight: 600;}
|
||
.fw-ctrls { margin-left: auto; display: flex; gap: 4px; }
|
||
.fw-btn {
|
||
width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
|
||
background: transparent; border: 1px solid transparent; border-radius: 6px;
|
||
color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
|
||
}
|
||
.fw-btn:hover { background: var(--ink-3); color: var(--text); border-color: var(--line); }
|
||
.fw-close:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); border-color: var(--danger); }
|
||
.fw-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }
|
||
.fw-grip {
|
||
position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
|
||
background: linear-gradient(135deg, transparent 50%, var(--line) 50%, var(--line) 64%, transparent 64%, transparent 78%, var(--line) 78%, var(--line) 92%, transparent 92%);
|
||
}
|
||
.fw.fw-maxed .fw-grip { display: none; }
|
||
|
||
/* minimized = rolled up to the title bar, in place */
|
||
.fw.fw-collapsed { height: auto !important; }
|
||
.fw.fw-collapsed .fw-body,
|
||
.fw.fw-collapsed .fw-grip { display: none; }
|
||
.fw.fw-collapsed .fw-bar { border-bottom: 0; }
|
||
|
||
/* ───────────────────────── COMPOSER content ───────────────────────── */
|
||
.composer-shell { display: flex; flex-direction: column; width: 100%; min-height: 0; }
|
||
.composer-tabs { padding: 10px 12px 0; flex: 0 0 auto; }
|
||
.composer-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px; }
|
||
.compose-bin { display: flex; flex-direction: column; gap: 8px; height: 100%; }
|
||
.compose-ta { flex: 1; min-height: 220px; resize: none; font-family: var(--font-ui); font-size: 12px; line-height: 1.55; }
|
||
.lib-cat-tag { margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: var(--teal-soft); color: var(--teal);
|
||
font-family: var(--font-ui); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; }
|
||
|
||
/* ＋ Add ▾ split-button dropdown (Shortcuts / Splits toolbars) */
|
||
.composer-add { position: relative; flex-shrink: 0; }
|
||
.composer-add-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 150px;
|
||
background: var(--surface-modal); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; display: flex; flex-direction: column; }
|
||
.composer-add-menu[hidden] { display: none; }
|
||
.composer-add-item { text-align: left; background: transparent; border: 0; color: var(--muted); cursor: pointer;
|
||
font-family: var(--font-ui); font-size: 11px; padding: 6px 9px; border-radius: 5px; }
|
||
.composer-add-item:hover { background: var(--ink-3); color: var(--text); }
|
||
|
||
/* Compose-tab header row (title + Add shortcut) */
|
||
.compose-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
|
||
|
||
/* Shortcut autocomplete dropdown (anchored under the prompt field) */
|
||
.ac-menu { position: fixed; z-index: 99999; max-height: 240px; overflow-y: auto;
|
||
background: var(--surface-modal); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
|
||
.ac-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 9px; border-radius: 5px; cursor: pointer; }
|
||
.ac-item.active { background: var(--accent-soft); }
|
||
.ac-trigger { color: var(--accent-hi); font-family: var(--font-ui); font-size: 12px; flex-shrink: 0; }
|
||
.ac-prompt { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
|
||
.ac-cat { color: var(--teal); font-family: var(--font-ui); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; flex-shrink: 0; }
|
||
|
||
/* Shortcut ideas bulb + popover (quiet nudge — lights up when categories go unused) */
|
||
.sugg-bulb { padding: 0 4px; font-size: 12px; line-height: 1; opacity: .35; filter: grayscale(1); transition: opacity .3s, filter .3s; }
|
||
.sugg-bulb.on { opacity: 1; filter: none; text-shadow: 0 0 7px color-mix(in srgb, var(--accent-hi) 55%, transparent); }
|
||
.sugg-fieldwrap { position: relative; }
|
||
.sugg-fieldwrap .sugg-bulb { position: absolute; top: -3px; right: 0; }
|
||
.sugg-pop { position: fixed; z-index: 99999; width: 330px; max-height: 360px; overflow-y: auto;
|
||
background: var(--surface-modal); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; }
|
||
.sugg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px; }
|
||
.sugg-title { color: var(--muted); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; }
|
||
.sugg-list { display: flex; flex-direction: column; }
|
||
.sugg-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 9px; border-radius: 5px; cursor: pointer; }
|
||
.sugg-item:hover { background: var(--accent-soft); }
|
||
.sugg-empty { color: var(--muted); font-size: 11px; padding: 6px 9px; }
|
||
.sugg-sec-head { color: var(--accent-hi); font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
|
||
padding: 8px 4px 3px; border-top: 1px solid var(--line); margin-top: 4px; }
|
||
.sugg-habits:empty { display: none; }
|
||
.sugg-habits .sugg-sec-head:first-child, .sugg-list > .sugg-sec-head:first-child { border-top: none; margin-top: 0; }
|
||
.sugg-why { color: var(--muted); font-family: var(--font-ui); font-size: 9px; flex-shrink: 0; }
|
||
.sugg-cat-head { display: flex; align-items: center; gap: 7px; padding: 7px 4px 2px; }
|
||
.sugg-cat-head:first-child { padding-top: 2px; }
|
||
.sugg-cat-name { color: var(--teal); font-family: var(--font-ui); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; }
|
||
.sugg-cat-count { color: var(--muted); font-size: 9px; font-family: var(--font-ui); background: var(--ink-3); border-radius: 8px; padding: 0 6px; }
|
||
.sugg-more { margin-left: auto; font-size: 10px; padding: 0 4px; color: var(--muted); }
|
||
|
||
/* Editor settings modal */
|
||
.es-content { display: flex; flex-direction: column; gap: 18px; }
|
||
.es-row { display: flex; flex-direction: column; gap: 5px; }
|
||
.es-toggle { font-size: 13px; }
|
||
.es-hint { color: var(--muted); font-size: 11px; line-height: 1.45; padding-left: 24px; }
|
||
.es-section { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
|
||
.es-section-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .2px; }
|
||
.es-subfields { display: flex; flex-direction: column; gap: 9px; padding-left: 24px; }
|
||
|
||
/* Add-shortcut picker (Category → [Sub-category →] Shortcut) */
|
||
.sc-picker { display: flex; flex-direction: column; gap: 10px; }
|
||
.sc-crumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 11px; }
|
||
.sc-crumb-link { background: transparent; border: 0; color: var(--teal); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-family: inherit; font-size: inherit; }
|
||
.sc-crumb-link:hover { background: var(--ink-3); color: var(--accent-hi); }
|
||
.sc-crumb-sep { color: var(--faint); }
|
||
.sc-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
|
||
.sc-pick-folder, .sc-pick-item { display: flex; align-items: baseline; gap: 10px; text-align: left;
|
||
background: var(--ink-2); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
|
||
cursor: pointer; padding: 9px 12px; font-family: inherit; font-size: 12px; }
|
||
.sc-pick-folder:hover, .sc-pick-item:hover { border-color: var(--accent); background: var(--ink-3); }
|
||
.sc-pick-folder .sc-pick-name::before { content: "▸ "; color: var(--accent); }
|
||
.sc-pick-name { color: var(--text); flex-shrink: 0; }
|
||
.sc-pick-prompt { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
|
||
.sc-pick-count { margin-left: auto; color: var(--faint); font-family: var(--font-ui); font-size: 10px; flex-shrink: 0; }
|
||
|
||
|
||
/* ── unified Settings window (macOS System Settings style) ─────────────── */
|
||
.sw-overlay { align-items: center; padding: 4vh 16px; }
|
||
.settings-win { width: min(960px, 96vw); height: min(660px, 90vh); display: flex; position: relative;
|
||
background: var(--surface-modal); border: 1px solid var(--line); border-radius: 14px;
|
||
box-shadow: 0 24px 64px color-mix(in srgb, var(--shadow-ink) 64.7%, transparent); overflow: hidden; animation: pop .16s ease; }
|
||
|
||
/* Icon rail that expands on hover/focus — overlays the content instead of reflowing it,
|
||
so the window works on tiny screens without spending width on labels. */
|
||
.sw-side { position: absolute; top: 0; bottom: 0; left: 0; width: 52px; z-index: 5;
|
||
display: flex; flex-direction: column; gap: 10px; padding: 12px 9px;
|
||
background: var(--surface-deep-4); border-right: 1px solid var(--line); overflow: hidden;
|
||
transition: width .16s ease, box-shadow .16s ease; }
|
||
.sw-side:hover, .sw-side:focus-within { width: 218px; box-shadow: 18px 0 40px -18px color-mix(in srgb, var(--shadow-ink) 82.4%, transparent); }
|
||
.sw-search { width: 100%; min-width: 0; padding: 6px 9px; height: 30px; flex: 0 0 auto;
|
||
-webkit-appearance: none; appearance: none;
|
||
font: 12.5px var(--font-ui); color: var(--text);
|
||
background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; outline: none; }
|
||
.sw-search::-webkit-search-cancel-button { -webkit-appearance: none; }
|
||
.sw-search::placeholder { opacity: 0; transition: opacity .16s ease; }
|
||
.sw-side:hover .sw-search::placeholder, .sw-side:focus-within .sw-search::placeholder { opacity: 1; }
|
||
.sw-search:focus { border-color: var(--accent); }
|
||
.sw-nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; }
|
||
.sw-group-title { margin: 10px 6px 3px; font-size: 10px; font-weight: 700; letter-spacing: .8px;
|
||
text-transform: uppercase; color: var(--faint); white-space: nowrap;
|
||
opacity: 0; transition: opacity .16s ease; }
|
||
.sw-side:hover .sw-group-title, .sw-side:focus-within .sw-group-title { opacity: 1; }
|
||
.sw-nav-empty { padding: 12px 8px; font-size: 12px; color: var(--faint); white-space: nowrap; }
|
||
.sw-item { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 7px;
|
||
cursor: pointer; font-size: 13px; color: var(--text); user-select: none; flex: 0 0 auto; }
|
||
.sw-item:hover { background: var(--ink-3); }
|
||
.sw-item.active { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-accent-2); font-weight: 600; }
|
||
.sw-icon { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center;
|
||
background: linear-gradient(180deg,var(--grip),var(--grip-2));
|
||
box-shadow: inset 0 0 0 .5px var(--overlay-4), 0 1px 2px color-mix(in srgb, var(--shadow-ink) 47.1%, transparent); }
|
||
.sw-icon svg { display: block; }
|
||
.sw-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
opacity: 0; transition: opacity .16s ease; }
|
||
.sw-side:hover .sw-item-label, .sw-side:focus-within .sw-item-label { opacity: 1; }
|
||
|
||
.sw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 52px; }
|
||
.sw-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px 11px;
|
||
border-bottom: 1px solid var(--line); background: linear-gradient(var(--surface-pop), var(--surface-pop-2)); }
|
||
.sw-head-text { flex: 1; min-width: 0; }
|
||
.sw-head-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
|
||
.sw-head-sub { margin-top: 1px; font-size: 11px; color: var(--muted); overflow: hidden;
|
||
text-overflow: ellipsis; white-space: nowrap; }
|
||
.sw-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
|
||
.sw-close { flex: 0 0 auto; }
|
||
.sw-body { flex: 1; overflow: auto; padding: 16px 18px 24px; }
|
||
|
||
/* grouped macOS-style rows (Refinement & Taste, Updates & ComfyUI) */
|
||
.sw-stack { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
|
||
.sw-hint { font-size: 11px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
|
||
.sw-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
|
||
color: var(--faint); }
|
||
.sw-textarea { width: 100%; box-sizing: border-box; font-family: var(--font-mono, monospace);
|
||
font-size: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
|
||
background: var(--ink-2); color: var(--text); resize: vertical; }
|
||
.sw-check-label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
|
||
.sw-check-label > input[type="checkbox"] { flex: 0 0 auto; min-height: 0; margin-top: 2px; }
|
||
|
||
/* block-repeat sweep gallery: real viewing size, not a media-bin thumbnail strip */
|
||
.sw-sweep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: 12px; margin-top: 10px; }
|
||
.sw-sweep-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
|
||
background: var(--ink-0); }
|
||
.sw-sweep-card video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink-void);
|
||
display: block; }
|
||
.sw-sweep-fail { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
|
||
color: var(--faint); font-size: 12px; }
|
||
.sw-sweep-card .media-name { padding: 6px 8px 0; font-size: 11px; word-break: break-all; }
|
||
.sw-sweep-seed { padding: 0 8px; font-size: 10px; }
|
||
.sw-sweep-save { margin: 6px 8px 4px; width: calc(100% - 16px); }
|
||
.sw-sweep-rate { display: flex; gap: 6px; margin: 0 8px 8px; }
|
||
.sw-sweep-rate > button { flex: 1; min-width: 0; }
|
||
.sw-sweep-rate-note { margin: 0 8px 8px; }
|
||
.sw-rows-label { margin: 16px 4px 5px; font-size: 10px; font-weight: 700; letter-spacing: .6px;
|
||
text-transform: uppercase; color: var(--faint); }
|
||
.sw-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px;
|
||
background: var(--ink-2); overflow: hidden; }
|
||
.sw-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); }
|
||
.sw-row:first-child { border-top: none; }
|
||
.sw-row-main { flex: 1; min-width: 0; }
|
||
.sw-row-title { font-size: 13px; color: var(--text); }
|
||
.sw-row-hint { margin-top: 1px; font-size: 11px; line-height: 1.4; color: var(--muted); }
|
||
.sw-row-value { flex: 0 0 auto; max-width: 45%; font-family: var(--font-ui); font-size: 11px;
|
||
color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sw-row .btn { flex: 0 0 auto; }
|
||
.sw-led { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
|
||
.sw-led.ok { background: var(--good); box-shadow: 0 0 6px var(--good); }
|
||
.sw-led.bad { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
|
||
|
||
/* About FunPack ("About This Mac" style) */
|
||
.sw-about { display: flex; flex-direction: column; align-items: center; text-align: center;
|
||
padding: 34px 20px 10px; gap: 2px; }
|
||
.sw-about-mark { font-size: 56px; line-height: 1; color: var(--accent);
|
||
text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); margin-bottom: 10px; }
|
||
.sw-about-name { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
|
||
.sw-about-codename { font-family: var(--font-display); font-size: 13px; font-style: italic;
|
||
color: var(--accent); letter-spacing: .01em; margin-top: 2px; }
|
||
.sw-about-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
|
||
/* Two-column grid rather than centred rows: values now run from short ("3.14") to long
|
||
("NVIDIA RTX PRO 6000 Blackwell · 95.5 GB · sm_120"), and only a shared column keeps
|
||
the keys aligned. `display: contents` lets each fact's two spans land in that grid. */
|
||
.sw-about-facts { display: inline-grid; grid-template-columns: auto auto; gap: 4px 14px;
|
||
align-items: baseline; margin-bottom: 14px; font-size: 12px; }
|
||
.sw-about-fact { display: contents; }
|
||
.sw-about-k { color: var(--faint); text-align: right; white-space: nowrap; }
|
||
.sw-about-v { color: var(--text); font-variant-numeric: tabular-nums; text-align: left;
|
||
max-width: 320px; overflow-wrap: anywhere; }
|
||
.sw-about-group { grid-column: 1 / -1; margin-top: 12px; padding-bottom: 3px;
|
||
border-bottom: 1px solid var(--line);
|
||
font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
|
||
color: var(--faint); text-align: left; }
|
||
.sw-about-hint { max-width: 340px; margin: 0 0 16px; font-size: 11px; color: var(--faint);
|
||
line-height: 1.45; text-wrap: balance; }
|
||
.sw-about-copy { margin-top: 22px; font-size: 11px; color: var(--faint); }
|
||
|
||
/* ── Models & Pipeline: inner sidebar layout inside the Settings window ── */
|
||
.sw-body.sw-flush { padding: 0; overflow: hidden; display: flex; }
|
||
.models-mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }
|
||
.models-loading { padding: 16px 18px; }
|
||
.models-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
|
||
.models-cols { flex: 1; min-height: 0; display: flex; }
|
||
.models-side { width: 216px; flex: 0 0 auto; overflow: auto; padding: 10px 8px;
|
||
border-right: 1px solid var(--line); background: var(--surface-deep-6);
|
||
display: flex; flex-direction: column; gap: 2px; }
|
||
.models-pane { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px 24px; }
|
||
|
||
.mn-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px;
|
||
cursor: pointer; user-select: none; min-height: 30px; }
|
||
.mn-item:hover { background: var(--ink-3); }
|
||
.mn-item.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
|
||
.mn-ico { flex: 0 0 18px; text-align: center; font-size: 12px; }
|
||
.mn-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin: 0 5px; }
|
||
.mn-dot.ok { background: var(--good); }
|
||
.mn-dot.warn { background: var(--accent); }
|
||
.mn-dot.bad { background: var(--danger); box-shadow: 0 0 5px var(--danger); }
|
||
.mn-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||
.mn-name { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.mn-sub { font-size: 10px; color: var(--faint); font-family: var(--font-ui);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.mn-badge { flex: 0 0 auto; font-size: 10px; color: var(--muted); background: var(--ink-3);
|
||
border-radius: 8px; padding: 1px 6px; }
|
||
.mn-pencil { flex: 0 0 auto; border: none; background: transparent; color: var(--faint);
|
||
font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 5px; visibility: hidden; }
|
||
.mn-item:hover .mn-pencil { visibility: visible; }
|
||
.mn-pencil:hover { background: var(--ink-3); color: var(--accent-hi); }
|
||
.mn-sep { height: 1px; background: var(--line); margin: 8px 4px; flex: 0 0 auto; }
|
||
.mn-new { display: block; width: 100%; text-align: left; padding: 6px 8px; margin-bottom: 4px;
|
||
border: 1px dashed var(--line); border-radius: 7px; background: transparent;
|
||
color: var(--muted); font: 12.5px var(--font-ui); cursor: pointer; }
|
||
.mn-new:hover { border-color: var(--accent); color: var(--accent-hi); }
|
||
.mn-empty { padding: 8px; font-size: 11px; color: var(--faint); }
|
||
|
||
/* role dropdown under "+ New node" */
|
||
.mn-role-pop { position: fixed; z-index: 700; min-width: 220px; max-height: 60vh; overflow: auto;
|
||
background: var(--surface-raised-8); border: 1px solid var(--line); border-radius: 10px;
|
||
box-shadow: 0 14px 40px color-mix(in srgb, var(--shadow-ink) 70.6%, transparent); padding: 6px; animation: pop .12s ease; }
|
||
.mn-role-cat { padding: 6px 8px 2px; font-size: 10px; font-weight: 700; letter-spacing: .6px;
|
||
text-transform: uppercase; color: var(--faint); }
|
||
.mn-role-item { padding: 5px 8px; border-radius: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
|
||
.mn-role-item:hover { background: var(--accent-soft); }
|
||
|
||
/* link-mode bar (persistent while picking inputs across node pages) */
|
||
.models-linkbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
|
||
padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
|
||
.models-linkbar-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--text);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
/* Setup-node modal */
|
||
.ns-modal { width: min(640px, 94vw); }
|
||
.ns-content { display: flex; flex-direction: column; gap: 10px; }
|
||
.ns-search { width: 100%; padding: 7px 10px; font: 13px var(--font-ui); color: var(--text);
|
||
background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; outline: none; }
|
||
.ns-search:focus { border-color: var(--accent); }
|
||
.ns-list { max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: 8px;
|
||
background: var(--ink-1); flex: 0 0 auto; }
|
||
.ns-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; cursor: pointer;
|
||
border-top: 1px solid var(--line-2); }
|
||
.ns-row:first-child { border-top: none; }
|
||
.ns-row:hover { background: var(--ink-3); }
|
||
.ns-row.active { background: var(--accent-soft); }
|
||
.ns-row-name { font-size: 12px; color: var(--text); }
|
||
.ns-row-class { font-size: 10px; color: var(--faint); font-family: var(--font-ui);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.ns-row-selected { cursor: default; }
|
||
.ns-row-selected .ns-row-class { flex: 1; }
|
||
.ns-change { margin-left: auto; flex: 0 0 auto; }
|
||
.ns-empty { padding: 10px 12px; font-size: 12px; color: var(--faint); }
|
||
.ns-detail { display: flex; flex-direction: column; gap: 10px; }
|
||
.ns-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
|
||
|
||
/* node page header sits flush at the pane top */
|
||
.node-page { margin-top: 0; }
|
||
|
||
/* ── Engine section: category sidebar + macOS row fields ── */
|
||
.mn-group { margin: 10px 6px 3px; font-size: 10px; font-weight: 700; letter-spacing: .8px;
|
||
text-transform: uppercase; color: var(--faint); white-space: nowrap; flex: 0 0 auto; }
|
||
.eng-pane .sw-rows { margin-bottom: 4px; }
|
||
.eng-field > input, .eng-field > select { width: auto; min-width: 0; flex: 0 0 auto; }
|
||
.eng-field > input[type="number"] { width: 92px; font-family: var(--font-ui); }
|
||
.eng-field > input[type="text"] { width: min(46%, 240px); }
|
||
.eng-field > select { max-width: 52%; }
|
||
.eng-field > input[type="checkbox"] { width: auto; accent-color: var(--accent); transform: scale(1.15); }
|
||
.eng-field.eng-stack { flex-direction: column; align-items: stretch; gap: 8px; }
|
||
.eng-field.eng-stack > .sw-row-main { width: 100%; }
|
||
.eng-empty-row { font-size: 12px; color: var(--faint); }
|
||
/* one-line hint by default; the long explanation waits behind this link */
|
||
.eng-more { margin-top: 3px; padding: 0; border: 0; background: none; cursor: pointer;
|
||
font: inherit; font-size: 11px; color: var(--faint); text-decoration: underline dotted; }
|
||
.eng-more:hover { color: var(--accent); }
|
||
.eng-detail { margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--line);
|
||
color: var(--faint); max-width: 62ch; }
|
||
.eng-add { align-self: flex-start; margin-top: 2px; }
|
||
.eng-pane .studio-adjust-row { gap: 8px; }
|
||
.eng-pane .studio-adjust-row input[type="text"] { min-width: 0; }
|
||
.eng-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
|
||
.eng-pane .engine-preset-bar { margin-bottom: 10px; }
|
||
.eng-sampler-panel { margin-top: 4px; }
|
||
|
||
/* ── theme picker (Settings ▸ Appearance, and the wizard's theme step) ─────
|
||
Each card advertises a palette, so its swatch is painted from LITERAL colours
|
||
of that palette — using tokens would make every card look like the theme you
|
||
are already in. */
|
||
.theme-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||
.theme-card {
|
||
display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: left;
|
||
padding: 12px; border-radius: 12px; border: 1px solid var(--line);
|
||
background: var(--ink-1); cursor: pointer;
|
||
transition: border-color .12s, box-shadow .12s, transform .08s;
|
||
}
|
||
.theme-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }
|
||
.theme-card.active {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 1px var(--accent), 0 8px 22px -14px var(--shadow-ink);
|
||
}
|
||
.theme-card-title { font-weight: 600; font-size: 13px; color: var(--text); }
|
||
.theme-card-hint { font-size: 11px; color: var(--faint); line-height: 1.4; margin-top: 2px; }
|
||
|
||
.theme-swatch {
|
||
position: relative; height: 62px; border-radius: 8px; overflow: hidden;
|
||
border: 1px solid var(--line-2); display: block;
|
||
}
|
||
.theme-swatch-bar { position: absolute; inset: 0 0 auto 0; height: 14px; display: block; }
|
||
.theme-swatch-panel { position: absolute; left: 8px; right: 8px; top: 24px; height: 26px; border-radius: 4px; display: block; }
|
||
.theme-swatch-accent { position: absolute; left: 8px; bottom: 8px; width: 26px; height: 6px; border-radius: 3px; display: block; }
|
||
|
||
.theme-swatch-dark { background: #0c0b09; }
|
||
.theme-swatch-dark .theme-swatch-bar { background: #16140f; }
|
||
.theme-swatch-dark .theme-swatch-panel { background: #1a1814; }
|
||
.theme-swatch-dark .theme-swatch-accent { background: #f3a93c; }
|
||
|
||
.theme-swatch-light { background: #f5f7fa; }
|
||
.theme-swatch-light .theme-swatch-bar { background: #f8fafc; }
|
||
.theme-swatch-light .theme-swatch-panel { background: #eef1f6; }
|
||
.theme-swatch-light .theme-swatch-accent { background: #2f7fd4; }
|
||
|
||
/* Auto shows both halves — it is not a third palette, it is "whichever the OS says". */
|
||
.theme-swatch-auto { background: linear-gradient(105deg, #f5f7fa 0 50%, #0c0b09 50% 100%); }
|
||
.theme-swatch-auto .theme-swatch-bar { background: linear-gradient(105deg, #f8fafc 0 50%, #16140f 50% 100%); }
|
||
.theme-swatch-auto .theme-swatch-panel { background: linear-gradient(105deg, #eef1f6 0 50%, #1a1814 50% 100%); }
|
||
.theme-swatch-auto .theme-swatch-accent { background: linear-gradient(90deg, #2f7fd4, #f3a93c); }
|
||
|
||
@media (max-width: 620px) { .theme-cards { grid-template-columns: 1fr; } }
|
||
|
||
/* The film grain is a dark-theme effect: `overlay` blending over a light surface
|
||
reads as dirt, not as film stock. */
|
||
:root[data-theme="light"] .grain { opacity: .015; mix-blend-mode: multiply; }
|
||
|
||
/* ── maintenance row (Update / Switch branch / Restart) ───────────────────
|
||
On every splash screen, because these are the actions you need BEFORE
|
||
opening a project. */
|
||
.maint-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
||
.maint-row.welcome-maint { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
|
||
.maint-btn {
|
||
display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
|
||
padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
|
||
background: transparent; color: var(--text); cursor: pointer; opacity: .88;
|
||
transition: border-color .12s, background .12s, opacity .12s;
|
||
}
|
||
.maint-btn:hover { opacity: 1; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--ink-2); }
|
||
.maint-btn.disabled { opacity: .4; pointer-events: none; }
|
||
.maint-btn-label { font-weight: 600; font-size: 13px; }
|
||
.maint-btn-hint { font-size: 11px; color: var(--faint); line-height: 1.35; }
|
||
@media (max-width: 620px) { .maint-row { grid-template-columns: 1fr; } }
|
||
|
||
/* ════════════════════════════════════════════════════════════════════════
|
||
ONBOARDING WIZARD — macOS Setup Assistant shape
|
||
Full screen, no chrome. One centred column per step: glyph, headline,
|
||
short paragraph, controls, and an action bar pinned to the bottom so the
|
||
primary button never moves between steps.
|
||
|
||
Type follows Apple's macOS text styles (HIG "Specifications"): Body 13/16,
|
||
Callout 12/15, Title 3 15/20, Title 1 22/26, Large Title 26/32 — with a
|
||
display scale above them, because Setup Assistant is a full-screen context
|
||
and not an inspector.
|
||
════════════════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
--font-system: var(--font-ui);
|
||
--oo-col: 560px; /* the centred content column */
|
||
--oo-col-wide: 760px; /* steps that hold cards or lists */
|
||
}
|
||
|
||
.oo-root {
|
||
/* Below .modal-overlay (500) and .fw (4000) on purpose: Models, Settings and the
|
||
Composer open OVER the wizard the same way they open over the editor, and closing
|
||
one puts you back on the step you left. Above the menubar (200/300) so the editor
|
||
chrome behind stays covered. */
|
||
position: fixed; inset: 0; z-index: 400;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 72px 32px;
|
||
background:
|
||
radial-gradient(1100px 700px at 50% -15%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%),
|
||
var(--ink-0);
|
||
font-family: var(--font-system);
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Back is a chevron in the top-left corner, the way the Setup Assistant does it —
|
||
never a button in the action bar, where it would compete with Continue. */
|
||
.oo-back {
|
||
position: absolute; top: 22px; left: 26px; z-index: 2;
|
||
width: 32px; height: 32px; padding: 0 0 3px;
|
||
border: 0; border-radius: 50%; background: transparent;
|
||
color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer;
|
||
transition: background .12s, color .12s;
|
||
}
|
||
.oo-back:hover { background: var(--ink-2); color: var(--text); }
|
||
.oo-back[hidden] { display: none; }
|
||
.oo-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--muted, #8a8f9a); font-size: 15px; cursor: pointer; z-index: 3; }
|
||
.oo-close:hover { background: var(--ink-2); color: var(--text); }
|
||
|
||
/* Only steps that carry an action bar reserve room for it; the splash has none. */
|
||
.oo-root.oo-has-actions { padding-bottom: 140px; }
|
||
.oo-stage { width: 100%; display: flex; justify-content: center; }
|
||
.oo-stage.oo-in .oo-step, .oo-stage.oo-in .oo-splash { animation: oo-rise .34s cubic-bezier(.22,.61,.36,1) both; }
|
||
@keyframes oo-rise { from { opacity: 0; transform: translateY(10px); } }
|
||
|
||
.oo-step {
|
||
width: 100%; max-width: var(--oo-col);
|
||
display: flex; flex-direction: column; align-items: center; text-align: center;
|
||
}
|
||
.oo-step-wide { max-width: var(--oo-col-wide); }
|
||
|
||
/* ── head: glyph, headline, one short paragraph ─────────────────────────── */
|
||
.oo-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 34px; }
|
||
.oo-glyph { width: 76px; height: 76px; color: var(--accent); margin-bottom: 22px; }
|
||
.oo-title {
|
||
margin: 0; font-size: 34px; line-height: 40px; font-weight: 700;
|
||
letter-spacing: -.4px; color: var(--text);
|
||
}
|
||
.oo-sub {
|
||
margin: 12px 0 0; max-width: 46ch;
|
||
font-size: 15px; line-height: 21px; color: var(--muted);
|
||
}
|
||
.oo-body { margin: 0 0 18px; font-size: 13px; line-height: 16px; color: var(--muted); }
|
||
|
||
/* ── action bar, pinned ─────────────────────────────────────────────────── */
|
||
.oo-actions {
|
||
position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
|
||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||
padding: 22px 32px 30px;
|
||
background: linear-gradient(to top, var(--ink-0) 62%, transparent);
|
||
pointer-events: none;
|
||
}
|
||
.oo-actions > * { pointer-events: auto; }
|
||
|
||
.oo-btn {
|
||
font-family: var(--font-system); font-size: 13px; line-height: 16px; font-weight: 500;
|
||
border-radius: 8px; border: 1px solid transparent; cursor: pointer;
|
||
padding: 8px 18px; background: transparent; color: var(--text);
|
||
transition: background .12s, border-color .12s, opacity .12s, transform .06s;
|
||
}
|
||
.oo-btn:active:not(.disabled) { transform: scale(.985); }
|
||
.oo-btn-primary {
|
||
min-width: 220px; padding: 11px 26px;
|
||
font-size: 13px; font-weight: 600;
|
||
background: var(--accent); border-color: var(--accent); color: var(--on-accent);
|
||
box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 30%, transparent);
|
||
}
|
||
.oo-btn-primary:hover:not(.disabled) { background: var(--accent-hi); border-color: var(--accent-hi); }
|
||
.oo-btn-primary.disabled { opacity: .38; cursor: default; }
|
||
.oo-btn-hero { min-width: 260px; padding: 13px 30px; font-size: 15px; margin-top: 8px; }
|
||
.oo-btn-quiet { color: var(--accent); background: transparent; }
|
||
.oo-btn-quiet:hover { background: var(--accent-soft); }
|
||
.oo-btn-small { padding: 5px 13px; border-color: var(--line); background: var(--ink-1); }
|
||
.oo-btn-small:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
|
||
|
||
.oo-busy { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
|
||
.oo-spinner {
|
||
width: 15px; height: 15px; border-radius: 50%; flex: none;
|
||
border: 2px solid var(--line); border-top-color: var(--accent);
|
||
animation: oo-spin .8s linear infinite;
|
||
}
|
||
@keyframes oo-spin { to { transform: rotate(360deg); } }
|
||
.oo-error { font-size: 13px; line-height: 17px; color: var(--danger); max-width: 46ch; text-align: center; }
|
||
|
||
/* ── splash ─────────────────────────────────────────────────────────────── */
|
||
.oo-splash {
|
||
width: 100%; max-width: 620px;
|
||
display: flex; flex-direction: column; align-items: center; text-align: center;
|
||
}
|
||
.oo-splash-mark {
|
||
font-size: 34px; color: var(--accent); margin-bottom: 26px;
|
||
filter: drop-shadow(0 0 22px var(--accent-soft));
|
||
}
|
||
.oo-splash-title {
|
||
margin: 0; font-size: 56px; line-height: 62px; font-weight: 700;
|
||
letter-spacing: -1.4px; color: var(--text);
|
||
}
|
||
.oo-splash-lead { margin: 14px 0 40px; font-size: 17px; line-height: 22px; color: var(--muted); }
|
||
.oo-splash .oo-btn-quiet { margin-top: 4px; }
|
||
.oo-maint { margin-top: 48px; width: 100%; max-width: var(--oo-col-wide); }
|
||
|
||
/* ── fields ─────────────────────────────────────────────────────────────── */
|
||
.oo-field { width: 100%; max-width: 420px; text-align: left; margin-bottom: 30px; }
|
||
.oo-label {
|
||
display: block; margin-bottom: 6px;
|
||
font-size: 12px; line-height: 15px; font-weight: 500; color: var(--muted);
|
||
}
|
||
.oo-input {
|
||
width: 100%; padding: 9px 12px;
|
||
font-family: var(--font-system); font-size: 13px; line-height: 18px; color: var(--text);
|
||
background: var(--ink-1); border: 1px solid var(--line); border-radius: 8px;
|
||
}
|
||
.oo-input:focus {
|
||
outline: none; border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||
}
|
||
|
||
/* ── choice cards ───────────────────────────────────────────────────────── */
|
||
.oo-cards {
|
||
width: 100%; display: grid; gap: 12px; margin-bottom: 8px;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
}
|
||
.oo-cards-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
|
||
.oo-card {
|
||
display: flex; flex-direction: column; gap: 6px; text-align: left;
|
||
padding: 16px 17px; border-radius: 12px;
|
||
border: 1px solid var(--line); background: var(--ink-1);
|
||
font-family: var(--font-system); cursor: pointer;
|
||
transition: border-color .12s, box-shadow .12s, transform .08s, background .12s;
|
||
}
|
||
.oo-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
|
||
.oo-card.active {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -18px var(--shadow-ink);
|
||
background: color-mix(in srgb, var(--accent) 5%, var(--ink-1));
|
||
}
|
||
.oo-card-title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text); }
|
||
.oo-card-note {
|
||
margin-left: 8px; padding: 1px 7px; border-radius: 20px; vertical-align: 2px;
|
||
font-size: 10px; line-height: 15px; font-weight: 500;
|
||
color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent);
|
||
}
|
||
.oo-card-sub { font-size: 12px; line-height: 16px; color: var(--muted); }
|
||
|
||
.oo-theme-cards { width: 100%; margin-bottom: 8px; }
|
||
|
||
/* ── panels and lists ───────────────────────────────────────────────────── */
|
||
.oo-panel {
|
||
width: 100%; text-align: left; padding: 18px 20px; margin-bottom: 8px;
|
||
border: 1px solid var(--line); border-radius: 12px; background: var(--ink-1);
|
||
}
|
||
.oo-note { margin: 0 0 12px; font-size: 13px; line-height: 18px; color: var(--text); }
|
||
.oo-link { font-size: 12px; line-height: 16px; color: var(--accent); }
|
||
.oo-list-label {
|
||
margin: 16px 0 7px; font-size: 11px; line-height: 14px; font-weight: 600;
|
||
letter-spacing: .4px; text-transform: uppercase; color: var(--faint);
|
||
}
|
||
.oo-panel > .oo-list-label:first-child { margin-top: 0; }
|
||
.oo-list { margin: 0; padding-left: 18px; }
|
||
.oo-list li { font-size: 13px; line-height: 18px; color: var(--text); margin-bottom: 5px; }
|
||
.oo-list-sub { display: block; font-size: 11px; line-height: 15px; color: var(--faint); font-family: var(--font-ui); }
|
||
|
||
.oo-rows { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
|
||
.oo-row {
|
||
display: flex; align-items: center; gap: 16px; text-align: left;
|
||
padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-1);
|
||
}
|
||
.oo-row-main { flex: 1; min-width: 0; }
|
||
.oo-row-title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text); }
|
||
.oo-row-sub { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
|
||
|
||
/* ── hosted panes ─────────────────────────────────────────────────────────
|
||
Models, links, shortcuts and prompt splits, shown as a screen OF the wizard
|
||
rather than as a window over it. Wider and taller than a step, left-aligned,
|
||
and scrolling inside its own body so the action bar stays put. */
|
||
.oo-root.oo-pane-mode { align-items: stretch; padding: 60px 28px 104px; overflow: hidden; }
|
||
.oo-root.oo-pane-mode .oo-stage { align-items: stretch; min-height: 0; }
|
||
.oo-pane {
|
||
display: flex; flex-direction: column; min-height: 0; width: 100%;
|
||
max-width: 1040px; margin: 0 auto; text-align: left;
|
||
}
|
||
.oo-pane-head {
|
||
display: flex; align-items: flex-start; gap: 16px;
|
||
padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
|
||
}
|
||
.oo-pane-head-text { flex: 1; min-width: 0; }
|
||
.oo-pane-title { margin: 0; font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -.3px; color: var(--text); }
|
||
.oo-pane-sub { margin: 4px 0 0; font-size: 13px; line-height: 17px; color: var(--muted); }
|
||
.oo-pane-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-top: 4px; }
|
||
/* The mounted section brings its own scrolling in some cases (Models) and not in
|
||
others (Shortcuts, Splits), so the host scrolls and the section may too. */
|
||
.oo-pane-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
|
||
.oo-pane-body > * { min-height: 0; }
|
||
|
||
.oo-projects {
|
||
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||
gap: var(--sp-2); padding: var(--sp-3) 0; align-content: start;
|
||
}
|
||
.oo-project {
|
||
display: flex; align-items: center; gap: var(--sp-3); text-align: left;
|
||
padding: var(--sp-3); border: 1px solid var(--line); border-radius: 10px;
|
||
background: var(--ink-1); color: var(--text); font-family: inherit; cursor: pointer;
|
||
transition: border-color .12s, background .12s;
|
||
}
|
||
.oo-project:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--ink-2); }
|
||
.oo-project-main { min-width: 0; }
|
||
.oo-project-name {
|
||
font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.oo-project-meta { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--faint); margin-top: 2px; }
|
||
|
||
@media (max-width: 700px) {
|
||
.oo-root { padding: 60px 20px 128px; }
|
||
.oo-splash-title { font-size: 40px; line-height: 46px; letter-spacing: -.8px; }
|
||
.oo-title { font-size: 27px; line-height: 33px; }
|
||
.oo-cards { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ── Models: the node shelf ───────────────────────────────────────────────
|
||
A grid of node cards; clicking one opens that node's editor. Leading card
|
||
is "+ New node", so adding lives where the nodes are rather than in a
|
||
sidebar you have to know about. */
|
||
.node-grid {
|
||
display: grid; gap: var(--sp-3); margin: var(--sp-1) 0 var(--sp-6);
|
||
/* 1fr so the row has no dead strip at its right edge. Safe here only because the art
|
||
below is a fixed height — with aspect-ratio, a wide column also made a tall one. */
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
}
|
||
.node-card {
|
||
display: block; padding: 0;
|
||
background: transparent; border: 0; cursor: pointer; text-align: left;
|
||
font-family: inherit; color: var(--text);
|
||
}
|
||
.node-card-art {
|
||
position: relative; height: 116px; border-radius: 10px; overflow: hidden;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(160deg, var(--ink-3), var(--ink-1));
|
||
border: 1px solid var(--line);
|
||
transition: border-color .12s, box-shadow .12s, transform .1s;
|
||
}
|
||
.node-card:hover .node-card-art {
|
||
transform: translateY(-2px);
|
||
border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
|
||
box-shadow: 0 12px 26px -16px var(--shadow-ink);
|
||
}
|
||
.node-card.warn .node-card-art { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
|
||
.node-card.bad .node-card-art { border-color: color-mix(in srgb, var(--danger) 60%, var(--line)); }
|
||
|
||
.node-card-mark {
|
||
font-family: var(--font-ui); font-size: 10px; line-height: 1.35; font-weight: 500;
|
||
color: var(--muted); text-align: center; padding: 6px 9px 42px;
|
||
overflow-wrap: anywhere; hyphens: auto;
|
||
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
||
}
|
||
.node-card:hover .node-card-mark { color: var(--text); }
|
||
/* FunPack's own nodes: an icon and a plain name where a third-party node shows its class.
|
||
The accent tint is the whole point — these read as the built-in, already-wired pieces. */
|
||
.node-card-builtin {
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
gap: 6px; padding: 4px 9px 42px; text-align: center;
|
||
}
|
||
.node-card-icon { font-size: 30px; line-height: 1; }
|
||
.node-card-kind {
|
||
font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.node-card.built-in .node-card-art {
|
||
background: linear-gradient(160deg,
|
||
color-mix(in srgb, var(--accent) 14%, var(--ink-3)), var(--ink-1));
|
||
border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
|
||
}
|
||
.node-card.built-in:hover .node-card-art { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); }
|
||
.slot-node.built-in { color: var(--text); font-family: inherit; font-weight: 600; }
|
||
.node-card-plus { font-size: 40px; line-height: 1; color: var(--accent); font-weight: 300; }
|
||
.node-card-add .node-card-art {
|
||
border-style: dashed;
|
||
background: color-mix(in srgb, var(--accent) 6%, var(--ink-1));
|
||
}
|
||
|
||
.node-card-flags {
|
||
position: absolute; left: 6px; right: 6px; top: 6px;
|
||
display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
|
||
}
|
||
.node-flag {
|
||
font-family: var(--font-ui); font-size: 9px; letter-spacing: .3px;
|
||
padding: 2px 6px; border-radius: 20px;
|
||
/* Not --scrim-media: the card art is light in the light theme, so a dark chip with
|
||
dark text vanished. This tracks the surface instead. */
|
||
background: color-mix(in srgb, var(--ink-0) 84%, transparent);
|
||
color: var(--muted); border: 1px solid var(--line);
|
||
}
|
||
.node-flag.warn { color: var(--accent-hi); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
|
||
.node-flag.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
|
||
.node-flag.exposed { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
|
||
|
||
/* The caption sits ON the tile, over a scrim, so a card reads as one object. */
|
||
.node-card-meta {
|
||
position: absolute; left: 0; right: 0; bottom: 0; min-width: 0;
|
||
padding: 14px 9px 7px;
|
||
background: linear-gradient(to top,
|
||
var(--ink-1) 0%,
|
||
color-mix(in srgb, var(--ink-1) 88%, transparent) 62%,
|
||
transparent 100%);
|
||
}
|
||
.node-card-title {
|
||
font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
|
||
/* ── node editor footer: nothing is saved until Save ──────────────────────── */
|
||
.node-back { font-size: 20px; line-height: 1; padding: 0 6px 3px; }
|
||
.node-foot {
|
||
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
|
||
margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
|
||
position: sticky; bottom: 0; background: var(--ink-1);
|
||
}
|
||
.node-foot-hint { flex: 1; min-width: 160px; font-size: 11px; color: var(--faint); }
|
||
.node-foot-acts { display: flex; gap: 8px; }
|
||
.node-foot .btn.primary.disabled, .node-foot .btn.primary:disabled { opacity: .4; cursor: default; }
|
||
|
||
/* Where a node feeds, on the card itself — the shelf should show how the pipeline is
|
||
put together, not just what is in it. */
|
||
.node-card-flow {
|
||
display: flex; align-items: baseline; gap: 5px; margin-top: 1px;
|
||
font-size: 10px; line-height: 1.35; color: var(--teal);
|
||
}
|
||
.node-card-flow > span:first-child {
|
||
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.node-card-flow.none { color: var(--faint); }
|
||
.node-card-more { flex: none; color: var(--faint); }
|
||
|
||
|
||
/* ── Simple mode: one prompt, one Generate, panels on demand ──────────────
|
||
Assets and Properties are not rebuilt for this mode — the same zones slide in
|
||
over the preview when asked for, and are off-canvas otherwise. */
|
||
:root[data-ui-mode="simple"] #media-zone,
|
||
:root[data-ui-mode="simple"] #inspector-zone {
|
||
position: absolute; top: 0; bottom: 0; z-index: 60;
|
||
width: min(340px, 82vw);
|
||
box-shadow: 0 0 40px -8px var(--shadow-ink);
|
||
transition: transform .18s cubic-bezier(.22,.61,.36,1);
|
||
}
|
||
:root[data-ui-mode="simple"] #media-zone { left: 0; transform: translateX(-101%); }
|
||
:root[data-ui-mode="simple"] #inspector-zone { right: 0; transform: translateX(101%); }
|
||
:root[data-ui-mode="simple"] .workspace.show-assets #media-zone,
|
||
:root[data-ui-mode="simple"] .workspace.show-props #inspector-zone { transform: none; }
|
||
/* Simple mode hides the inspector's folds so the pinned column stays uncluttered — but the
|
||
slide-over IS that inspector, opened from a button named "Advanced settings". With the
|
||
folds still hidden it opened onto the handful of rows that are not in one, which reads as
|
||
the button having done nothing. Asking for the panel is asking for what is in it. */
|
||
:root[data-ui-mode="simple"] .workspace.show-props #inspector-zone .insp-fold {
|
||
display: block !important;
|
||
}
|
||
:root[data-ui-mode="simple"] .main-row { position: relative; }
|
||
|
||
.simple-bar {
|
||
flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-2);
|
||
padding: var(--sp-3); border-top: 1px solid var(--line); background: var(--ink-1);
|
||
}
|
||
.simple-bar[hidden] { display: none; }
|
||
.simple-prompt {
|
||
width: 100%; resize: vertical; min-height: 76px;
|
||
font-size: var(--fs-title-3); line-height: 22px;
|
||
}
|
||
.simple-bar-row { display: flex; gap: var(--sp-2); justify-content: flex-end; }
|
||
|
||
/* The close lives in the zone head and only exists while the zone is a slide-over. */
|
||
.panel-close { margin-left: auto; }
|
||
:root:not([data-ui-mode="simple"]) .panel-close { display: none; }
|
||
|
||
/* ── Settings ▸ Custom Nodes ────────────────────────────────────────────── */
|
||
.cn-mount { display: flex; flex-direction: column; gap: var(--sp-3); }
|
||
.cn-bar { display: flex; align-items: center; gap: var(--sp-2); }
|
||
.cn-busy { font-size: 11px; color: var(--muted); }
|
||
.cn-lead { font-size: 13px; color: var(--text); margin-bottom: 6px; }
|
||
.cn-hint { font-size: 11px; color: var(--faint); line-height: 1.45; margin-top: 6px;
|
||
overflow-wrap: anywhere; }
|
||
.cn-modal { max-width: 460px; }
|
||
.cn-list { display: flex; flex-direction: column; gap: 4px; }
|
||
.cn-row {
|
||
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
|
||
padding: 8px 10px; border-radius: 8px;
|
||
background: var(--ink-2); border: 1px solid var(--line);
|
||
}
|
||
.cn-row.self { background: color-mix(in srgb, var(--accent) 10%, var(--ink-2));
|
||
border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
|
||
/* Behind origin — the one row state worth spotting without reading. */
|
||
.cn-row.behind { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
|
||
.cn-row-text { min-width: 0; }
|
||
.cn-name { font-size: 12px; font-weight: 600; color: var(--text);
|
||
overflow-wrap: anywhere; }
|
||
.cn-sub { font-size: 10px; color: var(--faint); font-family: var(--font-ui);
|
||
margin-top: 2px; overflow-wrap: anywhere; }
|
||
.cn-row-acts { display: flex; gap: 4px; flex-shrink: 0; }
|
||
.cn-restart {
|
||
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
|
||
padding: 8px 10px; border-radius: 8px; font-size: 11px; line-height: 1.45;
|
||
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
|
||
}
|
||
|
||
/* Export-settings card modal. The image is the content, so the box is sized to it and the
|
||
picture scrolls rather than being squeezed — a card you cannot read is not a preview. */
|
||
.sc-modal { width: min(1140px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
|
||
.sc-content { flex: 1; min-height: 0; overflow: auto; background: var(--ink-0); }
|
||
.sc-img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
|
||
.sc-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px;
|
||
border-top: 1px solid var(--line); background: var(--surface-deep-2); }
|
||
.sc-status { flex: 1; font-size: 11px; color: var(--muted); }
|
||
|
||
/* Monospace is gone from the interface. The one thing it was genuinely earning was
|
||
digits that do not jitter — a timecode or a countdown re-laying itself out every frame
|
||
is the reason readouts used a mono stack at all. Inter carries tabular figures, so the
|
||
alignment survives without the typewriter. Nothing here changes the FONT, only the
|
||
figure set. */
|
||
.tl-tc, .pm-tc, .tl-tick-label,
|
||
.clip-no, .clip-dur, .clip-rated,
|
||
.gen-readout, .log-freeze-indicator,
|
||
.sp-macro-val, .ov-range-val, .pin-slot-pos,
|
||
.zone-head-right, .project-row .pj-meta,
|
||
input[type=number] { font-variant-numeric: tabular-nums; }
|
||
|
||
/* Composer > Enhance / Chat */
|
||
.enh-bin { display: flex; flex-direction: column; gap: 8px; }
|
||
.enh-shortcuts { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow: auto; }
|
||
.enh-chat { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
|
||
.enh-bubble { padding: 6px 9px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; max-width: 90%; }
|
||
.enh-model { align-self: flex-start; background: rgba(255,255,255,0.05); }
|
||
.enh-last { border: 1px dashed rgba(255,255,255,0.25); background: transparent; }
|
||
.enh-user { align-self: flex-end; background: rgba(106,169,255,0.18); }
|
||
.enh-readout { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; }
|
||
.enh-after { font-size: 12px; margin-top: 4px; }
|
||
|
||
/* Models & Pipeline: shape editing (group, swap, remove, wiring) */
|
||
.eng-structure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
|
||
.eng-structure-actions { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
|
||
.eng-wire { margin-top: 4px; }
|
||
.eng-field-wrap { display: flex; flex-direction: column; }
|