Баннеры групп 02

@svgFontPach: "/styles/fonts/";

@font-face {
    font-family: 'BebasNeuePro';
    src: url('@{svgFontPach}BebasNeuePro/BebasNeueRegular.woff2') format('woff2'),
         url('@{svgFontPach}BebasNeuePro/BebasNeueRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BebasNeuePro';
    src: url('@{svgFontPach}BebasNeuePro/BebasNeueBold.woff2') format('woff2'),
         url('@{svgFontPach}BebasNeuePro/BebasNeueBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@userBannerCustom-width: 120px;
@userBannerCustom-staff--color: @xf-linkColor;

.userBannerCustom-inline-block() {
    text-align: center!important;
    width: @userBannerCustom-width;
    display: inline-block;
}

.userBannerCustom(@group-name, @color, @colorbr: transparent,) {
    .userBannerCustom {
        display: block;
        font-family: 'BebasNeuePro';
        font-size: 18px;
        font-weight: bold;
        font-style: normal;
        text-align: center;
        text-transform: uppercase;
        margin: 4px 0;
        border-width: 2px 0;
        border-style: solid;
        border-color: @colorbr;
        @media (max-width: @xf-responsiveMedium) {
            .userBannerCustom-inline-block()
        }
        .memberTooltip-banners & {
            .userBannerCustom-inline-block()      
        }
        .template-member_view & {
            .userBannerCustom-inline-block()
        }
        &.@{group-name} {
            color: @color;
            border-color: @colorbr;
        }
    }
}

.userBanner.userBanner--staff {
    .userBannerCustom;
    background: transparent;
    color: @userBannerCustom-staff--color;
    border-color: @userBannerCustom-staff--color;
}

.userBannerCustom(admin, #d80000, #d80000);

userBannerCustom admin