Hanzo AI
49b8d1ad0f
De-purple the ComfyUI shell theme (hanzo-theme.css) and the Copilot sidebar chat (hanzo-copilot.css) to the canonical monochrome design system — no color accent. Accent tokens map to neutral (icons/links/active #ededed, primary buttons white-on-dark with #111 text like the Home CTA, selected/checked neutral gray, focus ring #8a8a8a). Semantic status colors are unaffected. Copilot default model 'zen' -> 'enso' (the Hanzo flagship assistant) — Enso default everywhere, including Studio.
144 lines
6.0 KiB
CSS
144 lines
6.0 KiB
CSS
/* Hanzo Studio — black surface + monochrome accent theme.
|
|
* Minimal override: only background/surface/accent tokens are touched so the
|
|
* rest of the frontend's dark palette (text, node colors, borders) is intact.
|
|
* Loaded LAST in index.html so it beats PrimeVue's runtime-injected tokens;
|
|
* every declaration is !important because those tokens are injected after this
|
|
* sheet at boot. Monochrome — no color accent — matching the canonical Hanzo
|
|
* design system (page #000 · surface #0a0a0a · raised #1a1a1a · border #1f1f1f ·
|
|
* text #ededed · accent/brand #ededed/#fff). Contrast on black:
|
|
* accent #ededed on #000 -> ~18:1 · button #111 on #fff -> ~18:1
|
|
*/
|
|
|
|
:root {
|
|
/* --- App shell (ComfyUI-native vars from the "dark" palette) --- */
|
|
--bg-color: #000000 !important;
|
|
--fg-color: #ffffff !important;
|
|
--comfy-menu-bg: #0a0a0a !important;
|
|
--comfy-menu-secondary-bg: #141414 !important;
|
|
--comfy-input-bg: #0a0a0a !important;
|
|
--content-bg: #0a0a0a !important;
|
|
--content-hover-bg: #171717 !important;
|
|
--border-color: #1f1f1f !important;
|
|
--tr-even-bg-color: #0a0a0a !important;
|
|
--tr-odd-bg-color: #141414 !important;
|
|
|
|
/* --- PrimeVue surface ramp: darken the panel/sidebar/topbar shades only.
|
|
* 500..900 are the backgrounds; 100/300 stay light (used for text/borders). */
|
|
--p-surface-900: #000000 !important;
|
|
--p-surface-800: #0a0a0a !important;
|
|
--p-surface-700: #141414 !important;
|
|
--p-surface-600: #1c1c1c !important;
|
|
--p-surface-500: #242424 !important;
|
|
|
|
/* --- PrimeVue semantic surfaces --- */
|
|
--p-content-background: #000000 !important;
|
|
--p-content-hover-background: #171717 !important;
|
|
--p-overlay-modal-background: #0a0a0a !important;
|
|
--p-overlay-popover-background: #0a0a0a !important;
|
|
--p-mask-background: rgba(0, 0, 0, 0.72) !important;
|
|
|
|
/* --- Monochrome accent (near-white on black — icons/links/active) --- */
|
|
--p-primary-color: #ededed !important;
|
|
--p-primary-contrast-color: #111111 !important;
|
|
--p-primary-400: #f5f5f5 !important;
|
|
--p-primary-500: #ededed !important;
|
|
--p-primary-600: #d4d4d4 !important;
|
|
--p-focus-ring-color: #8a8a8a !important;
|
|
--p-highlight-background: rgba(255, 255, 255, 0.14) !important;
|
|
--p-highlight-focus-background: rgba(255, 255, 255, 0.20) !important;
|
|
--p-highlight-color: #ffffff !important;
|
|
|
|
/* --- Primary buttons: brand/CTA white on black, dark text (matches Home) --- */
|
|
--p-button-primary-background: #ffffff !important;
|
|
--p-button-primary-hover-background: #e4e4e7 !important;
|
|
--p-button-primary-active-background: #d4d4d4 !important;
|
|
--p-button-primary-border-color: #ffffff !important;
|
|
--p-button-primary-color: #111111 !important;
|
|
}
|
|
|
|
/* Pure-black canvas gutter behind the litegraph <canvas>. */
|
|
html,
|
|
body,
|
|
body.litegraph,
|
|
#vue-app {
|
|
background-color: #000000 !important;
|
|
}
|
|
|
|
/* ── hover/active states: dark surfaces, never light (fix white-on-white) ── */
|
|
:root, :root.dark-theme {
|
|
--p-content-hover-background: #1a1a1a !important;
|
|
--p-content-hover-color: #ffffff !important;
|
|
--p-navigation-item-hover-background: #1a1a1a !important;
|
|
--p-list-option-focus-background: #242424 !important;
|
|
--p-select-option-focus-background: #242424 !important;
|
|
--p-button-text-secondary-hover-background: #1a1a1a !important;
|
|
--p-button-text-primary-hover-background: rgba(255,255,255,.10) !important;
|
|
--p-button-secondary-hover-background: #242424 !important;
|
|
--p-togglebutton-hover-background: #242424 !important;
|
|
--p-tab-hover-background: #1a1a1a !important;
|
|
--p-menubar-item-focus-background: #242424 !important;
|
|
--p-menu-item-focus-background: #242424 !important;
|
|
--p-tree-node-hover-background: #1a1a1a !important;
|
|
--p-surface-100: #242424 !important;
|
|
--p-surface-200: #1a1a1a !important;
|
|
--p-highlight-background: rgba(255,255,255,.14) !important;
|
|
--p-highlight-color: #ffffff !important;
|
|
}
|
|
.side-tool-bar-container .p-button:hover,
|
|
.side-bar-button:hover,
|
|
.comfyui-button:hover {
|
|
background: #1a1a1a !important;
|
|
color: #fff !important;
|
|
}
|
|
.p-button-text:not(.p-button-danger):hover { background: #1a1a1a !important; color: #fff !important; }
|
|
|
|
/* ── the H logo menu button: keep the mark visible on hover/open ── */
|
|
button:has(> .comfyui-logo):hover,
|
|
button:has(.comfyui-logo):hover,
|
|
.p-button:has(.comfyui-logo):hover,
|
|
button:has(.comfyui-logo)[aria-expanded="true"],
|
|
.comfyui-logo-menu-trigger:hover {
|
|
background: #1a1a1a !important;
|
|
}
|
|
button:has(.comfyui-logo):hover .comfyui-logo,
|
|
button:has(.comfyui-logo):hover svg,
|
|
button:has(.comfyui-logo):hover path {
|
|
color: #ffffff !important;
|
|
fill: #ffffff !important;
|
|
}
|
|
|
|
/* ── active/selected/checked states: neutral gray, never white ── */
|
|
:root, :root.dark-theme {
|
|
--p-button-secondary-active-background: #242424 !important;
|
|
--p-togglebutton-checked-background: #242424 !important;
|
|
--p-togglebutton-checked-color: #ededed !important;
|
|
--p-navigation-item-active-background: #242424 !important;
|
|
--p-tab-active-background: #0a0a0a !important;
|
|
--p-button-text-primary-active-background: rgba(255,255,255,.16) !important;
|
|
}
|
|
.side-tool-bar-container .p-button.p-highlight,
|
|
.side-tool-bar-container .p-togglebutton.p-togglebutton-checked,
|
|
.side-tool-bar-container [aria-pressed="true"],
|
|
.side-tool-bar-container .p-button:active,
|
|
.p-selectbutton .p-button.p-highlight {
|
|
background: #242424 !important;
|
|
color: #ededed !important;
|
|
}
|
|
.side-tool-bar-container .p-button.p-highlight svg,
|
|
.side-tool-bar-container [aria-pressed="true"] svg { color: #ededed !important; fill: currentColor !important; }
|
|
|
|
/* ── selected sidebar icon: neutral dark, never white ── */
|
|
:root, :root.dark-theme {
|
|
--interface-panel-selected-surface: #242424 !important;
|
|
--interface-menu-component-surface-selected: #242424 !important;
|
|
}
|
|
.side-bar-button-selected {
|
|
background-color: #242424 !important;
|
|
color: #ededed !important;
|
|
}
|
|
.side-bar-button-selected svg, .side-bar-button-selected i { color: #ededed !important; }
|
|
.selected:not(.p-galleria-thumbnail-item) {
|
|
background-color: #242424 !important;
|
|
color: #e5e5e5 !important;
|
|
}
|