fix(chan): remove onara card highlight when closing onara modal
This commit is contained in:
@@ -2550,7 +2550,7 @@ window.cancelAnimFrame = (function () {
|
|||||||
modal.setAttribute('aria-hidden', 'true');
|
modal.setAttribute('aria-hidden', 'true');
|
||||||
modal.classList.remove('onara-fade-out', 'onara-fade-in');
|
modal.classList.remove('onara-fade-out', 'onara-fade-in');
|
||||||
document.body.classList.remove('onara-modal-open', 'onara-modal-closing');
|
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') {
|
if (typeof window.applyBackgroundOpacitySettings === 'function') {
|
||||||
window.applyBackgroundOpacitySettings(null, false);
|
window.applyBackgroundOpacitySettings(null, false);
|
||||||
}
|
}
|
||||||
@@ -2584,7 +2584,7 @@ window.cancelAnimFrame = (function () {
|
|||||||
|
|
||||||
// Now that modal is completely invisible, smoothly restore background state
|
// Now that modal is completely invisible, smoothly restore background state
|
||||||
document.body.classList.remove('onara-modal-open', 'onara-modal-closing');
|
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') {
|
if (typeof window.applyBackgroundOpacitySettings === 'function') {
|
||||||
window.applyBackgroundOpacitySettings(null, false);
|
window.applyBackgroundOpacitySettings(null, false);
|
||||||
}
|
}
|
||||||
|
|||||||
+26
-4
@@ -325,9 +325,7 @@
|
|||||||
background: rgba(26, 26, 31, 0.88);
|
background: rgba(26, 26, 31, 0.88);
|
||||||
border-color: rgba(255, 255, 255, 0.08);
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
}
|
}
|
||||||
.chan-post-card:target,
|
.chan-post-card:target {
|
||||||
.chan-post-card.active-thread-post,
|
|
||||||
.chan-post-card.onara-active {
|
|
||||||
border-color: #4ade80 !important;
|
border-color: #4ade80 !important;
|
||||||
background: rgba(74, 222, 128, 0.08) !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;
|
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;
|
position: relative;
|
||||||
z-index: 6;
|
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;
|
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;
|
z-index: 52 !important;
|
||||||
transition: box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !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 {
|
.chan-post-rehosted-pill {
|
||||||
display: inline-flex;
|
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();
|
jumpToInitialActive();
|
||||||
setTimeout(jumpToInitialActive, 100);
|
setTimeout(jumpToInitialActive, 100);
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user