DemonGatanjieuandClaude Opus 5.5
049b265126
- A stop button on a running run (timeline, and beside the run-status button), and stop_run for the AI: only this run's prompts leave the queue or are interrupted; the step ends "cancelled" and a user's stop reaches the AI as a "stop" message (ai_run_control.py). - The run's progress carries ComfyUI's console since it began (the bar's note, models loading), time left and per step, and VRAM; once queued, each sampler's working size is estimated from the prompt, with warnings for an upscaled picture sampled again, a size past the card and a huge decode, for the user and in the AI's run news (ai_run_watch.py, ui_ai_run_live.js). - The materials picker opens as a side panel that leaves the page usable (the full-screen browser makes room), expands to the large window and back, and remembers the choice. - Esc closes the run-status card only (data-anomalous-escape). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
102 lines
3.4 KiB
CSS
102 lines
3.4 KiB
CSS
/* Compact execution status icon-button in the task toolbar + unclipped fixed popover card. */
|
|
.anomalous-ai-execution {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.anomalous-ai-status-btn {
|
|
position: relative;
|
|
gap: 5px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.anomalous-ai-status-btn.is-icon .anomalous-ai-status-dot {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.anomalous-ai-status-text {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.anomalous-ai-execution.is-open .anomalous-ai-status-btn {
|
|
border-color: var(--amb-border-strong);
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
color: var(--amb-text-main);
|
|
}
|
|
.anomalous-ai-status-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
flex: none;
|
|
border-radius: 50%;
|
|
background: var(--amb-text-dim);
|
|
}
|
|
.anomalous-ai-status-dot.is-running,
|
|
.anomalous-ai-status-dot.is-queued,
|
|
.anomalous-ai-status-dot.is-submitting,
|
|
.anomalous-ai-status-dot.is-tool {
|
|
background: var(--amb-ok);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-ok) 25%, transparent);
|
|
}
|
|
.anomalous-ai-status-dot.is-done { background: #41b883; }
|
|
.anomalous-ai-status-dot.is-untracked,
|
|
.anomalous-ai-status-dot.is-stopped,
|
|
.anomalous-ai-status-dot.is-asking { background: var(--amb-warn); }
|
|
.anomalous-ai-status-dot.is-error { background: var(--amb-danger); }
|
|
.anomalous-ai-status-dot.is-cancelled { background: var(--amb-text-dim); }
|
|
.anomalous-ai-status-btn.has-warning { border-color: color-mix(in srgb, var(--amb-warn) 60%, transparent); color: var(--amb-warn-text); }
|
|
.anomalous-ai-status-popover .anomalous-ai-estimate { margin-top: 10px; }
|
|
.anomalous-ai-status-dot.is-time { background: var(--amb-link); }
|
|
.anomalous-ai-status-dot.is-batch { background: #a78bfa; }
|
|
|
|
.anomalous-ai-status-popover {
|
|
position: fixed;
|
|
z-index: 1000000;
|
|
width: 300px;
|
|
box-sizing: border-box;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 12px;
|
|
background: var(--amb-bg-panel);
|
|
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
|
|
color: var(--amb-text-main);
|
|
font-size: 12.5px;
|
|
}
|
|
.anomalous-ai-execution-top {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
.anomalous-ai-execution-label { color: var(--amb-text-dim); font-size: 11.5px; }
|
|
.anomalous-ai-execution-badge { font-size: 13px; color: var(--amb-text-main); }
|
|
.anomalous-ai-execution-top button { margin-left: auto; }
|
|
.anomalous-ai-status-popover .anomalous-ai-run-progress { margin-top: 12px; }
|
|
.anomalous-ai-status-popover .anomalous-ai-run-bar { height: 6px; }
|
|
.anomalous-ai-execution-rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.anomalous-ai-execution-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--amb-text-soft);
|
|
}
|
|
.anomalous-ai-execution-hint { color: var(--amb-text-muted); line-height: 1.6; margin: 10px 0 0; }
|
|
.anomalous-ai-execution-contact {
|
|
margin-top: 10px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--amb-border);
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
.anomalous-ai-execution-error { color: var(--amb-danger); margin-top: 8px; overflow-wrap: anywhere; }
|
|
.anomalous-ai-state.is-idle, .anomalous-ai-state-icon.is-idle { color: var(--amb-text-dim); }
|