master #19
@@ -9636,77 +9636,16 @@ body.layout-legacy .comment-content img.emoji {
|
|||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes flashGreen {
|
|
||||||
0% {
|
|
||||||
background-color: rgba(var(--accent-rgb), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-color: var(--item-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes newItemFlash {
|
|
||||||
0% {
|
|
||||||
border-left-color: var(--accent);
|
|
||||||
background: rgba(var(--accent-rgb), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
border-left-color: var(--accent);
|
|
||||||
background: rgba(var(--accent-rgb), 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
border-left-color: transparent;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-item-fade {
|
.new-item-fade {
|
||||||
animation: newItemFlash 2.5s ease forwards;
|
box-shadow: inset 3px 0px 0px var(--accent);
|
||||||
border-left: 3px solid transparent;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-activity .new-item-fade {
|
.sidebar-activity .new-item-fade {
|
||||||
border-left: none;
|
box-shadow: none;
|
||||||
animation: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Comment posted by the current user — fades in + accent border that auto-disappears */
|
|
||||||
@keyframes commentEnter {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(6px);
|
|
||||||
border-left-color: var(--accent);
|
|
||||||
background: rgba(var(--accent-rgb), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
border-left-color: var(--accent);
|
|
||||||
background: rgba(var(--accent-rgb), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
background: rgba(var(--accent-rgb), 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
border-left-color: var(--accent);
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
border-left-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-entering {
|
|
||||||
animation: commentEnter 7.5s ease forwards;
|
|
||||||
border-left: 3px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-highlighted {
|
.comment-highlighted {
|
||||||
box-shadow: inset 3px 0px 0px var(--accent) !important;
|
box-shadow: inset 3px 0px 0px var(--accent) !important;
|
||||||
|
|||||||
@@ -858,26 +858,14 @@ class CommentSystem {
|
|||||||
* border-right) is fully restored after the effect completes.
|
* border-right) is fully restored after the effect completes.
|
||||||
*
|
*
|
||||||
* @param {Element} el - The .comment element to animate.
|
* @param {Element} el - The .comment element to animate.
|
||||||
* @param {boolean} entering - True to also add 'comment-entering' (own post);
|
* @param {boolean} entering - Unused (kept for compatibility).
|
||||||
* false for 'new-item-fade' only (live others).
|
|
||||||
*/
|
*/
|
||||||
static _animateNewComment(el, entering = false) {
|
static _animateNewComment(el, entering = false) {
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
el.classList.add('new-item-fade');
|
||||||
const classes = entering
|
setTimeout(() => {
|
||||||
? ['comment-entering', 'new-item-fade']
|
el.classList.remove('new-item-fade');
|
||||||
: ['new-item-fade'];
|
}, 2500);
|
||||||
|
|
||||||
// Reset in case the element already has a stale animation
|
|
||||||
classes.forEach(c => el.classList.remove(c));
|
|
||||||
void el.offsetWidth; // force reflow so re-adding the class restarts the animation
|
|
||||||
|
|
||||||
classes.forEach(c => el.classList.add(c));
|
|
||||||
|
|
||||||
const cleanup = () => {
|
|
||||||
classes.forEach(c => el.classList.remove(c));
|
|
||||||
};
|
|
||||||
el.addEventListener('animationend', cleanup, { once: true });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -893,7 +881,6 @@ class CommentSystem {
|
|||||||
if (el) {
|
if (el) {
|
||||||
// Remove highlight from any previously highlighted or newly-posted comment
|
// Remove highlight from any previously highlighted or newly-posted comment
|
||||||
document.querySelectorAll('.comment-highlighted').forEach(c => c.classList.remove('comment-highlighted'));
|
document.querySelectorAll('.comment-highlighted').forEach(c => c.classList.remove('comment-highlighted'));
|
||||||
document.querySelectorAll('.comment-entering').forEach(c => c.classList.remove('comment-entering'));
|
|
||||||
document.querySelectorAll('.new-item-fade').forEach(c => c.classList.remove('new-item-fade'));
|
document.querySelectorAll('.new-item-fade').forEach(c => c.classList.remove('new-item-fade'));
|
||||||
|
|
||||||
// Always smooth-scroll so there's no jarring jump
|
// Always smooth-scroll so there's no jarring jump
|
||||||
@@ -1039,7 +1026,7 @@ class CommentSystem {
|
|||||||
preview.dataset.id = targetId;
|
preview.dataset.id = targetId;
|
||||||
|
|
||||||
// Remove temporary animation/highlight classes
|
// Remove temporary animation/highlight classes
|
||||||
preview.classList.remove('new-item-fade', 'comment-highlighted', 'comment-entering');
|
preview.classList.remove('new-item-fade', 'comment-highlighted');
|
||||||
|
|
||||||
// Remove input forms or action buttons
|
// Remove input forms or action buttons
|
||||||
const actions = preview.querySelector('.comment-actions');
|
const actions = preview.querySelector('.comment-actions');
|
||||||
|
|||||||
Reference in New Issue
Block a user