digital-garbageandClaude
8e9c0479a8
Follow-up to the previous commit, per review: - the panel is no longer docked into Easy Gen's main screen — the "$ Variables" button now sits in the prompt bar (next to Upload/Gallery, not pinned to the header) and opens a modal window, same shell as the Gallery picker - value fields are auto-growing textareas instead of one-line inputs, in the Cutting Room's Composer as well: a long phrase was impossible to edit in a single-line field. Height is measured from scrollHeight with the border-box borders added back, re-fit once after layout (scrollHeight reads 0 before it) - fully-empty rows are dropped on persist, so an accidental "Add variable" click never sticks to the project (the row stays on screen until it's filled in — the open window keeps its own working copy for exactly this reason) Co-Authored-By: Claude <noreply@anthropic.com>
1800 lines
122 KiB
CSS
1800 lines
122 KiB
CSS
/* ════════════════════════════════════════════════════════════════════
|
||
FunPack · Cutting Room — cinematic dark editing suite
|
||
════════════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
/* warm near-black surface stack */
|
||
--ink-0: #0c0b09; /* app bg */
|
||
--ink-1: #131210; /* zones */
|
||
--ink-2: #1a1814; /* heads / raised */
|
||
--ink-3: #221f19; /* hover */
|
||
--line: #2a261e;
|
||
--line-2:#37322833;
|
||
--text: #ece7db;
|
||
--muted: #918a7a;
|
||
--faint: #645e51;
|
||
/* film-marker amber + cool teal selection */
|
||
--amber: #f3a93c;
|
||
--amber-2:#ffc36b;
|
||
--amber-soft: rgba(243,169,60,.14);
|
||
--teal: #57d0c6;
|
||
--teal-soft: rgba(87,208,198,.14);
|
||
--danger:#e8607a;
|
||
--good: #79c479;
|
||
|
||
--media-w: 280px;
|
||
--properties-w: 340px;
|
||
--inspector-h: 340px;
|
||
--timeline-h: 320px;
|
||
--menubar-h: 42px;
|
||
|
||
--font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
|
||
--font-ui: "IBM Plex Sans", system-ui, sans-serif;
|
||
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
||
--radius: 9px;
|
||
--shadow: 0 10px 30px -12px rgba(0,0,0,.7);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html, body { height: 100%; margin: 0; }
|
||
body {
|
||
background:
|
||
radial-gradient(1200px 600px at 80% -10%, #1b1813 0%, transparent 60%),
|
||
var(--ink-0);
|
||
color: var(--text);
|
||
font: 14px/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(--amber-soft); }
|
||
|
||
/* scrollbars */
|
||
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
||
*::-webkit-scrollbar-thumb { background: #2f2b22; border-radius: 8px; border: 2px solid var(--ink-1); }
|
||
*::-webkit-scrollbar-thumb:hover { background: #3d382c; }
|
||
*::-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(#16140f, #110f0c);
|
||
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: 16px; display: flex; align-items: center; gap: 8px; }
|
||
.brand-mark { color: var(--amber); font-size: 12px; transform: translateY(-1px); filter: drop-shadow(0 0 6px var(--amber-soft)); }
|
||
.brand-sub { color: var(--faint); font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
|
||
|
||
.menus { display: flex; gap: 2px; }
|
||
.menu { position: relative; }
|
||
.menu-btn {
|
||
background: transparent; border: 0; padding: 6px 11px; border-radius: 7px;
|
||
font-size: 13.5px; 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: #1b1813; 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(--amber-soft); color: var(--amber-2); }
|
||
.menu-item.disabled { color: var(--faint); pointer-events: none; }
|
||
.menu-item .hint { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }
|
||
.menu-item:hover .hint { color: var(--amber); }
|
||
.menu-sep { height: 1px; background: var(--line); margin: 5px 6px; }
|
||
.menu-label { padding: 4px 10px 3px; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); }
|
||
.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-family: var(--font-mono); font-size: 11px; color: var(--muted);
|
||
display: flex; align-items: center; gap: 6px; padding: 3px 9px; 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(--amber); }
|
||
|
||
/* backend log viewer */
|
||
.log-btn { background: var(--ink-2); border: 1px solid var(--line); border-radius: 20px; color: var(--muted);
|
||
font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; padding: 3px 11px; cursor: pointer; }
|
||
.log-btn:hover { color: var(--amber-2); background: var(--ink-3); }
|
||
.log-btn.active { color: var(--amber-2); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
|
||
.log-panel { position: fixed; z-index: 9000; right: 14px; top: 48px; width: min(720px, 88vw); height: min(420px, 60vh);
|
||
background: #0c0b09f2; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column;
|
||
box-shadow: 0 16px 40px -12px #000; 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-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
|
||
.log-actions { display: flex; gap: 6px; }
|
||
.log-body { flex: 1; margin: 0; padding: 8px 10px; overflow: auto; white-space: pre-wrap; word-break: break-word;
|
||
font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--muted); background: #060606; }
|
||
|
||
/* ──────────── 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); }
|
||
|
||
/* 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-family: var(--font-mono); font-size: 10px; letter-spacing: .8px;
|
||
text-transform: uppercase; 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(--amber-soft); color: var(--amber-2); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
|
||
.dock-tab:only-child { cursor: default; }
|
||
|
||
.zone-head {
|
||
height: 34px; flex: 0 0 34px; display: flex; align-items: center; gap: 10px;
|
||
padding: 0 12px; background: linear-gradient(#1a1813, #161410);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.zone-title {
|
||
font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
|
||
}
|
||
.zone-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 1px; background: var(--amber); transform: translateY(-1px); box-shadow: 0 0 7px var(--amber-soft); }
|
||
.transport-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
|
||
.transport-actions .btn.compact { padding: 3px 10px; font-size: 12px; font-family: var(--font-mono); line-height: 1.35; }
|
||
.transport-actions .btn:disabled { opacity: 0.42; pointer-events: none; cursor: default; }
|
||
.transport-actions .btn.render {
|
||
background: linear-gradient(#3ab3a8, #2d9a90); color: #0a1a18; border-color: #3ab3a8;
|
||
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-mono); font-size: 11px; color: var(--faint); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
|
||
.zone-body { flex: 1; overflow: auto; padding: 12px; 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(--amber); }
|
||
.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: 7px; padding: 6px 11px; cursor: pointer; font-size: 13px; transition: border-color .12s, background .12s; }
|
||
.btn:hover { border-color: var(--amber); }
|
||
.btn.primary { background: linear-gradient(#f3a93c, #e0972a); color: #1a1206; border-color: #f3a93c; font-weight: 700; box-shadow: 0 4px 14px -6px var(--amber); }
|
||
.btn.primary:hover { filter: brightness(1.08); }
|
||
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); padding: 4px 8px; font-size: 12px; }
|
||
.btn.ghost:hover { color: var(--amber-2); background: var(--ink-3); }
|
||
.btn.ghost.on { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
|
||
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
|
||
.btn.tiny { padding: 2px 7px; font-size: 12px; }
|
||
|
||
label.field { display: block; margin-bottom: 12px; }
|
||
label.field > span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
|
||
/* 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-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
|
||
.field > textarea:disabled { opacity: .45; cursor: not-allowed; }
|
||
input, select, textarea {
|
||
width: 100%; background: var(--ink-0); border: 1px solid var(--line); border-radius: 7px;
|
||
padding: 7px 9px; font-size: 13px; outline: none; transition: border-color .12s, box-shadow .12s;
|
||
}
|
||
input:focus, select:focus, textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-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-mono); }
|
||
|
||
/* ───────────────────────── MEDIA BROWSER ───────────────────────── */
|
||
.mb-section { margin-bottom: 18px; }
|
||
.mb-section-title { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
|
||
.project-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
|
||
.project-row:hover { background: var(--ink-2); }
|
||
.project-row.active { background: var(--amber-soft); border-color: #f3a93c44; }
|
||
.project-row .pj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.project-row .pj-meta { font-family: var(--font-mono); 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: 12.5px; transition: border-color .15s, background .15s;
|
||
}
|
||
.mediabin.drag { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
|
||
.mediabin .big { font-size: 26px; opacity: .5; margin-bottom: 8px; }
|
||
.mediabin { cursor: pointer; padding: 18px 14px; }
|
||
.soon { font-family: var(--font-mono); 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-mono); 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(--amber); border-bottom-color: var(--amber); }
|
||
.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); }
|
||
.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: #060606; 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(--amber-2) 70%, var(--faint)); }
|
||
.media-aud-ph { color: color-mix(in srgb, #b8a0ff 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: 8px; font-family: var(--font-mono); font-weight: 600; letter-spacing: .04em;
|
||
line-height: 1; padding: 2px 4px; border-radius: 4px;
|
||
background: #000c; border: 1px solid #ffffff18; 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(--amber-2); border-color: color-mix(in srgb, var(--amber-2) 35%, transparent); }
|
||
.media-kind-badge.kind-audio { color: #c4b0ff; border-color: color-mix(in srgb, #b8a0ff 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(--amber-2); 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(--amber-soft); }
|
||
.media-pin-badge { position: absolute; top: 3px; left: 3px; font-size: 10px; line-height: 1;
|
||
padding: 2px 3px; border-radius: 4px; background: rgba(0, 0, 0, .55); 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(--amber); border-radius: 4px; color: var(--text);
|
||
}
|
||
.media-card.picked { border-color: var(--amber); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
|
||
.media-bin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
|
||
.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-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
|
||
.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-mono); font-size: 9.5px; 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(--amber); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--ink-0)); }
|
||
.media-select-mode .media-card { cursor: default; }
|
||
.media-select-mode .media-card:not(.picked):hover { border-color: var(--amber-2); }
|
||
|
||
/* 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: #060606; 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(--amber); 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-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
|
||
.lib-field { display: flex; flex-direction: column; gap: 3px; }
|
||
.lib-field > span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--faint); }
|
||
.lib-in { width: 100%; background: var(--ink-0); border: 1px solid var(--line); border-radius: 6px; color: var(--ink-text, #e9e2d2); font-size: 12.5px; padding: 5px 7px; font-family: var(--font-mono); 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: 10.5px; 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-mono); 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: 10.5px; 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-mono); letter-spacing: .02em;
|
||
color: #c8fff4; background: linear-gradient(90deg, transparent, rgba(12, 42, 38, .92) 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: 8px; opacity: .9; }
|
||
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
||
.clip-thumb > span { position: absolute; right: 6px; bottom: 4px; font-size: 14px; color: #fff8; }
|
||
.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: #060606; 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: 11.5px; color: var(--teal); margin-top: 6px; }
|
||
|
||
/* ───────────────────────── PREVIEW / PROGRAM MONITOR ───────────────────────── */
|
||
.program { padding: 0; background: #060606; 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: #060606; }
|
||
.pm-canvas::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px 10px rgba(0,0,0,.65); z-index: 1; }
|
||
.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: 10.5px; font-family: var(--font-mono); color: var(--teal); background: #000a; 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: #000; }
|
||
.pm-media-preview-label-vid { color: var(--amber-2); border-color: color-mix(in srgb, var(--amber-2) 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: #000; }
|
||
.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: 13px; font-family: var(--font-mono); }
|
||
.gen-readout { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; color: var(--amber-2); background: #0009; 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(--amber); animation: pulse 1s infinite; flex: 0 0 auto; }
|
||
.gen-readout.error { color: var(--danger); }
|
||
.gen-readout.error .pulse { background: var(--danger); animation: none; }
|
||
.gen-bar { width: 90px; height: 5px; background: #ffffff22; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
|
||
.gen-bar-fill { height: 100%; background: var(--amber); border-radius: 3px; transition: width .2s; }
|
||
.gen-interrupt { font-family: var(--font-mono); 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), #3ab3a8); opacity: .55; }
|
||
.pm-chip.rendered.stale { background: linear-gradient(180deg, var(--amber-2), #3ab3a8); opacity: .62; }
|
||
.pm-chip.pending { background: repeating-linear-gradient(-45deg, var(--ink-3), var(--ink-3) 4px, #1a1a1a 4px, #1a1a1a 8px); opacity: .45; }
|
||
.pm-chip.ghost { background: repeating-linear-gradient(-45deg, #2a2418, #2a2418 4px, #3d3420 4px, #3d3420 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(--amber) 55%, #3ab3a8), #2a6a62); opacity: .72; }
|
||
.pm-chip.carry { background: repeating-linear-gradient(-45deg, #1e2a28, #1e2a28 3px, #243532 3px, #243532 6px); opacity: .5; }
|
||
.pm-chip.video { background: linear-gradient(180deg, #3a5a8a, #2a4468); 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: #080808ee; color: var(--muted); pointer-events: none; text-align: center; padding: 16px; }
|
||
.pm-slate-title { font-size: 14px; color: var(--amber-2); font-family: var(--font-mono); }
|
||
.pm-slate-sub { font-size: 11.5px; color: var(--faint); max-width: 280px; }
|
||
.pm-segment-badge { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 10.5px; font-family: var(--font-mono); color: var(--amber-2); background: #000a; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: 12px; padding: 3px 9px; pointer-events: none; }
|
||
.pm-needle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; 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-mono); font-size: 11.5px; 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-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--amber); text-transform: uppercase; }
|
||
.insp-hint { font-size: 11px; color: var(--faint); margin: -4px 0 12px; }
|
||
.insp-hint.warn { color: var(--amber-2, var(--amber)); }
|
||
.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-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }
|
||
.insp-global-ta { width: 100%; background: var(--ink-0); border: 1px solid var(--line); border-radius: 7px;
|
||
color: var(--ink-text, #e9e2d2); font-size: 12.5px; padding: 7px 8px; resize: vertical; font-family: var(--font-mono); 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-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; 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(--amber-2); }
|
||
.insp-seg.active { background: var(--amber-soft); color: var(--amber-2); }
|
||
.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: 11.5px; 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, #1e1b15), var(--ink-2)); border: none; cursor: pointer;
|
||
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--amber); text-align: left; }
|
||
.insp-engine-head:hover { color: var(--amber-2); }
|
||
.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, #57d0c655); 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-mono);
|
||
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-family: var(--font-mono); 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(--amber); 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: 12.5px; }
|
||
.pv-badge { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--teal); border: 1px solid #57d0c655; border-radius: 4px; padding: 1px 5px; flex: 0 0 auto; }
|
||
.pv-badge.anchor { color: var(--amber); border-color: #f3a93c55; }
|
||
.pv-badge.postfix { color: var(--amber); border-color: #f3a93c55; }
|
||
.pv-badge.trans { color: var(--faint); border-color: transparent; font-size: 9px; }
|
||
.pv-badge.rkey { color: #c79bf2; border-color: #c79bf255; text-transform: none; letter-spacing: 0; }
|
||
.pv-badge.rkey.default { color: var(--faint); border-color: #ffffff22; }
|
||
.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 rgba(88,166,214,0.25); border-radius: 6px; background: rgba(88,166,214,0.06); 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-mono); font-size: 11px; color: var(--muted); min-width: 32px; }
|
||
.pv-warn { color: var(--amber-2); 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-mono); }
|
||
.pv-raw pre { white-space: pre-wrap; background: var(--ink-2); border-radius: 6px; padding: 8px; font-size: 11.5px; font-family: var(--font-mono); color: var(--muted); margin: 6px 0 0; }
|
||
|
||
/* ───────────────────────── TIMELINE (NLE) ───────────────────────── */
|
||
.timeline .zone-body { padding: 0; display: flex; flex-direction: column; }
|
||
|
||
.tl-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; 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-mono); font-size: 11px; color: var(--muted); }
|
||
.tl-zlabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
|
||
.tl-keys { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; color: var(--faint); margin-right: 10px; opacity: .8; }
|
||
.tl-notice { margin-left: 12px; font-size: 11px; color: var(--amber-2); 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(--amber-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.tl-rate-btn.has-rating { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 30%, var(--ink-2)); }
|
||
|
||
/* Studio-style rating picker (Movie Editor) */
|
||
.me-rating-picker {
|
||
position: fixed; z-index: 10001; width: 340px;
|
||
background: rgba(24,26,30,0.99); border: 1px solid rgba(180,190,200,0.3);
|
||
border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.55);
|
||
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 rgba(255,255,255,0.08);
|
||
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); }
|
||
.me-rating-section { padding: 8px 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||
.me-rating-section-label {
|
||
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
|
||
color: rgba(var(--accent), 0.9); 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: rgba(255,255,255,0.04); border: 1px solid rgba(var(--accent), 0.25);
|
||
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: rgba(var(--accent), 0.12); border-color: rgba(var(--accent), 0.55); color: #fff; }
|
||
.me-rating-opt.active { background: rgba(var(--accent), 0.18); border-color: rgba(var(--accent), 0.7); color: #fff; }
|
||
.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: #aaa; }
|
||
.me-rating-heart {
|
||
flex-shrink: 0; width: 26px; padding: 0;
|
||
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,120,180,0.2);
|
||
border-radius: 6px; color: rgba(255,120,180,0.5); cursor: pointer;
|
||
font-size: 13px; transition: background 0.1s, border-color 0.1s, color 0.1s;
|
||
}
|
||
.me-rating-heart:hover { background: rgba(255,120,180,0.12); border-color: rgba(255,120,180,0.6); color: #ffb3d4; }
|
||
.me-rating-heart.active { background: rgba(255,120,180,0.20); border-color: rgba(255,120,180,0.8); color: #ffb3d4; }
|
||
.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-family: var(--font-mono); font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
|
||
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-mono); 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, #60a5fa 5%, var(--ink-0)); }
|
||
.tl-gutter-lane.orig { color: var(--teal-soft); }
|
||
.tl-gutter-lane.overlay { color: #93c5fd; }
|
||
.tl-aud-clip.overlay { border-color: color-mix(in srgb, #60a5fa 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 #ffffff08; background: color-mix(in srgb, #c084fc 4%, var(--ink-0)); }
|
||
.tl-overlay-lane.top { background: color-mix(in srgb, #c084fc 7%, var(--ink-0)); }
|
||
.tl-overlay-lane.drop-target { background: color-mix(in srgb, #c084fc 14%, var(--ink-0)); box-shadow: inset 0 0 0 1px #c084fc55; }
|
||
.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: #d8b4fe; font-size: 10px; flex-direction: row; gap: 2px; padding: 0 3px; justify-content: space-between; }
|
||
.tl-gutter-lane.overlay.top { color: #e9d5ff; 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: #d8b4fe; 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: #fecaca; }
|
||
.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, #c084fc 40%, var(--line));
|
||
background: color-mix(in srgb, #c084fc 12%, var(--ink-1));
|
||
cursor: grab; overflow: hidden;
|
||
}
|
||
.tl-ov-clip.selected { border-color: #c084fc; box-shadow: 0 0 0 1px color-mix(in srgb, #c084fc 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: #f3e8ff; }
|
||
.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, #c084fc 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: rgba(0,0,0,.45); color: #f3e8ff; 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: #fff; }
|
||
.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 rgba(0,0,0,.85); 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, #c084fc 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: #c084fc; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35);
|
||
}
|
||
.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, #c084fc 40%, var(--line));
|
||
border-radius: 5px; background: rgba(0,0,0,.55); color: #e9d5ff; font-size: 13px; line-height: 1; cursor: pointer;
|
||
}
|
||
.pm-ov-flip-btn:hover, .pm-ov-flip-btn.active { background: color-mix(in srgb, #c084fc 25%, rgba(0,0,0,.55)); border-color: #c084fc; }
|
||
.ov-keep-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
|
||
.ov-keep-row input { accent-color: #c084fc; }
|
||
.ov-flip-row { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.ov-flip-row .btn.active { border-color: #c084fc; color: #e9d5ff; }
|
||
.insp-layer-actions .btn.active { border-color: #c084fc; color: #e9d5ff; }
|
||
|
||
/* 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, #c084fc 18%, var(--line)); box-shadow: 0 24px 64px rgba(0,0,0,.55); }
|
||
.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, #c084fc 6%, #1a1712), #14110d); }
|
||
.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: #ffffff10; 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: #12100c; }
|
||
.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; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
|
||
.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, #c084fc 45%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, #c084fc 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-mono); font-size: 11px; color: #d8b4fe; }
|
||
.ov-range { width: 100%; accent-color: #c084fc; }
|
||
.ov-text-preview { border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(ellipse at center, #2a2430 0%, #121018 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: 14px; font-weight: 700; }
|
||
.ov-style-btn:hover { border-color: color-mix(in srgb, #c084fc 40%, var(--line)); color: var(--text); }
|
||
.ov-style-btn.active { border-color: #c084fc; color: #e9d5ff; background: color-mix(in srgb, #c084fc 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: #c084fc; }
|
||
.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, #c084fc 35%, var(--line)); background: color-mix(in srgb, #c084fc 5%, var(--ink-2)); }
|
||
.ov-image-card.selected { border-color: #c084fc; box-shadow: 0 0 0 1px color-mix(in srgb, #c084fc 40%, transparent); }
|
||
.ov-image-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: #000; 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, #1e3a2f, #152820); border: 1px solid #2d5a45; 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, rgba(21,40,32,.92) 0%, rgba(21,40,32,.55) 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, #1a2840, #121c2e); border-color: #2a4468; }
|
||
.tl-aud-clip.ins .tl-aud-controls { background: linear-gradient(90deg, rgba(18,28,46,.92) 0%, rgba(18,28,46,.55) 45%, transparent 100%); }
|
||
.tl-aud-clip.sep { background: linear-gradient(180deg, #1a3530, #122820); border-color: #2d6a58; }
|
||
.tl-aud-clip.sep .tl-aud-controls { background: linear-gradient(90deg, rgba(18,40,32,.92) 0%, rgba(18,40,32,.55) 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(#211d16, #19160f); 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(--amber); opacity: .55; }
|
||
.clip:hover { border-color: #4a4334; }
|
||
.clip:active { cursor: grabbing; }
|
||
.clip.spacing { opacity: .85; z-index: 50; cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.5); 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(--amber, #e0a23a);
|
||
box-shadow: 0 0 6px 1px rgba(224,162,58,.8); 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: #1b1812; border: 1px solid var(--line); border-radius: 8px; padding: 8px;
|
||
display: flex; flex-direction: column; gap: 7px; box-shadow: 0 8px 22px rgba(0,0,0,.55); }
|
||
.tl-dd-panel[hidden] { display: none; }
|
||
.tl-dd-head { font-size: 11px; color: var(--muted, #9a8f78); text-transform: uppercase; letter-spacing: .04em; }
|
||
.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: #1a1711; }
|
||
.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 rgba(45, 212, 191, 0.35); 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 rgba(45, 212, 191, 0.35); }
|
||
.clip.excluded { opacity: .42; }
|
||
.clip.excluded::before { background: var(--faint); }
|
||
.clip.clip-video { background: linear-gradient(#141c28, #0f141c); border-color: #2a4468; }
|
||
.clip.clip-video::before { background: #5b8def; opacity: .75; }
|
||
.clip.clip-video .clip-no { color: #7eb0ff; font-weight: 600; }
|
||
.clip.src-v2v::before { background: #7c6cf0; }
|
||
.tl-track2.drop-target-track { outline: 1px dashed var(--teal); outline-offset: -2px; background: rgba(45, 212, 191, 0.04); }
|
||
.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(--amber) 45%, var(--line)); opacity: .72; cursor: default; }
|
||
.clip.ghost::before { background: var(--amber); opacity: .35; }
|
||
.clip.ghost .ghost-label { font-style: italic; color: var(--amber-2); }
|
||
.clip.gen-cut::before { background: color-mix(in srgb, var(--teal) 55%, var(--amber)); }
|
||
.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(--amber) 0%, var(--amber) 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(--amber); 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 rgba(45, 212, 191, 0.35), 0 0 0 2px rgba(45, 212, 191, 0.28);
|
||
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 rgba(45, 212, 191, 0.45);
|
||
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-family: var(--font-mono); font-size: 10.5px; 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(--amber); }
|
||
.clip-guide-mark { font-size: 11px; color: var(--teal-soft); margin-left: -1px; }
|
||
.clip-src-label { font-size: 9px; font-family: var(--font-mono); 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: #c8fff4; 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: 7px;
|
||
color: #57c98e; text-shadow: 0 0 5px rgba(87,201,142,.7); pointer-events: none; z-index: 1; }
|
||
.clip.trimming { border-color: var(--amber); 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-mono); font-size: 11px; color: var(--amber); font-weight: 600; flex-shrink: 0; }
|
||
.clip-src { font-size: 12px; color: var(--faint); flex-shrink: 0; }
|
||
.clip-dur { font-family: var(--font-mono); font-size: 10px; color: var(--faint); white-space: nowrap; }
|
||
.clip-rm.btn.tiny { padding: 1px 6px; font-size: 10px; line-height: 1.25; flex-shrink: 0; }
|
||
.clip-move.btn.tiny { padding: 1px 5px; font-size: 9px; line-height: 1.25; flex-shrink: 0; color: var(--muted); }
|
||
.clip-move.btn.tiny:hover { color: var(--amber-2); }
|
||
.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-mono); font-weight: 600; color: var(--amber-2); 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(--amber-soft) 35%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); }
|
||
.clip.has-media .clip-rated { 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(--amber) 25%, var(--line));
|
||
padding-top: 3px; margin-top: 1px;
|
||
}
|
||
.clip-gen-prompt-label {
|
||
display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .4px;
|
||
text-transform: uppercase; color: var(--faint); margin-bottom: 1px;
|
||
}
|
||
.clip-gen-prompt-text {
|
||
color: var(--amber-2); 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(--amber) 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(--amber-2); text-shadow: 0 0 5px rgba(224, 162, 58, .7); }
|
||
.clip-gen-anchor .clip-gen-prompt-label { color: var(--teal-soft); }
|
||
.clip-gen-anchor .clip-gen-prompt-text { color: #c8fff4; }
|
||
.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(--amber);
|
||
color: var(--amber); font-family: var(--font-mono); 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(--amber) 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(--amber); }
|
||
.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(--amber); 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(--amber);
|
||
color: var(--amber); font-family: var(--font-mono); 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, #00000088); }
|
||
.clip-vt-tail.vt-wipeleft { background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--amber) 40%, transparent)); }
|
||
.clip-vt-tail.vt-wiperight { background: linear-gradient(270deg, transparent 20%, color-mix(in srgb, var(--amber) 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%; }
|
||
|
||
/* ───────────────────────── WELCOME (first load) ───────────────────────── */
|
||
.welcome-overlay {
|
||
position: fixed;
|
||
left: 0; right: 0; bottom: 0;
|
||
top: var(--menubar-h);
|
||
z-index: 350;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
background:
|
||
radial-gradient(900px 480px at 50% 20%, rgba(243,169,60,.08) 0%, transparent 55%),
|
||
radial-gradient(700px 400px at 80% 80%, rgba(87,208,198,.06) 0%, transparent 50%),
|
||
rgba(8,7,6,.92);
|
||
backdrop-filter: blur(6px);
|
||
animation: fade .2s ease;
|
||
}
|
||
.welcome-card {
|
||
width: min(520px, 96vw);
|
||
padding: 34px 32px 28px;
|
||
border-radius: 16px;
|
||
border: 1px solid var(--line);
|
||
background: linear-gradient(165deg, #1a1712 0%, #12100d 100%);
|
||
box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
|
||
animation: pop .18s ease;
|
||
}
|
||
.welcome-brand {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
.welcome-mark { color: var(--amber); font-size: 14px; filter: drop-shadow(0 0 8px var(--amber-soft)); }
|
||
.welcome-title { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: .2px; }
|
||
.welcome-sub {
|
||
font-family: var(--font-display);
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
letter-spacing: 2.5px;
|
||
text-transform: uppercase;
|
||
color: var(--faint);
|
||
}
|
||
.welcome-lead {
|
||
margin: 0 0 22px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
max-width: 42em;
|
||
}
|
||
.welcome-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||
.welcome-maint { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
|
||
.welcome-maint .welcome-btn { padding-top: 8px; padding-bottom: 8px; }
|
||
.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(--amber) 35%, var(--line));
|
||
background: var(--ink-2);
|
||
transform: translateY(-1px);
|
||
}
|
||
.welcome-btn.primary {
|
||
border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
|
||
background: color-mix(in srgb, var(--amber) 10%, var(--ink-1));
|
||
}
|
||
.welcome-btn.primary:hover:not(.disabled) {
|
||
background: color-mix(in srgb, var(--amber) 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: 14px; color: var(--text); }
|
||
.welcome-btn.primary .welcome-btn-label { color: var(--amber-2); }
|
||
.welcome-btn-hint { font-size: 11px; color: var(--faint); line-height: 1.35; }
|
||
@media (max-width: 520px) {
|
||
.welcome-actions { grid-template-columns: 1fr; }
|
||
.welcome-card { padding: 24px 20px 20px; }
|
||
}
|
||
|
||
/* ───────────────────────── MODALS (Models settings) ───────────────────────── */
|
||
.modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(6,5,4,.66); 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: #16140f; 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-mono); 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(#1b1813, #161410); }
|
||
.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(--amber); border-color: var(--amber); } }
|
||
.composer-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
|
||
.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(--amber); }
|
||
.compose-var-list { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
|
||
.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(--amber); font-family: var(--font-mono); 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; }
|
||
.compose-var-row .btn { flex: 0 0 auto; }
|
||
|
||
/* config validation banner */
|
||
/* Pipeline requirements panel */
|
||
.req-panel { margin-bottom: 18px; }
|
||
.req-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
|
||
.req-opt-head { font-size: 10px; color: var(--faint); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 1px; }
|
||
.req-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-radius: 6px; margin-bottom: 4px; font-size: 12.5px; flex-wrap: wrap; }
|
||
.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-mono); 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-mono); 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: 11.5px; color: var(--muted); }
|
||
.req-add { flex: 0 0 auto; }
|
||
.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: 12.5px; border: 1px solid var(--line); }
|
||
.valid-banner .valid-dot { font-family: var(--font-mono); 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(--amber); border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: color-mix(in srgb, var(--amber) 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(--amber); }
|
||
.slot-card.slot-warn { border-left-color: var(--amber); }
|
||
.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-mono); 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-mono); 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(--amber); border-color: color-mix(in srgb, var(--amber) 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(--amber); border-color: color-mix(in srgb, var(--amber) 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-mono); 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(--amber); }
|
||
.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(--amber); border-color: color-mix(in srgb, var(--amber) 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: 9.5px; color: var(--teal); font-family: var(--font-mono); }
|
||
|
||
/* 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: 11.5px; 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-mono); font-size: 10.5px;
|
||
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-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; }
|
||
.wire-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
|
||
.wire-out { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: 0 0 auto; min-width: 130px; }
|
||
.wire-arrow { color: var(--teal); }
|
||
.wire-dest { font-family: var(--font-mono); 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(--red, #e06c75); }
|
||
.wire-add { align-self: flex-start; }
|
||
/* Input-source arrow points left (← instead of →) */
|
||
.wire-row .wire-arrow.src { color: var(--amber); }
|
||
|
||
/* 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-mono); 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(--amber) 10%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--amber) 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; }
|
||
.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(--amber); 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, #e8e0d4); font-size: 12px; cursor: pointer; }
|
||
.tl-add-row:hover:not(:disabled) { background: var(--ink-2, #1e1b16); }
|
||
.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-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--faint); }
|
||
.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-mono); }
|
||
.slot-picker-input {
|
||
width: 100%; box-sizing: border-box; margin: 12px 0;
|
||
padding: 8px 10px; font-size: 14px; 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-mono); 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: rgba(80,200,180,.08); }
|
||
.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-mono); }
|
||
.wf-warn { font-size: 12px; color: #e8a040; padding: 8px 10px; background: rgba(232,160,64,.08); border-radius: 8px; border: 1px solid rgba(232,160,64,.25); }
|
||
.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: rgba(80,200,180,.05); }
|
||
.wf-paste { width: 100%; box-sizing: border-box; font-family: var(--font-mono); 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-mono); 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-mono); 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: rgba(80,200,180,.06); border: 1px solid rgba(80,200,180,.2); border-radius: 8px; margin-bottom: 12px; }
|
||
.guided-hint { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.45; }
|
||
.wire-locked { font-size: 11.5px; 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: rgba(8, 7, 5, .88); }
|
||
.tour-spotlight {
|
||
position: fixed; border-radius: 10px; pointer-events: none;
|
||
box-shadow: 0 0 0 9999px rgba(6, 5, 4, .78);
|
||
border: 1px solid rgba(243, 169, 60, .45);
|
||
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, #1e1b16 0%, #161410 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-mono); 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-mono); 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(--amber-2); border-color: rgba(243, 169, 60, .35); background: var(--amber-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: rgba(19, 18, 16, .94); 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(--amber-2); }
|
||
.tour-banner-note { color: var(--muted); font-size: 11px; }
|
||
.tour-toast {
|
||
position: fixed; bottom: calc(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: #2a2218; border: 1px solid rgba(243, 169, 60, .35); 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-mono); 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-family: var(--font-mono); font-size: 10px; letter-spacing: .8px;
|
||
text-transform: uppercase; padding: 4px 10px; 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: 8px; color: var(--teal); transform: translateY(-.5px); }
|
||
.composer-btn.on {
|
||
background: var(--amber-soft); color: var(--amber-2); border-color: color-mix(in srgb, var(--amber) 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 rgba(0,0,0,.78), 0 0 0 1px #0006;
|
||
}
|
||
.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(#1f1c16, #17140f); 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: 14px; letter-spacing: .2px; }
|
||
.fw-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
|
||
.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-mono); font-size: 12.5px; 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-mono); font-size: 9.5px; 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: #16140f; 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-mono); font-size: 11.5px; 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: #16140f; 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(--amber-soft); }
|
||
.ac-trigger { color: var(--amber-2); font-family: var(--font-mono); font-size: 12px; flex-shrink: 0; }
|
||
.ac-prompt { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
|
||
.ac-cat { color: var(--teal); font-family: var(--font-mono); font-size: 9.5px; 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 rgba(255, 196, 87, .55); }
|
||
.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: #16140f; 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: 10.5px; 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(--amber-soft); }
|
||
.sugg-empty { color: var(--muted); font-size: 11.5px; padding: 6px 9px; }
|
||
.sugg-sec-head { color: var(--amber-2); 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-mono); font-size: 9.5px; 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-mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; }
|
||
.sugg-cat-count { color: var(--muted); font-size: 9.5px; font-family: var(--font-mono); 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: 11.5px; 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-mono); 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(--amber-2); }
|
||
.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: 12.5px; }
|
||
.sc-pick-folder:hover, .sc-pick-item:hover { border-color: var(--amber); background: var(--ink-3); }
|
||
.sc-pick-folder .sc-pick-name::before { content: "▸ "; color: var(--amber); }
|
||
.sc-pick-name { color: var(--text); flex-shrink: 0; }
|
||
.sc-pick-prompt { color: var(--muted); font-size: 11.5px; 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-mono); font-size: 10.5px; 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: #16140f; border: 1px solid var(--line); border-radius: 14px;
|
||
box-shadow: 0 24px 64px rgba(0,0,0,.55); 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: #121009; 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 rgba(0,0,0,.7); }
|
||
.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(--amber); }
|
||
.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(--amber-2), var(--amber)); color: #241503; 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,#8a8f98,#5b6068);
|
||
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.4); }
|
||
.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(#1b1813, #161410); }
|
||
.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: 11.5px; 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; }
|
||
.sw-hint { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
|
||
.sw-rows-label { margin: 16px 4px 5px; font-size: 10.5px; 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-mono); font-size: 11.5px;
|
||
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(--amber);
|
||
text-shadow: 0 0 24px rgba(243,169,60,.45); margin-bottom: 10px; }
|
||
.sw-about-name { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
|
||
.sw-about-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
|
||
.sw-about-facts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
|
||
.sw-about-fact { display: flex; gap: 14px; justify-content: center; font-size: 12.5px; }
|
||
.sw-about-k { color: var(--faint); min-width: 70px; text-align: right; }
|
||
.sw-about-v { color: var(--text); font-family: var(--font-mono); text-align: left; min-width: 70px; }
|
||
.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: #14120d;
|
||
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(--amber-soft); box-shadow: inset 0 0 0 1px rgba(243,169,60,.35); }
|
||
.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(--amber); }
|
||
.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: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.mn-sub { font-size: 10px; color: var(--faint); font-family: var(--font-mono);
|
||
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(--amber-2); }
|
||
.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(--amber); color: var(--amber-2); }
|
||
.mn-empty { padding: 8px; font-size: 11.5px; 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: #1d1a14; border: 1px solid var(--line); border-radius: 10px;
|
||
box-shadow: 0 14px 40px rgba(0,0,0,.6); 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: 12.5px; color: var(--text); cursor: pointer; }
|
||
.mn-role-item:hover { background: var(--amber-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(--amber-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(--amber); }
|
||
.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(--amber-soft); }
|
||
.ns-row-name { font-size: 12.5px; color: var(--text); }
|
||
.ns-row-class { font-size: 10.5px; color: var(--faint); font-family: var(--font-mono);
|
||
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-mono); }
|
||
.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(--amber); 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); }
|
||
.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; }
|