digital-garbageandClaude Opus 5
9eb56e791b
Replaces the Engine Settings 'Reference media' tab. Any image / video / audio in the Media Bin (Editor) or Gallery (Easy Gen) takes an 'R' mark beside the identity pin; any number can carry one, and mark ORDER is the numbering the badge shows. Each marked item then appears as an input source in Models & Pipeline — 'R1 · face.png (image)' — for every socket its kind can fill, so references reach a node the same way the timeline image does. At generation the marked files are copied into ComfyUI's input folder and the builder injects one loader per reference, chosen by what the DESTINATION socket asks for (IMAGE / AUDIO / VIDEO), shared when two sockets take the same one. A reference whose file is gone, or one no installed node can load into that socket, is reported against the socket that wanted it instead of silently unwired. The editor no longer feeds Studio's built-in ref2va list: reference media is wired now, not configured. Project.h3_references stays readable so old project files still load, but nothing writes or sends it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
141 lines
7.6 KiB
CSS
141 lines
7.6 KiB
CSS
/* Easy Gen layout on top of the Editor's shared styles.css (design tokens,
|
|
.btn/.modal/.sw-*/.welcome-* rules) — big preview, prompt bar, nothing else. */
|
|
|
|
html, body.easy-body {
|
|
margin: 0; height: 100%; background: var(--ink-0); color: var(--text);
|
|
font-family: var(--font-ui);
|
|
}
|
|
|
|
.easy-app {
|
|
height: 100vh; display: flex; flex-direction: column;
|
|
}
|
|
|
|
.easy-top {
|
|
height: var(--menubar-h); flex: none; display: flex; align-items: center; gap: 14px;
|
|
padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--ink-1);
|
|
}
|
|
.easy-project-name { color: var(--muted); font-size: 13px; }
|
|
.easy-top .easy-health-chip { margin-left: auto; }
|
|
a.brand { text-decoration: none; color: inherit; }
|
|
a.brand:hover .brand-sub { color: var(--amber-2); }
|
|
|
|
.easy-preview {
|
|
flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
|
|
background: var(--ink-0); position: relative; padding: 24px;
|
|
}
|
|
.easy-preview-inner {
|
|
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.easy-preview-inner img, .easy-preview-inner video {
|
|
max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: var(--shadow);
|
|
background: #000;
|
|
}
|
|
.easy-preview-empty {
|
|
color: var(--faint); font-size: 14px; font-family: var(--font-display);
|
|
}
|
|
.easy-preview-error { color: var(--danger); max-width: 60ch; text-align: center; white-space: pre-wrap; }
|
|
|
|
.easy-preview-close {
|
|
position: absolute; top: 34px; right: 34px; width: 28px; height: 28px; padding: 0;
|
|
border-radius: 50%; background: rgba(12,11,9,.72); border: 1px solid var(--line);
|
|
color: var(--text); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
backdrop-filter: blur(2px); transition: border-color .12s, color .12s;
|
|
}
|
|
.easy-preview-close[hidden] { display: none; } /* class display:flex above would otherwise beat [hidden] */
|
|
.easy-preview-close:hover { border-color: var(--danger); color: var(--danger); }
|
|
.easy-preview-badge {
|
|
position: absolute; top: 34px; left: 34px; padding: 4px 10px; border-radius: 999px;
|
|
background: rgba(12,11,9,.72); border: 1px solid var(--line); color: var(--muted);
|
|
font-size: 11.5px; letter-spacing: .3px; backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.easy-progress {
|
|
position: absolute; left: 24px; right: 24px; bottom: 24px;
|
|
background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius);
|
|
padding: 10px 14px; box-shadow: var(--shadow);
|
|
}
|
|
.easy-progress-bar {
|
|
height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--amber), var(--amber-2));
|
|
width: 0%; transition: width .2s ease; margin-bottom: 6px;
|
|
}
|
|
.easy-progress-row { display: flex; align-items: center; gap: 10px; }
|
|
.easy-progress-label { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); font-family: var(--font-mono);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.easy-progress-stop:disabled { opacity: .6; cursor: default; }
|
|
|
|
/* Full-width notice between the preview and the Generate row: a setting that is on
|
|
but cannot do anything should be readable without opening any panel. */
|
|
.easy-warn-strip {
|
|
flex: none; padding: 9px 16px; font-size: 12.5px; line-height: 1.45;
|
|
color: var(--amber); border-top: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
|
|
background: color-mix(in srgb, var(--amber) 9%, transparent);
|
|
}
|
|
.easy-warn-strip[hidden] { display: none; }
|
|
|
|
.easy-bar {
|
|
flex: none; display: flex; align-items: flex-end; gap: 12px;
|
|
padding: 14px 16px; border-top: 1px solid var(--line); background: var(--ink-1);
|
|
}
|
|
.easy-upload-btn, .easy-gallery-btn, .easy-vars-btn { flex: none; align-self: stretch; padding: 0 16px; }
|
|
.easy-prompt {
|
|
flex: 1; resize: none; background: var(--ink-2); border: 1px solid var(--line);
|
|
border-radius: var(--radius); color: var(--text); font: 14px/1.4 var(--font-ui);
|
|
padding: 10px 12px;
|
|
}
|
|
.easy-prompt:focus { outline: none; border-color: var(--amber); }
|
|
.easy-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
|
|
.easy-generate-btn { padding: 10px 26px; font-size: 14px; }
|
|
.easy-advanced-btn { align-self: center; }
|
|
|
|
/* Prompt $name variables — own modal window, opened from the header button. */
|
|
.easy-vars-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
|
|
.easy-vars-hint.easy-var-warn { color: var(--amber); }
|
|
.easy-vars-empty { color: var(--faint); font-size: 12px; }
|
|
.easy-var-list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
|
|
.easy-var-row { display: flex; gap: 6px; align-items: flex-start; width: 100%; }
|
|
.easy-var-row > .easy-var-dollar, .easy-var-row > .easy-var-eq, .easy-var-row > .btn { margin-top: 6px; }
|
|
.easy-var-dollar { color: var(--amber); font-family: var(--font-mono); opacity: .8; }
|
|
.easy-var-eq { color: var(--muted); }
|
|
.easy-var-in {
|
|
background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
|
|
color: var(--text); font: 13px/1.4 var(--font-ui); padding: 6px 9px; min-width: 0;
|
|
}
|
|
.easy-var-in:focus { outline: none; border-color: var(--amber); }
|
|
.easy-var-name { flex: 0 0 22%; font-family: var(--font-mono); }
|
|
/* Value is an auto-growing textarea (JS sets the height) — no manual resize handle, no scrollbar. */
|
|
.easy-var-val { flex: 1; resize: none; overflow: hidden; }
|
|
.easy-var-row .btn { flex: 0 0 auto; }
|
|
#easy-vars-btn.easy-vars-warn { color: var(--amber); border-color: var(--amber); }
|
|
|
|
.es-io-controls { display: flex; align-items: center; gap: 8px; }
|
|
.es-io-mode { background: var(--ink-2); border: 1px solid var(--line); color: var(--text);
|
|
border-radius: 6px; font-size: 12px; padding: 4px 6px; }
|
|
|
|
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
|
|
.gal-cell { cursor: pointer; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
|
|
background: var(--ink-2); transition: border-color .15s; }
|
|
.gal-cell:hover { border-color: var(--amber); }
|
|
.gal-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--ink-0); display: flex; align-items: center; justify-content: center; }
|
|
.gal-thumb img, .gal-thumb video { width: 100%; height: 100%; object-fit: cover; }
|
|
.gal-name { padding: 6px 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap;
|
|
overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.gal-pin-btn { position: absolute; top: 4px; right: 4px; z-index: 2; width: 22px; height: 22px;
|
|
border-radius: 6px; background: rgba(10, 9, 7, .72); border: 1px solid var(--line);
|
|
filter: grayscale(1); font-size: 12px; cursor: pointer; display: flex; align-items: center;
|
|
justify-content: center; padding: 0; }
|
|
.gal-pin-btn:hover { filter: none; }
|
|
.gal-pin-btn.active { filter: none; background: var(--amber-soft); border-color: var(--amber); }
|
|
.gal-pin-badge { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: 10.5px;
|
|
background: rgba(10, 9, 7, .72); border-radius: 4px; padding: 1px 4px; line-height: 1.4; }
|
|
/* Reference mark — sits under the pin so both are reachable on the same tile. */
|
|
.gal-ref-btn { position: absolute; top: 30px; right: 4px; z-index: 2; width: 22px; height: 22px;
|
|
border-radius: 6px; background: rgba(10, 9, 7, .72); border: 1px solid var(--line);
|
|
color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; display: flex;
|
|
align-items: center; justify-content: center; padding: 0; }
|
|
.gal-ref-btn:hover { color: var(--amber); border-color: var(--amber); }
|
|
.gal-ref-btn.active { background: var(--amber); border-color: var(--amber); color: var(--ink-0); }
|
|
.gal-ref-badge { position: absolute; bottom: 4px; left: 4px; z-index: 2; font-size: 10px;
|
|
font-weight: 700; color: var(--ink-0); background: var(--amber); border-radius: 4px;
|
|
padding: 1px 5px; line-height: 1.4; }
|