/* === assets/css/base/_reset.css === */ /* ══════════════════════════════════════════════════════ base/_reset.css — Reset & base styles StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { overflow-y: auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); font-weight: 400; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; transition: var(--transition); } a:hover { color: var(--accent); } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } .main { padding: 24px; min-width: 0; } .container { max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .main { padding: 16px; } html, body { overflow-y: auto; overflow-y: auto; } } /* Prevent iOS zoom on input focus */ @media (max-width: 768px) { input, select, textarea { font-size: 16px !important; } } /* === assets/css/base/_typography.css === */ /* ══════════════════════════════════════════════════════ base/_typography.css — Typography scale StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ /* Fonts loaded via in PHP — Inter + Rajdhani */ /* Base font settings are in _reset.css body rule */ /* This file reserved for future typography scale */ /* === assets/css/tokens/_dark.css === */ /* ══════════════════════════════════════════════════════ tokens/_dark.css — Design tokens: dark theme (default) StreamSpace CSS Architecture v3 Dark theme — default. All --var names are canonical. ══════════════════════════════════════════════════════ */ :root { /* ── Brand Accents (shared) ── */ --brand-cyan: #00D4FF; --brand-blue: #4169E1; --brand-gradient: linear-gradient(135deg, #00D4FF 0%, #4169E1 100%); /* ── Night Theme (Default) ── */ --bg-primary: #0A0A0F; /* Deep Space */ --bg-secondary: #121223; /* Panel */ --bg-tertiary: #16162A; /* Panel + slightly lighter */ --bg-hover: #1C1C34; --bg-card: var(--bg-secondary); --text-primary: #FFFFFF; --text-secondary: #A0A8C0; --text-muted: #5A5F78; --border: #1A1A28; /* Stroke */ --border-light: #24243A; /* ── Accents ── */ --accent: var(--brand-cyan); --accent-hover: #00BFEF; --success: #00D26A; --warning: #FFB800; --live: #FF3B3B; --star: #FFD700; /* ── Effects ── */ --glow: 0 0 20px rgba(0, 212, 255, 0.25); --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6); /* ── Radii (Brandbook: 12-16px cards, 999px pills) ── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --transition: all 0.2s ease; /* ── UI v2 Shorthand Tokens (redesigned pages: index, browse, live) ── */ --bg: #0A0A0F; /* = --bg-primary */ --bg2: #0F0F18; --bg3: #141420; --surface: #1a1a2e; /* = --bg-tertiary */ --cyan: #00D4FF; /* = --brand-cyan */ --blue: #0066FF; --green: #00C896; --yellow: #FFB800; /* = --warning */ --text: #F0F0FF; /* = --text-primary (warmer) */ --muted: #6B6B8A; /* = --text-muted (warmer) */ --brand-gradient: linear-gradient(135deg, #00D4FF 0%, #4169E1 100%); --grad: linear-gradient(135deg, #00D4FF 0%, #4169E1 100%); /* NOTE: --grad is alias for --brand-gradient, kept for legacy inline styles */ --chat-width: 400px; /* ── Alias tokens (style-additions components) ── */ --clr-text: var(--text-primary); --clr-bg: var(--bg-primary); --clr-surface: var(--bg-secondary, #0F0F18); --clr-hover: rgba(255,255,255,.06); --clr-border: rgba(255,255,255,.07); --clr-muted: var(--text-muted); --clr-primary: var(--accent-cyan, #00D4FF); --border-color: var(--clr-border); --accent-cyan: #00D4FF; --accent-blue: #0066FF; --accent-yellow: #FFB800; --live-light: #FF6B6B; /* RGB triplets for rgba() use: rgba(var(--cyan-rgb), 0.08) */ --cyan-rgb: 0, 212, 255; --live-rgb: 255, 59, 59; --blue-rgb: 0, 102, 255; } /* === assets/css/tokens/_light.css === */ /* ══════════════════════════════════════════════════════ tokens/_light.css — Design tokens: light theme StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ /* ── Day Theme (Light) ── */ [data-theme="light"] { --bg-primary: #FFFFFF; /* Base */ --bg-secondary: #F6F7FB; /* Panel */ --bg-tertiary: #EDEEF4; --bg-hover: #E4E5ED; --text-primary: #0A0C14; --text-secondary: #4A5068; --text-muted: #828AA0; --border: #E6E6EE; /* Stroke */ --border-light: #D8D8E4; --glow: 0 0 20px rgba(65, 105, 225, 0.15); --shadow: 0 4px 24px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1); --bg: #F0F2F8; --bg2: #E8EAF2; --bg3: #FFFFFF; --surface: #FFFFFF; --text: #0A0A1F; --muted: #7070A0; /* ── Alias tokens (style-additions components) ── */ --clr-text: var(--text-primary); --clr-bg: var(--bg-primary); --clr-surface: #F5F5FA; --clr-hover: rgba(0,0,0,.05); --clr-border: rgba(0,0,0,.08); --clr-muted: var(--text-muted); --border-color: var(--clr-border); --accent-cyan: #4169E1; --cyan: #4169E1; --clr-primary: var(--accent-cyan); --brand-cyan: #4169E1; --accent-blue: #0066FF; --accent-yellow: #FFB800; --live-light: #FF6B6B; /* RGB triplets for rgba() use: rgba(var(--cyan-rgb), 0.08) */ --cyan-rgb: 65, 105, 225; --live-rgb: 255, 59, 59; --blue-rgb: 0, 102, 255; } /* --grad not overridden — same gradient both themes */ /* Light theme: explicit form field overrides */ [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea, [data-theme="light"] .auth-input, [data-theme="light"] .report-select, [data-theme="light"] .report-textarea, [data-theme="light"] .comment-input-area textarea { background: #FFFFFF; color: #0A0C14; border-color: #D8D8E4; } [data-theme="light"] .form-group select option, [data-theme="light"] .report-select option { background: #FFFFFF; color: #0A0C14; } /* === assets/css/blocks/_btn.css === */ /* ══════════════════════════════════════════════════════ blocks/_btn.css — Button component StreamSpace CSS Architecture v3 Single source of truth for all buttons. Never redefine elsewhere. ══════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; font-size: 14px; font-weight: 600; border-radius: var(--radius-md); border: none; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-primary { background: var(--brand-gradient); color: #fff; border: none; } .btn-primary:hover { box-shadow: var(--glow); transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--border-light); background: var(--bg-hover); } /* Following button — muted by default, red on hover */ .btn-secondary.following, .btn.following { color: var(--text-muted); border-color: var(--border); } .btn-secondary.following:hover, .btn.following:hover { background: rgba(var(--live-rgb),0.08); border-color: rgba(var(--live-rgb),0.4); color: var(--live); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); } .btn-danger { background: var(--live); color: #fff; } .btn-sm { padding: 6px 14px; font-size: 13px; } .btn-lg { padding: 14px 28px; font-size: 16px; } .btn-block { width: 100%; } /* === assets/css/blocks/_badge.css === */ /* ══════════════════════════════════════════════════════ blocks/_badge.css — Badge & status indicator components StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ /* ── Generic badge ── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.3px; } .badge-live { background: var(--live); color: #fff; } .badge-premium { background: linear-gradient(135deg, var(--star), var(--warning)); color: #000; } .badge-verified { background: var(--brand-gradient); color: #fff; } .badge-admin { background: var(--accent-cyan); color: #000; } .badge-mod { background: var(--success); color: #000; } .badge-vip { background: linear-gradient(135deg, var(--star), var(--warning)); color: #000; } /* ── Stream/video overlay badges ── */ .live-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; background: var(--live); border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; } .short-badge { position: absolute; top: 8px; left: 8px; background: var(--brand-gradient); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .vertical-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; } /* Hidden badge — dark overlay variant (thumbnail area) NOTE: style-additions.css had a duplicate with different positioning (top/left + red bg). style.css version (top/right + rgba dark bg) is canonical — kept here. */ .hidden-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.8); color: var(--live-light); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } /* ── Admin status badges ── */ .status-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .status-pending { background: var(--warning); color: #000; } .status-approved { background: var(--success); color: #000; } .status-hidden { background: var(--live); color: #fff; } /* ── Video card action buttons overlay ── */ .video-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s; } .stream-card:hover .video-card-actions { opacity: 1; } /* ── Chat mod action buttons ── */ .chat-mod-actions { display: inline-flex; gap: 2px; margin-left: 4px; opacity: 0; transition: opacity 0.15s; } .chat-msg-line:hover .chat-mod-actions { opacity: 1; } .chat-mod-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; color: var(--text-muted); transition: color 0.15s; } .chat-mod-btn:hover { color: var(--live); } /* === assets/css/blocks/_stars.css === */ /* ══════════════════════════════════════════════════════ blocks/_stars.css — Stars balance display badge StreamSpace CSS Architecture v3 style-additions.css had duplicate — removed. style.css version is canonical. ══════════════════════════════════════════════════════ */ .stars-display { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; background: linear-gradient(135deg, var(--star), var(--warning)); color: #000; font-weight: 700; font-size: 13px; border-radius: var(--radius-pill); } /* === assets/css/blocks/_toast.css === */ /* ══════════════════════════════════════════════════════ blocks/_toast.css — Toast notification component StreamSpace CSS Architecture v3 Source: style-additions.css ══════════════════════════════════════════════════════ */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.2); pointer-events: all; animation: toast-in .3s ease forwards; max-width: 320px; backdrop-filter: blur(12px); } .toast.toast-success { border-color: var(--success); } .toast.toast-error { border-color: var(--live); } .toast.toast-info { border-color: var(--accent); } .toast.toast-out { animation: toast-out .3s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } } /* === assets/css/blocks/_dropdown.css === */ /* ══════════════════════════════════════════════════════ blocks/_dropdown.css — Generic dropdown menu component StreamSpace CSS Architecture v3 Source: style-additions.css ══════════════════════════════════════════════════════ */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 150px; padding: 8px 0; z-index: 1000; box-shadow: var(--shadow); } .dropdown-menu.show { display: block; } .dropdown-item { display: block; padding: 8px 16px; color: var(--text-secondary); font-size: 14px; transition: var(--transition); } .dropdown-item:hover { background: var(--bg-tertiary); color: var(--text-primary); } /* === assets/css/blocks/_lang-switcher.css === */ /* ══════════════════════════════════════════════════════ blocks/_lang-switcher.css — Language switcher components StreamSpace CSS Architecture v3 Two implementations exist — TODO: unify into single component in Phase 3 ══════════════════════════════════════════════════════ */ /* ── Lang switcher v1 (style.css — used in older pages) ── */ .lang-dropdown { position: relative; z-index: 1000; } .lang-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; font-size: 16px; transition: var(--transition); } .lang-btn:hover { background: var(--bg-hover); } .lang-btn .arrow { font-size: 10px; opacity: 0.6; } .lang-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 160px; padding: 6px 0; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 1001; } .lang-menu.show { display: block; } .lang-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-secondary); font-size: 14px; transition: var(--transition); text-decoration: none; } .lang-item:hover { background: var(--bg-hover); color: var(--text-primary); } .lang-item.active { background: var(--accent); color: #fff; } .lang-item .flag { font-size: 18px; } .lang-item .name { flex: 1; } /* ── Lang switcher v2 (style-additions.css — used in header/burger) ── */ /* NOTE: .lang-dropdown here overrides v1 .lang-dropdown — further scoping in _burger.css */ .lang-switcher { position: relative; } .lang-current { background: none; border: none; cursor: pointer; font-size: 20px; padding: 4px; border-radius: 6px; transition: background .15s; line-height: 1; } .lang-current:hover { background: var(--clr-hover); } .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 10px; padding: 6px; width: max-content; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.3); } .lang-dropdown.open { display: block; } .lang-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: var(--clr-text); text-decoration: none; font-size: 14px; white-space: nowrap; } .lang-option:hover { background: var(--clr-hover); } .lang-option.active { color: var(--clr-primary); } /* TODO: unify into single component in Phase 3 */ /* ── Burger panel context override ── */ .burger-top-row .lang-switcher { position: relative; } .burger-top-row .lang-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 200; } /* === assets/css/blocks/_empty-state.css === */ /* ══════════════════════════════════════════════════════ blocks/_empty-state.css — Empty state components StreamSpace CSS Architecture v3 Two variants exist — TODO: unify into .empty-state in Phase 3 ══════════════════════════════════════════════════════ */ /* ── Empty state v1 (style.css) ── */ .empty { text-align: center; padding: 60px 20px; } .empty-icon { font-size: 64px; margin-bottom: 16px; opacity: 0.4; } .empty h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; } .empty p { color: var(--text-muted); } /* ── Empty state v2 (style-additions.css) ── */ .empty-state { text-align: center; padding: 64px 24px; color: var(--text-muted); } .empty-state .empty-icon { font-size: 56px; margin-bottom: 16px; } .empty-state h3 { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .empty-state p { font-size: 14px; max-width: 300px; margin: 0 auto; line-height: 1.6; } /* TODO: unify into .empty-state in Phase 3 */ /* === assets/css/blocks/_form.css === */ /* ══════════════════════════════════════════════════════ blocks/_form.css — Form controls & alert messages StreamSpace CSS Architecture v3 Source: style.css ══════════════════════════════════════════════════════ */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 16px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } /* ── Alerts ── */ .alert { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14px; font-weight: 500; } .alert-success { background: rgba(0, 210, 106, 0.12); border: 1px solid rgba(0, 210, 106, 0.25); color: var(--success); } .alert-error { background: rgba(255, 59, 92, 0.12); border: 1px solid rgba(255, 59, 92, 0.25); color: var(--live); } .alert-warning { background: rgba(255, 184, 0, 0.12); border: 1px solid rgba(255, 184, 0, 0.25); color: var(--warning); } /* === assets/css/blocks/_theme-toggle.css === */ /* ══════════════════════════════════════════════════════ blocks/_theme-toggle.css — Theme toggle button StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ /* ── .theme-toggle (older pages — style.css) ── */ .theme-toggle { width: 38px; height: 38px; border: 1px solid var(--border); background: var(--bg-tertiary); border-radius: var(--radius-md); cursor: pointer; font-size: 16px; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: var(--bg-hover); } /* ── .theme-btn (header — header.css base styles) ── */ .theme-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; color: var(--text-primary); } /* === assets/css/blocks/_stream-card.css === */ /* ══════════════════════════════════════════════════════ blocks/_stream-card.css — Stream/video card component StreamSpace CSS Architecture v3 Source: style.css + style-additions.css ══════════════════════════════════════════════════════ */ .stream-card { display: block; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .stream-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stream-thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-tertiary); overflow: hidden; } .stream-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .stream-card:hover .stream-thumb img { transform: scale(1.04); } .viewers-badge { position: absolute; bottom: 10px; left: 10px; padding: 4px 8px; background: rgba(0, 0, 0, 0.75); border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; backdrop-filter: blur(4px); } .stream-info { padding: 14px; display: flex; gap: 12px; align-items: flex-start; } .stream-info .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .stream-meta { min-width: 0; } .stream-meta h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } .stream-meta .channel { font-size: 13px; color: var(--text-secondary); } .stream-meta .channel a { color: var(--text-secondary); } .stream-meta .channel a:hover { color: var(--accent); } .stream-meta .category { font-size: 12px; color: var(--text-muted); } /* ── Live pulse dot ── */ .live-dot { width: 8px; height: 8px; background: var(--live); border-radius: 50%; margin-left: auto; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Hidden video state ── */ .hidden-video { opacity: 0.6; } .hidden-video:hover { opacity: 1; } /* ── Video action buttons (profile page) ── */ .video-actions { display: flex; gap: 4px; } .video-actions .btn-sm { padding: 6px 10px; font-size: 14px; } /* === assets/css/blocks/_auth-box.css === */ /* ══════════════════════════════════════════════════════ blocks/_auth-box.css — Auth page layout & box StreamSpace CSS Architecture v3 Source: style.css ══════════════════════════════════════════════════════ */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg-primary); } .auth-box { width: 100%; max-width: 420px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px; } .auth-box h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; text-align: center; } .auth-box .subtitle { color: var(--text-muted); text-align: center; margin-bottom: 32px; } /* === assets/css/blocks/_site-header.css === */ /* ══════════════════════════════════════════════════════ blocks/_site-header.css — Site header structure & nav StreamSpace CSS Architecture v3 Source: assets/css/header.css (lines 1–123) ══════════════════════════════════════════════════════ */ /* ── Base header ── */ .site-header { position: sticky; top: 0; z-index: 100; min-height: 60px; overflow: hidden; background: rgba(10,10,15,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } [data-theme="light"] .site-header { background: rgba(240,242,248,0.95); } .site-header__inner { display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 60px; min-height: 60px; flex-shrink: 0; max-width: 1440px; margin: 0 auto; } /* ── Logo ── */ .site-header__logo { flex-shrink: 0; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 17px; } .site-header__logo img { height: 28px; width: auto; } .site-header__logo .logo-light { display: none; } [data-theme="light"] .site-header__logo .logo-dark { display: none; } [data-theme="light"] .site-header__logo .logo-light { display: block; } /* ── Center slot ── */ .site-header__center { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } /* ── Actions (hidden on mobile) ── */ .site-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ── Page title (dashboard-style pages) ── */ .site-header__page-title { font-size: 15px; font-weight: 600; color: var(--text-secondary); } /* ── Nav links (inside center) ── */ .ss-nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; } .ss-nav-links a { display: block; padding: 6px 14px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: all .2s; } .ss-nav-links a:hover, .ss-nav-links a.active { color: var(--text); background: var(--surface); } .ss-nav-links a.active { color: var(--cyan); } /* ── Search box (inside center) ── */ .ss-search { flex: 1; max-width: 400px; margin: 0 auto; position: relative; } .ss-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 16px 8px 38px; color: var(--text); font-size: 14px; outline: none; transition: border-color .2s; box-sizing: border-box; } .ss-search input:focus { border-color: rgba(var(--cyan-rgb), .4); } .ss-search input::placeholder { color: var(--muted); } .ss-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .4; pointer-events: none; } @media (max-width: 1200px) { .site-header__actions { display: none; } .site-header__center { display: none; } } .site-header__logo-name { font-size: 16px; font-weight: 700; color: var(--accent-cyan); letter-spacing: -0.3px; } [data-theme="light"] .site-header__logo-name { color: var(--accent-cyan); } @media (min-width: 1201px) { .site-header__logo-name { display: none; } } /* === assets/css/blocks/_public-bottom-nav.css === */ :root { --nav-height: 56px; } /* ── Public bottom nav (mobile only) ─────────────────────────────────────── */ .pbn { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 0 4px env(safe-area-inset-bottom); flex-shrink: 0; min-height: 56px; justify-content: space-around; align-items: stretch; } /* ── Nav items ── */ .pbn__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 6px 4px; font-size: 10px; font-weight: 500; color: var(--text-muted); text-decoration: none; border: none; background: none; cursor: pointer; font-family: inherit; transition: color 0.15s; white-space: nowrap; } .pbn__item.active, .pbn__item:hover { color: var(--accent-cyan); } /* ── Overlay ── */ .pbn-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; } .pbn-overlay--open { display: block; } /* ── Drawer — slide-in panel (below header, above bottom nav) ── */ /* Default position: right side (nav-pos-br / nav-pos-tr) */ .pbn-drawer { position: fixed; top: 0; /* overridden by JS */ right: 0; width: max-content; min-width: 220px; background: var(--bg-secondary); border-left: 1px solid var(--border-color); z-index: 9998; transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease; display: flex; flex-direction: column; overflow: hidden; } .pbn-drawer--open { transform: translateX(0); visibility: visible; } /* Left-side positions */ body.nav-pos-tl .pbn-drawer, body.nav-pos-bl .pbn-drawer { left: 0; right: auto; border-right: 1px solid var(--border-color); border-left: none; transform: translateX(-100%); } body.nav-pos-tl .pbn-drawer--open, body.nav-pos-bl .pbn-drawer--open { transform: translateX(0); visibility: visible; } /* ── Drawer header ── */ .pbn-drawer__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .pbn-drawer__close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; flex-shrink: 0; transition: color 0.15s; } .pbn-drawer__close:hover { color: var(--text-primary); } /* ── Search ── */ .pbn-search { display: flex; align-items: center; gap: 8px; flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 10px; } .pbn-search svg { flex-shrink: 0; color: var(--text-muted); } .pbn-search__input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; min-width: 0; } .pbn-search__input::placeholder { color: var(--text-muted); } /* ── Drawer body ── */ .pbn-drawer__body { padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; justify-content: flex-start; } /* Bottom-anchored positions — content sticks to bottom */ body.nav-pos-br .pbn-drawer__body, body.nav-pos-bl .pbn-drawer__body { justify-content: flex-end; } /* ── Lang + Theme row ── */ .pbn-toggles-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; } .pbn-lang-switcher { position: relative; } .pbn-lang-switcher .lang-current { background: none; border: none; cursor: pointer; font-size: 20px; padding: 6px 8px; border-radius: 8px; color: var(--text-primary); font-family: inherit; transition: background 0.15s; } .pbn-lang-switcher .lang-current:hover { background: var(--bg-tertiary); } .pbn-lang-switcher .lang-dropdown { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1100; display: none; min-width: 160px; } .pbn-lang-switcher .lang-dropdown.open { display: flex; flex-direction: column; } .pbn-theme-btn { background: none; border: none; cursor: pointer; font-size: 20px; padding: 6px 8px; border-radius: 8px; color: var(--text-primary); font-family: inherit; transition: background 0.15s; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pbn-theme-btn:hover { background: var(--bg-tertiary); } /* ── User row ── */ .pbn-user-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .pbn-user-row__stars { font-size: 13px; font-weight: 600; color: var(--star); flex-shrink: 0; } .pbn-user-row__name { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pbn-user-row__name:hover { color: var(--accent-cyan); } /* ── Divider ── */ .pbn-divider { height: 1px; background: var(--border-color); margin: 6px 0; } /* ── Nav links ── */ .pbn-nav { display: flex; flex-direction: column; gap: 2px; } .pbn-nav__link { display: block; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; } .pbn-nav__link:hover { background: var(--bg-tertiary); color: var(--text-primary); } .pbn-nav__link--accent { color: var(--accent-cyan); } /* ── Position section ── */ .pbn-pos-section { padding-top: 4px; } .pbn-pos-dropdown { position: relative; } .pbn-pos-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; } .pbn-pos-toggle:hover { color: var(--text-primary); } .pbn-pos-dropdown__menu { display: none; position: absolute; bottom: calc(100% + 4px); left: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; gap: 4px; grid-template-columns: auto auto; z-index: 10; } .pbn-pos-dropdown__menu.open { display: grid; } .pbn-pos-btn { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-muted); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .pbn-pos-btn:hover { border-color: var(--text-muted); color: var(--text-primary); } .pbn-pos-btn.active { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.06); } /* ── Show on mobile only ── */ @media (max-width: 1200px) { .pbn { display: flex; } /* Push page content up to avoid overlap */ .site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } .pbn-nav__link--logout { color: var(--text-primary); font-weight: 600; border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 12px; } /* === assets/css/blocks/_modal.css === */ /* ══════════════════════════════════════════════════════ blocks/_modal.css — More menu + Report modal StreamSpace CSS Architecture v3 Single source of truth. Previously duplicated in _profile.css, _watch.css, and _live.css. ══════════════════════════════════════════════════════ */ /* ── More menu ── */ .more-menu-wrap { position: relative; display: inline-block; } .more-menu-btn { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 12px; cursor: pointer; color: var(--text-muted); font-size: 16px; letter-spacing: 2px; transition: color .15s, background .15s; line-height: 1; } .more-menu-btn:hover { color: var(--text-primary); background: var(--surface); } .more-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; min-width: 160px; padding: 4px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.5); } .more-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: none; border: none; cursor: pointer; color: var(--text-primary); font-size: 14px; text-align: left; border-radius: 6px; transition: background .15s; } .more-menu-item:hover { background: var(--bg-primary); } .more-menu-item.danger { color: var(--live-light); } .more-menu-item.danger:hover { background: rgba(var(--live-rgb), .08); } /* ── Report modal ── */ .report-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .report-modal-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px 28px 24px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); } .report-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .report-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); } .report-modal-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-muted); padding: 2px 6px; line-height: 1; border-radius: 6px; } .report-modal-close:hover { color: var(--text-primary); background: var(--bg-primary); } .report-form-group { margin-bottom: 16px; } .report-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } .report-select, .report-textarea { width: 100%; padding: 10px 12px; border-radius: 9px; background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; box-sizing: border-box; transition: border-color .2s; font-family: inherit; resize: vertical; } .report-select:focus, .report-textarea:focus { outline: none; border-color: var(--accent-cyan); } .report-actions { display: flex; gap: 10px; margin-top: 20px; } .report-btn-submit { flex: 1; padding: 11px; border: none; border-radius: 9px; cursor: pointer; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); color: #fff; font-size: 14px; font-weight: 700; transition: opacity .2s; } .report-btn-submit:hover { opacity: .88; } .report-btn-submit:disabled { opacity: .45; cursor: not-allowed; } .report-btn-cancel { padding: 11px 18px; border: 1px solid var(--border-color); border-radius: 9px; background: none; cursor: pointer; color: var(--text-muted); font-size: 14px; } .report-btn-cancel:hover { background: var(--bg-primary); } .report-success-msg { text-align: center; padding: 16px 0 8px; color: var(--success); font-size: 15px; font-weight: 600; } /* === assets/css/blocks/_site-footer.css === */ /* ══════════════════════════════════════════════════════ blocks/_site-footer.css — Site footer StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ .site-footer{background:var(--bg-secondary);border-top:1px solid var(--border);margin-top:auto;font-size:14px} .footer-top{max-width:1200px;margin:0 auto;padding:40px 24px 24px;display:flex;gap:48px;justify-content:space-between;flex-wrap:wrap} .footer-brand-col{max-width:280px} .footer-logo-link{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--text-primary);text-decoration:none;margin-bottom:12px} .footer-logo-link img{border-radius:6px} .footer-desc{color:var(--text-muted);font-size:13px;line-height:1.6;margin-bottom:16px} .footer-social{display:flex;gap:8px} .social-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border);transition:all .2s} .social-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,0.08)} .footer-links-row{display:flex;gap:48px} .footer-col{display:flex;flex-direction:column;gap:8px} .footer-col h4{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:4px} .footer-col a{color:var(--text-secondary);text-decoration:none;font-size:13px;transition:color .15s} .footer-col a:hover{color:var(--accent)} .footer-divider{max-width:1200px;margin:0 auto;height:1px;background:var(--border)} .footer-legal{max-width:1200px;margin:0 auto;padding:16px 24px;text-align:center} .footer-legal__company{font-size:12px;font-weight:600;color:var(--text-secondary);margin:0 0 6px} .footer-legal__text{font-size:11px;color:var(--text-muted);line-height:1.6;margin:0} .footer-bottom{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer-copy{color:var(--text-muted);font-size:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .footer-sep{opacity:0.4} .footer-lang-row{display:flex;gap:4px} .footer-lang-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:16px;text-decoration:none;transition:all .15s;border:1px solid transparent} .footer-lang-btn:hover{background:var(--bg-tertiary);border-color:var(--border)} .footer-lang-btn.active{background:var(--bg-tertiary);border-color:var(--accent);box-shadow:0 0 0 1px rgba(0,212,255,0.2)} @media(max-width:640px){ .footer-top{flex-direction:column;gap:20px} .footer-brand-col{max-width:100%} .footer-links-row{flex-wrap:wrap;gap:24px} .footer-col{min-width:120px;flex:1 1 120px} .footer-bottom{flex-direction:column;gap:12px;align-items:flex-start} .footer-lang-row{flex-wrap:wrap;gap:8px} } /* === assets/css/blocks/_bugrep.css === */ /* ══════════════════════════════════════════════════════ blocks/_bugrep.css — Bug report FAB + modal StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ .bugrep-fab { position: fixed; bottom: 24px; right: 24px; z-index: 10000; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; transition: transform .2s, box-shadow .2s, border-color .2s; color: var(--text-muted); } .bugrep-fab:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.5); border-color: var(--accent-cyan); color: var(--accent-cyan); } .bugrep-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; z-index: 10001; padding: 20px; } .bugrep-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 18px; padding: 28px 28px 24px; max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.7); animation: bugrep-pop .2s cubic-bezier(.34,1.56,.64,1); } @keyframes bugrep-pop { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} } .bugrep-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .bugrep-title { font-size: 16px; font-weight: 700; color: var(--text-primary); } .bugrep-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-muted); padding: 2px 6px; line-height: 1; border-radius: 6px; } .bugrep-close:hover { color: var(--text-primary); } .bugrep-textarea { width: 100%; padding: 12px 14px; border-radius: 10px; box-sizing: border-box; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-size: 14px; font-family: inherit; resize: vertical; min-height: 110px; line-height: 1.55; transition: border-color .2s; } .bugrep-textarea:focus { outline: none; border-color: var(--accent-cyan); } .bugrep-textarea::placeholder { color: var(--text-muted); } .bugrep-actions { display: flex; gap: 10px; margin-top: 16px; } .bugrep-submit { flex: 1; padding: 11px; border: none; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); color: #fff; font-size: 14px; font-weight: 700; transition: opacity .2s; } .bugrep-submit:disabled { opacity: .45; cursor: not-allowed; } .bugrep-submit:not(:disabled):hover { opacity: .88; } .bugrep-cancel { padding: 11px 18px; border: 1px solid var(--border); border-radius: 10px; background: none; cursor: pointer; color: var(--text-muted); font-size: 14px; } .bugrep-cancel:hover { background: var(--bg-primary); } .bugrep-success { text-align: center; padding: 20px 0 12px; color: var(--success); font-size: 15px; font-weight: 600; line-height: 1.6; } .bugrep-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .bugrep-cat { background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 12px; padding: 16px 12px; font-size: 15px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: all .15s; text-align: center; } .bugrep-cat:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: var(--bg-primary); } .bugrep-back { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 0 0 12px; display: block; } .bugrep-back:hover { color: var(--text-primary); } .bugrep-subtitle { font-size: 14px; color: var(--text-muted); margin: 6px 0 0; } .bugrep-success-icon { font-size: 48px; text-align: center; margin: 16px 0 8px; color: var(--accent-cyan); } @media (max-width: 768px) { .bugrep-fab { bottom: calc(var(--nav-height, 56px) + env(safe-area-inset-bottom) + 16px); } } @media (max-width: 890px) { .bugrep-fab { bottom: calc(var(--nav-height, 56px) + env(safe-area-inset-bottom) + 16px); } } /* === assets/css/blocks/_account-info.css === */ /* ══════════════════════════════════════════════════════ blocks/_account-info.css — Account info panel StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ .acct-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px;padding:24px} .acct-panel__title{font-size:15px;font-weight:600;margin-bottom:20px} .acct-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px} .acct-top-card{background:var(--bg-tertiary);border-radius:10px;padding:14px} .acct-top-card__label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px} .acct-top-card__value{font-size:15px;font-weight:600;color:var(--text-primary)} .acct-top-card__value--role{font-weight:700} .acct-section{margin-bottom:20px} .acct-section__label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px} .acct-section__grid{display:grid;gap:8px} .acct-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-tertiary);border-radius:8px;gap:8px;flex-wrap:wrap} .acct-row__label{font-size:13px;color:var(--text-secondary)} .acct-row__label--perm{color:var(--text-primary)} .acct-row__value{font-size:13px;font-weight:600;color:var(--text-primary);text-align:right} .acct-row__badge{font-size:12px;font-weight:600;flex-shrink:0} .acct-row__badge--yes{color:var(--success)} .acct-row__badge--no{color:var(--text-muted)} .acct-upgrade{padding:14px;background:var(--bg-tertiary);border-radius:10px;border-left:3px solid var(--brand-cyan)} .acct-upgrade__text{font-size:13px;color:var(--text-secondary);margin:0 0 12px} .acct-upgrade__status{font-size:12px;font-weight:600;color:var(--text-muted)} @media(max-width:480px){ .acct-top-grid{grid-template-columns:1fr} .acct-row{flex-direction:column;align-items:flex-start;gap:4px} .acct-row__value{text-align:left} } /* === assets/css/blocks/_comments.css === */ /* ══════════════════════════════════════════════════════ blocks/_comments.css — Comment edit / delete controls StreamSpace CSS Architecture v3 ══════════════════════════════════════════════════════ */ .comment-item-actions { display: flex; gap: 8px; margin-left: auto; } .comment-btn-edit, .comment-btn-delete, .comment-btn-save { background: none; border: none; cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 4px; color: var(--text-muted); transition: color 0.2s, background 0.2s; } .comment-btn-edit:hover { color: var(--accent-cyan); } .comment-btn-delete:hover { color: var(--clr-error, #e53e3e); } .comment-btn-save { color: var(--accent-cyan); font-weight: 600; } .comment-edit-textarea { width: 100%; min-height: 60px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input, var(--bg-secondary)); color: var(--text-primary); font-size: 14px; resize: vertical; } .comment-item-edited { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; } /* === assets/css/blocks/_tg-connect.css === */ .profile-owner-section, .profile-tg-section { max-width: 680px; margin: 24px auto; padding: 0 16px; } .profile-owner-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 12px; padding: 20px 24px; margin-bottom: 12px; } .profile-owner-card__title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; } .profile-owner-card__form { display: flex; flex-direction: column; gap: 8px; } .profile-owner-card__label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .profile-owner-card__input { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 12px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s; max-width: 300px; } .profile-owner-card__input:focus { border-color: var(--accent-cyan); } .profile-owner-card__hint { font-size: 12px; color: var(--text-muted); } .profile-owner-card__current { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .profile-owner-card__msg { font-size: 13px; min-height: 18px; } .profile-owner-card__msg--ok { color: #4ade80; } .profile-owner-card__msg--err { color: var(--accent-red, #ef4444); } .tg-connect-block { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-light); } .tg-connect-block--linked { flex-direction: row; align-items: center; justify-content: space-between; } .tg-connect-block__desc { font-size: 14px; color: var(--muted); } .tg-connect-block__command { font-family: monospace; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--accent-cyan, #00d4ff); padding: 8px 12px; background: var(--bg-primary); border-radius: 6px; text-align: center; user-select: all; transition: background .15s; } .tg-connect-block__command:hover { background: rgba(var(--cyan-rgb), .06); cursor: pointer; } .tg-connect-block__command--copied::after { content: ' ✓'; color: var(--accent-cyan); } .tg-connect-block__timer { font-size: 12px; color: var(--muted); text-align: center; } .tg-connect-block__instruction { font-size: 13px; color: var(--muted); } .tg-connect-block__actions { display: flex; gap: 8px; flex-wrap: wrap; } .tg-connect-block__connected { font-size: 14px; font-weight: 500; } .tg-prefs { display: flex; flex-direction: column; gap: 0; margin-top: 12px; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; } .tg-pref-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.15s; } .tg-pref-row:last-child { border-bottom: none; } .tg-pref-row:hover { background: var(--bg-secondary); } .tg-pref-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent-cyan, #00d4ff); cursor: pointer; } .tg-pref-row span:not(.tg-pref-status) { flex: 1; font-size: 14px; } .tg-pref-status { font-size: 12px; color: var(--muted); min-width: 16px; text-align: right; } .dash-card-subtitle { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 4px; } .tg-connect-block__btn:hover { border-color: rgba(var(--cyan-rgb), 0.3); background: rgba(var(--cyan-rgb), 0.04); transform: translateY(-1px); transition: all 0.15s; } /* === assets/css/blocks/_tg-bell.css === */ .tg-bell-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 16px; color: var(--text-muted); transition: all 0.15s; line-height: 1; } .tg-bell-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); } .tg-bell-btn--active { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(var(--cyan-rgb), 0.1); } .tg-bell-tooltip { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 12px; white-space: nowrap; color: var(--text-primary); pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* === assets/css/blocks/_tickets.css === */ /* ── Ticket list ─────────────────────────────────────────────────────────── */ .ticket-list { display: flex; flex-direction: column; gap: 8px; } .ticket-list__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; text-decoration: none; transition: border-color 0.15s, background 0.15s; cursor: pointer; } .ticket-list__item:hover { border-color: var(--accent-cyan); background: var(--bg-tertiary); } .ticket-list__meta { flex: 1; min-width: 0; } .ticket-list__subject { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .ticket-list__date { font-size: 11px; color: var(--text-muted); } .ticket-list__badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ── Status badges ── */ .ticket-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; } .ticket-status--open { background: rgba(52,211,153,0.12); color: #34d399; } .ticket-status--closed { background: var(--bg-tertiary); color: var(--text-muted); } .ticket-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-cyan); color: #000; font-size: 10px; font-weight: 700; } /* ── Ticket thread (message bubbles) ── */ .ticket-thread { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; } .ticket-message { display: flex; flex-direction: column; max-width: 75%; } .ticket-message--user { align-self: flex-end; align-items: flex-end; } .ticket-message--admin { align-self: flex-start; align-items: flex-start; } .ticket-message__body { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .ticket-message--user .ticket-message__body { background: var(--accent-cyan); color: #000; border-bottom-right-radius: 4px; } .ticket-message--admin .ticket-message__body { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-bottom-left-radius: 4px; } .ticket-message__time { font-size: 10px; color: var(--text-muted); margin-top: 3px; padding: 0 2px; } /* ── Reply form ── */ .ticket-reply { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-color); margin-top: 8px; } .ticket-reply__textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-family: inherit; line-height: 1.5; resize: vertical; min-height: 80px; outline: none; transition: border-color 0.15s; } .ticket-reply__textarea:focus { border-color: var(--accent-cyan); } /* ── Ticket closed state ── */ .ticket-closed-notice { padding: 10px 14px; background: var(--bg-tertiary); border-radius: 8px; font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 8px; } /* === assets/css/pages/_index.css === */ /* ═══════════════════════════════════════════════ pages/_index.css — Main index/home page ═══════════════════════════════════════════════ */ /* ── LAYOUT ───────────────────────────────────────── */ /* body is already flex-column in _reset.css */ .ss-layout { display: grid; grid-template-columns: 240px 1fr; flex: 1; max-width: 1600px; margin: 0 auto; width: 100%; } /* ── SIDEBAR ──────────────────────────────────────── */ .ss-aside { border-right: 1px solid var(--border); padding: 16px 10px; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; } .ss-aside::-webkit-scrollbar { width: 3px; } .ss-aside::-webkit-scrollbar-thumb { background: var(--border); } .sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 0 10px; margin-bottom: 6px; margin-top: 4px; } .ss-sidebar-sec { margin-bottom: 20px; } .streamer-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background .15s; text-decoration: none; color: var(--text); margin-bottom: 1px; } .streamer-item:hover { background: var(--surface); } .s-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: white; position: relative; overflow: hidden; } .s-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .s-avatar.live::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--live); animation: s-pulse 2s infinite; } @keyframes s-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.05); } } .s-info { flex: 1; min-width: 0; } .s-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-game { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-viewers{ font-size: 11px; color: var(--muted); white-space: nowrap; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: blink-dot 1.5s infinite; flex-shrink: 0; } @keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:.4} } .cat-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; transition: background .15s; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 1px; } .cat-item:hover { background: var(--surface); color: var(--text); } .cat-item.cat-active { color: var(--cyan); background: rgba(var(--cyan-rgb),.06); } .cat-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--grad); flex-shrink: 0; } /* ── MAIN ─────────────────────────────────────────── */ .ss-main { overflow: visible; min-width: 0; } /* ── HERO ─────────────────────────────────────────── */ .ss-hero { position: relative; overflow: hidden; height: 380px; display: block; text-decoration: none; cursor: pointer; animation: fadeUp .4s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg,#050510 0%,#0D0520 40%,#050A20 100%); } .hero-particles { position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 50%, rgba(var(--cyan-rgb),.07) 0%, transparent 45%), radial-gradient(circle at 85% 30%, rgba(var(--blue-rgb),.09) 0%, transparent 40%), radial-gradient(circle at 50% 80%, rgba(var(--live-rgb),.04) 0%, transparent 40%); } .hero-grid { position: absolute; inset: 0; opacity: .025; background-image: linear-gradient(rgba(var(--cyan-rgb),1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--cyan-rgb),1) 1px, transparent 1px); background-size: 50px 50px; } .hero-bottom-grad { position: absolute; bottom: 0; left: 0; right: 0; height: 70%; background: linear-gradient(to top, var(--bg) 0%, transparent 100%); } .hero-left-grad { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(to right, rgba(5,5,16,.9) 0%, transparent 100%); } .hero-thumb-area { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-thumb-area img { width: 100%; height: 100%; object-fit: cover; opacity: .25; filter: blur(4px); } .hero-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#0A0520,#1A0A3E); display: flex; align-items: center; justify-content: center; font-size: 120px; opacity: .15; } .hero-content { position: relative; z-index: 2; padding: 40px 40px 36px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; max-width: 600px; } .hero-live-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .live-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--live); color: white; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; letter-spacing: .5px; } .live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: white; animation: blink-dot 1.5s infinite; } .hero-viewers-badge { background: rgba(0,0,0,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.1); color: white; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 5px; } .hero-streamer-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .hero-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: white; border: 2px solid rgba(var(--live-rgb),.5); overflow: hidden; position: relative; } .hero-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .hero-streamer-name { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; } .hero-streamer-handle { font-size: 13px; color: var(--muted); } .hero-title { font-size: 18px; font-weight: 600; line-height: 1.35; margin-bottom: 12px; color: rgba(255,255,255,.9); } .hero-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .hero-tag { font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 600; } .tag-game { background: rgba(var(--cyan-rgb),.1); border: 1px solid rgba(var(--cyan-rgb),.2); color: var(--cyan); } .tag-cat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.5); } .hero-actions { display: flex; gap: 10px; } .hero-watch-btn { display: flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 10px; background: var(--grad); color: white; font-size: 15px; font-weight: 700; transition: all .2s; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(var(--cyan-rgb),.25); } .hero-watch-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(var(--cyan-rgb),.35); } .hero-follow-btn { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; } .hero-follow-btn:hover { background: rgba(255,255,255,.1); } /* ── CONTENT ──────────────────────────────────────── */ .ss-content { padding: 24px 24px 32px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .section-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .section-title .dot-live { color: var(--live); } .see-all { font-size: 13px; color: var(--muted); text-decoration: none; } .see-all:hover { color: var(--cyan); } /* ── LIVE GRID ────────────────────────────────────── */ .ss-live-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 36px; } .stream-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; text-decoration: none; color: var(--text); display: block; } .stream-card:hover { transform: translateY(-4px); border-color: rgba(var(--cyan-rgb),.25); box-shadow: 0 12px 40px rgba(0,0,0,.4); } .stream-card:nth-child(1) { animation: fadeUp .35s ease .05s both; } .stream-card:nth-child(2) { animation: fadeUp .35s ease .10s both; } .stream-card:nth-child(3) { animation: fadeUp .35s ease .15s both; } .stream-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .stream-thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .stream-thumb .thumb-img--blur { filter:blur(6px); transform:scale(1.08); } .thumb-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:52px; } .thumb-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.75)); } .thumb-top { position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; align-items:flex-start; } .thumb-bottom { position:absolute; bottom:10px; left:10px; right:10px; } .live-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--live); color: white; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; } .live-pill::before { content:''; width:5px; height:5px; border-radius:50%; background:white; animation:blink-dot 1.5s infinite; } .viewers-pill { background: rgba(0,0,0,.65); backdrop-filter: blur(4px); color: white; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; } .stream-title-ovl { font-size: 13px; font-weight: 600; color: white; text-shadow: 0 1px 4px rgba(0,0,0,.9); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .stream-body { padding: 12px 14px; } .stream-row { display: flex; gap: 10px; align-items: center; } .stream-av-sm { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:white; overflow:hidden; position:relative; } .stream-av-sm img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .stream-meta-text { flex:1; min-width:0; } .stream-streamer { font-size:13px; font-weight:700; } .stream-game { font-size:12px; color:var(--cyan); margin-top:1px; } .follow-mini { padding: 4px 10px; border-radius: 6px; background: rgba(var(--cyan-rgb),.08); border: 1px solid rgba(var(--cyan-rgb),.18); color: var(--cyan); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .2s; } .follow-mini:hover { background: rgba(var(--cyan-rgb),.18); } /* ── DIVIDER ──────────────────────────────────────── */ .ss-divider { height: 1px; background: var(--border); margin: 8px 0 28px; } /* ── VIDEO GRID ───────────────────────────────────── */ .ss-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .ss-popular-grid { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .ss-popular-grid::-webkit-scrollbar { display: none; } .ss-popular-grid .video-card { flex: 0 0 380px; min-width: 380px; scroll-snap-align: start; } .ss-popular-grid .video-thumb { height: auto; } .video-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .2s, border-color .2s; text-decoration: none; color: var(--text); } .video-card:hover { transform: translateY(-3px); border-color: rgba(var(--cyan-rgb),.2); } .video-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 32px; } .video-thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .video-thumb-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.6)); } .video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.8); color: white; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; } .video-body { padding: 10px 12px; } .video-row { display: flex; gap: 8px; align-items: flex-start; } .video-av { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:white; overflow:hidden; position:relative; } .video-av img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .video-info { flex:1; min-width:0; } .video-title { font-size: 12px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-meta { font-size: 11px; color: var(--muted); } /* ── AVATAR / THUMB GRADIENTS ─────────────────────── */ .c1 { background: linear-gradient(135deg,var(--live-light),var(--live)); } .c2 { background: linear-gradient(135deg,#4ECDC4,var(--accent-blue)); } .c3 { background: linear-gradient(135deg,#FFE66D,var(--live-light)); } .c5 { background: linear-gradient(135deg,var(--accent-cyan),var(--accent-blue)); } .c6 { background: linear-gradient(135deg,#FF9A9E,#A18CD1); } .g1 { background: linear-gradient(135deg,#0A0520,#1A0A3E); } .g2 { background: linear-gradient(135deg,#050A20,#0A1A3E); } .g3 { background: linear-gradient(135deg,#200A0A,#3E1A1A); } .g4 { background: linear-gradient(135deg,#0A1A0A,#1A3E1A); } /* ── EMPTY STATE ──────────────────────────────────── */ .ss-empty { text-align: center; padding: 60px 20px; color: var(--muted); } .ss-empty-icon { font-size: 48px; margin-bottom: 12px; } .ss-empty h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .ss-empty p { font-size: 14px; } /* ── SCROLLBAR ────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ── RESPONSIVE 768px ─────────────────────────────── */ @media (max-width: 768px) { .ss-layout { grid-template-columns: 1fr; } .ss-aside { display: none; } .ss-live-grid { grid-template-columns: repeat(2,1fr); } .ss-hero { height: 280px; } .hero-content { padding: 20px 20px 24px; max-width: 100%; } .hero-title { font-size: 15px; } .hero-streamer-name { font-size: 18px; } .hero-thumb-area { opacity: .5; } .ss-search { max-width: 180px; } .ss-popular-grid .video-card { flex: 0 0 280px; min-width: 280px; } .ss-popular-grid .video-thumb { height: auto; } } /* ── RESPONSIVE 480px ─────────────────────────────── */ @media (max-width: 480px) { .ss-video-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .ss-hero { height: 220px; } .hero-content { padding: 16px 16px 20px; } .hero-title { font-size: 14px; margin-bottom: 8px; } .hero-tags { display: none; } .hero-follow-btn { display: none; } .hero-watch-btn { padding: 9px 18px; font-size: 14px; } .hero-viewers-badge { display: none; } .ss-live-grid { grid-template-columns: 1fr; } .ss-content { padding: 16px 16px 24px; } .nav-user { display: none; } .stars-display { display: none; } .ss-popular-grid { padding-left: 16px; padding-right: 16px; } .ss-popular-grid .video-card { flex: 0 0 75vw; min-width: 0; } .ss-popular-grid .video-thumb { height: auto; } } /* Styled scrollbar for popular grid */ .ss-popular-grid { scrollbar-width: thin; scrollbar-color: rgba(var(--cyan-rgb), 0.4) rgba(255,255,255,0.05); padding-bottom: 12px; margin-bottom: 8px; } .ss-popular-grid::-webkit-scrollbar { height: 4px; } .ss-popular-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 2px; margin: 0 16px; } .ss-popular-grid::-webkit-scrollbar-thumb { background: rgba(var(--cyan-rgb), 0.4); border-radius: 2px; } .ss-popular-grid::-webkit-scrollbar-thumb:hover { background: rgba(var(--cyan-rgb), 0.6); } /* === assets/css/pages/_dashboard.css === */ /* ═══════════════════════════════════════════════ pages/_dashboard.css — User dashboard ═══════════════════════════════════════════════ */ /* ── Dashboard Layout ── */ .dash-body { display: flex; flex-direction: column; flex: 1; } .dash-layout { display: grid; grid-template-columns: 240px 1fr; flex: 1; align-items: stretch; max-width: 1200px; margin: 0 auto; width: 100%; } /* ── Sidebar ── */ .dash-aside { min-height: 100%; border-right: 1px solid var(--border-color); padding: 16px 10px; position: sticky; top: 60px; overflow-y: auto; background: var(--bg-primary); display: flex; flex-direction: column; } @media (min-width: 891px) { .dash-aside { min-height: 100%; height: calc(100vh - 60px); } } .dash-aside::-webkit-scrollbar { width: 3px; } .dash-aside::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } /* Status card */ .dash-status-card { margin: 0 2px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; } .dash-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .dash-status-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); } .dash-status-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; } .dash-status-badge.offline { background: rgba(107,107,138,0.15); color: var(--text-muted); } .dash-status-badge.live { background: rgba(var(--live-rgb),0.15); color: var(--live); } .dash-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dash-status-dot.live { animation: blink 1.5s infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} } .dash-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dash-mini-stat { background: var(--bg-primary); border-radius: 8px; padding: 8px 10px; } .dash-mini-stat-val { font-size: 16px; font-weight: 700; line-height: 1.2; } .dash-mini-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; } /* Sidebar nav */ .dash-nav-section { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); padding: 0 12px; margin: 12px 0 6px; } .dash-nav-divider { height: 1px; background: var(--border-color); margin: 6px 0; } .dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; transition: all 0.15s; text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 500; margin-bottom: 2px; } .dash-nav-item:hover { background: var(--bg-secondary); color: var(--text-primary); } .dash-nav-item.active { background: rgba(var(--cyan-rgb),0.1); color: var(--accent-cyan); border: 1px solid rgba(var(--cyan-rgb),0.15); } /* ── Main Content ── */ .dash-main { background: var(--bg-primary); min-width: 0; } .dash-page { padding: 28px 32px; } .dash-page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .dash-page-title { font-family: 'Rajdhani', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--text-primary); } .dash-page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 3px; } /* ── Stats Grid ── */ .dash-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; } .dash-stat-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 16px 18px; } .dash-stat-card.cyan .dash-stat-val { color: var(--star); } .dash-stat-card.green .dash-stat-val { color: var(--clr-success); } .dash-stat-card.yellow .dash-stat-val { color: var(--clr-warn); } .dash-stat-card.red .dash-stat-val { color: var(--live); } .dash-stat-lbl { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.5px; } .dash-stat-val { font-size: 24px; font-weight: 700; font-family: 'Rajdhani', sans-serif; line-height: 1; } /* ── Cards ── */ .dash-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; margin-bottom: 16px; overflow: hidden; } .dash-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .dash-card-title { font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); margin-bottom: 16px; } .dash-card-subtitle { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 10px; } /* ── OBS/Stream Key fields ── */ .obs-field { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .obs-field-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .obs-field-value { display: flex; align-items: center; gap: 10px; } .obs-field-value span { font-size: 13px; font-family: monospace; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .key-hidden { letter-spacing: 2px; color: var(--text-muted); } .copy-btn { flex-shrink: 0; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; transition: all 0.2s; white-space: nowrap; } .copy-btn:hover { border-color: rgba(var(--cyan-rgb),0.3); color: var(--accent-cyan); } /* OBS guide steps */ .guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; } .guide-step { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-primary); border-radius: 10px; padding: 12px; } .step-num { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; } .step-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); } .step-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; } /* ── Video List ── */ .dash-video-list { display: flex; flex-direction: column; gap: 0; } .dash-video-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .dash-video-row:last-child { border-bottom: none; } .dash-video-thumb { width: 100px; flex-shrink: 0; aspect-ratio: 16/9; background: var(--surface); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden; position: relative; } .dash-video-thumb img { width: 100%; height: 100%; object-fit: cover; } .dash-video-status { position: absolute; top: 4px; left: 4px; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; } .dash-video-status.ready { background: rgba(0,200,150,0.2); color: var(--clr-success); } .dash-video-status.processing { background: rgba(255,184,0,0.2); color: var(--clr-warn); } .dash-video-status.hidden { background: rgba(107,107,138,0.2); color: var(--text-muted); } .dash-video-info { flex: 1; min-width: 0; } .dash-video-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--text-primary); } .vtitle-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .dash-badge-pending { flex-shrink: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 4px; background: rgba(255,184,0,0.15); color: var(--warning); border: 1px solid rgba(255,184,0,0.3); } .dash-video-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; } .dash-video-meta .cat { color: var(--accent-cyan); } .dash-video-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } .dash-video-actions__btn { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-muted); font-family: 'Inter', sans-serif; transition: all 0.15s; white-space: nowrap; } .dash-video-actions__btn:hover { border-color: rgba(var(--cyan-rgb),0.3); color: var(--accent-cyan); } .dash-video-actions__btn--danger { color: var(--live); } .dash-video-actions__btn--danger:hover { border-color: rgba(var(--live-rgb),0.4); color: var(--live); background: rgba(var(--live-rgb),0.08); } /* Clip row (vertical) */ .dash-clip-thumb { aspect-ratio: 9/16; width: 56px; height: 100px; } /* ── Upload form grid ── */ .video-edit-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } /* ── Upload Zone ── */ .dash-upload-zone { border: 2px dashed var(--border-color); border-radius: 14px; padding: 40px 32px; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 20px; background: var(--bg-secondary); } .dash-upload-zone:hover { border-color: rgba(var(--cyan-rgb),0.4); background: rgba(var(--cyan-rgb),0.02); } .dash-upload-zone.expanded { border-style: solid; cursor: default; text-align: left; } .dash-upload-zone .drop-hint { pointer-events: none; } .dash-upload-icon { font-size: 36px; margin-bottom: 12px; } .dash-upload-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; } .dash-upload-sub { font-size: 13px; color: var(--text-muted); } /* Upload overlay */ .upload-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; justify-content:center; align-items:center; flex-direction:column; gap:20px; } .upload-overlay.active { display:flex; } .upload-progress { width:360px; max-width:90vw; } .upload-progress h3 { color:#fff; font-size:18px; margin-bottom:16px; text-align:center; } .upload-bar-bg { width:100%; height:8px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; } .upload-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent-cyan),var(--accent-blue)); border-radius:4px; transition:width 0.3s; width:0; } .upload-pct { color:rgba(255,255,255,0.7); font-size:14px; text-align:center; margin-top:8px; } .upload-status { color:rgba(255,255,255,0.5); font-size:13px; text-align:center; margin-top:4px; } /* ── Profile Form ── */ .dash-field { margin-bottom: 14px; } .dash-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .dash-field input, .dash-field textarea, .dash-field select { width: 100%; padding: 9px 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 13px; transition: border-color 0.2s; box-sizing: border-box; } .dash-field input:focus, .dash-field textarea:focus { outline: none; border-color: rgba(var(--cyan-rgb),0.35); } .dash-field textarea { resize: vertical; } /* Welcome banner (beta/new user) */ .dash-welcome-banner { display: flex; align-items: flex-start; gap: 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 24px; margin-bottom: 28px; } .dash-welcome-icon { font-size: 28px; line-height: 1; flex-shrink: 0; } .dash-welcome-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); } .dash-welcome-sub { font-size: 13px; color: var(--text-muted); } /* CTA card (beta) */ .dash-cta-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 48px 32px; text-align: center; position: relative; overflow: hidden; margin-bottom: 24px; } .dash-cta-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); opacity: 0.04; pointer-events: none; } .dash-cta-card h2 { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 8px; } .dash-cta-card p { color: var(--text-muted); font-size: 14px; max-width: 420px; margin: 0 auto; } /* Pending/alert cards */ .dash-pending-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 24px; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } .dash-pending-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } /* ── Following Grid ── */ .dash-following-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; margin-top: 4px; } .dash-following-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; padding: 12px 8px; border-radius: 12px; background: var(--bg-primary); border: 1px solid var(--border-color); transition: border-color 0.2s, background 0.2s; position: relative; overflow: hidden; } .dash-following-card:hover { border-color: rgba(var(--cyan-rgb),0.3); background: rgba(var(--cyan-rgb),0.04); } .dash-following-card__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .dash-following-card__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .dash-following-card__name { font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .dash-following-card__live { position: absolute; top: 6px; right: 6px; background: var(--live); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px; } .dash-following-empty { text-align: center; padding: 28px 20px; color: var(--text-muted); font-size: 13px; } .dash-following-empty-icon { font-size: 32px; margin-bottom: 8px; } /* ── Email verification banner ── */ .verify-banner { background: rgba(255,165,0,.1); border-bottom: 1px solid rgba(255,165,0,.25); padding: 10px 24px; } body[data-theme="light"] .verify-banner { background: rgba(255,140,0,.08); border-bottom-color: rgba(255,140,0,.2); } .verify-banner-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .verify-banner-icon { font-size: 18px; flex-shrink: 0; } .verify-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .verify-banner-text strong { font-size: 14px; font-weight: 600; color: var(--text-primary); } .verify-banner-text span { font-size: 12px; color: var(--text-muted); } .verify-banner-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .verify-banner-btn { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: none; font-family: inherit; transition: opacity .15s; white-space: nowrap; } .verify-banner-btn:hover { opacity: .8; } .verify-banner-btn-primary { background: linear-gradient(135deg,var(--accent-cyan),var(--accent-blue)); color: #fff; } .verify-banner-btn-ghost { background: transparent; border: 1px solid rgba(255,165,0,.5); color: var(--text-secondary); } /* ── Collapsible nav group ── */ .dash-nav-group { position: relative; } .dash-nav-group__header { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; justify-content: space-between; } .dash-nav-group__chevron { margin-left: auto; flex-shrink: 0; transition: transform 0.2s; } .dash-nav-group--open .dash-nav-group__chevron { transform: rotate(180deg); } .dash-nav-group__items { height: 0; overflow: hidden; transition: height 0.2s ease; } .dash-nav-group--open .dash-nav-group__items { height: auto; } .dash-nav-sub-item { padding-left: 28px; font-size: 13px; } /* ── Mobile bottom nav ── */ .dash-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 0 4px env(safe-area-inset-bottom); flex-shrink: 0 !important; min-height: 56px !important; justify-content: space-around; align-items: stretch; } .dash-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px; flex: 1; min-width: 0; color: var(--text-muted); font-size: 10px; font-weight: 500; text-decoration: none; border: none; background: transparent; cursor: pointer; font-family: inherit; transition: color 0.15s; } .dash-bottom-nav__item.active, .dash-bottom-nav__item:hover { color: var(--accent-cyan); } .dash-bottom-nav__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; } /* ── Mobile drawer ── */ .dash-drawer__overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1100; } .dash-drawer__overlay.dash-drawer--open { display: block; } .dash-drawer { position: fixed; top: 0; left: 0; width: 280px; z-index: 9998; background: var(--bg-secondary); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform 0.25s ease; } .dash-drawer.dash-drawer--open { transform: translateX(0); visibility: visible; } /* Right-side positions */ body.nav-pos-tr .dash-drawer, body.nav-pos-br .dash-drawer { left: auto; right: 0; border-left: 1px solid var(--border-color); border-right: none; overflow-y: auto; transform: translateX(100%); } body.nav-pos-tr .dash-drawer.dash-drawer--open, body.nav-pos-br .dash-drawer.dash-drawer--open { transform: translateX(0); visibility: visible; } .dash-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .dash-drawer__title { font-size: 14px; font-weight: 700; color: var(--text-primary); } .dash-drawer__close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 22px; line-height: 1; padding: 0 4px; font-family: inherit; } .dash-drawer__body { display: flex; flex-direction: column; padding: 8px; flex: 1; overflow-y: auto; } /* Bottom-anchored positions — content sticks to bottom */ body.nav-pos-br .dash-drawer__body, body.nav-pos-bl .dash-drawer__body { justify-content: flex-end; } .dash-drawer__section { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary); padding: 0 12px; margin: 12px 0 6px; } /* ── Responsive ── */ @media (max-width: 1200px) { .dash-layout { display: flex; flex-direction: column; } .dash-main { width: 100%; } .dash-aside { position: static; width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: row; flex-wrap: nowrap; gap: 4px; align-items: center; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-height: 50px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; } .dash-aside::-webkit-scrollbar { display: none; } .dash-aside .dash-status-card, .dash-aside .dash-nav-section, .dash-aside .dash-nav-divider { display: none; } .dash-nav-item { flex-shrink: 0; white-space: nowrap; padding: 6px 12px; height: auto; line-height: 1.4; font-size: 13px; } } @media (max-width: 1200px) { .dash-aside { display: none; } .dash-bottom-nav { display: flex; } .dash-main { padding-bottom: 64px; } .profile-two-col { grid-template-columns: 1fr; } .video-edit-two-col { grid-template-columns: 1fr; } .dash-card-header { flex-wrap: wrap; gap: 8px; } } @media (max-width: 700px) { .dash-video-row { flex-direction: column; gap: 0; padding: 14px 0; } .dash-video-thumb { width: 100%; max-width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 8px; margin-bottom: 10px; } .dash-clip-thumb { width: 100%; aspect-ratio: 9/16; height: auto; max-height: 200px; margin-bottom: 10px; } .dash-video-info { min-width: 0; width: 100%; } .dash-video-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .dash-video-meta { font-size: 12px; margin-bottom: 10px; } .dash-video-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: unset; width: 100%; } .dash-video-actions__btn { width: 100%; justify-content: center; padding: 10px; text-align: center; font-size: 13px; } } @media (max-width: 480px) { .guide-steps { grid-template-columns: 1fr; } .dash-upload-zone { padding: 24px 16px; } .verify-banner-inner { flex-direction: column; align-items: flex-start; } .verify-banner-actions { width: 100%; } .verify-banner-btn { flex: 1; text-align: center; } } @media (max-width: 480px) { .dash-page { padding: 12px; } .dash-stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .dash-video-row { gap: 10px; } .dash-page-header { flex-direction: column; } .dash-video-actions { flex-direction: column; gap: 6px; } .dash-video-actions .btn { width: 100%; justify-content: center; } } /* ── Panel Editor ── */ .panel-editor { margin-bottom: 16px; } .panel-editor__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; } .panel-editor__field--title { flex: 1; } .panel-editor__field--vis { min-width: 130px; } .panel-editor__field--link { flex: 1; } .panel-editor__field--linktxt { flex: 1; } .panel-editor__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 480px) { .panel-editor__row { grid-template-columns: 1fr; } .panel-editor__actions { justify-content: flex-start; } } /* ── Link Item (Channel Links tab) ── */ .link-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .link-item:last-child { border-bottom: none; } .link-item--empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: 14px; } .link-item__icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .link-item__icon--telegram { background: rgba(0,136,204,0.15); color: #0088cc; } .link-item__icon--vk { background: rgba(0,119,255,0.15); color: #0077FF; } .link-item__icon--discord { background: rgba(88,101,242,0.15); color: #5865F2; } .link-item__icon--youtube { background: rgba(255,0,0,0.15); color: #FF0000; } .link-item__icon--twitch { background: rgba(145,70,255,0.15); color: #9146FF; } .link-item__icon--donationalerts { background: rgba(245,166,35,0.15); color: #F5A623; } .link-item__icon--website { background: rgba(var(--cyan-rgb),0.15); color: var(--accent-cyan); } .link-item__icon--custom { background: var(--bg-hover); color: var(--text-muted); } .link-item__info { flex: 1; min-width: 0; } .link-item__title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .link-item__url { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-item__actions { display: flex; gap: 6px; flex-shrink: 0; } .dash-hint { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; } .dash-drawer__body .dash-nav-item[href*="logout"] { color: var(--text-primary); font-weight: 600; margin-top: 4px; } .dash-drawer .dash-nav-item[href*="logout"], .dash-drawer__body .dash-nav-item[href*="logout"] { color: var(--text-primary); font-weight: 600; border-top: 1px solid var(--border-color); margin-top: 8px; padding-top: 12px; } /* === assets/css/pages/_stream-settings.css === */ /* ═══════════════════════════════════════════════ pages/_stream-settings.css — Stream settings page Layout, nav, fields, alerts → see _dashboard.css ═══════════════════════════════════════════════ */ /* ── STATUS BADGES ── */ .ss-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.06); color: var(--text-muted); margin-bottom: 24px; } .ss-status-badge.online { background: rgba(34,197,94,.15); color: #22c55e; } .ss-status-badge .ss-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ss-status-live { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,59,92,0.12); color: var(--live); padding: 7px 14px; border-radius: 20px; font-size: 15px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,59,92,0.2); } .ss-status-live::before { content: ''; width: 8px; height: 8px; background: var(--live); border-radius: 50%; animation: ss-pulse 1.5s ease-in-out infinite; } .ss-status-offline { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-secondary); color: var(--text-muted); padding: 7px 14px; border-radius: 20px; font-size: 15px; font-weight: 500; border: 1px solid var(--border-color); } .ss-status-offline::before { content: ''; width: 8px; height: 8px; background: var(--text-muted); border-radius: 50%; } @keyframes ss-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} } /* ── KEY BOX ── */ .ss-key-box { background: rgba(255,255,255,.04); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px; } .ss-key-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 14px; } .ss-key-empty-icon { font-size: 40px; line-height: 1; } .ss-key-display { display: flex; align-items: center; gap: 10px; } .ss-key-value { flex: 1; background: rgba(0,0,0,.25); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 14px; font-family: monospace; font-size: 15px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-key-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 500; } .ss-key-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .ss-key-hidden { color: var(--text-muted); } .ss-key-btn { padding: 6px 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-muted); transition: all 0.15s; white-space: nowrap; } .ss-key-btn:hover { background: rgba(var(--cyan-rgb),0.1); color: var(--accent-cyan); border-color: rgba(var(--cyan-rgb),0.3); } .ss-key-actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; } /* ── OBS SOFTWARE GRID ── */ .ss-software-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .ss-software-item { flex: 0 0 160px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px 14px; text-align: center; text-decoration: none; transition: all 0.15s; } .ss-software-item:hover { border-color: rgba(var(--cyan-rgb),0.3); background: rgba(var(--cyan-rgb),0.04); transform: translateY(-1px); } .ss-software-icon { font-size: 32px; margin-bottom: 8px; } .ss-software-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .ss-software-desc { font-size: 12px; color: var(--text-muted); } /* ── STEPS LIST ── */ .ss-steps-list { list-style: none; padding: 0; margin: 0 0 20px; counter-reset: steps; } .ss-steps-list li { counter-increment: steps; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; color: var(--text-muted); line-height: 1.5; } .ss-steps-list li:last-child { border-bottom: none; } .ss-steps-list li::before { content: counter(steps); min-width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--cyan-rgb),0.12); color: var(--accent-cyan); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ss-steps-list li strong { color: var(--text-primary); } .ss-steps-list li a { color: var(--accent-cyan); text-decoration: none; } .ss-steps-list li a:hover { text-decoration: underline; } /* ── REC BLOCKS ── */ .ss-rec-block { background: rgba(255,255,255,.04); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; } .ss-rec-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 8px; } .ss-rec-table { width: 100%; border-collapse: collapse; } .ss-rec-table tr { border-bottom: 1px solid var(--border-color); } .ss-rec-table tr:last-child { border-bottom: none; } .ss-rec-table td { padding: 11px 5px; font-size: 14px; } .ss-rec-table td:first-child { color: var(--text-muted); width: 140px; white-space: nowrap; } .ss-rec-table td:last-child { color: var(--text-primary); font-weight: 600; } .ss-rec-settings-wrapper { max-height: 80px; overflow: hidden; position: relative; border-left: 3px solid var(--accent-cyan); padding-left: 16px; transition: max-height 0.3s ease; mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%); } .ss-rec-settings-wrapper[aria-expanded="true"] { max-height: 2000px; mask-image: none; -webkit-mask-image: none; } [data-theme="light"] .ss-rec-settings-wrapper { mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%); } [data-theme="light"] .ss-rec-settings-wrapper[aria-expanded="true"] { mask-image: none; -webkit-mask-image: none; } .ss-rec-category { margin-bottom: 24px; } .ss-rec-category-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .ss-rec-table-wrapper { overflow-x: auto; } .ss-rec-warnings { background: rgba(255,193,7,0.04); border: 1px solid rgba(255,193,7,0.12); border-radius: 10px; padding: 16px; margin-bottom: 16px; } .ss-rec-warning { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; } .ss-rec-warning:last-child { margin-bottom: 0; } .ss-rec-warning svg { flex-shrink: 0; margin-top: 2px; color: var(--warning); } .ss-rec-note { background: rgba(var(--cyan-rgb),0.06); border: 1px solid rgba(var(--cyan-rgb),0.15); border-radius: 10px; padding: 14px; font-size: 15px; color: var(--text-muted); margin-top: 16px; } .ss-rec-note strong { color: var(--accent-cyan); display: block; margin-bottom: 6px; } .ss-rec-note p { margin: 0; line-height: 1.6; } /* ── WARNING BANNER ── */ .ss-warn { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); border-radius: 10px; padding: 12px 16px; font-size: 15px; color: var(--warning); margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; } /* ── COLLAPSIBLE TOGGLE ── */ .ss-section-title-btn { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; cursor: pointer; transition: color 0.15s; color: var(--text-primary); font-size: 15px; font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); } .ss-section-title-btn:hover { color: var(--text-primary); } .ss-toggle-icon { transition: transform 0.2s; flex-shrink: 0; } .ss-toggle-icon.open { transform: rotate(180deg); } .ss-section-title-btn[aria-expanded="true"] .ss-toggle-icon { transform: rotate(180deg); } /* Peek variant — no border/margin on button itself */ .ss-section-title-btn--peek { border-bottom: none; margin-bottom: 16px; padding-bottom: 0; } /* ── CTA / CREATE BLOCK ── */ .ss-create-cta { background: rgba(var(--cyan-rgb),0.06); border: 1px dashed rgba(var(--cyan-rgb),0.2); border-radius: 12px; padding: 24px; text-align: center; } .ss-create-cta p { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; line-height: 1.6; } .ss-create-icon { font-size: 36px; margin-bottom: 12px; } .ss-create-block { background: rgba(255,255,255,.04); border: 1px dashed var(--border-color); border-radius: 12px; padding: 20px; text-align: center; color: var(--text-muted); font-size: 14px; } /* ════════════════════════════════ MOBILE ≤ 768px ════════════════════════════════ */ @media (max-width: 768px) { .ss-software-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .ss-key-display { flex-direction: column; } .ss-key-display .btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .ss-rec-table tr { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--border-color); } .ss-rec-table tr:last-child { border-bottom: none; } .ss-rec-table td { padding: 2px 0; font-size: 15px; border: none; } .ss-rec-table td:first-child { width: auto; white-space: normal; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .ss-rec-table td:last-child { font-size: 14px; } .ss-steps-list li a { word-break: break-all; min-width: 0; flex: 1 1 100%; display: inline-block; } .ss-key-box { padding: 16px; } .ss-key-actions { flex-wrap: wrap; gap: 6px; } } /* Light theme: warning banner red instead of yellow */ [data-theme="light"] .ss-warn { background: rgba(255,59,59,0.08); border-color: rgba(255,59,59,0.25); color: var(--live); } /* Channel Team BEM */ .channel-team { display: flex; flex-direction: column; gap: 16px; } .channel-team__roles-info { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--bg-input, var(--bg-card)); border-radius: 8px; border: 1px solid var(--border); } .channel-team__role-desc { display: flex; align-items: flex-start; gap: 10px; } .channel-team__role-text { font-size: 13px; color: var(--muted); line-height: 1.4; } .channel-team__list { display: flex; flex-direction: column; gap: 8px; } .channel-team__member { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-input, var(--bg-card)); border-radius: 8px; border: 1px solid var(--border); } .channel-team__member-info { display: flex; align-items: center; gap: 8px; } .channel-team__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .channel-team__username { font-size: 14px; font-weight: 500; } .dash-input { width: 100%; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 12px; color: var(--text); outline: none; transition: border-color .15s; } .dash-input:focus { border-color: var(--accent); } .channel-team__add-form { display: flex; gap: 8px; align-items: center; } .channel-team__add-form .dash-input[name="username"] { flex: 1; min-width: 120px; } .channel-team__role-select { width: 90px; flex-shrink: 0; } .channel-team__empty { font-size: 13px; color: var(--muted); margin: 0; } .channel-team__msg { font-size: 13px; min-height: 18px; } .channel-team__msg--ok { color: var(--success, #27ae60); } .channel-team__msg--err { color: var(--live, #e74c3c); } .role-picker { position: relative; flex-shrink: 0; } .role-picker__btn { display: flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; height: 38px; } .role-picker__arrow { font-size: 10px; color: var(--muted); } .role-picker__dropdown { display: none; position: fixed; top: auto; left: auto; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.25); min-width: 80px; } .role-picker__dropdown.open { display: block; } .role-picker__option { display: flex; align-items: center; width: 100%; padding: 8px 12px; background: none; border: none; cursor: pointer; } .role-picker__option:hover { background: var(--bg-input, var(--bg-secondary)); } /* StreamVi RU proxy block */ .ss-streamvi-block { padding: 16px; border-radius: 8px; border: 1px solid rgba(255, 200, 0, 0.4); margin-top: 16px; margin-bottom: 16px; background: rgba(255, 200, 0, 0.06); } .ss-streamvi-block--active { border-color: var(--accent-cyan); background: transparent; } .ss-streamvi-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ss-streamvi-banner__icon { font-size: 24px; } .ss-streamvi-banner__text { flex: 1; font-size: 14px; color: var(--text-secondary); } .ss-streamvi-banner__no-key { font-size: 13px; color: var(--text-secondary); font-style: italic; } .ss-streamvi-active__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ss-streamvi-active__badge { font-size: 14px; font-weight: 600; color: var(--accent-cyan); } .ss-sv-dropdown { position: relative; width: 100%; margin-top: 8px; user-select: none; } .ss-sv-dropdown__selected { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text-primary); transition: border-color 0.15s; } .ss-sv-dropdown__selected:hover, .ss-sv-dropdown--open .ss-sv-dropdown__selected { border-color: var(--accent-cyan); } .ss-sv-dropdown__arrow { font-size: 12px; color: var(--text-secondary); transition: transform 0.15s; } .ss-sv-dropdown--open .ss-sv-dropdown__arrow { transform: rotate(180deg); } .ss-sv-dropdown__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; z-index: 100; overflow: visible; max-height: 320px; overflow-y: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .ss-sv-dropdown__item { padding: 9px 12px; font-size: 14px; color: var(--text-primary); cursor: pointer; transition: background 0.1s; } .ss-sv-dropdown__item:hover { background: var(--bg-secondary); } /* ── SERVER BADGES ── */ .ss-server-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .ss-server-badge--srs { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.25); } .ss-server-badge--cf { background: rgba(249,115,22,.12); color: #f97316; border: 1px solid rgba(249,115,22,.25); } /* ── SWITCH SERVER MODAL ── */ .ss-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 9000; padding: 16px; } .ss-modal-overlay[hidden] { display: none; } .ss-modal-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 28px 24px 24px; max-width: 420px; width: 100%; box-shadow: 0 16px 48px rgba(0,0,0,.4); } .ss-modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .ss-modal-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; } .ss-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* === assets/css/pages/_profile.css === */ /* ── Page-level tokens ─────────────────────────────── */ :root { --cover-bg-a: var(--bg-primary); --cover-bg-b: #0D0820; --cover-bg-c: #0A0D20; } /* ── Profile Page ── */ .profile-page { background: var(--bg-primary); flex: 1; } .profile-page-wrap { max-width: 1600px; margin: 0 auto; width: 100%; } .profile-header-cover { position: relative; overflow: hidden; height: 220px; background: linear-gradient(135deg, var(--cover-bg-a) 0%, var(--cover-bg-b) 50%, var(--cover-bg-c) 100%); } .profile-header-cover .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; } .profile-header-cover .cover-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; opacity: 0.07; } .profile-cover-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 20% 60%, rgba(0,212,255,0.06) 0%, transparent 50%), radial-gradient(circle at 80% 30%, rgba(0,102,255,0.07) 0%, transparent 45%); } .profile-cover-grad { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, var(--bg-primary) 0%, transparent 100%); } .profile-info-bar { padding: 0 32px 20px; position: relative; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .profile-avatar-wrap { position: relative; margin-top: -44px; z-index: 2; flex-shrink: 0; } .profile-avatar-new { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: white; background: linear-gradient(135deg, var(--live-light), var(--live)); border: 3px solid var(--bg-primary); object-fit: cover; overflow: hidden; } .profile-avatar-new img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .profile-live-ring { position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--live); animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.04)} } .profile-meta { flex: 1; min-width: 180px; padding-bottom: 4px; } .profile-name-new { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; line-height: 1; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-primary); } .profile-handle-new { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .profile-stats-row { display: flex; gap: 20px; flex-wrap: wrap; } .profile-stat { font-size: 13px; color: var(--text-primary); } .profile-stat strong { font-weight: 700; } .profile-stat span { color: var(--text-muted); } .profile-actions-new { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; flex-wrap: wrap; } .profile-about { padding: 0 32px 20px; border-bottom: 1px solid var(--border-color); } .profile-bio-new { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 12px; } .profile-socials-new { display: flex; gap: 8px; flex-wrap: wrap; } .social-link-new { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text-primary); transition: all 0.2s; } .social-link-new:hover { border-color: rgba(var(--cyan-rgb),0.3); color: var(--accent-cyan); } /* Profile Tabs */ .profile-tabs-new { padding: 0 32px; display: flex; gap: 0; border-bottom: 1px solid var(--border-color); } .profile-tab-btn { padding: 13px 18px; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; transition: all 0.2s; position: relative; bottom: -1px; font-family: 'Inter', sans-serif; } .profile-tab-btn:hover { color: var(--text-primary); } .profile-tab-btn.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); } .profile-content-new { margin: 0 auto; padding: 24px; } /* Video grid */ .vgrid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .vc-new { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; text-decoration: none; color: var(--text-primary); display: block; } .vc-new:hover { transform: translateY(-2px); border-color: rgba(var(--cyan-rgb),0.25); } .vc-thumb-new { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 28px; position: relative; background: var(--surface); overflow: hidden; } .vc-thumb-new img { width: 100%; height: 100%; object-fit: cover; } .vc-overlay-new { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6)); } .vc-dur-new { position: absolute; bottom: 7px; right: 7px; background: rgba(0,0,0,0.8); color: white; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; } .vc-hidden-badge { position: absolute; top: 7px; left: 7px; background: rgba(0,0,0,0.75); color: var(--text-muted); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; } .vc-views-badge { position: absolute; bottom: 7px; left: 7px; background: rgba(0,0,0,0.75); color: white; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; } .vc-body-new { padding: 9px 11px; } .vc-title-new { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vc-meta-new { font-size: 11px; color: var(--text-muted); } .vc-actions-new { display: flex; gap: 4px; padding: 0 11px 9px; } .vc-actions-new form { display: inline; } /* Clips grid (vertical) */ .vgrid-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; } .vc-clip-thumb { aspect-ratio: 9/16; max-height: 260px; } /* Live embed */ .live-embed-new { margin: 0 32px 24px; background: #000; border-radius: 14px; overflow: hidden; border: 2px solid var(--live); } .live-embed-header-new { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--live); } .live-embed-header-new h3 { color: #fff; font-size: 16px; display: flex; align-items: center; gap: 8px; font-family: 'Rajdhani', sans-serif; } .live-embed-header-new a { color: #fff; background: rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; } .live-embed-header-new a:hover { background: rgba(255,255,255,0.3); } .live-embed-new video { width: 100%; aspect-ratio: 16/9; background: #000; } @keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.5} } .live-dot-anim { animation: livePulse 1.5s infinite; } /* Donate modal */ .donate-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; } .donate-modal-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 32px; max-width: 400px; width: 95%; } /* Empty state */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state-icon { font-size: 48px; margin-bottom: 16px; } .empty-state h3 { font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); } .empty-state p { font-size: 14px; } /* About tab cards */ .about-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; margin-bottom: 14px; max-width: 520px; } .about-card-title { font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .schedule-row { display: flex; justify-content: space-between; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); margin-bottom: 8px; } .schedule-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .schedule-row span:first-child { font-weight: 600; } .schedule-row span:last-child { color: var(--text-muted); } /* Responsive */ @media (max-width: 768px) { .profile-info-bar { padding: 0 20px 16px; gap: 12px; } .profile-about { padding: 0 20px 16px; } .profile-tabs-new { padding: 0 20px; } .profile-content-new { padding: 16px 20px; } .live-embed-new { margin: 0 20px 16px; } /* .vgrid-new media override removed — auto-fill handles responsive layout */ .profile-name-new { font-size: 22px; } .profile-avatar-new { width: 72px; height: 72px; font-size: 28px; } } @media (max-width: 480px) { .profile-header-cover { height: 160px; } .profile-info-bar { flex-direction: column; align-items: flex-start; padding: 0 16px 14px; } .profile-avatar-wrap { margin-top: -36px; } .profile-avatar-new { width: 64px; height: 64px; font-size: 24px; } .profile-actions-new { width: 100%; } .profile-about { padding: 0 16px 14px; } .profile-tabs-new { padding: 0 16px; overflow-x: auto; } .profile-content-new { padding: 14px 16px; } .live-embed-new { margin: 0 16px 14px; } /* .vgrid-new media override removed — auto-fill handles responsive layout */ .profile-stats-row { gap: 12px; } } /* ── Channel Panels ── */ .channel-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; } .channel-panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; } .channel-panel__title { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); } .channel-panel__img { width: 100%; border-radius: 8px; margin-bottom: 12px; } .channel-panel__text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; } .channel-panel__link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-cyan); font-size: 13px; font-weight: 600; text-decoration: none; } .channel-panel__link:hover { text-decoration: underline; } @media (max-width: 480px) { .channel-panels { grid-template-columns: 1fr; } } /* Bio block */ .profile-bio-block { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--clr-border); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; } .profile-bio-block__text { margin: 0; line-height: 1.6; color: var(--text-secondary, rgba(255,255,255,0.65)); font-weight: 400; word-break: break-word; } .profile-bio-block .channel-links { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--clr-border); border-radius: 14px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; } /* Desktop: bio and links side by side */ .profile-bio-wrap { padding: 0 10px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; } .profile-bio-wrap .profile-bio-block { flex: 0 0 70%; max-width: 70%; margin-bottom: 0; } .profile-bio-links { flex: 0 0 calc(30% - 12px); max-width: calc(30% - 12px); align-self: stretch; display: flex; } .profile-bio-links .channel-links { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--clr-border); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 8px; width: 100%; height: 100%; box-sizing: border-box; } .profile-bio-block__text-wrap { position: relative; margin-top: 10px; } .profile-bio-block__text-wrap[aria-expanded="false"] .profile-bio-block__text { max-height: 72px; overflow: hidden; mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%); } .profile-bio-block__text-wrap[aria-expanded="true"] .profile-bio-block__text { max-height: none; mask-image: none; -webkit-mask-image: none; } /* Toggle button — hidden on desktop */ .profile-bio-block__toggle { display: none; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-primary); line-height: 1; } .profile-bio-block__toggle-label { display: none; } .profile-bio-block__toggle-icon { transition: transform 0.2s; display: block; } .profile-bio-block__toggle[aria-expanded="true"] .profile-bio-block__toggle-icon { transform: rotate(180deg); } /* ── Channel Links ── */ .channel-links { display: flex; flex-wrap: wrap; gap: 8px; } .channel-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity 0.15s; border: 1px solid transparent; } .channel-link:hover { opacity: 0.85; } .channel-link svg { width: 16px; height: 16px; flex-shrink: 0; } .channel-link__label { white-space: nowrap; } .channel-link--telegram { background: rgba(0,136,204,0.12); color: #0088cc; border-color: rgba(0,136,204,0.2); } .channel-link--vk { background: rgba(0,119,255,0.12); color: #0077FF; border-color: rgba(0,119,255,0.2); } .channel-link--discord { background: rgba(88,101,242,0.12); color: #5865F2; border-color: rgba(88,101,242,0.2); } .channel-link--youtube { background: rgba(255,0,0,0.12); color: #FF0000; border-color: rgba(255,0,0,0.2); } .channel-link--twitch { background: rgba(145,70,255,0.12); color: #9146FF; border-color: rgba(145,70,255,0.2); } .channel-link--donationalerts { background: rgba(245,166,35,0.12); color: #F5A623; border-color: rgba(245,166,35,0.2); } .channel-link--website { background: rgba(var(--cyan-rgb),0.12); color: var(--accent-cyan); border-color: rgba(var(--cyan-rgb),0.2); } .channel-link--custom { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border-color); } /* Mobile */ @media (max-width: 768px) { .profile-bio-wrap { padding: 0 10px; flex-direction: column; gap: 8px; width: 95%; margin-left: auto; margin-right: auto; } .profile-bio-wrap .profile-bio-block { flex: none; max-width: 100%; width: 100%; position: relative; } .profile-bio-links { width: 100%; max-width: 100%; flex: none; } .profile-bio-links .channel-links { width: 100%; height: auto; } .profile-bio-block { position: relative; } .profile-bio-block__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 10px; margin-bottom: 0; border-bottom: 1px solid var(--clr-border); color: var(--text-primary); font-size: 13px; font-weight: 600; } .profile-bio-block__toggle::before { content: attr(data-label); opacity: 0.7; font-size: 13px; } .profile-bio-block .channel-links { border: none; background: none; padding: 12px 0 0; border-top: 1px solid var(--clr-border); border-radius: 0; margin-top: 8px; } } /* ── Live card on profile ─────────────────────────── */ .profile-live-card { margin-bottom: 20px; border-radius: 12px; overflow: hidden; } .profile-live-card__player-wrap { position: relative; aspect-ratio: 16/9; background: #000; max-height: 280px; overflow: hidden; border: 2px solid var(--live); border-radius: 10px; box-shadow: 0 0 0 3px rgba(255,59,59,.1), 0 4px 24px rgba(255,59,59,.15); } .profile-live-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px; text-decoration: none; background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.6) 100%); } .profile-live-card__badge { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-red, #ef4444); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; align-self: flex-start; } .profile-live-card__cta { color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.8); align-self: flex-end; } .profile-live-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--bg-secondary); } .profile-live-card__title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .profile-live-card__player-wrap { max-height: 200px; } } /* === assets/css/pages/_watch.css === */ /* ═══════════════════════════════════════════════ pages/_watch.css — Video watch page ═══════════════════════════════════════════════ */ :root { --clr-like: var(--green); } /* Video.js custom theme — matches site dark design */ /* .watch-player-wrap prefix gives specificity 0-3-0, beats video-js.min.css */ .video-js { width: 100%; height: 100%; } .watch-player-wrap .video-js .vjs-control-bar { background: linear-gradient(transparent, rgba(0,0,0,0.75)); height: 3.5em; } .watch-player-wrap .video-js .vjs-play-progress, .watch-player-wrap .video-js .vjs-volume-level { background: var(--accent-cyan); } .watch-player-wrap .video-js .vjs-play-progress:before { color: var(--accent-cyan); } .watch-player-wrap .video-js .vjs-big-play-button { border-color: var(--accent-cyan); background: rgba(0,0,0,0.6); border-radius: 50%; width: 1.8em; height: 1.8em; line-height: 1.8em; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; } .watch-player-wrap .video-js:hover .vjs-big-play-button, .watch-player-wrap .video-js .vjs-big-play-button:focus { background: rgba(var(--cyan-rgb),0.2); border-color: var(--accent-cyan); } .watch-player-wrap .video-js .vjs-poster { background-size: cover; } /* Light theme compatibility */ [data-theme="light"] .watch-player-wrap .video-js .vjs-control-bar { background: linear-gradient(transparent, rgba(0,0,0,0.6)); } .watch-layout { flex: 1; max-width: 1600px; margin: 10px auto 0; padding: 0 20px 40px; width: 100%; } .watch-page-wrap { overflow-x: hidden; max-width: 100%; } /* ── Player ── */ .watch-player-wrap { width: 100%; display: block; background: #000; position: relative; border-radius: 14px; overflow: hidden; margin-bottom: 0; box-shadow: 0 8px 40px rgba(0,0,0,0.6); } /* Vertical video (clips/shorts) */ .watch-player-wrap.vertical { max-width: 420px; margin-left: auto; margin-right: auto; } .watch-player-wrap video { width: 100%; display: block; } .watch-player-wrap .video-js.vjs-fluid { padding-top: 56.25%; } .video-js.vjs-fluid { border-radius: 0; } /* Processing overlay */ .cf-processing-overlay { display: none; position: absolute; inset: 0; background: #000; z-index: 10; align-items: center; justify-content: center; flex-direction: column; gap: 16px; } .cf-processing-bar-wrap { width: 200px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } .cf-processing-bar { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)); transition: width 0.5s; } /* ── Stream Info Bar ── */ .watch-info-bar { padding: 14px 0; border-bottom: 1px solid var(--border-color); display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; max-width: 100%; box-sizing: border-box; } .watch-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: white; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, var(--live-light), var(--live)); text-decoration: none; } .watch-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .watch-info-main { flex: 1; min-width: 0; } .watch-video-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; color: var(--text-primary); } .watch-meta-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .watch-author-link { font-size: 13px; font-weight: 600; color: var(--accent-cyan); text-decoration: none; } .watch-author-link:hover { text-decoration: underline; } .watch-category-tag { font-size: 12px; color: var(--accent-cyan); background: rgba(var(--cyan-rgb),0.08); border: 1px solid rgba(var(--cyan-rgb),0.15); padding: 2px 8px; border-radius: 20px; text-decoration: none; transition: background .15s; } a.watch-category-tag:hover { background: rgba(var(--cyan-rgb),0.18); } .watch-views-time { font-size: 12px; color: var(--text-muted); } .watch-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; } .watch-like-btn, .watch-dislike-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); transition: all 0.2s; } .watch-like-btn:hover { border-color: rgba(0,200,150,0.4); color: var(--clr-like); } .watch-dislike-btn:hover { border-color: rgba(var(--live-rgb),0.4); color: var(--live); } .watch-like-btn.active { background: rgba(0,200,150,0.15); border-color: var(--clr-like); color: var(--clr-like); } .watch-dislike-btn.active { background: rgba(var(--live-rgb),0.15); border-color: var(--live); color: var(--live); } .watch-follow-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); color: white; transition: all 0.2s; text-decoration: none; } .watch-follow-btn:not(.following):hover { opacity: 0.85; } /* Following state — muted style */ .watch-follow-btn.following { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } /* Hover on following — show "unfollow" in red */ .watch-follow-btn.following:hover { background: rgba(var(--live-rgb),0.08); border-color: rgba(var(--live-rgb),0.35); color: var(--live); } /* ── Reaction tooltip ── */ .reaction-wrap { position: relative; display: inline-flex; gap: 8px; } .reaction-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-primary); border: 1px solid var(--border-color, rgba(255,255,255,0.12)); color: var(--text-primary); font-size: 12px; white-space: nowrap; padding: 5px 10px; border-radius: 7px; pointer-events: none; z-index: 10; } /* ── Video replay overlay ── */ .vjs-replay-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,0.7); z-index: 5; cursor: pointer; } .vjs-replay-btn { background: rgba(var(--cyan-rgb),0.15); border: 2px solid var(--accent-cyan); color: var(--accent-cyan); border-radius: 50%; width: 64px; height: 64px; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; } .vjs-replay-btn:hover { background: rgba(var(--cyan-rgb),0.3); } .vjs-replay-label { color: #fff; font-size: 14px; font-weight: 600; } /* ── Description ── */ .watch-description { margin: 14px 0; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--text-secondary, var(--text-primary)); } .watch-followers-note { font-size: 13px; color: var(--text-muted); } /* ── YouTube-style layout: main content + sidebar ── */ .watch-content { display: flex; gap: 24px; align-items: flex-start; } .watch-main { flex: 1 1 0; min-width: 0; } .watch-sidebar { flex: 0 0 300px; max-width: 300px; } /* ── Related Videos ── */ .watch-related { margin: 24px 0; } .watch-related-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .watch-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* Sidebar: compact horizontal cards */ .watch-sidebar .watch-related { margin: 0; } .watch-sidebar .watch-related-grid { grid-template-columns: 1fr; gap: 10px; } .watch-sidebar .related-card { display: grid; grid-template-columns: 130px 1fr; gap: 8px; } .watch-sidebar .related-thumb { width: 100%; border-radius: 6px; } .watch-sidebar .related-body { padding: 8px 10px; } .watch-sidebar .related-title { font-size: 12px; } .related-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 0.2s; text-decoration: none; color: var(--text-primary); display: block; } .related-card:hover { border-color: rgba(var(--cyan-rgb),0.2); transform: translateY(-2px); } .related-thumb { aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--surface); overflow: hidden; } .related-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .related-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6)); } .related-views { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.75); color: white; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 3px; } .related-body { padding: 8px; } .related-title { font-size: 11px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 3px; } .related-name { font-size: 10px; color: var(--text-muted); } /* ── Comments ── */ .watch-comments { margin-top: 24px; } .watch-comments-title { font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .comment-form-wrap { display: flex; gap: 12px; margin-bottom: 24px; } .comment-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--surface); } .comment-input-area { flex: 1; } .comment-input-area textarea { width: 100%; padding: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 14px; resize: none; transition: border-color 0.2s; } .comment-input-area textarea:focus { outline: none; border-color: rgba(var(--cyan-rgb),0.35); } .comment-item { display: flex; gap: 12px; margin-bottom: 18px; } .comment-item-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .comment-item-body { flex: 1; min-width: 0; } .comment-item-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; } .comment-item-name { font-weight: 600; font-size: 14px; color: var(--text-primary); text-decoration: none; } .comment-item-name:hover { color: var(--accent-cyan); } .comment-item-time { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .comment-item-edited { font-size: 11px; color: var(--text-muted); margin-left: 4px; } .comment-item-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); } /* ── Responsive ── */ @media (max-width: 1100px) { .watch-content { flex-direction: column; } .watch-sidebar { flex: none; width: 100%; max-width: none; } .watch-content { width: 100%; } .watch-main { width: 100%; } .watch-sidebar .watch-related { margin: 24px 0 0; } .watch-sidebar .watch-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .watch-sidebar .related-card { display: block; } .watch-sidebar .related-thumb { width: 100%; border-radius: 8px; } } @media (max-width: 768px) { .watch-layout { padding: 0 12px 32px; } .watch-player-wrap { border-radius: 10px; } .watch-related-grid { grid-template-columns: repeat(2, 1fr); } .watch-video-title { font-size: 16px; } .watch-actions { gap: 6px; } } @media (max-width: 700px) { .watch-actions { flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .watch-follow-btn, .watch-like-btn, .watch-dislike-btn { padding: 6px 10px; font-size: 12px; width: auto; min-width: 64px; justify-content: center; } .watch-info-bar { flex-wrap: nowrap; align-items: flex-start; gap: 10px; padding: 12px; } .watch-info-main { flex: 1; min-width: 0; overflow: hidden; } .watch-video-title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .watch-meta-row { flex-wrap: wrap; gap: 4px 8px; font-size: 12px; } .watch-followers-note { font-size: 12px; } } @media (max-width: 480px) { .watch-layout { padding: 0 8px 24px; } .watch-info-bar { flex-wrap: wrap; } .watch-actions { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: flex-start; } .watch-follow-btn { flex: 1; } .watch-player-wrap { border-radius: 0; } .watch-description { margin: 10px 12px; } .watch-related { margin: 16px 12px; } .watch-comments { margin: 16px 12px; } .watch-related-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .related-body { padding: 8px; } } /* === assets/css/pages/_browse.css === */ /* ── LAYOUT ──────────────────────────────────────────── */ .br-layout { display: grid; grid-template-columns: 220px 1fr; flex: 1; max-width: 1600px; margin: 0 auto; width: 100%; } /* ── SIDEBAR ─────────────────────────────────────────── */ .br-aside { border-right: 1px solid var(--border); padding: 20px 12px; position: sticky; top: 60px; max-height: calc(100vh - 60px); overflow-y: auto; } .br-aside::-webkit-scrollbar { width: 3px; } .br-aside::-webkit-scrollbar-thumb { background: var(--border); } .sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 0 8px; margin-bottom: 8px; } .br-cat-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; transition: all .15s; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; margin-bottom: 2px; border: 1px solid transparent; } .br-cat-item:hover { background: var(--surface); color: var(--text); } .br-cat-item.br-cat-item--active { background: rgba(var(--cyan-rgb),.07); color: var(--cyan); border-color: rgba(var(--cyan-rgb),.2); } .br-cat-thumb { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; background: var(--bg2); } .br-cat-info { flex: 1; min-width: 0; } .br-cat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .br-cat-count { font-size: 11px; color: var(--muted); } /* ── MAIN ────────────────────────────────────────────── */ .br-main { overflow: visible; min-width: 0; } /* ── PAGE HEADER ─────────────────────────────────────── */ .br-page-header { padding: 32px 32px 0; } .br-page-title { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 6px; } .br-page-title .accent { color: var(--cyan); } .br-page-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 24px; } /* ── ALL CATEGORIES GRID ─────────────────────────────── */ .br-content { padding: 0 32px 40px; } .br-all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .br-cat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; transition: all .2s; text-decoration: none; color: var(--text); } .br-cat-card:hover { border-color: rgba(var(--cyan-rgb),.25); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); } .br-card-icon { font-size: 28px; flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: center; } .br-card-info { flex: 1; min-width: 0; } .br-card-name { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 4px; } .br-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } .br-card-stats { display: flex; gap: 12px; font-size: 11px; } .br-stat-vod { color: var(--muted); } .br-stat-arrow { margin-left: auto; flex-shrink: 0; align-self: center; font-size: 16px; color: var(--muted); opacity: .5; transition: opacity .2s, transform .2s; } .br-cat-card:hover .br-stat-arrow { opacity: 1; transform: translateX(3px); color: var(--cyan); } /* ── EMPTY STATE ─────────────────────────────────────── */ .br-empty { text-align: center; padding: 80px 20px; color: var(--muted); } .br-empty-icon { font-size: 48px; margin-bottom: 12px; } .br-empty h3 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .br-empty p { font-size: 14px; } /* ── ANIMATIONS ──────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .br-all-grid .br-cat-card { animation: fadeUp .3s ease both; } /* ── SEARCH RESULTS ──────────────────────────────────── */ .br-search-section { margin-bottom: 32px; } .br-section-title { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } /* Streamer cards */ .br-streamers-grid { display: flex; flex-wrap: wrap; gap: 10px; } .br-streamer-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: border-color .2s, transform .15s; min-width: 160px; } .br-streamer-card:hover { border-color: rgba(var(--cyan-rgb),.3); transform: translateY(-1px); } .br-streamer-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; overflow: hidden; } .br-streamer-av img { width: 100%; height: 100%; object-fit: cover; } .br-streamer-name { font-size: 14px; font-weight: 600; } .br-streamer-meta { font-size: 12px; color: var(--muted); } .br-live-badge { display: inline-block; background: var(--live); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 4px; margin-left: 6px; } /* Video cards */ .br-vods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .br-vod-card { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .2s, transform .15s; } .br-vod-card:hover { border-color: rgba(var(--cyan-rgb),.25); transform: translateY(-2px); } .br-vod-thumb { width: 100%; aspect-ratio: 16/9; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--muted); overflow: hidden; position: relative; } .br-vod-thumb img { width: 100%; height: 100%; object-fit: cover; } .br-vod-body { padding: 10px 12px; } .br-vod-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .br-vod-meta { font-size: 11px; color: var(--muted); } /* ── CATEGORY HERO ───────────────────────────────────── */ .cat-hero { position: relative; overflow: hidden; height: 260px; display: flex; align-items: flex-end; } .cat-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #050510 0%, #0D0520 50%, #050A20 100%); } .cat-hero-particles { position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 50%, rgba(var(--cyan-rgb),.08) 0%, transparent 50%), radial-gradient(circle at 85% 30%, rgba(var(--blue-rgb),.10) 0%, transparent 40%), radial-gradient(circle at 50% 80%, rgba(var(--live-rgb),.04) 0%, transparent 35%); } .cat-hero-grid { position: absolute; inset: 0; opacity: .025; background-image: linear-gradient(rgba(var(--cyan-rgb),1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--cyan-rgb),1) 1px, transparent 1px); background-size: 50px 50px; } .cat-hero-content { position: relative; z-index: 1; padding: 0 32px 28px; width: 100%; } .cat-hero-icon { font-size: 48px; margin-bottom: 8px; line-height: 1; filter: drop-shadow(0 0 16px rgba(var(--cyan-rgb),.4)); } .cat-hero-title { font-family: 'Rajdhani', sans-serif; font-size: 40px; font-weight: 700; line-height: 1; margin: 0 0 6px; color: #fff; } .cat-hero-desc { font-size: 14px; color: rgba(255,255,255,.55); margin: 0 0 16px; max-width: 540px; line-height: 1.5; } .cat-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; } .cat-hero-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); padding: 5px 12px; border-radius: 999px; } .cat-hero-stat.stat-live { color: var(--live-light); border-color: rgba(var(--live-rgb),.3); background: rgba(255,59,59,.1); } .cat-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cat-play-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: opacity .2s, transform .15s; box-shadow: 0 4px 16px rgba(var(--cyan-rgb),.3); } .cat-play-btn:hover { opacity: .85; transform: translateY(-2px); } .cat-sponsor { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; flex-wrap:wrap; } .cat-sponsor-label { color:var(--muted); } .cat-sponsor-link { color:var(--accent); text-decoration:underline; } .cat-sponsor-btn { background:transparent; border:1px solid var(--border); color:var(--text); padding:4px 12px; border-radius:6px; font-size:13px; cursor:pointer; text-decoration:none; } .cat-sponsor-btn:hover { border-color:var(--accent); color:var(--accent); } /* ── CATEGORY TABS ───────────────────────────────────── */ .cat-tabs-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 32px; } .cat-tab-btn { background: none; border: none; cursor: pointer; padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--muted); position: relative; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; } .cat-tab-btn:hover { color: var(--text); } .cat-tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); } .cat-tab-count { background: rgba(255,255,255,.06); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .cat-tab-btn.active .cat-tab-count { background: rgba(var(--cyan-rgb),.15); color: var(--cyan); } /* ── CATEGORY TAB PANES ──────────────────────────────── */ .cat-tab-pane { padding: 24px 32px; } .cat-tab-pane[hidden] { display: none; } /* Streamer cards in category */ .cat-streamers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .cat-streamer-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .2s, transform .15s; } .cat-streamer-card:hover { border-color: rgba(var(--live-rgb),.4); transform: translateY(-2px); } .cat-stream-thumb { aspect-ratio: 16/9; background: var(--surface); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cat-stream-thumb img { width: 100%; height: 100%; object-fit: cover; } .cat-stream-thumb-placeholder { font-size: 32px; } .cat-stream-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: flex-start; } .cat-live-pill { background: var(--live); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; } .cat-viewers-pill { background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; } .cat-streamer-body { padding: 10px 12px; display: flex; align-items: center; gap: 10px; } .cat-streamer-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; } .cat-streamer-av img { width: 100%; height: 100%; object-fit: cover; } .cat-streamer-info { flex: 1; min-width: 0; } .cat-streamer-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-streamer-title { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* VOD grid in category (reuses .br-vod-card) */ .cat-vods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } /* ── SCROLLBAR ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ── RESPONSIVE 768px ────────────────────────────────── */ @media (max-width: 768px) { .br-layout { grid-template-columns: 1fr; } .br-aside { display: none; } .br-all-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .br-page-header { padding: 20px 20px 0; } .br-content { padding: 0 20px 32px; } .ss-search { max-width: 180px; } .ss-nav-links { display: none; } .cat-hero-content { padding: 0 20px 24px; } .cat-tabs-bar { padding: 0 20px; } .cat-tab-pane { padding: 20px; } .cat-hero-title { font-size: 30px; } } /* ── RESPONSIVE 480px ────────────────────────────────── */ @media (max-width: 480px) { .br-vods-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .cat-vods-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .br-all-grid { grid-template-columns: 1fr; } .br-page-header { padding: 16px 12px 0; } .br-content { padding: 0 12px 24px; } .br-card-desc { display: none; } .ss-search { display: none; } .nav-user { display: none; } .stars-display { display: none; } .cat-hero { height: 220px; } .cat-hero-icon { font-size: 36px; } .cat-hero-title { font-size: 24px; } .cat-tabs-bar { padding: 0 12px; } .cat-tab-pane { padding: 16px 12px; } .cat-streamers-grid, .cat-vods-grid { grid-template-columns: 1fr 1fr; } } /* === assets/css/pages/_live.css === */ /* ═══════════════════════════════════════════════ pages/_live.css — Live stream viewing page ═══════════════════════════════════════════════ */ /* Live-page specific token */ :root { --chat-width: 400px; } /* Video.js custom theme — matches site dark design */ .video-js { width: 100%; height: 100%; } .video-js .vjs-control-bar { background: linear-gradient(transparent, rgba(0,0,0,0.75)); height: 3.5em; } .video-js .vjs-play-progress, .video-js .vjs-volume-level { background: var(--accent-cyan); } .video-js .vjs-play-progress:before { color: var(--accent-cyan); } .video-js .vjs-big-play-button { display: none !important; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus { background: rgba(var(--cyan-rgb),0.2); border-color: var(--accent-cyan); } .video-js .vjs-poster { background-size: cover; } /* Light theme compatibility */ [data-theme="light"] .video-js .vjs-control-bar { background: linear-gradient(transparent, rgba(0,0,0,0.6)); } /* ── NAV ───────────────────────────────────────────── */ .lv-nav { height:52px; flex-shrink:0; background:rgba(10,10,15,.97); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 16px; display:flex; align-items:center; gap:12px; z-index:100; } body[data-theme="light"] .lv-nav { background:rgba(240,242,248,.97); } .lv-back { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); padding:4px 8px; border-radius:6px; transition:all .2s; white-space:nowrap; } .lv-back:hover { color:var(--text); background:var(--surface); } .lv-logo-wrap { border-left:1px solid var(--border); padding-left:12px; display:flex; align-items:center; } .lv-logo-dark { display:block; height:28px; width:auto; } .lv-logo-light { display:none; height:28px; width:auto; } body[data-theme="light"] .lv-logo-dark { display:none; } body[data-theme="light"] .lv-logo-light { display:block; } .lv-live-indicator { display:flex; align-items:center; gap:6px; background:rgba(var(--live-rgb),.15); border:1px solid rgba(var(--live-rgb),.3); border-radius:6px; padding:4px 10px; } .lv-live-dot { width:7px; height:7px; border-radius:50%; background:var(--live); animation:lv-blink 1.5s infinite; } @keyframes lv-blink { 0%,100%{opacity:1} 50%{opacity:.4} } /* Player error overlay */ .player-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,.9); color:#fff; text-align:center; padding:20px; z-index:20; } .player-error.hidden { display:none; } /* Offline screen */ .offline-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#fff; text-align:center; padding:40px; background:var(--bg2); } .offline-screen .icon { font-size:64px; margin-bottom:16px; opacity:.5; } .offline-screen h2 { font-family:'Rajdhani',sans-serif; font-size:24px; margin-bottom:8px; } .offline-screen p { color:var(--muted); font-size:14px; } /* ── STREAM ENDED OVERLAY ──────────────────────────── */ .stream-end-overlay { position:absolute; inset:0; background:rgba(0,0,0,.9); z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center; padding:20px; } .stream-end-icon { font-size:clamp(32px,5vw,48px); margin-bottom:12px; line-height:1; } .stream-end-title { font-size:clamp(16px,3vw,22px); font-weight:700; margin:0 0 8px; } .stream-end-desc { color:var(--muted); font-size:clamp(12px,2vw,15px); margin:0 0 20px; max-width:280px; } .stream-end-btns { display:flex; flex-direction:column; gap:10px; align-items:center; width:100%; max-width:220px; } .stream-end-btn { width:100%; text-align:center; justify-content:center; } /* ── CLICK-TO-PLAY OVERLAY ─────────────────────────── */ .play-overlay { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2); cursor:pointer; transition:opacity .2s; } .play-overlay.hidden { display:none; } .play-overlay-btn { font-size:56px; color:#fff; line-height:1; pointer-events:none; filter:drop-shadow(0 2px 20px rgba(0,0,0,.95)); transition:transform .15s, filter .15s; } .play-overlay:hover .play-overlay-btn { transform:scale(1.08); } .lv-live-text { font-size:12px; font-weight:700; color:var(--live); letter-spacing:.5px; } .lv-viewer-stat { font-size:13px; color:var(--muted); font-weight:500; } .lv-viewer-stat strong { color:var(--text); } .lv-nav-right { margin-left:auto; display:flex; align-items:center; gap:8px; } .lv-btn { padding:6px 14px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:all .2s; display:inline-flex; align-items:center; gap:5px; font-family:'Inter',sans-serif; text-decoration:none; } .lv-btn-ghost { background:var(--surface); color:var(--muted); border:1px solid var(--border); } .lv-btn-ghost:hover { color:var(--text); } .lv-btn-primary { background:var(--grad); color:#fff; } .lv-stars { font-size:13px; color:var(--yellow); font-weight:600; } /* ── STREAM LAYOUT ─────────────────────────────────── */ .live-page { overflow-anchor: none; } .stream-layout { flex:1; display:flex; align-items:flex-start; flex-wrap:wrap; max-width: calc(55vh * (16/9) + var(--chat-width, 380px)); margin: 0 auto; width: 100%; } .stream-main { flex: 1 1 calc(100% - var(--chat-width, 380px)); display:flex; flex-direction:column; min-width:0; max-width: calc(100% - var(--chat-width, 380px)); height:max-content; flex-shrink:0; } .stream-layout:has(.chat-panel.chat-popped-out) .stream-main { flex-basis: 100%; max-width: 100%; } .stream-layout:has(.chat-panel.chat-popped-out) { max-width: calc(55vh * (16/9) + 32px); } /* ── PLAYER ────────────────────────────────────────── */ .live-player { position: relative; background:#000; position:relative; flex-shrink:0; width:100%; aspect-ratio:16/9; } .live-player video { width:100%; height:100%; object-fit:contain; background:#000; } .lv-live-badge { display:none; position:absolute; bottom:48px; left:12px; z-index:10; pointer-events:none; font-size:13px; font-weight:700; background:rgba(0,0,0,0.55); padding:3px 8px; border-radius:4px; } .lv-live-badge__viewers { font-weight:400; opacity:0.85; margin-left:4px; } .lv-latency-hint { opacity:0.35; font-size:12px; } .live-player .video-js { height:100%!important; border-radius:0; } .live-player .video-js.vjs-fluid { height:100%!important; padding-top:0; } /* ── STREAM INFO BAR ───────────────────────────────── */ .stream-info-bar { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:14px; background:var(--bg2); flex-shrink:0; } .lv-av-wrap { width:44px; height:44px; flex-shrink:0; position:relative; } .lv-av-wrap::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--live); animation:lv-pulse-ring 2s infinite; } @keyframes lv-pulse-ring { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.06)} } .lv-av-img { width:44px; height:44px; border-radius:50%; object-fit:cover; display:block; } .lv-av-fallback { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; } .lv-info-main { flex:1; min-width:0; } .lv-stream-title { font-size:15px; font-weight:600; line-height:1.3; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lv-meta-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .lv-streamer-link { font-size:13px; font-weight:600; color:var(--cyan); } .lv-streamer-link:hover { text-decoration:underline; } .lv-game-tag { font-size:11px; color:var(--cyan); background:rgba(var(--cyan-rgb),.08); border:1px solid rgba(var(--cyan-rgb),.15); padding:2px 8px; border-radius:20px; } .lv-followers { font-size:12px; color:var(--muted); } .lv-followers strong { color:var(--text); } .lv-viewers-meta { font-size:12px; color:var(--muted); } .lv-viewers-meta strong { color:var(--text); } .lv-info-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; } .lv-title-row { display:flex; align-items:baseline; gap:6px; min-width:0; margin-bottom:4px; } .lv-live-tag { color:var(--live); font-size:12px; white-space:nowrap; } .lv-info-viewers { font-size:12px; color:var(--muted); white-space:nowrap; margin-left:auto; display:none; } .lv-info-viewers strong { color:var(--text); } .lv-follow-btn { padding:6px 14px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; background:rgba(var(--cyan-rgb),.1); border:1px solid rgba(var(--cyan-rgb),.2); color:var(--cyan); transition:all .2s; font-family:'Inter',sans-serif; } .lv-follow-btn:hover { background:rgba(var(--cyan-rgb),.2); } .lv-follow-btn.following { background:var(--surface); color:var(--muted); border-color:var(--border); } .lv-donate-btn { padding:6px 14px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; background:rgba(255,184,0,.08); border:1px solid rgba(255,184,0,.2); color:var(--yellow); transition:all .2s; font-family:'Inter',sans-serif; } .lv-donate-btn:hover { background:rgba(255,184,0,.18); } /* ── SUGGESTED ─────────────────────────────────────── */ .suggested-bar { padding:12px 16px; background:var(--bg); flex-basis:calc(100% - var(--chat-width)); flex-shrink:0; align-self:flex-start; } .suggested-bar::-webkit-scrollbar { width:4px; } .suggested-bar::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; } .suggested-label { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .suggested-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .suggested-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:all .2s; display:block; color:var(--text); } .suggested-card:hover { border-color:rgba(var(--cyan-rgb),.2); transform:translateY(-2px); } .sug-thumb { aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; font-size:22px; } .sug-thumb-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.6)); } .sug-live { position:absolute; top:5px; left:5px; background:var(--live); color:#fff; font-size:9px; font-weight:700; padding:2px 5px; border-radius:3px; } .sug-viewers { position:absolute; bottom:5px; right:5px; background:rgba(0,0,0,.7); color:#fff; font-size:10px; padding:1px 5px; border-radius:3px; } .sug-body { padding:8px; } .sug-title { font-size:11px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:3px; } .sug-name { font-size:10px; color:var(--muted); } /* ── AVATAR / THUMB GRADIENTS ──────────────────────── */ .c1{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue))} .c2{background:linear-gradient(135deg,var(--live-light),var(--live))} .c3{background:linear-gradient(135deg,#A855F7,#6366F1)} .c5{background:linear-gradient(135deg,#10B981,#059669)} .c6{background:linear-gradient(135deg,#F59E0B,#EF4444)} .g1{background:linear-gradient(135deg,#0A0520,#1A0A3E)} .g2{background:linear-gradient(135deg,#050A20,#0A1A3E)} .g3{background:linear-gradient(135deg,#200A0A,#3E1A1A)} .g4{background:linear-gradient(135deg,#0A1A0A,#1A3E1A)} /* ── CHAT PANEL ────────────────────────────────────── */ .chat-panel { width:var(--chat-width); flex-shrink:0; border-left:1px solid var(--border); display:flex; flex-direction:column; background:var(--bg2); position:sticky; top:61px; height:var(--chat-h, 560px); align-self:auto; overflow-y:auto; } .chat-header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; } .chat-title { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; } .chat-settings-btn { width:28px; height:28px; border-radius:6px; background:transparent; border:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .2s; } .chat-settings-btn:hover { background:var(--surface); color:var(--text); } .chat-popout-btn { font-size:16px; } .chat-panel.chat-popped-out { display:none; } /* Chat width control */ .chat-width-ctrl { position: relative; } .chat-width-btn { width: 32px; height: 32px; font-size: 16px; } .chat-width-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; z-index: 100; min-width: 110px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .chat-width-dropdown.open { display: block; } .chat-width-option { display: block; width: 100%; padding: 8px 14px; background: none; border: none; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; transition: background 0.15s; } .chat-width-option:hover { background: var(--surface); } .chat-width-option.active { color: var(--cyan); font-weight: 600; } /* Chat panel width states */ .chat-panel { transition: width 0.25s ease, opacity 0.25s ease; } .chat-panel.chat-hidden { width: 0; overflow: hidden; border-left: none; opacity: 0; } /* Hide gear on mobile */ @media (max-width: 768px) { .chat-width-ctrl { display: none; } } /* ── CHAT MESSAGES ─────────────────────────────────── */ .chat-messages { flex:1; overflow-y:auto; padding:12px 12px 8px; display:flex; flex-direction:column; gap:6px; } .chat-messages::-webkit-scrollbar { width:3px; } .chat-messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; } .chat-msg { display:flex; flex-direction:column; gap:1px; animation:lv-msgIn .2s ease; } @keyframes lv-msgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} } .chat-msg-header { display:flex; align-items:center; gap:5px; } .chat-time { font-size:10px; color:var(--muted); margin-left:auto; } .chat-msg .author { font-size:12px; font-weight:700; cursor:pointer; } .chat-msg .author:hover { text-decoration:underline; } .chat-msg .author.role-admin { color: var(--live); font-weight: 700; } .chat-msg .author.role-streamer { color: var(--live); font-weight: 700; } .chat-msg .author.role-beta { color: var(--cyan); font-weight: 700; } .chat-msg .author.role-mod { color: var(--green); font-weight: 700; } .chat-msg .author.role-vip { color: var(--yellow); font-weight: 700; } .chat-msg .text { font-size:13px; line-height:1.4; color:rgba(240,240,255,.85); word-break:break-word; } .chat-text { font-size:13px; line-height:1.4; color:rgba(240,240,255,.85); word-break:break-word; } .chat-username { font-size:12px; font-weight:700; cursor:pointer; } .chat-username:hover { text-decoration:underline; } .chat-link { color:var(--cyan); text-decoration:underline; word-break:break-all; transition:color .2s; } .chat-link:hover { color:var(--accent-hover); } body[data-theme="light"] .chat-link { color:var(--accent-blue); } body[data-theme="light"] .chat-link:hover { color:var(--accent-blue); } .chat-msg.highlight .chat-text, .chat-msg.highlight .text { background:rgba(var(--cyan-rgb),.05); border-left:2px solid var(--cyan); padding:4px 8px; border-radius:0 6px 6px 0; margin-top:2px; } .chat-badge { display:inline-block; font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; vertical-align:middle; } .streamer-badge,.badge-streamer { background:rgba(var(--cyan-rgb),.15); color:var(--cyan); } .admin-badge,.badge-admin { background:rgba(var(--live-rgb),.2); color:var(--live); } .badge-mod { background:rgba(0,200,150,.2); color:var(--green); } .badge-sub { background:rgba(var(--cyan-rgb),.15); color:var(--cyan); } .u1{color:var(--live-light)}.u2{color:#4ECDC4}.u3{color:#FFE66D}.u4{color:#A8E6CF} .u5{color:var(--accent-cyan)}.u6{color:#FF9A9E}.u7{color:#C3A6FF}.u8{color:#96CEB4} .chat-msg:hover .del-btn { opacity:1; } .del-btn { opacity:0; background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px; padding:0 4px; transition:opacity .2s; margin-left:auto; } .del-btn:hover { color:var(--live); } .chat-empty { color:var(--muted); text-align:center; padding:20px; font-size:14px; } .chat-msg.donation, .chat-donate { background:linear-gradient(135deg,rgba(255,184,0,.1),rgba(var(--live-rgb),.05)); border:1px solid rgba(255,184,0,.2); border-radius:8px; padding:10px 12px; animation:lv-donateIn .4s ease; } @keyframes lv-donateIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} } .donate-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; } .donate-stars { font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; color:var(--yellow); } .donate-username { font-size:13px; font-weight:700; color:var(--yellow); } .donate-text { font-size:12px; color:rgba(240,240,255,.7); } body[data-theme="light"] .chat-msg .text, body[data-theme="light"] .chat-text { color: var(--text-primary); } body[data-theme="light"] .donate-text { color: var(--text-secondary); } /* ── MESSAGE LINE ── */ .chat-msg-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px; } /* ── REPLY REF ── */ .chat-reply-ref { font-size:11px; color:var(--muted); padding:2px 8px; border-left:2px solid rgba(var(--cyan-rgb),.4); border-radius:0 4px 4px 0; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(255,255,255,.03); max-width:100%; } .chat-reply-ref strong { color:var(--cyan); } /* ── REPLY BUTTON ── */ .chat-reply-btn { display:none; background:none; border:none; color:var(--muted); cursor:pointer; font-size:11px; padding:1px 4px; line-height:1; transition:color .15s; flex-shrink:0; } .chat-msg-line:hover .chat-reply-btn { display:inline; } .chat-reply-btn:hover { color:var(--cyan); } /* ── REPLY BAR ── */ .chat-reply-bar { display:none; align-items:center; gap:8px; padding:5px 10px 5px 10px; margin:4px 12px 0; border-left:3px solid var(--cyan); background:rgba(var(--cyan-rgb),.06); border-radius:0 6px 6px 0; font-size:12px; flex-shrink:0; } .chat-reply-bar.visible { display:flex; } .chat-reply-preview { flex:1; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chat-reply-preview strong { color:var(--text); font-weight:600; } .chat-reply-cancel { background:none; border:none; cursor:pointer; color:var(--muted); font-size:15px; padding:0 2px; line-height:1; flex-shrink:0; } .chat-reply-cancel:hover { color:var(--live); } /* ── @ MENTION AUTOCOMPLETE ── */ .chat-mention-list { display:none; position:absolute; bottom:100%; left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:8px 8px 0 0; max-height:140px; overflow-y:auto; z-index:50; box-shadow:0 -4px 16px rgba(0,0,0,.4); } .chat-mention-list.visible { display:block; } .chat-mention-item { padding:7px 12px; font-size:13px; cursor:pointer; color:var(--text); transition:background .15s; } .chat-mention-item:hover,.chat-mention-item.active { background:rgba(var(--cyan-rgb),.1); color:var(--cyan); } .chat-mention { color:var(--cyan); font-weight:600; } .chat-msg.mentioned { background:rgba(var(--cyan-rgb),.06); border-radius:6px; padding:3px 6px; margin:-3px -6px; } .chat-system { text-align:center; font-size:11px; color:var(--muted); padding:4px 0; } /* ── PINNED MESSAGE BANNER ── */ .chat-pinned { padding:8px 12px; flex-shrink:0; background:rgba(var(--cyan-rgb),.06); border-bottom:1px solid rgba(var(--cyan-rgb),.2); display:none; align-items:flex-start; gap:8px; } .chat-pinned.visible { display:flex; } .chat-pinned .pin-icon { font-size:13px; flex-shrink:0; opacity:.7; margin-top:1px; } .chat-pinned .pin-content { flex:1; min-width:0; font-size:12px; line-height:1.4; overflow:hidden; } .chat-pinned .pin-author { font-weight:700; color:var(--cyan); } .chat-pinned .pin-text { color: var(--text); word-break:break-word; } .chat-pin-btn { display:none; background:none; border:none; color:var(--muted); cursor:pointer; font-size:11px; padding:1px 4px; line-height:1; transition:color .15s; flex-shrink:0; } .chat-msg-line:hover .chat-pin-btn { display:inline; } .chat-pin-btn:hover { color:var(--cyan); } /* ── CHAT INPUT ── */ .chat-input-area { position:relative; padding:10px 12px 12px; flex-shrink:0; border-top:1px solid var(--border); } #chatForm { margin:0; } .chat-input-wrap { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:8px; transition:border-color .2s; } .chat-input-wrap:focus-within { border-color:rgba(var(--cyan-rgb),.4); } #chatInput { flex:1; background:transparent; border:none; color:var(--text); font-size:13px; outline:none; font-family:'Inter',sans-serif; } #chatInput::placeholder { color:var(--muted); } .chat-send-btn { width:28px; height:28px; border-radius:6px; background:var(--grad); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; transition:opacity .2s; font-family:'Inter',sans-serif; } .chat-send-btn:hover { opacity:.9; } .chat-actions-row { display:flex; align-items:center; gap:8px; margin-top:8px; } .follow-quick-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 10px; border-radius:6px; background:rgba(var(--cyan-rgb),.1); border:1px solid rgba(var(--cyan-rgb),.2); color:var(--cyan); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; flex:1; font-family:'Inter',sans-serif; } .follow-quick-btn:hover { background:rgba(var(--cyan-rgb),.2); } .donate-quick-btn { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 10px; border-radius:6px; background:rgba(255,184,0,.1); border:1px solid rgba(255,184,0,.2); color:var(--yellow); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; flex:1; font-family:'Inter',sans-serif; } .donate-quick-btn:hover { background:rgba(255,184,0,.2); } .lv-chat-login { padding:12px; text-align:center; font-size:13px; color:var(--muted); } .lv-chat-login a { color:var(--cyan); } /* ── RESPONSIVE ── */ @media(max-width:890px) { .live-page { height:auto; min-height:100vh; } .stream-layout { flex-direction:column; overflow:visible; flex-wrap:nowrap; align-items:stretch; } .stream-main { overflow:visible; order:1; width:100%; flex:0 0 auto; max-width:100%; flex-basis:100%; } .chat-panel { width:100%; height:400px; border-left:none; border-top:1px solid var(--border); flex-shrink:0; position:static; order:2; } .suggested-bar { order:3; flex-basis:auto; width:100%; } .suggested-grid { grid-template-columns:repeat(2,1fr); } .stream-layout { max-width: 100%; } .live-player { width:100%; aspect-ratio:16/9; } .live-player .video-js, .live-player .video-js.vjs-fluid { width:100%; } .lv-live-indicator { display:none; } .lv-viewer-stat { display:none; } .stream-info-bar { padding:10px 12px; gap:10px; align-items:flex-start; } .lv-av-wrap { width:40px; height:40px; } .lv-av-img { width:40px; height:40px; } .lv-av-fallback { width:40px; height:40px; font-size:15px; } .lv-stream-title { white-space:normal; font-size:14px; font-weight:700; min-width:0; } .lv-info-viewers { display:inline; } .lv-info-actions { flex-direction:column; gap:4px; align-self:flex-start; flex-shrink:0; } .lv-follow-btn { font-size:11px; padding:4px 10px; min-height:32px; min-width:70px; text-align:center; } .more-menu-btn { padding:4px 8px; min-height:32px; font-size:13px; letter-spacing:1px; width:100%; } } @media(max-width:480px) { .chat-panel { height:320px; } .lv-nav { padding:0 10px; gap:8px; } .lv-back-text { display:none; } .chat-input-area { padding:8px 10px 10px; } } /* more-menu + report-modal → see blocks/_modal.css */ .rkn-warning { background: rgba(255,180,0,0.15); border: 1px solid rgba(255,180,0,0.4); border-radius:10px; padding:12px 16px; margin-bottom:12px; color:var(--text-primary); font-size:14px; line-height:1.5; } .streamer-info-block { padding: 12px 0; max-width: 100%; } .streamer-info-block__bio { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 10px; margin-top: 0; max-width: 750px; } .streamer-info-block__bio-wrap { margin-bottom: 16px; } /* Chat show button — visible only when chat is hidden */ .chat-show-btn { display: none; position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: #fff; z-index: 50; font-size: 18px; line-height: 1; transition: background 0.15s; backdrop-filter: blur(4px); } .chat-show-btn:hover { background: rgba(0,0,0,0.8); } @media (max-width: 768px) { } /* Hide unused Video.js controls */ .vjs-subs-caps-button, .vjs-captions-button, .vjs-chapters-button, .vjs-descriptions-button, .vjs-audio-button { display:none !important; } /* Chat message action menu */ .chat-msg-line { position: relative; } .chat-menu-btn { display: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; padding: 0 4px; margin-left: 4px; letter-spacing: 1px; vertical-align: middle; flex-shrink: 0; } .chat-msg:hover .chat-menu-btn { display: inline-block; } .chat-menu-dropdown { display: none; position: fixed; top: auto; left: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; min-width: 180px; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .chat-menu-dropdown.open { display: block; } .chat-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; color: var(--text); font-size: 13px; padding: 8px 14px; cursor: pointer; text-align: left; white-space: nowrap; } .chat-menu-item:hover { background: var(--bg-hover, rgba(255,255,255,0.06)); } .chat-menu-item--danger { color: var(--clr-danger, #e74c3c); } .chat-menu-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; } .chat-menu-sep { height: 1px; background: var(--border); margin: 4px 0; } .chat-edit-area { width: 100%; min-height: 40px; background: var(--bg-input, var(--bg-card)); border: 1px solid var(--clr-primary); border-radius: 4px; color: var(--text); font-size: 13px; padding: 4px 8px; resize: none; font-family: inherit; box-sizing: border-box; } .chat-edited-mark { font-size: 11px; color: var(--muted); } @media (max-width: 768px) { .chat-menu-btn { display: inline-block; } } .chat-emote { height: 24px; width: auto; vertical-align: middle; display: inline-block; margin: 0 1px; } .chat-emote-btn { background: none; border: none; cursor: pointer; font-size: 20px; padding: 0 6px; opacity: 0.7; transition: opacity 0.2s; flex-shrink: 0; } .chat-emote-btn:hover { opacity: 1; } .emote-picker-popup { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 240px; overflow-y: auto; z-index: 9999; box-shadow: 0 4px 20px rgba(0,0,0,0.4); width: 220px; } .emote-picker-item { background: none; border: none; border-radius: 6px; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; } .emote-picker-item:hover { background: var(--bg-hover, rgba(255,255,255,0.08)); } .emote-picker-item img { width: 28px; height: 28px; object-fit: contain; } /* === assets/css/pages/_clips.css === */ /* ═══════════════════════════════════════════════ pages/_clips.css — Clips/shorts page ═══════════════════════════════════════════════ */ :root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)} .clips-app{overflow:hidden} /* ── Clips App ── */ .clips-app{height:100vh;height:100dvh;position:relative;background:var(--bg)} .clips-container{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch} .clips-container::-webkit-scrollbar{display:none} /* ── Main block (clip-item) ── */ .clip-item{height:85vh;width:calc(85vh * 9 / 16);margin:calc((100vh - 85vh) / 2) auto;scroll-snap-align:center;scroll-snap-stop:always;position:relative;overflow:hidden;border-radius:16px;background:#000} /* ── Video wrapper = 100% of main block ── */ .clip-video-wrap{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;overflow:hidden} .clip-video-wrap .video-js{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent} .clip-video-wrap .video-js .vjs-tech{object-fit:cover} .clip-video-wrap .video-js .vjs-poster{background-size:cover} .clip-video-wrap .video-js .vjs-big-play-button, .clip-video-wrap .video-js .vjs-control-bar, .clip-video-wrap .video-js .vjs-loading-spinner{display:none} /* ── Custom play button ── */ .clip-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,0.45);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .15s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .clip-play-btn:hover{background:rgba(0,0,0,0.6);transform:translate(-50%,-50%) scale(1.08)} .clip-play-btn svg{width:28px;height:28px;fill:#fff;margin-left:3px} .clip-play-btn.is-hidden{opacity:0;pointer-events:none} /* ── Pause/play status flash ── */ .clip-status-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:25;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s} .clip-status-icon svg{width:24px;height:24px;fill:#fff} .clip-status-icon.is-showing{opacity:1} /* ── Overlay: bottom of main block, gradient shadow ── */ .clip-overlay{position:absolute;bottom:0;left:0;width:100%;padding:48px 16px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;pointer-events:none;z-index:10;border-radius:0 0 16px 16px} .clip-overlay *{pointer-events:auto} .clip-author{display:flex;align-items:center;gap:10px;margin-bottom:10px;text-decoration:none;color:#fff} .clip-author img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;object-fit:cover} .clip-author .name{font-weight:600;font-size:14px} .clip-title{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ── Actions: right side, bottom 20% of main block ── */ .clip-actions{position:absolute;right:12px;bottom:calc(20% + 16px);display:flex;flex-direction:column;gap:14px;align-items:center;z-index:20} .clip-action{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:11px;cursor:pointer;transition:transform .15s;text-shadow:0 1px 3px rgba(0,0,0,.85)} .clip-action:active{transform:scale(0.9)} .clip-action .icon{width:40px;height:40px;background:rgba(0,0,0,.4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .2s} .clip-action:hover .icon{background:rgba(255,255,255,.2)} .clip-action.liked .icon{background:var(--live)} /* ── Mobile: fullscreen ── */ @media(max-width:768px){ .clip-item{height:100vh;height:100dvh;width:100%;border-radius:0;margin:0} .clip-video-wrap{border-radius:0} .clip-overlay{border-radius:0;padding:48px 70px calc(20px + var(--safe-bottom)) 16px} .clip-actions{right:8px} .clip-comments-panel{width:100%} } /* ── Header ── */ .clips-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:calc(12px + var(--safe-top)) 16px 12px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(rgba(0,0,0,0.7),transparent)} .clips-header a{color:#fff;text-decoration:none} .clips-tabs{display:flex;gap:20px} .clips-tab{color:rgba(255,255,255,0.5);font-weight:600;font-size:16px;padding:4px 0;border-bottom:2px solid transparent;transition:all .2s} .clips-tab.active{color:#fff;border-bottom-color:#fff} .clips-tab:hover{color:#fff} .clips-empty{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px} .clips-empty .icon{font-size:64px;margin-bottom:16px;opacity:0.5} .clips-header .theme-btn{background:rgba(255,255,255,.15);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .2s} .clips-header .theme-btn:hover{background:rgba(255,255,255,.25)} @media(max-width:768px){.clips-header .theme-btn{display:none}} @media(min-width:769px){.clips-header{background:linear-gradient(rgba(10,10,15,0.9),transparent)}} /* ── Light theme: clips header ── */ [data-theme="light"] .clips-header{background:linear-gradient(var(--bg-primary),transparent)} [data-theme="light"] .clips-header a{color:var(--text-primary)} [data-theme="light"] .clips-tab{color:var(--text-muted)} [data-theme="light"] .clips-tab.active{color:var(--accent-cyan);border-bottom-color:var(--accent-cyan)} [data-theme="light"] .clips-tab:hover{color:var(--text-primary)} [data-theme="light"] .clips-header .theme-btn{background:rgba(0,0,0,.08)} [data-theme="light"] .clips-header .theme-btn:hover{background:rgba(0,0,0,.15)} @media(min-width:769px){[data-theme="light"] .clips-header{background:linear-gradient(var(--bg-primary),transparent)}} /* ── Comments panel ── */ .clip-comments-panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:min(100%,calc(85vh * 9 / 16));max-height:70vh;background:var(--surface);border-radius:16px 16px 0 0;z-index:199;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden} .clip-comments-panel.open{transform:translateX(-50%) translateY(0)} .clip-comments-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:10px auto 0} .clip-comments-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 12px;flex-shrink:0;border-bottom:1px solid var(--border)} .clip-comments-head .title{font-weight:700;font-size:16px;color:var(--text-primary)} .clip-comments-head .close-btn{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1} .clip-comments-list{overflow-y:auto;flex:1;padding:12px 16px} .clip-comment-item{display:flex;gap:10px;margin-bottom:14px} .clip-comment-item img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0} .clip-comment-item .body{flex:1} .clip-comment-item .name{font-weight:600;font-size:13px;color:var(--text-primary)} .clip-comment-item .text{font-size:14px;color:var(--text-secondary);margin-top:2px;line-height:1.4;word-break:break-word} .clip-comment-item .time{font-size:11px;color:var(--text-muted);margin-top:3px} .clip-comment-form{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0} .clip-comment-form img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0} .clip-comment-form .inner{flex:1;display:flex;flex-direction:column;gap:6px} .clip-comment-textarea{width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-family:inherit;font-size:14px;resize:none;outline:none;min-height:40px} .clip-comment-textarea::placeholder{color:var(--text-muted)} .clip-comment-submit{align-self:flex-end;padding:6px 18px;background:linear-gradient(135deg,var(--accent-cyan),var(--brand-blue));color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600} .clip-comments-overlay{display:none;position:fixed;inset:0;z-index:198;background:rgba(0,0,0,.4)} [data-theme="light"] .clip-comments-panel{background:var(--surface)} [data-theme="light"] .clip-comments-handle{background:rgba(0,0,0,.15)} [data-theme="light"] .clip-comments-head{border-bottom-color:var(--border)} [data-theme="light"] .clip-comments-head .close-btn{color:var(--text-muted)} [data-theme="light"] .clip-comment-item .time{color:var(--text-muted)} [data-theme="light"] .clip-comment-form{border-top-color:var(--border)} [data-theme="light"] .clip-comment-textarea{background:var(--bg-secondary);border-color:var(--border);color:var(--text-primary)} [data-theme="light"] .clip-comment-textarea::placeholder{color:var(--text-muted)} /* === assets/css/pages/_auth.css === */ /* ═══════════════════════════════════════════════════ pages/_auth.css — Auth pages styles Used by: login.php, register.php, forgot-password.php, reset-password.php ═══════════════════════════════════════════════════ */ /* ── Auth Layout ── */ .auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(320px, 420px) 1fr; align-items: center; padding: 40px 20px; background: radial-gradient(circle at 20% 50%, rgba(0,212,255,0.04) 0%, transparent 50%), radial-gradient(circle at 80% 30%, rgba(0,102,255,0.05) 0%, transparent 45%), var(--bg-primary); } .auth-box { grid-column: 2; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 18px; padding: 36px; position: relative; overflow: hidden; } .auth-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); } .auth-logo { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; margin-bottom: 6px; display: block; text-decoration: none; } .auth-subtitle { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 28px; } .auth-title { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); } .auth-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; } .auth-desc a { color: var(--accent-cyan); font-weight: 600; text-decoration: none; } .auth-desc a:hover { text-decoration: underline; } .auth-field { margin-bottom: 14px; } .auth-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; } .auth-field-label a { color: var(--accent-cyan); font-size: 11px; font-weight: 600; text-decoration: none; text-transform: none; } .auth-input { width: 100%; padding: 10px 14px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 14px; transition: border-color 0.2s; box-sizing: border-box; } .auth-input:focus { outline: none; border-color: rgba(var(--cyan-rgb),0.4); } .auth-input::placeholder { color: var(--text-muted); } .password-wrap { position: relative; } .password-wrap .auth-input { padding-right: 42px; } .password-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; transition: color 0.2s; line-height: 1; } .password-eye:hover { color: var(--text-primary); } .auth-btn { width: 100%; padding: 12px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); border: none; color: white; font-size: 15px; font-weight: 700; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.5px; cursor: pointer; transition: opacity 0.2s; margin-top: 4px; } .auth-btn:hover { opacity: 0.9; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 12px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } .auth-langs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-color); } .auth-langs a { padding: 5px 9px; border-radius: 7px; font-size: 13px; color: var(--text-muted); text-decoration: none; transition: background 0.2s, color 0.2s; } .auth-langs a:hover, .auth-langs a.active { background: var(--bg-primary); color: var(--text-primary); } @media (max-width: 480px) { .auth-page { grid-template-columns: 1fr; padding: 20px 16px; align-items: flex-start; padding-top: 40px; } .auth-box { grid-column: 1; padding: 28px 20px; } } .forgot-link { font-size: 13px; color: var(--text-muted); text-decoration: none; font-weight: 500; } .forgot-link:hover { color: var(--accent-cyan); } .alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; line-height: 1.5; } .alert-success { background: rgba(0,196,150,.1); color: var(--success); border: 1px solid rgba(0,196,150,.2); } .alert-error { background: rgba(239,68,68,.12); color: var(--live-light); border: 1px solid rgba(239,68,68,.2); } /* ═══════════════════════════════════════════════ Register page — multi-step registration ═══════════════════════════════════════════════ */ .reg-steps { display: flex; gap: 0; margin-bottom: 28px; } .reg-step { flex: 1; text-align: center; position: relative; padding-bottom: 18px; } .reg-step::after { content: ''; position: absolute; bottom: 7px; left: 0; right: 0; height: 2px; background: var(--border-color); border-radius: 2px; } .reg-step.done::after { background: var(--accent-cyan); } .reg-step.active::after { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)); } .reg-step .step-num { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-bottom: 6px; border: 2px solid var(--border-color); color: var(--text-muted); background: var(--bg-primary); } .reg-step.done .step-num { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); } .reg-step.active .step-num { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)); color: white; border-color: transparent; } .reg-step .step-label { font-size: 10px; color: var(--text-muted); display: block; } .reg-step.active .step-label { color: var(--text-primary); font-weight: 600; } .auth-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .auth-field-hint { font-size: 12px; color: var(--clr-muted); margin-top: 4px; } .beta-code-input { font-size: 20px; text-align: center; letter-spacing: 6px; font-weight: 700; text-transform: uppercase; font-family: 'Courier New', monospace; } .email-code-input { letter-spacing: 12px; font-size: 28px; text-align: center; font-family: 'Courier New', monospace; font-weight: 700; } .pass-wrap { position: relative; } .pass-wrap .auth-input { padding-right: 44px; } .pass-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; line-height: 1; } .pass-toggle:hover { color: var(--text-primary); } .tg-hint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--tg-hint-bg, rgba(0,136,204,0.08)); border: 1px solid var(--tg-hint-border, rgba(0,136,204,0.2)); border-radius: 10px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.7)); } .tg-hint svg { flex-shrink: 0; margin-top: 2px; } .tg-hint a { color: #0088cc; font-weight: 600; text-decoration: none; } [data-theme="light"] .tg-hint { --tg-hint-bg: rgba(0,136,204,0.06); --tg-hint-border: rgba(0,136,204,0.15); } .tg-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; background: #0088cc; border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; font-family: 'Inter', sans-serif; cursor: pointer; text-decoration: none; transition: opacity 0.2s; margin-bottom: 16px; } .tg-btn:hover { opacity: 0.9; } .tg-btn svg { flex-shrink: 0; } .code-accepted-badge { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; background: rgba(0,200,150,0.08); border: 1px solid rgba(0,200,150,0.2); font-size: 13px; color: var(--clr-accepted); } @media (max-width: 768px) { .auth-page { padding: 24px 16px; } .auth-box { padding: 28px 24px; } .reg-step .step-label { font-size: 9px; } } @media (max-width: 480px) { .email-code-input { font-size: 22px; letter-spacing: 8px; } .beta-code-input { font-size: 16px; letter-spacing: 4px; } } /* ═══════════════════════════════════════════════ Forgot-password + Reset-password pages ═══════════════════════════════════════════════ */ /* Centered single-column layout (forgot-password, reset-password) */ .auth-wrap { width: 100%; max-width: 420px; grid-column: 2; } .auth-logo-text { display: inline-block; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-close { position: absolute; top: 12px; right: 16px; font-size: 20px; color: var(--text-muted); text-decoration: none; line-height: 1; } .auth-close:hover { color: var(--text-primary); } /* Standalone form labels/inputs (forgot-password, reset-password use .form-label/.form-input instead of .form-group label / .form-group input from _form.css) */ .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; letter-spacing: .3px; } .form-input { width: 100%; padding: 12px 44px 12px 14px; border-radius: 10px; background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 15px; box-sizing: border-box; transition: border-color .2s; } .form-input:focus { outline: none; border-color: var(--accent-cyan); } .form-input::placeholder { color: var(--text-muted); opacity: .6; } /* Password reveal button (reset-password) */ .input-wrap { position: relative; } .eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: var(--text-muted); line-height: 0; } .eye-btn:hover { color: var(--text-primary); } /* Password strength indicator (reset-password) */ .strength-bar { height: 3px; border-radius: 2px; margin-top: 6px; background: var(--border-color); overflow: hidden; } .strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width .3s, background .3s; } /* Back link / footer */ .auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted); } .auth-footer a { color: var(--accent-cyan); text-decoration: none; font-weight: 600; } .auth-footer a:hover { text-decoration: underline; } /* Invalid/expired token state (reset-password) */ .token-invalid { text-align: center; padding: 12px 0 4px; } .token-invalid svg { color: var(--accent-cyan); opacity: .5; margin-bottom: 16px; } .token-invalid h2 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px; } .token-invalid p { font-size: 14px; color: var(--text-muted); margin: 0 0 24px; line-height: 1.5; } /* ═══════════════════════════════════════════════ apply.php — streamer application page ═══════════════════════════════════════════════ */ .apply-icon { font-size: 40px; text-align: center; margin-bottom: 10px; } textarea.auth-input { resize: vertical; min-height: 80px; } /* === assets/css/pages/_legal.css === */ /* ═══════════════════════════════════════════════ pages/_legal.css — Legal pages Used by: terms.php, privacy.php, dmca.php ═══════════════════════════════════════════════ */ .legal-content h2 { font-size: 18px; margin: 32px 0 12px; } .legal-content p, .legal-content li { color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px; } .legal-content ol, .legal-content ul { margin-left: 20px; } /* === assets/css/pages/_buy-stars.css === */ /* ── Page-level tokens ────────────────────────────── */ :root { --star-gold: var(--warning); --star-orange: #FF6B00; --star-grad: linear-gradient(135deg, var(--warning), var(--star-orange)); } /* ── Page layout ──────────────────────────────────── */ .stars-page { max-width: 860px; margin: 0 auto; padding: 52px 20px 100px; } /* ── Hero ─────────────────────────────────────────── */ .stars-hero { text-align: center; margin-bottom: 52px; } .stars-hero-icon { font-size: 60px; line-height: 1; margin-bottom: 18px; } .stars-hero-title { font-family: 'Rajdhani', sans-serif; font-size: 44px; font-weight: 700; background: var(--star-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 14px; line-height: 1.1; } .stars-hero-sub { color: var(--text-muted); font-size: 15px; line-height: 1.7; max-width: 460px; margin: 0 auto 20px; } .stars-balance-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,184,0,.1); border: 1px solid rgba(255,184,0,.25); border-radius: 24px; padding: 8px 22px; font-size: 15px; font-weight: 700; color: var(--star-gold); } /* ── Package grid ─────────────────────────────────── */ .stars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; } .stars-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 18px; padding: 28px 16px 22px; text-align: center; cursor: pointer; position: relative; transition: transform .2s, border-color .2s, box-shadow .2s; } .stars-card:hover { transform: translateY(-5px); border-color: rgba(255,184,0,.4); box-shadow: 0 12px 36px rgba(255,184,0,.1); } .stars-card.popular { border-color: rgba(255,184,0,.45); box-shadow: 0 0 0 1px rgba(255,184,0,.18), 0 4px 20px rgba(255,184,0,.08); } .stars-card-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--star-grad); color: #000; font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 3px 12px; border-radius: 10px; white-space: nowrap; text-transform: uppercase; } .stars-card-icon { font-size: 30px; margin-bottom: 12px; } .stars-card-amount { font-family: 'Rajdhani', sans-serif; font-size: 38px; font-weight: 700; color: var(--star-gold); line-height: 1; margin-bottom: 2px; } .stars-card-label { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } .stars-card-price { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; } .stars-card-ppu { font-size: 11px; color: var(--text-muted); margin-bottom: 18px; } .stars-buy-btn { width: 100%; padding: 11px 8px; border: none; border-radius: 10px; cursor: pointer; background: var(--star-grad); color: #000; font-size: 14px; font-weight: 700; transition: opacity .2s; } .stars-buy-btn:hover { opacity: .85; } /* ── What are stars ───────────────────────────────── */ .stars-what { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 18px; padding: 28px 32px; margin-bottom: 32px; } .stars-what-title { font-size: 15px; font-weight: 700; margin-bottom: 20px; color: var(--text-primary); } .stars-what-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .stars-what-item { display: flex; align-items: flex-start; gap: 12px; } .stars-what-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; } .stars-what-text strong { display:block; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:2px; } .stars-what-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; } /* ── Coming-soon modal ────────────────────────────── */ .cs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .cs-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 22px; padding: 40px 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.7); animation: cs-pop .22s cubic-bezier(.34,1.56,.64,1); } @keyframes cs-pop { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} } .cs-icon { font-size: 56px; margin-bottom: 18px; } .cs-title { font-family:'Rajdhani',sans-serif; font-size:27px; font-weight:700; color:var(--text-primary); margin-bottom:10px; } .cs-text { color:var(--text-muted); font-size:14px; line-height:1.65; margin-bottom:20px; } .cs-pkg { display: inline-block; margin-bottom: 24px; background: rgba(255,184,0,.1); border: 1px solid rgba(255,184,0,.25); border-radius: 10px; padding: 8px 22px; font-weight: 700; color: var(--star-gold); font-size: 16px; } .cs-tg-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer; background: linear-gradient(135deg,#229ED9,#1a7fc1); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: opacity .2s; margin-bottom: 12px; } .cs-tg-btn:hover { opacity: .88; } .cs-close-btn { width: 100%; padding: 11px; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); font-size: 14px; cursor: pointer; transition: background .15s; } .cs-close-btn:hover { background: var(--bg-primary); } /* ── Responsive ───────────────────────────────────── */ @media (max-width: 768px) { .stars-grid { grid-template-columns: repeat(2,1fr); gap:12px; } .stars-hero-title { font-size: 34px; } .stars-what-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stars-grid { grid-template-columns: repeat(2,1fr); } .cs-box { padding: 30px 18px; } } /* === assets/css/pages/_admin.css === */ /* ═══════════════════════════════════════════════ pages/_admin.css — Admin panel ═══════════════════════════════════════════════ */ .admin-tabs{display:flex;gap:4px;margin-bottom:24px;flex-wrap:wrap} .admin-tab{padding:10px 20px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);font-weight:500;font-size:14px;color:var(--text-secondary)} .admin-tab:hover{background:var(--bg-hover)} .admin-tab.active{background:var(--brand-gradient);border-color:transparent;color:#fff} .stat-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;text-align:center} .stat-value{font-size:32px;font-weight:800;background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .stat-label{color:var(--text-muted);font-size:14px;margin-top:4px} .admin-table{width:100%;border-collapse:collapse} .admin-table th,.admin-table td{padding:12px;text-align:left;border-bottom:1px solid var(--border)} .admin-table th{font-size:12px;text-transform:uppercase;color:var(--text-muted);font-weight:600} .admin-table tr:hover{background:var(--bg-hover)} /* Video grid */ .avid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .avid-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s} .avid-card:hover{border-color:var(--border-light);box-shadow:var(--shadow)} .avid-card[style*="display:none"]{display:none} .avid-thumb{aspect-ratio:16/9;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative} .avid-thumb.vertical{aspect-ratio:4/3} .avid-thumb img{width:100%;height:100%;object-fit:cover} .avid-badges{position:absolute;top:6px;left:6px;display:flex;gap:4px} .avid-badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;color:#fff} .avid-badge.video{background:var(--brand-blue)} .avid-badge.clip{background:#9333ea} .avid-badge.hidden{background:var(--live)} .avid-badge.processing{background:var(--warning);color:#000} .avid-info{padding:12px} .avid-info h4{font-size:13px;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .avid-meta{display:flex;gap:8px;font-size:11px;color:var(--text-muted);margin-bottom:8px;flex-wrap:wrap} .avid-acts{display:flex;gap:6px;flex-wrap:wrap} /* Edit Modal */ .edit-modal{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)} .edit-panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:16px;width:90%;max-width:860px;max-height:90vh;overflow-y:auto} .edit-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)} .edit-header h2{font-size:18px;font-weight:600;margin:0} .edit-body{display:flex;gap:24px;padding:24px} .edit-left{width:260px;flex-shrink:0} .edit-right{flex:1;min-width:0} .edit-section{margin-bottom:16px} .edit-label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px} .edit-input{width:100%;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:14px;font-family:inherit;box-sizing:border-box} .edit-input:focus{border-color:var(--accent);outline:none} .edit-row{display:flex;gap:12px} .edit-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--border)} .edit-thumb-current{aspect-ratio:16/9;background:var(--bg-primary);border-radius:8px;overflow:hidden;border:2px solid var(--border)} .edit-thumb-current.vertical{aspect-ratio:9/16} .edit-thumb-current img{width:100%;height:100%;object-fit:cover} .edit-thumb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px} .edit-thumb-option{cursor:pointer;border:3px solid transparent;border-radius:6px;overflow:hidden;transition:all .15s} .edit-thumb-option:hover{border-color:var(--border-light)} .edit-thumb-option.selected{border-color:var(--accent)} .edit-thumb-option img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .edit-thumb-option.vertical img{aspect-ratio:9/16} /* Stat card link (stats tab) */ .stat-card-link{display:block;text-decoration:none;color:inherit} .stat-card-link:hover .stat-card{border-color:var(--accent-cyan);box-shadow:0 0 0 1px var(--accent-cyan)} @media(max-width:768px){ .edit-body{flex-direction:column} .edit-left{width:100%} .edit-row{flex-direction:column} .avid-grid{grid-template-columns:1fr 1fr} .admin-table{font-size:13px} .admin-table th,.admin-table td{padding:8px 6px} } @media(max-width:480px){ .avid-grid{grid-template-columns:1fr} .admin-tabs{gap:2px} .admin-tab{padding:8px 12px;font-size:12px} .stat-card{padding:16px} .stat-value{font-size:24px} .edit-panel{width:96%;border-radius:12px} .edit-thumb-grid{grid-template-columns:repeat(3,1fr)} .admin-table th,.admin-table td{padding:6px 4px;font-size:12px} } /* === assets/css/pages/_analytics.css === */ .analytics { display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem 0; } .analytics__section-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 1rem 0; } .analytics__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .analytics__card { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.25rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); text-align: center; transition: border-color 0.2s; } .analytics__card:hover { border-color: var(--accent-cyan); } .analytics__card-icon { font-size: 1.5rem; line-height: 1; } .analytics__card-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .analytics__card-label { font-size: 0.75rem; color: var(--text-muted); } .analytics__table { width: 100%; border-collapse: collapse; } .analytics__table th { text-align: left; padding: 0.6rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border-color); } .analytics__table td { padding: 0.6rem 0.75rem; font-size: 0.875rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); } .analytics__table tbody tr:nth-child(even) td { background: var(--bg-hover); } @media (max-width: 768px) { .analytics__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .analytics__cards { grid-template-columns: 1fr 1fr; } } /* deployed: 1773739867 */