Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

ИЩУ extra less

Lime-Pulse

Lime-Pulse

Окт
298
294
Пользователь
код: 
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/styles/role-play/fonts/montserrat-400.woff2') format('woff2'), url('/styles/role-play/fonts/montserrat-400.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local(''), url('/styles/role-play/fonts/montserrat-500.woff2') format('woff2'), url('/styles/role-play/fonts/montserrat-500.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local(''), url('/styles/role-play/fonts/montserrat-600.woff2') format('woff2'), url('/styles/role-play/fonts/montserrat-600.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''), url('/styles/role-play/fonts/montserrat-700.woff2') format('woff2'), url('/styles/role-play/fonts/montserrat-700.woff') format('woff');
}
/* ===== БАЗОВЫЙ СТИЛЬ БАННЕРА ===== */
.userBanner {
  text-transform: uppercase;
  font-weight: 800;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 30px !important;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  transition: all .3s ease;
  background-size: 300% 300% !important;
  animation: BannerFlow 8s ease infinite !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  letter-spacing: .3px;
  color: #ffffff !important;
  overflow: hidden;
  /* ФИКС: блик не выходит за границы */
}
.userBanner strong {
  font-size: 85%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  padding-left: 0;
  text-align: center;
  line-height: .95;
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
/* ===== ОБВОДКА ===== */
.userBanner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 60%, rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* ===== БЛИК (теперь обрезается) ===== */
.userBanner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: rotate(25deg);
  animation: Shine 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.userBanner:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}
