master #19

Merged
kibi merged 2 commits from master into 98 2026-07-25 20:50:24 +00:00
3 changed files with 10 additions and 82 deletions
Showing only changes of commit 0739d72334 - Show all commits

View File

@@ -9636,77 +9636,16 @@ body.layout-legacy .comment-content img.emoji {
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 {
animation: newItemFlash 2.5s ease forwards;
border-left: 3px solid transparent;
box-shadow: inset 3px 0px 0px var(--accent);
}
.sidebar-activity .new-item-fade {
border-left: none;
animation: none;
box-shadow: 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 {
box-shadow: inset 3px 0px 0px var(--accent) !important;

View File

@@ -858,26 +858,14 @@ class CommentSystem {
* border-right) is fully restored after the effect completes.
*
* @param {Element} el - The .comment element to animate.
* @param {boolean} entering - True to also add 'comment-entering' (own post);
* false for 'new-item-fade' only (live others).
* @param {boolean} entering - Unused (kept for compatibility).
*/
static _animateNewComment(el, entering = false) {
if (!el) return;
const classes = entering
? ['comment-entering', 'new-item-fade']
: ['new-item-fade'];
// 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 });
el.classList.add('new-item-fade');
setTimeout(() => {
el.classList.remove('new-item-fade');
}, 2500);
}
@@ -893,7 +881,6 @@ class CommentSystem {
if (el) {
// Remove highlight from any previously highlighted or newly-posted comment
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'));
// Always smooth-scroll so there's no jarring jump
@@ -1039,7 +1026,7 @@ class CommentSystem {
preview.dataset.id = targetId;
// 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
const actions = preview.querySelector('.comment-actions');