digital-garbage
457136ca68
t2v: projects carry generation_mode ("i2v" default). In t2v nothing checks or
reports a missing anchor, and a new scene starts empty rather than from an
image. Images stay wireable either way — the mode decides what is expected, not
what is allowed. Switchable any time in Project settings; the wizard writes it.
Scaling: one type scale (Apple's macOS text styles) replaces ~64 off-grid sizes
like 11.5px, body drops 14 → 13, and buttons/fields/menu items take their height
from shared control tokens instead of per-component padding. Fixes the timeline
zone head overlapping the panel above it: its status block wraps, and a fixed
34px height let it spill both ways.
Node cards carry their name and destination ON the tile instead of captioning it
from below, and no longer print the class twice. The add-node list flips above
the card when it would run off the bottom.
Fonts: Inter (open, Helvetica/SF-alike) with system-ui behind it, Inter Tight
for display, Roboto Mono for mono. Apple ships SF free but licenses it for work
on Apple platforms only, so it cannot be bundled.
Also: "Continue with <project>" on the wizard splash, and About reads
FunPack 4 "Blinding Blackout" 4.0.0.
141 lines
7.8 KiB
CSS
141 lines
7.8 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(--accent-hi); }
|
|
|
|
.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: var(--black);
|
|
}
|
|
.easy-preview-empty {
|
|
color: var(--faint); font-size: 13px; 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: color-mix(in srgb, var(--ink-0) 72%, transparent); 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: color-mix(in srgb, var(--ink-0) 72%, transparent); border: 1px solid var(--line); color: var(--muted);
|
|
font-size: 11px; 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(--accent), var(--accent-hi));
|
|
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: 12px; line-height: 1.45;
|
|
color: var(--accent); border-top: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
|
|
background: color-mix(in srgb, var(--accent) 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: 13px/1.4 var(--font-ui);
|
|
padding: 10px 12px;
|
|
}
|
|
.easy-prompt:focus { outline: none; border-color: var(--accent); }
|
|
.easy-actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
|
|
.easy-generate-btn { padding: 10px 26px; font-size: 13px; }
|
|
.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(--accent); }
|
|
.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(--accent); 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(--accent); }
|
|
.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(--accent); border-color: var(--accent); }
|
|
|
|
.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(--accent); }
|
|
.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: 11px; 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: color-mix(in srgb, var(--ink-0) 72%, transparent); 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(--accent-soft); border-color: var(--accent); }
|
|
.gal-pin-badge { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: 10px;
|
|
background: color-mix(in srgb, var(--ink-0) 72%, transparent); 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: color-mix(in srgb, var(--ink-0) 72%, transparent); 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(--accent); border-color: var(--accent); }
|
|
.gal-ref-btn.active { background: var(--accent); border-color: var(--accent); 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(--accent); border-radius: 4px;
|
|
padding: 1px 5px; line-height: 1.4; }
|