DemonGatanjieuandClaude Opus 5.5
054cb91b9b
Pages made at different times used their own greys (slate here, neutral there) and accents (sky, violet, indigo), and most ignored the Abyssal Scarlet theme. About 1,850 literal colours in web/styles and in CSS and inline styles written from JS now use the --amb-* tokens by what they are for: surfaces, text (new --amb-text-soft and --amb-text-dim), borders (new --amb-border-strong), the primary button, and one accent (new --amb-link, tinted with color-mix). Both themes define the new tokens. Literal colours stay where the colour is the meaning: status, prompt roles, voice emotions, canvas node colours, shadows and overlays; theme override rules are untouched. The share-code dialogs move from inline styles to .anomalous-share-* classes. Stylesheet versions are bumped. Checked: text contrast on every rail page, Prompt Studio, Prompt Notes, Model Sources, settings, model detail and editor, share codes, in both themes; structure check and JS tests pass. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
434 lines
10 KiB
CSS
434 lines
10 KiB
CSS
/* Island UI: Floating Sidebar Navigation Console (Neutral Charcoal Frosted Glass) */
|
|
#anomalous-sidebar-wrapper {
|
|
width: 250px;
|
|
margin: 8px 0 8px 8px;
|
|
height: calc(100% - 16px);
|
|
background: rgba(22, 22, 25, 0.85);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
position: relative;
|
|
border: 1px solid var(--amb-border);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
overflow: visible;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#anomalous-doctor-panel,
|
|
#anomalous-assistant-panel {
|
|
background: var(--amb-bg-page, var(--amb-bg-page)) !important;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
#anomalous-sidebar input[type="text"] {
|
|
background: rgba(255, 255, 255, 0.05) !important;
|
|
border: 1px solid var(--amb-border) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
color: var(--amb-text-main) !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
#anomalous-sidebar input[type="text"]:focus {
|
|
border-color: var(--amb-border-strong) !important;
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
box-shadow: 0 0 8px rgba(255, 255, 255, 0.06) !important;
|
|
}
|
|
|
|
#anomalous-sidebar-wrapper::after {
|
|
display: none;
|
|
}
|
|
|
|
.anomalous-sidebar-closed #anomalous-sidebar {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#anomalous-settings-hub-modal {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 68px;
|
|
width: 270px;
|
|
max-height: calc(100% - 32px);
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
background: rgba(24, 24, 28, 0.98);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--amb-border-strong);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
z-index: 999999 !important;
|
|
transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
}
|
|
|
|
#anomalous-settings-hub-modal button {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
width: 100% !important;
|
|
text-align: left !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
#anomalous-settings-hub-modal button svg {
|
|
flex-shrink: 0 !important;
|
|
}
|
|
|
|
/* Suppress all tooltips and action labels on clicked/active elements so they never block vision or interaction */
|
|
button:active::before,
|
|
button:active::after,
|
|
.anomalous-tooltip-target:active::before,
|
|
.anomalous-tooltip-target:active::after {
|
|
display: none !important;
|
|
opacity: 0 !important;
|
|
visibility: hidden !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
#anomalous-sidebar {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
#anomalous-settings {
|
|
border-top: 1px solid var(--border-color, var(--amb-border-strong));
|
|
background: var(--bg-color, var(--amb-bg-page));
|
|
}
|
|
|
|
.anomalous-lang-btn {
|
|
width: 100% !important;
|
|
border: 2px solid var(--amb-border-strong) !important;
|
|
padding: 12px !important;
|
|
font-weight: bold;
|
|
border-radius: 4px !important;
|
|
background: var(--amb-bg-panel) !important;
|
|
cursor: pointer;
|
|
color: var(--amb-text-main);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.anomalous-type-header {
|
|
padding: 10px 15px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--fg-color, var(--amb-text-main));
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
border-top: 1px solid var(--amb-border);
|
|
border-bottom: 1px solid var(--amb-border);
|
|
}
|
|
|
|
.anomalous-folder-item {
|
|
padding: 8px 15px;
|
|
color: var(--fg-color, var(--amb-text-soft));
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
border-left: 2px solid transparent;
|
|
}
|
|
|
|
.anomalous-folder-item:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--amb-text-main);
|
|
}
|
|
|
|
/* Clean Neutral Active Indicator on Selected Menu (Normal Mode) */
|
|
.anomalous-folder-item.active {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--amb-text-main);
|
|
font-weight: 600;
|
|
border-left: 2px solid #e5e7eb;
|
|
box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.03);
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
|
|
.anomalous-folder-item.active .anomalous-folder-name {
|
|
color: var(--amb-text-main) !important;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.theme-abyssal-scarlet .anomalous-folder-item.active {
|
|
background: rgba(55, 12, 22, 0.85);
|
|
border-left: 2px solid #dc143c;
|
|
border-left-color: var(--c-crimson, #dc143c);
|
|
box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.theme-abyssal-scarlet .anomalous-folder-item.active .anomalous-folder-name {
|
|
color: #e0d8db;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Sidebar Icons & Actions - Normal Mode (Neutral & Clean) */
|
|
.anomalous-folder-item svg,
|
|
#anomalous-sidebar h3 svg {
|
|
color: var(--amb-text-muted) !important;
|
|
filter: none;
|
|
}
|
|
|
|
.theme-abyssal-scarlet .anomalous-folder-item svg,
|
|
.theme-abyssal-scarlet #anomalous-sidebar h3 svg {
|
|
color: #d4af37 !important;
|
|
filter: none;
|
|
}
|
|
|
|
#anomalous-scan-btn,
|
|
#anomalous-materials-btn,
|
|
#anomalous-doctor-btn,
|
|
#anomalous-assistant-btn,
|
|
#anomalous-global-settings-btn {
|
|
color: var(--amb-text-muted) !important;
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
|
}
|
|
|
|
#anomalous-scan-btn:hover,
|
|
#anomalous-materials-btn:hover,
|
|
#anomalous-doctor-btn:hover,
|
|
#anomalous-assistant-btn:hover,
|
|
#anomalous-global-settings-btn:hover {
|
|
color: var(--amb-text-main) !important;
|
|
filter: none !important;
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-scan-btn:hover {
|
|
color: #ff4d6d !important;
|
|
filter: none !important;
|
|
background: rgba(220, 20, 60, 0.12) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-materials-btn {
|
|
color: var(--c-amber, #d97706) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-materials-btn:hover {
|
|
color: #fbbf24 !important;
|
|
filter: none !important;
|
|
background: rgba(217, 119, 6, 0.12) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-doctor-btn {
|
|
color: var(--c-crimson, #dc143c) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-doctor-btn:hover {
|
|
color: #ff4d6d !important;
|
|
filter: none !important;
|
|
background: rgba(220, 20, 60, 0.12) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-assistant-btn {
|
|
color: var(--c-purple, #8b5cf6) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-assistant-btn:hover {
|
|
color: #c4b5fd !important;
|
|
filter: none !important;
|
|
background: rgba(139, 92, 246, 0.14) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-global-settings-btn {
|
|
color: var(--c-silver, #94a3b8) !important;
|
|
}
|
|
|
|
.theme-abyssal-scarlet #anomalous-global-settings-btn:hover {
|
|
color: #f8fafc !important;
|
|
filter: none !important;
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
}
|
|
|
|
#anomalous-detail {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: var(--bg-color, var(--amb-bg-card));
|
|
}
|
|
|
|
.anomalous-split-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.anomalous-split-left {
|
|
width: 40%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--amb-bg-page);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.anomalous-resizer {
|
|
width: 5px;
|
|
background: var(--border-color, var(--amb-bg-card-hover));
|
|
cursor: col-resize;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.anomalous-resizer:hover {
|
|
background: rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.theme-abyssal-scarlet .anomalous-resizer:hover {
|
|
background: #dc143c;
|
|
}
|
|
|
|
.anomalous-split-right {
|
|
width: 60%;
|
|
background: var(--bg-color, var(--amb-bg-card));
|
|
overflow: auto;
|
|
}
|
|
|
|
.anomalous-card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-folder-toggle {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
#anomalous-api-key {
|
|
background: var(--amb-bg-card-hover);
|
|
border: 1px solid var(--amb-border-strong);
|
|
color: var(--amb-text-main);
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
width: 150px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
#anomalous-api-key::placeholder {
|
|
color: var(--amb-text-muted);
|
|
}
|
|
|
|
@container (max-width: 750px) {
|
|
.anomalous-split-left,
|
|
.anomalous-resizer {
|
|
display: none !important;
|
|
}
|
|
|
|
.anomalous-split-right {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.anomalous-nb-sidebar {
|
|
width: 80px !important;
|
|
min-width: 80px !important;
|
|
}
|
|
|
|
.anomalous-nb-sidebar .anomalous-nb-item {
|
|
font-size: 0.8em;
|
|
padding: 8px 4px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.anomalous-nb-create-text,
|
|
.anomalous-nb-nav-header,
|
|
.anomalous-nb-nav-text {
|
|
display: none !important;
|
|
}
|
|
|
|
.anomalous-nb-sidebar-nav-group {
|
|
padding: 8px 4px !important;
|
|
}
|
|
|
|
.anomalous-nb-nav-item {
|
|
justify-content: center !important;
|
|
padding: 8px 0 !important;
|
|
}
|
|
|
|
.anomalous-nb-nav-icon {
|
|
font-size: 1.15rem !important;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
|
|
/* English Layout Specific Scaling */
|
|
.anomalous-lang-en {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.anomalous-lang-en .anomalous-card-title {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.anomalous-lang-en #anomalous-title {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Compatible Models Section */
|
|
.anomalous-compatible-section {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--border-color, var(--amb-border-strong));
|
|
}
|
|
|
|
.anomalous-compatible-title {
|
|
color: var(--fg-color, var(--amb-text-main));
|
|
font-size: 1.1em;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.anomalous-compatible-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.anomalous-compatible-item {
|
|
background: var(--comfy-menu-bg, var(--amb-bg-card-hover));
|
|
border: 1px solid var(--border-color, var(--amb-border-strong));
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.anomalous-compatible-item:hover {
|
|
border-color: var(--amb-border-strong);
|
|
background: var(--bg-color, var(--amb-bg-card-hover));
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.theme-abyssal-scarlet .anomalous-compatible-item:hover {
|
|
border-color: #dc143c;
|
|
}
|
|
|
|
.anomalous-compatible-item img,
|
|
.anomalous-compatible-item video {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.anomalous-compatible-item-name {
|
|
color: var(--fg-color, var(--amb-text-main));
|
|
font-size: 0.85em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|