digital-garbage
fef748afe7
Move the previous-prompt hint from the rating toolbar onto rendered clips that have a prompt mismatch. Clips get an amber border and a Generated with line under the current scene text.
800 lines
58 KiB
CSS
800 lines
58 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: 300px;
|
|
--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 GRID ───────────────────────── */
|
|
.workspace { height: calc(100% - var(--menubar-h)); display: flex; flex-direction: column; }
|
|
.dock { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
.dock-panels { flex: 1; display: flex; min-height: 0; min-width: 0; }
|
|
.right-stack { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
|
|
.zone { background: var(--ink-1); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
|
|
.dock-panel { flex: 0 0 auto; }
|
|
.dock-panel[hidden] { display: none !important; }
|
|
|
|
/* canonical layout: media left, preview + settings stacked right */
|
|
.media { width: var(--media-w); border-right: 1px solid var(--line); }
|
|
.preview { flex: 1; min-height: 80px; border-bottom: 1px solid var(--line); }
|
|
.inspector { height: var(--inspector-h); min-height: 120px; flex: 0 0 auto; }
|
|
.timeline { height: var(--timeline-h); min-height: 200px; border-top: 1px solid var(--line); }
|
|
|
|
/* solo panel fills the dock */
|
|
.dock[data-media="1"][data-preview="0"][data-settings="0"] .media { flex: 1; width: auto; border-right: none; }
|
|
.dock[data-media="0"][data-preview="1"][data-settings="0"] .right-stack .preview { flex: 1; border-bottom: none; }
|
|
.dock[data-media="0"][data-preview="0"][data-settings="1"] .right-stack .inspector { flex: 1; height: auto; }
|
|
|
|
/* media + preview: settings hidden, preview fills right column */
|
|
.dock[data-media="1"][data-preview="1"][data-settings="0"] .right-stack .preview { flex: 1; border-bottom: none; }
|
|
|
|
/* media + settings: preview hidden, settings fills right column */
|
|
.dock[data-media="1"][data-preview="0"][data-settings="1"] .right-stack .inspector { flex: 1; height: auto; }
|
|
|
|
/* preview + settings only: full-width right stack */
|
|
.dock[data-media="0"][data-preview="1"][data-settings="1"] .right-stack { flex: 1; width: 100%; }
|
|
|
|
/* hide splitters when a boundary has only one visible panel */
|
|
.dock[data-media="0"] #split-left { display: none; }
|
|
.dock[data-preview="0"][data-settings="0"] #split-mid { display: none; }
|
|
.dock[data-media="0"] .right-stack { flex: 1; width: 100%; }
|
|
|
|
/* 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.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; }
|
|
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); }
|
|
.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: 11px; letter-spacing: .5px; padding: 6px 8px; cursor: pointer; }
|
|
.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 */
|
|
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
|
|
.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; }
|
|
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
|
.media-icon { font-size: 20px; color: var(--faint); }
|
|
.media-name { font-size: 10px; color: var(--muted); padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.media-del { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0; font-size: 10px; line-height: 1;
|
|
border: none; border-radius: 4px; background: #000a; color: #fff8; cursor: pointer; opacity: 0; transition: opacity .12s; }
|
|
.media-card:hover .media-del { opacity: 1; }
|
|
.media-del:hover { color: var(--danger); }
|
|
.media-card.picked { border-color: var(--amber); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent); }
|
|
|
|
/* 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-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: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink-0); }
|
|
.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; }
|
|
|
|
/* 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-render-prompt { 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-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
|
|
.pm-video { max-width: 100%; max-height: 100%; display: none; object-fit: contain; position: relative; z-index: 0; }
|
|
.pm-video.active { display: block; }
|
|
.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.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.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: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-render-prompt {
|
|
position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
|
|
font-size: 10.5px; font-family: var(--font-mono); line-height: 1.35; color: #ffd9a0;
|
|
background: #000c; border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
|
|
border-radius: 10px; padding: 6px 10px; pointer-events: none;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.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-block { margin-bottom: 16px; }
|
|
.char-hint { margin-bottom: 8px; }
|
|
.char-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.char-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line);
|
|
border-radius: 8px; background: var(--ink-2); cursor: pointer; transition: border-color .12s, background .12s; }
|
|
.char-row:hover { border-color: #4a4334; background: var(--ink-3); }
|
|
.char-row.on-scene { border-color: var(--teal-soft); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.25); }
|
|
.char-thumb { width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
|
|
background: var(--ink-0); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--faint); }
|
|
.char-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
|
.char-info { flex: 1; min-width: 0; }
|
|
.char-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.char-sub { font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.char-badge { font-size: 9px; font-family: var(--font-mono); color: var(--teal-soft); text-transform: uppercase; letter-spacing: .04em; }
|
|
.char-actions { display: flex; gap: 2px; flex-shrink: 0; }
|
|
.char-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
|
.char-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px;
|
|
border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); color: var(--amber-2); }
|
|
.char-chip.empty { color: var(--faint); font-style: italic; border-style: dashed; }
|
|
.char-chip-rm { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 0 2px; font-size: 10px; }
|
|
.char-chip-rm:hover { color: var(--danger); }
|
|
.clip-chars { display: flex; flex-wrap: wrap; gap: 3px; flex-shrink: 0; }
|
|
.clip-char { font-size: 9px; font-family: var(--font-mono); color: var(--amber-2); background: #2a2418;
|
|
border: 1px solid #4a4334; border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
|
|
.clip.has-media .clip-chars { position: relative; z-index: 1; }
|
|
|
|
/* 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-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
|
|
.insp-global-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
|
|
.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.trans { color: var(--faint); border-color: transparent; font-size: 9px; }
|
|
.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 .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-rating { font-size: 12px; padding: 3px 6px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; color: var(--amber-2); max-width: 200px; }
|
|
.render-prompt-warn {
|
|
border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
|
|
background: color-mix(in srgb, var(--amber-soft) 25%, var(--ink-1));
|
|
border-radius: 8px; padding: 8px 10px; margin: -4px 0 12px;
|
|
}
|
|
.render-prompt-warn-title { font-size: 11.5px; color: var(--amber-2); margin-bottom: 6px; }
|
|
.render-prompt-prev { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
|
|
.render-prompt-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); }
|
|
.render-prompt-text { font-size: 12px; color: var(--text); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
|
|
|
|
.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); }
|
|
.tl-gutter-tracks { flex: 1 1 auto; display: flex; flex-direction: column; min-height: calc(100% - 24px); }
|
|
.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; }
|
|
.tl-gutter-lane.video { flex: 1 1 88px; min-height: 72px; }
|
|
.tl-gutter-lane.audio { flex: 0 0 36px; height: 36px; }
|
|
.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; height: 100%; min-height: 100%; }
|
|
|
|
/* ruler */
|
|
.tl-ruler2 { position: relative; height: 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; }
|
|
|
|
.tl-audio-dd { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--line); }
|
|
.tl-audio-dd .chk span { font-size: 11px; }
|
|
|
|
/* tracks area (video + audio lanes) */
|
|
.tl-tracks { position: relative; min-height: calc(100% - 24px); display: flex; flex-direction: column; }
|
|
.tl-track2 { position: relative; flex: 1 1 88px; min-height: 72px; 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; height: 36px; border-bottom: 1px solid var(--line-2); }
|
|
.tl-audio-lane:last-child { border-bottom: none; }
|
|
.tl-audio-lane-body { position: absolute; inset: 0; }
|
|
.tl-aud-clip { position: absolute; top: 5px; bottom: 5px; box-sizing: border-box;
|
|
background: linear-gradient(180deg, #1e3a2f, #152820); border: 1px solid #2d5a45; border-radius: 5px;
|
|
display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 0; overflow: hidden; }
|
|
.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-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; }
|
|
.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.reordering { opacity: .8; z-index: 50; cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: none; }
|
|
body.tl-reordering { cursor: grabbing; user-select: none; }
|
|
.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.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; }
|
|
.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; top: 4px; right: 6px; font-size: 7px;
|
|
color: #57c98e; text-shadow: 0 0 5px rgba(87,201,142,.7); pointer-events: none; z-index: 4; }
|
|
.clip.trimming { border-color: var(--amber); z-index: 5; }
|
|
.clip-head { display: flex; align-items: center; gap: 6px; }
|
|
.clip-no { font-family: var(--font-mono); font-size: 11px; color: var(--amber); font-weight: 600; }
|
|
.clip-src { font-size: 12px; color: var(--faint); }
|
|
.clip-dur { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--faint); }
|
|
.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); color: var(--amber-2); line-height: 1.2;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
|
|
.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-actions { position: absolute; top: 5px; right: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
|
|
.clip:hover .clip-actions { opacity: 1; }
|
|
.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; }
|
|
|
|
/* seam: crossfade + transition type */
|
|
.seam { position: absolute; top: 12px; bottom: 12px; transform: translateX(-50%); display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; gap: 4px; z-index: 4; }
|
|
.xfade { height: 22px; border-radius: 4px; border: 1px dashed var(--line); cursor: ew-resize; position: relative;
|
|
background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--line) 3px, var(--line) 4px); }
|
|
.xfade.on { border-style: solid; border-color: var(--teal); background: linear-gradient(90deg, transparent, var(--teal-soft), transparent); }
|
|
.seam-type { font-size: 10px; padding: 2px 4px; background: var(--ink-2); text-align: center; max-width: 96px; }
|
|
|
|
/* 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%; }
|
|
|
|
/* ───────────────────────── 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); }
|
|
.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; }
|
|
.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-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; }
|
|
|
|
/* 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; }
|
|
|
|
.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: 1fr 1fr; gap: 8px 14px; }
|
|
.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; }
|
|
.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); }
|
|
.wire-select { flex: 1; }
|
|
.wire-multi { display: flex; flex-direction: column; gap: 4px; flex: 1; }
|
|
.wire-multi-row { display: flex; gap: 5px; align-items: center; }
|
|
.wire-multi-row .wire-select { flex: 1; }
|
|
.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); }
|
|
|
|
/* 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); } }
|