Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-17 02:05:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add model favorite dot feedback

Browse Source
This commit is contained in:
pewdiepie-archdaemon
2026-06-02 06:50:22 +09:00
parent 4a112175e2
commit 637c7511a2
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/modelPicker.js
+3
View File
@@ -294,6 +294,9 @@ function _initModelPickerDropdown() {
e.stopPropagation(); e.stopPropagation();
const nowFav = _toggleFavorite(m.mid); const nowFav = _toggleFavorite(m.mid);
_setFavState(nowFav); _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. // Keep our in-memory copy aligned so a follow-up re-render is correct.
const idx = favs.indexOf(m.mid); const idx = favs.indexOf(m.mid);
if (nowFav && idx < 0) favs.push(m.mid); if (nowFav && idx < 0) favs.push(m.mid);
static/style.css
+17 -3
View File
@@ -2750,16 +2750,18 @@ body.bg-pattern-sparkles {
margin: -5px -8px -5px 8px; margin: -5px -8px -5px 8px;
padding: 0; padding: 0;
border: none; border: none;
background: none; border-radius: 999px;
background: transparent;
cursor: pointer; cursor: pointer;
color: color-mix(in srgb, var(--fg) 22%, transparent); color: color-mix(in srgb, var(--fg) 22%, transparent);
font-family: inherit; font-family: inherit;
font-size: 13px; font-size: 13px;
line-height: 1; 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; -webkit-tap-highlight-color: transparent;
} }
.model-picker-list .mp-fav-dot:hover { .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); color: color-mix(in srgb, var(--fg) 68%, transparent);
transform: scale(1.15); transform: scale(1.15);
} }
@@ -2768,12 +2770,24 @@ body.bg-pattern-sparkles {
color: color-mix(in srgb, var(--fg) 68%, transparent); color: color-mix(in srgb, var(--fg) 68%, transparent);
} }
.model-picker-list .mp-fav-dot.active { .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)); color: var(--accent, var(--red));
opacity: 1; opacity: 1;
} }
.model-picker-list .mp-fav-dot.active:hover { .model-picker-list .mp-fav-dot.active:hover {
background: color-mix(in srgb, var(--accent, var(--red)) 18%, transparent);
color: var(--accent, var(--red)); 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. */ /* First-run hint when a large catalog has no Recent/Favorites yet. */
.model-picker-list .mp-empty-hint { .model-picker-list .mp-empty-hint {