Создать модификацию шаблона (включить режим debeug)
Шаблон : app_user_banners.less
Ключ модификации:
app_user_banners_less Тип поиска: Регулярное выражение
Найти: #^.*$#su
Заменить:
HTML:
.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; }
}