DemonGatanjieuandClaude Opus 5.5
d778aec946
Every page in both languages, all themes and at 480: - Give the window its own text colour: text with none took ComfyUI's, white on the light theme (Tidy headings and file names, the site chip). - Keep a task's link chip in its row, its x in reach, and colour the next-task chip. - Let choices in Settings wrap, the Models search shrink, and a workflow's preset row go to two lines. - Add --amb-on-link for text on the accent: pale in the dark themes, so white was hard to read. - Lists and colons follow the language (listSeparator, wordColon); tests/words_in_language.mjs keeps it so. - Right plurals in English, "AI" on the rail, one line left in Chinese translated. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
403 lines
22 KiB
CSS
403 lines
22 KiB
CSS
/* The flow over an AI task (ui_ai_flow.js), the step that waits for the user's OK and the Gates
|
|
window (ui_ai_gate.js), and the window after handing something to an AI (ui_ai_handoff.js). */
|
|
.anomalous-ai-flow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.anomalous-ai-flow-arrow { color: var(--amb-text-dim); }
|
|
|
|
.anomalous-ai-flow-stage {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 7px;
|
|
border: 1px solid transparent;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-ai-flow-stage:hover { border-color: var(--amb-link); color: var(--amb-text-main); }
|
|
|
|
.anomalous-ai-flow-mark {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--amb-text-dim);
|
|
}
|
|
|
|
.anomalous-ai-flow-stage.is-done .anomalous-ai-flow-mark { background: var(--amb-ok); }
|
|
.anomalous-ai-flow-stage.is-running .anomalous-ai-flow-mark { background: var(--amb-link); animation: anomalous-ai-flow-pulse 1.2s ease-in-out infinite; }
|
|
.anomalous-ai-flow-stage.is-error .anomalous-ai-flow-mark { background: var(--amb-danger); }
|
|
.anomalous-ai-flow-stage.is-asking {
|
|
border-color: var(--amb-warn);
|
|
background: color-mix(in srgb, var(--amb-warn) 14%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
.anomalous-ai-flow-stage.is-asking .anomalous-ai-flow-mark { background: var(--amb-warn); }
|
|
.anomalous-ai-flow-count { color: var(--amb-text-dim); font-size: 11px; }
|
|
|
|
@keyframes anomalous-ai-flow-pulse { 50% { opacity: 0.35; } }
|
|
|
|
.anomalous-ai-step.is-flash > .anomalous-ai-step-body {
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-link) 60%, transparent);
|
|
}
|
|
|
|
/* A step that waits for the user's OK. */
|
|
.anomalous-ai-step.is-asking > .anomalous-ai-step-dot { border-color: var(--amb-warn); color: var(--amb-warn); }
|
|
|
|
.anomalous-ai-gate {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
padding: 12px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-warn) 60%, transparent);
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--amb-warn) 7%, var(--amb-bg-panel));
|
|
}
|
|
|
|
.anomalous-ai-gate-title { color: var(--amb-text-main); font-size: 13.5px; font-weight: 600; }
|
|
.anomalous-ai-gate-why,
|
|
.anomalous-ai-gate-note { color: var(--amb-text-soft); font-size: 12px; }
|
|
|
|
.anomalous-ai-gate-lines {
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
gap: 4px 12px;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
}
|
|
.anomalous-ai-gate-lines dt { color: var(--amb-text-dim); }
|
|
.anomalous-ai-gate-lines dd { margin: 0; color: var(--amb-text-main); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
|
|
.anomalous-ai-gate-reason {
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 7px;
|
|
background: var(--amb-bg-panel);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.anomalous-ai-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
|
|
|
.anomalous-ai-gate-allow,
|
|
.anomalous-ai-gate-deny {
|
|
padding: 6px 16px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-ai-gate-allow { border-color: var(--amb-ok); background: color-mix(in srgb, var(--amb-ok) 22%, transparent); }
|
|
.anomalous-ai-gate-allow:hover { background: color-mix(in srgb, var(--amb-ok) 35%, transparent); }
|
|
.anomalous-ai-gate-deny:hover { border-color: var(--amb-danger); }
|
|
.anomalous-ai-gate-actions button:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
.anomalous-ai-gate-remember { display: inline-flex; align-items: center; gap: 6px; color: var(--amb-text-soft); font-size: 12px; }
|
|
|
|
.anomalous-ai-gate-answer { margin-top: 6px; color: var(--amb-text-soft); font-size: 12px; }
|
|
.anomalous-ai-gate-answer.is-allow { color: var(--amb-ok); }
|
|
.anomalous-ai-gate-answer.is-deny { color: var(--amb-danger); }
|
|
|
|
/* The Gates window. */
|
|
.anomalous-ai-gates { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
|
|
.anomalous-ai-gates-intro,
|
|
.anomalous-ai-gates-note { margin: 0; color: var(--amb-text-soft); font-size: 12.5px; line-height: 1.6; }
|
|
.anomalous-ai-gates-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px 16px;
|
|
padding: 10px 0;
|
|
border-top: 1px solid var(--amb-border);
|
|
}
|
|
.anomalous-ai-gates-words { flex: 1 1 220px; min-width: 0; }
|
|
.anomalous-ai-gates-name { color: var(--amb-text-main); font-size: 13px; font-weight: 600; }
|
|
.anomalous-ai-gates-tools { color: var(--amb-text-dim); font-size: 11.5px; }
|
|
.anomalous-ai-gates-choice { display: inline-flex; border: 1px solid var(--amb-border); border-radius: 8px; overflow: hidden; }
|
|
.anomalous-ai-gates-option {
|
|
padding: 5px 12px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-ai-gates-option + .anomalous-ai-gates-option { border-left: 1px solid var(--amb-border); }
|
|
.anomalous-ai-gates-option:hover:not(.is-on) { background: color-mix(in srgb, var(--amb-link) 14%, transparent); color: var(--amb-text-main); }
|
|
.anomalous-ai-gates-option.is-on { background: color-mix(in srgb, var(--amb-link) 22%, transparent); color: var(--amb-text-main); }
|
|
|
|
@media (prefers-reduced-motion: reduce) { .anomalous-ai-flow-stage.is-running .anomalous-ai-flow-mark { animation: none; } }
|
|
|
|
/* After "Hand to AI". */
|
|
.anomalous-ai-handoff { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
|
|
.anomalous-ai-handoff-text { margin: 0; color: var(--amb-text-soft); font-size: 12.5px; line-height: 1.6; }
|
|
.anomalous-ai-handoff-actions { display: flex; flex-wrap: wrap; gap: 14px; }
|
|
|
|
/* A run's progress under its step (ui_ai_results.js runProgress). */
|
|
.anomalous-ai-run-progress { display: flex; flex-direction: column; gap: 5px; max-width: 520px; margin: 6px 0 4px; }
|
|
.anomalous-ai-run-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
|
|
.anomalous-ai-run-words { min-width: 0; color: var(--amb-text-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
|
|
.anomalous-ai-run-percent { flex: none; color: var(--ai-run, var(--amb-ok)); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.anomalous-ai-run-bar { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(var(--amb-ink-rgb), 0.08); }
|
|
.anomalous-ai-run-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--ai-run, var(--amb-ok)); transition: width 0.6s ease; }
|
|
.anomalous-ai-run-bar.is-waiting .anomalous-ai-run-fill { width: 30%; animation: anomalous-ai-run-wait 1.6s ease-in-out infinite; }
|
|
@keyframes anomalous-ai-run-wait { 0% { left: -30%; } 100% { left: 100%; } }
|
|
@media (prefers-reduced-motion: reduce) { .anomalous-ai-run-bar.is-waiting .anomalous-ai-run-fill { animation: none; } }
|
|
/* Beside the bar, the stop button (ui_ai_run_live.js); under it the time left, memory and the console. */
|
|
.anomalous-ai-run-row { display: flex; align-items: center; gap: 10px; }
|
|
.anomalous-ai-run-row .anomalous-ai-run-bar { flex: 1; }
|
|
.anomalous-ai-run-stop {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-danger) 55%, transparent);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--amb-danger) 12%, transparent);
|
|
color: var(--amb-danger-text);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-ai-run-stop:hover { background: color-mix(in srgb, var(--amb-danger) 24%, transparent); }
|
|
.anomalous-ai-run-stop:disabled { cursor: progress; opacity: 0.7; }
|
|
.anomalous-ai-run-stop.is-compact { width: 28px; height: 28px; margin-left: 4px; padding: 0; justify-content: center; }
|
|
.anomalous-ai-run-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--amb-text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
|
|
.anomalous-ai-run-fact { display: inline-flex; align-items: center; gap: 5px; }
|
|
.anomalous-ai-run-console { min-width: 0; border-radius: 8px; background: rgba(var(--amb-ink-rgb), 0.05); }
|
|
.anomalous-ai-run-console-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
padding: 4px 8px;
|
|
color: var(--amb-text-soft);
|
|
font: 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
.anomalous-ai-run-console-head::-webkit-details-marker { display: none; }
|
|
.anomalous-ai-run-console-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.anomalous-ai-run-console-lines {
|
|
margin: 0;
|
|
padding: 4px 8px 8px 27px;
|
|
overflow-x: auto;
|
|
color: var(--amb-text-dim);
|
|
font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
white-space: pre;
|
|
}
|
|
/* What the run really was (ui_ai_run_map.js): changes since the run before, one line, the boxes. */
|
|
.anomalous-ai-run-map { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; margin: 6px 0 4px; }
|
|
.anomalous-ai-run-map-changes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
|
|
.anomalous-ai-run-map-changes-title { margin-right: 2px; color: var(--amb-text-dim); font-size: 11.5px; }
|
|
.anomalous-ai-run-map-change {
|
|
padding: 1px 8px;
|
|
border-radius: 6px;
|
|
background: color-mix(in srgb, var(--amb-warn) 16%, transparent);
|
|
color: var(--amb-warn-text);
|
|
font-size: 12px;
|
|
line-height: 19px;
|
|
}
|
|
.anomalous-ai-run-map-change.is-added { background: color-mix(in srgb, var(--amb-ok) 16%, transparent); color: var(--amb-ok-text, var(--amb-ok)); }
|
|
.anomalous-ai-run-map-change.is-removed { background: rgba(var(--amb-ink-rgb), 0.08); color: var(--amb-text-soft); text-decoration: line-through; }
|
|
.anomalous-ai-run-map-more { min-width: 0; border: 1px solid var(--amb-border); border-radius: 10px; background: rgba(var(--amb-ink-rgb), 0.025); }
|
|
.anomalous-ai-run-map-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 11px; cursor: pointer; list-style: none; }
|
|
.anomalous-ai-run-map-head::-webkit-details-marker { display: none; }
|
|
.anomalous-ai-run-map-head::before { display: inline-block; color: var(--amb-text-dim); content: "▸"; transition: transform 0.15s; }
|
|
.anomalous-ai-run-map-more[open] > .anomalous-ai-run-map-head::before { transform: rotate(90deg); }
|
|
.anomalous-ai-run-map-title { flex: none; color: var(--amb-text-main); font-size: 12.5px; font-weight: 650; }
|
|
.anomalous-ai-run-map-line { flex: 1 1 140px; min-width: 0; overflow: hidden; color: var(--amb-text-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
|
.anomalous-ai-run-map-more > .anomalous-ai-diagram-wrap { margin: 0 10px; }
|
|
.anomalous-ai-run-map-note { padding: 2px 11px 9px; color: var(--amb-text-dim); font-size: 11px; }
|
|
/* How big the run's samplers work, and what is too big for the card. */
|
|
.anomalous-ai-estimate { display: flex; flex-direction: column; gap: 6px; max-width: 620px; margin: 6px 0 4px; }
|
|
.anomalous-ai-estimate.is-warn {
|
|
padding: 9px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--amb-warn) 45%, transparent);
|
|
border-radius: 10px;
|
|
background: color-mix(in srgb, var(--amb-warn) 10%, transparent);
|
|
}
|
|
.anomalous-ai-estimate-warning { display: flex; gap: 8px; color: var(--amb-warn-text); font-size: 12.5px; line-height: 1.55; }
|
|
.anomalous-ai-estimate-warning .anomalous-tb-icon { margin-top: 2px; }
|
|
.anomalous-ai-estimate-sizes { color: var(--amb-text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
|
|
|
|
/* Marking a picture for the AI (ui_ai_marker.js), and the marks sent, in the timeline. */
|
|
.anomalous-ai-marker-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000001; /* as the AI windows: above the image inspector */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.anomalous-ai-marker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
width: min(1280px, 100%);
|
|
max-height: 100%;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 14px;
|
|
background: var(--amb-bg-dialog);
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.anomalous-ai-marker-head { display: flex; align-items: center; justify-content: space-between; }
|
|
.anomalous-ai-marker-title { color: var(--amb-text-main); font-size: 15px; font-weight: 700; }
|
|
.anomalous-ai-marker-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; min-height: 0; }
|
|
.anomalous-ai-marker-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
|
|
.anomalous-ai-marker-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
|
|
.anomalous-ai-marker-gap { width: 8px; }
|
|
.anomalous-ai-marker-tool {
|
|
padding: 5px 11px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-ai-marker-tool:hover { border-color: var(--amb-link); color: var(--amb-text-main); }
|
|
.anomalous-ai-marker-tool.is-on { border-color: var(--amb-link); background: color-mix(in srgb, var(--amb-link) 20%, transparent); color: var(--amb-text-main); }
|
|
.anomalous-ai-marker-tool.is-mask.is-on { border-color: #ff40a0; background: rgba(255, 64, 160, 0.18); }
|
|
.anomalous-ai-marker-size { display: inline-flex; align-items: center; gap: 6px; color: var(--amb-text-soft); font-size: 12px; }
|
|
.anomalous-ai-marker-size input { width: 90px; }
|
|
/* How to change it: three ways to pick one of; "only the marked areas" in the repaint brush's pink. */
|
|
.anomalous-ai-marker-modes { display: flex; flex-direction: column; gap: 6px; }
|
|
.anomalous-ai-marker-modes-title { color: var(--amb-text-dim); font-size: 11.5px; font-weight: 600; }
|
|
.anomalous-ai-marker-mode { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--amb-border); border-radius: 9px; background: none; color: var(--amb-text-soft); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
|
|
.anomalous-ai-marker-mode:hover { border-color: var(--amb-border-strong); background: rgba(var(--amb-ink-rgb), 0.05); color: var(--amb-text-main); }
|
|
.anomalous-ai-marker-mode.is-on { border-color: var(--amb-link); background: color-mix(in srgb, var(--amb-link) 14%, transparent); color: var(--amb-text-main); }
|
|
.anomalous-ai-marker-mode[data-mode="local"].is-on { border-color: #ff40a0; background: rgba(255, 64, 160, 0.12); }
|
|
.anomalous-ai-marker-mode-dot { flex: none; box-sizing: border-box; width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--amb-text-dim); border-radius: 50%; }
|
|
.anomalous-ai-marker-mode.is-on .anomalous-ai-marker-mode-dot { border: 4px solid var(--amb-link); }
|
|
.anomalous-ai-marker-mode[data-mode="local"].is-on .anomalous-ai-marker-mode-dot { border-color: #ff40a0; }
|
|
.anomalous-ai-marker-mode-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
.anomalous-ai-marker-mode-name { font-size: 12.5px; font-weight: 600; }
|
|
.anomalous-ai-marker-mode-why { color: var(--amb-text-dim); font-size: 11.5px; line-height: 1.5; }
|
|
.anomalous-ai-marks-mode { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--amb-link) 14%, transparent); color: var(--amb-text-main); font-size: 11.5px; }
|
|
.anomalous-ai-marks-mode.is-local { background: rgba(255, 64, 160, 0.16); }
|
|
.anomalous-ai-marks-inpaint { align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: rgba(255, 64, 160, 0.16); color: var(--amb-text-main); font-size: 11.5px; }
|
|
.anomalous-ai-marker-color { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
|
|
.anomalous-ai-marker-color.is-on { border-color: var(--amb-text-main); }
|
|
.anomalous-ai-marker-stage { position: relative; align-self: center; max-width: 100%; line-height: 0; }
|
|
.anomalous-ai-marker-picture { display: block; max-width: 100%; max-height: 70vh; border-radius: 8px; user-select: none; -webkit-user-drag: none; }
|
|
.anomalous-ai-marker-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
|
|
.anomalous-ai-marker-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
|
|
.anomalous-ai-marker-empty, .anomalous-ai-marker-note { color: var(--amb-text-dim); font-size: 12px; line-height: 1.6; }
|
|
.anomalous-ai-marker-empty[hidden] { display: none; }
|
|
.anomalous-ai-marker-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
|
|
.anomalous-ai-marker-row { display: flex; align-items: center; gap: 6px; }
|
|
.anomalous-ai-marker-badge {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
color: #111;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.anomalous-ai-marker-shape { flex-shrink: 0; color: var(--amb-text-dim); font-size: 11.5px; }
|
|
.anomalous-ai-marker-input, .anomalous-ai-marker-whole {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 6px 9px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 7px;
|
|
background: var(--amb-bg-panel);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
resize: vertical;
|
|
}
|
|
.anomalous-ai-marker-input:focus, .anomalous-ai-marker-whole:focus { border-color: var(--amb-link); outline: none; }
|
|
.anomalous-ai-marker-remove { padding: 0 6px; border: 0; background: none; color: var(--amb-text-dim); font-size: 15px; cursor: pointer; }
|
|
.anomalous-ai-marker-remove:hover { color: var(--amb-danger); }
|
|
.anomalous-ai-marker-send {
|
|
padding: 8px 14px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: var(--amb-link);
|
|
color: var(--amb-on-link);
|
|
font: inherit;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-ai-marker-send:disabled { opacity: 0.5; cursor: default; }
|
|
@media (max-width: 760px) { .anomalous-ai-marker-body { grid-template-columns: 1fr; } }
|
|
|
|
.anomalous-ai-marks-sent { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
|
|
.anomalous-ai-marks-sent-picture { padding: 0; border: 1px solid var(--amb-border); border-radius: 10px; overflow: hidden; background: none; cursor: zoom-in; }
|
|
.anomalous-ai-marks-sent-picture img { display: block; width: 220px; height: 220px; object-fit: contain; background: rgba(var(--amb-ink-rgb), 0.04); }
|
|
.anomalous-ai-marks-sent-words { display: flex; flex: 1 1 220px; flex-direction: column; gap: 6px; min-width: 0; }
|
|
.anomalous-ai-marks-sent-notes { margin: 0; padding-left: 20px; color: var(--amb-text-main); font-size: 12.5px; line-height: 1.7; }
|
|
.anomalous-ai-pic-tool.is-mark { border-color: color-mix(in srgb, var(--amb-warn) 70%, transparent); }
|
|
.anomalous-ai-marker-whole { flex: none; }
|
|
|
|
/* The run map's two views: told simply (ui_ai_run_story.js) or drawn in full. */
|
|
.anomalous-ai-run-map-views { display: inline-flex; gap: 2px; margin: 0 11px 8px; padding: 2px; border: 1px solid var(--amb-border); border-radius: 8px; }
|
|
.anomalous-ai-run-map-tab { padding: 3px 12px; border: 0; border-radius: 6px; background: none; color: var(--amb-text-soft); font: inherit; font-size: 12px; cursor: pointer; }
|
|
.anomalous-ai-run-map-tab.is-on { background: color-mix(in srgb, var(--amb-link) 20%, transparent); color: var(--amb-text-main); font-weight: 600; }
|
|
.anomalous-ai-run-map-view > .anomalous-ai-diagram-wrap { margin: 0 10px; }
|
|
.anomalous-ai-story { display: flex; flex-direction: column; gap: 4px; padding: 0 11px 4px; }
|
|
.anomalous-ai-story-part { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--amb-border); border-radius: 10px; background: rgba(var(--amb-ink-rgb), 0.025); }
|
|
.anomalous-ai-story-part.is-end { background: none; border-style: dashed; }
|
|
.anomalous-ai-story-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
|
.anomalous-ai-story-number { color: var(--amb-text-main); font-size: 13px; font-weight: 700; }
|
|
.anomalous-ai-story-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; gap: 8px; }
|
|
.anomalous-ai-story-label { padding-top: 3px; color: var(--amb-text-dim); font-size: 11.5px; }
|
|
.anomalous-ai-story-what { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
|
|
.anomalous-ai-story-chip {
|
|
max-width: 100%;
|
|
padding: 2px 9px;
|
|
overflow: hidden;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12.5px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
.anomalous-ai-story-chip:hover { border-color: var(--amb-link); }
|
|
.anomalous-ai-story-chip.is-model, .anomalous-ai-story-chip.is-lora { background: color-mix(in srgb, #a487f5 18%, transparent); }
|
|
.anomalous-ai-story-chip.is-model { font-weight: 650; }
|
|
.anomalous-ai-story-chip.is-prompt { background: color-mix(in srgb, var(--amb-ok) 14%, transparent); }
|
|
.anomalous-ai-story-chip.is-negative { background: color-mix(in srgb, var(--amb-danger, #e0645c) 12%, transparent); }
|
|
.anomalous-ai-story-chip.is-sampler { background: color-mix(in srgb, var(--amb-link) 16%, transparent); }
|
|
.anomalous-ai-story-chip.is-size, .anomalous-ai-story-chip.is-image, .anomalous-ai-story-chip.is-upscale { background: color-mix(in srgb, var(--amb-warn) 16%, transparent); }
|
|
.anomalous-ai-story-chip.is-save { background: rgba(var(--amb-ink-rgb), 0.1); }
|
|
.anomalous-ai-story-plus, .anomalous-ai-story-arrow { color: var(--amb-text-dim); font-size: 12px; }
|
|
.anomalous-ai-story-none { color: var(--amb-text-dim); font-size: 12px; }
|
|
.anomalous-ai-story-down { color: var(--amb-text-dim); font-size: 13px; line-height: 1; text-align: center; }
|
|
.anomalous-ai-story-hint { display: flex; align-items: center; gap: 5px; padding-top: 2px; color: var(--amb-text-dim); font-size: 11px; }
|