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

Add update indicator and animation for updated cards in VirtualScroller

Browse Source
This commit is contained in:
Will Miao
2025-06-18 17:30:49 +08:00
parent 3c047bee58
commit 5febc2a805
2 changed files with 63 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -520,4 +520,44 @@
.card-grid.virtual-scroll {
max-width: 2400px;
}
}
}
/* Add after the existing .lora-card:hover styles */
@keyframes update-pulse {
0% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
50% { box-shadow: 0 0 0 4px var(--lora-accent-transparent); }
100% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
}
/* Add semi-transparent version of accent color for animation */
:root {
--lora-accent-transparent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.6);
}
.lora-card.updated {
animation: update-pulse 1.2s ease-out;
}
/* Add a subtle updated tag that fades in and out */
.update-indicator {
position: absolute;
top: 8px;
right: 8px;
background: var(--lora-accent);
color: white;
border-radius: var(--border-radius-xs);
padding: 3px 6px;
font-size: 0.75em;
opacity: 0;
transform: translateY(-5px);
z-index: 4;
animation: update-tag 1.8s ease-out forwards;
}
@keyframes update-tag {
0% { opacity: 0; transform: translateY(-5px); }
15% { opacity: 1; transform: translateY(0); }
85% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(0); }
}