/* ══════════════════════════════════════════════ panel.css — Live Arcade Admin Panel Архитектура скролла: • html/body — overflow-x: clip (только горизонталь блокируется) • #app — flex-колонка, min-height: 100dvh • .topbar — sticky top: 0 • .main-content — flex:1, overflow-y:auto (ЕДИНСТВЕННЫЙ скролл) • #sidebar — position:fixed, изолирован от потока ══════════════════════════════════════════════ */ /* ────────────────────────────────────────── THEME TOKENS ────────────────────────────────────────── */ :root, [data-theme="arc-dark"] { --bg-root: #080810; --bg-surface: #0e0e1a; --bg-card: #13131f; --bg-hover: #1a1a2e; --bg-input: #0d0d1a; --border: rgba(255,255,255,.07); --border-accent: rgba(168,85,247,.35); --text-primary: #f0eeff; --text-secondary: #8b88b3; --text-muted: #4e4b6a; --accent: #a855f7; --accent-glow: rgba(168,85,247,.45); --accent-rgb: 168,85,247; --accent-2: #22d3ee; --accent-3: #f472b6; --green: #34d399; --red: #f87171; --yellow: #fbbf24; --danger: #dc2626; --warning: #d97706; --sidebar-w: 16.25rem; --topbar-h: 3.75rem; --radius: .75rem; --radius-sm: .4375rem; --shadow: 0 .25rem 1.5rem rgba(0,0,0,.55); --font-body: 'Sora', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Aliases */ --bg: var(--bg-root); --bg-2: var(--bg-surface); --card: var(--bg-card); --card-bg: var(--bg-card); --hover: var(--bg-hover); --text: var(--text-primary); --font: var(--font-body); } [data-theme="cyber"] { --bg-root:#00000f; --bg-surface:#050512; --bg-card:#080820; --bg-hover:#0f0f2e; --bg-input:#040412; --border:rgba(0,255,200,.1); --border-accent:rgba(0,255,200,.4); --text-primary:#e0fff8; --text-secondary:#4ae8c8; --text-muted:#1a5a50; --accent:#00ffc8; --accent-glow:rgba(0,255,200,.5); --accent-rgb:0,255,200; --accent-2:#ff00aa; --accent-3:#ffe600; --danger:#dc2626; --warning:#d97706; --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body); } [data-theme="nord"] { --bg-root:#1a1d27; --bg-surface:#1e2130; --bg-card:#252840; --bg-hover:#2e3250; --bg-input:#191c2a; --border:rgba(255,255,255,.08); --border-accent:rgba(129,162,190,.4); --text-primary:#eceff4; --text-secondary:#88c0d0; --text-muted:#4c566a; --accent:#88c0d0; --accent-glow:rgba(136,192,208,.4); --accent-rgb:136,192,208; --accent-2:#bf616a; --accent-3:#a3be8c; --green:#a3be8c; --red:#bf616a; --yellow:#ebcb8b; --danger:#dc2626; --warning:#d97706; --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body); } [data-theme="ember"] { --bg-root:#100806; --bg-surface:#160d0a; --bg-card:#1c110d; --bg-hover:#251710; --bg-input:#110a07; --border:rgba(255,180,100,.07); --border-accent:rgba(251,113,33,.4); --text-primary:#fff4ee; --text-secondary:#c98060; --text-muted:#5a3020; --accent:#fb7121; --accent-glow:rgba(251,113,33,.45); --accent-rgb:251,113,33; --accent-2:#f472b6; --accent-3:#fbbf24; --danger:#dc2626; --warning:#d97706; --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body); } [data-theme="light"] { --bg-root:#f0f2f5; --bg-surface:#e8eaed; --bg-card:#fff; --bg-hover:#f1f5f9; --bg-input:#f8fafc; --border:#dee2e8; --border-accent:rgba(37,99,235,.35); --text-primary:#1a1d23; --text-secondary:#4b5563; --text-muted:#6b7280; --accent:#2563eb; --accent-glow:rgba(37,99,235,.25); --accent-rgb:37,99,235; --accent-2:#0891b2; --accent-3:#db2777; --green:#16a34a; --red:#ef4444; --yellow:#d97706; --danger:#dc2626; --warning:#d97706; --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body); } [data-theme="light"] .card { box-shadow:0 .0625rem .25rem rgba(0,0,0,.06),0 .25rem 1rem rgba(0,0,0,.04); } [data-theme="light"] .stat-card { box-shadow:0 .125rem .5rem rgba(0,0,0,.07); } [data-theme="light"] .topbar { background:#fff; } [data-theme="light"] .modal { background:#fff; } [data-theme="light"] .main-content::before { background-image:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px); } [data-theme="cosmic"] { --bg-root: #020208; --bg-surface: #060614; --bg-card: #0a0a1e; --bg-hover: #12123a; --bg-input: #050510; --border: rgba(120,80,255,.1); --border-accent: rgba(160,120,255,.35); --text-primary: #ece4ff; --text-secondary: #9888cc; --text-muted: #483868; --accent: #9060ff; --accent-glow: rgba(144,96,255,.5); --accent-rgb: 144,96,255; --accent-2: #00d4ff; --accent-3: #ff40a0; --green: #30e090; --red: #ff6060; --yellow: #ffc040; --danger: #ff3030; --warning: #e09020; --sidebar-w: 16.25rem; --topbar-h: 3.75rem; --radius: .75rem; --radius-sm: .4375rem; --shadow: 0 .25rem 2rem rgba(100,60,255,.25); --font-body: 'Sora', sans-serif; --font-mono: 'JetBrains Mono', monospace; --bg: var(--bg-root); --bg-2: var(--bg-surface); --card: var(--bg-card); --card-bg: var(--bg-card); --hover: var(--bg-hover); --text: var(--text-primary); --font: var(--font-body); } /* ── Stars (dense field) ── */ [data-theme="cosmic"] .main-content::before { background-image: radial-gradient(1px 1px at 5% 8%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 12% 22%, rgba(200,180,255,.5), transparent), radial-gradient(1.5px 1.5px at 18% 5%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 25% 35%, rgba(180,160,255,.4), transparent), radial-gradient(1px 1px at 32% 15%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 38% 42%, rgba(200,220,255,.5), transparent), radial-gradient(1px 1px at 45% 8%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 52% 28%, rgba(220,200,255,.4), transparent), radial-gradient(1.5px 1.5px at 58% 50%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 65% 12%, rgba(180,200,255,.5), transparent), radial-gradient(1px 1px at 72% 38%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 78% 55%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 92% 45%, rgba(220,200,255,.4), transparent), radial-gradient(1.5px 1.5px at 97% 8%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 8% 55%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 15% 72%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 22% 62%, rgba(180,200,255,.4), transparent), radial-gradient(1px 1px at 28% 85%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 35% 78%, rgba(220,200,255,.6), transparent), radial-gradient(1.5px 1.5px at 42% 68%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 48% 92%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 55% 75%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 62% 88%, rgba(180,200,255,.6), transparent), radial-gradient(1px 1px at 68% 65%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 75% 82%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 82% 72%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 88% 90%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 95% 68%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 3% 95%, rgba(180,200,255,.6), transparent), radial-gradient(1px 1px at 10% 42%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 20% 52%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 30% 25%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 40% 58%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 50% 35%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 60% 5%, rgba(180,200,255,.6), transparent), radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 80% 58%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 90% 32%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 98% 55%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 7% 30%, rgba(255,255,255,.3), transparent), radial-gradient(1.5px 1.5px at 17% 88%, rgba(180,200,255,.5), transparent), radial-gradient(1px 1px at 27% 48%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 37% 95%, rgba(220,200,255,.4), transparent), radial-gradient(1.5px 1.5px at 47% 18%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 57% 62%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 67% 42%, rgba(255,255,255,.4), transparent), radial-gradient(1.5px 1.5px at 77% 95%, rgba(180,200,255,.6), transparent), radial-gradient(1px 1px at 87% 8%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 93% 78%, rgba(220,200,255,.4), transparent), radial-gradient(1.5px 1.5px at 43% 32%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 53% 82%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 63% 95%, rgba(255,255,255,.4), transparent), radial-gradient(1.5px 1.5px at 73% 5%, rgba(180,200,255,.7), transparent), radial-gradient(1px 1px at 83% 45%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 96% 25%, rgba(220,200,255,.4), transparent), radial-gradient(1.5px 1.5px at 13% 65%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 23% 92%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 33% 5%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 43% 78%, rgba(180,200,255,.4), transparent), radial-gradient(1px 1px at 53% 48%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 63% 25%, rgba(220,200,255,.6), transparent), radial-gradient(1.5px 1.5px at 73% 72%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 83% 15%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 93% 52%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 2% 18%, rgba(180,200,255,.4), transparent), radial-gradient(1px 1px at 16% 98%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 26% 38%, rgba(220,200,255,.6), transparent), radial-gradient(1.5px 1.5px at 36% 62%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 46% 5%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 56% 92%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 66% 55%, rgba(180,200,255,.4), transparent), radial-gradient(1px 1px at 76% 32%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 86% 85%, rgba(220,200,255,.6), transparent), radial-gradient(1.5px 1.5px at 96% 42%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 11% 78%, rgba(200,180,255,.5), transparent), radial-gradient(1px 1px at 21% 12%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 31% 45%, rgba(180,200,255,.7), transparent), radial-gradient(1px 1px at 41% 88%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 51% 22%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 61% 78%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 71% 5%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 81% 62%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 91% 15%, rgba(180,200,255,.7), transparent), radial-gradient(1px 1px at 99% 88%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 14% 52%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 24% 28%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 34% 72%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 44% 42%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 54% 5%, rgba(180,200,255,.7), transparent), radial-gradient(1px 1px at 64% 35%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 74% 88%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 84% 52%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 94% 95%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 4% 42%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 19% 72%, rgba(180,200,255,.6), transparent), radial-gradient(1px 1px at 29% 18%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 39% 55%, rgba(220,200,255,.5), transparent), radial-gradient(1.5px 1.5px at 49% 82%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 59% 45%, rgba(200,180,255,.4), transparent), radial-gradient(1px 1px at 69% 8%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 79% 62%, rgba(180,200,255,.6), transparent), radial-gradient(1px 1px at 89% 25%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 99% 72%, rgba(220,200,255,.5), transparent); background-size: 100% 100%; animation: stars-twinkle 4s ease-in-out infinite alternate; transform: translate(var(--star-x, 0px), var(--star-y, 0px)); transition: transform 0.15s ease-out; will-change: transform; } @keyframes stars-twinkle { 0% { opacity: .65; } 50% { opacity: 1; } 100% { opacity: .6; } } /* ── Constellations ── */ [data-theme="cosmic"] .app-container::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(90deg, rgba(144,96,255,.03) 1px, transparent 1px), linear-gradient(0deg, rgba(144,96,255,.03) 1px, transparent 1px); background-size: 120px 80px; background-position: 10% 20%; opacity: .3; z-index: 0; pointer-events: none; animation: constellation-drift 40s linear infinite; } @keyframes constellation-drift { 0% { background-position: 10% 20%; } 50% { background-position: 12% 22%; } 100% { background-position: 10% 20%; } } /* ── Comets: falling at an angle, head leading, trail fading behind ── */ [data-theme="cosmic"] .app-container::after { content: ''; position: fixed; top: -150px; left: 75%; width: 2px; height: 120px; background: linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(200,220,255,.7) 6%, rgba(144,96,255,.3) 20%, rgba(144,96,255,.06) 45%, transparent 100% ); z-index: 0; pointer-events: none; border-radius: 1px; filter: blur(0.4px); box-shadow: 0 0 5px rgba(255,255,255,.5), 0 0 10px rgba(144,96,255,.2); animation: comet-fall-1 14s ease-in infinite; animation-delay: 2s; } @keyframes comet-fall-1 { 0% { transform: translate(0, 0) rotate(30deg); opacity: 0; } 1% { opacity: 1; } 2% { opacity: 1; } 22% { transform: translate(-120px, 120vh) rotate(30deg); opacity: 0; } 100% { transform: translate(-120px, 120vh) rotate(30deg); opacity: 0; } } /* Second comet - different angle, color */ [data-theme="cosmic"] #sidebar::before { content: ''; position: fixed; top: -120px; right: 35%; width: 1.5px; height: 100px; background: linear-gradient(0deg, rgba(0,212,255,.9) 0%, rgba(144,96,255,.45) 8%, rgba(144,96,255,.08) 30%, transparent 100% ); z-index: 0; pointer-events: none; border-radius: 1px; filter: blur(0.4px); box-shadow: 0 0 4px rgba(0,212,255,.4), 0 0 8px rgba(144,96,255,.15); animation: comet-fall-2 18s ease-in infinite; animation-delay: 8s; } @keyframes comet-fall-2 { 0% { transform: translate(0, 0) rotate(-25deg); opacity: 0; } 1% { opacity: 1; } 1.5% { opacity: 1; } 18% { transform: translate(100px, 120vh) rotate(-25deg); opacity: 0; } 100% { transform: translate(100px, 120vh) rotate(-25deg); opacity: 0; } } /* Third comet - rare, pink, steeper angle */ [data-theme="cosmic"] .main-content::after { content: ''; position: fixed; top: -100px; left: 20%; width: 1.5px; height: 90px; background: linear-gradient(0deg, rgba(255,64,160,.85) 0%, rgba(144,96,255,.35) 10%, rgba(144,96,255,.05) 35%, transparent 100% ); z-index: 0; pointer-events: none; border-radius: 1px; filter: blur(0.4px); box-shadow: 0 0 3px rgba(255,64,160,.3), 0 0 6px rgba(144,96,255,.12); animation: comet-fall-3 24s ease-in infinite; animation-delay: 14s; } @keyframes comet-fall-3 { 0% { transform: translate(0, 0) rotate(40deg); opacity: 0; } 0.5% { opacity: 1; } 1% { opacity: 1; } 16% { transform: translate(-150px, 120vh) rotate(40deg); opacity: 0; } 100% { transform: translate(-150px, 120vh) rotate(40deg); opacity: 0; } } [data-theme="cosmic"] .card { border-color: rgba(144,96,255,.12); box-shadow: 0 0 25px rgba(100,60,255,.06), inset 0 0 25px rgba(100,60,255,.02); background: linear-gradient(135deg, rgba(10,10,30,.9), rgba(6,6,18,.95)); backdrop-filter: blur(4px); } [data-theme="cosmic"] .stat-card { border-color: rgba(144,96,255,.18); box-shadow: 0 0 20px rgba(100,60,255,.08); background: linear-gradient(145deg, rgba(12,12,35,.95), rgba(8,8,22,.9)); backdrop-filter: blur(4px); } [data-theme="cosmic"] .topbar { background: linear-gradient(180deg, rgba(6,6,20,.92), rgba(4,4,14,.88)); backdrop-filter: blur(16px); border-bottom-color: rgba(144,96,255,.12); box-shadow: 0 1px 30px rgba(100,60,255,.08); } [data-theme="cosmic"] #sidebar { background: linear-gradient(180deg, rgba(4,4,16,.98), rgba(2,2,8,.99)); border-right-color: rgba(144,96,255,.1); box-shadow: 2px 0 40px rgba(100,60,255,.06); } [data-theme="cosmic"] .nav-item { border-radius: 8px; transition: all .25s; position: relative; overflow: hidden; } [data-theme="cosmic"] .nav-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(144,96,255,.05), transparent); transform: translateX(-100%); transition: transform .5s; } [data-theme="cosmic"] .nav-item:hover::before { transform: translateX(100%); } [data-theme="cosmic"] .nav-item:hover { background: rgba(144,96,255,.08); box-shadow: 0 0 20px rgba(144,96,255,.06); } [data-theme="cosmic"] .nav-item.active { background: linear-gradient(135deg, rgba(144,96,255,.12), rgba(0,212,255,.06)); border-left-color: #9060ff; box-shadow: 0 0 25px rgba(144,96,255,.1); } [data-theme="cosmic"] .btn-primary { background: linear-gradient(135deg, #9060ff, #6030e0); box-shadow: 0 0 25px rgba(144,96,255,.25); position: relative; overflow: hidden; } [data-theme="cosmic"] .btn-primary::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.05), transparent, rgba(255,255,255,.03), transparent); animation: btn-spin 4s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } [data-theme="cosmic"] .btn-primary:hover { box-shadow: 0 0 35px rgba(144,96,255,.45); transform: translateY(-1px); } [data-theme="cosmic"] .modal { border-color: rgba(144,96,255,.18); box-shadow: 0 0 80px rgba(100,60,255,.12); background: linear-gradient(160deg, rgba(10,10,30,.97), rgba(4,4,12,.99)); backdrop-filter: blur(12px); } [data-theme="cosmic"] .badge { border-color: rgba(144,96,255,.12); } [data-theme="cosmic"] .server-status { background: rgba(48,224,144,.05); border-color: rgba(48,224,144,.12); } [data-theme="cosmic"] .theme-dot { border-color: rgba(144,96,255,.25); } [data-theme="cosmic"] .theme-dot:hover { border-color: rgba(144,96,255,.5); box-shadow: 0 0 12px rgba(144,96,255,.3); } [data-theme="cosmic"] .theme-opt { border-color: rgba(144,96,255,.15); background: rgba(10,10,30,.6); } [data-theme="cosmic"] .theme-opt:hover { border-color: rgba(144,96,255,.35); box-shadow: 0 0 15px rgba(144,96,255,.1); } [data-theme="cosmic"] .table-wrap table tbody tr { background: rgba(10,10,30,.5); } [data-theme="cosmic"] .table-wrap table tbody tr:hover { background: rgba(144,96,255,.04); } [data-theme="cosmic"] .auth-bg::before { background: radial-gradient(circle, rgba(144,96,255,.15) 0%, transparent 70%); animation: auth-pulse 8s ease-in-out infinite alternate; } @keyframes auth-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.1); } } [data-theme="cosmic"] .auth-card { background: linear-gradient(160deg, rgba(10,10,30,.95), rgba(4,4,12,.98)); border-color: rgba(144,96,255,.15); box-shadow: 0 0 60px rgba(100,60,255,.1); backdrop-filter: blur(12px); } [data-theme="cosmic"] .divider { border-color: rgba(144,96,255,.08); } [data-theme="cosmic"] .form-control, [data-theme="cosmic"] .form-control:focus { border-color: rgba(144,96,255,.15); background: rgba(8,8,24,.8); } [data-theme="cosmic"] .form-control:focus { box-shadow: 0 0 15px rgba(144,96,255,.1); border-color: rgba(144,96,255,.3); } [data-theme="cosmic"] .search-input { border-color: rgba(144,96,255,.1); background: rgba(8,8,24,.6); } [data-theme="cosmic"] .search-input:focus { border-color: rgba(144,96,255,.3); box-shadow: 0 0 15px rgba(144,96,255,.08); } [data-theme="cosmic"] .filter-select { border-color: rgba(144,96,255,.1); background: rgba(8,8,24,.6); } [data-theme="cosmic"] .chart-wrap canvas { filter: drop-shadow(0 0 8px rgba(144,96,255,.1)); } [data-theme="cosmic"] .pagination { border-color: rgba(144,96,255,.08); } [data-theme="cosmic"] .page-btn:hover { background: rgba(144,96,255,.1); border-color: rgba(144,96,255,.2); } [data-theme="cosmic"] .db-option { border-color: rgba(144,96,255,.1); background: rgba(8,8,24,.5); } [data-theme="cosmic"] .db-option:hover { border-color: rgba(144,96,255,.25); } [data-theme="cosmic"] .db-option.selected { border-color: rgba(144,96,255,.4); background: rgba(144,96,255,.06); box-shadow: 0 0 20px rgba(144,96,255,.08); } [data-theme="cosmic"] .conn-method-opt { border-color: rgba(144,96,255,.1); background: rgba(8,8,24,.5); } [data-theme="cosmic"] .conn-method-opt:hover { border-color: rgba(144,96,255,.25); } [data-theme="cosmic"] .conn-method-opt.selected { border-color: rgba(144,96,255,.4); box-shadow: 0 0 20px rgba(144,96,255,.08); } [data-theme="cosmic"] .admin-dropdown { background: linear-gradient(160deg, rgba(8,8,24,.97), rgba(4,4,12,.99)); border-color: rgba(144,96,255,.15); box-shadow: 0 0 40px rgba(100,60,255,.1); backdrop-filter: blur(12px); } [data-theme="cosmic"] .admin-dd-item:hover { background: rgba(144,96,255,.06); } [data-theme="cosmic"] .admin-dd-divider { border-color: rgba(144,96,255,.08); } [data-theme="cosmic"] .admin-dd-section-label { color: rgba(144,96,255,.5); } [data-theme="cosmic"] .toggle-track { background: rgba(144,96,255,.15); } [data-theme="cosmic"] .toggle-track.active { background: linear-gradient(135deg, #9060ff, #6030e0); box-shadow: 0 0 12px rgba(144,96,255,.3); } [data-theme="cosmic"] .toast-success { background: linear-gradient(135deg, rgba(48,224,144,.15), rgba(48,224,144,.08)); border-color: rgba(48,224,144,.25); } [data-theme="cosmic"] .toast-error { background: linear-gradient(135deg, rgba(255,48,48,.15), rgba(255,48,48,.08)); border-color: rgba(255,48,48,.25); } [data-theme="cosmic"] .toast-warn { background: linear-gradient(135deg, rgba(224,144,32,.15), rgba(224,144,32,.08)); border-color: rgba(224,144,32,.25); } [data-theme="cosmic"] .mob-search-inner { background: rgba(8,8,24,.8); border-color: rgba(144,96,255,.12); } [data-theme="cosmic"] .bnav-item { color: rgba(144,96,255,.5); } [data-theme="cosmic"] .bnav-item.active { color: #9060ff; text-shadow: 0 0 10px rgba(144,96,255,.3); } [data-theme="cosmic"] .activity-item { border-color: rgba(144,96,255,.06); } [data-theme="cosmic"] .activity-icon-wrap { background: rgba(144,96,255,.08) !important; color: #9060ff !important; } [data-theme="cosmic"] .modcard { border-color: rgba(144,96,255,.12); background: linear-gradient(135deg, rgba(10,10,30,.9), rgba(6,6,18,.95)); } [data-theme="cosmic"] .streamcard { border-color: rgba(144,96,255,.12); background: linear-gradient(135deg, rgba(10,10,30,.9), rgba(6,6,18,.95)); } [data-theme="cosmic"] .qmod-fab { background: linear-gradient(135deg, #9060ff, #6030e0); box-shadow: 0 0 30px rgba(144,96,255,.3); } [data-theme="cosmic"] .mobile-card { background: linear-gradient(135deg, rgba(10,10,30,.95), rgba(6,6,18,.98)); border-color: rgba(144,96,255,.12); } [data-theme="cosmic"] .mobile-card-header { background: linear-gradient(135deg, rgba(144,96,255,.06), transparent); border-bottom-color: rgba(144,96,255,.1); } [data-theme="cosmic"] .mobile-card-row { border-bottom-color: rgba(144,96,255,.06); } [data-theme="cosmic"] .mobile-card-footer { background: rgba(6,6,18,.8); border-top-color: rgba(144,96,255,.08); } /* ────────────────────────────────────────── RESET & BASE ────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { font-size: 16px; /* Админ-панель: жест «потянуть вниз» (браузерный Refreshing) отключён, чтобы не мешал прокрутке */ overscroll-behavior-y: none; /* Только горизонтальный скролл запрещён на уровне документа. clip не создаёт stacking context и не ломает position:fixed */ overflow-x: clip; } body { overscroll-behavior-y: none; font-family: var(--font-body); background: var(--bg-root); color: var(--text-primary); display: flex; min-height: 100dvh; overflow-x: auto; overflow-y: auto; } ::-webkit-scrollbar { width:.3125rem; height:.3125rem; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--text-muted); border-radius:6.25rem; } /* ────────────────────────────────────────── AUTH SCREEN ────────────────────────────────────────── */ #auth-screen { position:fixed; inset:0; z-index:1000; background:var(--bg-root); display:flex; align-items:center; justify-content:center; overflow:hidden; } .auth-bg { position:absolute; inset:0; overflow:hidden; } .auth-bg::before { content:''; position:absolute; width:min(37.5rem,80vw); height:min(37.5rem,80vw); background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%); top:-6.25rem; left:-6.25rem; animation:pulse-bg 6s ease-in-out infinite alternate; } .auth-bg::after { content:''; position:absolute; width:min(25rem,60vw); height:min(25rem,60vw); background:radial-gradient(circle,rgba(34,211,238,.2) 0%,transparent 70%); bottom:-3.125rem; right:-3.125rem; animation:pulse-bg 8s ease-in-out infinite alternate-reverse; } @keyframes pulse-bg { from { transform:scale(1) translate(0,0); } to { transform:scale(1.3) translate(2.5rem,1.25rem); } } /* Floating orbs */ #auth-screen::before,#auth-screen::after { content:''; position:absolute; border-radius:50%; filter:blur(5rem); opacity:.18; animation:float-orb 12s ease-in-out infinite; pointer-events:none; z-index:0; } #auth-screen::before { width:31.25rem; height:31.25rem; background:radial-gradient(circle,var(--accent),transparent); top:-6.25rem; left:-6.25rem; } #auth-screen::after { width:25rem; height:25rem; background:radial-gradient(circle,var(--accent-3),transparent); bottom:-3.125rem; right:-6.25rem; animation-delay:-6s; animation-direction:reverse; } @keyframes float-orb { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(2.5rem,-1.875rem) scale(1.05); } 66% { transform:translate(-1.25rem,1.25rem) scale(.95); } } /* Карточка авторизации Источник проблемы: width:420px — теперь clamp */ .auth-card { position:relative; z-index:1; background:var(--bg-card); border:1px solid var(--border-accent); border-radius:1.25rem; padding:clamp(1.5rem,5vw,3rem) clamp(1.25rem,5vw,2.75rem); width:clamp(18rem,90vw,26.25rem); box-shadow:0 0 5rem var(--accent-glow),var(--shadow); animation:slide-up .5s cubic-bezier(.25,.8,.25,1); } @keyframes slide-up { from{opacity:0;transform:translateY(1.875rem)} to{opacity:1;transform:none} } .auth-logo { text-align:center; margin-bottom:2rem; } .auth-logo .brand { font-size:clamp(1.2rem,4vw,1.6rem); font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.03em; } .auth-logo .sub { font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); margin-top:.25rem; letter-spacing:.125em; text-transform:uppercase; } /* ────────────────────────────────────────── FORM ELEMENTS ────────────────────────────────────────── */ .field { margin-bottom:1.125rem; } .field label { display:block; font-size:.75rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4375rem; text-transform:uppercase; letter-spacing:.05em; } .field input,.field textarea,.field select { width:100%; padding:.6875rem .875rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-body); font-size:.9375rem; transition:border .2s,box-shadow .2s; outline:none; max-width:100%; } .field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent); box-shadow:0 0 0 .1875rem var(--accent-glow); } .field select option { background:var(--bg-card); } .field textarea { resize:vertical; min-height:5rem; } .field-row { display:grid; gap:.875rem; } .field-row.cols-2 { grid-template-columns:1fr 1fr; } .field-row.cols-3 { grid-template-columns:1fr 1fr 1fr; } /* ────────────────────────────────────────── BUTTONS ────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:.4375rem; padding:.5625rem 1.125rem; border:none; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.875rem; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none; white-space:nowrap; max-width:100%; } .btn-primary { background:var(--accent); color:#fff; box-shadow:0 .25rem 1.125rem var(--accent-glow); } .btn-primary:hover { filter:brightness(1.15); transform:translateY(-1px); } .btn-secondary { background:var(--bg-hover); color:var(--text-primary); border:1px solid var(--border); } .btn-secondary:hover { border-color:var(--accent); } .btn-danger { background:rgba(248,113,113,.15); color:var(--red); border:1px solid rgba(248,113,113,.3); } .btn-danger:hover { background:rgba(248,113,113,.25); } .btn-success { background:rgba(52,211,153,.15); color:var(--green); border:1px solid rgba(52,211,153,.3); } .btn-success:hover { background:rgba(52,211,153,.25); } .btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid transparent; } .btn-ghost:hover { color:var(--text-primary); background:var(--bg-hover); border-color:var(--border); } .btn-full { width:100%; justify-content:center; padding:.75rem; } .btn-sm { padding:.375rem .75rem; font-size:.8rem; } .btn-icon { padding:.5rem; width:2.125rem; height:2.125rem; justify-content:center; } .btn i+* { margin-left:.25rem; } .btn i.fa-solid,.btn i.fa-regular,.btn i.fa-brands { pointer-events:none; } /* ────────────────────────────────────────── SIDEBAR ────────────────────────────────────────── */ #sidebar { width:var(--sidebar-w); height:100dvh; background:var(--bg-surface); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; left:0; top:0; z-index:100; overflow:hidden; transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s; } .sidebar-header { padding:1.5rem 1.25rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; } .sidebar-brand { font-size:1.1rem; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .sidebar-tagline { font-size:.6875rem; font-family:var(--font-mono); color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-top:.1875rem; } .sidebar-app-badge { display:inline-flex; align-items:center; gap:.3125rem; margin-top:.5rem; padding:.1875rem .5rem; border-radius:6.25rem; font-size:.625rem; font-weight:700; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.0625em; border:1px solid var(--border-accent); color:var(--accent); background:rgba(168,85,247,.08); transition:all .3s; } .sidebar-app-badge.classic { color:var(--accent-2); background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.35); } .sidebar-app-badge .app-dot { width:.375rem; height:.375rem; border-radius:50%; background:var(--accent); } .sidebar-app-badge.classic .app-dot { background:var(--accent-2); } .sidebar-nav { flex:1; padding:.875rem .625rem; overflow-y:auto; overflow-x:hidden; } .nav-section-label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.125em; color:var(--text-muted); padding:.75rem .625rem .375rem; } .nav-item { display:flex; align-items:center; gap:.6875rem; padding:.625rem .75rem; border-radius:var(--radius-sm); cursor:pointer; transition:all .18s; color:var(--text-secondary); font-size:.875rem; font-weight:500; position:relative; } .nav-item:hover { background:var(--bg-hover); color:var(--text-primary); } .nav-item.active { background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(34,211,238,.08)); color:var(--accent); border:1px solid var(--border-accent); } .nav-item .icon { width:1.125rem; text-align:center; flex-shrink:0; } .nav-badge { margin-left:auto; font-size:.6875rem; font-family:var(--font-mono); background:var(--accent); color:#fff; padding:.125rem .4375rem; border-radius:6.25rem; min-width:1.25rem; text-align:center; } .nav-badge.green { background:var(--green); } .nav-badge.red { background:var(--red); } .nav-badge.yellow { background:var(--yellow); color:#000; } .sidebar-footer { padding:.875rem .625rem; border-top:1px solid var(--border); flex-shrink:0; } .nav-item:hover::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:.1875rem; height:60%; background:var(--accent); border-radius:0 .1875rem .1875rem 0; animation:slide-in-bar .15s ease; } @keyframes slide-in-bar { from{height:0} to{height:60%} } /* ────────────────────────────────────────── LAYOUT — ключевая архитектура ────────────────────────────────────────── */ #app { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100dvh; min-width:0; /* не схлопываться в flex */ } .topbar { height:var(--topbar-h); background:var(--bg-surface); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 1.75rem; position:sticky; top:0; z-index:50; width:100%; flex-shrink:0; } .topbar-left { display:flex; align-items:center; gap:.875rem; min-width:0; overflow:hidden; } .page-title { font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .page-breadcrumb { font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap; } .topbar-right { display:flex; align-items:center; gap:.625rem; flex-shrink:0; } .server-status { display:flex; align-items:center; gap:.375rem; font-size:.75rem; font-family:var(--font-mono); color:var(--green); background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2); padding:.3125rem .625rem; border-radius:6.25rem; white-space:nowrap; } .server-status .dot { width:.4375rem; height:.4375rem; border-radius:50%; background:var(--green); flex-shrink:0; animation:blink 2s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } .theme-picker { display:flex; gap:.25rem; } .theme-dot { width:1.125rem; height:1.125rem; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .2s,border .2s; flex-shrink:0; } .theme-dot:hover { transform:scale(1.2); } .theme-dot.active { border-color:var(--text-primary); } /* ── ГЛАВНЫЙ КОНТЕНТ — единственный вертикальный скролл ── */ .main-content { flex:1; padding:1.75rem; overflow-y:auto; overflow-x: visible; /* Позволяет table-wrap скроллить горизонтально */ position:relative; min-width:0; } .main-content::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:3rem 3rem; pointer-events:none; z-index:0; animation:grid-drift 25s linear infinite; } @keyframes grid-drift { from{background-position:0 0} to{background-position:3rem 3rem} } .page { display:none; } .page.active { display:block; animation:fade-in .25s ease; } @keyframes fade-in { from{opacity:0;transform:translateY(.5rem)} to{opacity:1;transform:none} } /* ────────────────────────────────────────── SECTION / CARD ────────────────────────────────────────── */ .section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; gap:.75rem; flex-wrap:wrap; } .section-title { font-size:1rem; font-weight:700; } .section-sub { font-size:.75rem; color:var(--text-muted); margin-top:.125rem; } .card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.375rem; transition:border .2s; position:relative; min-width:0; overflow:hidden; } .card:hover { border-color:rgba(168,85,247,.2); } .card-title { font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.0625em; color:var(--text-secondary); margin-bottom:.875rem; } .page.active .card { animation:card-in .35s ease-out both; } .page.active .card:nth-child(2) { animation-delay:60ms; } .page.active .card:nth-child(3) { animation-delay:120ms; } .page.active .card:nth-child(4) { animation-delay:180ms; } @keyframes card-in { from{opacity:0;transform:translateY(1rem) scale(.98)} to{opacity:1;transform:none} } /* ────────────────────────────────────────── STATS GRID Было: minmax(220px,1fr) — вылезало на узких экранах Стало: min(13.75rem,100%) — никогда не шире контейнера ────────────────────────────────────────── */ .stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(13.75rem,100%),1fr)); gap:1.125rem; margin-bottom:1.5rem; } .stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.375rem; position:relative; overflow:hidden; transition:transform .2s,border .2s; min-width:0; } .stat-card:hover { transform:translateY(-2px); border-color:var(--border-accent); } .stat-label { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.0625em; color:var(--text-muted); margin-bottom:.5rem; } .stat-value { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; font-family:var(--font-mono); line-height:1; } .stat-change { font-size:.75rem; margin-top:.375rem; font-family:var(--font-mono); } .stat-change.up { color:var(--green); } .stat-change.down { color:var(--red); } .stat-icon { position:absolute; right:1.125rem; top:50%; transform:translateY(-50%); font-size:1.875rem; opacity:.15; pointer-events:none; } .stat-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.625rem; } .stat-icon-wrap { width:2.375rem; height:2.375rem; border-radius:.625rem; background:rgba(34,211,238,.12); display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:.9375rem; flex-shrink:0; } .stat-icon-wrap.green { background:rgba(34,211,127,.12); color:var(--green); } .stat-icon-wrap.red { background:rgba(239,68,68,.12); color:var(--danger); } .stat-icon-wrap.yellow { background:rgba(251,189,35,.12); color:#fbbd23; } .stat-icon-wrap.blue { background:rgba(96,165,250,.12); color:#60a5fa; } .stat-icon-wrap.purple { background:rgba(168,85,247,.12); color:#a855f7; } .stat-sub { font-size:.72rem; color:var(--text-muted); margin-top:.25rem; } .stat-card-anim { animation:stat-pop .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes stat-pop { from{opacity:0;transform:scale(.85) translateY(.625rem)} to{opacity:1;transform:none} } /* ────────────────────────────────────────── CHARTS GRID ────────────────────────────────────────── */ .charts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:1.125rem; margin-bottom:1.125rem; } .chart-wrap { height:clamp(10rem,25vw,13.75rem); position:relative; width:100%; min-width:0; } /* ────────────────────────────────────────── TABLE table-wrap скроллит таблицу — это нормально ────────────────────────────────────────── */ .table-toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; } .search-input { flex:1; min-width:10rem; width:100%; padding:.5rem .75rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-body); font-size:.8125rem; outline:none; transition:border .2s,box-shadow .2s; } .search-input:focus { border-color:var(--accent); box-shadow:0 0 0 .1875rem var(--accent-glow); } .filter-select { padding:.5rem .75rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-body); font-size:.8125rem; cursor:pointer; outline:none; max-width:100%; } /* удалено — единственное определение table-wrap ниже */ table { width:100%; border-collapse:collapse; table-layout:fixed; } thead th { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); padding:.5rem .625rem; background:var(--bg-surface); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; position:sticky; top:0; z-index:1; } tbody tr { border-bottom:1px solid var(--border); transition:background .15s; } tbody tr:hover { background:var(--bg-hover); } tbody tr:last-child { border-bottom:none; } td { padding:.5rem .625rem; font-size:.8125rem; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; } td > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } td .user-info > * { white-space:normal; } td .user-info .name { white-space:nowrap; } td .actions { white-space:normal; overflow:visible; } /* ────────────────────────────────────────── BADGES ────────────────────────────────────────── */ .badge { display:inline-flex; align-items:center; gap:.25rem; padding:.1875rem .5625rem; border-radius:6.25rem; font-size:.6875rem; font-weight:700; white-space:nowrap; } .badge-green { background:rgba(52,211,153,.15); color:var(--green); border:1px solid rgba(52,211,153,.25); } .badge-red { background:rgba(248,113,113,.15); color:var(--red); border:1px solid rgba(248,113,113,.25); } .badge-purple { background:rgba(168,85,247,.15); color:var(--accent); border:1px solid rgba(168,85,247,.25); } .badge-yellow { background:rgba(251,191,36,.15); color:var(--yellow); border:1px solid rgba(251,191,36,.25); } .badge-cyan { background:rgba(34,211,238,.15); color:var(--accent-2); border:1px solid rgba(34,211,238,.25); } .badge-orange { background:rgba(251,113,33,.15); color:#fb7221; border:1px solid rgba(251,113,33,.25); } .badge-gray { background:rgba(139,136,179,.15); color:var(--text-secondary); border:1px solid rgba(139,136,179,.25); } .badge-blue { background:rgba(33,102,251,.15); color:#216dfb; border:1px solid rgba(33,91,251,.25); } /* ────────────────────────────────────────── CATALOG THEMES — tabs grid ────────────────────────────────────────── */ .catalog-themes-wrap { overflow-x: visible; } .catalog-themes-table .catalog-tabs-row td { padding: 0 1rem 1rem 1rem; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, .12); } .catalog-themes-table .catalog-tabs-row:last-child td { border-bottom: none; } .catalog-tabs-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .5rem; } .catalog-tabs-grid { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .catalog-tab-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; border: 1px dashed rgba(139, 136, 179, .35); background: rgba(139, 136, 179, .08); color: var(--text-secondary); } .catalog-tab-chip:hover { border-color: rgba(168, 85, 247, .45); color: var(--text-primary); background: rgba(168, 85, 247, .1); } .catalog-tab-chip--on { border: 1px solid rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .12); color: var(--green); border-style: solid; } .catalog-tab-chip--on:hover { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .35); color: var(--red); } .catalog-tab-chip--server { font-family: inherit; } .catalog-tab-chip__tag { font-size: .7rem; opacity: .85; font-weight: 700; } .catalog-tab-chip__x { font-size: .95rem; line-height: 1; margin-left: .15rem; opacity: .7; } /* ────────────────────────────────────────── AVATAR ────────────────────────────────────────── */ .avatar { width:2.125rem; height:2.125rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#fff; flex-shrink:0; } .avatar-sm { width:1.625rem; height:1.625rem; font-size:.6875rem; } .user-info { display:flex; align-items:center; gap:.625rem; min-width:0; } .user-info .name { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .user-info .email { font-size:.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .actions { display:flex; gap:.375rem; align-items:center; flex-shrink:0; } /* ────────────────────────────────────────── PANEL ────────────────────────────────────────── */ .panel { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:var(--radius); padding:1.625rem; margin-bottom:1.5rem; } .panel-title { font-size:.9375rem; font-weight:700; margin-bottom:1.375rem; display:flex; align-items:center; gap:.5625rem; } /* ────────────────────────────────────────── IMAGE UPLOAD ────────────────────────────────────────── */ .img-upload-zone { border:2px dashed var(--border); border-radius:var(--radius-sm); padding:1.5rem; text-align:center; cursor:pointer; transition:border .2s,background .2s; position:relative; overflow:hidden; } .img-upload-zone:hover,.img-upload-zone.drag-over { border-color:var(--accent); background:rgba(168,85,247,.05); } .img-upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; } .img-upload-icon { font-size:2rem; margin-bottom:.5rem; opacity:.5; } .img-upload-text { font-size:.8125rem; color:var(--text-muted); } .img-preview { max-width:100%; max-height:11.25rem; border-radius:var(--radius-sm); object-fit:cover; display:none; margin:.625rem auto 0; } /* ────────────────────────────────────────── TOAST ────────────────────────────────────────── */ #toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.625rem; max-width:calc(100vw - 3rem); } .toast { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.8125rem 1.125rem; display:flex; align-items:center; gap:.6875rem; min-width:min(17.5rem,100%); max-width:23.75rem; box-shadow:var(--shadow); animation:toast-in .3s cubic-bezier(.25,.8,.25,1); } .toast.removing { animation:toast-out .3s forwards; } @keyframes toast-in { from{opacity:0;transform:translateX(3.125rem)} to{opacity:1;transform:none} } @keyframes toast-out { from{opacity:1;transform:none} to{opacity:0;transform:translateX(3.75rem) scale(.9)} } .toast-success { border-left:.1875rem solid var(--green); } .toast-error { border-left:.1875rem solid var(--red); } .toast-info { border-left:.1875rem solid var(--accent); } .toast-icon { font-size:1.1rem; flex-shrink:0; } .toast-text { font-size:.875rem; flex:1; } .toast-close { cursor:pointer; opacity:.5; font-size:.8rem; flex-shrink:0; } .toast-close:hover { opacity:1; } /* ────────────────────────────────────────── MODAL ────────────────────────────────────────── */ .modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; padding:1rem; } .modal-overlay.open { opacity:1; pointer-events:all; } .modal { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:1.125rem; padding:2rem; width:100%; max-width:35rem; max-height:90dvh; overflow-y:auto; transform:scale(.92); transition:transform .25s; box-shadow:0 0 5rem var(--accent-glow); } .modal.modal-lg { max-width:55rem; } .modal-overlay.open .modal { transform:scale(1); } .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.625rem; padding-bottom:1rem; border-bottom:1px solid var(--border); } .modal-title { font-size:1.1rem; font-weight:700; } .modal-scroll-body { max-height:calc(90dvh - 120px); overflow-y:auto; } .modal-footer { display:flex; gap:12px; justify-content:flex-end; padding-top:1rem; margin-top:1rem; border-top:1px solid var(--border); } /* ────────────────────────────────────────── ACTIVITY FEED ────────────────────────────────────────── */ .activity-feed { display:flex; flex-direction:column; } .activity-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border); animation:slide-in-left .3s ease both; } .activity-item:last-child { border-bottom:none; } .activity-dot { width:.5rem; height:.5rem; border-radius:50%; margin-top:.375rem; flex-shrink:0; } .activity-icon-wrap { width:1.75rem; height:1.75rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .activity-text { font-size:.875rem; line-height:1.5; min-width:0; word-break:break-word; } .activity-time { font-size:.6875rem; color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap; } @keyframes slide-in-left { from{opacity:0;transform:translateX(-.75rem)} to{opacity:1;transform:none} } /* ────────────────────────────────────────── POST PREVIEW ────────────────────────────────────────── */ .post-row td:first-child { max-width:17.5rem; } .post-title-cell { font-weight:600; font-size:.875rem; } .post-content-preview { font-size:.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:15rem; } /* ────────────────────────────────────────── PAGINATION ────────────────────────────────────────── */ .pagination { display:flex; align-items:center; justify-content:flex-end; gap:.25rem; margin-top:1rem; flex-wrap:wrap; } .page-btn { width:2rem; height:2rem; border-radius:var(--radius-sm); background:var(--bg-hover); border:1px solid var(--border); color:var(--text-secondary); font-size:.8125rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; } .page-btn:hover { border-color:var(--accent); color:var(--accent); } .page-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); } /* ────────────────────────────────────────── ANALYTICS ────────────────────────────────────────── */ .analytics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:1.125rem; } .analytics-grid.wide { grid-template-columns:1fr; } .leaderboard-row { display:flex; align-items:center; gap:.75rem; padding:.625rem 0; border-bottom:1px solid var(--border); animation:fade-up .3s ease both; min-width:0; } .leaderboard-row:last-child { border-bottom:none; } .leaderboard-rank { font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--text-muted); width:1.5rem; text-align:center; flex-shrink:0; } .leaderboard-rank.top { color:var(--yellow); } .leaderboard-name { flex:1; font-weight:600; font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .leaderboard-val { font-family:var(--font-mono); font-size:.875rem; color:var(--accent); flex-shrink:0; } @keyframes fade-up { from{opacity:0;transform:translateY(.5rem)} to{opacity:1;transform:none} } /* ────────────────────────────────────────── LOADING / EMPTY ────────────────────────────────────────── */ .loading-wrap { display:flex; align-items:center; justify-content:center; padding:3.75rem; color:var(--text-muted); gap:.75rem; } .spinner { width:1.375rem; height:1.375rem; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:spin .7s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} } .empty-state { text-align:center; padding:3.75rem 1.25rem; color:var(--text-muted); } .empty-state .empty-icon { font-size:3rem; margin-bottom:.875rem; opacity:.4; } .empty-state p { font-size:.9rem; } /* ────────────────────────────────────────── TOGGLE ────────────────────────────────────────── */ .toggle { width:2.5rem; height:1.375rem; background:var(--bg-hover); border-radius:6.25rem; position:relative; cursor:pointer; border:1px solid var(--border); transition:background .2s; flex-shrink:0; } .toggle.on { background:var(--accent); border-color:var(--accent); } .toggle::after { content:''; position:absolute; left:.1875rem; top:.1875rem; width:.875rem; height:.875rem; border-radius:50%; background:#fff; transition:left .2s; } .toggle.on::after { left:1.3125rem; } /* ────────────────────────────────────────── PROGRESS BAR ────────────────────────────────────────── */ .progress-bar { height:.375rem; background:var(--bg-hover); border-radius:6.25rem; overflow:hidden; } .progress-fill { height:100%; border-radius:6.25rem; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s; } /* ────────────────────────────────────────── INPUT GROUP ────────────────────────────────────────── */ .input-group { display:flex; max-width:100%; } .input-group input { flex:1; border-radius:var(--radius-sm) 0 0 var(--radius-sm); border-right:none; min-width:0; } .input-group .btn { border-radius:0 var(--radius-sm) var(--radius-sm) 0; flex-shrink:0; } /* ────────────────────────────────────────── DB SWITCHER ────────────────────────────────────────── */ .db-switcher-card { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.125rem; } .db-switcher-inner { display:flex; align-items:stretch; gap:1rem; flex-wrap:wrap; } .db-option { flex:1; min-width:min(11.25rem,100%); padding:1.125rem 1.25rem; border-radius:var(--radius); border:2px solid var(--border); cursor:pointer; transition:all .25s; position:relative; overflow:hidden; } .db-option.selected { border-color:var(--accent); background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(34,211,238,.04)); box-shadow:0 0 1.5rem var(--accent-glow); } .db-option-label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:.375rem; } .db-option-name { font-size:1rem; font-weight:700; margin-bottom:.25rem; } .db-option-sub { font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); } .db-option-check { position:absolute; top:.75rem; right:.75rem; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6875rem; font-weight:700; opacity:0; transition:opacity .2s; } .db-option.selected .db-option-check { opacity:1; } .db-option-tables { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.625rem; } .db-option-tables .tag { font-size:.625rem; } .db-switch-arrow { font-size:1.5rem; color:var(--text-muted); flex-shrink:0; align-self:center; } .settings-row { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; border-bottom:1px solid var(--border); gap:1rem; flex-wrap:wrap; } .settings-row:last-child { border-bottom:none; } .settings-row-info { flex:1; min-width:0; } .settings-row-label { font-size:.875rem; font-weight:600; margin-bottom:.1875rem; } .settings-row-sub { font-size:.75rem; color:var(--text-muted); } /* ────────────────────────────────────────── HAMBURGER ────────────────────────────────────────── */ .hamburger { display:none; width:2.375rem; height:2.375rem; border-radius:var(--radius-sm); background:var(--bg-hover); border:1px solid var(--border); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:.3125rem; flex-shrink:0; transition:border .2s; } .hamburger:hover { border-color:var(--accent); } .hamburger span { display:block; width:1.125rem; height:.125rem; background:var(--text-primary); border-radius:.125rem; transition:transform .3s,opacity .3s,width .3s; transform-origin:center; } .hamburger.open span:nth-child(1) { transform:translateY(.4375rem) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity:0; width:0; } .hamburger.open span:nth-child(3) { transform:translateY(-.4375rem) rotate(-45deg); } #sidebar-backdrop { display:none; position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s; pointer-events:none; } #sidebar-backdrop.visible { opacity:1; pointer-events:auto; } /* ────────────────────────────────────────── BOTTOM NAV Пустое пространство было из-за двойной высоты: height на nav + padding-bottom на bnav-inner. Теперь: nav = auto (по содержимому + padding), bnav-inner = фиксированные 3.625rem, padding-bottom на nav ────────────────────────────────────────── */ #bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--bg-surface); border-top:1px solid var(--border); /* safe area padding только снизу, не влияет на bnav-inner */ padding-bottom:env(safe-area-inset-bottom,0px); } .bnav-inner { display: flex; align-items: stretch; height: 3.625rem; width: 100%; /* ← КЛЮЧ: занять всю ширину родителя */ padding: .25rem .5rem; gap: .25rem; } .bnav-item { flex: 1 1 0; /* делим пространство ПОРОВНУ */ min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; cursor: pointer; transition: color .18s, background .15s; color: var(--text-muted); padding: .25rem .125rem; border-radius: .5rem; font-size: .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; -webkit-tap-highlight-color: transparent; position: relative; user-select: none; } .bnav-item:active { background:var(--bg-hover); } .bnav-item.active { color:var(--accent); } .bnav-item .bnav-icon { font-size:1.2rem; line-height:1; transition:transform .2s; } .bnav-item.active .bnav-icon { transform:scale(1.18); } .bnav-badge { position:absolute; top:.125rem; right:.125rem; min-width:1rem; height:1rem; border-radius:6.25rem; background:var(--red); color:#fff; font-size:.5625rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 .25rem; } /* ══════════════════════════════════════════════════════ ТАБЛИЦЫ Desktop → горизонтальный скролл внутри .table-wrap Mobile → карточки АВТОМАТИЧЕСКИ, без изменений HTML Как работает без data-label: - thead скрывается - каждый tr → карточка - td без лейблов показывают значение - последний td (actions) → подвал Если хочешь лейблы — добавь data-label="..." к td ══════════════════════════════════════════════════════ */ /* ── Desktop: таблицы скроллятся горизонтально ── */ .table-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; border-radius: var(--radius); width: 100%; max-width: 100vw; } .table-wrap table { min-width: 100%; width: 100%; table-layout: fixed; border-collapse: collapse; } .table-wrap th, .table-wrap td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-wrap::-webkit-scrollbar { height: .25rem; } .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: .125rem; } /* Mobile: table → cards */ @media screen and (max-width: 768px) { .main-content { padding: 0.75rem !important; } .card { padding: 0.75rem !important; } /* Hide table header */ .table-wrap table thead { display: none; } /* tbody → flex column */ .table-wrap table tbody { display: flex; flex-direction: column; gap: 0.75rem; } /* tr → card */ .table-wrap table tbody tr { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; overflow: hidden; } /* td → row inside card */ .table-wrap table tbody tr td { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .table-wrap table tbody tr td:last-child { border-bottom: none; } /* Label from data-label */ .table-wrap table tbody tr td::before { content: attr(data-label); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); flex-shrink: 0; margin-right: 0.5rem; } /* Actions row - full width buttons */ .table-wrap table tbody tr td:last-child { flex-direction: column; gap: 0.375rem; padding: 0.5rem 0.75rem; background: var(--bg-surface); } .table-wrap table tbody tr td:last-child .actions { display: flex; gap: 0.375rem; width: 100%; } .table-wrap table tbody tr td:last-child .actions .btn { flex: 1; justify-content: center; min-height: 2.25rem; } } /* ═══════════════════════════════════════════════════════════ POST MODERATION CARD Спроектирован для модераторов на мобиле: - большие кнопки (легко тапать большим пальцем) - контент сразу виден без скролла - approve/reject на всю ширину снизу HTML:
AB
username
2 мин назад · Игры
Hate speech
Заголовок поста
Текст поста...
3 жалобы 1.2K просмотров
══════════════════════════════════════════════════════ */ .modcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s; } .modcard:hover { border-color: rgba(var(--accent-rgb), .3); } /* Мета-строка: аватар + имя + флаг нарушения */ .modcard-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1rem .75rem; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(var(--accent-rgb), .05), transparent); } .modcard-user { display: flex; align-items: center; gap: .625rem; min-width: 0; } .modcard-username { font-weight: 700; font-size: .9rem; color: var(--text-primary); } .modcard-time { font-size: .6875rem; color: var(--text-muted); margin-top: .0625rem; } /* Флаги типа нарушения */ .modcard-flag { font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .25rem .625rem; border-radius: .375rem; flex-shrink: 0; white-space: nowrap; } .modcard-flag--hate { background: rgba(248,113,113,.15); color: var(--red); border: 1px solid rgba(248,113,113,.3); } .modcard-flag--spam { background: rgba(251,191,36,.15); color: var(--yellow); border: 1px solid rgba(251,191,36,.3); } .modcard-flag--nsfw { background: rgba(168,85,247,.15); color: var(--accent); border: 1px solid rgba(168,85,247,.3); } .modcard-flag--abuse { background: rgba(239,68,68,.15); color: var(--danger); border: 1px solid rgba(239,68,68,.3); } .modcard-flag--fraud { background: rgba(251,113,33,.15); color: #fb7121; border: 1px solid rgba(251,113,33,.3); } .modcard-flag--other { background: rgba(139,136,179,.15); color: var(--text-secondary); border: 1px solid rgba(139,136,179,.3); } /* Контент поста */ .modcard-content { padding: .875rem 1rem; flex: 1; } .modcard-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); margin-bottom: .375rem; line-height: 1.35; } .modcard-body { font-size: .875rem; color: var(--text-secondary); line-height: 1.55; /* Показываем 4 строки, остальное скрыто */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .modcard-body.expanded { display: block; -webkit-line-clamp: unset; } .modcard-expand { font-size: .75rem; color: var(--accent); margin-top: .375rem; cursor: pointer; display: inline-block; font-weight: 600; } .modcard-expand:hover { text-decoration: underline; } /* Медиа-превью (если есть картинка) */ .modcard-media { width: 100%; max-height: 12rem; object-fit: cover; display: block; border-bottom: 1px solid var(--border); } /* Статистика жалоб */ .modcard-reports { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem .625rem; border-top: 1px solid var(--border); flex-wrap: wrap; } .modcard-stat { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono); } .modcard-stat i { font-size: .75rem; } .modcard-stat.warn { color: var(--red); } /* Блок кнопок — главное в UI модератора */ .modcard-actions { display: grid; /* approve | skip | reject */ grid-template-columns: 1fr 2.75rem 1fr; gap: .5rem; padding: .75rem 1rem; background: var(--bg-surface); border-top: 1px solid var(--border); } .modcard-btn { display: flex; align-items: center; justify-content: center; gap: .375rem; padding: .75rem .5rem; border: none; border-radius: .5rem; font-family: var(--font-body); font-size: .875rem; font-weight: 700; cursor: pointer; transition: all .15s; /* Большие кнопки для пальцев — минимум 44px высота */ min-height: 2.75rem; -webkit-tap-highlight-color: transparent; } .modcard-btn:active { transform: scale(.96); } .modcard-btn--approve { background: rgba(52,211,153,.15); color: var(--green); border: 1.5px solid rgba(52,211,153,.3); } .modcard-btn--approve:hover { background: rgba(52,211,153,.25); border-color: var(--green); } .modcard-btn--approve:active { background: rgba(52,211,153,.35); } .modcard-btn--reject { background: rgba(248,113,113,.15); color: var(--red); border: 1.5px solid rgba(248,113,113,.3); } .modcard-btn--reject:hover { background: rgba(248,113,113,.25); border-color: var(--red); } .modcard-btn--reject:active { background: rgba(248,113,113,.35); } .modcard-btn--skip { background: var(--bg-hover); color: var(--text-muted); border: 1.5px solid var(--border); font-size: 1rem; padding: .75rem .5rem; } .modcard-btn--skip:hover { color: var(--text-primary); border-color: var(--text-muted); } /* Дополнительные действия (бан, предупреждение) */ .modcard-extra-actions { display: flex; gap: .375rem; flex-wrap: wrap; padding: 0 1rem .75rem; background: var(--bg-surface); } .modcard-extra-actions .btn { flex: 1; min-width: 6rem; font-size: .75rem; padding: .4375rem .5rem; } /* Список карточек модерации */ .modcard-list { display: flex; flex-direction: column; gap: 1rem; } /* ══════════════════════════════════════════════════════ LIVESTREAM CARD Для страницы трансляций на мобиле HTML:
... ● LIVE 1.2K
Название стрима
ST
StreamerName Gaming
...
...
══════════════════════════════════════════════════════ */ .streamcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .18s, transform .15s; display: flex; flex-direction: column; } .streamcard:hover { border-color: var(--border-accent); transform: translateY(-2px); } /* Превью стрима */ .streamcard-preview { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg-hover); overflow: hidden; flex-shrink: 0; } .streamcard-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .streamcard-preview-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--text-muted); background: linear-gradient(135deg, var(--bg-hover), var(--bg-surface)); } /* LIVE бейдж и счётчик зрителей */ .streamcard-live { position: absolute; top: .625rem; left: .625rem; background: #dc2626; color: #fff; font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .1875rem .5rem; border-radius: .25rem; animation: live-pulse 2s ease-in-out infinite; } @keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .75; } } .streamcard-live.offline { background: var(--bg-hover); color: var(--text-muted); animation: none; } .streamcard-viewers { position: absolute; top: .625rem; right: .625rem; background: rgba(0,0,0,.65); color: #fff; font-size: .6875rem; font-weight: 700; font-family: var(--font-mono); padding: .1875rem .5rem; border-radius: .25rem; display: flex; align-items: center; gap: .25rem; } .streamcard-duration { position: absolute; bottom: .625rem; right: .625rem; background: rgba(0,0,0,.65); color: #fff; font-size: .6875rem; font-family: var(--font-mono); padding: .125rem .4375rem; border-radius: .25rem; } /* Тело карточки */ .streamcard-body { padding: .875rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; } .streamcard-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .streamcard-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8125rem; color: var(--text-secondary); } .streamcard-stats { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono); } .streamcard-stat { display: flex; align-items: center; gap: .25rem; } /* Кнопки управления стримом */ .streamcard-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--border); } .streamcard-actions .btn { flex: 1; justify-content: center; min-width: 5rem; padding: .5625rem .5rem; } /* Список стримов — адаптивная сетка */ .streamcard-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 1rem; } /* На мобиле — одна колонка */ @media (max-width: 42.5em) { .streamcard-list { grid-template-columns: 1fr; } .streamcard:hover { transform: none; } .streamcard-body { padding: .75rem; } .streamcard-title { font-size: .9375rem; } } /* ══════════════════════════════════════════════════════ СПЕЦИФИЧЕСКИЕ МОБИЛЬНЫЕ ФИКСЫ Security logs, Chat, любые узкие контейнеры ══════════════════════════════════════════════════════ */ /* Карточки внутри page не должны создавать overflow */ .page .card { min-width: 0; overflow: hidden; } /* Все flex и grid контейнеры внутри карточек — не вылезают */ .card > * { min-width: 0; } /* Текст внутри ячеек не ломает таблицу */ @media (max-width: 42.5em) { /* Общий фикс — любые контейнеры не шире экрана */ .page > * { max-width: 100%; } /* Security: log entries — IP адреса, user-agent длинные строки */ .main-content table tbody td .mono, .main-content table tbody td code, .main-content table tbody td span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; display: inline-block; } /* Chat messages — не вылезают */ .chat-message, .message-row, .msg-row { max-width: 100%; word-break: break-word; } /* Аналитика — графики на всю ширину */ .chart-wrap { height: 11rem; max-width: 100%; } /* Профиль — компактный на мобиле */ .profile-card-main { flex-direction: column; align-items: flex-start; } /* Все grid-2 и grid-3 — одна колонка */ .grid-2, .grid-3, .charts-grid, .analytics-grid, .cabinet-layout { grid-template-columns: 1fr !important; gap: .75rem; } /* Кнопки в section-header — полная ширина */ .section-header { flex-direction: column; align-items: stretch; gap: .625rem; } .section-header .actions, .section-header > .btn { width: 100%; justify-content: center; } /* Тулбар таблиц — в колонку */ .table-toolbar { flex-direction: column; gap: .5rem; } .table-toolbar .search-input, .table-toolbar .filter-select, .table-toolbar select, .table-toolbar input { width: 100%; min-width: 0; } /* Все поля формы — одна колонка */ .field-row.cols-2, .field-row.cols-3 { grid-template-columns: 1fr; } /* DB switcher */ .db-switcher-inner { flex-direction: column; } .db-switch-arrow { transform: rotate(90deg); } .db-option { min-width: 100%; } /* Connection method */ .conn-method-grid { grid-template-columns: 1fr; } .conn-fields-grid { grid-template-columns: 1fr; } /* Stats — 2 колонки */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .625rem; } /* Модалки — снизу */ .modal-overlay { align-items: flex-end; padding: 0; } .modal { width: 100% !important; max-width: 100% !important; max-height: 92dvh; border-radius: 1.25rem 1.25rem 0 0; padding: 1.375rem 1rem; } /* Pagination — по центру */ .pagination { justify-content: center; } /* admin dropdown — bottom sheet on mobile */ .admin-dropdown { position: fixed; right: 0; left: 0; top: auto; bottom: 0; width: 100vw; max-width: 100vw; max-height: 85dvh; border-radius: 1rem 1rem 0 0; transform-origin: bottom center; transform: translateY(100%); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 10000; } .admin-dropdown.visible { transform: translateY(0); } /* Backdrop overlay */ .admin-dropdown::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: -1; } /* Handle bar */ .admin-dropdown::after { content: ''; display: block; width: 2.5rem; height: .25rem; background: var(--text-muted); border-radius: 999px; margin: .75rem auto .25rem; opacity: .4; } .admin-dd-themes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: 0 .75rem; } .admin-dd-toggle { padding: .625rem .875rem; } } /* ────────────────────────────────────────── ADMIN AVATAR DROPDOWN ────────────────────────────────────────── */ .admin-avatar-wrap { position:relative; } .admin-avatar-btn { display:flex; align-items:center; gap:.3125rem; background:none; border:none; cursor:pointer; padding:.1875rem .375rem .1875rem .1875rem; border-radius:6.25rem; transition:background .15s; } .admin-avatar-btn:hover { background:var(--bg-hover); } .admin-avatar-ring { width:2.125rem; height:2.125rem; border-radius:50%; padding:.125rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex-shrink:0; } .admin-avatar-inner { width:100%; height:100%; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; } .admin-avatar-chevron { color:var(--text-muted); transition:transform .2s; flex-shrink:0; } .admin-avatar-wrap.open .admin-avatar-chevron { transform:rotate(180deg); } .admin-dropdown { display:none; flex-direction:column; position:absolute; top:calc(100% + .625rem); right:0; width:min(16.875rem,calc(100vw - 2rem)); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1rem 3rem rgba(0,0,0,.45),0 .25rem .75rem rgba(0,0,0,.2); z-index:3000; overflow:hidden; opacity:0; transform:translateY(-.5rem) scale(.97); transform-origin:top right; transition:opacity .18s,transform .18s; } .admin-dropdown.visible { opacity:1; transform:translateY(0) scale(1); } .admin-dd-header { display:flex; align-items:center; gap:.75rem; padding:1rem; background:linear-gradient(135deg,rgba(168,85,247,.12),transparent); } .admin-dd-avatar-lg { width:2.875rem; height:2.875rem; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:#fff; flex-shrink:0; box-shadow:0 0 0 .125rem var(--bg-card),0 0 0 .25rem var(--accent); } .admin-dd-info { min-width:0; } .admin-dd-name { font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .admin-dd-divider { height:1px; background:var(--border); } .admin-dd-section-label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:.625rem .875rem .25rem; } .admin-dd-item { display:flex; align-items:center; gap:.5625rem; width:100%; padding:.5625rem .875rem; background:none; border:none; color:var(--text-primary); font-size:.875rem; font-family:var(--font-body); cursor:pointer; text-align:left; transition:background .12s; } .admin-dd-item:hover { background:var(--bg-hover); } .admin-dd-item svg { flex-shrink:0; opacity:.7; } .admin-dd-item--disabled { opacity:.45; cursor:not-allowed; } .admin-dd-item--disabled:hover { background:none; } .admin-dd-item--danger { color:var(--red); } .admin-dd-item--danger:hover { background:rgba(248,113,113,.08); } .admin-dd-soon { margin-left:auto; font-size:.5625rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--bg-hover); padding:.125rem .375rem; border-radius:.25rem; } .admin-dd-themes { display:grid; grid-template-columns:1fr 1fr; gap:.375rem; padding:.375rem .875rem .625rem; } .theme-opt { display:flex; align-items:center; gap:.5rem; padding:.4375rem .625rem; border-radius:.5rem; border:1px solid var(--border); background:var(--bg-root); color:var(--text-primary); font-size:.75rem; font-family:var(--font-body); cursor:pointer; transition:background .12s,border-color .12s,box-shadow .12s; } .theme-opt:hover { background:var(--bg-hover); } .theme-opt.active { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 0 1px var(--accent); } .theme-opt-swatch { width:.875rem; height:.875rem; border-radius:50%; flex-shrink:0; } .admin-dd-toggle { display:flex; align-items:center; justify-content:space-between; padding:.5rem .875rem; cursor:pointer; font-size:.875rem; color:var(--text-primary); transition:background .12s; user-select:none; } .admin-dd-toggle:hover { background:var(--bg-hover); } .admin-dd-toggle>span { display:flex; align-items:center; gap:.5rem; } .admin-dd-toggle>span svg { opacity:.7; } .admin-dd-toggle input[type=checkbox] { display:none; } .admin-dd-toggle-track { position:relative; width:2.125rem; height:1.125rem; background:var(--border); border-radius:.5625rem; flex-shrink:0; transition:background .2s; } .admin-dd-toggle-track::after { content:''; position:absolute; top:.125rem; left:.125rem; width:.875rem; height:.875rem; border-radius:50%; background:#fff; transition:transform .2s; } .admin-dd-toggle input:checked~.admin-dd-toggle-track { background:var(--accent); } .admin-dd-toggle input:checked~.admin-dd-toggle-track::after { transform:translateX(1rem); } /* ────────────────────────────────────────── CONNECTION METHOD ────────────────────────────────────────── */ .conn-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.625rem; margin-top:.5rem; } .conn-method-opt { position:relative; display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.875rem .625rem .75rem; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--bg-root); cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; text-align:center; user-select:none; } .conn-method-opt:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),.06); } .conn-method-opt.selected { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 0 1px var(--accent); } .conn-method-wip { opacity:.6; } .conn-method-check { display:none; position:absolute; top:.375rem; right:.5rem; font-size:.625rem; color:var(--accent); font-weight:700; } .conn-method-opt.selected .conn-method-check { display:block; } .conn-method-icon { font-size:1.375rem; line-height:1; } .conn-method-label { font-size:.75rem; font-weight:600; color:var(--text-primary); } .conn-method-sub { font-size:.6875rem; color:var(--text-muted); line-height:1.4; } .conn-method-badge { position:absolute; top:-.5rem; left:50%; transform:translateX(-50%); font-size:.5625rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:var(--accent-2); color:#000; padding:.125rem .4375rem; border-radius:.25rem; white-space:nowrap; } .conn-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:.625rem .875rem; } .conn-hint { font-size:.75rem; color:var(--text-muted); margin-top:.5rem; padding:.5rem .75rem; background:var(--bg-root); border-radius:.5rem; border-left:.1875rem solid var(--border); line-height:1.5; } .conn-hint code { font-family:var(--font-mono); font-size:.6875rem; background:var(--bg-hover); padding:.0625rem .3125rem; border-radius:.1875rem; } /* ────────────────────────────────────────── PROFILE ────────────────────────────────────────── */ .profile-layout { display:flex; flex-direction:column; gap:1.25rem; } .profile-card-main { display:flex; align-items:center; gap:1.75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:1rem; padding:1.75rem; flex-wrap:wrap; min-width:0; } .profile-avatar-wrap { position:relative; flex-shrink:0; } .profile-avatar-ring { width:5.625rem; height:5.625rem; border-radius:50%; padding:.1875rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); } .profile-avatar-img { width:100%; height:100%; border-radius:50%; background:var(--bg-root); display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700; color:var(--accent); overflow:hidden; } .profile-avatar-badge { position:absolute; bottom:-.25rem; left:50%; transform:translateX(-50%); background:var(--accent); color:#000; font-size:.625rem; font-weight:700; padding:.125rem .5rem; border-radius:1.25rem; white-space:nowrap; } .profile-info { flex:1; min-width:min(11.25rem,100%); } .profile-name { font-size:clamp(1.1rem,3vw,1.6rem); font-weight:700; color:var(--text-primary); margin-bottom:.25rem; } .profile-role { font-size:.8125rem; color:var(--accent); font-weight:600; margin-bottom:.5rem; } .profile-meta-row { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--text-muted); flex-wrap:wrap; } .profile-meta-dot { opacity:.4; } .profile-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(7.5rem,100%),1fr)); gap:.875rem; } .profile-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; padding:1.125rem 1rem; text-align:center; } .profile-stat-val { font-size:1.5rem; font-weight:700; color:var(--accent); margin-bottom:.25rem; } .profile-stat-label { font-size:.6875rem; color:var(--text-muted); font-weight:500; } .profile-session-info { padding:.5rem 0; } .profile-session-row { display:flex; align-items:center; justify-content:space-between; padding:.625rem 0; border-bottom:1px solid var(--border); font-size:.8125rem; gap:.5rem; } .profile-session-row:last-child { border-bottom:none; } .profile-session-key { color:var(--text-muted); flex-shrink:0; } .profile-session-val { color:var(--text-primary); font-weight:600; font-family:var(--font-mono); word-break:break-all; text-align:right; } /* ────────────────────────────────────────── CABINET ────────────────────────────────────────── */ .cabinet-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .cabinet-card { height:fit-content; } .cabinet-card > * { min-width: 0; } /* Mobile: allow scrolling */ @media (max-width: 42.5em) { #page-cabinet { overflow-y: auto; padding-bottom: 2rem; } } .cabinet-avatar-section { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; } .cabinet-avatar-preview { width:5rem; height:5rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:#000; overflow:hidden; flex-shrink:0; } .cabinet-avatar-actions { display:flex; flex-direction:column; gap:.5rem; } #cabinet-pass-msg.ok { color:var(--green); } #cabinet-pass-msg.err { color:var(--danger); } /* ────────────────────────────────────────── MOD CARDS ────────────────────────────────────────── */ .mod-card { display:flex; gap:.875rem; padding:.875rem 0; border-bottom:1px solid var(--border); min-width:0; } .mod-card:last-child { border-bottom:none; } .mod-card-cover { width:4.25rem; height:4.25rem; background:var(--bg-hover); border-radius:.625rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; } .mod-card-info { flex:1; min-width:0; } .mod-card-title { font-weight:600; margin-bottom:.1875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mod-card-sub { font-size:.75rem; color:var(--text-muted); margin-bottom:.125rem; } .mod-card-desc { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; } .mod-card-actions { display:flex; gap:.375rem; margin-top:.5rem; flex-wrap:wrap; } /* ────────────────────────────────────────── GRIDS / LANG / UTILS ────────────────────────────────────────── */ .grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:1.125rem; } .grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap:1.125rem; } .lang-switcher { display:flex; gap:.125rem; align-items:center; background:var(--bg-root); border-radius:.5rem; padding:.1875rem; } .lang-btn { background:transparent; border:none; cursor:pointer; font-size:.6875rem; font-weight:700; letter-spacing:.04em; color:var(--text-muted); padding:.25rem .4375rem; border-radius:.3125rem; transition:all .15s; } .lang-btn:hover,.lang-btn.active { background:var(--accent); color:#fff; } .mono { font-family:var(--font-mono); } .text-muted { color:var(--text-muted); } .text-accent { color:var(--accent); } .text-green { color:var(--green); } .text-red { color:var(--red); } hr { border:none; border-top:1px solid var(--border); margin:1.25rem 0; } .tag { display:inline-block; padding:.125rem .5rem; border-radius:.25rem; font-size:.6875rem; font-weight:600; font-family:var(--font-mono); background:var(--bg-hover); color:var(--text-secondary); border:1px solid var(--border); } .divider { height:1px; background:var(--border); margin:1rem 0; } @keyframes swipeHint { 0%,100%{transform:translateX(0);opacity:1} 40%{transform:translateX(-1.125rem);opacity:.6} } .swipe-hint { animation:swipeHint 1.2s ease-in-out 1; } /* ══════════════════════════════════════ #APP-INNER layout ══════════════════════════════════════ */ #app-inner { display: flex; flex-direction: column; flex: 1; min-height: 100dvh; min-width: 0; } /* ══════════════════════════════════════ GRID LAYOUTS ══════════════════════════════════════ */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; } /* Security log panels */ #blocked-ips-list, #login-logs-list, #admin-logs-list { max-height: 22.5rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #violations-list { max-height: 25rem; overflow-y: auto; scrollbar-width: thin; } #page-chats .table-wrap { max-height: 25rem; overflow-y: auto; } /* ══════════════════════════════════════════ RESPONSIVE — TABLET ≤900px (56.25em) ══════════════════════════════════════════ */ @media (max-width:56.25em) { :root { --sidebar-w:15rem; } #sidebar { transform:translateX(calc(-1 * var(--sidebar-w))); box-shadow:none; visibility:hidden; opacity:0; transition: transform .3s ease, visibility 0s .3s, opacity .3s; } #sidebar.open { transform:translateX(0); box-shadow:.5rem 0 3.75rem rgba(0,0,0,.7); visibility:visible; opacity:1; transition: transform .3s ease, visibility 0s 0s, opacity .3s; } #sidebar-backdrop { display:block; pointer-events:none; } #app { margin-left:0; } .hamburger { display:flex; } .topbar { padding:0 1rem; gap:.625rem; position:sticky; top:0; z-index:50; } .main-content { padding-top:calc(var(--topbar-h) + 0.5rem) !important; } .topbar-right { gap:.5rem; } #server-status-text { display:none; } .server-status { padding:.375rem .625rem; } .theme-picker { gap:.3125rem; } .theme-dot { width:1rem; height:1rem; } .main-content { padding:1.25rem 1rem; } .db-switcher-inner { flex-direction:column; } .db-switch-arrow { transform:rotate(90deg); } /* stats принудительно 2 колонки (авто-фит может дать 3 на планшете) */ .stats-grid { grid-template-columns:repeat(2,1fr); } } /* ══════════════════════════════════════════ RESPONSIVE — PHONE ≤680px (42.5em) ══════════════════════════════════════════ */ @media (max-width:42.5em) { /* Bottom nav */ #bottom-nav { display:block; } /* Отступ = высота нава (3.625rem) + safe area + запас */ .main-content { padding-bottom:calc(3.625rem + env(safe-area-inset-bottom,0px) + 1rem); } /* ── TOUCH FIX: убираем 300ms задержку на всех интерактивных элементах ── */ button, .btn, a, .nav-item, .bnav-item, .lang-btn, .theme-dot, .toggle, .db-option, .conn-method-opt, select, label, .admin-dd-item, .theme-opt, .admin-avatar-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ── iOS ZOOM FIX: input с font-size < 16px вызывает авто-зум ── */ input, textarea, select { font-size: 16px !important; } /* Мобильные карточки */ .mob-cards { display:flex; flex-direction:column; gap:.75rem; } /* Скрыть таблицу если рядом есть .mob-cards (через .has-mob-cards на родителе) */ .has-mob-cards .table-wrap { display:none; } .table-wrap.hide-on-mobile { display:none; } .qmod-fab { display:flex; } .mobile-sidebar-extras { display:block; } /* Grid layouts → 1 колонка на мобиле */ .grid-2, .grid-3 { grid-template-columns: 1fr !important; } /* Security — панели в колонку */ #page-security .grid-3 { grid-template-columns: 1fr !important; } /* Security log panels — убираем max-height чтобы скроллить основной контент */ #blocked-ips-list, #login-logs-list, #admin-logs-list { max-height: none; overflow-y: visible; } /* Chats — в колонку */ #page-chats .grid-2 { grid-template-columns: 1fr !important; } #page-chats .table-wrap { max-height: none; overflow-x: auto; } /* Music — в колонку */ #page-music .grid-2 { grid-template-columns: 1fr !important; } .section-header { flex-direction:column; align-items:stretch; } .section-header .btn { width:100%; justify-content:center; } .table-toolbar { flex-direction:column; } .table-toolbar input,.table-toolbar select { width:100%; } .topbar { height:3.25rem; } .page-title { font-size:.9rem; } .page-breadcrumb { display:none; } .btn[onclick="refreshCurrentPage()"] { display:none; } .col-email { display:none; } .stats-grid { grid-template-columns:repeat(2,1fr); gap:.625rem; } .stat-card { padding:.875rem; } .stat-value { font-size:1.375rem; } .chart-wrap { height:clamp(10rem,25vw,13.75rem); } /* Charts - stack on mobile */ #page-dashboard [style*="grid-template-columns"], #page-analytics [style*="grid-template-columns"], #page-modpanel [style*="grid-template-columns"] { grid-template-columns:1fr !important; } /* Модалка снизу */ .modal-overlay { align-items:flex-end; padding:0; } .modal { border-radius:1.25rem 1.25rem 0 0; max-height:92dvh; width:100%; max-width:100%; padding:1.5rem 1.125rem; } /* Тосты над навом */ #toast-container { bottom:calc(4.25rem + env(safe-area-inset-bottom,0px)); right:.75rem; left:.75rem; } /* Профиль */ .profile-card-main { padding:1.25rem; gap:1rem; } .cabinet-layout { grid-template-columns:1fr; } /* Connection */ .conn-method-grid { grid-template-columns:1fr; } .conn-fields-grid { grid-template-columns:1fr; } /* Поля */ .field-row.cols-2,.field-row.cols-3 { grid-template-columns:1fr; } /* Charts - stack on mobile */ #page-dashboard [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; } } /* ══════════════════════════════════════════ RESPONSIVE — SMALL PHONE ≤480px (30em) ══════════════════════════════════════════ */ @media (max-width:30em) { html { font-size:14px; } :root { --radius:.625rem; --radius-sm:.375rem; } .stats-grid { gap:.5rem; } .stat-card { padding:.75rem; } .stat-value { font-size:1.25rem; } .stat-label { font-size:.625rem; } .stat-icon { display:none; } .stat-change { font-size:.625rem; } .card { padding:.875rem; } .panel { padding:.875rem; } .topbar { padding:0 .75rem; } .theme-picker { display:none; } .auth-card { border-radius:1rem 1rem 0 0; } } /* ══════════════════════════════════════════ RESPONSIVE — VERY SMALL ≤360px (22.5em) ══════════════════════════════════════════ */ @media (max-width:22.5em) { .stats-grid { grid-template-columns:1fr; } .bnav-item .bnav-label { display:none; } .bnav-item { padding:.5rem .25rem; } } /* Landscape phone — убираем нав */ @media (max-height:31.25em) and (max-width:56.25em) { #bottom-nav { display:none !important; } .main-content { padding-bottom:1rem; } .topbar { height:3rem; } .chart-wrap { height:clamp(10rem,35vw,13rem); } } /* Touch — убираем проблемные hover */ @media (hover:none) { .stat-card:hover { transform:none; } .btn-primary:hover { filter:none; transform:none; } .nav-item:hover { background:transparent; color:var(--text-secondary); } .nav-item:hover::before { display:none; } } /* Safe area — notch/dynamic island */ @supports (padding:env(safe-area-inset-left)) { #sidebar { padding-left:env(safe-area-inset-left); padding-top:env(safe-area-inset-top); } .topbar { padding-left:max(1.75rem,env(safe-area-inset-left)); padding-right:max(1.75rem,env(safe-area-inset-right)); } @media (max-width:56.25em) { .topbar { padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); } } } /* ────────────────────────────────────────── RESPONSIVE REPORTS TABLE ────────────────────────────────────────── */ @media (max-width:900px) { .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table thead { display: none; } .data-table tbody { display: block; } .data-table tr { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; } .data-table td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border: none; } .data-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: .75rem; text-transform: uppercase; min-width: 100px; } } @media (max-width:600px) { .data-table tr { padding: 8px; } .data-table td { font-size: .85rem; } .actions { width: 100%; justify-content: flex-end; margin-top: 8px; } .btn-sm { padding: 6px 10px; font-size: .75rem; } } /* ────────────────────────────────────────── ENHANCED MOBILE ADAPTABILITY For team members using mobile devices ────────────────────────────────────────── */ @media (max-width: 768px) { /* Touch targets - minimum 44px for accessibility */ .btn, .toggle, .nav-item, .nav-badge, select, input, textarea { min-height: 44px; } /* Larger touch-friendly buttons */ .btn { min-height: 48px; padding: 12px 20px; font-size: 16px; } .btn-sm { min-height: 40px; padding: 10px 16px; font-size: 14px; } /* Bottom nav improvements */ #bottom-nav { height: 70px; padding-bottom: env(safe-area-inset-bottom, 8px); } .bnav-item { min-width: 60px; padding: 8px 12px; } .bnav-icon { font-size: 20px; } .bnav-label { font-size: 10px; } /* Table improvements for mobile */ table { font-size: 14px; } th, td { padding: 12px 8px; } /* Search inputs larger on mobile */ .search-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea { font-size: 16px !important; padding: 14px 12px; min-height: 48px; } /* Cards - better spacing on mobile */ .card { padding: 16px; margin-bottom: 12px; } .card-title { font-size: 15px; margin-bottom: 12px; } /* Modal improvements */ .modal { max-width: 95vw; max-height: 85vh; margin: auto; } .modal-header { padding: 16px; } .modal-body, .modal-scroll-body { padding: 16px; } /* Stats grid - 2 columns on tablet, 1 on mobile */ .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } /* Charts - full width on mobile */ .charts-grid { grid-template-columns: 1fr; } .chart-wrap { height: 200px; } /* Section headers */ .section-header { flex-direction: column; align-items: flex-start; gap: 12px; } .section-header > * { width: 100%; } .section-title { font-size: 18px; } /* Form fields */ .field { margin-bottom: 16px; } .field label { font-size: 14px; margin-bottom: 6px; } /* Select dropdowns */ select { min-height: 48px; font-size: 16px; padding: 12px; } /* Table toolbar */ .table-toolbar { flex-direction: column; gap: 10px; } .table-toolbar > * { width: 100%; } /* Better action buttons on mobile */ .actions { display: flex; flex-wrap: wrap; gap: 8px; } .actions .btn { flex: 1; min-width: 44px; justify-content: center; } /* Pagination */ .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; } .page-btn { min-width: 40px; height: 40px; font-size: 14px; } /* Sidebar - full overlay on mobile */ #sidebar { width: 85vw; max-width: 300px; z-index: 1000; transform: translateX(-100%); visibility: hidden; opacity: 0; } #sidebar.open { transform: translateX(0); visibility: visible; opacity: 1; } /* Topbar */ #topbar { padding: 0 12px; } #topbar-title { font-size: 14px; } /* Badges */ .badge { padding: 4px 8px; font-size: 11px; } /* Loading states */ .loading-wrap { padding: 40px 20px; } .spinner { width: 32px; height: 32px; } /* Empty states */ .empty-state { padding: 32px 16px; } /* Grid layouts */ .grid-2, .grid-3 { grid-template-columns: 1fr; } /* Profile layout */ .profile-layout { grid-template-columns: 1fr; } .profile-card-main { flex-direction: column; text-align: center; } /* Analytics grid */ .analytics-grid { grid-template-columns: 1fr; } } /* Extra small screens */ @media (max-width: 400px) { .btn { padding: 10px 16px; font-size: 14px; } .stats-grid { grid-template-columns: 1fr 1fr; } .nav-section-label { font-size: 10px; } .nav-item { padding: 10px 12px; font-size: 13px; } } /* Landscape mobile */ @media (max-height: 500px) and (orientation: landscape) { #bottom-nav { height: 50px; } .bnav-label { display: none; } .bnav-icon { font-size: 18px; } } /* High contrast mode for outdoor visibility */ @media (prefers-contrast: high) { .btn { border: 2px solid currentColor; } .nav-item { border: 1px solid var(--border); } input, select, textarea { border-width: 2px; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════ MINECRAFT THEME ══════════════════════════════════════════════ */ @font-face { font-family: 'Minecraft'; src: url('fonts/minecraft.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } [data-theme="minecraft"] { --bg-root: #3d3938; --bg-surface: #2a2726; --bg-card: #4a4543; --bg-hover: #5a5553; --bg-input: #2a2726; --border: rgba(0,0,0,0.5); --border-accent: rgba(85,160,65,.5); --text-primary: #fff; --text-secondary: #c0bebc; --text-muted: #8a8786; --accent: #55a041; --accent-glow: rgba(85,160,65,.4); --accent-rgb: 85,160,65; --accent-2: #7cb860; --accent-3: #6aa84f; --green: #55a041; --red: #b02020; --yellow: #c9a227; --orange: #c77830; --danger: #a01c1c; --blue: #4a7ab0; --radius: 0; --radius-sm: 0; --font-main: 'Minecraft', 'Press Start 2P', cursive; --font-mono: 'Courier New', monospace; } [data-theme="minecraft"] body, [data-theme="minecraft"] .card, [data-theme="minecraft"] .stat-card, [data-theme="minecraft"] .topbar, [data-theme="minecraft"] .sidebar, [data-theme="minecraft"] .modal, [data-theme="minecraft"] input, [data-theme="minecraft"] select, [data-theme="minecraft"] textarea, [data-theme="minecraft"] .btn { font-family: var(--font-main) !important; image-rendering: pixelated; } [data-theme="minecraft"] h1, [data-theme="minecraft"] h2, [data-theme="minecraft"] h3, [data-theme="minecraft"] h4, [data-theme="minecraft"] p, [data-theme="minecraft"] span, [data-theme="minecraft"] div, [data-theme="minecraft"] td, [data-theme="minecraft"] th, [data-theme="minecraft"] li, [data-theme="minecraft"] label { text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } [data-theme="minecraft"] i[class*="fa-"] { text-shadow: none !important; } [data-theme="minecraft"] .card, [data-theme="minecraft"] .stat-card, [data-theme="minecraft"] input, [data-theme="minecraft"] select, [data-theme="minecraft"] textarea { border: 3px solid #000 !important; box-shadow: inset -2px -2px 0 #1a1817, inset 2px 2px 0 #6a6563; } [data-theme="minecraft"] .btn { border: 3px solid #000 !important; box-shadow: inset -2px -2px 0 #1a1817, inset 2px 2px 0 #6a6563, 2px 2px 0 #000; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } [data-theme="minecraft"] .btn:active { box-shadow: inset 2px 2px 0 #1a1817, inset -2px -2px 0 #6a6563; } [data-theme="minecraft"] .btn-primary { background: linear-gradient(180deg, #55a041 0%, #3d7a2e 50%, #2a551d 100%); } [data-theme="minecraft"] .btn-secondary { background: linear-gradient(180deg, #5a5553 0%, #4a4543 50%, #3a3533 100%); } [data-theme="minecraft"] .btn-danger { background: linear-gradient(180deg, #b02020 0%, #8a1a1a 50%, #6a1414 100%); } [data-theme="minecraft"] .topbar { background: linear-gradient(180deg, #4a4543 0%, #3a3533 100%); border-bottom: 4px solid #1a1817; } [data-theme="minecraft"] .sidebar { background: linear-gradient(90deg, #3a3533 0%, #2a2726 100%); border-right: 4px solid #1a1817; } [data-theme="minecraft"] .nav-item { border: 2px solid transparent; background: rgba(0,0,0,0.2); } [data-theme="minecraft"] .nav-item:hover, [data-theme="minecraft"] .nav-item.active { background: rgba(85,160,65,0.3); border-color: #55a041; } [data-theme="minecraft"] .modal { background: #4a4543; border: 4px solid #000 !important; box-shadow: 4px 4px 0 #000, inset 0 0 20px rgba(0,0,0,0.3); } [data-theme="minecraft"] .badge { border: 2px solid #000; box-shadow: 1px 1px 0 #000; } [data-theme="minecraft"] .badge-green { background: #55a041; color: #fff; } [data-theme="minecraft"] .badge-red { background: #b02020; color: #fff; } [data-theme="minecraft"] .badge-yellow { background: #c9a227; color: #000; } [data-theme="minecraft"] .badge-purple { background: #7b5ba0; color: #fff; } [data-theme="minecraft"] .badge-cyan { background: #4a9ab0; color: #fff; } [data-theme="minecraft"] .badge-orange { background: #c77830; color: #fff; } [data-theme="minecraft"] input, [data-theme="minecraft"] select, [data-theme="minecraft"] textarea { background: #2a2726 !important; color: #fff !important; } [data-theme="minecraft"] ::selection { background: #55a041; color: #fff; } [data-theme="minecraft"] .progress-bar { background: #2a2726; border: 2px solid #000; } [data-theme="minecraft"] .progress-fill { background: linear-gradient(180deg, #55a041 0%, #3d7a2e 100%); box-shadow: inset 0 -2px 0 #2a551d; } [data-theme="minecraft"] .chart-wrap { background: #2a2726; border: 2px solid #000; } /* ══════════════════════════════════════════════ CAPTCHA STYLES ══════════════════════════════════════════════ */ #auth-captcha-wrap { user-select: none; } #captcha-container { transition: all 0.3s ease; } #captcha-img { display: block; width: 400px; height: 120px; max-width: 100%; cursor: pointer; border-radius: 4px; } #captcha-img:hover { filter: contrast(1.1) brightness(1); } #captcha-answer { font-family: var(--font-mono); letter-spacing: 0.2em; } #captcha-answer::placeholder { color: var(--text-muted); letter-spacing: normal; } /* Captcha loading spinner overlay */ #captcha-loading { background: rgba(0,0,0,0.5); border-radius: 8px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* ══════════════════════════════════════════════ AERO THEME (Windows 7 Aero Glass) ══════════════════════════════════════════════ */ [data-theme="aero"] { --bg-root: #4d90d9; --bg-surface: rgba(222,236,250,.6); --bg-card: rgba(255,255,255,.46); --bg-hover: rgba(255,255,255,.66); --bg-input: rgba(255,255,255,.8); --border: rgba(255,255,255,.65); --border-accent: rgba(46,112,183,.55); --text-primary: #0d2a4a; --text-secondary: #234a70; --text-muted: #55738f; --accent: #2e70b7; --accent-glow: rgba(46,112,183,.5); --accent-rgb: 46,112,183; --accent-2: #6fb6f0; --accent-3: #164a80; --green: #4caf50; --red: #e04040; --yellow: #f5b800; --orange: #f08a1e; --danger: #d32f2f; --warning: #e0a000; --blue: #2e70b7; --radius: .9rem; --radius-sm: .55rem; --shadow: 0 .5rem 2rem rgba(10,40,70,.3); --font-body: 'Segoe UI', 'Sora', sans-serif; --font-mono: 'Consolas', 'JetBrains Mono', monospace; --bg: var(--bg-root); --bg-2: var(--bg-surface); --card: var(--bg-card); --card-bg: var(--bg-card); --hover: var(--bg-hover); --text: var(--text-primary); --font: var(--font-body); } /* Дефолтный фон рабочего стола Windows 7 ("Harmony") — характерный голубой градиент со светлым размытым бликом сверху-слева, знакомый по коробочной установке системы. */ [data-theme="aero"] body { background: radial-gradient(ellipse 70% 55% at 30% -5%, rgba(255,255,255,.4), transparent 60%), linear-gradient(160deg, #cfe4f7 0%, #7bb3e6 30%, #4d90d9 55%, #2f6bb0 80%, #1c4d85 100%); background-attachment: fixed; } /* Тело окна (аналог области контента Проводника Win7 — там, где список файлов/настроек на почти непрозрачном светлом фоне, а НЕ полупрозрачное стекло поверх обоев). Именно так выглядит открытое окно в реальном Win7: рамка/тайтлбар — стекло, а сам контент внутри — плотный светлый фон, иначе текст сливается с рабочим столом позади. */ [data-theme="aero"] .main-content { background: linear-gradient(180deg, #eef5fc 0%, #e2edf8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); } /* Левая панель — аналог дерева папок слева в Проводнике: отдельная, чуть более приглушённая/тёмная область, визуально отделённая от основного светлого тела окна, а не то же прозрачное стекло, что у карточек. */ [data-theme="aero"] #sidebar { background: linear-gradient(180deg, #dce8f5 0%, #cddef2 100%); border-right: 1px solid rgba(120,160,200,.4); box-shadow: inset -1px 0 0 rgba(255,255,255,.5); } /* Стеклянные панели: полупрозрачность + блюр + глянцевый блик сверху. Это карточки/плитки ВНУТРИ уже плотного тела окна — здесь стекло уместно, оно ложится на светлый фон .main-content, а не на обои. */ [data-theme="aero"] .card, [data-theme="aero"] .stat-card, [data-theme="aero"] .topbar, [data-theme="aero"] .nav-item { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 40%, rgba(210,230,247,.35) 100%); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 .4rem 1.2rem rgba(10,40,70,.25); transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; } /* "Активация" стекла при наведении — карточка становится ярче и чуть плотнее, как окно, получившее фокус на рабочем столе Win7. */ [data-theme="aero"] .card:hover, [data-theme="aero"] .stat-card:hover { background: linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.42) 40%, rgba(220,238,252,.5) 100%); border-color: rgba(77,144,217,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 .6rem 1.6rem rgba(10,40,70,.32); } [data-theme="aero"] input, [data-theme="aero"] select, [data-theme="aero"] textarea { background: rgba(255,255,255,.8); border: 1px solid rgba(120,160,200,.5); box-shadow: inset 0 1px 3px rgba(20,60,100,.15); color: var(--text-primary); } /* ── "Активное окно" Aero ────────────────────────────────────── Модальное окно оформлено как настоящее окно Win7, а не просто ещё одна карточка того же стекла, что и контент под ней: у активного окна в Win7 — насыщенная синяя рамка (accent color активного окна) и более яркое, менее прозрачное стекло, чем у неактивного фона. */ [data-theme="aero"] .modal-overlay { background: rgba(15,35,60,.35); backdrop-filter: blur(2px); } [data-theme="aero"] .modal { background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.6) 35%, rgba(222,238,252,.62) 100%); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border: 2px solid #4d90d9; border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(255,255,255,.5), 0 1.5rem 3rem rgba(10,35,65,.45); } /* Заголовок окна — самое плотное, самое яркое стекло, глянцевая полоса сверху, характерная для титульной строки активного окна Aero. Отрицательные внешние отступы растягивают его на всю ширину/верх окна, несмотря на padding самого .modal; скругление только сверху, чтобы совпадать с формой окна и не вылезать за его рамку. */ [data-theme="aero"] .modal-header { background: linear-gradient(180deg, #eaf5ff 0%, #bfe0fb 40%, #8fc3ee 41%, #5ea3dd 100%); border-bottom: 1px solid rgba(30,90,150,.4); border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.95); margin: -2rem -2rem 1.625rem -2rem; padding: .85rem 2rem; color: #0d2a4a; } [data-theme="aero"] .modal-title { text-shadow: 0 1px 0 rgba(255,255,255,.6); } /* Глянцевые кнопки в духе Aero — выпуклое стекло со световым бликом сверху */ [data-theme="aero"] .btn { background: linear-gradient(180deg, #eaf5ff 0%, #cfe6f9 45%, #a9cdec 46%, #8fb9e0 100%); border: 1px solid rgba(70,120,170,.6); color: #10243c; border-radius: var(--radius-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(10,40,70,.25); text-shadow: 0 1px 0 rgba(255,255,255,.6); } [data-theme="aero"] .btn:hover { background: linear-gradient(180deg, #f5faff 0%, #dcf0ff 45%, #b9dcf7 46%, #9cc9ec 100%); } [data-theme="aero"] .btn:active { background: linear-gradient(180deg, #a9cdec 0%, #cfe6f9 100%); box-shadow: inset 0 2px 4px rgba(10,40,70,.3); } [data-theme="aero"] .btn-primary { background: linear-gradient(180deg, #7fc4ff 0%, #2e70b7 45%, #1e6bc0 46%, #144d94 100%); border: 1px solid rgba(20,80,140,.7); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35); } [data-theme="aero"] .btn-primary:hover { background: linear-gradient(180deg, #98d2ff 0%, #4f9de6 45%, #2878ca 46%, #1a5aa8 100%); } /* Тонкая световая полоска сверху карточек — фирменная деталь Aero glass */ [data-theme="aero"] .card::before, [data-theme="aero"] .stat-card::before { content: ""; display: block; height: 1px; margin: -1px -1px 0 -1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); } [data-theme="aero"] .badge-red { background: rgba(224,64,64,.18); color: #b02020; border: 1px solid rgba(224,64,64,.4); } [data-theme="aero"] .badge-green { background: rgba(76,175,80,.18); color: #2e7d32; border: 1px solid rgba(76,175,80,.4); } [data-theme="aero"] .badge-blue, [data-theme="aero"] .badge-cyan { background: rgba(46,112,183,.18); color: #1e5f9e; border: 1px solid rgba(46,112,183,.4); } [data-theme="aero"] .badge-yellow, [data-theme="aero"] .badge-orange { background: rgba(245,184,0,.2); color: #8a6300; border: 1px solid rgba(245,184,0,.45); } [data-theme="aero"] .badge-purple { background: rgba(139,92,246,.18); color: #5b3fc4; border: 1px solid rgba(139,92,246,.4); } [data-theme="aero"] .badge-gray { background: rgba(92,118,144,.18); color: #3c5468; border: 1px solid rgba(92,118,144,.4); } /* Активный/наведённый пункт меню — тот же приём глянца, что и на кнопках */ [data-theme="aero"] .nav-item:hover { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(220,240,255,.4) 100%); } [data-theme="aero"] .nav-item.active { background: linear-gradient(180deg, rgba(160,210,255,.75) 0%, rgba(90,160,225,.5) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); color: #0d2540; } /* Чекбоксы/радио — стеклянный квадрат вместо системного плоского */ [data-theme="aero"] input[type="checkbox"], [data-theme="aero"] input[type="radio"] { accent-color: #2e70b7; } /* Скроллбар в тон стеклянной палитре */ [data-theme="aero"] ::-webkit-scrollbar-thumb { background: rgba(46,112,183,.5); border: 1px solid rgba(255,255,255,.5); } /* Табы/вкладки — характерная деталь Aero: приподнятая активная вкладка */ [data-theme="aero"] .tab.active, [data-theme="aero"] .tab-item.active { background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(220,240,255,.55) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(10,40,70,.2); border-bottom-color: transparent; } /* ══════════════════════════════════════════════ WINDOWS 10 THEME (Metro / плиточный, Fluent flat) Резкие прямые углы, насыщенные плашки, без теней и градиентов — визуальный язык "Modern UI"/Metro и панели настроек Win10. ══════════════════════════════════════════════ */ [data-theme="win10"] { --bg-root: #1a1a1a; --bg-surface: #202020; --bg-card: #262626; --bg-hover: #333333; --bg-input: #1f1f1f; --border: #3d3d3d; --border-accent: #0078d7; --text-primary: #ffffff; --text-secondary: #cfcfcf; --text-muted: #8a8a8a; --accent: #0078d7; --accent-glow: rgba(0,120,215,.4); --accent-rgb: 0,120,215; --accent-2: #2b98f0; --accent-3: #005a9e; --green: #107c10; --red: #e81123; --yellow: #ffb900; --orange: #ca5010; --danger: #e81123; --warning: #ffb900; --blue: #0078d7; --radius: 0; --radius-sm: 0; --shadow: none; --font-body: 'Segoe UI', 'Sora', sans-serif; --font-mono: 'Consolas', 'JetBrains Mono', monospace; --bg: var(--bg-root); --bg-2: var(--bg-surface); --card: var(--bg-card); --card-bg: var(--bg-card); --hover: var(--bg-hover); --text: var(--text-primary); --font: var(--font-body); } [data-theme="win10"] body { background: var(--bg-root); } /* Плоские прямоугольные плитки — никаких скруглений, никаких теней */ [data-theme="win10"] .card, [data-theme="win10"] .stat-card, [data-theme="win10"] .topbar, [data-theme="win10"] #sidebar, [data-theme="win10"] .modal, [data-theme="win10"] .nav-item, [data-theme="win10"] .btn, [data-theme="win10"] input, [data-theme="win10"] select, [data-theme="win10"] textarea { border-radius: 0 !important; box-shadow: none !important; } [data-theme="win10"] .card, [data-theme="win10"] .stat-card { background: var(--bg-card); border: 1px solid var(--border); transition: background .15s ease; } /* Живая плитка: при наведении плашка заливается акцентным цветом целиком — прямая отсылка к анимации плиток Start-меню Windows 10. */ [data-theme="win10"] .stat-card:hover { background: var(--accent); } [data-theme="win10"] .stat-card:hover * { color: #fff !important; } [data-theme="win10"] input, [data-theme="win10"] select, [data-theme="win10"] textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); } [data-theme="win10"] input:focus, [data-theme="win10"] select:focus, [data-theme="win10"] textarea:focus { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -1px; } /* Кнопки — плоская заливка, без градиента, hover — просто светлее/темнее (типичный Win10 flat-button) */ [data-theme="win10"] .btn { background: #333333; border: 1px solid #4d4d4d; color: var(--text-primary); } [data-theme="win10"] .btn:hover { background: #3f3f3f; border-color: var(--accent); } [data-theme="win10"] .btn:active { background: #2a2a2a; } [data-theme="win10"] .btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; } [data-theme="win10"] .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); } [data-theme="win10"] .nav-item:hover { background: var(--bg-hover); } [data-theme="win10"] .nav-item.active { background: var(--accent); color: #fff; } /* Тонкая цветная плашка слева на активном пункте — деталь из Win10 Settings/Mail */ [data-theme="win10"] .nav-item.active { border-left: 3px solid #fff; } [data-theme="win10"] .badge-red { background: var(--red); color: #fff; border-radius: 0; } [data-theme="win10"] .badge-green { background: var(--green); color: #fff; border-radius: 0; } [data-theme="win10"] .badge-blue, [data-theme="win10"] .badge-cyan { background: var(--accent); color: #fff; border-radius: 0; } [data-theme="win10"] .badge-yellow, [data-theme="win10"] .badge-orange { background: var(--yellow); color: #1a1a1a; border-radius: 0; } [data-theme="win10"] .badge-purple { background: #5c2d91; color: #fff; border-radius: 0; } [data-theme="win10"] .badge-gray { background: #5a5a5a; color: #fff; border-radius: 0; } [data-theme="win10"] ::-webkit-scrollbar-thumb { background: #4d4d4d; border-radius: 0; } [data-theme="win10"] .tab.active, [data-theme="win10"] .tab-item.active { background: transparent; border-bottom: 2px solid var(--accent); color: var(--accent); } /* ══════════════════════════════════════════════ WINDOWS 11 THEME (Fluent Design / Mica) Мягкие скруглённые углы, приглушённые пастельные акценты, лёгкая полупрозрачность материала Mica вместо стекла Aero, тонкие тени. ══════════════════════════════════════════════ */ [data-theme="win11"] { --bg-root: #202020; --bg-surface: rgba(255,255,255,.04); --bg-card: rgba(255,255,255,.055); --bg-hover: rgba(96,205,255,.12); --bg-input: rgba(255,255,255,.06); --border: rgba(255,255,255,.09); --border-accent: rgba(0,120,212,.6); --text-primary: #ffffff; --text-secondary: #d6d6d6; --text-muted: #9a9a9a; --accent: #60cdff; --accent-glow: rgba(96,205,255,.35); --accent-rgb: 96,205,255; --accent-2: #99e9ff; --accent-3: #0078d4; --green: #6ccb5f; --red: #ff99a4; --yellow: #fce100; --orange: #ff8c00; --danger: #ff99a4; --warning: #fce100; --blue: #60cdff; --radius: .5rem; --radius-sm: .35rem; --shadow: 0 .25rem 1rem rgba(0,0,0,.28); --font-body: 'Segoe UI Variable', 'Segoe UI', 'Sora', sans-serif; --font-mono: 'Cascadia Code', 'JetBrains Mono', monospace; --bg: var(--bg-root); --bg-2: var(--bg-surface); --card: var(--bg-card); --card-bg: var(--bg-card); --hover: var(--bg-hover); --text: var(--text-primary); --font: var(--font-body); } [data-theme="win11"] body { background: var(--bg-root); } [data-theme="win11"] .card, [data-theme="win11"] .stat-card, [data-theme="win11"] .topbar, [data-theme="win11"] #sidebar, [data-theme="win11"] .modal, [data-theme="win11"] .nav-item { background: var(--bg-card); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } [data-theme="win11"] input, [data-theme="win11"] select, [data-theme="win11"] textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); } [data-theme="win11"] input:focus, [data-theme="win11"] select:focus, [data-theme="win11"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* Кнопки Fluent — почти плоские, тонкая обводка снизу чуть светлее (акцентная линия) */ [data-theme="win11"] .btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-sm); color: var(--text-primary); transition: background .12s ease; } [data-theme="win11"] .btn:hover { background: rgba(255,255,255,.11); } [data-theme="win11"] .btn:active { background: rgba(255,255,255,.05); } [data-theme="win11"] .btn-primary { background: var(--accent-3); border: 1px solid var(--accent-3); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; } [data-theme="win11"] .btn-primary:hover { background: #1a86dc; } [data-theme="win11"] .nav-item:hover { background: var(--bg-hover); } /* Активный пункт меню — характерная скруглённая "пилюля" Fluent вместо прямоугольника */ [data-theme="win11"] .nav-item.active { background: rgba(96,205,255,.14); color: var(--accent); border-radius: var(--radius-sm); } [data-theme="win11"] .badge-red { background: rgba(255,153,164,.18); color: var(--red); border: 1px solid rgba(255,153,164,.35); border-radius: 999px; } [data-theme="win11"] .badge-green { background: rgba(108,203,95,.18); color: var(--green); border: 1px solid rgba(108,203,95,.35); border-radius: 999px; } [data-theme="win11"] .badge-blue, [data-theme="win11"] .badge-cyan { background: rgba(96,205,255,.16); color: var(--accent); border: 1px solid rgba(96,205,255,.35); border-radius: 999px; } [data-theme="win11"] .badge-yellow, [data-theme="win11"] .badge-orange { background: rgba(252,225,0,.16); color: #e8c400; border: 1px solid rgba(252,225,0,.35); border-radius: 999px; } [data-theme="win11"] .badge-purple { background: rgba(179,146,240,.18); color: #b392f0; border: 1px solid rgba(179,146,240,.35); border-radius: 999px; } [data-theme="win11"] .badge-gray { background: rgba(255,255,255,.09); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; } [data-theme="win11"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; } [data-theme="win11"] .tab.active, [data-theme="win11"] .tab-item.active { background: rgba(96,205,255,.12); border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 2px solid var(--accent); color: var(--accent); } /* ── Заявки на темы: окно «Проверить» ── */ .tcr-thumb { width:2.5rem; height:2.5rem; border-radius:.5rem; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; } .tcr-thumb-empty { background:var(--bg-card); border:1px dashed var(--border); color:var(--text-muted); } .tcr-preview { display:flex; gap:1rem; align-items:flex-end; margin-bottom:1rem; } .tcr-cap { font-size:.74rem; color:var(--text-muted); margin-bottom:.3rem; } .tcr-icon { width:5rem; height:5rem; border-radius:1rem; object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:1.6rem; } .tcr-banner { height:5rem; border-radius:.75rem; border:1px solid var(--border); background:var(--bg-card) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.8rem; } .tcr-checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; font-size:.86rem; } .tcr-checks li { display:flex; gap:.5rem; align-items:flex-start; } .tcr-meta { margin:0; max-height:15rem; overflow:auto; padding:.75rem; border-radius:.625rem; border:1px solid var(--border); background:rgba(0,0,0,.25); font-size:.74rem; line-height:1.45; white-space:pre; } .tcr-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; margin-top:1rem; }