Less для красивых баннеров групп c прогресс баром

Совместимость с XenForo

Для добавления таких баннеров групп, как на скрине ниже -

Достаточно добавить в extra.less такой код.

Less:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
    .userBanner& {
        -webkit-box-shadow: 2px 2px 2px 0px #696969;
        box-shadow: 2px 2px 2px 0px #696969;
        padding: 5px;
        background: @bgColor;
        border-color: @bgColor;
        color: @textColor;
        text-align: left;
        letter-spacing: 0;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-size: 10px;
        position: relative;
        border-radius: 0;
        min-width: 160px;

        strong {
            color: @strongColor;
        }

        & when (@textShadow) {
            text-shadow: 0 0 2px;
        }

        & when not (@numLine = false) and (@numLine <= 7) {
            @startBgColor: #fc4330;
            @stopBgColor: #cccccc;
            @startPercentColor: @numLine * 14.2%;
            @stopPercentColor: 0%;
            padding: 7px 5px 5px;

            .userBanner-before {
                position: absolute;
                display: block;
                top: -10px;
                left: -1px;

                &:before {
                    .m-faBase();
                    content: "\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1";
                    //content: "\f86c\f86c\f86c\f86c\f86c\f86c\f86c"; // FA 5.9
                    font-size: 2.2em;
                    line-height: 0;
                    letter-spacing: 1px;
                    & when (iscolor(@startColor)) and (iscolor(@stopColor)) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (iscolor(@stopColor)){
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (iscolor(@startColor)) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    border-image-slice: 1;
                }
            }
        }

        .userBanner-after:after {
            float: right;
            content: 'fox.dev';
        }
    }
}

.userBanner--red {
    .fox-bannerProgressLine(7; false; false; white; white; #185886; false);
}

Теперь разберём на примере готового кода, основные моменты, которые можно изменять.
Всё достаточно просто, нам не нужно дублировать весь это большой участок кода, достаточно просто пары строк.

Less:

.userBanner--red {
    .fox-bannerProgressLine(7; false; false; white; white; #292929; true);
}

Less:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; )

Это переменная, которая принимает семь параметров, через точку с запятой.

Число которое отвечает за показ прогресс бара - @numLine - данный параметр может принимать и значение false, что просто отключит прогресс бар.
Стартовый цвет, который показывает непосредственно прогресс - @startColor - дефолтное значение можно задать в переменной - @startBgColor.
Общий цвет, который задаёт начальное значение прогресс бара, по дефолту - @stopColor - дефолтное значение можно задать в переменной - @stopBgColor.
Общий цвет текста в баннере - @textColor, данный параметр является не обязательным, по дефолту цвет белый.
Общий цвет текста группы, который можно задать отдельно - @strongColor, данный параметр является не обязательным, по дефолту наследуется.
Фон баннера группы, который можно задать отдельно - @bgColor, данный параметр является не обязательным, по дефолту у него значение - #292929.
Цень для текста- @textShadow, данный параметр является не обязательным, по дефолту у него значение - false.

В нашем примере это.

Число которое отвечает за показ прогресс бара - 7.(на данный момент оно фиксированное, если нужно больше, сами доработать можете).
Стартовый цвет, который показывает непосредственно прогресс - false, по этому используется значение из переменной - @startBgColor.
Общий цвет, который задаёт начальное значение прогресс бара, по дефолту - false, по этому используется значение из переменной - @stopBgColor.
Общий цвет текста в баннере - white.
Общий цвет текста группы, который можно задать отдельно - white.
Фон баннера группы, который можно задать отдельно - #292929.
Цень для текста- true.

Важное замечание, переменная оборачивается нужным классом, в нашем примере, мы заменили красный баннер присутствующий в движке по дефолту, это наглядно видно по классу - .userBanner--red.
И за полоски прогресса у нас отвечает иконочный шрифт FA - content: "\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1";, в котором семь повторяющихся полосок, нужно больше, добавьте и измените пару значений.
И так же можно изменить текст после группы - content: 'fox.dev';, на нужный Вам.
Да, пока как есть, в будущем возможно вынесу в переменную.

Допустим нам нужно изменить прогресс бар.
Просто дублируем данный код (столько, сколько нужно):

Less:

.userBanner--red {
    .fox-bannerProgressLine(7; false; false; white; white; #292929; true);
}

Под уже существующей.
И чуть изменяем для нужной группы:

Less:

.userBanner--staff {
    .fox-bannerProgressLine(false; false; false; white; white; #292929; true);
}

.userBanner--red {
    .fox-bannerProgressLine(7; false; false; white; white; #292929; true);
}

Код рабочий, но в любом случае требует пары корректировок, которые я буду делать в будущем, при наличии желания и свободного времени.

Less:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
    .userBanner& {
        -webkit-box-shadow: 2px 2px 2px 0px #696969;
        box-shadow: 2px 2px 2px 0px #696969;
        padding: 5px;
        background: @bgColor;
        border-color: @bgColor;
        color: @textColor;
        text-align: left;
        letter-spacing: 0;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-size: 10px;
        position: relative;
        border-radius: 0;
        min-width: 160px;

        strong {
            color: @strongColor;
        }

        & when (@textShadow) {
            text-shadow: 0 0 2px;
        }

        & when not (@numLine = false) and (@numLine <= 7) {
            @startBgColor: #fc4330;
            @stopBgColor: #cccccc;
            @stopPercentColor: 0%;
            @startPercentColor: @numLine * 14.2%;
            & when (@numLine >= 1) {
                @stopPercentColor: (@numLine * 10%) + 4;
            }
            & when (iscolor(@startColor)) {
                @startBgColor: @startColor;
            }
            & when (iscolor(@stopColor)) {
                @stopBgColor: @stopColor;
            }
            padding: 7px 5px 5px;

            .userBanner-before {
                position: absolute;
                display: block;
                top: -10px;
                left: -1px;

                &:before {
                    .m-faBase();
                    content: "\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1";
                    //content: "\f86c\f86c\f86c\f86c\f86c\f86c\f86c"; // FA 5.9
                    font-size: 2.2em;
                    line-height: 0;
                    letter-spacing: 1px;
                    background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    border-image-slice: 1;
                }
            }
        }

        .userBanner-after:after {
            float: right;
            content: 'fox.dev';
        }
    }
}

.userBanner--red {
    .fox-bannerProgressLine(7; false; false; white; white; #292929; true);
}

Реакции: DraveMor, Garri83, Adept и 10 других

Less для красивых баннеров групп c прогресс баром 2.0.0

Другие ресурсы пользователя Mirovinger

Поделиться ресурсом

Мы ценим вашу конфиденциальность