nodes/olivv-cs-ComfyUI-FunPack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: timeline toolbar wraps, quiet readouts, quieter form labels and chips

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
digital-garbage
2026-10-04 14:50:25 +03:00
co-authored by Claude Sonnet 5.5
parent 9db73bf7e3
commit b71926c3cf
2 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ui/composer/elements/polish.css
+13
View File
@@ -52,3 +52,16 @@ body { -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
.cx-nle-clip:hover { border-color: var(--line-hover); }
.cx-nle-clip.cx-on { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--elev-2)); }
.cx-nle-clip-title { font-weight: var(--fw-medium); }
/* toolbars inside a zone wrap instead of overlapping; readouts never break mid-phrase */
.cx-zone .cx-toolbar { flex-wrap: wrap; row-gap: var(--sp-2); }
.cx-zone .cx-toolbar-trailing { flex-wrap: wrap; }
.cx-zone .cx-toolbar .cx-hint, .cx-zone .cx-toolbar .cx-t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-zone .cx-toolbar .cx-hint { padding-inline: var(--sp-3); }
/* form fields: the label is the quiet half */
.cx-field { gap: var(--sp-3); }
.cx-field > .cx-label, .cx-field > label { color: var(--muted); font-size: var(--fs-5); font-weight: var(--fw-regular); }
.cx-eyebrow { color: var(--muted); font-weight: var(--fw-semibold); }
.cx-banner { border-radius: var(--r-4); }
.cx-chip { border-color: transparent; background: var(--elev-2); }
app/ui/features/timeline/index.js
+2 -2
View File
@@ -75,7 +75,7 @@ const tools = {
};
const draw = () => {
const open = p.project, ids = open ? sel.ids : [];
put(c.text.sm({ text: `${clock(head.at)} / ${clock(open ? totalSeconds(open) : 0)}` }).node,
put(c.hint.default({ text: `${clock(head.at)} / ${clock(open ? totalSeconds(open) : 0)}` }).node,
btn("＋ Add", () => { const sc = p.edit((pr) => edits.addScene(pr)); if (sc) p.select(sc.id); }, !open),
btn("Split", split, !ids.length, "Split the selected clip at the playhead"),
btn("Remove", () => ids.forEach((id) => p.edit((pr) => edits.removeScene(pr, id))), !ids.length),
@@ -94,7 +94,7 @@ const zoom = {
needs: ["say"],
setup({ host, app }) {
const b = (label, what, title) => c.button.sm({ label, tone: "ghost", title, onClick: () => app.say(what) }).node;
host.append(c.text.sm({ text: "J/K/L · S split · I/O in/out · +/- zoom" }).node, c.text.sm({ text: "zoom" }).node,
host.append(c.hint.default({ text: "J K L · S split · I O in/out · + − zoom" }).node,
b("−", "zoom.out", "Zoom out"), b("＋", "zoom.in", "Zoom in"), b("fit", "zoom.fit", "Fit the cut to the window"));
},
};