Files
DemonGatanjieu-Anomalous_Mo…/web/styles/02-notebooks.css
T
DemonGatanjieuandClaude Opus 5.5 e6de76502a Prompt Studio edits the selected node's prompt boxes as tags
The assembly board, its write-to-node step and the positive/negative tabs
are gone. The studio now shows the prompt boxes of the prompt node last
selected on the canvas (or a draft) as tags that are edited in place:
weight, edit, remove, reorder, type to add with Chinese translated to
English, and an optional Chinese meaning under each tag. Every change is
one node write with Ctrl+Z, and the studio has its own Undo.

Cards: three common ones instead of six, plus saved prompts; a saved
prompt's text is read once instead of every 30 seconds. Current node
lists the prompt boxes with Edit in Prompt Studio instead of its own
translation. The inspector modal, starter-card data, plan loading and
about 2,000 lines of CSS for the old board are removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 03:05:08 +08:00

723 lines
16 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: #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-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: 0;
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(255, 255, 255, 0.4);
box-shadow: none;
}
.anomalous-btn-primary:active {
transform: translateY(1px);
filter: brightness(0.95);
}
.anomalous-btn-danger {
position: relative;
background: #7f1d1d;
color: #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(255, 255, 255, 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(255, 255, 255, 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: 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(255, 255, 255, 0.08);
color: var(--amb-text-main);
}
.anomalous-nb-dropdown-item-danger {
color: #fca5a5;
}
.anomalous-nb-dropdown-item-danger:hover {
background: rgba(239, 68, 68, 0.18);
color: #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: #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(255, 255, 255, 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: 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: 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(255, 255, 255, 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(255, 255, 255, 0.03);
}
.anomalous-nb-models-badge {
font-size: 0.76rem;
font-weight: 500;
color: var(--amb-text-muted);
background: rgba(255, 255, 255, 0.06);
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--amb-border);
}
.anomalous-nb-prompt-section {
background: rgba(255, 255, 255, 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(255, 255, 255, 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: #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: #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(255, 255, 255, 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(255, 255, 255, 0.16);
border-radius: 3px;
}
.anomalous-nb-editor::-webkit-scrollbar-thumb:hover,
.anomalous-nb-textarea::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.28);
}