diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js index 81def84..965bd73 100644 --- a/public/s/js/f0ckm.js +++ b/public/s/js/f0ckm.js @@ -2550,7 +2550,7 @@ window.cancelAnimFrame = (function () { modal.setAttribute('aria-hidden', 'true'); modal.classList.remove('onara-fade-out', 'onara-fade-in'); document.body.classList.remove('onara-modal-open', 'onara-modal-closing'); - document.querySelectorAll('.onara-active').forEach(el => el.classList.remove('onara-active')); + document.querySelectorAll('.onara-active, .active-thread-post').forEach(el => el.classList.remove('onara-active', 'active-thread-post')); if (typeof window.applyBackgroundOpacitySettings === 'function') { window.applyBackgroundOpacitySettings(null, false); } @@ -2584,7 +2584,7 @@ window.cancelAnimFrame = (function () { // Now that modal is completely invisible, smoothly restore background state document.body.classList.remove('onara-modal-open', 'onara-modal-closing'); - document.querySelectorAll('.onara-active').forEach(el => el.classList.remove('onara-active')); + document.querySelectorAll('.onara-active, .active-thread-post').forEach(el => el.classList.remove('onara-active', 'active-thread-post')); if (typeof window.applyBackgroundOpacitySettings === 'function') { window.applyBackgroundOpacitySettings(null, false); } diff --git a/views/chan/thread.html b/views/chan/thread.html index 7cef2a0..296fd54 100644 --- a/views/chan/thread.html +++ b/views/chan/thread.html @@ -325,9 +325,7 @@ background: rgba(26, 26, 31, 0.88); border-color: rgba(255, 255, 255, 0.08); } -.chan-post-card:target, -.chan-post-card.active-thread-post, -.chan-post-card.onara-active { +.chan-post-card:target { border-color: #4ade80 !important; background: rgba(74, 222, 128, 0.08) !important; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5), 0 0 20px rgba(74, 222, 128, 0.25) !important; @@ -356,7 +354,7 @@ position: relative; z-index: 6; } -.chan-thumb-link.onara-active .chan-thumb-img { +body.onara-modal-open:not(.onara-modal-closing) .chan-thumb-link.onara-active .chan-thumb-img { box-shadow: 0 0 0 2px #4ade80, 0 0 15px rgba(74, 222, 128, 0.6) !important; } @@ -373,6 +371,17 @@ body.onara-modal-open:not(.onara-modal-closing) .chan-post-card.active-thread-po z-index: 52 !important; transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important; } +body.onara-modal-closing .chan-post-card.onara-active, +body.onara-modal-closing .chan-post-card.active-thread-post { + opacity: 1 !important; + border-color: rgba(255, 255, 255, 0.08) !important; + box-shadow: none !important; + transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important; +} +body.onara-modal-closing .chan-thumb-link.onara-active .chan-thumb-img { + box-shadow: none !important; + transition: box-shadow 0.25s ease !important; +} .chan-post-rehosted-pill { display: inline-flex; @@ -1200,6 +1209,19 @@ body.onara-modal-open:not(.onara-modal-closing) .chan-post-card.active-thread-po } } }; + // Clear active card highlight whenever onara modal closes + const clearOnaraActiveCards = () => { + if (!document.body.classList.contains('onara-modal-open')) { + document.querySelectorAll('.chan-post-card.active-thread-post, .chan-post-card.onara-active, .chan-thumb-link.onara-active').forEach(el => { + el.classList.remove('active-thread-post', 'onara-active'); + }); + } + }; + const bodyObserver = new MutationObserver(() => { + clearOnaraActiveCards(); + }); + bodyObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] }); + jumpToInitialActive(); setTimeout(jumpToInitialActive, 100); })();