alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-29 17:08:52 -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

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;