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>
812 lines
25 KiB
CSS
812 lines
25 KiB
CSS
/* A workflow's details (ui_recipe_detail.js and its parts): the bar, the flow (ui_recipe_flow.js),
|
|
the preset tabs (ui_recipe_sets.js) and the panel of the tab chosen (ui_recipe_set_view.js, the
|
|
pictures in ui_recipe_gallery.js). Matches the Workflows page (28-workflows.css). Orange is
|
|
what the preset shown sets unlike the workflow's own. */
|
|
|
|
.anomalous-recipe-detail-view { --wfd-orange: #fb923c; }
|
|
html.amb-theme-light .anomalous-recipe-detail-view { --wfd-orange: #ea580c; }
|
|
|
|
.anomalous-wfd-bar {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-wfd-back {
|
|
flex: 0 0 auto;
|
|
height: 32px;
|
|
padding: 0 10px 0 4px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-back:hover { color: var(--amb-text-main); }
|
|
|
|
.anomalous-wfd-title {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-wfd-title .anomalous-recipe-inline-title {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
padding: 2px 4px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--amb-radius-control);
|
|
background: transparent;
|
|
color: var(--amb-text-main);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: text;
|
|
}
|
|
|
|
.anomalous-wfd-title .anomalous-recipe-inline-title:hover { border-color: var(--amb-border-strong); }
|
|
|
|
.anomalous-wfd-bar-status {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-wfd-kind {
|
|
flex: 0 0 auto;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--amb-warn) 16%, transparent);
|
|
color: var(--amb-warn-text);
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.anomalous-wfd-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-wfd-status-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-wfd-status-dot {
|
|
flex: 0 0 auto;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--amb-ok);
|
|
}
|
|
|
|
.anomalous-wfd-status.is-checking .anomalous-wfd-status-dot { background: var(--amb-text-muted); }
|
|
.anomalous-wfd-status.is-missing .anomalous-wfd-status-dot { background: var(--amb-danger); }
|
|
.anomalous-wfd-status.is-missing { color: var(--amb-danger-text); }
|
|
|
|
.anomalous-wfd-primary {
|
|
flex: 0 0 auto;
|
|
height: 32px;
|
|
padding: 0 14px;
|
|
border: none;
|
|
border-radius: var(--amb-radius-control);
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-primary:hover { background: var(--amb-btn-primary-hover); }
|
|
.anomalous-wfd-primary:disabled { opacity: 0.6; cursor: default; }
|
|
|
|
.anomalous-wfd-body {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* The tabs under the flow, staying in view while the panel scrolls: the workflow's own values, each
|
|
preset with how many values it changes, +; all pictures and versions at the end. The tab chosen
|
|
opens into the panel under it. */
|
|
.anomalous-wfd-tabrow {
|
|
position: sticky;
|
|
top: -16px;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
padding-top: 8px;
|
|
background: var(--amb-bg-card);
|
|
box-shadow: inset 0 -1px 0 var(--amb-border-strong); /* the chosen tab covers it */
|
|
}
|
|
|
|
.anomalous-wfd-tabs {
|
|
display: flex;
|
|
flex: 1 1 240px;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.anomalous-wfd-tab {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 92px;
|
|
max-width: 260px;
|
|
padding: 7px 14px 8px;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
border-radius: 10px 10px 0 0;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-tab:hover { background: var(--amb-bg-card-hover); color: var(--amb-text-main); }
|
|
|
|
.anomalous-wfd-tab.is-active {
|
|
border-color: var(--amb-border-strong);
|
|
background: var(--amb-bg-panel);
|
|
color: var(--amb-text-main);
|
|
box-shadow: inset 0 2px 0 var(--amb-link);
|
|
}
|
|
|
|
.anomalous-wfd-tab-name {
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-wfd-tab-note { color: var(--amb-text-dim); font-size: 11px; white-space: nowrap; }
|
|
.anomalous-wfd-tab-note.is-differs { color: var(--wfd-orange); }
|
|
.anomalous-wfd-tab.is-editing .anomalous-wfd-tab-note { color: var(--amb-link); }
|
|
|
|
.anomalous-wfd-tab-add {
|
|
flex: 0 0 auto;
|
|
align-self: center;
|
|
margin-left: 6px;
|
|
padding: 4px 10px;
|
|
border: 1px dashed var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-tab-add:hover { border-color: var(--amb-link); color: var(--amb-text-main); }
|
|
|
|
.anomalous-wfd-views {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-self: center;
|
|
gap: 2px;
|
|
padding-left: 10px;
|
|
border-left: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-wfd-view {
|
|
padding: 4px 10px;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12.5px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-view:hover { background: var(--amb-bg-card-hover); color: var(--amb-text-main); }
|
|
.anomalous-wfd-view.is-active { background: var(--amb-bg-card-hover); color: var(--amb-text-main); font-weight: 600; }
|
|
|
|
/* The panel the chosen tab opens into. */
|
|
.anomalous-wfd-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
margin-top: -14px;
|
|
padding: 16px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-top: none;
|
|
border-radius: 0 0 14px 14px;
|
|
background: var(--amb-bg-panel);
|
|
}
|
|
|
|
.anomalous-wfd-set-differs { color: var(--wfd-orange); }
|
|
.anomalous-wfd-set-differs::before { content: '\00B7'; margin: 0 6px; color: var(--amb-text-dim); }
|
|
|
|
/* The one column under the bar. */
|
|
.anomalous-wfd-main {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 16px 18px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.anomalous-wfd-set-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-wfd-set-titles {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-wfd-set-title {
|
|
margin: 0;
|
|
color: var(--amb-text-main);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.anomalous-wfd-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-wfd-apply-status {
|
|
margin-top: -8px;
|
|
color: var(--amb-ok-text);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-wfd-apply-status:empty { display: none; }
|
|
.anomalous-wfd-apply-status.is-error { color: var(--amb-danger-text); }
|
|
|
|
.anomalous-wfd-muted {
|
|
margin: 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.anomalous-wfd-info {
|
|
display: grid;
|
|
grid-template-columns: 132px minmax(0, 1fr);
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
|
|
.anomalous-wfd-cover {
|
|
overflow: hidden;
|
|
aspect-ratio: 4 / 5;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: var(--amb-radius-card);
|
|
background: var(--amb-bg-sunken);
|
|
}
|
|
|
|
.anomalous-wfd-cover img,
|
|
.anomalous-wfd-cover video {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-info-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-wfd-info-text .anomalous-recipe-detail-notes p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.anomalous-wfd-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: var(--amb-radius-panel);
|
|
background: var(--amb-bg-card);
|
|
}
|
|
|
|
.anomalous-wfd-section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-wfd-section-head h3,
|
|
.anomalous-wfd-section > summary {
|
|
margin: 0;
|
|
color: var(--amb-text-soft);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-wfd-section > summary { cursor: pointer; }
|
|
|
|
.anomalous-wfd-fold-note {
|
|
margin-left: 8px;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.anomalous-wfd-fold-note.is-warn { color: var(--amb-danger-text); }
|
|
|
|
/* The workflow's focus values (重点参数, ui_recipe_focus.js) and their ☆ under every node's values. */
|
|
.anomalous-wfd-focus-slot { display: contents; }
|
|
.anomalous-wfd-focus-hint { margin-top: -4px; font-size: 12px; }
|
|
.anomalous-wfd-focus { border-color: color-mix(in srgb, var(--amb-link) 45%, var(--amb-border)); }
|
|
|
|
.anomalous-wfd-focus-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-wfd-focus-tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
padding: 9px 12px 10px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: var(--amb-radius-card);
|
|
background: color-mix(in srgb, var(--amb-link) 6%, transparent);
|
|
}
|
|
|
|
.anomalous-wfd-focus-tile.is-differs { border-color: color-mix(in srgb, var(--amb-warn) 60%, transparent); }
|
|
.anomalous-wfd-focus-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
|
|
|
|
.anomalous-wfd-focus-name,
|
|
.anomalous-wfd-focus-node,
|
|
.anomalous-wfd-focus-value {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-wfd-focus-name { color: var(--amb-text-soft); font-size: 12px; font-weight: 600; }
|
|
.anomalous-wfd-focus-node { margin-top: -3px; color: var(--amb-text-dim); font-size: 11px; }
|
|
.anomalous-wfd-focus-value { color: var(--amb-text-main); font-size: 20px; line-height: 1.3; }
|
|
.anomalous-wfd-focus-tile.is-differs .anomalous-wfd-focus-value { color: var(--amb-warn-text); }
|
|
.anomalous-wfd-focus-default { color: var(--amb-text-muted); font-size: 11.5px; }
|
|
|
|
.anomalous-wfd-focus-note {
|
|
align-self: flex-start;
|
|
max-width: 100%;
|
|
margin-top: 2px;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
text-align: left;
|
|
overflow-wrap: anywhere;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-focus-note:hover { color: var(--amb-text-main); }
|
|
.anomalous-wfd-focus-note.is-empty { color: var(--amb-text-dim); }
|
|
|
|
.anomalous-wfd-focus-star {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: -3px 4px -3px -4px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--amb-text-dim);
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
|
|
}
|
|
|
|
.anomalous-wfd-focus-top .anomalous-wfd-focus-star { margin: -4px -6px -4px 0; }
|
|
.anomalous-wfd-focus-star:hover { background: rgba(var(--amb-ink-rgb), 0.08); color: #f5b301; transform: scale(1.12); }
|
|
.anomalous-wfd-focus-star:active { transform: scale(0.88); }
|
|
.anomalous-wfd-focus-star.is-on { color: #f5b301; text-shadow: 0 0 8px rgba(245, 179, 1, 0.45); }
|
|
.anomalous-wfd-focus-star.is-popping { animation: anomalous-focus-star-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
|
|
|
|
@keyframes anomalous-focus-star-pop {
|
|
0% { transform: scale(0.7); }
|
|
55% { transform: scale(1.35); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
/* The value just marked fades in; one being unmarked fades while its save runs. */
|
|
.anomalous-wfd-focus-tile { transition: opacity 0.2s ease, transform 0.2s ease; }
|
|
.anomalous-wfd-focus-tile.is-new,
|
|
.anomalous-wfd-focus.is-new { animation: anomalous-focus-in 0.35s ease-out; }
|
|
.anomalous-wfd-focus-tile.is-leaving { opacity: 0.35; transform: scale(0.97); }
|
|
|
|
@keyframes anomalous-focus-in {
|
|
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.anomalous-wfd-focus-star,
|
|
.anomalous-wfd-focus-tile { transition: none; }
|
|
.anomalous-wfd-focus-star.is-popping,
|
|
.anomalous-wfd-focus-tile.is-new,
|
|
.anomalous-wfd-focus.is-new { animation: none; }
|
|
}
|
|
|
|
/* A tip under a set's name: what sets are for, or where ⇄ is. */
|
|
.anomalous-wfd-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border: 1px dashed var(--amb-border-strong);
|
|
border-radius: var(--amb-radius-panel);
|
|
background: rgba(var(--amb-ink-rgb), 0.03);
|
|
}
|
|
|
|
.anomalous-wfd-tip-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
|
|
.anomalous-wfd-tip strong { color: var(--amb-text-main); font-size: 13px; }
|
|
|
|
.anomalous-wfd-tip p {
|
|
flex: 1;
|
|
margin: 0;
|
|
color: var(--amb-text-muted);
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.anomalous-wfd-tip-action {
|
|
flex: 0 0 auto;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-soft);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-wfd-tip-action:hover { border-color: var(--amb-link); color: var(--amb-text-main); }
|
|
.anomalous-wfd-tip.is-compare { margin-top: -6px; padding: 7px 10px; }
|
|
.anomalous-wfd-section.is-folded:not([open]) { gap: 0; }
|
|
|
|
.anomalous-wfd-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-wfd-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
padding: 8px 10px;
|
|
border-radius: var(--amb-radius-card);
|
|
background: var(--amb-bg-sunken);
|
|
}
|
|
|
|
.anomalous-wfd-stat-label {
|
|
color: var(--amb-text-dim);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.anomalous-wfd-stat-value {
|
|
overflow: hidden;
|
|
color: var(--amb-text-main);
|
|
font-size: 14px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-wfd-model-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.anomalous-wfd-model-line {
|
|
display: grid;
|
|
grid-template-columns: 52px minmax(0, 1fr) auto;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.anomalous-wfd-model-name {
|
|
overflow: hidden;
|
|
color: var(--amb-text-soft);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-wfd-model-weight {
|
|
color: var(--amb-text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.anomalous-wfd-prompts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-wfd-prompt {
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-left: 3px solid var(--amb-text-dim);
|
|
border-radius: 0 var(--amb-radius-card) var(--amb-radius-card) 0;
|
|
background: var(--amb-bg-sunken);
|
|
}
|
|
|
|
.anomalous-wfd-prompt.is-positive { border-left-color: var(--amb-ok); }
|
|
.anomalous-wfd-prompt.is-negative { border-left-color: var(--amb-danger); }
|
|
.anomalous-wfd-prompt.is-saving { opacity: 0.6; }
|
|
|
|
.anomalous-wfd-prompt-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.anomalous-wfd-prompt-role {
|
|
height: 26px;
|
|
padding: 0 6px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: var(--amb-radius-control);
|
|
background: var(--amb-bg-input);
|
|
color: var(--amb-text-main);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-wfd-prompt-node {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-dim);
|
|
font-size: 11.5px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-wfd-prompt-text {
|
|
color: var(--amb-text-soft);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 12.5px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.anomalous-wfd-prompt-text.is-folded {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 5;
|
|
}
|
|
|
|
.anomalous-wfd-prompt-toggle {
|
|
margin-top: 6px;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--amb-link);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Pictures (ui_recipe_gallery.js): thumbnails, 参数 and ⇄ on hover. */
|
|
.anomalous-wfd-images {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-wfd-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
aspect-ratio: 3 / 4;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: var(--amb-radius-card);
|
|
background: var(--amb-bg-sunken);
|
|
}
|
|
|
|
.anomalous-wfd-image img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.anomalous-wfd-image.is-compare-picked {
|
|
border-color: var(--amb-link);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--amb-link) 45%, transparent);
|
|
}
|
|
|
|
.anomalous-wfd-image-btn {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 6px;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
border-radius: 999px;
|
|
background: rgba(15, 20, 30, 0.85);
|
|
color: #f3f4f6;
|
|
font-size: 11.5px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.anomalous-wfd-image-btn.is-compare {
|
|
right: 6px;
|
|
left: auto;
|
|
width: 26px;
|
|
padding: 0;
|
|
}
|
|
|
|
.anomalous-wfd-image:hover .anomalous-wfd-image-btn,
|
|
.anomalous-wfd-image:focus-within .anomalous-wfd-image-btn,
|
|
.anomalous-wfd-image.is-compare-picked .anomalous-wfd-image-btn.is-compare { opacity: 1; }
|
|
|
|
.anomalous-wfd-section .anomalous-compare-bar { margin: 0; }
|
|
|
|
.theme-abyssal-scarlet .anomalous-wfd-section { background: rgba(18, 10, 26, 0.88); }
|
|
.theme-abyssal-scarlet .anomalous-wfd-tab.is-active { box-shadow: inset 0 2px 0 #dc143c; }
|
|
|
|
/* Narrow details (docked, or a small window): tighter, the tabs scroll sideways. */
|
|
@container wfd (max-width: 760px) {
|
|
.anomalous-wfd-bar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
|
|
.anomalous-wfd-main { padding: 12px 12px 20px; }
|
|
.anomalous-wfd-tabrow { top: -12px; }
|
|
.anomalous-wfd-tab { flex: 0 0 auto; min-width: 0; max-width: 150px; padding: 6px 10px 7px; }
|
|
.anomalous-wfd-panel { padding: 12px; }
|
|
.anomalous-wfd-info { grid-template-columns: 96px minmax(0, 1fr); }
|
|
.anomalous-wfd-tip { flex-wrap: wrap; }
|
|
}
|
|
|
|
/* The flow on top of a workflow's details (ui_recipe_flow.js): small boxes, only the structure.
|
|
Lanes of model files and LoRAs (violet) and control models (green) over the stages (blue) they
|
|
feed, then the finishing nodes (green) and the saves; orange what the preset shown sets unlike
|
|
the workflow's own, dashed what it does not run or use; the picked box's values under it. */
|
|
.anomalous-wfd-flow {
|
|
--wfd-flow-violet: #a78bfa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 12px;
|
|
background: var(--amb-bg-panel);
|
|
}
|
|
.anomalous-wfd-flow-grid { display: grid; align-items: center; gap: 6px 22px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: thin; }
|
|
.anomalous-wfd-flow-lane { margin-right: -10px; color: var(--amb-text-dim); font-size: 11px; white-space: nowrap; }
|
|
.anomalous-wfd-flow-box,
|
|
.anomalous-wfd-flow-save {
|
|
--wfd-flow-tint: var(--amb-text-soft);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
height: 28px;
|
|
padding: 0 9px;
|
|
box-sizing: border-box;
|
|
border: 1px solid color-mix(in srgb, var(--wfd-flow-tint) 45%, var(--amb-border));
|
|
border-radius: 7px;
|
|
background: color-mix(in srgb, var(--wfd-flow-tint) 12%, var(--amb-bg-card));
|
|
color: var(--amb-text-main);
|
|
font: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
.anomalous-wfd-flow-box { cursor: pointer; }
|
|
.anomalous-wfd-flow-box:hover { border-color: var(--wfd-flow-tint); }
|
|
.anomalous-wfd-flow-box:focus-visible { outline: 2px solid var(--amb-link); outline-offset: 1px; }
|
|
.anomalous-wfd-flow-box.is-stage { --wfd-flow-tint: var(--amb-link); height: 32px; font-size: 12.5px; font-weight: 600; }
|
|
.anomalous-wfd-flow-box.is-supply { --wfd-flow-tint: var(--wfd-flow-violet); }
|
|
.anomalous-wfd-flow-box.is-guard { --wfd-flow-tint: var(--amb-ok); }
|
|
.anomalous-wfd-flow-save { height: 32px; background: var(--amb-bg-card); }
|
|
.anomalous-wfd-flow-box.is-changed {
|
|
--wfd-flow-tint: var(--wfd-orange);
|
|
border-color: var(--wfd-orange);
|
|
background: color-mix(in srgb, var(--wfd-orange) 22%, var(--amb-bg-card));
|
|
color: color-mix(in srgb, var(--wfd-orange) 65%, var(--amb-text-main));
|
|
}
|
|
.anomalous-wfd-flow-box.is-off { border-style: dashed; background: transparent; opacity: 0.55; }
|
|
.anomalous-wfd-flow-box.is-off:hover { opacity: 0.9; }
|
|
.anomalous-wfd-flow-box.is-picked { box-shadow: 0 0 0 2px var(--amb-link); opacity: 1; }
|
|
.anomalous-wfd-flow-box.is-step::before,
|
|
.anomalous-wfd-flow-save.is-step::before {
|
|
content: '\2192';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -17px;
|
|
color: var(--amb-text-dim);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
.anomalous-wfd-flow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.anomalous-wfd-flow-tag { flex: 0 0 auto; color: var(--amb-text-soft); font-size: 10.5px; font-weight: 500; }
|
|
.anomalous-wfd-flow-inspect { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--amb-border); }
|
|
.anomalous-wfd-flow-inspect-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
.anomalous-wfd-flow-inspect-head > div { flex: 1; min-width: 0; }
|
|
.anomalous-wfd-flow-inspect-title { color: var(--amb-text-main); font-size: 13.5px; }
|
|
.anomalous-wfd-flow-inspect-file { color: var(--amb-text-soft); font-size: 12px; word-break: break-all; }
|
|
.anomalous-wfd-flow-state { padding: 2px 10px; border: 1px solid var(--amb-border); border-radius: 999px; color: var(--amb-text-soft); font-size: 11.5px; white-space: nowrap; }
|
|
.anomalous-wfd-flow-state.is-on { border-color: color-mix(in srgb, var(--amb-ok) 45%, var(--amb-border)); background: color-mix(in srgb, var(--amb-ok) 12%, transparent); color: var(--amb-text-main); }
|
|
.anomalous-wfd-flow-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--amb-text-soft); font-size: 12px; }
|
|
.anomalous-wfd-flow-link { padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--amb-link) 45%, var(--amb-border)); border-radius: 999px; background: transparent; color: var(--amb-text-main); font: inherit; cursor: pointer; }
|
|
.anomalous-wfd-flow-link:hover { border-color: var(--amb-link); }
|
|
.anomalous-wfd-flow-values { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
|
|
.anomalous-wfd-flow-value { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 5px 8px; border: 1px solid var(--amb-border); border-radius: 8px; background: var(--amb-bg-card); }
|
|
.anomalous-wfd-flow-value > span { color: var(--amb-text-soft); font-size: 11px; }
|
|
.anomalous-wfd-flow-value > strong { color: var(--amb-text-main); font-size: 12px; font-weight: 600; word-break: break-all; }
|
|
.anomalous-wfd-flow-value.is-changed { border-color: var(--wfd-orange); background: color-mix(in srgb, var(--wfd-orange) 10%, var(--amb-bg-card)); }
|
|
.anomalous-wfd-flow-was { color: var(--amb-text-dim); font-weight: 400; text-decoration: line-through; }
|
|
|
|
/* The examples' card and window (ui_recipe_examples.js). */
|
|
.anomalous-wf-card.is-examples { cursor: pointer; }
|
|
.anomalous-wf-card.is-examples .anomalous-wf-cover { display: flex; align-items: center; justify-content: center; color: var(--amb-link); }
|
|
.anomalous-examples { display: flex; flex-direction: column; gap: 10px; }
|
|
.anomalous-examples-hint { margin: 0; color: var(--amb-text-soft); font-size: 13px; line-height: 1.6; }
|
|
.anomalous-examples-plan { margin-top: 6px; color: var(--amb-text-main); font-size: 14px; font-weight: 700; }
|
|
.anomalous-example { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--amb-border); border-radius: 10px; }
|
|
.anomalous-example-words { flex: 1; min-width: 0; }
|
|
.anomalous-example.is-missing { border-style: dashed; }
|
|
.anomalous-example-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--amb-text-main); font-size: 13px; font-weight: 650; }
|
|
.anomalous-example-badge { padding: 0 6px; border-radius: 6px; background: color-mix(in srgb, var(--amb-link) 18%, transparent); color: var(--amb-link); font-size: 11px; font-weight: 500; }
|
|
.anomalous-example-about { margin: 3px 0 4px; color: var(--amb-text-soft); font-size: 12.5px; line-height: 1.6; }
|
|
.anomalous-example-open { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--amb-link); color: var(--amb-on-link); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
|
|
.anomalous-example-open:hover { filter: brightness(1.15); }
|