Less for beautiful banners of groups with a progress bar

To add such group banners, as in the screenshot below -

It is enough to add such code to extra.less

.m-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";
                    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: 'xenForo';
        }
    }
}

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

Now let’s take a look at the example of the finished code, the main points that can be changed.
Everything is quite simple, we do not need to duplicate this whole large section of code, just a couple of lines.

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

.m-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; )
This is a variable that takes seven parameters, separated by semicolons.

• The number which is responsible for showing the progress of the bar - @numLine - this parameter can also be set to false, which simply disables the progress of the bar.
• The starting color, which shows directly the progress - @startColor - the default value can be set in the variable - @startBgColor.
• The general color that sets the initial value of the progress bar, by default - @stopColor - the default value can be set in the variable - @stopBgColor.
• The general color of the text in the banner is @textColor, this parameter is optional, the default color is white.
• The general color of the group text, which can be set separately is @strongColor, this parameter is optional, inherited by default.
• The background of the group’s banner, which can be set separately is @bgColor, this parameter is optional, it defaults to #292929.
• The value for the text is @textShadow, this parameter is optional, by default its value is false.

In our example, this.

• The number which is responsible for showing the progress of the bar is 7. (at the moment it is fixed, if you need more, you can modify it yourself).
• The starting color, which shows progress directly, is false, so the value from the variable - @startBgColor is used.
• The general color that sets the initial bar progress value is false by default; therefore, the value from the variable is used - @stopBgColor.
• The general color of the text in the banner is white.
• The general color of the group text that can be set separately is white.
• Group banner background, which can be set separately - # 292929.
• The value for the text is true.

Let's say we need to change the progress bar.
Just duplicate this code (as much as you need):

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

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