USER BANNERS — DELORE RP (FULL PACK + NEW ROLES)
====================================================== */
/* ===== БАЗОВАЯ ФОРМА ===== */
.userBanner,
.userBannerLight,
.userBanner--staff {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 85%;
font-weight: 700;
text-align: center;
color: #fff;
border-radius: 6px;
border: none;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.userBanner:hover,
.userBannerLight:hover,
.userBanner--staff:hover {
transform: translateY(-2px);
}
/* ===== БЛИК ===== */
.userBanner::before,
.userBannerLight::before,
.userBanner--staff::before {
content: "";
position: absolute;
top: 0;
left: -80%;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
transparent 0%,
transparent 30%,
rgba(255,255,255,.7) 50%,
transparent 70%,
transparent 100%
);
animation: light 2.5s infinite;
pointer-events: none;
}
@keyframes light {
0% { left: -80%; }
100% { left: 80%; }
}
/* ======================================================
ВЫСШАЯ АДМИНИСТРАЦИЯ (ЗЕЛЁНЫЕ)
====================================================== */
.userBanner.ga {
background: linear-gradient(135deg, #0b7d2c, #19b45b);
box-shadow: 0 0 8px rgba(25,180,91,.7), 0 0 14px rgba(25,180,91,.5);
}
.userBanner.zga {
background: linear-gradient(135deg, #0f8f3a, #2ed573);
box-shadow: 0 0 8px rgba(46,213,115,.7), 0 0 14px rgba(46,213,115,.5);
}
/* ======================================================
КРАСНЫЕ (РУКОВОДИТЕЛЬ / СПЕЦ ЗРП)
====================================================== */
.userBanner.rukovod {
background: linear-gradient(135deg, #7a0000, #e60000);
box-shadow: 0 0 10px rgba(230,0,0,.9), 0 0 18px rgba(230,0,0,.6);
}
.userBanner.specrp {
background: linear-gradient(135deg, #b00000, #ff2e2e);
box-shadow: 0 0 8px rgba(255,46,46,.8), 0 0 14px rgba(255,46,46,.6);
}
/* ======================================================
АДМИНИСТРАЦИЯ
====================================================== */
.userBanner.adm {
background: linear-gradient(135deg, #0047ff, #2f6bff);
box-shadow: 0 0 8px rgba(47,107,255,.7), 0 0 14px rgba(47,107,255,.5);
}
.userBanner.mladm {
background: linear-gradient(135deg, #d4a700, #ffcc00);
box-shadow: 0 0 8px rgba(255,204,0,.8), 0 0 14px rgba(255,204,0,.6);
}
.userBanner.moder {
background: linear-gradient(135deg, #4b6cb7, #182848);
box-shadow: 0 0 8px rgba(75,108,183,.7), 0 0 14px rgba(75,108,183,.5);
}
/* ======================================================
РУКОВОДСТВО ФРАКЦИЙ / ПРОЕКТА
====================================================== */
.userBanner.kurator,
.userBanner.editor {
background: linear-gradient(135deg, #5f2cff, #9b59ff);
box-shadow: 0 0 8px rgba(155,89,255,.7), 0 0 14px rgba(155,89,255,.5);
}
.userBanner.leader {
background: linear-gradient(135deg, #0a3cff, #3f6bff);
box-shadow: 0 0 8px rgba(63,107,255,.7), 0 0 14px rgba(63,107,255,.5);
}
.userBanner.server01 {
background: linear-gradient(135deg, #caa400, #ffdd00);
box-shadow: 0 0 8px rgba(255,221,0,.8), 0 0 14px rgba(255,221,0,.6);
}
/* ======================================================
ИГРОВЫЕ / СТАТУСНЫЕ
====================================================== */
.userBanner.user {
background: linear-gradient(135deg, #7a7a7a, #9a9a9a);
box-shadow: 0 0 6px rgba(160,160,160,.6), 0 0 12px rgba(160,160,160,.4);
}
.userBanner.readOnly {
background: linear-gradient(135deg, #333, #4d4d4d);
box-shadow: 0 0 6px rgba(80,80,80,.6), 0 0 12px rgba(80,80,80,.4);
}
.userBanner.banned {
background: linear-gradient(135deg, #777, #555);
box-shadow: 0 0 6px rgba(120,120,120,.6), 0 0 12px rgba(120,120,120,.4);
}
.userBanner.active {
background: linear-gradient(135deg, #0033ff, #3366ff);
box-shadow: 0 0 8px rgba(51,102,255,.6), 0 0 14px rgba(51,102,255,.5);
}
.userBanner.professional {
background: linear-gradient(135deg, #008000, #00b300);
box-shadow: 0 0 8px rgba(0,179,0,.6), 0 0 14px rgba(0,179,0,.5);
}
.userBanner.legend {
background: linear-gradient(135deg, #ccad00, #ffd700);
color: #000;
box-shadow: 0 0 10px rgba(255,215,0,.8), 0 0 18px rgba(255,215,0,.6);
}
.userBanner.seller {
background: linear-gradient(135deg, #ff294d, #ff5c77);
box-shadow: 0 0 8px rgba(255,92,119,.6), 0 0 14px rgba(255,92,119,.4);
}
/* ======================================================
НОВЫЕ РОЛИ
====================================================== */
/* Тех */
.userBanner.tech {
background: linear-gradient(135deg, #ff6600, #ff9933);
box-shadow: 0 0 8px rgba(255,102,0,.7), 0 0 14px rgba(255,102,0,.5);
}
/* Почетный пользователь — радуга */
.userBanner.honor {
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
box-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.5);
color: #fff;
}
/* ======================================================
STAFF (если используется)
====================================================== */
.userBanner--staff {
background: #1ba39c !important;
box-shadow: 0 0 8px rgba(27,163,156,.7), 0 0 14px rgba(27,163,156,.5);
}
/* ======================================================
АДАПТАЦИЯ ДЛЯ СООБЩЕНИЙ
====================================================== */
.message-userBanner.userBanner {
display: block;
margin-top: 8px;
font-size: 12px;
color: #fff; /* белый текст */
background: transparent; /* сохраняем фон баннера */
border-radius: inherit;
padding: 0;
text-align: center;
}
@media (max-width: 650px) {
.message-userBanner.userBanner,
.message-userBanner.userBannerLight,
.message-userBanner.userBanner--staff {
display: inline-block;
margin: 2px 0;
text-align: left;
}
}[/CODE]
сохраняем фон баннера */
border-radius: inherit;
padding: 0;
text-align: center;
}
@media (max-width: 650px) {
.message-userBanner.userBanner,
.message-userBanner.userBannerLight,
.message-userBanner.userBanner--staff {
display: inline-block;
margin: 2px 0;
text-align: left;
}
}