DemonGatanjieuandClaude Opus 5.5
307381c439
The rail keeps scan, Model Doctor and Current node (ui_rail_tools.js, which replaces ui_toolbox.js). The tools the toolbox held now sit where their things are: - Workflow share codes (AMB0/AMB1 import / export): the Workflows page's top bar, in place of the disabled "import" button. - Prompt Studio and Prompt Notes: the Material Library's top bar. - Model Sources: the end of the type chips on Models (library) and "where to download" in Model Doctor (the open workflow). Removed with it: the toolbox popover, its tool catalog and custom-item hook (no plugin used it), the generic tool dispatch (Home opens the doctor directly), the tour step, its styles and the toolbox and old "planned tools" strings. The scan button's tooltip no longer says "wizard". 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 rgba(255, 255, 255, 0.08);
|
|
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, #131315) !important;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
#anomalous-sidebar input[type="text"] {
|
|
background: rgba(255, 255, 255, 0.05) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.09) !important;
|
|
backdrop-filter: blur(8px) !important;
|
|
color: #f3f4f6 !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
#anomalous-sidebar input[type="text"]:focus {
|
|
border-color: rgba(255, 255, 255, 0.3) !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 rgba(255, 255, 255, 0.12);
|
|
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, #444);
|
|
background: var(--bg-color, #111);
|
|
}
|
|
|
|
.anomalous-lang-btn {
|
|
width: 100% !important;
|
|
border: 2px solid #555 !important;
|
|
padding: 12px !important;
|
|
font-weight: bold;
|
|
border-radius: 4px !important;
|
|
background: #1a1a1a !important;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.anomalous-type-header {
|
|
padding: 10px 15px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--fg-color, #fff);
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.anomalous-folder-item {
|
|
padding: 8px 15px;
|
|
color: var(--fg-color, #cbd5e1);
|
|
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: #fff;
|
|
}
|
|
|
|
/* Clean Neutral Active Indicator on Selected Menu (Normal Mode) */
|
|
.anomalous-folder-item.active {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
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: #fff !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: #94a3b8 !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: #94a3b8 !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: #f8fafc !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, #222);
|
|
}
|
|
|
|
.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: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.anomalous-resizer {
|
|
width: 5px;
|
|
background: var(--border-color, #444);
|
|
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, #222);
|
|
overflow: auto;
|
|
}
|
|
|
|
.anomalous-card {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anomalous-folder-toggle {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
#anomalous-api-key {
|
|
background: #333;
|
|
border: 1px solid #555;
|
|
color: #fff;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
width: 150px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
#anomalous-api-key::placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
@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, #444);
|
|
}
|
|
|
|
.anomalous-compatible-title {
|
|
color: var(--fg-color, #fff);
|
|
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, #333);
|
|
border: 1px solid var(--border-color, #555);
|
|
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: rgba(255, 255, 255, 0.3);
|
|
background: var(--bg-color, #444);
|
|
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, #fff);
|
|
font-size: 0.85em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|