From ba9ae41f1ece7ef8e0f25f140e8412af0bcc7183 Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Thu, 28 May 2026 15:57:04 +0200 Subject: [PATCH] Refactor: introduce CSS variables for model type colors and update linker UI to use them --- web/css/css-variables.css | 40 ++++++++++++++++++ web/css/linker-main.css | 87 ++++++++++++++++++++------------------- 2 files changed, 85 insertions(+), 42 deletions(-) diff --git a/web/css/css-variables.css b/web/css/css-variables.css index 0db0824..7f3cd01 100644 --- a/web/css/css-variables.css +++ b/web/css/css-variables.css @@ -156,4 +156,44 @@ --ml-missing-chip-radius: 999px; --ml-missing-chip-height: 20px; --ml-missing-chip-icon-size: var(--ml-spacing-12); + --ml-type-chip-bg-alpha-strong: 0.155; + --ml-type-chip-bg-alpha: 0.12; + --ml-type-chip-border-alpha: 0.26; + --ml-type-chip-glow-alpha: 0.045; + --ml-type-generic-rgb: 176, 176, 176; + --ml-type-generic-text: #d6d6d6; + --ml-type-model-rgb: 179, 157, 219; + --ml-type-model-text: #dbcfff; + --ml-type-lora-rgb: 194, 255, 174; + --ml-type-lora-text: #d7ffcb; + --ml-type-style-model-rgb: 194, 255, 174; + --ml-type-style-model-text: #d7ffcb; + --ml-type-clip-rgb: 255, 213, 0; + --ml-type-clip-text: #ffe678; + --ml-type-clip-vision-rgb: 168, 218, 220; + --ml-type-clip-vision-text: #c7eff0; + --ml-type-clip-vision-output-rgb: 173, 116, 82; + --ml-type-clip-vision-output-text: #e8b79a; + --ml-type-conditioning-rgb: 255, 169, 49; + --ml-type-conditioning-text: #ffd08c; + --ml-type-controlnet-rgb: 110, 231, 183; + --ml-type-controlnet-text: #b1f4db; + --ml-type-image-rgb: 100, 181, 246; + --ml-type-image-text: #b9dcff; + --ml-type-latent-rgb: 255, 156, 249; + --ml-type-latent-text: #ffc8fb; + --ml-type-mask-rgb: 129, 199, 132; + --ml-type-mask-text: #bdebc0; + --ml-type-vae-rgb: 255, 110, 110; + --ml-type-vae-text: #ffb8b8; + --ml-type-noise-rgb: 176, 176, 176; + --ml-type-noise-text: #d6d6d6; + --ml-type-sampler-rgb: 236, 180, 180; + --ml-type-sampler-text: #f2cccc; + --ml-type-sigmas-rgb: 205, 255, 205; + --ml-type-sigmas-text: #dcffdc; + --ml-type-guider-rgb: 102, 255, 255; + --ml-type-guider-text: #c7ffff; + --ml-type-taesd-rgb: 220, 194, 116; + --ml-type-taesd-text: #efd991; } diff --git a/web/css/linker-main.css b/web/css/linker-main.css index 39ea304..470202c 100644 --- a/web/css/linker-main.css +++ b/web/css/linker-main.css @@ -884,12 +884,12 @@ .ml-info-tag.ml-type-chip, .ml-category-chip.ml-type-chip, .ml-missing-row-type { - --ml-type-rgb: 176, 176, 176; - --ml-type-text: #d6d6d6; - --ml-type-bg-alpha-strong: 0.155; - --ml-type-bg-alpha: 0.12; - --ml-type-border-alpha: 0.26; - --ml-type-glow-alpha: 0.045; + --ml-type-rgb: var(--ml-type-generic-rgb, 176, 176, 176); + --ml-type-text: var(--ml-type-generic-text, #d6d6d6); + --ml-type-bg-alpha-strong: var(--ml-type-chip-bg-alpha-strong, 0.155); + --ml-type-bg-alpha: var(--ml-type-chip-bg-alpha, 0.12); + --ml-type-border-alpha: var(--ml-type-chip-border-alpha, 0.26); + --ml-type-glow-alpha: var(--ml-type-chip-glow-alpha, 0.045); background: linear-gradient(180deg, rgba(var(--ml-type-rgb), var(--ml-type-bg-alpha-strong)) 0%, @@ -901,69 +901,72 @@ 0 0 12px rgba(var(--ml-type-rgb), var(--ml-type-glow-alpha)); } .ml-type-chip.ml-type-chip--model { - --ml-type-rgb: 179, 157, 219; - --ml-type-text: #dbcfff; + --ml-type-rgb: var(--ml-type-model-rgb, 179, 157, 219); + --ml-type-text: var(--ml-type-model-text, #dbcfff); +} +.ml-type-chip.ml-type-chip--lora { + --ml-type-rgb: var(--ml-type-lora-rgb, 194, 255, 174); + --ml-type-text: var(--ml-type-lora-text, #d7ffcb); } -.ml-type-chip.ml-type-chip--lora, .ml-type-chip.ml-type-chip--style-model { - --ml-type-rgb: 194, 255, 174; - --ml-type-text: #d7ffcb; + --ml-type-rgb: var(--ml-type-style-model-rgb, 194, 255, 174); + --ml-type-text: var(--ml-type-style-model-text, #d7ffcb); } .ml-type-chip.ml-type-chip--clip { - --ml-type-rgb: 255, 213, 0; - --ml-type-text: #ffe678; + --ml-type-rgb: var(--ml-type-clip-rgb, 255, 213, 0); + --ml-type-text: var(--ml-type-clip-text, #ffe678); } .ml-type-chip.ml-type-chip--clip-vision { - --ml-type-rgb: 168, 218, 220; - --ml-type-text: #c7eff0; + --ml-type-rgb: var(--ml-type-clip-vision-rgb, 168, 218, 220); + --ml-type-text: var(--ml-type-clip-vision-text, #c7eff0); } .ml-type-chip.ml-type-chip--clip-vision-output { - --ml-type-rgb: 173, 116, 82; - --ml-type-text: #e8b79a; + --ml-type-rgb: var(--ml-type-clip-vision-output-rgb, 173, 116, 82); + --ml-type-text: var(--ml-type-clip-vision-output-text, #e8b79a); } .ml-type-chip.ml-type-chip--conditioning { - --ml-type-rgb: 255, 169, 49; - --ml-type-text: #ffd08c; + --ml-type-rgb: var(--ml-type-conditioning-rgb, 255, 169, 49); + --ml-type-text: var(--ml-type-conditioning-text, #ffd08c); } .ml-type-chip.ml-type-chip--controlnet { - --ml-type-rgb: 110, 231, 183; - --ml-type-text: #b1f4db; + --ml-type-rgb: var(--ml-type-controlnet-rgb, 110, 231, 183); + --ml-type-text: var(--ml-type-controlnet-text, #b1f4db); } .ml-type-chip.ml-type-chip--image { - --ml-type-rgb: 100, 181, 246; - --ml-type-text: #b9dcff; + --ml-type-rgb: var(--ml-type-image-rgb, 100, 181, 246); + --ml-type-text: var(--ml-type-image-text, #b9dcff); } .ml-type-chip.ml-type-chip--latent { - --ml-type-rgb: 255, 156, 249; - --ml-type-text: #ffc8fb; + --ml-type-rgb: var(--ml-type-latent-rgb, 255, 156, 249); + --ml-type-text: var(--ml-type-latent-text, #ffc8fb); } .ml-type-chip.ml-type-chip--mask { - --ml-type-rgb: 129, 199, 132; - --ml-type-text: #bdebc0; + --ml-type-rgb: var(--ml-type-mask-rgb, 129, 199, 132); + --ml-type-text: var(--ml-type-mask-text, #bdebc0); } .ml-type-chip.ml-type-chip--vae { - --ml-type-rgb: 255, 110, 110; - --ml-type-text: #ffb8b8; + --ml-type-rgb: var(--ml-type-vae-rgb, 255, 110, 110); + --ml-type-text: var(--ml-type-vae-text, #ffb8b8); } .ml-type-chip.ml-type-chip--noise { - --ml-type-rgb: 176, 176, 176; - --ml-type-text: #d6d6d6; + --ml-type-rgb: var(--ml-type-noise-rgb, 176, 176, 176); + --ml-type-text: var(--ml-type-noise-text, #d6d6d6); } .ml-type-chip.ml-type-chip--sampler { - --ml-type-rgb: 236, 180, 180; - --ml-type-text: #f2cccc; + --ml-type-rgb: var(--ml-type-sampler-rgb, 236, 180, 180); + --ml-type-text: var(--ml-type-sampler-text, #f2cccc); } .ml-type-chip.ml-type-chip--sigmas { - --ml-type-rgb: 205, 255, 205; - --ml-type-text: #dcffdc; + --ml-type-rgb: var(--ml-type-sigmas-rgb, 205, 255, 205); + --ml-type-text: var(--ml-type-sigmas-text, #dcffdc); } .ml-type-chip.ml-type-chip--guider { - --ml-type-rgb: 102, 255, 255; - --ml-type-text: #c7ffff; + --ml-type-rgb: var(--ml-type-guider-rgb, 102, 255, 255); + --ml-type-text: var(--ml-type-guider-text, #c7ffff); } .ml-type-chip.ml-type-chip--taesd { - --ml-type-rgb: 220, 194, 116; - --ml-type-text: #efd991; + --ml-type-rgb: var(--ml-type-taesd-rgb, 220, 194, 116); + --ml-type-text: var(--ml-type-taesd-text, #efd991); } .ml-card-actions { display: flex; @@ -2514,9 +2517,9 @@ font-weight: 600; color: var(--input-text, #e0e0e0); } -.ml-info-tag.-type-lora { background: rgba(194,255,174,0.16); color: #d7ffcb; } -.ml-info-tag.-type-checkpoint { background: rgba(179,157,219,0.16); color: #dbcfff; } -.ml-info-tag.-type-vae { background: rgba(255,110,110,0.16); color: #ffb8b8; } +.ml-info-tag.-type-lora { background: rgba(var(--ml-type-lora-rgb, 194, 255, 174), 0.16); color: var(--ml-type-lora-text, #d7ffcb); } +.ml-info-tag.-type-checkpoint { background: rgba(var(--ml-type-model-rgb, 179, 157, 219), 0.16); color: var(--ml-type-model-text, #dbcfff); } +.ml-info-tag.-type-vae { background: rgba(var(--ml-type-vae-rgb, 255, 110, 110), 0.16); color: var(--ml-type-vae-text, #ffb8b8); } .ml-info-tag.-basemodel-sd1 { background: rgba(244,67,54,0.2); color: #EF9A9A; } .ml-info-tag.-basemodel-sdxl { background: rgba(33,150,243,0.2); color: #64B5F6; } .ml-info-tag.-basemodel-sdxl-turbo { background: rgba(33,150,243,0.2); color: #64B5F6; }