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): enhance model card header with sub-type display and gradient overlay

Browse Source 
- Add gradient overlay to card header for better icon readability
- Update base model label to display sub-type abbreviation alongside base model
- Add separator between sub-type and base model for visual clarity
- Improve label styling with flex layout, adjusted padding, and enhanced backdrop filter
- Add helper functions for sub-type abbreviation retrieval and display names
This commit is contained in:
Will Miao
2026-01-30 09:46:31 +08:00
parent 84c62f2954
commit 233427600a
3 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/components/card.css
View File

@@ -296,6 +296,19 @@
min-height: 20px;
}
/* Gradient overlay on right side for icon readability */
.card-header::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
background: linear-gradient(to left, oklch(0% 0 0 / 0.4) 0%, transparent 100%);
pointer-events: none;
border-top-right-radius: var(--border-radius);
}
.card-header-info {
display: flex;
align-items: center;
@@ -426,15 +439,39 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
display: inline-flex;
align-items: center;
gap: 4px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.2);
padding: 2px var(--space-1);
background: rgba(255, 255, 255, 0.12);
padding: 2px 6px;
border-radius: var(--border-radius-xs);
backdrop-filter: blur(2px);
font-size: 0.85em;
backdrop-filter: blur(4px);
font-size: 0.8em;
line-height: 1.2;
font-weight: 500;
}
/* Subtle separator between sub-type and base model */
.model-separator {
width: 1px;
height: 0.6em;
background: rgba(255, 255, 255, 0.25);
flex-shrink: 0;
}
/* Sub-type abbreviation styling */
.model-sub-type {
opacity: 0.9;
flex-shrink: 0;
}
/* Base model abbreviation styling */
.model-base-type {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
/* Style for version name */