/* ========================================================================== TLOU "1A Cinematic" — новый дизайн сайта (Фаза 1: фундамент). Все правила скоуплены под .tlou-active, чтобы не течь в classic-режим. Переключается флагом theme.design_mode в админке (Настройки → Дизайн TLOU). ========================================================================== */ /* ---- Токены темы -------------------------------------------------------- */ body.tlou-active { --bg: #0d0b0a; --surface: #141009; --surface-2: #1b150e; --panel: #17130f; --raise: rgba(255,255,255,.03); --raise-2: rgba(255,255,255,.06); --border: rgba(224,180,132,.10); --border-hi: rgba(224,180,132,.24); --text: #ece5db; --text-mut: #9a9187; --text-dim: #6f665d; --accent: #d17a3f; --accent-soft: rgba(209,122,63,.14); --link: #2196f3; --link-hover: #5aadf6; --hero: linear-gradient(120deg,#20140c,#150f0b 55%,#100b09); --tex: rgba(255,255,255,.028); --shadow: 0 20px 48px rgba(0,0,0,.5); --input-bg: #141009; } body.tlou-active[data-theme="light"] { --bg: #e9dfce; --surface: #f6efe2; --surface-2: #efe5d3; --panel: #fbf6ec; --raise: rgba(120,75,35,.05); --raise-2: rgba(120,75,35,.10); --border: rgba(120,80,40,.18); --border-hi: rgba(160,90,40,.42); --text: #2b2118; --text-mut: #6f6153; --text-dim: #9a8b78; --accent: #b0531f; --accent-soft: rgba(176,83,31,.12); --link: #1666b8; --link-hover: #0f4e8f; --hero: linear-gradient(120deg,#e7d3ba,#f1e5d2 55%,#efe3ce); --tex: rgba(90,55,20,.05); --shadow: 0 18px 40px rgba(90,60,30,.18); --input-bg: #fbf6ec; } /* "Полночная" (midnight) — третья тема, холодный тёмный фон с фиолетовым акцентом. */ body.tlou-active[data-theme="midnight"] { --bg: #0b0d11; --surface: #12151b; --surface-2: #171b22; --panel: #161a21; --raise: rgba(255,255,255,.035); --raise-2: rgba(255,255,255,.07); --border: rgba(255,255,255,.08); --border-hi: rgba(155,110,255,.4); --text: #e8eaf0; --text-mut: #9aa1ad; --text-dim: #666d78; --accent: #8b5cf6; --accent-soft: rgba(139,92,246,.16); --link: #8b5cf6; --link-hover: #a78bfa; --hero: linear-gradient(120deg,#14141c,#0f1116 55%,#0b0d11); --tex: rgba(255,255,255,.02); --shadow: 0 20px 48px rgba(0,0,0,.55); --input-bg: #0b0d11; } body.tlou-active { transition: background-color .3s ease, color .25s ease; } /* Фиксированные цвета рангов/дивизионов — игровая логика, не зависят от темы. Понадобятся в редизайне статистики (фаза 2), объявляем уже сейчас. */ body.tlou-active .tlou-rank-bronze { background:#cd7f32; color:#1a1a1a; } body.tlou-active .tlou-rank-silver { background:#c0c0c0; color:#1a1a1a; } body.tlou-active .tlou-rank-gold { background:#ffd700; color:#1a1a1a; } body.tlou-active .tlou-rank-platinum { background:#e5e4e2; color:#1a1a1a; } body.tlou-active .tlou-rank-diamond { background:#b9f2ff; color:#1a1a1a; } body.tlou-active .tlou-rank-master { background:#9b59b6; color:#fff; } body.tlou-active .tlou-rank-grandmaster { background:#e74c3c; color:#fff; } body.tlou-active .tlou-div-casual { background:#2196F3; color:#fff; } body.tlou-active .tlou-div-pro { background:#FFD700; color:#1a1a1a; } body.tlou-active .tlou-div-nodmg { background:#e74c3c; color:#fff; } /* ---- Общие сбросы/шрифты внутри новой темы ------------------------------ */ body.tlou-active { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; } body.tlou-active a { color: var(--link); } body.tlou-active a:hover { color: var(--link-hover); } body.tlou-active ::-webkit-scrollbar { height:9px; width:9px; } body.tlou-active ::-webkit-scrollbar-thumb { background: rgba(209,122,63,.35); border-radius:5px; } body.tlou-active ::-webkit-scrollbar-track { background: rgba(255,255,255,.03); } @keyframes tlouRiseIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } } body.tlou-active .tlou-rise-in { animation: tlouRiseIn .55s cubic-bezier(.22,1,.36,1) both; } @media (prefers-reduced-motion: reduce) { body.tlou-active * { animation: none !important; transition: none !important; } } /* ---- Шапка --------------------------------------------------------------- */ body.tlou-active #header.tlou-header { position: sticky; top: 0; z-index: 1040; background: var(--panel); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); height: auto; width: 100%; } body.tlou-active .tlou-header-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 22px; padding: 12px 28px; flex-wrap: wrap; } body.tlou-active .tlou-logo { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; font-family: 'Oswald', sans-serif; line-height: 1; user-select: none; text-decoration: none; } body.tlou-active .tlou-logo:hover { color: inherit; } body.tlou-active .tlou-logo-main { font-weight:700; font-size:26px; letter-spacing:.03em; color: var(--text); } body.tlou-active .tlou-logo-sub { font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); } body.tlou-active .tlou-nav { display:flex; gap:6px; flex-wrap:wrap; } body.tlou-active .tlou-nav a { font-family:'Oswald', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; padding:8px 12px; border-radius:7px; color: var(--text-mut); text-decoration:none; transition: background .15s, color .15s; } body.tlou-active .tlou-nav a:hover { color: var(--text); background: var(--raise); } body.tlou-active .tlou-nav a.active { background: var(--accent-soft); color: var(--accent); } body.tlou-active .tlou-header-actions { margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; } body.tlou-active .tlou-search { position:relative; width:190px; } body.tlou-active .tlou-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color: var(--text-dim); font-size:14px; pointer-events:none; } body.tlou-active .tlou-search input { width:100%; padding:7px 10px 7px 30px; background: var(--input-bg); border:1px solid var(--border); border-radius:7px; color: var(--text); font-family:'Inter', sans-serif; font-size:12.5px; outline:none; } body.tlou-active .tlou-theme-toggle { position: relative; width:58px; height:30px; border-radius:999px; border:1px solid var(--border-hi); background: var(--panel); cursor:pointer; padding:0; flex-shrink:0; } body.tlou-active .tlou-theme-toggle .tlou-toggle-knob { position:absolute; top:3px; left:33px; width:22px; height:22px; border-radius:50%; background:#c9d2de; box-shadow: inset -6px -3px 0 0 var(--panel); transition: left .28s cubic-bezier(.4,0,.2,1), background .28s ease; } body.tlou-active[data-theme="light"] .tlou-theme-toggle .tlou-toggle-knob { left:3px; background: radial-gradient(circle at 40% 35%,#ffd86b,#f0a500); box-shadow: 0 0 8px rgba(240,165,0,.6); } body.tlou-active .tlou-login-btn { display:inline-flex; align-items:center; gap:6px; font-family:'Oswald', sans-serif; font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:8px 14px; border-radius:7px; background: var(--raise); border:1px solid var(--border); color: var(--text-mut); white-space:nowrap; text-decoration:none; } body.tlou-active .tlou-login-btn:hover { color: var(--text); border-color: var(--border-hi); } body.tlou-active .tlou-menu-trigger { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:7px; background: var(--raise); border:1px solid var(--border); color: var(--text-mut); cursor:pointer; flex-shrink:0; } /* ---- Подвал --------------------------------------------------------------- */ body.tlou-active footer.tlou-footer { border-top:1px solid var(--border); background: var(--surface); padding:36px 28px; } body.tlou-active .tlou-footer-inner { max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; } body.tlou-active .tlou-footer-brand { max-width:420px; } body.tlou-active .tlou-footer-logo { display:flex; align-items:baseline; gap:9px; margin-bottom:12px; font-family:'Oswald', sans-serif; line-height:1; user-select:none; } body.tlou-active .tlou-footer-logo-main { font-weight:700; font-size:30px; letter-spacing:.02em; color: var(--text); } body.tlou-active .tlou-footer-logo-sub { font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); } body.tlou-active .tlou-footer-desc { font-size:12.5px; color: var(--text-mut); line-height:1.6; margin:0; } body.tlou-active .tlou-footer-socials { display:flex; gap:12px; align-items:flex-start; } body.tlou-active .tlou-footer-socials a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background: var(--raise); border:1px solid var(--border); } body.tlou-active .tlou-footer-socials img { width:16px; height:16px; } body.tlou-active .tlou-footer-socials i { font-size:16px; color:var(--text-mut); } body.tlou-active .tlou-footer-socials a:hover i { color:var(--accent); } body.tlou-active .tlou-footer-bottom { max-width:1240px; margin:22px auto 0; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color: var(--text-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } body.tlou-active .tlou-footer-bottom a { color: var(--text-dim); } /* ---- Cookie-баннер --------------------------------------------------------- */ body.tlou-active .tlou-cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:1050; padding:16px; display:none; justify-content:center; } body.tlou-active .tlou-cookie-banner.tlou-visible { display:flex; } body.tlou-active .tlou-cookie-card { max-width:760px; width:100%; background: var(--panel); border:1px solid var(--border-hi); border-radius:14px; box-shadow: var(--shadow); padding:18px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } body.tlou-active .tlou-cookie-card > i { font-size:22px; color: var(--accent); flex-shrink:0; } body.tlou-active .tlou-cookie-text { flex:1; min-width:240px; font-size:12.5px; color: var(--text-mut); line-height:1.5; } body.tlou-active .tlou-cookie-actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap; } body.tlou-active .tlou-cookie-actions button { font-family:'Oswald', sans-serif; font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; padding:9px 18px; border-radius:8px; border:none; cursor:pointer; } body.tlou-active .tlou-btn-primary { background: var(--accent); color:#fff; } body.tlou-active .tlou-btn-ghost { background: var(--raise); border:1px solid var(--border) !important; color: var(--text-mut); } /* ========================================================================== Модуль статистики — редизайн (Фаза 2). Цвета рангов/дивизионов даёт уже загруженный stats.css (.rank-*, .div-*, .stats-record-div-badge) — здесь только типографика/раскладка новых карточек, без переопределения цветов. ========================================================================== */ body.tlou-active .rank-badge, body.tlou-active .stats-record-div-badge, body.tlou-active .div-casual, body.tlou-active .div-pro, body.tlou-active .div-nodmg { font-family: 'Oswald', sans-serif; letter-spacing: .04em; } /* ---- Пилюли-навигация (top/records/map/search) -------------------------- */ body.tlou-active .tlou-stat-pillnav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; } body.tlou-active .tlou-stat-pillnav a { display:inline-flex; align-items:center; gap:7px; font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; padding:9px 16px; border-radius:8px; background:var(--raise); border:1px solid var(--border); color:var(--text-mut); text-decoration:none; } body.tlou-active .tlou-stat-pillnav a:hover { color:var(--text); } body.tlou-active .tlou-stat-pillnav a.active { background:var(--accent); border-color:transparent; color:#1a1109; } body.tlou-active .tlou-stat-pillnav-search { margin-left:auto; position:relative; min-width:220px; flex:1; max-width:280px; } body.tlou-active .tlou-stat-pillnav-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); } body.tlou-active .tlou-stat-pillnav-search input { width:100%; padding:9px 12px 9px 34px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Inter',sans-serif; font-size:13px; outline:none; } /* ---- Карточка-контейнер --------------------------------------------------- */ body.tlou-active .tlou-stat-card { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); margin-bottom:16px; } body.tlou-active .tlou-stat-card-header { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); background:linear-gradient(90deg,var(--accent-soft),transparent); font-family:'Oswald',sans-serif; font-weight:600; font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--text); flex-wrap:wrap; } body.tlou-active .tlou-stat-card-header i { color:var(--accent); } body.tlou-active .tlou-stat-card-header .tlou-stat-count { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim); font-weight:400; text-transform:none; margin-left:6px; } body.tlou-active .tlou-stat-card-header-actions { margin-left:auto; display:flex; gap:8px; align-items:center; } body.tlou-active .tlou-stat-card-body { padding:20px; } body.tlou-active .tlou-stat-card-body.tlou-p0 { padding:0; } body.tlou-active .tlou-stat-empty { text-align:center; padding:40px 20px; color:var(--text-dim); } body.tlou-active .tlou-stat-empty i { font-size:32px; margin-bottom:10px; display:block; } /* ---- Профиль: hero -------------------------------------------------------- */ body.tlou-active .tlou-stat-hero { position:relative; padding:32px 34px; background:var(--hero); border-radius:16px 16px 0 0; overflow:hidden; } body.tlou-active .tlou-stat-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(120% 150% at 8% -10%, rgba(209,122,63,.22), transparent 55%), repeating-linear-gradient(135deg, var(--tex) 0 2px, transparent 2px 11px); pointer-events:none; } body.tlou-active .tlou-stat-hero-inner { position:relative; display:flex; gap:28px; align-items:center; flex-wrap:wrap; } body.tlou-active .tlou-stat-avatar-wrap { position:relative; flex-shrink:0; } body.tlou-active .tlou-stat-avatar, body.tlou-active .tlou-stat-avatar-placeholder { width:108px; height:108px; border-radius:50%; border:3px solid var(--accent); object-fit:cover; } body.tlou-active .tlou-stat-avatar-placeholder { display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:46px; color:#fff; } body.tlou-active .tlou-stat-pos-badge { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; border:3px solid var(--surface); color:#2a1c05; } body.tlou-active .tlou-stat-pos-badge.pos-1 { background:linear-gradient(135deg,#ffd86b,#f0a500); box-shadow:0 3px 12px rgba(255,190,0,.45); } body.tlou-active .tlou-stat-pos-badge.pos-2 { background:linear-gradient(135deg,#c0c0c0,#e0e0e0); box-shadow:0 3px 12px rgba(192,192,192,.4); } body.tlou-active .tlou-stat-pos-badge.pos-3 { background:linear-gradient(135deg,#cd7f32,#e6a55a); box-shadow:0 3px 12px rgba(205,127,50,.4); } body.tlou-active .tlou-stat-identity { flex:1; min-width:250px; } body.tlou-active .tlou-stat-name-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } body.tlou-active .tlou-stat-name { font-family:'Oswald',sans-serif; font-weight:700; font-size:38px; line-height:1; margin:0; color:var(--text); } body.tlou-active .tlou-stat-steam-link { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; color:var(--text-mut); } body.tlou-active .tlou-stat-progress-wrap { margin-top:16px; max-width:440px; } body.tlou-active .tlou-stat-progress-labels { display:flex; justify-content:space-between; font-size:11px; margin-bottom:6px; } body.tlou-active .tlou-stat-progress-labels .cur { color:var(--text-mut); } body.tlou-active .tlou-stat-progress-labels .xp { font-family:'JetBrains Mono',monospace; color:var(--text-mut); } body.tlou-active .tlou-stat-progress-track { height:9px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; } body.tlou-active .tlou-stat-progress-fill { display:block; height:100%; border-radius:5px; } body.tlou-active .tlou-stat-meta { min-width:200px; display:flex; flex-direction:column; gap:2px; } body.tlou-active .tlou-stat-meta-row { display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06); } body.tlou-active .tlou-stat-meta-row:last-child { border-bottom:none; } body.tlou-active .tlou-stat-meta-row .k { color:var(--text-mut); } body.tlou-active .tlou-stat-meta-row .v { color:var(--text); font-weight:700; } body.tlou-active .tlou-stat-meta-row .v.mono { font-family:'JetBrains Mono',monospace; font-weight:400; color:var(--text-mut); } body.tlou-active .tlou-stat-meta-row .v.clean { color:#4CAF50; } /* ---- Профиль: тело + KPI -------------------------------------------------- */ body.tlou-active .tlou-stat-body { padding:26px 34px; background:var(--surface); border-radius:0 0 16px 16px; } body.tlou-active .tlou-stat-section-label { font-family:'Oswald',sans-serif; font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mut); margin-bottom:16px; display:flex; align-items:baseline; gap:10px; } body.tlou-active .tlou-stat-section-label .cnt { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); text-transform:none; } body.tlou-active .tlou-stat-kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; } body.tlou-active .tlou-stat-kpi-tile { position:relative; padding:18px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); border:1px solid var(--border); transition:border-color .2s, transform .2s; } body.tlou-active .tlou-stat-kpi-tile.hover-lift:hover { border-color:rgba(209,122,63,.5); transform:translateY(-3px); } body.tlou-active .tlou-stat-kpi-tile i { font-size:22px; color:var(--accent); opacity:.9; } body.tlou-active .tlou-stat-kpi-value { font-family:'Oswald',sans-serif; font-weight:700; font-size:30px; line-height:1.05; margin-top:8px; color:var(--text); } body.tlou-active .tlou-stat-kpi-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mut); margin-top:3px; } /* ---- Побеги: плитки дивизий (единая визуализация) ------------------------ */ body.tlou-active .tlou-stat-escape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:8px; } body.tlou-active .tlou-stat-escape-tile { padding:16px; border-radius:12px; background:var(--raise); border:1px solid var(--border); border-top:3px solid var(--accent); } body.tlou-active .tlou-stat-escape-head { display:flex; justify-content:space-between; align-items:center; } body.tlou-active .tlou-stat-escape-name { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } body.tlou-active .tlou-stat-escape-share { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); } body.tlou-active .tlou-stat-escape-count { font-family:'Oswald',sans-serif; font-weight:700; font-size:26px; margin-top:6px; color:var(--text); } body.tlou-active .tlou-stat-escape-bar { height:4px; border-radius:2px; background:rgba(255,255,255,.06); margin-top:9px; overflow:hidden; } body.tlou-active .tlou-stat-escape-bar > span { display:block; height:100%; border-radius:2px; } /* ---- Аккордеон (Оружие / Рекорды / История) ------------------------------ */ body.tlou-active .tlou-stat-accordion { border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); overflow:hidden; margin-bottom:14px; } body.tlou-active .tlou-stat-accordion summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 18px; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:14px; color:var(--text); user-select:none; } body.tlou-active .tlou-stat-accordion summary::-webkit-details-marker { display:none; } body.tlou-active .tlou-stat-accordion summary i.chev { color:var(--accent); font-size:16px; transition:transform .25s ease; } body.tlou-active .tlou-stat-accordion[open] summary i.chev { transform:rotate(90deg); } body.tlou-active .tlou-stat-accordion-body { padding:2px 18px 16px; } body.tlou-active .tlou-stat-accordion .cnt { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); font-weight:400; } body.tlou-active .tlou-stat-weapon-row { padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); } body.tlou-active .tlou-stat-weapon-row:last-child { border-bottom:none; } body.tlou-active .tlou-stat-weapon-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; } body.tlou-active .tlou-stat-weapon-name { font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.tlou-active .tlou-stat-weapon-kills { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent); font-weight:700; flex-shrink:0; } body.tlou-active .tlou-stat-weapon-desc { font-size:11px; color:var(--text-dim); margin:3px 0 8px; } body.tlou-active .tlou-stat-weapon-bar { height:6px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; } body.tlou-active .tlou-stat-weapon-bar > span { display:block; height:100%; background:linear-gradient(90deg,#7c3518,var(--accent)); border-radius:3px; } body.tlou-active .tlou-stat-div-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } body.tlou-active .tlou-stat-div-filters button { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; border:1px solid var(--border); background:var(--raise); color:var(--text-mut); transition:all .2s; } body.tlou-active .tlou-stat-div-filters button.active { border-color:rgba(209,122,63,.5); background:var(--accent-soft); color:var(--text); } body.tlou-active .tlou-stat-div-filters button .dot { width:7px; height:7px; border-radius:50%; display:inline-block; } /* ---- Панель поиска/сортировки личных рекордов (профиль) --------------- */ body.tlou-active .tlou-stat-records-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; } body.tlou-active .tlou-stat-records-toolbar .tlou-stat-div-filters { margin-bottom:0; flex:1 1 auto; } body.tlou-active .tlou-stat-records-search { position:relative; min-width:160px; } body.tlou-active .tlou-stat-records-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:13px; pointer-events:none; } body.tlou-active .tlou-stat-records-search input { width:100%; padding:6px 10px 6px 30px; background:var(--input-bg); border:1px solid var(--border); border-radius:999px; color:var(--text); font-family:'Inter',sans-serif; font-size:12px; outline:none; } body.tlou-active .tlou-stat-records-search input:focus { border-color:var(--border-hi); } body.tlou-active .tlou-stat-records-sort { padding:6px 10px; border-radius:999px; background:var(--raise); border:1px solid var(--border); color:var(--text-mut); font-family:'Inter',sans-serif; font-size:12px; outline:none; cursor:pointer; } body.tlou-active .tlou-stat-records-limit-note { font-size:11.5px; color:var(--text-dim); margin:-6px 0 12px; } body.tlou-active .tlou-stat-record-row, body.tlou-active .tlou-stat-history-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.025); margin-bottom:6px; } body.tlou-active .tlou-stat-record-row .map, body.tlou-active .tlou-stat-history-row .map { flex:1; min-width:0; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.tlou-active .tlou-stat-record-row .time, body.tlou-active .tlou-stat-history-row .time { font-family:'JetBrains Mono',monospace; color:var(--text-mut); font-size:13px; flex-shrink:0; } body.tlou-active .tlou-stat-history-row .date { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); width:82px; flex-shrink:0; } /* ---- Таблица рейтинга (top/map/search) ------------------------------------ */ body.tlou-active .tlou-stat-table-scroll { overflow-x:auto; } body.tlou-active .stats-widget-table-block { overflow-x:auto; } body.tlou-active .stats-widget-table-block .tlou-stat-thead, body.tlou-active .stats-widget-table-block .tlou-stat-row { min-width:max-content; } body.tlou-active .tlou-stat-thead { display:flex; align-items:center; padding:12px 20px; border-bottom:1px solid var(--border-hi); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mut); font-weight:700; gap:6px; min-width:760px; } body.tlou-active .tlou-stat-thead a { color:var(--text-mut); text-decoration:none; cursor:pointer; } body.tlou-active .tlou-stat-thead a.active { color:var(--accent); } body.tlou-active .tlou-stat-row { display:flex; align-items:center; padding:11px 20px; border-bottom:1px solid rgba(255,255,255,.04); border-left:3px solid transparent; cursor:pointer; transition:background .15s; gap:6px; min-width:760px; } body.tlou-active .tlou-stat-row:hover { background:rgba(209,122,63,.07); } body.tlou-active .tlou-stat-row.top1 { border-left-color:#ffd700; } body.tlou-active .tlou-stat-row.top2 { border-left-color:#c0c0c0; } body.tlou-active .tlou-stat-row.top3 { border-left-color:#cd7f32; } body.tlou-active .tlou-stat-col-pos { width:38px; font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; color:var(--text-mut); flex-shrink:0; } body.tlou-active .tlou-stat-row.top1 .tlou-stat-col-pos { color:#ffd700; } body.tlou-active .tlou-stat-row.top2 .tlou-stat-col-pos { color:#c0c0c0; } body.tlou-active .tlou-stat-row.top3 .tlou-stat-col-pos { color:#cd7f32; } body.tlou-active .tlou-stat-col-avatar { width:42px; flex-shrink:0; } body.tlou-active .tlou-stat-table-avatar, body.tlou-active .tlou-stat-table-avatar-placeholder { width:30px; height:30px; border-radius:7px; object-fit:cover; } body.tlou-active .tlou-stat-table-avatar-placeholder { display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; } body.tlou-active .tlou-stat-col-name { flex:1; min-width:100px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.tlou-active .tlou-stat-col-rank { width:110px; flex-shrink:0; } body.tlou-active .tlou-stat-col-num { width:74px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-mut); flex-shrink:0; } body.tlou-active .tlou-stat-col-num.xp { color:#d99a6a; } body.tlou-active .tlou-stat-col-last { width:92px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); flex-shrink:0; } body.tlou-active .tlou-stat-pagination { display:flex; align-items:center; justify-content:center; gap:12px; padding:16px; } body.tlou-active .tlou-stat-pagination a, body.tlou-active .tlou-stat-pagination select { display:inline-flex; align-items:center; justify-content:center; height:34px; border-radius:8px; background:var(--raise); border:1px solid var(--border); color:var(--text-mut); text-decoration:none; padding:0 12px; font-family:'JetBrains Mono',monospace; font-size:13px; } body.tlou-active .tlou-stat-pagination .info { font-size:12px; color:var(--text-dim); } /* ---- Рекорды: карточки по картам + легенда + вид "таблица" ---------------- */ body.tlou-active .tlou-stat-records-toolbar { display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:16px; } body.tlou-active .tlou-stat-view-toggle { display:flex; gap:6px; } body.tlou-active .tlou-stat-view-toggle button { width:34px; height:34px; border-radius:8px; background:var(--raise); border:1px solid var(--border); color:var(--text-mut); cursor:pointer; } body.tlou-active .tlou-stat-view-toggle button.active { background:var(--accent); color:#1a1109; border-color:transparent; } body.tlou-active .tlou-stat-div-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 20px; border-bottom:1px solid var(--border); } body.tlou-active .tlou-stat-legend-item .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } body.tlou-active .tlou-stat-legend-item .cnt { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-mut); } body.tlou-active .tlou-stat-legend-bar { height:5px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; } body.tlou-active .tlou-stat-legend-bar > span { display:block; height:100%; } body.tlou-active .tlou-stat-legend-desc { font-size:11px; color:var(--text-dim); margin-top:4px; display:block; } body.tlou-active .tlou-stat-records-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; padding:20px; } body.tlou-active .tlou-stat-record-card { border-radius:12px; background:var(--raise); border:1px solid var(--border); overflow:hidden; transition:border-color .2s, transform .2s; } body.tlou-active .tlou-stat-record-card:hover { border-color:var(--border-hi); transform:translateY(-2px); } body.tlou-active .tlou-stat-record-card-name { padding:12px 15px; font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; color:var(--text); background:linear-gradient(90deg,var(--accent-soft),transparent); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; } body.tlou-active .tlou-stat-record-div-block { padding:10px 15px; border-top:3px solid transparent; min-height:56px; } body.tlou-active .tlou-stat-record-div-block .lbl { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--text-dim); margin-bottom:4px; } body.tlou-active .tlou-stat-record-empty { color:var(--text-dim); font-style:italic; font-size:12px; } body.tlou-active .tlou-stat-record-content { display:flex; align-items:center; gap:8px; } body.tlou-active .tlou-stat-record-content .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--text); text-decoration:none; } body.tlou-active .tlou-stat-record-content .time { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-mut); flex-shrink:0; } body.tlou-active .tlou-stat-record-content .date { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-dim); flex-shrink:0; } body.tlou-active .tlou-stat-records-table { padding:0 20px 20px; } body.tlou-active .tlou-stat-records-table-head, body.tlou-active .tlou-stat-records-table-row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.05); } body.tlou-active .tlou-stat-records-table-head { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mut); font-weight:700; } body.tlou-active .tlou-stat-rt-map { flex:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.tlou-active .tlou-stat-rt-div { flex:1; min-width:0; } /* ---- Автокомплит поиска --------------------------------------------------- */ body.tlou-active .tlou-stat-search-dropdown-item { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); font-size:13px; } body.tlou-active .tlou-stat-search-dropdown-item:last-child { border-bottom:none; } body.tlou-active .tlou-stat-search-dropdown-item:hover { background:var(--raise); } body.tlou-active #statsSearchDropdown.tlou-stat-search-dropdown { position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--panel); border:1px solid var(--border-hi); border-radius:10px; box-shadow:var(--shadow); z-index:20; overflow:hidden; } /* ---- Виджет на главной ----------------------------------------------------- */ body.tlou-active .tlou-stat-widget-counters { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1px; background:var(--border); } body.tlou-active .tlou-stat-widget-counter { background:var(--panel); padding:18px; text-align:center; } body.tlou-active .tlou-stat-widget-counter-value { font-family:'Oswald',sans-serif; font-weight:700; color:var(--text); } body.tlou-active .tlou-stat-widget-counter-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mut); margin-top:4px; } body.tlou-active .tlou-stat-widget-new-badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600; } body.tlou-active .tlou-stat-widget-modes { display:flex; gap:6px; } body.tlou-active .tlou-stat-widget-modes button { font-family:'Oswald',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; border-radius:7px; border:1px solid var(--border); background:var(--raise); color:var(--text-mut); cursor:pointer; } body.tlou-active .tlou-stat-widget-modes button.active { background:var(--accent); color:#1a1109; border-color:transparent; } /* ---- Адаптив: карточки/таблицы в колонку на мобильных --------------------- */ @media (max-width: 700px) { body.tlou-active .tlou-stat-hero-inner { flex-direction:column; align-items:flex-start; } body.tlou-active .tlou-stat-kpi-grid, body.tlou-active .tlou-stat-escape-grid { grid-template-columns:repeat(2,1fr); } body.tlou-active .tlou-stat-meta { width:100%; } } /* ========================================================================== Альтернативная раскладка — боковой сайдбар (Фаза 3, theme.layout=sidebar). Оборачивает шапку+контент+подвал в flex-row с фикс. сайдбаром слева. ========================================================================== */ body.tlou-active .tlou-app-shell { display:flex; min-height:100vh; } body.tlou-active .tlou-app-sidebar { width:92px; flex-shrink:0; position:sticky; top:0; height:100vh; z-index:1040; display:flex; flex-direction:column; align-items:center; padding:22px 0 16px; background:var(--panel); border-right:1px solid var(--border); } body.tlou-active .tlou-app-sidebar-logo { text-align:center; margin-bottom:22px; font-family:'Oswald',sans-serif; line-height:1.05; user-select:none; } body.tlou-active .tlou-app-sidebar-logo .main { font-weight:700; font-size:20px; letter-spacing:.02em; color:var(--text); display:block; } body.tlou-active .tlou-app-sidebar-logo .sub { font-weight:600; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-top:2px; display:block; } body.tlou-active .tlou-app-sidebar-nav { display:flex; flex-direction:column; gap:5px; width:100%; padding:0 8px; } body.tlou-active .tlou-app-sidebar-nav a { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:10px; color:var(--text-mut); text-decoration:none; text-align:center; } body.tlou-active .tlou-app-sidebar-nav a i { font-size:19px; } body.tlou-active .tlou-app-sidebar-nav a span { font-size:10px; font-weight:600; letter-spacing:.01em; } body.tlou-active .tlou-app-sidebar-nav a:hover { background:var(--raise); color:var(--text); } body.tlou-active .tlou-app-sidebar-nav a.active { background:var(--accent-soft); color:var(--accent); } body.tlou-active .tlou-app-sidebar-bottom { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:14px; } body.tlou-active .tlou-app-main { flex:1; min-width:0; display:flex; flex-direction:column; } body.tlou-active .tlou-header-slim { position:sticky; top:0; z-index:1030; background:var(--panel); border-bottom:1px solid var(--border); backdrop-filter:blur(6px); display:flex; align-items:center; gap:14px; padding:14px 28px; } body.tlou-active .tlou-header-slim .tlou-search { width:260px; } body.tlou-active .tlou-header-slim .tlou-login-btn { margin-left:auto; } /* ========================================================================== Редизайн главной страницы (Фаза 3). ========================================================================== */ body.tlou-active .tlou-dash-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 0 20px; } body.tlou-active .tlou-dash-podium-n5 { grid-template-columns:repeat(5,1fr); } body.tlou-active .tlou-dash-podium-n10 { grid-template-columns:repeat(5,1fr); } body.tlou-active .tlou-dash-podium-card { text-align:center; padding:22px 14px 18px; border:1px solid var(--border); border-radius:12px; background:var(--raise); position:relative; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; } body.tlou-active .tlou-dash-podium-card.pos-1 { padding-top:28px; } body.tlou-active .tlou-dash-podium-medal { position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; z-index:2; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:12.5px; color:#1a1a1a; } body.tlou-active .tlou-dash-podium-rank { position:absolute; top:10px; left:10px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); } body.tlou-active .tlou-dash-podium-avatar, body.tlou-active .tlou-dash-podium-avatar-placeholder { width:56px; height:56px; border-radius:50%; margin:10px auto 8px; object-fit:cover; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; color:#fff; } body.tlou-active .tlou-dash-podium-name { font-weight:600; font-size:13.5px; color:var(--text); } body.tlou-active .tlou-dash-podium-sub { font-size:11px; color:var(--text-mut); margin:2px 0 6px; } body.tlou-active .tlou-dash-podium-pts { font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; color:var(--text); } body.tlou-active .tlou-dash-podium-pts-label { font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); } /* ---- Hover-эффекты подиума топ-3 (настройка Дизайн TLOU → Анимация топ-3) -- Цвет эффекта зависит от места: pos-1 золото, pos-2 серебро, pos-3 бронза. */ body.tlou-active .tlou-dash-podium-card.pos-1 { --podium-fx-color: #ffd86b; } body.tlou-active .tlou-dash-podium-card.pos-2 { --podium-fx-color: #dcdcdc; } body.tlou-active .tlou-dash-podium-card.pos-3 { --podium-fx-color: #e6a55a; } body.tlou-active .tlou-podium-fx-glow:hover { transform:translateY(-3px); border-color:var(--podium-fx-color); box-shadow:0 0 0 1px var(--podium-fx-color), 0 8px 24px -4px var(--podium-fx-color); animation:tlouPodiumGlowPulse 1.6s ease-in-out infinite; } @keyframes tlouPodiumGlowPulse { 0%, 100% { box-shadow:0 0 0 1px var(--podium-fx-color), 0 8px 24px -6px var(--podium-fx-color); } 50% { box-shadow:0 0 0 1px var(--podium-fx-color), 0 8px 34px -2px var(--podium-fx-color); } } body.tlou-active .tlou-podium-fx-sparkle:hover { transform:translateY(-3px); border-color:var(--podium-fx-color); } body.tlou-active .tlou-podium-sparkles { position:absolute; top:-14px; left:50%; width:0; height:0; pointer-events:none; z-index:1; } body.tlou-active .tlou-podium-sparkles span { position:absolute; top:0; left:0; width:5px; height:5px; border-radius:50%; background:var(--podium-fx-color); opacity:0; box-shadow:0 0 6px 1px var(--podium-fx-color); } body.tlou-active .tlou-podium-fx-sparkle:hover .tlou-podium-sparkles span { animation:tlouPodiumSparkle .9s ease-out infinite; } body.tlou-active .tlou-podium-sparkles span:nth-child(1) { animation-delay:0s; --r:0deg; } body.tlou-active .tlou-podium-sparkles span:nth-child(2) { animation-delay:.1s; --r:60deg; } body.tlou-active .tlou-podium-sparkles span:nth-child(3) { animation-delay:.2s; --r:120deg; } body.tlou-active .tlou-podium-sparkles span:nth-child(4) { animation-delay:.3s; --r:180deg; } body.tlou-active .tlou-podium-sparkles span:nth-child(5) { animation-delay:.4s; --r:240deg; } body.tlou-active .tlou-podium-sparkles span:nth-child(6) { animation-delay:.5s; --r:300deg; } @keyframes tlouPodiumSparkle { 0% { opacity:0; transform:rotate(var(--r,0deg)) translateY(0) scale(.4); } 20% { opacity:1; } 100% { opacity:0; transform:rotate(var(--r,0deg)) translateY(-30px) scale(1); } } @media (prefers-reduced-motion: reduce) { body.tlou-active .tlou-podium-fx-glow:hover, body.tlou-active .tlou-podium-fx-sparkle:hover .tlou-podium-sparkles span { animation:none; } } body.tlou-active .tlou-dash-row { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px; align-items:start; } @media (max-width: 900px) { body.tlou-active .tlou-dash-row { grid-template-columns:1fr; } } body.tlou-active .tlou-dash-servers-panel .tlou-dash-server-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border); } body.tlou-active .tlou-dash-servers-panel .tlou-dash-server-row:last-child { border-bottom:none; } body.tlou-active .tlou-dash-server-status { width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex-shrink:0; } body.tlou-active .tlou-dash-server-status.online { background:#4CAF50; } body.tlou-active .tlou-dash-server-name { font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.tlou-active .tlou-dash-server-map { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); } body.tlou-active .tlou-dash-server-players { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-mut); flex-shrink:0; min-width:76px; text-align:center; } body.tlou-active .tlou-dash-server-players span { display:inline-block; width:100%; } body.tlou-active .tlou-dash-server-connect { width:30px; height:30px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; text-decoration:none; } body.tlou-active .tlou-dash-discord-card { padding:22px 18px; text-align:center; } body.tlou-active .tlou-dash-discord-card i { font-size:32px; color:var(--accent); } body.tlou-active .tlou-dash-discord-card .title { font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; margin-top:10px; } body.tlou-active .tlou-dash-discord-card a.join { display:inline-flex; margin-top:14px; align-items:center; gap:6px; font-family:'Oswald',sans-serif; font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:9px 18px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; } body.tlou-active .tlou-dash-sanctions-filter { margin-left:auto; display:flex; gap:6px; } body.tlou-active .tlou-dash-sanctions-filter button { font-family:'Oswald',sans-serif; font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:7px; border:1px solid var(--border); background:var(--raise); color:var(--text-mut); cursor:pointer; } body.tlou-active .tlou-dash-sanctions-filter button.active { background:var(--accent); color:#fff; border-color:transparent; } body.tlou-active .tlou-dash-sanctions-row { display:flex; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid rgba(255,255,255,.04); font-size:12.5px; } body.tlou-active .tlou-dash-sanctions-row:last-child { border-bottom:none; } body.tlou-active .tlou-dash-sanctions-type { font-family:'Oswald',sans-serif; font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:5px; flex-shrink:0; width:56px; text-align:center; } body.tlou-active .tlou-dash-sanctions-type.ban { background:rgba(231,76,60,.16); color:#e74c3c; } body.tlou-active .tlou-dash-sanctions-type.mute { background:rgba(209,122,63,.16); color:var(--accent); } body.tlou-active .tlou-dash-sanctions-player { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.tlou-active .tlou-dash-sanctions-date { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); width:110px; flex-shrink:0; } body.tlou-active .tlou-dash-sanctions-dur { color:var(--text-mut); width:110px; flex-shrink:0; text-align:right; } @media (max-width: 700px) { body.tlou-active .tlou-dash-podium { grid-template-columns:1fr; } } /* ========================================================================== Совместимость с классической разметкой MaterialAdmin под новым дизайном. Базовые стили (app.min.1.css) задают #header/#sidebar через !important — без !important здесь их не перебить. ========================================================================== */ /* ---- Шапка: базовый #header{background:#1d1930 !important} иначе перебивает токены темы (была видна фиолетовая полоса вместо --panel). Покрывает оба варианта шапки нового дизайна — обычную (id=header.tlou-header) и компактную сайдбар-раскладки (id=header.tlou-header-slim). ---- */ body.tlou-active #header { background: var(--panel) !important; box-shadow: none !important; } /* ---- Классические .card/.wear-ban (breadcrumb, admin-плитки, страницы серверов/банов/мутов, "Статистика игроков" — заголовок над пилюль-навигацией, и т.д.) — их фон #1d1930 (тёмный индиго) задан в базовой теме БЕЗ !important как стандартный цвет карточки классической темы, но на новом near-black фоне выглядит чужеродным фиолетовым пятном на любой странице, где встречается классическая разметка (эти страницы ещё не переверстаны под новый дизайн). Переопределяем на токен темы — работает во всех 3 темах и adaptively меняется вместе с переключением темы/акцента. ---- */ body.tlou-active .card, body.tlou-active .wear-ban { background: var(--panel) !important; box-shadow: none !important; border: 1px solid var(--border); } body.tlou-active .card .card-header h2 small { color: var(--text-mut) !important; } body.tlou-active .card .card-header.ch-alt:not([class*="bgm-"]) { background: linear-gradient(90deg, var(--accent-soft), transparent) !important; } /* ---- Раскрывающаяся панель "Информация о бане/муте" (.wear-ban на banlist/ commslist) — классическая разметка, не переверстанная под новый дизайн: синий градиент шапки (.bgm-bluegray), нативный .dropdown-menu и .modal-content (попап VAC-бана/комментариев) — три отдельных хардкод-цвета, которые оставались "старой темой" внутри уже перекрашенной .wear-ban. ---- */ body.tlou-active .wear-ban-header.bgm-bluegray { background: linear-gradient(90deg, var(--accent-soft), var(--panel) 90%) !important; border-bottom: 1px solid var(--border); } body.tlou-active .wear-ban-header .info-ban--tittle { color: var(--text) !important; } body.tlou-active .dropdown-menu { background-color: var(--panel) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } body.tlou-active .dropdown-menu li a { color: var(--text) !important; } body.tlou-active .dropdown-menu li a:hover { background: var(--raise) !important; } body.tlou-active .form-info { color: var(--text-mut) !important; } body.tlou-active .form-info-1 { color: var(--text) !important; } body.tlou-active .c-gray { color: var(--text-mut) !important; } body.tlou-active .c-bluegray { color: var(--accent) !important; } body.tlou-active .modal-content { background-color: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } body.tlou-active .modal-header, body.tlou-active .modal-footer { border-color: var(--border) !important; } /* ---- Второй базовый индиго-цвет классической темы (#151226 — поля ввода, кнопки "по умолчанию", шапки таблиц, чат). Как и .card/#header, эти правила заданы без !important в исходной классической теме, но остаются видимыми поверх нового дизайна, где ещё не переверстано (формы входа, админ-таблицы, чат поддержки). Особенно заметно на полях логина/пароля. ---- */ body.tlou-active .form-control { background-color: var(--input-bg) !important; color: var(--text) !important; } body.tlou-active .btn-default { background-color: var(--raise) !important; color: var(--text) !important; border-color: var(--border) !important; } body.tlou-active .table, body.tlou-active .table .table, body.tlou-active .table > thead > tr > th { background-color: var(--panel) !important; color: var(--text) !important; } body.tlou-active .lv-message .lv-item .ms-item, body.tlou-active #profile-main .pm-overview { background: var(--raise) !important; } /* ---- ТРЕТИЙ базовый индиго-цвет классики (#1a172d — строки списков банов/ мутов/админов/серверов, подвал, select) — самый широкий по охвату, отсюда "фиолетовые рамки" на страницах Список банов / Список мутов / Серверы. Покрывает ВСЕ варианты строк списков (banlist/commslist/adminlist/servers) и нативные