Files
DemonGatanjieu-Anomalous_Mo…/web/styles/02-notebooks.css
T
DemonGatanjieuandClaude Opus 5.5 4ab08a36e4 Combos keep every picked node, not only model and text nodes
Save as combo now keeps all picked nodes but subgraphs, with the links
between them. Model drop-downs and text boxes stay the slots; nodes
without slots are listed in the editor under "Nodes put back as saved"
with their values and go back exactly as saved. Inputs fed by links from
unpicked nodes are stored in structure.open, and the save dialog, the
editor and the card say which ones to wire after putting it down. Cards
of combos without models name their nodes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-08 02:39:44 +08:00

728 lines
17 KiB
CSS

/* Notebook UI: the recipe / notes / material workspace. It starts below the 48px
#anomalous-header, so the Models / Gallery / Workflows tabs stay clickable. */
.anomalous-nb-modal {
position: absolute;
top: 48px;
bottom: 0;
left: 0;
width: 100%;
background: var(--amb-bg-page, var(--amb-bg-page));
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.anomalous-nb-container {
width: 95%;
height: 95%;
background: var(--bg-color, var(--amb-bg-card));
border: 1px solid var(--border-color, var(--amb-border-strong));
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}
.anomalous-nb-header {
height: 50px;
background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
border-bottom: 1px solid var(--amb-border-strong);
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
color: var(--amb-text-main);
}
.anomalous-nb-close {
font-size: 2em;
cursor: pointer;
color: var(--amb-lt-danger, #ff4444);
}
.anomalous-nb-body {
flex: 1;
display: flex;
overflow: hidden;
container-type: inline-size;
}
/* The Combos page (ui_combos.js): a bar with the search and New, then a card per combo. */
.anomalous-combo-page {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
padding: 18px 20px;
overflow-y: auto;
}
.anomalous-combo-page[hidden],
.anomalous-nb-editor[hidden],
.anomalous-nb-back[hidden] {
display: none;
}
.anomalous-combo-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.anomalous-combo-lead {
flex: 1 1 100%;
margin: 0;
color: var(--amb-text-soft);
font-size: 13px;
line-height: 1.55;
}
.anomalous-combo-search {
flex: 1 1 220px;
min-width: 0;
padding: 7px 10px;
border: 1px solid var(--amb-border-strong);
border-radius: var(--amb-radius-control, 8px);
color: var(--amb-text-main);
background: var(--amb-bg-card);
font-size: 13px;
}
.anomalous-combo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 14px;
}
.anomalous-combo-empty {
grid-column: 1 / -1;
margin: 0;
color: var(--amb-text-muted);
font-size: 13px;
}
.anomalous-combo-card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--amb-border);
border-radius: var(--amb-radius-card, 10px);
background: var(--amb-bg-card);
cursor: pointer;
}
.anomalous-combo-card:hover {
border-color: var(--amb-border-strong);
}
.anomalous-combo-card:focus-visible {
outline: 2px solid var(--amb-link);
outline-offset: 2px;
}
.anomalous-combo-cover {
flex: none;
aspect-ratio: 3 / 2;
overflow: hidden;
background: color-mix(in srgb, var(--amb-link) 8%, var(--amb-bg-page));
}
.anomalous-combo-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
}
.anomalous-combo-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 10px 12px 12px;
}
.anomalous-combo-name,
.anomalous-combo-meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.anomalous-combo-name {
color: var(--amb-text-main);
font-size: 14px;
}
.anomalous-combo-meta {
color: var(--amb-text-muted);
font-size: 12px;
}
.anomalous-combo-hint {
color: var(--amb-warn-text);
font-size: 12px;
}
.anomalous-combo-prompt {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--amb-text-soft);
font-size: 12px;
line-height: 1.5;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.anomalous-combo-use {
align-self: flex-start;
margin-top: auto;
}
.anomalous-nb-editor {
flex: 1;
background: var(--amb-bg-card);
overflow-y: auto;
padding: 20px;
color: var(--amb-text-main);
}
.anomalous-nb-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: -20px; /* the editor's padding: stick to its very top, not 20px down with content showing above */
z-index: 20;
background: var(--amb-bg-page, var(--amb-bg-panel));
padding: 12px 20px;
margin: -20px -20px 16px -20px;
border-bottom: 1px solid var(--amb-border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.anomalous-btn-primary {
position: relative;
background: var(--amb-btn-primary-bg, #D7D9E0);
color: var(--amb-btn-primary-text, #15171C);
border: 1px solid var(--amb-border-strong);
height: 32px;
padding: 0 14px;
border-radius: var(--amb-radius-control, 6px);
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: none;
transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
overflow: hidden;
user-select: none;
box-sizing: border-box;
}
.anomalous-btn-primary:hover {
background: var(--amb-btn-primary-hover, var(--amb-btn-primary-bg));
border-color: rgba(var(--amb-ink-rgb), 0.4);
box-shadow: none;
}
.anomalous-btn-primary:active {
transform: translateY(1px);
filter: brightness(0.95);
}
.anomalous-btn-danger {
position: relative;
background: #7f1d1d;
color: var(--amb-lt-danger, #fecaca);
border: 1px solid rgba(239, 68, 68, 0.35);
height: 32px;
padding: 0 14px;
border-radius: var(--amb-radius-control, 6px);
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-shadow: none;
transition: background-color 0.16s ease, border-color 0.16s ease;
user-select: none;
box-sizing: border-box;
}
.anomalous-btn-danger:hover {
background: #991b1b;
border-color: rgba(239, 68, 68, 0.6);
color: var(--amb-text-main);
}
.anomalous-btn-success {
position: relative;
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: white;
border: 1px solid rgba(134, 239, 172, 0.4);
padding: 6px 14px;
border-radius: 3px 11px 3px 11px;
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
margin-left: 5px;
box-shadow: none;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.anomalous-btn-success:hover {
background: linear-gradient(135deg, #15803d 0%, #166534 100%);
border-color: #4ade80;
box-shadow: none;
transform: translateY(-1px);
}
/* Floating More Dropdown in Notebook Toolbar */
.anomalous-nb-dropdown-wrapper {
position: relative;
display: inline-flex;
}
.anomalous-nb-more-btn {
position: relative;
background: rgba(var(--amb-ink-rgb), 0.06);
color: var(--amb-text-soft);
border: 1px solid var(--amb-border-strong);
height: 32px;
padding: 0 12px;
border-radius: var(--amb-radius-control, 6px);
cursor: pointer;
font-size: 0.82rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.16s ease;
user-select: none;
box-sizing: border-box;
}
.anomalous-nb-more-btn:hover,
.anomalous-nb-more-btn.active {
background: rgba(var(--amb-ink-rgb), 0.12);
border-color: var(--amb-border-strong);
color: var(--amb-text-main);
}
.anomalous-nb-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 100;
min-width: 140px;
background: var(--amb-lt-surface, rgba(24, 24, 28, 0.96));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
padding: 4px;
flex-direction: column;
gap: 2px;
animation: anomalous-nb-dropdown-fadein 0.15s ease-out;
}
.anomalous-nb-dropdown-menu.show {
display: flex;
}
@keyframes anomalous-nb-dropdown-fadein {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.anomalous-nb-dropdown-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
border: none;
background: transparent;
color: var(--amb-text-main);
font-size: 0.82rem;
font-weight: 500;
border-radius: 5px;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
box-sizing: border-box;
white-space: nowrap;
}
.anomalous-nb-dropdown-item:hover {
background: rgba(var(--amb-ink-rgb), 0.08);
color: var(--amb-text-main);
}
.anomalous-nb-dropdown-item-danger {
color: var(--amb-danger-text);
}
.anomalous-nb-dropdown-item-danger:hover {
background: rgba(239, 68, 68, 0.18);
color: var(--amb-lt-danger, #fecaca);
}
.anomalous-nb-dropdown-item-danger.confirming {
background: #991b1b;
color: var(--amb-text-main);
font-weight: 600;
animation: anomalous-nb-pulse 1s infinite alternate;
}
@keyframes anomalous-nb-pulse {
from {
box-shadow: 0 0 0 rgba(239, 68, 68, 0);
}
to {
box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
}
.anomalous-nb-row {
margin-bottom: 10px;
}
.anomalous-nb-select {
background: var(--amb-bg-page);
color: var(--amb-text-main);
padding: 6px;
border: 1px solid var(--amb-border-strong);
border-radius: 4px;
}
.anomalous-nb-gallery {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 10px 0;
}
.anomalous-nb-gallery-wrap {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 10px 0;
overflow: visible;
content-visibility: auto;
contain-intrinsic-size: 70px;
}
.anomalous-nb-minicheck,
.anomalous-nb-minilora {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px 8px 8px;
background: var(--amb-bg-card-hover);
border: 1px solid var(--amb-border);
border-radius: 8px;
cursor: pointer;
flex: 1 1 220px;
max-width: 320px;
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
content-visibility: auto;
contain-intrinsic-size: 70px;
}
.anomalous-nb-minicheck:hover,
.anomalous-nb-minilora:hover {
border-color: var(--amb-border-strong);
background: var(--amb-lt-card-hover, #2a3140);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
transition-delay: 0.04s;
}
.anomalous-nb-minicheck.selected,
.anomalous-nb-minilora.selected {
border-color: var(--amb-link);
background: color-mix(in srgb, var(--amb-link) 15%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--amb-link) 25%, transparent);
}
.anomalous-nb-minicheck img,
.anomalous-nb-minicheck video,
.anomalous-nb-minilora img,
.anomalous-nb-minilora video {
width: 52px;
height: 52px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.anomalous-nb-minicheck-name,
.anomalous-nb-minilora-name {
color: var(--amb-text-main);
font-size: 0.95em;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
text-align: left;
}
.anomalous-nb-minicheck.selected .anomalous-nb-minicheck-name,
.anomalous-nb-minilora.selected .anomalous-nb-minilora-name {
color: var(--amb-link);
font-weight: bold;
}
.anomalous-nb-textarea {
width: 100%;
min-height: 120px;
max-height: 360px;
background: var(--amb-bg-page);
color: var(--amb-text-main);
border: 1px solid var(--amb-border);
border-radius: 6px;
padding: 10px 12px;
margin-top: 6px;
resize: vertical;
box-sizing: border-box;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.5;
outline: none;
overflow-y: auto;
field-sizing: content;
transition: border-color 0.18s ease;
}
.anomalous-nb-textarea:focus {
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
}
/* Flat Card Containers */
.anomalous-nb-card {
background: rgba(var(--amb-ink-rgb), 0.02);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
scroll-margin-top: 70px;
}
.anomalous-nb-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
font-size: 0.92rem;
font-weight: 600;
color: var(--amb-text-main);
}
.anomalous-nb-tools-bar {
display: flex;
gap: 8px;
margin-top: 10px;
align-items: center;
flex-wrap: wrap;
padding: 8px 12px;
background: var(--amb-lt-sunken, rgba(0, 0, 0, 0.22));
border: 1px solid var(--amb-border);
border-radius: 8px;
scroll-margin-top: 70px;
}
/* 提示词双语对照面板 (CSS Grid 双栏排版) */
.anomalous-nb-dual-pane {
display: flex;
flex-direction: column;
width: 100%;
background: var(--amb-lt-panel, rgba(22, 26, 35, 0.95));
padding: 10px;
border-radius: 8px;
border: 1px solid var(--amb-border);
box-sizing: border-box;
gap: 6px;
}
.anomalous-nb-tag-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
align-items: stretch;
}
.anomalous-nb-gallery-box {
background: var(--amb-bg-card);
border: 1px solid var(--amb-border-strong);
border-radius: 8px;
padding: 12px;
margin-bottom: 15px;
}
.anomalous-nb-unet-hint {
margin-top: 10px;
font-size: 0.8rem;
line-height: 1.5;
color: var(--amb-text-muted);
}
.anomalous-nb-unet-hint[hidden] {
display: none;
}
/* Notebook Model Fold & Sections Enhancement */
.anomalous-nb-models-fold {
background: rgba(var(--amb-ink-rgb), 0.02);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 0;
margin-bottom: 16px;
overflow: hidden;
transition: border-color 0.2s ease;
}
.anomalous-nb-models-fold[open] {
border-color: color-mix(in srgb, var(--amb-link) 35%, transparent);
background: rgba(var(--amb-ink-rgb), 0.03);
}
.anomalous-nb-models-badge {
font-size: 0.76rem;
font-weight: 500;
color: var(--amb-text-muted);
background: rgba(var(--amb-ink-rgb), 0.06);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--amb-border);
}
.anomalous-nb-prompt-section {
background: rgba(var(--amb-ink-rgb), 0.02);
border: 1px solid var(--amb-border);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
}
.anomalous-nb-selected-badge {
font-size: 0.78rem;
padding: 2px 8px;
border-radius: 4px;
background: rgba(var(--amb-ink-rgb), 0.06);
border: 1px solid var(--amb-border);
}
.anomalous-nb-visual-tag {
background: var(--amb-bg-card-hover);
color: var(--amb-text-main);
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--amb-border);
cursor: pointer;
transition: all 0.18s ease;
min-height: 34px;
display: flex;
align-items: center;
word-break: break-word;
font-size: 0.84rem;
line-height: 1.4;
}
.anomalous-nb-visual-tag.hover {
background: var(--amb-lt-card-hover, #2a3140);
border-color: color-mix(in srgb, var(--amb-link) 50%, transparent);
color: var(--amb-text-main);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* 复制按钮默认隐藏,悬停才浮现 */
.anomalous-nb-copy-btn {
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
padding-left: 8px;
flex-shrink: 0;
user-select: none;
font-size: 0.78rem;
}
.anomalous-nb-visual-tag:hover .anomalous-nb-copy-btn {
opacity: 0.85;
visibility: visible;
}
.anomalous-nb-copy-btn:hover {
transform: scale(1.2);
opacity: 1;
}
.anomalous-nb-tag-edit {
background: var(--amb-lt-surface, #111827);
color: var(--amb-text-main);
border: 1px solid color-mix(in srgb, var(--amb-link) 60%, transparent);
border-radius: 4px;
padding: 6px;
width: 100%;
font-size: 0.84rem;
box-sizing: border-box;
outline: none;
}
/* Notebook Modern Slim Scrollbars */
.anomalous-nb-editor,
.anomalous-nb-textarea {
scrollbar-width: thin;
scrollbar-color: rgba(var(--amb-ink-rgb), 0.18) transparent;
}
.anomalous-nb-editor::-webkit-scrollbar,
.anomalous-nb-textarea::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.anomalous-nb-editor::-webkit-scrollbar-track,
.anomalous-nb-textarea::-webkit-scrollbar-track {
background: transparent;
}
.anomalous-nb-editor::-webkit-scrollbar-thumb,
.anomalous-nb-textarea::-webkit-scrollbar-thumb {
background: rgba(var(--amb-ink-rgb), 0.16);
border-radius: 3px;
}
.anomalous-nb-editor::-webkit-scrollbar-thumb:hover,
.anomalous-nb-textarea::-webkit-scrollbar-thumb:hover {
background: rgba(var(--amb-ink-rgb), 0.28);
}