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

Enhance version selection UI with thumbnails and file size; improve modal click handling

Browse Source
This commit is contained in:
Will Miao
2025-02-14 15:45:49 +08:00
parent d66603d7e0
commit a2428b31b5
4 changed files with 107 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
static/css/style.css
View File

@@ -1125,21 +1125,32 @@ body.modal-open {
}
.version-list {
max-height: 300px;
max-height: 400px;
overflow-y: auto;
margin: var(--space-2) 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 1px; /* Add padding to prevent border clipping */
}
.version-item {
display: flex;
gap: var(--space-2);
padding: var(--space-2);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: var(--bg-color); /* Add background color */
margin: 1px; /* Add margin to ensure hover effect visibility */
position: relative; /* Add position context */
}
.version-item:hover {
background: var(--lora-surface);
border-color: var(--lora-accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Replace transform with shadow */
z-index: 1; /* Ensure hover state appears above other items */
}
.version-item.selected {
@@ -1147,6 +1158,66 @@ body.modal-open {
background: oklch(var(--lora-accent) / 0.1);
}
.version-thumbnail {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: var(--border-radius-xs);
overflow: hidden;
background: var(--bg-color);
}
.version-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.version-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.version-content h3 {
margin: 0;
font-size: 1.1em;
color: var(--text-color);
}
.version-info {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
font-size: 0.9em;
color: var(--text-color);
opacity: 0.8;
}
.version-info .base-model {
background: oklch(var(--lora-accent) / 0.1);
color: var(--lora-accent);
padding: 2px 8px;
border-radius: var(--border-radius-xs);
}
.version-meta {
display: flex;
gap: 12px;
font-size: 0.85em;
color: var(--text-color);
opacity: 0.7;
}
.version-meta span {
display: flex;
align-items: center;
gap: 4px;
}
.folder-browser {
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);