Less for custom group banners

To add custom group banners as default in XF 2, it is enough to specify a custom class in the group settings.

Where is userBanner userBanner--admin, this is our custom class.

.m-userBannerVariation(@color; @bg; @border: false)
{
    color: @color;
    background: @bg;
    border-color: xf-intensify(@bg, 10%);

    & when (iscolor(@border))
    {
        border-color: @border;
    }
}

.userBanner
{
    font-size: 75%;
    font-weight: @xf-fontWeightNormal;
    font-style: normal;
    padding: 1px @xf-paddingMedium;
    border: 1px solid transparent;
    border-radius: @xf-borderRadiusSmall;
    text-align: center;

    strong
    {
        font-weight: inherit;
    }
    // Custom custom banners for groups
    &.userBanner--admin{ .m-userBannerVariation(white, #0bbcbc); }
    // Here is the code for a new banner, each banner from a new line
}