Баннеры с анимированным фоном

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

Obitatelll


Рег
02 Feb, 2011

Тем
6299

Постов
10083

Баллов
41618
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно