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): improve settings layout with inline help tooltips

Browse Source 
- Remove bottom margin from setting items and last-child override
- Add flex layout to setting-info for inline label and info icon alignment
- Replace label opacity with rgba color for better tooltip visibility
- Add info-icon styling with hover tooltips using data-tooltip attribute
- Move help text from separate divs to inline tooltips on labels and section headers
- Improve tooltip positioning with edge case handling for left-aligned icons
This commit is contained in:
Will Miao
2026-02-24 23:28:42 +08:00
parent f0cbe55040
commit c2754ea937
2 changed files with 218 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
static/css/components/modal/settings-modal.css
View File

@@ -631,15 +631,10 @@
.setting-item {
display: flex;
flex-direction: column; /* Changed to column for help text placement */
margin-bottom: var(--space-3); /* Increased to provide more spacing between items */
padding: var(--space-2);
border-radius: var(--border-radius-xs);
}
.setting-item:last-child {
margin-bottom: 0;
}
.setting-item:hover {
background: rgba(0, 0, 0, 0.02);
}
@@ -663,14 +658,16 @@
margin-bottom: 0;
width: 35%; /* Increased from 30% to prevent wrapping */
flex-shrink: 0; /* Prevent shrinking */
display: flex; /* Allow label and info-icon to be on same line */
align-items: center;
}
.setting-info label {
display: block;
font-weight: 400;
margin-bottom: 0;
white-space: nowrap; /* Prevent label wrapping */
opacity: 0.85;
/* Use text color with alpha instead of opacity to avoid affecting tooltip */
color: rgba(from var(--text-color) r g b / 0.85);
}
.setting-control {
@@ -1148,3 +1145,70 @@ input:checked + .toggle-slider:before {
margin-top: var(--space-2);
}
}
/* Info icon styling for settings labels - Minimal style */
.info-icon {
color: var(--text-color);
margin-left: 6px;
font-size: 0.85em;
vertical-align: text-bottom;
cursor: help;
opacity: 0.4;
transition: opacity 0.2s ease;
}
.info-icon:hover {
opacity: 0.7;
}
/* Tooltip using data-tooltip attribute */
.info-icon[data-tooltip] {
position: relative;
}
.info-icon[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: normal;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
white-space: normal;
max-width: 220px;
width: max-content;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
z-index: 10000;
line-height: 1.4;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
text-transform: none;
}
.info-icon[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
/* Fix tooltip overflow on left edge - when icon is near left side of modal */
.settings-subsection-header .info-icon[data-tooltip]::after {
left: 0;
transform: translateX(0);
}
.settings-subsection-header .info-icon[data-tooltip]::before {
left: 12px;
}
/* Dark theme adjustments for tooltip - Fully opaque */
[data-theme="dark"] .info-icon[data-tooltip]::after {
background: rgba(40, 40, 40, 0.95);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}