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

fix(ui): unify Lora Randomizer widget styles with Loras widget

Browse Source 
Align visual design of Lora Randomizer widget with Loras widget for
consistent UI/UX across the node interface.

Changes:
- Unified border-radius system (4px→6px for containers, 6px for inputs)
- Standardized padding (12px→6px for widget container)
- Reduced slider height (32px→24px) following desktop tool best practices
- Aligned font sizes (12px→13px for labels, 11px→12px for buttons)
- Unified spacing system (16px→6px for sections, 8px→6px for gaps)
- Adjusted widget minimum height (510px→448px) to reflect layout changes
This commit is contained in:
Will Miao
2026-01-20 09:42:54 +08:00
parent 796acba764
commit 50c012ae33
8 changed files with 149 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
vue-widgets/src/components/LoraRandomizerWidget.vue
View File

@@ -220,9 +220,9 @@ onMounted(async () => {
<style scoped>
.lora-randomizer-widget {
padding: 12px;
padding: 6px;
background: rgba(40, 44, 52, 0.6);
border-radius: 4px;
border-radius: 6px;
height: 100%;
display: flex;
flex-direction: column;

6
vue-widgets/src/components/lora-randomizer/LastUsedPreview.vue
View File

@@ -85,7 +85,7 @@ const onImageError = (loraName: string) => {
background: var(--comfy-menu-bg, #1a1a1a);
border: 1px solid var(--border-color, #444);
border-radius: 6px;
padding: 8px;
padding: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
@@ -96,9 +96,9 @@ const onImageError = (loraName: string) => {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
padding: 6px;
background: var(--comfy-input-bg, #333);
border-radius: 4px;
border-radius: 6px;
}
.last-used-preview__thumb {

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

@@ -296,13 +296,13 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
}
.setting-section {
margin-bottom: 16px;
margin-bottom: 6px;
}
.setting-label {
font-size: 12px;
font-size: 13px;
font-weight: 500;
color: #d4d4d8;
color: rgba(226, 232, 240, 0.8);
display: block;
margin-bottom: 8px;
}
@@ -315,7 +315,7 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
}
.section-header-with-toggle .setting-label {
margin-bottom: 0;
margin-bottom: 4px;
}
/* Count Mode Tabs */
@@ -323,7 +323,7 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
display: flex;
background: rgba(26, 32, 44, 0.9);
border: 1px solid rgba(226, 232, 240, 0.2);
border-radius: 4px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 8px;
}
@@ -345,7 +345,7 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
}
.count-mode-tab-label {
font-size: 12px;
font-size: 13px;
font-weight: 500;
color: rgba(226, 232, 240, 0.7);
transition: all 0.2s ease;
@@ -377,8 +377,8 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
.slider-container {
background: rgba(26, 32, 44, 0.9);
border: 1px solid rgba(226, 232, 240, 0.2);
border-radius: 4px;
padding: 4px 8px;
border-radius: 6px;
padding: 6px;
}
.slider-container--disabled {
@@ -442,21 +442,21 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
.roll-buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
gap: 6px;
}
.roll-button {
padding: 8px 10px;
padding: 6px 8px;
background: rgba(30, 30, 36, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
border-radius: 6px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
color: #e4e4e7;
font-size: 11px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
@@ -488,7 +488,7 @@ const areLorasEqual = (a: LoraEntry[] | null, b: LoraEntry[] | null): boolean =>
}
.roll-button__text {
font-size: 11px;
font-size: 12px;
text-align: center;
line-height: 1.2;
}

14
vue-widgets/src/components/shared/DualRangeSlider.vue
View File

@@ -339,7 +339,7 @@ const stopDrag = (event?: PointerEvent) => {
.dual-range-slider {
position: relative;
width: 100%;
height: 32px;
height: 24px;
user-select: none;
cursor: default !important;
touch-action: none;
@@ -356,12 +356,12 @@ const stopDrag = (event?: PointerEvent) => {
.slider-track {
position: absolute;
top: 14px;
top: 12px;
left: 0;
right: 0;
height: 4px;
background: var(--comfy-input-bg, #333);
border-radius: 2px;
border-radius: 4px;
cursor: default !important;
}
@@ -421,12 +421,12 @@ const stopDrag = (event?: PointerEvent) => {
}
.slider-handle__thumb {
width: 12px;
height: 12px;
width: 14px;
height: 14px;
background: var(--fg-color, #fff);
border-radius: 50%;
position: absolute;
top: 10px;
top: 7px;
left: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease;
@@ -445,7 +445,7 @@ const stopDrag = (event?: PointerEvent) => {
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-size: 12px;
font-family: 'SF Mono', 'Roboto Mono', monospace;
color: var(--fg-color, #fff);
opacity: 0.8;

14
vue-widgets/src/components/shared/SingleSlider.vue
View File

@@ -157,7 +157,7 @@ const stopDrag = (event?: PointerEvent) => {
.single-slider {
position: relative;
width: 100%;
height: 32px;
height: 24px;
user-select: none;
cursor: default !important;
touch-action: none;
@@ -174,12 +174,12 @@ const stopDrag = (event?: PointerEvent) => {
.slider-track {
position: absolute;
top: 14px;
top: 12px;
left: 0;
right: 0;
height: 4px;
background: var(--comfy-input-bg, #333);
border-radius: 2px;
border-radius: 4px;
cursor: default !important;
}
@@ -218,12 +218,12 @@ const stopDrag = (event?: PointerEvent) => {
}
.slider-handle__thumb {
width: 12px;
height: 12px;
width: 14px;
height: 14px;
background: var(--fg-color, #fff);
border-radius: 50%;
position: absolute;
top: 10px;
top: 7px;
left: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease;
@@ -242,7 +242,7 @@ const stopDrag = (event?: PointerEvent) => {
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-size: 12px;
font-family: 'SF Mono', 'Roboto Mono', monospace;
color: var(--fg-color, #fff);
opacity: 0.8;

2
vue-widgets/src/main.ts
View File

@@ -8,7 +8,7 @@ import type { LoraPoolConfig, LegacyLoraPoolConfig, RandomizerConfig } from './c
const LORA_POOL_WIDGET_MIN_WIDTH = 500
const LORA_POOL_WIDGET_MIN_HEIGHT = 400
const LORA_RANDOMIZER_WIDGET_MIN_WIDTH = 500
const LORA_RANDOMIZER_WIDGET_MIN_HEIGHT = 510
const LORA_RANDOMIZER_WIDGET_MIN_HEIGHT = 448
const LORA_RANDOMIZER_WIDGET_MAX_HEIGHT = LORA_RANDOMIZER_WIDGET_MIN_HEIGHT
const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200