nodes/robertvoy-ComfyUI-Distributed
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adapt panel styling to Nodes 2.0 (Modern Node Design)

Browse Source 
Detects the Comfy.VueNodes.Enabled setting via addEventListener and
toggles a `distributed-panel--nodes2` class on the panel root element.
CSS visual properties (backgrounds, borders, border-radius) are migrated
from inline JS styles to CSS classes, enabling clean theme overrides for
Nodes 2.0 using PrimeVue surface variables (--p-surface-*, --p-text-*).
This commit is contained in:
Robert Wojciechowski
2026-02-28 04:52:59 +00:00
parent d8095cddb6
commit 2565f5aece
4 changed files with 149 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/distributed.css
+106
View File
@@ -107,6 +107,112 @@
background-color: var(--tunnel-disable) !important;
}
/* ---- Themeable card/column/input defaults (Classic) ---- */
.dist-card {
background: #2a2a2a;
border-radius: 6px;
}
.dist-card--blueprint {
border: 2px dashed #555;
background: rgba(255, 255, 255, 0.02);
}
.dist-card--add {
border: 1px dashed #444;
background: transparent;
}
.dist-card__left-col {
border-right: 1px solid #3a3a3a;
background: rgba(0, 0, 0, 0.1);
}
.dist-info-box {
background-color: #333;
border-radius: 4px;
}
.dist-form-input {
background: #2a2a2a;
border: 1px solid #444;
border-radius: 4px;
}
.worker-settings {
background: #1e1e1e;
border: 1px solid #2a2a2a;
border-radius: 4px;
}
/* ---- Nodes 2.0 Theme ---- */
.distributed-panel--nodes2 .dist-card {
background: var(--p-surface-800, #1e1e1e);
border: 1px solid var(--p-surface-700, #2c2c2c);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.distributed-panel--nodes2 .dist-card--blueprint {
border: 2px dashed var(--p-surface-600, #404040);
background: rgba(255, 255, 255, 0.015);
box-shadow: none;
}
.distributed-panel--nodes2 .dist-card--add {
border: 1px dashed var(--p-surface-600, #404040);
background: transparent;
box-shadow: none;
}
.distributed-panel--nodes2 .dist-card__left-col {
border-right-color: var(--p-surface-700, #2c2c2c);
background: var(--p-surface-900, #131313);
}
.distributed-panel--nodes2 .dist-info-box {
background-color: var(--p-surface-700, #2c2c2c);
color: var(--p-text-muted-color, #9e9e9e);
border-radius: 6px;
}
.distributed-panel--nodes2 .dist-form-input {
background: var(--p-surface-800, #1e1e1e);
border-color: var(--p-surface-600, #404040);
border-radius: 6px;
color: var(--p-text-color, #ffffff);
}
.distributed-panel--nodes2 .worker-settings {
background: var(--p-surface-900, #131313);
border-color: var(--p-surface-700, #2c2c2c);
border-radius: 6px;
}
.distributed-panel--nodes2 .entity-card-content--hovered {
background-color: var(--p-surface-700, #2c2c2c) !important;
}
.distributed-panel--nodes2 .placeholder-card--blueprint {
border-color: var(--p-surface-600, #404040) !important;
}
.distributed-panel--nodes2 .placeholder-card--blueprint.is-hovered {
border-color: var(--p-surface-500, #555555) !important;
}
.distributed-panel--nodes2 .placeholder-card--add {
border-color: var(--p-surface-600, #404040) !important;
}
.distributed-panel--nodes2 .placeholder-card--add.is-hovered {
border-color: var(--p-surface-500, #555555) !important;
}
/* ---- End Nodes 2.0 Theme ---- */
.is-hidden {
display: none !important;
}