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): enhance tag hover states and adjust toggle switch alignment

Browse Source 
- Improve tag chip hover states in TagsModal with contextual colors for include/exclude modes
- Adjust toggle switch thumb vertical alignment in LicenseSection and LoraRandomizerSettingsView
- Remove debug console.log from loras widget value update
This commit is contained in:
Will Miao
2026-01-13 19:54:36 +08:00
parent 9e510d64ec
commit 859277a7eb
6 changed files with 121 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -140,8 +140,33 @@ const toggleTag = (tag: string) => {
transition: all 0.15s;
}
.tag-chip:hover {
border-color: var(--fg-color, #fff);
/* Default hover (gray for neutral) */
.tag-chip:hover:not(.tag-chip--selected) {
border-color: rgba(226, 232, 240, 0.5);
background: rgba(255, 255, 255, 0.05);
}
/* Include variant hover - blue tint */
.tags-modal--include .tag-chip:hover:not(.tag-chip--selected) {
border-color: rgba(66, 153, 225, 0.4);
background: rgba(66, 153, 225, 0.08);
}
/* Exclude variant hover - red tint */
.tags-modal--exclude .tag-chip:hover:not(.tag-chip--selected) {
border-color: rgba(239, 68, 68, 0.4);
background: rgba(239, 68, 68, 0.08);
}
/* Selected chips hover - slightly deepen the color */
.tags-modal--include .tag-chip--selected:hover {
background: rgba(66, 153, 225, 0.25);
border-color: rgba(66, 153, 225, 0.7);
}
.tags-modal--exclude .tag-chip--selected:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.7);
}
/* Include variant - blue when selected */

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

@@ -110,7 +110,7 @@ defineEmits<{
.toggle-switch__thumb {
position: absolute;
top: 2px;
top: 3px;
left: 2px;
width: 14px;
height: 14px;

2
vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue
View File

@@ -368,7 +368,7 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
.toggle-switch__thumb {
position: absolute;
top: 2px;
top: 3px;
left: 2px;
width: 14px;
height: 14px;