From c4d3537a28aec81fc7428f0e2ceecc93ff7de738 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Thu, 12 Feb 2026 13:56:43 -0500 Subject: [PATCH] Queue-add flash: green bg + purple glow on entire row, 5s fade 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. --- make_post_sell/static/css/common.css | 15 ++++++++++----- make_post_sell/static/js/watch.js | 9 ++++++--- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index 03f0cd4..247c244 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -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 */ diff --git a/make_post_sell/static/js/watch.js b/make_post_sell/static/js/watch.js index 2722751..a34c139 100644 --- a/make_post_sell/static/js/watch.js +++ b/make_post_sell/static/js/watch.js @@ -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; }