/* ──────────────────────────────────────────────────────────── ТЕМЫ. Каждая определяет цветовые переменные + фоновые слои. Переключение: ──────────────────────────────────────────────────────────── */ /* ░░░░░░░░░░ AURORA (default premium) ░░░░░░░░░░ */ [data-theme="aurora"] { --bg: #08070d; --surface-1: rgba(20, 18, 36, .55); --surface-2: rgba(28, 26, 48, .75); --sidebar-bg: rgba(12, 10, 22, .72); --topbar-bg: rgba(12, 10, 22, .55); --border: rgba(140, 120, 220, .16); --hover: rgba(140, 120, 220, .08); --scroll: rgba(140, 120, 220, .25); --text: #ECE7FF; --text-soft: #B7B0D9; --text-mute: #6F698F; --accent: #9B7BFF; --accent-bg: rgba(155, 123, 255, .12); --accent-border: rgba(155, 123, 255, .35); --accent-glow: rgba(155, 123, 255, .40); --ok: #4DE0A4; --ok-glow: rgba(77, 224, 164, .45); --bad: #FF5C7C; --bad-glow: rgba(255, 92, 124, .45); --warn: #FFC857; } [data-theme="aurora"] .bg-aurora { display: block; background: radial-gradient(ellipse 60% 40% at 15% 10%, rgba(155, 123, 255, .35), transparent 60%), radial-gradient(ellipse 40% 30% at 90% 80%, rgba(77, 224, 164, .22), transparent 65%), radial-gradient(ellipse 50% 35% at 60% 50%, rgba(255, 92, 124, .12), transparent 60%); filter: blur(40px); animation: aurora-shift 24s ease-in-out infinite; } @keyframes aurora-shift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-3%, 2%) scale(1.05); } 66% { transform: translate(2%, -1%) scale(0.97); } } [data-theme="aurora"] .bg-grid { display: block; background-image: linear-gradient(rgba(155, 123, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(155, 123, 255, .04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); } /* ░░░░░░░░░░ MATRIX ░░░░░░░░░░ */ [data-theme="matrix"] { --bg: #000404; --surface-1: rgba(0, 30, 12, .55); --surface-2: rgba(0, 40, 18, .80); --sidebar-bg: rgba(0, 12, 6, .82); --topbar-bg: rgba(0, 12, 6, .65); --border: rgba(0, 255, 110, .18); --hover: rgba(0, 255, 110, .07); --scroll: rgba(0, 255, 110, .25); --text: #C7FFD9; --text-soft: #6FE39B; --text-mute: #357A52; --accent: #00FF6E; --accent-bg: rgba(0, 255, 110, .12); --accent-border: rgba(0, 255, 110, .45); --accent-glow: rgba(0, 255, 110, .55); --ok: #00FF6E; --ok-glow: rgba(0, 255, 110, .55); --bad: #FF3B5C; --bad-glow: rgba(255, 59, 92, .55); --warn: #B0FF00; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important; } [data-theme="matrix"] body { font-family: 'JetBrains Mono', 'Consolas', monospace; } [data-theme="matrix"] .bg-canvas { display: block; } /* matrix rain canvas */ [data-theme="matrix"] .bg-grid { display: block; background-image: linear-gradient(rgba(0, 255, 110, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 110, .06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 40%, transparent 90%); } [data-theme="matrix"] .brand-title, [data-theme="matrix"] .nav-item, [data-theme="matrix"] .kpi-mini .kpi-value { text-transform: uppercase; letter-spacing: 0.08em; } /* ░░░░░░░░░░ NEON (cyberpunk cyan/magenta) ░░░░░░░░░░ */ [data-theme="neon"] { --bg: #060118; --surface-1: rgba(20, 6, 50, .55); --surface-2: rgba(28, 8, 64, .78); --sidebar-bg: rgba(10, 4, 30, .80); --topbar-bg: rgba(10, 4, 30, .60); --border: rgba(0, 240, 255, .22); --hover: rgba(0, 240, 255, .08); --scroll: rgba(0, 240, 255, .25); --text: #ECF6FF; --text-soft: #9DC9DD; --text-mute: #5C7C92; --accent: #00F0FF; --accent-bg: rgba(0, 240, 255, .12); --accent-border: rgba(0, 240, 255, .45); --accent-glow: rgba(0, 240, 255, .60); --ok: #50FFB0; --ok-glow: rgba(80, 255, 176, .50); --bad: #FF2D80; --bad-glow: rgba(255, 45, 128, .60); --warn: #FFD400; } [data-theme="neon"] .bg-aurora { display: block; background: radial-gradient(ellipse 50% 35% at 20% 20%, rgba(0, 240, 255, .35), transparent 60%), radial-gradient(ellipse 45% 35% at 85% 75%, rgba(255, 45, 128, .30), transparent 60%); filter: blur(50px); animation: aurora-shift 18s ease-in-out infinite; } [data-theme="neon"] .bg-grid { display: block; background-image: linear-gradient(rgba(0, 240, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 45, 128, .05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); } /* ░░░░░░░░░░ HOLO (iridescent) ░░░░░░░░░░ */ [data-theme="holo"] { --bg: #07080F; --surface-1: rgba(255, 255, 255, .04); --surface-2: rgba(255, 255, 255, .07); --sidebar-bg: rgba(10, 12, 22, .65); --topbar-bg: rgba(10, 12, 22, .50); --border: rgba(255, 255, 255, .10); --hover: rgba(255, 255, 255, .05); --scroll: rgba(255, 255, 255, .15); --text: #F2F0FF; --text-soft: #C5C2DD; --text-mute: #7C7892; --accent: #C8B6FF; --accent-bg: rgba(200, 182, 255, .12); --accent-border: rgba(200, 182, 255, .35); --accent-glow: rgba(200, 182, 255, .50); --ok: #B8FFD9; --ok-glow: rgba(184, 255, 217, .45); --bad: #FFB1C8; --bad-glow: rgba(255, 177, 200, .45); --warn: #FFE7A8; } [data-theme="holo"] .bg-aurora { display: block; background: conic-gradient(from 90deg at 50% 50%, rgba(200, 182, 255, .28), rgba(184, 255, 217, .18), rgba(255, 177, 200, .25), rgba(170, 220, 255, .22), rgba(200, 182, 255, .28)); filter: blur(80px); opacity: .55; animation: holo-spin 50s linear infinite; } @keyframes holo-spin { to { transform: rotate(360deg); } } [data-theme="holo"] .bg-grid { display: block; background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); } /* ░░░░░░░░░░ active marker for theme buttons ░░░░░░░░░░ */ .theme-btn.t-aurora { color: #b29eff; } .theme-btn.t-matrix { color: #6fe39b; } .theme-btn.t-neon { color: #00f0ff; } .theme-btn.t-holo { color: #C8B6FF; }