.userBanner {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 4px 14px 4px 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
border-radius: 20px !important;
margin: 4px 0 !important;
max-width: fit-content !important;
color: #e6e6e6 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-family: 'Arial', sans-serif !important;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
// --- БЛИК (эффект стекла) ---
.userBanner::after {
content: "" !important;
position: absolute !important;
top: -50% !important;
left: -100% !important;
width: 200% !important;
height: 200% !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.05) 40%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 60%,
transparent 100%) !important;
transform: rotate(25deg) !important;
transition: all 0.6s ease !important;
pointer-events: none !important;
z-index: 0 !important;
}
.userBanner:hover::after {
left: 100% !important;
}
// --- ЭФФЕКТЫ ПРИ НАВЕДЕНИИ ---
.userBanner:hover {
transform: translateY(-3px) scale(1.02) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
filter: brightness(1.1) !important;
}
.userBanner:active {
transform: scale(0.95) !important;
}
// --- ЛОГОТИП ---
.userBanner::before {
content: "" !important;
display: block !important;
width: 20px !important;
height: 20px !important;
background-image: url('styles/Ramerussia2.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
flex-shrink: 0 !important;
border-radius: 50% !important;
position: relative !important;
z-index: 1 !important;
transition: all 0.3s ease !important;
}
.userBanner:hover::before {
transform: rotate(10deg) scale(1.1) !important;
}
// --- АНИМАЦИЯ ПУЛЬСАЦИИ ДЛЯ ТОП-ГРУПП ---
@keyframes pulseGlow {
0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5); }
50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), 0 0 30px var(--glow-color), 0 2px 8px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5); }
}
// ================================================================
// ЦВЕТА И АНИМАЦИИ ДЛЯ ГРУПП
// ================================================================
// --- 1. ВЛАДЕЛЕЦ (Золотой, мощная пульсация) ---
.userBanner--owner {
--glow-color: #f1c40f;
background: linear-gradient(135deg, #f1c40f, #d4ac0d) !important;
border-color: #f1c40f !important;
color: #1a1a1a !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
animation: pulseGlow 2.5s ease-in-out infinite !important;
}
.userBanner--owner::before { border: 1px solid #f1c40f !important; }
// --- 2. ЗАМЕСТИТЕЛЬ ВЛАДЕЛЬЦА (Оранжевый) ---
.userBanner--deputy {
background: linear-gradient(135deg, #e67e22, #ca6f1e) !important;
border-color: #f39c12 !important;
color: #1a1a1a !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
animation: pulseGlow 3s ease-in-out infinite !important;
}
.userBanner--deputy::before { border: 1px solid #f39c12 !important; }
// --- 3. ОСНОВНОЙ ЗАМЕСТИТЕЛЬ (Тёмно-оранжевый) ---
.userBanner--maindeputy {
background: linear-gradient(135deg, #d35400, #a04000) !important;
border-color: #e67e22 !important;
animation: pulseGlow 3.5s ease-in-out infinite !important;
}
.userBanner--maindeputy::before { border: 1px solid #e67e22 !important; }
// --- 4. ГА (Красный) ---
.userBanner--ga {
background: linear-gradient(135deg, #c0392b, #922b21) !important;
border-color: #e74c3c !important;
animation: pulseGlow 2.8s ease-in-out infinite !important;
}
.userBanner--ga::before { border: 1px solid #e74c3c !important; }
// --- 5. СТ. АДМ (Тёмный красный + Золотая кайма) ---
.userBanner--senioradmin {
background: linear-gradient(135deg, #7b241c, #4a1410) !important;
border-color: #d4af37 !important;
animation: pulseGlow 2.9s ease-in-out infinite !important;
}
.userBanner--senioradmin::before { border: 1px solid #d4af37 !important; }
// --- 6. ТЕХ. АДМ (Голубой) ---
.userBanner--techadmin {
background: linear-gradient(135deg, #1abc9c, #148f77) !important;
border-color: #48c9b0 !important;
}
.userBanner--techadmin::before { border: 1px solid #48c9b0 !important; }
// --- 7. СПЕЦИАЛЬНАЯ АДМИНИСТРАЦИЯ (КРАСНЫЙ, КАК ТЫ ПРОСИЛ) ---
.userBanner--specadmin {
background: linear-gradient(135deg, #c0392b, #78281f) !important;
border-color: #e74c3c !important;
animation: pulseGlow 3.2s ease-in-out infinite !important;
}
.userBanner--specadmin::before { border: 1px solid #e74c3c !important; }
// --- 8. ЗГА (Бордовый) ---
.userBanner--zga {
background: linear-gradient(135deg, #a93226, #641e16) !important;
border-color: #c0392b !important;
}
.userBanner--zga::before { border: 1px solid #c0392b !important; }
// --- 9. ГЛАВНЫЙ СЛЕДЯЩИЙ (Зелёный) ---
.userBanner--headwatcher {
background: linear-gradient(135deg, #27ae60, #1e8449) !important;
border-color: #2ecc71 !important;
}
.userBanner--headwatcher::before { border: 1px solid #2ecc71 !important; }
// --- 10. МОДЕРАТОР (Фиолетовый) ---
.userBanner--moderator {
background: linear-gradient(135deg, #8e44ad, #6c3483) !important;
border-color: #9b59b6 !important;
}
.userBanner--moderator::before { border: 1px solid #9b59b6 !important; }
// --- 11. КОМАНДА ФОРУМА (ВОЗВРАЩАЕМ! Фиолетовый, как ты просил) ---
.userBanner--staff {
background: linear-gradient(135deg, #8e44ad, #5b2c6f) !important;
border-color: #9b59b6 !important;
}
.userBanner--staff::before { border: 1px solid #9b59b6 !important; }
// --- 12. КУРАТОР ИГРЫ (Бирюзовый) ---
.userBanner--curator {
background: linear-gradient(135deg, #16a085, #0e6655) !important;
border-color: #1abc9c !important;
}
.userBanner--curator::before { border: 1px solid #1abc9c !important; }
// --- 13. VIP (РАДУГА) ---
.userBanner--vip {
background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff0000) !important;
background-size: 300% 100% !important;
border-color: rgba(255,255,255,0.4) !important;
color: #fff !important;
text-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
animation: rainbowMove 2s linear infinite !important;
}
.userBanner--vip::before { border: 1px solid rgba(255,255,255,0.6) !important; }
@keyframes rainbowMove {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
// --- 14. ИГРОК (Синий) ---
.userBanner--player {
background: linear-gradient(135deg, #2980b9, #1f618d) !important;
border-color: #3498db !important;
}
.userBanner--player::before { border: 1px solid #3498db !important; }
// --- 15. ПОЛЬЗОВАТЕЛЬ (Серый) ---
.userBanner--user {
background: linear-gradient(135deg, #566573, #2c3e50) !important;
border-color: #85929e !important;
}
.userBanner--user::before { border: 1px solid #85929e !important; }
// --- 16. СЕРВЕР "ONTUSTIK" (Зелёный) ---
.userBanner--server {
background: linear-gradient(135deg, #1e8449, #0e3b1d) !important;
border-color: #27ae60 !important;
}
.userBanner--server::before { border: 1px solid #27ae60 !important; }
// ================================================================
// МОБИЛЬНАЯ АДАПТАЦИЯ
// ================================================================
@media (max-width: 480px) {
.userBanner {
padding: 3px 10px 3px 6px !important;
font-size: 10px !important;
border-radius: 15px !important;
}
.userBanner::before {
width: 16px !important;
height: 16px !important;
}
}
