Add model favorite dot feedback
This commit is contained in:
@@ -294,6 +294,9 @@ function _initModelPickerDropdown() {
|
||||
e.stopPropagation();
|
||||
const nowFav = _toggleFavorite(m.mid);
|
||||
_setFavState(nowFav);
|
||||
favDot.classList.remove('pulse');
|
||||
void favDot.offsetWidth;
|
||||
favDot.classList.add('pulse');
|
||||
// Keep our in-memory copy aligned so a follow-up re-render is correct.
|
||||
const idx = favs.indexOf(m.mid);
|
||||
if (nowFav && idx < 0) favs.push(m.mid);
|
||||
|
||||
@@ -2750,16 +2750,18 @@ body.bg-pattern-sparkles {
|
||||
margin: -5px -8px -5px 8px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
color: color-mix(in srgb, var(--fg) 22%, transparent);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
|
||||
transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.model-picker-list .mp-fav-dot:hover {
|
||||
background: color-mix(in srgb, var(--fg) 8%, transparent);
|
||||
color: color-mix(in srgb, var(--fg) 68%, transparent);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
@@ -2768,12 +2770,24 @@ body.bg-pattern-sparkles {
|
||||
color: color-mix(in srgb, var(--fg) 68%, transparent);
|
||||
}
|
||||
.model-picker-list .mp-fav-dot.active {
|
||||
background: color-mix(in srgb, var(--accent, var(--red)) 13%, transparent);
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--red)) 16%, transparent),
|
||||
0 0 12px color-mix(in srgb, var(--accent, var(--red)) 20%, transparent);
|
||||
color: var(--accent, var(--red));
|
||||
opacity: 1;
|
||||
}
|
||||
.model-picker-list .mp-fav-dot.active:hover {
|
||||
background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
|
||||
color: var(--accent, var(--red));
|
||||
opacity: 0.72;
|
||||
opacity: 0.88;
|
||||
}
|
||||
.model-picker-list .mp-fav-dot.pulse {
|
||||
animation: mpFavPulse 0.28s ease-out;
|
||||
}
|
||||
@keyframes mpFavPulse {
|
||||
0% { transform: scale(0.92); }
|
||||
65% { transform: scale(1.22); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
/* First-run hint when a large catalog has no Recent/Favorites yet. */
|
||||
.model-picker-list .mp-empty-hint {
|
||||
|
||||
Reference in New Issue
Block a user