2.x Баннеры с анимированным фоном

[Chollongarn]

Совместимость с XenForo : 2.0, 2.1


Создаем модификацию шаблона app_user_banners.less:
Ключ модификации: app_user_banners_less
Тип поиска: Регулярное выражение
Найти: #^.*$#su
Заменить:

.m-userBannerVariation(@color; @bg; @border: false) {
    color: @color;
    background-size: 2.5em 2.5em;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .35) 75%, transparent 75%, transparent);
    background-color: @bg;
    border-color: xf-intensify(@bg, 10%);
    & when (iscolor(@border)) {
        border-color: @border;
    }
}

.userBanner {
    font-size: 70%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 500;
    padding: 3px @xf-paddingMedium;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;
    display: inline-block;
    text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
    animation: bg-animate 5s linear infinite;
    strong {
        font-weight: inherit;
    }
    &.userBanner--hidden {
        background: none;
        border: none;
        background-image: none;
        box-shadow: none;
        text-shadow: none;
    }
    &.userBanner--staff {
        .m-userBannerVariation(@xf-linkColor, @xf-contentHighlightBg, @xf-borderColorHighlight);
        background-image: none;
        box-shadow: none;
        text-shadow: none;       
    }
    &.userBanner--primary {
        .m-userBannerVariation(white, #34495e);
    }
    &.userBanner--accent {
        .m-userBannerVariation(white, #9a12b3);
    }
    &.userBanner--red {
        .m-userBannerVariation(white, #d80000);
    }   
    &.userBanner--green {
        .m-userBannerVariation(white, #008000);
    }
    &.userBanner--olive {
        .m-userBannerVariation(white, #808000);
    }
    &.userBanner--lightGreen {
        .m-userBannerVariation(white, #a3c7a0);
    }
    &.userBanner--blue {
        .m-userBannerVariation(white, #0008e3);
    }
    &.userBanner--royalBlue {
        .m-userBannerVariation(white, #4169e1);
    }
    &.userBanner--skyBlue {
        .m-userBannerVariation(white, #7cc3e0);
    }
    &.userBanner--gray {
        .m-userBannerVariation(white, #808080);
    }
    &.userBanner--silver {
        .m-userBannerVariation(white, #c0c0c0);
    }
    &.userBanner--yellow {
        .m-userBannerVariation(white, #f7ca18);
    }
    &.userBanner--orange {
        .m-userBannerVariation(white, #e87e04);
    }
}

@keyframes bg-animate {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 5em 0;
    }
}