DemonGatanjieuandClaude Opus 5.5
22edc20d0f
"Pick models to scan" sits beside the scan button; the picks are named under it and the button scans them, "clear" goes back to everything, so the all/picked switch is gone. Under the button the page says what this scan will do, each line with how many of its models are components. The settings card (ui_scan_settings.js, holding the scan options and the Civitai key prompt) unfolds in place instead of opening its own page. The summary counts and lists models in component folders (VAE, text encoders, CLIP, CLIP Vision, upscalers) apart. The counts at the top and the not found / not scanned lists leave them out; a card and a list of their own say that many are not on Civitai and that this is no fault. The not found list looks up again just the models it shows. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
517 lines
11 KiB
CSS
517 lines
11 KiB
CSS
/* The scan settings' model picker (ui_scan_picker.js): folders on the left, then the state
|
|
chips, what to do with the shown models, and the models as a list or as covers. */
|
|
|
|
.anomalous-pick-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000001;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: var(--amb-lt-scrim, rgba(0, 0, 0, 0.6));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(1180px, 100%);
|
|
height: min(880px, 100%);
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 14px;
|
|
background: var(--amb-bg-panel, var(--amb-bg-card));
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
|
|
color: var(--amb-text-main);
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-pick-title {
|
|
margin: 0 8px 0 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-search {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
max-width: 380px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 9px;
|
|
background: var(--amb-bg-input);
|
|
color: var(--amb-text-main);
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
.anomalous-pick-search:focus {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
}
|
|
|
|
.anomalous-pick-views {
|
|
display: inline-flex;
|
|
margin-left: auto;
|
|
padding: 3px;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 9px;
|
|
background: var(--amb-bg-sunken);
|
|
}
|
|
|
|
.anomalous-pick-view {
|
|
padding: 5px 12px;
|
|
border: none;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-view.is-on {
|
|
background: color-mix(in srgb, var(--amb-link) 18%, transparent);
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-pick-close {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-close:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.08);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-pick-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Folders: each with its model count, and how many are picked in it. */
|
|
.anomalous-pick-folders {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
flex: 0 0 230px;
|
|
padding: 10px 8px;
|
|
border-right: 1px solid var(--amb-border);
|
|
background: var(--amb-bg-sunken);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-folder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-folder.is-root {
|
|
margin-top: 8px;
|
|
color: var(--amb-text-soft);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-pick-folder:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.anomalous-pick-folder:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
}
|
|
|
|
.anomalous-pick-folder.is-on {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-pick-folder-name {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-folder-count {
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.anomalous-pick-folder-picked {
|
|
min-width: 18px;
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
background: var(--amb-btn-primary-bg);
|
|
color: var(--amb-btn-primary-text);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-main {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-pick-note {
|
|
margin: 10px 16px 0;
|
|
color: var(--amb-warn-text);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* The states, each with how many of the shown models have it. */
|
|
.anomalous-pick-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
padding: 12px 16px 0;
|
|
}
|
|
|
|
.anomalous-pick-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--amb-text-muted);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-chip strong {
|
|
color: var(--amb-text-main);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.anomalous-pick-chip:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
}
|
|
|
|
.anomalous-pick-chip.is-on {
|
|
border-color: color-mix(in srgb, var(--amb-link) 55%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
.anomalous-pick-chip.is-new strong { color: var(--amb-link); }
|
|
.anomalous-pick-chip.is-damaged strong { color: var(--amb-danger-text); }
|
|
.anomalous-pick-chip.is-matched strong { color: var(--amb-ok-text); }
|
|
|
|
.anomalous-pick-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-pick-only {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-left: 6px;
|
|
color: var(--amb-text-soft);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-pick-link {
|
|
margin-left: auto;
|
|
padding: 4px 6px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--amb-link);
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-scan-actions .anomalous-pick-link {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.anomalous-pick-link:disabled {
|
|
color: var(--amb-text-dim);
|
|
cursor: default;
|
|
}
|
|
|
|
.anomalous-pick-list {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
padding: 8px 12px 16px;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-list.is-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.anomalous-pick-list.is-covers {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
grid-auto-rows: max-content;
|
|
align-content: start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-pick-empty {
|
|
grid-column: 1 / -1;
|
|
margin: 40px 0;
|
|
color: var(--amb-text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.anomalous-pick-more {
|
|
grid-column: 1 / -1;
|
|
height: 1px;
|
|
}
|
|
|
|
/* One model: its check, cover, name and where it is, then its state, base model and size. */
|
|
.anomalous-pick-row {
|
|
display: grid;
|
|
grid-template-columns: 20px 40px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 6px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 9px;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.anomalous-pick-row:hover {
|
|
background: rgba(var(--amb-ink-rgb), 0.05);
|
|
}
|
|
|
|
.anomalous-pick-row.is-picked {
|
|
border-color: color-mix(in srgb, var(--amb-link) 40%, transparent);
|
|
background: color-mix(in srgb, var(--amb-link) 10%, transparent);
|
|
}
|
|
|
|
.anomalous-pick-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid var(--amb-border-strong);
|
|
border-radius: 50%;
|
|
color: transparent;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.anomalous-pick-row.is-picked .anomalous-pick-check {
|
|
border-color: var(--amb-link);
|
|
background: var(--amb-link);
|
|
color: var(--amb-bg-panel, #000);
|
|
}
|
|
|
|
.anomalous-pick-cover {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 7px;
|
|
background: var(--amb-bg-sunken);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.anomalous-pick-cover img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.anomalous-pick-names {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-pick-name,
|
|
.anomalous-pick-path {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.anomalous-pick-path {
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* In the list, the same columns on every row (a model without a base model leaves its column empty). */
|
|
.anomalous-pick-facts {
|
|
display: grid;
|
|
grid-template-columns: 76px 130px 68px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.anomalous-pick-state {
|
|
justify-self: start;
|
|
}
|
|
|
|
.anomalous-pick-state {
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(var(--amb-ink-rgb), 0.06);
|
|
color: var(--amb-text-muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-state.is-new {
|
|
background: color-mix(in srgb, var(--amb-link) 16%, transparent);
|
|
color: var(--amb-link);
|
|
}
|
|
|
|
.anomalous-pick-state.is-damaged {
|
|
background: color-mix(in srgb, var(--amb-danger-text) 16%, transparent);
|
|
color: var(--amb-danger-text);
|
|
}
|
|
|
|
.anomalous-pick-state.is-matched {
|
|
background: color-mix(in srgb, var(--amb-ok-text) 14%, transparent);
|
|
color: var(--amb-ok-text);
|
|
}
|
|
|
|
.anomalous-pick-base {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-soft);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-size {
|
|
min-width: 64px;
|
|
color: var(--amb-text-dim);
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* As covers: the cover on top, the check in its corner, the state and size under the name. */
|
|
.is-covers .anomalous-pick-row {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
padding: 6px;
|
|
border-color: var(--amb-border);
|
|
}
|
|
|
|
.is-covers .anomalous-pick-check {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
border-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.is-covers .anomalous-pick-cover {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 2 / 3;
|
|
}
|
|
|
|
.is-covers .anomalous-pick-path,
|
|
.is-covers .anomalous-pick-base {
|
|
display: none;
|
|
}
|
|
|
|
.is-covers .anomalous-pick-facts {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.is-covers .anomalous-pick-size {
|
|
min-width: 0;
|
|
}
|
|
|
|
.anomalous-pick-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 18px;
|
|
border-top: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-pick-summary {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.anomalous-pick-hint {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--amb-text-dim);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.anomalous-pick-overlay { padding: 8px; }
|
|
.anomalous-pick-head { flex-wrap: wrap; }
|
|
.anomalous-pick-title { flex: 1 1 100%; }
|
|
.anomalous-pick-folders { display: none; }
|
|
.anomalous-pick-base, .anomalous-pick-hint { display: none; }
|
|
}
|