nodes/Azornes-Comfyui-Model-Resolver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: switch resolver UI to custom CSS variables and add dock drag preview

Browse Source
This commit is contained in:
Dariusz L
2026-08-01 13:48:02 +02:00
parent 25b09799fb
commit d4cccde2c2
2 changed files with 172 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/resolver-main.css
+56 -17
View File
@@ -1,8 +1,22 @@
#model-resolver-modal,
#model-resolver-modal button,
#model-resolver-modal input,
#model-resolver-modal textarea,
#model-resolver-modal select {
font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
#model-resolver-modal {
/* Keep third-party ComfyUI rules that target .comfy-modal on our own palette. */
--input-text: var(--mr-text, #f3f3f3);
--comfy-input-bg: var(--mr-panel-bg, #202020);
--comfy-menu-bg: var(--mr-panel-bg-strong, #262626);
--border-color: var(--mr-border-strong, rgba(255, 255, 255, 0.14));
--primary-color: var(--mr-accent, #72d38a);
color: var(--mr-text, #f3f3f3) !important;
color-scheme: dark;
font-size: var(--mr-font-base, 13px);
line-height: var(--mr-line-height-normal, 1.5);
}
#model-resolver-modal button {
@@ -3755,6 +3769,10 @@
#model-resolver-modal .mr-tab {
border-width: 0 !important;
margin: 0 !important;
color: rgba(255, 255, 255, 0.68) !important;
font-family: inherit !important;
font-size: 12px !important;
line-height: 1 !important;
}
#model-resolver-modal .mr-tab:not(.mr-tab-active) {
@@ -3769,9 +3787,30 @@
#model-resolver-modal .mr-tab.mr-tab-active {
margin-bottom: 0 !important;
color: var(--mr-text, #eef2f7) !important;
box-shadow: 0 1px 0 var(--mr-tab-active-bg) !important;
}
#model-resolver-modal .mr-tab.mr-tab-active:hover,
#model-resolver-modal .mr-tab.mr-tab-active:focus,
#model-resolver-modal .mr-tab.mr-tab-active:active {
color: var(--mr-text, #eef2f7) !important;
}
/* Form controls must keep the resolver palette when ComfyUI themes change. */
#model-resolver-modal input:not([type="checkbox"]):not([type="radio"]),
#model-resolver-modal textarea,
#model-resolver-modal select {
color: var(--mr-text, #f3f3f3) !important;
font-family: inherit !important;
}
#model-resolver-modal input::placeholder,
#model-resolver-modal textarea::placeholder {
color: var(--mr-text-muted, #b1b1b1) !important;
opacity: 1;
}
/* Loaded Models Tab */
.mr-loaded-models {
padding: 0;
@@ -3884,8 +3923,8 @@
/* Context menu */
.mr-context-menu {
position: fixed;
background: var(--comfy-menu-bg, #202020);
border: 1px solid var(--border-color, #555555);
background: var(--mr-panel-bg-strong, #202020);
border: 1px solid var(--mr-border-strong, #555555);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
z-index: var(--mr-z-context-menu-popup, calc(var(--mr-z-context-menu) + 1));
@@ -3899,7 +3938,7 @@
gap: 8px;
padding: 8px 12px;
font-size: 12px;
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
cursor: pointer;
transition: background 0.15s ease;
}
@@ -3932,7 +3971,7 @@
.mr-context-menu-divider {
height: 1px;
background: var(--border-color, #555555);
background: var(--mr-border-strong, #555555);
margin: 4px 0;
}
@@ -3957,8 +3996,8 @@
}
.mr-info-dialog {
background: var(--comfy-menu-bg, #202020);
border: 2px solid var(--border-color, #555555);
background: var(--mr-panel-bg-strong, #202020);
border: 2px solid var(--mr-border-strong, #555555);
border-radius: 8px;
width: 640px;
max-width: 92vw;
@@ -3986,7 +4025,7 @@
margin: 0;
font-size: 16px;
line-height: 1.35;
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
min-width: 0;
}
@@ -4001,7 +4040,7 @@
background: none;
border: none;
font-size: 24px;
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
cursor: pointer;
padding: 0;
width: 30px;
@@ -4031,7 +4070,7 @@
.mr-info-section {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color, #555555);
border-bottom: 1px solid var(--mr-border-strong, #555555);
}
.mr-info-section-header {
@@ -4056,7 +4095,7 @@
}
.mr-info-value {
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
font-size: 13px;
font-weight: 500;
}
@@ -4093,7 +4132,7 @@
padding: 5px 10px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.055);
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
border-radius: 6px;
text-decoration: none;
font-size: 12px;
@@ -4150,7 +4189,7 @@ button.mr-info-link:disabled {
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
}
.mr-info-tag.-type-lora {
@@ -4317,7 +4356,7 @@ button.mr-info-link:disabled {
}
.mr-info-table td:last-child {
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
font-weight: 650;
word-break: break-word;
}
@@ -4588,7 +4627,7 @@ button.mr-info-link:disabled {
.mr-info-description {
line-height: 1.55;
color: var(--input-text, #e0e0e0);
color: var(--mr-text, #e0e0e0);
max-height: 220px;
overflow: hidden;
position: relative;
@@ -4687,7 +4726,7 @@ button.mr-info-link:disabled {
.mr-info-images {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color, #555555);
border-top: 1px solid var(--mr-border-strong, #555555);
}
.mr-info-images-header {
@@ -4904,7 +4943,7 @@ button.mr-info-link:disabled {
/* Footer */
.mr-info-dialog-footer {
padding: 12px 20px;
border-top: 1px solid var(--border-color, #555555);
border-top: 1px solid var(--mr-border-strong, #555555);
display: flex;
justify-content: flex-end;
gap: 8px;
web/css/resolver-shell.css
+116 -5
View File
@@ -6,6 +6,94 @@
display: none;
}
.mr-dock-drop-preview {
position: fixed;
z-index: var(--mr-z-dropdown);
top: 8px;
bottom: 8px;
left: 8px;
display: flex;
width: clamp(220px, 26vw, 380px);
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
pointer-events: none;
visibility: hidden;
opacity: 0;
color: var(--mr-text, #f3f3f3);
background: linear-gradient(180deg, rgba(38, 77, 50, 0.82), rgba(18, 35, 24, 0.88));
border: 2px solid rgba(114, 211, 138, 0.72);
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
transform: translateX(-12px) scale(0.985);
transition: opacity 100ms ease, transform 100ms ease, visibility 0s linear 100ms;
contain: layout paint style;
}
.mr-undock-drop-preview {
position: fixed;
z-index: var(--mr-z-dialog);
top: 0;
left: 0;
display: flex;
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
pointer-events: none;
visibility: hidden;
opacity: 0;
color: var(--mr-text, #f3f3f3);
background: linear-gradient(180deg, rgba(38, 77, 50, 0.78), rgba(18, 35, 24, 0.84));
border: 2px solid rgba(114, 211, 138, 0.72);
border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
transition: opacity 100ms ease, visibility 0s linear 100ms;
contain: layout paint style;
}
.mr-undock-drop-preview.is-active {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.mr-undock-drop-preview strong {
font-size: 15px;
}
.mr-undock-drop-preview>span:last-child {
color: var(--mr-text-muted, #b1b1b1);
font-size: 12px;
}
.mr-dock-drop-preview.is-active {
visibility: visible;
opacity: 1;
transform: translateX(0) scale(1);
transition-delay: 0s;
}
.mr-dock-drop-preview-icon,
.mr-dock-drop-preview-icon svg {
display: block;
width: 26px;
height: 26px;
color: var(--mr-accent, #72d38a);
}
.mr-dock-drop-preview strong {
font-size: 15px;
}
.mr-dock-drop-preview>span:last-child {
color: var(--mr-text-muted, #b1b1b1);
font-size: 12px;
}
.model-resolver-modal {
position: fixed;
top: 50%;
@@ -24,7 +112,7 @@
overflow: hidden;
resize: both;
z-index: var(--mr-z-dialog);
color: var(--input-text, #fff);
color: var(--mr-text, #fff);
background: linear-gradient(180deg, #171717 0%, #111 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 7px;
@@ -236,11 +324,34 @@
#model-resolver-splitter:hover::before,
#model-resolver-splitter:focus-visible::before,
#model-resolver-splitter.is-resizing::before,
#model-resolver-body.mr-queue-preview-collapsed #model-resolver-splitter::before {
background: rgba(114, 211, 138, 0.78);
box-shadow: 0 0 0 3px rgba(114, 211, 138, 0.12);
}
.p-splitter.is-resizing::after,
#model-resolver-panel.is-resizing::after {
content: "";
position: absolute;
z-index: 9999;
inset: 0;
cursor: col-resize;
pointer-events: auto;
}
.mr-missing-detail-pane,
.mr-missing-list-pane,
.p-splitter-panel {
contain: layout style;
}
.mr-missing-browser-splitter.is-resizing,
.p-splitter-gutter.is-resizing,
#model-resolver-splitter.is-resizing {
will-change: transform;
}
#queue-toggle-icon {
position: absolute;
top: 50%;
@@ -656,16 +767,16 @@
right: var(--mr-spacing-10);
z-index: var(--mr-z-floating-button);
padding: var(--mr-spacing-8) var(--mr-spacing-16);
color: var(--input-text, #fff);
color: var(--mr-text, #fff);
font-size: var(--mr-font-lg);
background: var(--comfy-input-bg, #353535);
border: 2px solid var(--primary-color, #007acc);
background: var(--mr-panel-bg-strong, #353535);
border: 2px solid var(--mr-accent, #72d38a);
border-radius: var(--mr-radius-lg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.model-resolver-floating-button:hover {
background: var(--primary-color, #007acc);
background: var(--mr-accent, #72d38a);
transform: scale(1.05);
}