Make favorite dot feedback transient

This commit is contained in:
pewdiepie-archdaemon
2026-06-02 06:52:03 +09:00
parent 637c7511a2
commit 59516ec126

View File

@@ -2750,44 +2750,37 @@ body.bg-pattern-sparkles {
margin: -5px -8px -5px 8px;
padding: 0;
border: 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: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
transition: 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);
}
.model-picker-list .mp-fav-dot:focus-visible {
outline: none;
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.88;
opacity: 0.72;
}
.model-picker-list .mp-fav-dot.pulse {
animation: mpFavPulse 0.28s ease-out;
animation: mpFavPulse 0.32s ease-out;
}
@keyframes mpFavPulse {
0% { transform: scale(0.92); }
65% { transform: scale(1.22); }
100% { transform: scale(1); }
0% { text-shadow: 0 0 0 color-mix(in srgb, var(--accent, var(--red)) 0%, transparent); }
45% { text-shadow: 0 0 10px color-mix(in srgb, var(--accent, var(--red)) 60%, transparent); }
100% { text-shadow: 0 0 0 color-mix(in srgb, var(--accent, var(--red)) 0%, transparent); }
}
/* First-run hint when a large catalog has no Recent/Favorites yet. */
.model-picker-list .mp-empty-hint {