Files
DemonGatanjieu-Anomalous_Mo…/web/styles/48-ai-blocks.css
T
DemonGatanjieuandClaude Opus 5.5 c3433a9241 Pick a way for a task, and ship official example workflows
Ways: "Use it this time" in the Ways view, for one task. It joins the
task's picks as a new kind, the AI is told, and add_nodes builds that way
for its use whichever one the AI asks for. "Only" lets in the nodes a
picked way builds.

Examples: text to picture, two passes, picture to picture and repainting
an area, on ComfyUI's own nodes. One card, first on the Workflows page,
opens them in a tab of their own. The files name no model or picture; a
checkpoint and a picture that are here are filled in when one is read.
list_workflows gives them to an AI when no saved workflow fits, and they
open and run by name like saved ones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-06 00:51:26 +08:00

70 lines
3.7 KiB
CSS

/* The side column's Ways view (ui_ai_blocks.js): the ready-made blocks by job, each with its
words, what it lacks (greyed) and its switch for the AI. */
.anomalous-ai-blocks { display: flex; flex-direction: column; gap: 14px; }
.anomalous-ai-blocks-note { color: var(--amb-text-soft); font-size: 12.5px; line-height: 1.5; }
.anomalous-ai-blocks-note.is-error { color: var(--amb-warn); }
.anomalous-ai-blocks-group { display: flex; flex-direction: column; gap: 6px; }
.anomalous-ai-blocks-job { color: var(--amb-text-soft); font-size: 12px; font-weight: 600; }
.anomalous-ai-block {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 11px;
border: 1px solid var(--amb-border);
border-radius: 9px;
background: rgba(var(--amb-ink-rgb), 0.03);
}
.anomalous-ai-block.is-missing { background: none; border-style: dashed; }
.anomalous-ai-block.is-missing .anomalous-ai-block-title,
.anomalous-ai-block.is-missing .anomalous-ai-block-about,
.anomalous-ai-block.is-off .anomalous-ai-block-title,
.anomalous-ai-block.is-off .anomalous-ai-block-about { color: var(--amb-text-soft); opacity: 0.75; }
.anomalous-ai-block-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.anomalous-ai-block-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.anomalous-ai-block-title { color: var(--amb-text-main); font-size: 13.5px; font-weight: 600; }
.anomalous-ai-block-state {
padding: 1px 7px;
border-radius: 6px;
background: color-mix(in srgb, var(--amb-warn) 18%, transparent);
color: var(--amb-text-main);
font-size: 11.5px;
}
.anomalous-ai-block-state.is-ready { background: color-mix(in srgb, var(--amb-ok) 18%, transparent); }
.anomalous-ai-block-about { color: var(--amb-text-main); font-size: 12.5px; line-height: 1.5; }
.anomalous-ai-block-source { color: var(--amb-text-soft); font-size: 11.5px; }
.anomalous-ai-block-lacks { display: flex; flex-wrap: wrap; gap: 6px; }
.anomalous-ai-block-lack {
padding: 2px 8px;
border: 1px solid color-mix(in srgb, var(--amb-warn) 45%, transparent);
border-radius: 6px;
background: none;
color: var(--amb-text-main);
font: inherit;
font-size: 11.5px;
}
.anomalous-ai-block-lack.is-pack { cursor: pointer; }
.anomalous-ai-block-lack.is-pack:hover { background: color-mix(in srgb, var(--amb-warn) 14%, transparent); }
.anomalous-ai-block-switch { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--amb-link); cursor: pointer; }
.anomalous-ai-block-models { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.anomalous-ai-block-model {
padding: 2px 8px;
border: 1px solid var(--amb-border);
border-radius: 6px;
background: none;
color: var(--amb-text-main);
font: inherit;
font-size: 11.5px;
cursor: pointer;
}
.anomalous-ai-block-model:hover:not(:disabled) { background: rgba(var(--amb-ink-rgb), 0.07); }
.anomalous-ai-block-model.is-here { cursor: default; border-color: color-mix(in srgb, var(--amb-ok) 45%, transparent); }
.anomalous-ai-block-more > summary { cursor: pointer; color: var(--amb-text-soft); font-size: 11.5px; width: fit-content; }
.anomalous-ai-block-more[open] > summary { margin-bottom: 4px; }
/* Picks a way for the task shown (ui_ai_blocks.js useButton). */
.anomalous-ai-block-use { margin-left: auto; padding: 1px 8px; border: 1px solid var(--amb-border-strong); border-radius: 6px; background: none; color: var(--amb-text-soft); font: inherit; font-size: 11.5px; cursor: pointer; }
.anomalous-ai-block-use:hover { border-color: var(--amb-link); color: var(--amb-text-main); }
.anomalous-ai-block-use.is-on { border-color: var(--amb-link); background: color-mix(in srgb, var(--amb-link) 16%, transparent); color: var(--amb-text-main); }