alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): update LoRA pool widget color scheme and empty state styling

Browse Source 
- Change primary accent color from green to blue across multiple components
- Update background colors for better visual consistency
- Improve empty state styling in TagsSection with better padding and background
- Add box-sizing to BaseModelSection for consistent layout
- Update CSS comments to reflect new color scheme
This commit is contained in:
Will Miao
2026-01-11 19:54:44 +08:00
parent 647728b2e1
commit b44ef9ceaa
10 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue-widgets/src/components/LoraPoolWidget.vue
View File

@@ -102,7 +102,7 @@ onMounted(async () => {
<style scoped>
.lora-pool-widget {
padding: 12px;
background: var(--comfy-menu-bg, #1a1a1a);
background: rgba(40, 44, 52, 0.6);
border-radius: 4px;
height: 100%;
display: flex;

6
vue-widgets/src/components/lora-pool/LoraPoolSummaryView.vue
View File

@@ -106,10 +106,10 @@ defineEmits<{
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(59, 130, 246, 0.15);
border: 1px solid rgba(59, 130, 246, 0.4);
background: rgba(66, 153, 225, 0.15);
border: 1px solid rgba(66, 153, 225, 0.4);
border-radius: 4px;
color: #3b82f6;
color: #4299e1;
}
.summary-view__badge-icon {

8
vue-widgets/src/components/lora-pool/modals/TagsModal.vue
View File

@@ -144,12 +144,12 @@ const toggleTag = (tag: string) => {
border-color: var(--fg-color, #fff);
}
/* Include variant - green when selected */
/* Include variant - blue when selected */
.tags-modal--include .tag-chip--selected,
.tag-chip--selected {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.6);
color: #22c55e;
background: rgba(66, 153, 225, 0.2);
border-color: rgba(66, 153, 225, 0.6);
color: #4299e1;
}
/* Exclude variant - red when selected */

1
vue-widgets/src/components/lora-pool/sections/BaseModelSection.vue
View File

@@ -77,6 +77,7 @@ const getCount = (name: string) => {
color: var(--fg-color, #fff);
opacity: 0.5;
text-align: center;
box-sizing: border-box;
}
.section__chips {

8
vue-widgets/src/components/lora-pool/sections/FoldersSection.vue
View File

@@ -160,7 +160,7 @@ const removeExclude = (path: string) => {
}
.section__column-title--include {
color: #22c55e;
color: #4299e1;
}
.section__column-title--exclude {
@@ -214,9 +214,9 @@ const removeExclude = (path: string) => {
}
.section__add-btn--include:hover {
background: rgba(34, 197, 94, 0.2);
border-color: #22c55e;
color: #22c55e;
background: rgba(66, 153, 225, 0.2);
border-color: #4299e1;
color: #4299e1;
}
.section__add-btn--exclude:hover {

6
vue-widgets/src/components/lora-pool/sections/LicenseSection.vue
View File

@@ -104,8 +104,8 @@ defineEmits<{
}
.toggle-switch--active .toggle-switch__track {
background: rgba(34, 197, 94, 0.3);
border-color: rgba(34, 197, 94, 0.6);
background: rgba(66, 153, 225, 0.3);
border-color: rgba(66, 153, 225, 0.6);
}
.toggle-switch__thumb {
@@ -122,7 +122,7 @@ defineEmits<{
.toggle-switch--active .toggle-switch__thumb {
transform: translateX(16px);
background: #22c55e;
background: #4299e1;
opacity: 1;
}

13
vue-widgets/src/components/lora-pool/sections/TagsSection.vue
View File

@@ -107,7 +107,7 @@ defineEmits<{
}
.section__column-title--include {
color: #22c55e;
color: #4299e1;
}
.section__column-title--exclude {
@@ -119,10 +119,15 @@ defineEmits<{
}
.section__empty {
padding: 6px 0;
font-size: 11px;
width: 100%;
padding: 8px 12px;
background: var(--comfy-input-bg, #333);
border-radius: 4px;
font-size: 12px;
color: var(--fg-color, #fff);
opacity: 0.4;
opacity: 0.5;
text-align: center;
box-sizing: border-box;
}
.section__chips {

6
vue-widgets/src/components/lora-pool/shared/FilterChip.vue
View File

@@ -82,9 +82,9 @@ const variantClass = computed(() => {
/* Variants */
.filter-chip--include {
background: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.4);
color: #22c55e;
background: rgba(66, 153, 225, 0.15);
border-color: rgba(66, 153, 225, 0.4);
color: #4299e1;
}
.filter-chip--exclude {