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(versions): add base filter toggle UI and styling

Browse Source 
Add CSS classes and JavaScript logic for the base filter toggle button in the versions toolbar. The filter allows users to switch between showing all versions or only versions matching the current base model. Includes styling for different states (active, hover, disabled) and accessibility features like screen reader support.
This commit is contained in:
Will Miao
2025-11-18 06:46:50 +08:00
parent 3661b11b70
commit 655157434e
13 changed files with 521 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
static/css/components/lora-modal/versions.css
View File

@@ -24,12 +24,29 @@
color: var(--text-color);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.versions-toolbar-info p {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
}
.versions-toolbar-info-heading {
display: flex;
align-items: center;
gap: var(--space-2);
}
.versions-toolbar-actions {
display: flex;
flex-wrap: wrap;
@@ -68,6 +85,41 @@
color: var(--text-color);
}
.versions-filter-toggle {
appearance: none;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
padding: 0;
margin-bottom: 4px;
width: 30px;
height: 30px;
background: color-mix(in oklch, var(--card-bg) 80%, var(--bg-color));
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
position: relative;
cursor: pointer;
}
.versions-filter-toggle i {
font-size: 1rem;
}
.versions-filter-toggle:hover:not(:disabled) {
border-color: var(--text-color);
color: var(--text-color);
transform: translateY(-1px);
}
.versions-filter-toggle[data-filter-active="true"] {
border-color: color-mix(in oklch, var(--lora-accent) 65%, transparent);
color: var(--lora-accent);
background: color-mix(in oklch, var(--lora-accent) 20%, var(--card-bg) 80%);
}
.versions-toolbar-btn:disabled {
opacity: 0.6;
cursor: not-allowed;