XenForo - Баннеры с анимированным градиентом | Fi4a.ru

Уже столько вопросов было и уже столько по ним кривого кода

Делаем так, в extra.less:

Less:

.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 65%;
    padding: 3px 6px;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    &.userBanner--staff {
        color: #fff;
        border: none;
        background: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
        background-size: 900% 900%;
    }
    &.admin {
        background-image: linear-gradient(270deg, #ff0000, #dc00ff, #ff9400);
    }
    &.moder {
        background-image: linear-gradient(270deg, #01a72c, #df841a, #468153);
    }
    &.user {
        background-image: linear-gradient(270deg, #878a88, #7b73a5, #648981);
    }
}

@keyframes AnimBanner {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Дальше в настройках группы свой класс CSS, например: userBanner admin
По аналогии добавляем группы.

Как добавить "свечение баннера" тень блока?
В класс .userBanner после animation: AnimBanner 10s ease infinite; добавляем:

Код:

box-shadow: 0px 0px 10px 0px fade(contrast(@xf-messageUserBlock--background-color), 30%);

Как закруглить баннеры, добавить радиус?
Так же как и тень в класс .userBanner, добавить:

Код:

border-radius: 20px;

XenForo Баннеры с анимированным градиентом

Ещё ресурсы от Skaiman