/* xPanal - theme.css Central design tokens ONLY: colors, font-family, font-sizes, shadows/glow. Layout (widths, padding, margins, positioning) stays inside each page. Changing the whole theme later = edit this single file. v2: added shared color-only component skins (tags, status dots, alert boxes, table header skin, badges) so pages stop redefining the same colors locally every time - only sizing/spacing stays page-local. */ :root { /* Backgrounds */ --bg1: #0b132b; --bg2: #1c2541; --panel: #12192f; --surface: rgba(255,255,255,0.05); --surface-strong: rgba(255,255,255,0.08); --border-cyan: rgba(0,234,255,0.15); --border-cyan-strong: rgba(0,234,255,0.25); /* Accent colors */ --cyan: #00eaff; --green: #4effa2; --orange: #ffb457; --red: #ff5252; --pink: #ff54a2; --purple: #e500ff; /* Text */ --text-main: #ffffff; --text-muted: #b8c2d9; --text-dim: #8fa3c9; --text-on-accent: #06121f; /* Font family */ --font-main: 'Tajawal', 'Segoe UI', sans-serif; --font-mono: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace; /* Font sizes (typographic scale) */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 30px; --fs-4xl: 60px; /* Glow / shadow effects */ --glow-cyan: 0 0 20px rgba(0,234,255,0.6); --glow-cyan-soft: 0 0 15px rgba(0,234,255,0.35); --glow-box: 0 0 40px rgba(0,234,255,0.15); --shadow-card: 0 8px 25px rgba(0,0,0,0.2); /* Gradients */ --gradient-bg: linear-gradient(135deg, var(--bg1), var(--bg2)); --gradient-btn: linear-gradient(90deg, #00e1ff, #0078ff); } /* ------------------------------------------------------------ Theme variants - selected via Default (no attribute / "dark") = original cyan cyber theme. Switching only re-defines the accent tokens; layout untouched. ------------------------------------------------------------ */ html[data-theme="purple"] { --cyan: #b06bff; --glow-cyan: 0 0 20px rgba(176,107,255,0.6); --glow-cyan-soft: 0 0 15px rgba(176,107,255,0.35); --glow-box: 0 0 40px rgba(176,107,255,0.15); --border-cyan: rgba(176,107,255,0.15); --border-cyan-strong: rgba(176,107,255,0.25); --gradient-btn: linear-gradient(90deg, #b06bff, #7b2ff7); } html[data-theme="green"] { --cyan: #29e0a8; --glow-cyan: 0 0 20px rgba(41,224,168,0.6); --glow-cyan-soft: 0 0 15px rgba(41,224,168,0.35); --glow-box: 0 0 40px rgba(41,224,168,0.15); --border-cyan: rgba(41,224,168,0.15); --border-cyan-strong: rgba(41,224,168,0.25); --gradient-btn: linear-gradient(90deg, #29e0a8, #0d9488); } html[data-theme="orange"] { --cyan: #ff9d42; --glow-cyan: 0 0 20px rgba(255,157,66,0.6); --glow-cyan-soft: 0 0 15px rgba(255,157,66,0.35); --glow-box: 0 0 40px rgba(255,157,66,0.15); --border-cyan: rgba(255,157,66,0.15); --border-cyan-strong: rgba(255,157,66,0.25); --gradient-btn: linear-gradient(90deg, #ff9d42, #e8590c); } /* ------------------------------------------------------------ Base reset + typography applied globally ------------------------------------------------------------ */ * { box-sizing: border-box; } body { font-family: var(--font-main); font-size: var(--fs-base); color: var(--text-main); background: var(--gradient-bg); } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } h3 { font-size: var(--fs-md); } a { color: var(--cyan); } code, pre { font-family: var(--font-mono); } /* ------------------------------------------------------------ Buttons ------------------------------------------------------------ */ .btn-primary { font-family: var(--font-main); font-size: var(--fs-md); font-weight: 700; background: var(--gradient-btn); color: var(--text-on-accent); border: none; cursor: pointer; transition: 0.25s; } .btn-primary:hover:not(:disabled) { filter: brightness(1.15); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; filter: none; } .btn-danger { font-family: var(--font-main); font-weight: 700; background: var(--red); color: #fff; border: none; cursor: pointer; } .btn-danger:hover { filter: brightness(1.15); } .btn-secondary { font-family: var(--font-main); font-weight: 700; background: var(--surface-strong); color: var(--text-main); border: 1px solid var(--border-cyan-strong); cursor: pointer; transition: 0.25s; } .btn-secondary:hover { background: rgba(0,234,255,0.12); } /* ------------------------------------------------------------ Surfaces ------------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border-cyan); box-shadow: var(--shadow-card); } input, select, textarea { font-family: var(--font-main); color: var(--text-main); background: var(--surface-strong); border: 1px solid var(--border-cyan-strong); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-cyan-soft); } /* ------------------------------------------------------------ Badges / tags (colors only - used across dashboard, sas pages, etc.) ------------------------------------------------------------ */ .badge { background: rgba(0,234,255,0.12); color: var(--cyan); font-size: var(--fs-xs); } .tag { font-family: var(--font-main); font-size: var(--fs-xs); } .tag-ok { background: rgba(78,255,162,0.12); color: var(--green); border: 1px solid rgba(78,255,162,0.3); } .tag-warn { background: rgba(255,180,87,0.12); color: var(--orange); border: 1px solid rgba(255,180,87,0.3); } .tag-err { background: rgba(255,82,82,0.12); color: var(--red); border: 1px solid rgba(255,82,82,0.3); } /* ------------------------------------------------------------ Status dots (small colored indicators, e.g. per-zone health) ------------------------------------------------------------ */ .status-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); } .status-dot.warn { background: var(--orange); box-shadow: 0 0 8px var(--orange); } .status-dot.err { background: var(--red); box-shadow: 0 0 8px var(--red); } /* ------------------------------------------------------------ Alert / note boxes (colors only) ------------------------------------------------------------ */ .alert-error { background: rgba(255,82,82,0.1); border: 1px solid rgba(255,82,82,0.3); color: var(--red); } .alert-success { background: rgba(78,255,162,0.1); border: 1px solid rgba(78,255,162,0.3); color: var(--green); } .alert-warn { background: rgba(255,180,87,0.08); border: 1px solid rgba(255,180,87,0.25); color: #ffd8a8; } .alert-info { background: rgba(0,234,255,0.08); border: 1px solid rgba(0,234,255,0.25); color: #9adfff; } /* ------------------------------------------------------------ Tables (color skin only - each page still defines its own widths/padding/breakpoints) ------------------------------------------------------------ */ table.themed-table th { background: rgba(0,234,255,0.08); color: var(--cyan); } table.themed-table th, table.themed-table td { border-bottom: 1px solid var(--border-cyan); } table.themed-table tbody tr:hover { background: rgba(0,234,255,0.05); } table.themed-table tfoot td { border-top: 2px solid var(--border-cyan-strong); background: rgba(0,234,255,0.05); } /* ------------------------------------------------------------ Debug / code output blocks ------------------------------------------------------------ */ pre.debug { background: rgba(0,0,0,0.35); color: var(--text-main); font-family: var(--font-mono); font-size: var(--fs-sm); direction: ltr; text-align: left; } /* ------------------------------------------------------------ Text color utilities ------------------------------------------------------------ */ .text-muted { color: var(--text-muted); } .text-dim { color: var(--text-dim); } .text-green { color: var(--green); } .text-orange { color: var(--orange); } .text-red { color: var(--red); } .text-cyan { color: var(--cyan); } .text-pink { color: var(--pink); } .text-purple { color: var(--purple); }