/** * VIP Codec — global UI themes (data-theme on ). * Base tokens live in app.css :root; each theme overrides the palette & chrome. */ /* -------------------------------------------------------------------------- */ [data-theme="aurora"] { --streams-detail-td-bg: rgba(28, 12, 36, 0.96); --bg: #120818; --bg2: #1a0f24; --card: rgba(36, 18, 48, 0.88); --border: rgba(244, 114, 182, 0.16); --text: #fdf4ff; --muted: #c4a8d4; --accent: #f472b6; --accent2: #c084fc; --ok: #4ade80; --warn: #fbbf24; --danger: #fb7185; --vip-sidebar-gradient: linear-gradient(188deg, #831843 0%, #9d174d 28%, #86198f 55%, #5b21b6 82%, #4c1d95 100%); --vip-sidebar-border: rgba(255, 255, 255, 0.16); --vip-sidebar-fg: #ffffff; --vip-sidebar-muted: rgba(253, 244, 255, 0.86); --vip-sidebar-label: rgba(250, 232, 255, 0.7); --vip-sidebar-hover: rgba(255, 255, 255, 0.16); --vip-sidebar-active: rgba(244, 114, 182, 0.42); --vip-sidebar-divider: rgba(255, 255, 255, 0.16); --vip-sidebar-chevron: rgba(253, 244, 255, 0.9); --vip-sidebar-child-border: rgba(255, 255, 255, 0.24); --vip-sidebar-group-open: rgba(255, 255, 255, 0.1); --vip-sidebar-group-active: rgba(255, 255, 255, 0.18); --vip-sidebar-link-active-bg: rgba(244, 114, 182, 0.32); --vip-sidebar-link-active-marker: #fce7f3; --vip-sidebar-active-marker: #f9a8d4; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.2); --vip-sidebar-scroll: rgba(255, 255, 255, 0.34); --vip-main-gradient: linear-gradient(180deg, #1a0f24 0%, #120818 100%); --vip-topbar-bg: rgba(26, 15, 36, 0.94); --vip-footer-bg: rgba(18, 8, 24, 0.78); --vip-sidebar-shadow: 4px 0 28px rgba(0, 0, 0, 0.48); --streams-card-bg: rgba(28, 14, 38, 0.55); --streams-toolbar-bg: linear-gradient(180deg, rgba(91, 33, 182, 0.35), rgba(20, 10, 28, 0.85)); --streams-head-bg: rgba(76, 29, 149, 0.75); --streams-head-fg: #f5d0fe; --streams-border: rgba(244, 114, 182, 0.14); --streams-row-hover: rgba(91, 33, 182, 0.28); --streams-row-expanded: rgba(157, 23, 77, 0.22); --streams-zebra: rgba(40, 20, 52, 0.35); --streams-legend-bg: rgba(18, 8, 28, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(50, 24, 64, 0.96), rgba(18, 8, 24, 0.99)); --density-bg: rgba(18, 8, 28, 0.5); --stat-card-accent-border: rgba(244, 114, 182, 0.5); --link-name: #f0abfc; } /* -------------------------------------------------------------------------- */ [data-theme="obsidian"] { --streams-detail-td-bg: rgba(10, 18, 28, 0.96); --bg: #080c11; --bg2: #0f1724; --card: rgba(17, 28, 40, 0.88); --border: rgba(125, 211, 252, 0.12); --text: #e8eef7; --muted: #8ba3bd; --accent: #22d3ee; --accent2: #a5b4fc; --ok: #34d399; --warn: #fbbf24; --danger: #fb7185; --vip-sidebar-gradient: linear-gradient(188deg, #0c4a6e 0%, #164e63 40%, #1e3a8a 100%); --vip-sidebar-border: rgba(34, 211, 238, 0.2); --vip-sidebar-fg: #f8fcff; --vip-sidebar-muted: rgba(186, 230, 253, 0.86); --vip-sidebar-label: rgba(186, 230, 253, 0.72); --vip-sidebar-hover: rgba(34, 211, 238, 0.16); --vip-sidebar-active: rgba(34, 211, 238, 0.32); --vip-sidebar-divider: rgba(186, 230, 253, 0.18); --vip-sidebar-chevron: rgba(224, 242, 254, 0.92); --vip-sidebar-child-border: rgba(34, 211, 238, 0.28); --vip-sidebar-group-open: rgba(34, 211, 238, 0.1); --vip-sidebar-group-active: rgba(34, 211, 238, 0.2); --vip-sidebar-link-active-bg: rgba(34, 211, 238, 0.26); --vip-sidebar-link-active-marker: #a5f3fc; --vip-sidebar-active-marker: #22d3ee; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.22); --vip-sidebar-scroll: rgba(186, 230, 253, 0.35); --vip-main-gradient: linear-gradient(180deg, #0f1928 0%, #080c11 100%); --vip-topbar-bg: rgba(15, 25, 40, 0.94); --vip-footer-bg: rgba(8, 12, 17, 0.75); --vip-sidebar-shadow: 4px 0 28px rgba(0, 0, 0, 0.45); --streams-card-bg: rgba(12, 20, 32, 0.62); --streams-toolbar-bg: linear-gradient(180deg, rgba(23, 37, 84, 0.55), rgba(12, 20, 32, 0.78)); --streams-head-bg: rgba(23, 37, 60, 0.92); --streams-head-fg: #bae6fd; --streams-border: rgba(125, 211, 252, 0.14); --streams-row-hover: rgba(30, 58, 95, 0.42); --streams-row-expanded: rgba(14, 116, 144, 0.18); --streams-zebra: rgba(15, 30, 50, 0.35); --streams-legend-bg: rgba(8, 16, 28, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(12, 24, 40, 0.95), rgba(8, 14, 24, 0.98)); --density-bg: rgba(8, 16, 28, 0.55); --stat-card-accent-border: rgba(34, 211, 238, 0.45); --link-name: #38bdf8; } /* -------------------------------------------------------------------------- */ [data-theme="ember"] { --streams-detail-td-bg: rgba(32, 20, 14, 0.96); --bg: #120c09; --bg2: #1c1410; --card: rgba(38, 28, 22, 0.9); --border: rgba(251, 191, 36, 0.14); --text: #fef3e9; --muted: #b09a87; --accent: #fb923c; --accent2: #fb7185; --ok: #4ade80; --warn: #fcd34d; --danger: #f87171; --vip-sidebar-gradient: linear-gradient(178deg, #7c2d12 0%, #9a3412 45%, #451a03 100%); --vip-sidebar-border: rgba(254, 215, 170, 0.16); --vip-sidebar-fg: #ffffff; --vip-sidebar-muted: rgba(254, 215, 170, 0.88); --vip-sidebar-label: rgba(254, 215, 170, 0.74); --vip-sidebar-hover: rgba(251, 146, 60, 0.2); --vip-sidebar-active: rgba(251, 146, 60, 0.36); --vip-sidebar-divider: rgba(254, 215, 170, 0.18); --vip-sidebar-chevron: rgba(255, 237, 213, 0.92); --vip-sidebar-child-border: rgba(251, 146, 60, 0.3); --vip-sidebar-group-open: rgba(251, 146, 60, 0.12); --vip-sidebar-group-active: rgba(251, 146, 60, 0.22); --vip-sidebar-link-active-bg: rgba(251, 146, 60, 0.3); --vip-sidebar-link-active-marker: #ffedd5; --vip-sidebar-active-marker: #fb923c; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.24); --vip-sidebar-scroll: rgba(254, 215, 170, 0.34); --vip-main-gradient: linear-gradient(180deg, #1a120c 0%, #120c09 100%); --vip-topbar-bg: rgba(28, 20, 16, 0.94); --vip-footer-bg: rgba(18, 12, 8, 0.76); --vip-sidebar-shadow: 4px 0 32px rgba(0, 0, 0, 0.5); --streams-card-bg: rgba(42, 28, 18, 0.55); --streams-toolbar-bg: linear-gradient(180deg, rgba(80, 40, 20, 0.45), rgba(30, 18, 12, 0.82)); --streams-head-bg: rgba(60, 32, 20, 0.9); --streams-head-fg: #fed7aa; --streams-border: rgba(251, 191, 36, 0.16); --streams-row-hover: rgba(124, 45, 18, 0.35); --streams-row-expanded: rgba(180, 83, 9, 0.22); --streams-zebra: rgba(90, 40, 20, 0.15); --streams-legend-bg: rgba(40, 24, 16, 0.5); --streams-detail-bg: linear-gradient(180deg, rgba(50, 28, 18, 0.96), rgba(24, 14, 8, 0.99)); --density-bg: rgba(40, 24, 16, 0.5); --stat-card-accent-border: rgba(251, 146, 60, 0.55); --link-name: #fdba74; } /* -------------------------------------------------------------------------- */ [data-theme="botanical"] { --streams-detail-td-bg: rgba(8, 28, 24, 0.96); --bg: #060d0c; --bg2: #0f1a17; --card: rgba(15, 32, 28, 0.88); --border: rgba(45, 212, 191, 0.14); --text: #ecfdf8; --muted: #86b8ad; --accent: #2dd4bf; --accent2: #6ee7b7; --ok: #4ade80; --warn: #fbbf24; --danger: #fb7185; --vip-sidebar-gradient: linear-gradient(188deg, #011612 0%, #022c22 35%, #064e3b 68%, #022f2a 100%); --vip-sidebar-border: rgba(45, 212, 191, 0.24); --vip-sidebar-fg: #f0fdfa; --vip-sidebar-muted: rgba(153, 246, 228, 0.88); --vip-sidebar-label: rgba(153, 246, 228, 0.72); --vip-sidebar-hover: rgba(45, 212, 191, 0.16); --vip-sidebar-active: rgba(45, 212, 191, 0.34); --vip-sidebar-divider: rgba(94, 234, 212, 0.18); --vip-sidebar-chevron: rgba(204, 251, 241, 0.92); --vip-sidebar-child-border: rgba(45, 212, 191, 0.3); --vip-sidebar-group-open: rgba(45, 212, 191, 0.1); --vip-sidebar-group-active: rgba(45, 212, 191, 0.2); --vip-sidebar-link-active-bg: rgba(45, 212, 191, 0.28); --vip-sidebar-link-active-marker: #99f6e4; --vip-sidebar-active-marker: #2dd4bf; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.26); --vip-sidebar-scroll: rgba(153, 246, 228, 0.34); --vip-main-gradient: linear-gradient(180deg, #0c1816 0%, #060d0c 100%); --vip-topbar-bg: rgba(12, 28, 24, 0.93); --vip-footer-bg: rgba(6, 13, 12, 0.78); --vip-sidebar-shadow: 4px 0 28px rgba(0, 40, 30, 0.45); --streams-card-bg: rgba(10, 34, 30, 0.52); --streams-toolbar-bg: linear-gradient(180deg, rgba(17, 94, 89, 0.4), rgba(8, 30, 28, 0.85)); --streams-head-bg: rgba(19, 78, 74, 0.88); --streams-head-fg: #99f6e4; --streams-border: rgba(45, 212, 191, 0.15); --streams-row-hover: rgba(17, 94, 89, 0.32); --streams-row-expanded: rgba(6, 120, 100, 0.2); --streams-zebra: rgba(15, 60, 50, 0.22); --streams-legend-bg: rgba(8, 32, 28, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(12, 45, 40, 0.96), rgba(6, 20, 18, 0.99)); --density-bg: rgba(8, 36, 32, 0.5); --stat-card-accent-border: rgba(45, 212, 191, 0.5); --link-name: #5eead4; } /* -------------------------------------------------------------------------- */ [data-theme="nord"] { --streams-detail-td-bg: rgba(59, 66, 82, 0.94); --bg: #2e3440; --bg2: #3b4252; --card: rgba(67, 76, 94, 0.85); --border: rgba(216, 222, 233, 0.12); --text: #eceff4; --muted: #aeb3bb; --accent: #88c0d0; --accent2: #b48ead; --ok: #a3be8c; --warn: #ebcb8b; --danger: #bf616a; --vip-sidebar-gradient: linear-gradient(175deg, #2e3440 0%, #3b4252 42%, #434c5e 100%); --vip-sidebar-border: rgba(236, 239, 244, 0.18); --vip-sidebar-fg: #ffffff; --vip-sidebar-muted: rgba(216, 222, 233, 0.88); --vip-sidebar-label: rgba(216, 222, 233, 0.72); --vip-sidebar-hover: rgba(236, 239, 244, 0.12); --vip-sidebar-active: rgba(136, 192, 208, 0.32); --vip-sidebar-divider: rgba(236, 239, 244, 0.16); --vip-sidebar-chevron: rgba(236, 239, 244, 0.9); --vip-sidebar-child-border: rgba(136, 192, 208, 0.32); --vip-sidebar-group-open: rgba(236, 239, 244, 0.08); --vip-sidebar-group-active: rgba(136, 192, 208, 0.22); --vip-sidebar-link-active-bg: rgba(136, 192, 208, 0.26); --vip-sidebar-link-active-marker: #d8dee9; --vip-sidebar-active-marker: #88c0d0; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.18); --vip-sidebar-scroll: rgba(216, 222, 233, 0.32); --vip-main-gradient: linear-gradient(180deg, #3b4252 0%, #2e3440 100%); --vip-topbar-bg: rgba(46, 52, 64, 0.95); --vip-footer-bg: rgba(46, 52, 64, 0.82); --vip-sidebar-shadow: 4px 0 20px rgba(0, 0, 0, 0.28); --streams-card-bg: rgba(67, 76, 94, 0.55); --streams-toolbar-bg: linear-gradient(180deg, rgba(76, 86, 106, 0.55), rgba(59, 66, 82, 0.82)); --streams-head-bg: rgba(76, 86, 106, 0.92); --streams-head-fg: #e5e9f0; --streams-border: rgba(216, 222, 233, 0.14); --streams-row-hover: rgba(76, 86, 106, 0.42); --streams-row-expanded: rgba(143, 188, 187, 0.15); --streams-zebra: rgba(59, 66, 82, 0.45); --streams-legend-bg: rgba(46, 52, 64, 0.42); --streams-detail-bg: linear-gradient(180deg, rgba(67, 76, 94, 0.95), rgba(46, 52, 64, 0.99)); --density-bg: rgba(59, 66, 82, 0.55); --stat-card-accent-border: rgba(136, 192, 208, 0.55); --link-name: #8fbcbb; } /* -------------------------------------------------------------------------- */ /* Guard — enterprise cyber dashboard (VIPProxyGuard-inspired) */ [data-theme="guard"] { --streams-detail-td-bg: #12151c; --bg: #0b0e14; --bg2: #10141c; --card: #151921; --border: rgba(71, 85, 105, 0.35); --text: #f1f5f9; --muted: #8b95a8; --accent: #3b82f6; --accent2: #8b5cf6; --ok: #22c55e; --warn: #f59e0b; --danger: #ef4444; --vip-sidebar-gradient: linear-gradient(180deg, #070a10 0%, #0d1017 55%, #111827 100%); --vip-sidebar-border: rgba(59, 130, 246, 0.2); --vip-sidebar-fg: #f1f5f9; --vip-sidebar-muted: rgba(148, 163, 184, 0.92); --vip-sidebar-label: rgba(148, 163, 184, 0.78); --vip-sidebar-hover: rgba(59, 130, 246, 0.18); --vip-sidebar-active: rgba(37, 99, 235, 0.5); --vip-sidebar-divider: rgba(59, 130, 246, 0.2); --vip-sidebar-chevron: rgba(226, 232, 240, 0.92); --vip-sidebar-child-border: rgba(59, 130, 246, 0.28); --vip-sidebar-group-open: rgba(59, 130, 246, 0.1); --vip-sidebar-group-active: rgba(59, 130, 246, 0.16); --vip-sidebar-link-active-bg: rgba(37, 99, 235, 0.35); --vip-sidebar-link-active-marker: #93c5fd; --vip-sidebar-active-marker: #3b82f6; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.28); --vip-sidebar-scroll: rgba(148, 163, 184, 0.34); --vip-main-gradient: linear-gradient(180deg, #0d1017 0%, #0b0e14 100%); --vip-topbar-bg: rgba(13, 16, 23, 0.96); --vip-footer-bg: rgba(11, 14, 20, 0.92); --vip-sidebar-shadow: 4px 0 32px rgba(0, 0, 0, 0.55); --streams-card-bg: #151921; --streams-toolbar-bg: linear-gradient(180deg, #181d27 0%, #151921 100%); --streams-head-bg: #1a2030; --streams-head-fg: #94a3b8; --streams-border: rgba(71, 85, 105, 0.4); --streams-row-hover: rgba(59, 130, 246, 0.08); --streams-row-expanded: rgba(59, 130, 246, 0.14); --streams-zebra: rgba(255, 255, 255, 0.02); --streams-legend-bg: #12151c; --streams-detail-bg: linear-gradient(180deg, #181d27 0%, #12151c 100%); --density-bg: #12151c; --stat-card-accent-border: #3b82f6; --link-name: #60a5fa; --guard-sidebar-active: #2563eb; --guard-metric-purple: #a855f7; --guard-metric-pink: #ec4899; } [data-theme="guard"] .vip-sidebar { background: var(--vip-sidebar-gradient); } [data-theme="guard"] .vip-logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, #3b82f6, #1d4ed8); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(37, 99, 235, 0.35); } [data-theme="guard"] .vip-menu-top.active, [data-theme="guard"] .vip-menu-link.active, [data-theme="guard"] .vip-menu-group.is-active > .vip-menu-group-btn { background: var(--guard-sidebar-active, #2563eb); color: #fff; border-radius: 8px; box-shadow: inset 3px 0 0 transparent; } [data-theme="guard"] .vip-menu-top:hover, [data-theme="guard"] .vip-menu-link:hover, [data-theme="guard"] .vip-menu-group-btn:hover { background: rgba(59, 130, 246, 0.12); border-radius: 8px; } [data-theme="guard"] .vip-menu-label { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; } [data-theme="guard"] .vip-stat-pill, [data-theme="guard"] .vip-topbar { border-color: var(--border); } [data-theme="guard"] .vip-btn-primary { background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); border-color: #3b82f6; color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); } [data-theme="guard"] .vip-table-card, [data-theme="guard"] .vip-monitor-card, [data-theme="guard"] .vf-section, [data-theme="guard"] .vip-stat-card { background: var(--card); border-color: var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } [data-theme="guard"] .vip-monitor-chart-wrap { background: #12151c; border-color: var(--border); } [data-theme="guard"] .vip-stream-stats-bar > .vip-stat-card:not(.vip-stat-filter), [data-theme="guard"] .vip-system-metrics-bar > .vip-stat-card { position: relative; overflow: hidden; border-left: none; padding-bottom: 1rem; } [data-theme="guard"] .vip-stream-stats-bar > .vip-stat-card:not(.vip-stat-filter)::after, [data-theme="guard"] .vip-system-metrics-bar > .vip-stat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 0 0 10px 10px; } [data-theme="guard"] .vip-stat-running::after { background: var(--ok) !important; } [data-theme="guard"] .vip-stat-stopped::after { background: var(--danger) !important; } [data-theme="guard"] .vip-system-metrics-bar > .vip-stat-card:nth-child(1)::after { background: var(--accent); } [data-theme="guard"] .vip-system-metrics-bar > .vip-stat-card:nth-child(2)::after { background: var(--ok); } [data-theme="guard"] .vip-system-metrics-bar > .vip-stat-card:nth-child(3)::after { background: var(--guard-metric-purple, #a855f7); } [data-theme="guard"] .vip-system-metrics-bar > .vip-stat-card:nth-child(4)::after { background: var(--guard-metric-pink, #ec4899); } [data-theme="guard"] .vip-system-metrics-bar--secondary > .vip-stat-card:nth-child(1)::after { background: var(--warn); } [data-theme="guard"] .vip-system-metrics-bar--secondary > .vip-stat-card:nth-child(2)::after { background: var(--accent); } [data-theme="guard"] .vip-system-metrics-bar--secondary > .vip-stat-card:nth-child(3)::after { background: var(--danger); } [data-theme="guard"] .vip-license-enterprise { border-color: rgba(59, 130, 246, 0.35); background: linear-gradient(135deg, #151921 0%, #1a2030 50%, #151921 100%); } [data-theme="guard"] .vip-license-tier { background: linear-gradient(135deg, #3b82f6, #2563eb); } [data-theme="guard"] .vip-filter-chip.active, [data-theme="guard"] .vip-filter-chip:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); color: #e2e8f0; } [data-theme="guard"] .chip-gpu { background: rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.45); color: #e9d5ff; } [data-theme="guard"] .vip-status-running { background: #16a34a; } [data-theme="guard"] .vip-status-stopped { background: #dc2626; } [data-theme="guard"] .vip-status-starting { background: #2563eb; } [data-theme="guard"] .vip-drm-preset-card.is-active { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; } /* -------------------------------------------------------------------------- */ [data-theme="lumen"] { --streams-detail-td-bg: rgba(248, 250, 252, 0.98); --bg: #f1f5f9; --bg2: #e2e8f0; --card: rgba(255, 255, 255, 0.94); --border: rgba(99, 102, 241, 0.18); --text: #0f172a; --muted: #64748b; --accent: #4f46e5; --accent2: #7c3aed; --ok: #059669; --warn: #d97706; --danger: #dc2626; --vip-sidebar-gradient: linear-gradient(188deg, #3730a3 0%, #4f46e5 50%, #312e81 100%); --vip-sidebar-border: rgba(99, 102, 241, 0.35); --vip-sidebar-fg: #ffffff; --vip-sidebar-muted: rgba(224, 231, 255, 0.9); --vip-sidebar-label: rgba(224, 231, 255, 0.76); --vip-sidebar-hover: rgba(255, 255, 255, 0.16); --vip-sidebar-active: rgba(129, 140, 248, 0.44); --vip-sidebar-divider: rgba(255, 255, 255, 0.18); --vip-sidebar-chevron: rgba(248, 250, 252, 0.92); --vip-sidebar-child-border: rgba(255, 255, 255, 0.26); --vip-sidebar-group-open: rgba(255, 255, 255, 0.1); --vip-sidebar-group-active: rgba(129, 140, 248, 0.28); --vip-sidebar-link-active-bg: rgba(129, 140, 248, 0.36); --vip-sidebar-link-active-marker: #e0e7ff; --vip-sidebar-active-marker: #818cf8; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.2); --vip-sidebar-scroll: rgba(224, 231, 255, 0.34); --vip-main-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); --vip-topbar-bg: rgba(255, 255, 255, 0.92); --vip-footer-bg: rgba(241, 245, 249, 0.9); --vip-sidebar-shadow: 4px 0 24px rgba(15, 23, 42, 0.08); --streams-card-bg: rgba(255, 255, 255, 0.85); --streams-toolbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.98)); --streams-head-bg: rgba(79, 70, 229, 0.12); --streams-head-fg: #312e81; --streams-border: rgba(99, 102, 241, 0.2); --streams-row-hover: rgba(99, 102, 241, 0.08); --streams-row-expanded: rgba(79, 70, 229, 0.1); --streams-zebra: rgba(248, 250, 252, 0.9); --streams-legend-bg: rgba(255, 255, 255, 0.75); --streams-detail-bg: linear-gradient(180deg, #ffffff, #f8fafc); --density-bg: rgba(255, 255, 255, 0.8); --stat-card-accent-border: rgba(79, 70, 229, 0.35); --link-name: #4338ca; } [data-theme="lumen"] .vip-sidebar { color: var(--vip-sidebar-fg); } [data-theme="lumen"] .vip-table-card, [data-theme="lumen"] .vip-monitor-card, [data-theme="lumen"] .vf-section, [data-theme="lumen"] .vip-stat-card { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } [data-theme="lumen"] .vip-stream-stats-bar > .vip-stat-card:not(.vip-stat-filter), [data-theme="lumen"] .vip-system-metrics-bar > .vip-stat-card { background: #fff; border-color: rgba(99, 102, 241, 0.15); } [data-theme="lumen"] .chip-gpu { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.35); color: #5b21b6; } [data-theme="lumen"] .chip-ffmpeg { color: #1e1b4b; border-color: rgba(79, 70, 229, 0.55); box-shadow: 0 1px 4px rgba(79, 70, 229, 0.15); text-shadow: none; } [data-theme="lumen"] .vip-ffmpeg-ver { color: #4338ca; font-weight: 600; } [data-theme="lumen"] .vip-topbar-alert-slot--ok .vip-host-alert--ok { color: #0c4a6e; text-shadow: none; animation: none; } [data-theme="lumen"] .vip-topbar-alert-slot--ok .vip-host-alert-icon { color: #0891b2; filter: none; } [data-theme="lumen"] input, [data-theme="lumen"] select, [data-theme="lumen"] textarea { background: #fff; color: #0f172a; border-color: rgba(100, 116, 139, 0.35); } [data-theme="lumen"] .vip-theme-preview { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1); } /* -------------------------------------------------------------------------- */ [data-theme="midnight"] { --streams-detail-td-bg: rgba(8, 14, 28, 0.96); --bg: #050810; --bg2: #0a1220; --card: rgba(14, 22, 38, 0.9); --border: rgba(56, 189, 248, 0.14); --text: #e8f4ff; --muted: #7a9ab8; --accent: #38bdf8; --accent2: #818cf8; --ok: #34d399; --warn: #fbbf24; --danger: #f87171; --vip-sidebar-gradient: linear-gradient(188deg, #020617 0%, #0c1929 40%, #1e3a5f 100%); --vip-sidebar-border: rgba(56, 189, 248, 0.22); --vip-sidebar-fg: #f0f9ff; --vip-sidebar-muted: rgba(186, 230, 253, 0.86); --vip-sidebar-label: rgba(186, 230, 253, 0.7); --vip-sidebar-hover: rgba(56, 189, 248, 0.14); --vip-sidebar-active: rgba(56, 189, 248, 0.32); --vip-sidebar-divider: rgba(56, 189, 248, 0.18); --vip-sidebar-chevron: rgba(224, 242, 254, 0.9); --vip-sidebar-child-border: rgba(56, 189, 248, 0.26); --vip-sidebar-group-open: rgba(56, 189, 248, 0.08); --vip-sidebar-group-active: rgba(56, 189, 248, 0.18); --vip-sidebar-link-active-bg: rgba(56, 189, 248, 0.24); --vip-sidebar-link-active-marker: #7dd3fc; --vip-sidebar-active-marker: #38bdf8; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.28); --vip-sidebar-scroll: rgba(186, 230, 253, 0.32); --vip-main-gradient: linear-gradient(180deg, #0a1220 0%, #050810 100%); --vip-topbar-bg: rgba(10, 18, 32, 0.94); --vip-footer-bg: rgba(5, 8, 16, 0.8); --vip-sidebar-shadow: 4px 0 28px rgba(0, 0, 0, 0.5); --streams-card-bg: rgba(10, 20, 36, 0.55); --streams-toolbar-bg: linear-gradient(180deg, rgba(30, 58, 95, 0.45), rgba(8, 14, 28, 0.88)); --streams-head-bg: rgba(22, 42, 72, 0.9); --streams-head-fg: #bae6fd; --streams-border: rgba(56, 189, 248, 0.14); --streams-row-hover: rgba(30, 64, 110, 0.35); --streams-row-expanded: rgba(14, 116, 144, 0.18); --streams-zebra: rgba(12, 24, 42, 0.3); --streams-legend-bg: rgba(6, 14, 28, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(14, 32, 56, 0.96), rgba(5, 10, 20, 0.99)); --density-bg: rgba(6, 14, 28, 0.5); --stat-card-accent-border: rgba(56, 189, 248, 0.45); --link-name: #7dd3fc; } /* -------------------------------------------------------------------------- */ [data-theme="copper"] { --streams-detail-td-bg: rgba(32, 22, 14, 0.96); --bg: #100a06; --bg2: #1a120c; --card: rgba(36, 26, 18, 0.9); --border: rgba(217, 119, 6, 0.16); --text: #fff7ed; --muted: #b08a6e; --accent: #ea580c; --accent2: #d97706; --ok: #4ade80; --warn: #facc15; --danger: #ef4444; --vip-sidebar-gradient: linear-gradient(188deg, #431407 0%, #7c2d12 42%, #292524 100%); --vip-sidebar-border: rgba(251, 146, 60, 0.2); --vip-sidebar-fg: #fff7ed; --vip-sidebar-muted: rgba(254, 215, 170, 0.88); --vip-sidebar-label: rgba(254, 215, 170, 0.72); --vip-sidebar-hover: rgba(234, 88, 12, 0.16); --vip-sidebar-active: rgba(234, 88, 12, 0.34); --vip-sidebar-divider: rgba(251, 146, 60, 0.18); --vip-sidebar-chevron: rgba(255, 237, 213, 0.92); --vip-sidebar-child-border: rgba(234, 88, 12, 0.28); --vip-sidebar-group-open: rgba(234, 88, 12, 0.1); --vip-sidebar-group-active: rgba(234, 88, 12, 0.2); --vip-sidebar-link-active-bg: rgba(234, 88, 12, 0.28); --vip-sidebar-link-active-marker: #fdba74; --vip-sidebar-active-marker: #fb923c; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.26); --vip-sidebar-scroll: rgba(254, 215, 170, 0.34); --vip-main-gradient: linear-gradient(180deg, #1a120c 0%, #100a06 100%); --vip-topbar-bg: rgba(26, 18, 12, 0.94); --vip-footer-bg: rgba(16, 10, 6, 0.78); --vip-sidebar-shadow: 4px 0 28px rgba(0, 0, 0, 0.48); --streams-card-bg: rgba(28, 20, 14, 0.55); --streams-toolbar-bg: linear-gradient(180deg, rgba(124, 45, 18, 0.4), rgba(20, 14, 10, 0.88)); --streams-head-bg: rgba(92, 38, 20, 0.9); --streams-head-fg: #fed7aa; --streams-border: rgba(217, 119, 6, 0.15); --streams-row-hover: rgba(120, 53, 15, 0.32); --streams-row-expanded: rgba(180, 83, 9, 0.18); --streams-zebra: rgba(40, 28, 20, 0.28); --streams-legend-bg: rgba(16, 10, 8, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(48, 32, 22, 0.96), rgba(16, 10, 8, 0.99)); --density-bg: rgba(20, 14, 10, 0.5); --stat-card-accent-border: rgba(234, 88, 12, 0.5); --link-name: #fdba74; } /* -------------------------------------------------------------------------- */ [data-theme="glacier"] { --streams-detail-td-bg: rgba(240, 249, 255, 0.98); --bg: #e8f4fc; --bg2: #dbeafe; --card: rgba(255, 255, 255, 0.94); --border: rgba(14, 165, 233, 0.2); --text: #0c4a6e; --muted: #64748b; --accent: #0284c7; --accent2: #0ea5e9; --ok: #059669; --warn: #d97706; --danger: #dc2626; --vip-sidebar-gradient: linear-gradient(188deg, #0c4a6e 0%, #0369a1 50%, #075985 100%); --vip-sidebar-border: rgba(14, 165, 233, 0.35); --vip-sidebar-fg: #f0f9ff; --vip-sidebar-muted: rgba(186, 230, 253, 0.9); --vip-sidebar-label: rgba(186, 230, 253, 0.76); --vip-sidebar-hover: rgba(255, 255, 255, 0.14); --vip-sidebar-active: rgba(56, 189, 248, 0.4); --vip-sidebar-divider: rgba(255, 255, 255, 0.18); --vip-sidebar-chevron: rgba(240, 249, 255, 0.92); --vip-sidebar-child-border: rgba(125, 211, 252, 0.28); --vip-sidebar-group-open: rgba(255, 255, 255, 0.1); --vip-sidebar-group-active: rgba(56, 189, 248, 0.22); --vip-sidebar-link-active-bg: rgba(56, 189, 248, 0.32); --vip-sidebar-link-active-marker: #e0f2fe; --vip-sidebar-active-marker: #38bdf8; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.18); --vip-sidebar-scroll: rgba(224, 242, 254, 0.34); --vip-main-gradient: linear-gradient(180deg, #f0f9ff 0%, #e8f4fc 100%); --vip-topbar-bg: rgba(255, 255, 255, 0.92); --vip-footer-bg: rgba(232, 244, 252, 0.9); --vip-sidebar-shadow: 4px 0 24px rgba(12, 74, 110, 0.1); --streams-card-bg: rgba(255, 255, 255, 0.88); --streams-toolbar-bg: linear-gradient(180deg, #fff, #e0f2fe); --streams-head-bg: rgba(2, 132, 199, 0.12); --streams-head-fg: #075985; --streams-border: rgba(14, 165, 233, 0.22); --streams-row-hover: rgba(14, 165, 233, 0.08); --streams-row-expanded: rgba(2, 132, 199, 0.1); --streams-zebra: rgba(248, 250, 252, 0.9); --streams-legend-bg: rgba(255, 255, 255, 0.8); --streams-detail-bg: linear-gradient(180deg, #fff, #f0f9ff); --density-bg: rgba(255, 255, 255, 0.85); --stat-card-accent-border: rgba(2, 132, 199, 0.35); --link-name: #0369a1; } [data-theme="glacier"] input, [data-theme="glacier"] select, [data-theme="glacier"] textarea { background: #fff; color: #0c4a6e; border-color: rgba(100, 116, 139, 0.35); } /* -------------------------------------------------------------------------- */ [data-theme="sunset"] { --streams-detail-td-bg: rgba(36, 18, 32, 0.96); --bg: #140810; --bg2: #1f0f1a; --card: rgba(40, 20, 36, 0.88); --border: rgba(251, 113, 133, 0.16); --text: #fff1f2; --muted: #c4a0b0; --accent: #fb7185; --accent2: #f97316; --ok: #4ade80; --warn: #fbbf24; --danger: #e11d48; --vip-sidebar-gradient: linear-gradient(188deg, #4c0519 0%, #9f1239 38%, #7c2d12 100%); --vip-sidebar-border: rgba(251, 113, 133, 0.22); --vip-sidebar-fg: #fff1f2; --vip-sidebar-muted: rgba(254, 205, 211, 0.88); --vip-sidebar-label: rgba(254, 205, 211, 0.72); --vip-sidebar-hover: rgba(251, 113, 133, 0.16); --vip-sidebar-active: rgba(244, 63, 94, 0.36); --vip-sidebar-divider: rgba(251, 113, 133, 0.18); --vip-sidebar-chevron: rgba(255, 228, 230, 0.92); --vip-sidebar-child-border: rgba(251, 113, 133, 0.28); --vip-sidebar-group-open: rgba(251, 113, 133, 0.1); --vip-sidebar-group-active: rgba(244, 63, 94, 0.2); --vip-sidebar-link-active-bg: rgba(244, 63, 94, 0.28); --vip-sidebar-link-active-marker: #fecdd3; --vip-sidebar-active-marker: #fb7185; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.26); --vip-sidebar-scroll: rgba(254, 205, 211, 0.34); --vip-main-gradient: linear-gradient(180deg, #1f0f1a 0%, #140810 100%); --vip-topbar-bg: rgba(28, 14, 24, 0.94); --vip-footer-bg: rgba(20, 8, 16, 0.78); --vip-sidebar-shadow: 4px 0 28px rgba(80, 20, 40, 0.4); --streams-card-bg: rgba(32, 16, 28, 0.52); --streams-toolbar-bg: linear-gradient(180deg, rgba(159, 18, 57, 0.38), rgba(20, 8, 16, 0.88)); --streams-head-bg: rgba(136, 19, 55, 0.88); --streams-head-fg: #fecdd3; --streams-border: rgba(251, 113, 133, 0.14); --streams-row-hover: rgba(159, 18, 57, 0.3); --streams-row-expanded: rgba(234, 88, 12, 0.16); --streams-zebra: rgba(48, 24, 40, 0.28); --streams-legend-bg: rgba(16, 8, 14, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(56, 28, 48, 0.96), rgba(20, 8, 16, 0.99)); --density-bg: rgba(20, 8, 16, 0.5); --stat-card-accent-border: rgba(251, 113, 133, 0.45); --link-name: #fda4af; } /* -------------------------------------------------------------------------- */ [data-theme="mono"] { --streams-detail-td-bg: rgba(24, 24, 24, 0.96); --bg: #0a0a0a; --bg2: #141414; --card: rgba(28, 28, 28, 0.92); --border: rgba(163, 163, 163, 0.2); --text: #f5f5f5; --muted: #a3a3a3; --accent: #e5e5e5; --accent2: #d4d4d4; --ok: #86efac; --warn: #fde047; --danger: #fca5a5; --vip-sidebar-gradient: linear-gradient(188deg, #171717 0%, #262626 50%, #404040 100%); --vip-sidebar-border: rgba(212, 212, 212, 0.18); --vip-sidebar-fg: #fafafa; --vip-sidebar-muted: rgba(212, 212, 212, 0.88); --vip-sidebar-label: rgba(212, 212, 212, 0.72); --vip-sidebar-hover: rgba(255, 255, 255, 0.1); --vip-sidebar-active: rgba(255, 255, 255, 0.22); --vip-sidebar-divider: rgba(163, 163, 163, 0.2); --vip-sidebar-chevron: rgba(250, 250, 250, 0.9); --vip-sidebar-child-border: rgba(163, 163, 163, 0.28); --vip-sidebar-group-open: rgba(255, 255, 255, 0.06); --vip-sidebar-group-active: rgba(255, 255, 255, 0.14); --vip-sidebar-link-active-bg: rgba(255, 255, 255, 0.18); --vip-sidebar-link-active-marker: #fafafa; --vip-sidebar-active-marker: #d4d4d4; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.3); --vip-sidebar-scroll: rgba(212, 212, 212, 0.32); --vip-main-gradient: linear-gradient(180deg, #141414 0%, #0a0a0a 100%); --vip-topbar-bg: rgba(20, 20, 20, 0.96); --vip-footer-bg: rgba(10, 10, 10, 0.82); --vip-sidebar-shadow: 4px 0 28px rgba(0, 0, 0, 0.55); --streams-card-bg: rgba(24, 24, 24, 0.6); --streams-toolbar-bg: linear-gradient(180deg, rgba(64, 64, 64, 0.5), rgba(16, 16, 16, 0.9)); --streams-head-bg: rgba(48, 48, 48, 0.95); --streams-head-fg: #e5e5e5; --streams-border: rgba(163, 163, 163, 0.16); --streams-row-hover: rgba(82, 82, 82, 0.4); --streams-row-expanded: rgba(115, 115, 115, 0.2); --streams-zebra: rgba(38, 38, 38, 0.35); --streams-legend-bg: rgba(16, 16, 16, 0.5); --streams-detail-bg: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(10, 10, 10, 0.99)); --density-bg: rgba(16, 16, 16, 0.55); --stat-card-accent-border: rgba(212, 212, 212, 0.4); --link-name: #d4d4d4; } /* -------------------------------------------------------------------------- */ [data-theme="royal"] { --streams-detail-td-bg: rgba(28, 14, 48, 0.96); --bg: #0c0618; --bg2: #160c28; --card: rgba(32, 18, 52, 0.9); --border: rgba(234, 179, 8, 0.18); --text: #faf5ff; --muted: #b8a0d0; --accent: #eab308; --accent2: #a855f7; --ok: #4ade80; --warn: #fbbf24; --danger: #f87171; --vip-sidebar-gradient: linear-gradient(188deg, #2e1065 0%, #581c87 45%, #1e1b4b 100%); --vip-sidebar-border: rgba(234, 179, 8, 0.22); --vip-sidebar-fg: #faf5ff; --vip-sidebar-muted: rgba(233, 213, 255, 0.88); --vip-sidebar-label: rgba(233, 213, 255, 0.72); --vip-sidebar-hover: rgba(168, 85, 247, 0.18); --vip-sidebar-active: rgba(234, 179, 8, 0.28); --vip-sidebar-divider: rgba(168, 85, 247, 0.2); --vip-sidebar-chevron: rgba(250, 245, 255, 0.92); --vip-sidebar-child-border: rgba(234, 179, 8, 0.28); --vip-sidebar-group-open: rgba(168, 85, 247, 0.1); --vip-sidebar-group-active: rgba(234, 179, 8, 0.16); --vip-sidebar-link-active-bg: rgba(234, 179, 8, 0.22); --vip-sidebar-link-active-marker: #fde68a; --vip-sidebar-active-marker: #eab308; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.28); --vip-sidebar-scroll: rgba(233, 213, 255, 0.34); --vip-main-gradient: linear-gradient(180deg, #160c28 0%, #0c0618 100%); --vip-topbar-bg: rgba(22, 12, 40, 0.94); --vip-footer-bg: rgba(12, 6, 24, 0.78); --vip-sidebar-shadow: 4px 0 32px rgba(60, 20, 100, 0.45); --streams-card-bg: rgba(24, 12, 44, 0.55); --streams-toolbar-bg: linear-gradient(180deg, rgba(88, 28, 135, 0.42), rgba(12, 6, 24, 0.88)); --streams-head-bg: rgba(76, 29, 149, 0.88); --streams-head-fg: #e9d5ff; --streams-border: rgba(234, 179, 8, 0.14); --streams-row-hover: rgba(109, 40, 217, 0.32); --streams-row-expanded: rgba(180, 83, 9, 0.14); --streams-zebra: rgba(36, 20, 56, 0.3); --streams-legend-bg: rgba(12, 6, 24, 0.45); --streams-detail-bg: linear-gradient(180deg, rgba(48, 24, 72, 0.96), rgba(12, 6, 24, 0.99)); --density-bg: rgba(12, 6, 24, 0.5); --stat-card-accent-border: rgba(234, 179, 8, 0.45); --link-name: #c4b5fd; } /* -------------------------------------------------------------------------- */ [data-theme="neon"] { --streams-detail-td-bg: rgba(4, 16, 8, 0.96); --bg: #020804; --bg2: #061208; --card: rgba(8, 24, 14, 0.9); --border: rgba(74, 222, 128, 0.2); --text: #ecfdf5; --muted: #6ee7a0; --accent: #4ade80; --accent2: #22c55e; --ok: #86efac; --warn: #fde047; --danger: #fb7185; --vip-sidebar-gradient: linear-gradient(188deg, #022c12 0%, #064e3b 40%, #020617 100%); --vip-sidebar-border: rgba(74, 222, 128, 0.28); --vip-sidebar-fg: #ecfdf5; --vip-sidebar-muted: rgba(167, 243, 208, 0.88); --vip-sidebar-label: rgba(167, 243, 208, 0.72); --vip-sidebar-hover: rgba(74, 222, 128, 0.14); --vip-sidebar-active: rgba(34, 197, 94, 0.38); --vip-sidebar-divider: rgba(74, 222, 128, 0.2); --vip-sidebar-chevron: rgba(209, 250, 229, 0.92); --vip-sidebar-child-border: rgba(74, 222, 128, 0.32); --vip-sidebar-group-open: rgba(74, 222, 128, 0.08); --vip-sidebar-group-active: rgba(34, 197, 94, 0.18); --vip-sidebar-link-active-bg: rgba(34, 197, 94, 0.28); --vip-sidebar-link-active-marker: #bbf7d0; --vip-sidebar-active-marker: #4ade80; --vip-sidebar-foot-bg: rgba(0, 0, 0, 0.32); --vip-sidebar-scroll: rgba(167, 243, 208, 0.34); --vip-main-gradient: linear-gradient(180deg, #061208 0%, #020804 100%); --vip-topbar-bg: rgba(6, 18, 10, 0.96); --vip-footer-bg: rgba(2, 8, 4, 0.82); --vip-sidebar-shadow: 4px 0 32px rgba(0, 80, 40, 0.35); --streams-card-bg: rgba(6, 20, 12, 0.58); --streams-toolbar-bg: linear-gradient(180deg, rgba(6, 78, 59, 0.45), rgba(2, 8, 4, 0.92)); --streams-head-bg: rgba(6, 95, 70, 0.9); --streams-head-fg: #a7f3d0; --streams-border: rgba(74, 222, 128, 0.18); --streams-row-hover: rgba(6, 95, 70, 0.35); --streams-row-expanded: rgba(34, 197, 94, 0.14); --streams-zebra: rgba(8, 28, 16, 0.32); --streams-legend-bg: rgba(2, 12, 6, 0.5); --streams-detail-bg: linear-gradient(180deg, rgba(8, 40, 24, 0.96), rgba(2, 8, 4, 0.99)); --density-bg: rgba(2, 12, 6, 0.55); --stat-card-accent-border: rgba(74, 222, 128, 0.5); --link-name: #6ee7b7; } [data-theme="neon"] .chip-gpu { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.45); color: #bbf7d0; }