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

Тема в разделе "Настройки XenForo", создана пользователем Chollongarn, 12 июн 2020.

  1. Chollongarn

    Chollongarn
    Expand Collapse
    Публикатор
    Команда форума

    Регистрация:
    13 июл 2019
    Сообщения:
    1.415
    Симпатии:
    381
    Розыгрышей:
    12
    FT Coin:
    $146,25
    Совместимость с 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;
        }
    }
    
    
    [​IMG] [​IMG]
     
    redman нравится это.
Яндекс.Метрика
iHax Community