/** * BGWARS Unified UI — design tokens + panel harmonization * Активира се с BGWARS_UNIFIED_UI = true и class .unified-ui на * Revert: BGWARS_UNIFIED_UI = false в config.php */ .unified-ui { --panel-bg: rgba(7, 7, 9, 0.94); --panel-bg-soft: rgba(255, 255, 255, 0.035); --panel-bg-muted: rgba(4, 4, 6, 0.88); --border: rgba(255, 255, 255, 0.08); --border-accent: rgba(255, 0, 68, 0.28); --radius: 16px; --radius-sm: 10px; --radius-xs: 8px; --glow: 0 0 42px rgba(0, 0, 0, 0.58), 0 0 24px rgba(255, 0, 68, 0.06); --glow-accent: 0 4px 28px rgba(255, 0, 68, 0.12); --accent: #ff0044; --accent-soft: rgba(255, 0, 68, 0.12); --accent-gradient: linear-gradient(90deg, #b8002e, #ff0044 45%, #ff6b9d); --top-strip: var(--accent-gradient); --backdrop-blur: blur(14px); --text-muted: rgba(255, 255, 255, 0.42); --text-dim: rgba(255, 255, 255, 0.28); } /* ── Header / menu ── */ .unified-ui .menu-nav { background: var(--panel-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border-bottom: 1px solid var(--border-accent); box-shadow: var(--glow); } .unified-ui .stats-bar { background: var(--panel-bg-muted); border-bottom: 1px solid var(--border); } .unified-ui .menu-nav-icons-row { background: var(--panel-bg-soft); border-bottom-color: var(--border-accent); } .unified-ui .menu-icon-btn, .unified-ui .menu-action-btn { border-color: var(--border); background: var(--panel-bg-soft); border-radius: var(--radius-xs); } .unified-ui .menu-dropdown { background: var(--panel-bg); border-color: var(--border-accent); border-radius: var(--radius); box-shadow: var(--glow-accent); } /* ── Left sidebar ── */ .unified-ui .nav-sidebar { background: var(--panel-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border-accent); border-radius: var(--radius); box-shadow: var(--glow); } .unified-ui .nav-header { border-bottom-color: var(--border-accent); background: var(--panel-bg-soft); } .unified-ui .nav-item { border-radius: var(--radius-xs); } .unified-ui .nav-item.active { background: var(--accent-soft); border-left-color: var(--accent); box-shadow: inset 0 0 16px rgba(255, 0, 68, 0.05); } /* ── Right sidebar widgets ── */ .unified-ui .rs-widget { background: var(--panel-bg); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--border-accent); border-radius: var(--radius); box-shadow: var(--glow); } .unified-ui .rs-widget::before { background: var(--rs-accent, var(--top-strip)) !important; height: 2px; } .unified-ui .rs-widget-header { border-bottom-color: var(--border); background: var(--panel-bg-soft); color: var(--text-muted); } .unified-ui .rs-stat, .unified-ui .rs-task-body { background: var(--panel-bg-soft); border-color: var(--border); border-radius: var(--radius-sm); } .unified-ui .rs-daily-card { border-color: rgba(245, 158, 11, 0.28) !important; box-shadow: var(--glow), 0 0 32px -14px rgba(245, 158, 11, 0.12); } .unified-ui .rs-mitio-cta { border-radius: var(--radius); box-shadow: var(--glow-accent); } .unified-ui .rs-mitio-cta-btn { border-radius: calc(var(--radius) - 1px); background: var(--panel-bg); } /* ── Ad banner ── */ .unified-ui .bgw-header-banner { background: var(--panel-bg); border: 1px solid var(--border-accent); border-radius: var(--radius); box-shadow: var(--glow-accent); } .unified-ui .bgw-header-banner--placeholder { border-color: var(--border); box-shadow: var(--glow); } .unified-ui .bgw-banner-label { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: var(--border-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } /* ── Profile & content panels ── */ .unified-ui .pf-banner { background: var(--panel-bg); border: 1px solid var(--border-accent); border-radius: var(--radius); box-shadow: var(--glow); } .unified-ui .pf-banner.vip-mode { border-color: rgba(255, 215, 0, 0.35); box-shadow: var(--glow), 0 0 36px -12px rgba(255, 215, 0, 0.15); } .unified-ui .ct-panel { background: var(--panel-bg) !important; border-color: var(--border-accent) !important; border-radius: var(--radius) !important; box-shadow: var(--glow) !important; } .unified-ui .ct-panel::before { background: var(--top-strip) !important; } /* ── Generic Tailwind-ish game panels ── */ .unified-ui main .rounded-xl.border, .unified-ui main .rounded-2xl.border { border-color: var(--border-accent); } .unified-ui .bg-black\/40.border, .unified-ui .bg-black\/50.border, .unified-ui .bg-gray-900\/80.border { background: var(--panel-bg) !important; border-color: var(--border-accent) !important; box-shadow: var(--glow); }