engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Queue-add flash: green bg + purple glow on entire row, 5s fade

Browse source 
Clicking the + button flashes the entire related-content-row with green
background, purple box-shadow glow, and white text. Animation fades out
over 5 seconds. Repeated clicks reset the animation and add duplicates
to the queue.
This commit is contained in:
russell@unturf.com 2026-02-12 13:56:43 -05:00
parent 2ad12262df
commit c4d3537a28
2 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
make_post_sell/static/css/common.css
View file

@ -3154,12 +3154,17 @@ textarea {
color: var(--text-primary, #333);
}
@keyframes queue-added-flash {
0% { background: var(--green-color, #a3c765); color: #fff; transform: scale(1.3); }
100% { background: transparent; color: inherit; transform: scale(1); }
@keyframes queue-row-flash {
0% { background: var(--green-color, #a3c765); box-shadow: 0 0 14px 4px #b388ff; color: #fff; }
100% { background: transparent; box-shadow: none; color: inherit; }
}
.queue-add-btn.queue-added {
animation: queue-added-flash 0.5s ease-out;
.related-content-row.queue-row-added {
animation: queue-row-flash 5s ease-out;
}
.related-content-row.queue-row-added a,
.related-content-row.queue-row-added .related-content-index,
.related-content-row.queue-row-added .queue-add-btn {
color: inherit;
}
/* Footer */

9
make_post_sell/static/js/watch.js
View file

@ -1564,9 +1564,12 @@
media_type: queueBtn.getAttribute('data-media-type'),
thumbnail_url: queueBtn.getAttribute('data-thumbnail')
});
queueBtn.classList.remove('queue-added');
void queueBtn.offsetWidth; // reflow to restart animation
queueBtn.classList.add('queue-added');
var row = queueBtn.closest('.related-content-row');
if (row) {
row.classList.remove('queue-row-added');
void row.offsetWidth;
row.classList.add('queue-row-added');
}
return;
}