Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Регистрация
27 Окт 2024
Сообщения
586
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;

}

}
 
Последнее редактирование:
Пользователь
Регистрация
28 Апр 2025
Сообщения
81
Сверху