refactor(web/css): replace hardcoded colors with CSS custom properties
Adds new badge, gradient, and surface variables to css-variables.css, then uses them across resolver-main.css and resolver-shell.css to centralize theme values and simplify future color adjustments.
This commit is contained in:
Dariusz L
@@ -207,4 +207,20 @@
|
||||
--mr-type-guider-text: #c7ffff;
|
||||
--mr-type-taesd-rgb: 220, 194, 116;
|
||||
--mr-type-taesd-text: #efd991;
|
||||
|
||||
--mr-badge-success-bg: rgba(34, 197, 94, 0.1);
|
||||
--mr-badge-success-border: rgba(34, 197, 94, 0.24);
|
||||
--mr-badge-success-text: #43d184;
|
||||
--mr-badge-error-bg: rgba(239, 68, 68, 0.16);
|
||||
--mr-badge-error-border: rgba(239, 68, 68, 0.34);
|
||||
--mr-badge-info-bg: rgba(96, 165, 250, 0.1);
|
||||
--mr-badge-info-border: rgba(78, 161, 255, 0.3);
|
||||
--mr-gradient-blue-primary: linear-gradient(180deg, rgba(37, 99, 190, 0.88) 0%, rgba(25, 72, 144, 0.92) 100%);
|
||||
--mr-gradient-blue-hover: linear-gradient(180deg, rgba(47, 117, 218, 0.96) 0%, rgba(30, 85, 166, 0.98) 100%);
|
||||
--mr-gradient-dock-preview: linear-gradient(180deg, rgba(38, 77, 50, 0.82), rgba(18, 35, 24, 0.88));
|
||||
--mr-surface-glass-02: rgba(255, 255, 255, 0.025);
|
||||
--mr-surface-glass-03: rgba(255, 255, 255, 0.035);
|
||||
--mr-surface-glass-05: rgba(255, 255, 255, 0.052);
|
||||
--mr-surface-slate-dark: rgba(15, 23, 42, 0.20);
|
||||
}
|
||||
|
||||
|
||||
+50
-50
@@ -161,7 +161,7 @@
|
||||
.mr-copy-mode.active,
|
||||
#model-resolver-modal .mr-btn-filter.active,
|
||||
#model-resolver-modal .mr-copy-mode.active {
|
||||
color: #dffbe5;
|
||||
color: var(--mr-accent);
|
||||
background: rgba(114, 211, 138, 0.13);
|
||||
border-color: rgba(114, 211, 138, 0.32);
|
||||
}
|
||||
@@ -239,7 +239,7 @@
|
||||
}
|
||||
|
||||
.mr-model-count-pill.is-active {
|
||||
color: #c9f6d0;
|
||||
color: var(--mr-type-lora-text);
|
||||
border-color: rgba(114, 211, 138, 0.25);
|
||||
background: rgba(114, 211, 138, 0.09);
|
||||
}
|
||||
@@ -663,7 +663,7 @@
|
||||
height: 16px;
|
||||
padding: 0 var(--mr-spacing-4);
|
||||
border-radius: var(--mr-missing-chip-radius);
|
||||
color: #c9f6d0;
|
||||
color: var(--mr-type-lora-text);
|
||||
background: rgba(114, 211, 138, 0.12);
|
||||
font-style: normal;
|
||||
font-size: var(--mr-font-xs);
|
||||
@@ -701,7 +701,7 @@
|
||||
}
|
||||
|
||||
.mr-missing-stat-partial {
|
||||
color: #f1cf64;
|
||||
color: var(--mr-warning);
|
||||
}
|
||||
|
||||
.mr-missing-list-head,
|
||||
@@ -985,7 +985,7 @@
|
||||
}
|
||||
|
||||
.mr-missing-row-match-partial strong {
|
||||
color: #f1cf64;
|
||||
color: var(--mr-warning);
|
||||
background: rgba(241, 207, 100, 0.13);
|
||||
}
|
||||
|
||||
@@ -1340,7 +1340,7 @@
|
||||
border-radius: var(--mr-missing-chip-radius);
|
||||
border: 1px solid rgba(114, 211, 138, 0.28);
|
||||
background: rgba(114, 211, 138, 0.105);
|
||||
color: #c9f6d0;
|
||||
color: var(--mr-type-lora-text);
|
||||
font-size: var(--mr-font-xs);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
@@ -1673,7 +1673,7 @@
|
||||
margin-bottom: var(--mr-spacing-8);
|
||||
padding-bottom: var(--mr-spacing-8);
|
||||
border-bottom: 1px solid var(--mr-missing-line, var(--mr-divider));
|
||||
color: #bdbdbd;
|
||||
color: var(--mr-text-muted);
|
||||
font-size: var(--mr-font-lg);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
@@ -1907,7 +1907,7 @@
|
||||
}
|
||||
|
||||
.mr-match-status-partial {
|
||||
color: #f1cf64;
|
||||
color: var(--mr-warning);
|
||||
background: rgba(241, 207, 100, 0.10);
|
||||
}
|
||||
|
||||
@@ -2192,7 +2192,7 @@
|
||||
|
||||
.mr-btn-danger,
|
||||
#model-resolver-modal .mr-btn-danger {
|
||||
background: #f44336;
|
||||
background: var(--mr-color-danger-bright);
|
||||
border-color: rgba(244, 67, 54, 0.52);
|
||||
color: white;
|
||||
}
|
||||
@@ -2617,7 +2617,7 @@
|
||||
|
||||
.mr-missing-browser .mr-search-results-table th {
|
||||
background: var(--mr-missing-surface-raised, rgba(255, 255, 255, 0.04));
|
||||
color: #bdbdbd;
|
||||
color: var(--mr-text-muted);
|
||||
}
|
||||
|
||||
.mr-search-results-table tr:last-child td {
|
||||
@@ -2794,7 +2794,7 @@
|
||||
}
|
||||
|
||||
.mr-search-match-medium {
|
||||
color: #f1cf64;
|
||||
color: var(--mr-warning);
|
||||
}
|
||||
|
||||
.mr-search-match-weak {
|
||||
@@ -2917,7 +2917,7 @@
|
||||
}
|
||||
|
||||
.mr-search-progress-list-compact .mr-search-progress-error::before {
|
||||
background: #ff8a80;
|
||||
background: var(--mr-color-error-lighter);
|
||||
}
|
||||
|
||||
.mr-search-progress-list-compact .mr-search-progress-cancelled::before {
|
||||
@@ -2947,7 +2947,7 @@
|
||||
}
|
||||
|
||||
.mr-search-progress-list-compact .mr-search-progress-error .mr-search-progress-status {
|
||||
color: #ff8a80;
|
||||
color: var(--mr-color-error-lighter);
|
||||
}
|
||||
|
||||
.mr-search-progress-head {
|
||||
@@ -2990,7 +2990,7 @@
|
||||
border-radius: var(--mr-radius-md);
|
||||
border-color: rgba(255, 120, 112, 0.28);
|
||||
background: rgba(255, 120, 112, 0.055);
|
||||
color: #ff8a80;
|
||||
color: var(--mr-color-error-lighter);
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-search-result-action-btn.mr-search-progress-cancel:hover:not(:disabled),
|
||||
@@ -3036,7 +3036,7 @@
|
||||
}
|
||||
|
||||
.mr-search-progress-error .mr-search-progress-fill {
|
||||
background: #ff8a80;
|
||||
background: var(--mr-color-error-lighter);
|
||||
}
|
||||
|
||||
.mr-search-progress-cancelled .mr-search-progress-fill {
|
||||
@@ -3240,7 +3240,7 @@
|
||||
.mr-status-success {
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
border: 1px solid rgba(76, 175, 80, 0.3);
|
||||
color: #a5d6a7;
|
||||
color: var(--mr-accent-hover);
|
||||
}
|
||||
|
||||
.mr-status-info {
|
||||
@@ -3354,7 +3354,7 @@
|
||||
align-items: center;
|
||||
gap: var(--mr-spacing-7);
|
||||
min-width: 0;
|
||||
color: #9f9f9f;
|
||||
color: var(--mr-color-gray-400);
|
||||
font-size: var(--mr-font-sm);
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
@@ -3846,7 +3846,7 @@
|
||||
padding: 0 var(--mr-spacing-7);
|
||||
border-radius: var(--mr-missing-chip-radius);
|
||||
background: rgba(114, 211, 138, 0.12);
|
||||
color: #dffbe5;
|
||||
color: var(--mr-accent);
|
||||
font-size: var(--mr-font-xs);
|
||||
}
|
||||
|
||||
@@ -4214,12 +4214,12 @@ button.mr-info-link:disabled {
|
||||
|
||||
.mr-info-tag.-basemodel-sdxl {
|
||||
background: rgba(33, 150, 243, 0.2);
|
||||
color: #64B5F6;
|
||||
color: var(--mr-color-primary);
|
||||
}
|
||||
|
||||
.mr-info-tag.-basemodel-sdxl-turbo {
|
||||
background: rgba(33, 150, 243, 0.2);
|
||||
color: #64B5F6;
|
||||
color: var(--mr-color-primary);
|
||||
}
|
||||
|
||||
.mr-info-tag.-basemodel-flux\.1 {
|
||||
@@ -4844,7 +4844,7 @@ button.mr-info-link:disabled {
|
||||
overflow-y: auto;
|
||||
padding: var(--mr-spacing-10);
|
||||
font-size: var(--mr-font-sm);
|
||||
color: #e9eef5;
|
||||
color: var(--mr-text);
|
||||
background: linear-gradient(180deg, rgba(7, 10, 14, 0) 0%, rgba(7, 10, 14, 0.82) 16%, rgba(7, 10, 14, 0.94) 100%);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
@@ -4954,7 +4954,7 @@ button.mr-info-link:disabled {
|
||||
}
|
||||
|
||||
.mr-info-error {
|
||||
color: #f44336;
|
||||
color: var(--mr-color-danger-bright);
|
||||
font-size: var(--mr-font-md);
|
||||
}
|
||||
|
||||
@@ -5203,7 +5203,7 @@ button.mr-info-link:disabled {
|
||||
}
|
||||
|
||||
.mr-image-preview-resource-name {
|
||||
color: #e8e8eb;
|
||||
color: var(--mr-text);
|
||||
font-size: var(--mr-font-md);
|
||||
font-weight: 800;
|
||||
min-width: 0;
|
||||
@@ -5279,7 +5279,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-image-preview-card p {
|
||||
margin: 0;
|
||||
color: #b9bbc4;
|
||||
color: var(--mr-text-muted);
|
||||
font-size: var(--mr-font-md);
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
@@ -5495,7 +5495,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.11);
|
||||
border-radius: var(--mr-radius-lg);
|
||||
background: var(--mr-missing-control-bg-hover);
|
||||
color: #e8e8eb;
|
||||
color: var(--mr-text);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -5725,7 +5725,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
padding: var(--mr-spacing-3) var(--mr-spacing-7);
|
||||
border-radius: var(--mr-radius-md);
|
||||
background: var(--mr-border);
|
||||
color: #ececf0;
|
||||
color: var(--mr-text);
|
||||
font-size: var(--mr-font-sm);
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -5838,7 +5838,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-model-details-file-table-row.is-target .mr-model-details-file-table-badges span:first-child {
|
||||
background: rgba(114, 211, 138, 0.18);
|
||||
color: #9cf2b2;
|
||||
color: var(--mr-accent-hover);
|
||||
}
|
||||
|
||||
.mr-model-details-file-table-badges .is-empty {
|
||||
@@ -5951,7 +5951,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-model-details-file.is-target .mr-model-details-file-summary-badges span:first-child {
|
||||
background: rgba(114, 211, 138, 0.18);
|
||||
color: #9cf2b2;
|
||||
color: var(--mr-accent-hover);
|
||||
}
|
||||
|
||||
.mr-model-details-file-body {
|
||||
@@ -6162,7 +6162,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
.mr-model-details-mirror.is-dead .mr-model-details-mirror-action {
|
||||
color: #f87171;
|
||||
color: var(--mr-color-error-lighter);
|
||||
}
|
||||
|
||||
.mr-model-details-mirror.is-gated .mr-model-details-mirror-action {
|
||||
@@ -7221,12 +7221,12 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-options-history-action.is-created {
|
||||
color: var(--mr-color-success);
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
background: var(--mr-badge-success-bg);
|
||||
}
|
||||
|
||||
.mr-options-history-action.is-updated {
|
||||
color: var(--mr-accent);
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
background: var(--mr-badge-info-bg);
|
||||
}
|
||||
|
||||
.mr-options-history-action.is-skipped,
|
||||
@@ -7581,7 +7581,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-options-audit-empty {
|
||||
padding: var(--mr-spacing-12);
|
||||
border: 1px solid rgba(34, 197, 94, 0.24);
|
||||
border: 1px solid var(--mr-badge-success-border);
|
||||
border-radius: var(--mr-radius-lg);
|
||||
color: var(--mr-color-success);
|
||||
background: rgba(34, 197, 94, 0.08);
|
||||
@@ -7762,7 +7762,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
.mr-tooltip-badge:focus-visible {
|
||||
background: rgba(78, 161, 255, 0.18);
|
||||
color: #d9ecff;
|
||||
border-color: rgba(78, 161, 255, 0.3);
|
||||
border-color: var(--mr-badge-info-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -7924,7 +7924,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
.mr-options-template-detect-status.is-valid {
|
||||
color: #c9f6d0;
|
||||
color: var(--mr-type-lora-text);
|
||||
border-color: rgba(114, 211, 138, 0.28);
|
||||
background: rgba(114, 211, 138, 0.08);
|
||||
}
|
||||
@@ -7987,7 +7987,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-options-mapping-remove:hover {
|
||||
background: rgba(255, 0, 0, 0.18);
|
||||
color: #ff6b6b;
|
||||
color: var(--mr-color-danger-bright);
|
||||
}
|
||||
|
||||
.mr-options-placeholder-badge {
|
||||
@@ -7997,7 +7997,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
padding: var(--mr-spacing-3) var(--mr-spacing-7);
|
||||
border-radius: var(--mr-radius-md);
|
||||
background: rgba(0, 122, 204, 0.9);
|
||||
color: #eaf6ff;
|
||||
color: var(--mr-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
||||
font-size: var(--mr-font-sm);
|
||||
font-weight: 700;
|
||||
@@ -8098,7 +8098,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
|
||||
.mr-options-visibility-btn[aria-pressed="true"],
|
||||
#model-resolver-modal .mr-options-visibility-btn[aria-pressed="true"] {
|
||||
color: #dffbe5;
|
||||
color: var(--mr-accent);
|
||||
border-color: rgba(114, 211, 138, 0.32);
|
||||
background: rgba(114, 211, 138, 0.13);
|
||||
}
|
||||
@@ -8214,7 +8214,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
width: 46px;
|
||||
height: 26px;
|
||||
border-radius: var(--mr-missing-chip-radius);
|
||||
background: #555560;
|
||||
background: var(--mr-color-gray-700);
|
||||
border: 1px solid var(--mr-missing-control-bg-hover);
|
||||
transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
@@ -8233,8 +8233,8 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
.mr-options-switch-input:checked+.mr-options-switch {
|
||||
background: #4c97ff;
|
||||
border-color: #4c97ff;
|
||||
background: var(--mr-color-primary);
|
||||
border-color: var(--mr-color-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -8317,7 +8317,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
.mr-options-status.is-saved {
|
||||
color: #9dd8a9;
|
||||
color: var(--mr-accent-hover);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@@ -9020,7 +9020,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
|
||||
font-size: var(--mr-font-sm);
|
||||
font-weight: 650;
|
||||
color: #e7e7e7;
|
||||
color: var(--mr-text-soft);
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-missing-detail-pane .mr-badge,
|
||||
@@ -9324,7 +9324,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
display: inline-flex;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: #43d184;
|
||||
color: var(--mr-badge-success-text);
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-missing-detail-pane .mr-selected-status-icon svg {
|
||||
@@ -9339,7 +9339,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
color: #ededed;
|
||||
color: var(--mr-text);
|
||||
font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
|
||||
font-size: var(--mr-font-lg);
|
||||
font-weight: 700;
|
||||
@@ -9377,7 +9377,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-primary {
|
||||
background: linear-gradient(180deg, rgba(37, 99, 190, 0.88) 0%, rgba(25, 72, 144, 0.92) 100%);
|
||||
background: var(--mr-gradient-blue-primary);
|
||||
border-color: rgba(88, 151, 255, 0.46);
|
||||
color: #edf5ff;
|
||||
box-shadow:
|
||||
@@ -9386,14 +9386,14 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-primary:hover:not(:disabled) {
|
||||
background: linear-gradient(180deg, rgba(47, 117, 218, 0.96) 0%, rgba(30, 85, 166, 0.98) 100%);
|
||||
background: var(--mr-gradient-blue-hover);
|
||||
border-color: rgba(111, 170, 255, 0.62);
|
||||
color: var(--mr-color-white);
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-missing-detail-pane .model-resolver-selected .mr-btn-danger {
|
||||
background: rgba(239, 68, 68, 0.16);
|
||||
border-color: rgba(239, 68, 68, 0.34);
|
||||
background: var(--mr-badge-error-bg);
|
||||
border-color: var(--mr-badge-error-border);
|
||||
color: #fee2e2;
|
||||
}
|
||||
|
||||
@@ -9441,7 +9441,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table th {
|
||||
padding: 9px var(--mr-spacing-10);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #bdbdbd;
|
||||
color: var(--mr-text-muted);
|
||||
font-size: var(--mr-font-xs);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
@@ -9641,7 +9641,7 @@ a.mr-image-preview-resource-name:hover {
|
||||
}
|
||||
|
||||
#model-resolver-modal .mr-missing-detail-pane [id^="local-matches-body-"] .mr-local-alternatives-label {
|
||||
color: #bdbdbd;
|
||||
color: var(--mr-text-muted);
|
||||
}
|
||||
|
||||
.litegraph.litecontextmenu .litemenu-entry.mr-model-resolver-node-menu::before {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
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));
|
||||
background: var(--mr-gradient-dock-preview);
|
||||
border: 2px solid rgba(114, 211, 138, 0.72);
|
||||
border-radius: var(--mr-radius-xl);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
@@ -622,7 +622,7 @@
|
||||
max-width: 92px;
|
||||
padding: var(--mr-spacing-2) var(--mr-spacing-6);
|
||||
overflow: hidden;
|
||||
color: #c9f5d2;
|
||||
color: var(--mr-type-lora-text);
|
||||
font-size: var(--mr-font-xs);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
|
||||
Reference in New Issue
Block a user