digital-garbageandClaude Sonnet 4.6
f9a96a9827
Pipeline requirements panel (top of Models modal): - Shows every required/optional pipeline input (MODEL, CLIP, Video VAE, Audio VAE, Audio latent, Source image, Initial latent) with satisfaction status. - Red row + hint + 'Add' button for unsatisfied required inputs — clicking Add pre-selects the right role in the composer so user knows exactly what to add. - Green row when satisfied; optional inputs shown below in a grayed-out group. - Overall 'Pipeline ready' status after all required inputs are met. Backend: - nodes.py: PIPELINE_REQUIREMENTS constant with human-readable labels and hints. Added 'audio_encoder' role for Audio Encoder nodes (outputs LATENT for audio path). - server.py: pipeline-ports response now includes 'requirements' array. Friendly generation errors (store.js): - _friendlyGenError() maps technical builder messages (audiodec.audio_vae no source, audio_latent no source, etc.) to plain-English explanations pointing to Models. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
464 lines
32 KiB
CSS
464 lines
32 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;
|
|
--timeline-h: 262px;
|
|
--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); }
|
|
|
|
/* ───────────────────────── WORKSPACE GRID ───────────────────────── */
|
|
.workspace { height: calc(100% - var(--menubar-h)); display: flex; flex-direction: column; }
|
|
.row-main { flex: 1; display: flex; min-height: 0; }
|
|
.right-stack { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
|
|
.zone { background: var(--ink-1); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
|
|
.media { width: var(--media-w); border-right: 1px solid var(--line); }
|
|
.preview { flex: 1; border-bottom: 1px solid var(--line); }
|
|
.inspector { height: 340px; min-height: 120px; }
|
|
.timeline { height: var(--timeline-h); border-top: 1px solid var(--line); }
|
|
|
|
.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); }
|
|
.zone-head-right { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); display: flex; gap: 10px; align-items: center; }
|
|
.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) */
|
|
.bin-tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
|
|
.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-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); }
|
|
|
|
/* library lists (shortcuts / transitions) */
|
|
.bin-toolbar { display: flex; gap: 5px; flex-wrap: wrap; }
|
|
.bin-toolbar .btn { flex-shrink: 0; }
|
|
.lib-search { width: 100%; }
|
|
.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-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; align-items: center; justify-content: center; position: relative; }
|
|
.program::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px 10px rgba(0,0,0,.65); }
|
|
.program .result-media { max-width: 100%; max-height: 100%; display: block; }
|
|
.program-empty { text-align: center; color: var(--faint); }
|
|
.program-empty .reel { font-size: 40px; opacity: .35; margin-bottom: 10px; }
|
|
.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; }
|
|
.gen-readout .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulse 1s infinite; }
|
|
.gen-readout.error { color: var(--danger); }
|
|
.gen-readout.error .pulse { background: var(--danger); animation: none; }
|
|
@keyframes pulse { 50% { opacity: .25; } }
|
|
.result-cap { position: absolute; top: 10px; left: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: #0008; padding: 3px 8px; border-radius: 6px; }
|
|
|
|
/* ───────────────────────── 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; }
|
|
.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-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; }
|
|
.tl-content { position: relative; 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; }
|
|
|
|
/* track */
|
|
.tl-track2 { position: relative; height: calc(100% - 24px); padding: 12px 0; }
|
|
.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.selected { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-soft); z-index: 3; }
|
|
.clip.selected::before { background: var(--teal); opacity: 1; }
|
|
.clip.excluded { opacity: .42; }
|
|
.clip.excluded::before { background: var(--faint); }
|
|
.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-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-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-left-color: var(--danger); }
|
|
.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-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); } }
|