/* ===== АНИМАЦИИ ===== */
@keyframes BannerFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Shine {
  0% {
    left: -120%;
  }
  100% {
    left: 220%;
  }
}
/* ============================================================ */
/* ===== ИНДИВИДУАЛЬНЫЕ ГРАДИЕНТЫ ===== */
/* ============================================================ */
.userBanner.userBanner--staff {
  background: linear-gradient(135deg, #0b3a6b, #1a5a8c, #d4a017, #aa3300);
  background-size: 300% 300%;
}
.userBanner.userBanner--admin {
  background: linear-gradient(135deg, #00897b, #00b894, #00cec9);
  background-size: 300% 300%;
}
.userBanner.userBanner--Gladmin {
  background: linear-gradient(135deg, #0a3d0a, #1a7a1a, #2ecc71, #1a7a1a);
  background-size: 300% 300%;
}
.userBanner.userBanner--ZGadmin {
  background: linear-gradient(135deg, #1a6b1a, #2ecc71, #1abc9c, #2ecc71);
  background-size: 300% 300%;
}
.userBanner.userBanner--stadm {
  background: linear-gradient(135deg, #006400, #32cd32, #00fa9a, #32cd32);
  background-size: 300% 300%;
}
.userBanner.userBanner--mladm {
  background: linear-gradient(135deg, #008000, #00ff00, #7cfc00, #00ff00);
  background-size: 300% 300%;
}
.userBanner.userBanner--redadmin {
  background: linear-gradient(135deg, #4a0000, #8b0000, #dc143c, #8b0000);
  background-size: 300% 300%;
}
.userBanner.userBanner--admforum {
  background: linear-gradient(135deg, #5c0000, #cc0000, #ff3333, #cc0000);
  background-size: 300% 300%;
}
.userBanner.userBanner--techadm {
  background: linear-gradient(135deg, #4a0000, #cc0000, #ff6666, #cc0000);
  background-size: 300% 300%;
}
.userBanner.userBanner--manager {
  background: linear-gradient(135deg, #4a0a0a, #8b0000, #dc143c, #8b0000);
  background-size: 300% 300%;
}
.userBanner.userBanner--communitymanager {
  background: linear-gradient(135deg, #1a1a1a, #333333, #555555, #333333);
  background-size: 300% 300%;
}
.userBanner.userBanner--mdforum {
  background: linear-gradient(135deg, #003366, #0066cc, #0099ff, #0066cc);
  background-size: 300% 300%;
}
.userBanner.userBanner--rykds {
  background: linear-gradient(135deg, #000066, #0000cc, #4169e1, #0000cc);
  background-size: 300% 300%;
}
.userBanner.userBanner--rykproekta {
  background: linear-gradient(135deg, #4a0033, #8b006d, #cc0099, #8b006d);
  background-size: 300% 300%;
}
.userBanner.userBanner--razrab {
  background: linear-gradient(135deg, #4a004a, #8b008b, #cc44cc, #8b008b);
  background-size: 300% 300%;
}
.userBanner.userBanner--tehh {
  background: linear-gradient(135deg, #4a0a00, #cc2200, #ff4400, #cc2200);
  background-size: 300% 300%;
}
.userBanner.userBanner--teh {
  background: linear-gradient(135deg, #3a0a00, #991100, #cc2200, #991100);
  background-size: 300% 300%;
}
.userBanner.userBanner--premium {
  background: linear-gradient(135deg, #1a1a5e, #3a3a9e, #5a5ade, #3a3a9e);
  background-size: 300% 300%;
}
.userBanner.userBanner--sponsor {
  background: linear-gradient(135deg, #2a0a5a, #5a1a8a, #8a2abe, #5a1a8a);
  background-size: 300% 300%;
}
.userBanner.userBanner--vipteams {
  background: linear-gradient(135deg, #4a005a, #8a0a8a, #cc44aa, #ff66cc, #cc44aa);
  background-size: 300% 300%;
}
.userBanner.userBanner--team {
  background: linear-gradient(135deg, #2a0a4a, #6a1a8a, #aa2abe, #6a1a8a);
  background-size: 300% 300%;
}
.userBanner.userBanner--yakovlevteam {
  background: linear-gradient(135deg, #3a0000, #8a0a5a, #cc0a8a, #8a0a5a);
  background-size: 300% 300%;
}
.userBanner.userBanner--yakovlevfamily {
  background: linear-gradient(135deg, #1a0a3a, #5a1a7a, #9a3aba, #cc5a9a, #9a3aba);
  background-size: 300% 300%;
}
.userBanner.userBanner--cristalix {
  background: linear-gradient(135deg, #003366, #0066cc, #3d9eff, #0066cc);
  background-size: 300% 300%;
}
.userBanner.userBanner--diamond {
  background: linear-gradient(135deg, #2a3a5a, #5a7a9a, #8abade, #5a7a9a);
  background-size: 300% 300%;
}
.userBanner.userBanner--emerald {
  background: linear-gradient(135deg, #003300, #008800, #00cc44, #008800);
  background-size: 300% 300%;
}
.userBanner.userBanner--super {
  background: linear-gradient(135deg, #ffd700, #ff8c00, #ff1493, #00bfff, #32cd32, #ffd700);
  background-size: 300% 300%;
  animation-duration: 12s;
}
.userBanner.userBanner--honorable {
  background: linear-gradient(135deg, #2a0000, #8b0000, #dc143c, #ff6b6b, #dc143c);
  background-size: 300% 300%;
}
.userBanner.userBanner--osnov {
  background: linear-gradient(135deg, #3a2a00, #8a6a00, #ffd700, #ff8c00, #ffd700);
  background-size: 300% 300%;
}
.userBanner.userBanner--lider {
  background: linear-gradient(135deg, #3a1a00, #8a4a00, #daa520, #ff6b6b, #daa520);
  background-size: 300% 300%;
}
.userBanner.userBanner--user {
  color: #e0e0e0 !important;
  background: linear-gradient(135deg, #222222, #3a3a3a, #555555, #3a3a3a);
  background-size: 300% 300%;
}
.userBanner.userBanner--user strong {
  color: #e0e0e0 !important;
}
.userBanner.userBanner--newmember {
  color: #d0d8e0 !important;
  background: linear-gradient(135deg, #2a3a4a, #4a5a6a, #6a7a8a, #4a5a6a);
  background-size: 300% 300%;
}
.userBanner.userBanner--newmember strong {
  color: #d0d8e0 !important;
}
.userBanner.userBanner--verified {
  background: linear-gradient(135deg, #003366, #1a4a8a, #3366aa, #1a4a8a);
  background-size: 300% 300%;
}
.userBanner.userBanner--proveren {
  color: #e0e8f0 !important;
  background: linear-gradient(135deg, #2a3a5a, #4a6a8a, #6a8aaa, #4a6a8a);
  background-size: 300% 300%;
}
.userBanner.userBanner--proveren strong {
  color: #e0e8f0 !important;
}
.userBanner.userBanner--hassle {
  background: linear-gradient(135deg, #3a1a00, #8a4a00, #cc6600, #ff8c00, #cc6600);
  background-size: 300% 300%;
}
.userBanner.userBanner--proh {
  background: linear-gradient(135deg, #2a004a, #5a008a, #8a00cc, #cc00ff, #8a00cc);
  background-size: 300% 300%;
}
.userBanner.userBanner--remka {
  background: linear-gradient(135deg, #003333, #006666, #009999, #006666);
  background-size: 300% 300%;
}
.userBanner.userBanner--kur {
  background: linear-gradient(135deg, #2a0a2a, #5a1a5a, #8a2a8a, #cc44aa, #8a2a8a);
  background-size: 300% 300%;
}
.userBanner.userBanner--adm {
  background: linear-gradient(135deg, #1a3a0a, #3a6a1a, #5a9a2a, #82f358, #5a9a2a);
  background-size: 300% 300%;
}
.userBanner.userBanner--soskazgs {
  background: linear-gradient(135deg, #00003a, #00006a, #0000aa, #5555dd, #0000aa);
  background-size: 300% 300%;
}
.userBanner.userBanner--soskags {
  background: linear-gradient(135deg, #1a0a00, #4a1a00, #8a3a00, #cc6600, #8a3a00);
  background-size: 300% 300%;
}
/* ===== МЕДИА-ЗАПРОСЫ ===== */
.message-userBanner.userBanner {
  display: flex;
}
@media (max-width: 650px) {
  .message:not(.message--forceColumns) .message-userTitle,
  .message:not(.message--forceColumns) .message-userBanner.userBanner {
    display: inline-flex;
  }
}
/* ===== Базовый стиль для всех префиксов ===== */
.pgreen,
.porange,
.paqua,
.pred,
.ypred,
.bpred {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px 2px 8px;
  border-radius: 20px;
  /* скругленные, как современные теги */
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
/* ===== Цвета (обновленная палитра, сочнее и читаемее) ===== */
.pgreen {
  background: #0a1f1a;
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.25);
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.05);
}
.porange {
  background: #1f1204;
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.05);
}
.paqua {
  background: #061a2e;
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.05);
}
.pred {
  background: #1f0a0a;
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.25);
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.05);
}
.ypred {
  background: #1f1a00;
  color: #fde047;
  border-color: rgba(253, 224, 71, 0.25);
  box-shadow: 0 0 20px rgba(253, 224, 71, 0.05);
}
.bpred {
  background: #0a0f2a;
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.25);
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.05);
}
/* ===== Иконка галочки (исправленная) ===== */
.fa-check-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.fa-check-circle::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m2.25 6.75 2.25 2.25 5.25-5.25' fill='none' stroke='%235c9ce6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
/* ===== Анимация для градиента (исправлен синтаксис) ===== */
@keyframes fireGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ===== Бонус: префикс с анимацией "горячо" ===== */
.pgreen-hot {
  background: linear-gradient(135deg, #0a1f1a, #163d2a, #0a1f1a);
  background-size: 300% 300%;
  animation: fireGradient 4s ease infinite;
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}
.admforumay {
  background: url(https://i.postimg.cc/2yd6BwJc/Admin.webp) no-repeat;
  height: 45px;
  width: 130px;
  text-indent: -10000em;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
.node-body {
  -webkit-transition:  margin-left 0.2s ease-in-out;
  transition:  margin-left 0.2s ease-in-out;
}
.node-body:hover {
  margin-left: 10px;
}
fieldset.pf-offtop {
  padding: 6px 12px 8px;
  border-radius: 12px;
  border: 3px solid #ffd700;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  transition: background 0.3s ease;
}
fieldset.pf-offtop legend {
  font-weight: 600;
  padding: 2px 8px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #ffd700;
  background-color: rgba(255, 215, 0, 0.2);
  transition: background-color 0.3s ease, font-size 0.3s ease;
}
fieldset.pf-offtop:hover legend {
  font-size: 15px;
  background-color: rgba(255, 215, 0, 0.25);
}
fieldset.pf-offtop p {
  margin: 0;
}
.premium-banner {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #540013, #dc143c, #540013);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 12px rgba(220, 20, 60, 0.35);
  color: #fff;
}
.premium-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shine 4s linear infinite;
}
@keyframes shine {
  from {
    left: -100%;
  }
  to {
    left: 200%;
  }
}
.premium-icon {
  font-size: 16px;
  z-index: 2;
}
.premium-title {
  font-size: 14px;
  font-weight: 700;
  z-index: 2;
}
 
Войдите или зарегистрируйтесь для ответа.
Сверху