Пульс и анимация и загрузка для новых комментариев XF (Модификация)

[AirDeveloper]

До



После



Заходим в шаблоны - Extra Less и вставляем этот код:

.message--post {
    transition: all 0.4s ease-in-out;
}
.message--post.is-unread {
    background-color: rgba(52, 152, 219, 0.05); 
    border-left: 3px solid #3498db;
    animation: gentlePulse 2s ease-in-out;
}
@keyframes gentlePulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

По желанию можно изменить цвет в коде:

.message--post.is-unread {
    background-color: rgba(52, 152, 219, 0.05);
    border-left: 3px solid #3498db;
    animation: gentlePulse 2s ease-in-out;
}

 

[AirDeveloper]

Линия загрузки можно поменять этим кодом она будет сверху для новых комментариях ваших
Extra Less добавить код:

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.message--post.is-unread {
    animation: slideInDown 0.5s ease-out;
    background-color: #f8fff8; можно поменять на свое усмотрению
    border-left: 4px solid #2ecc71; полоса для загрузки цвет указывайте какой хотите
}