/* ============================================================ Statalog — Dashboard Styles Open source web analytics. https://statalog.com AGPL-3.0 License ============================================================ */ /* ── Accent color schemes ──────────────────────────────────── Switch the active scheme by setting data-accent="" on , driven by the STATALOG_ACCENT env variable. "blue" is the default and is applied when no data-accent attribute is present. Available: blue (default), indigo, violet, emerald, cyan, teal, amber, rose, ember ──────────────────────────────────────────────────────────── */ :root, [data-accent="emerald"] { --pa-primary: #10B981; --pa-primary-hover: #059669; } [data-accent="blue"] { --pa-primary: #0e7dd5; --pa-primary-hover: #0b6ab8; } [data-accent="indigo"] { --pa-primary: #4F46E5; --pa-primary-hover: #4338CA; } [data-accent="violet"] { --pa-primary: #8B5CF6; --pa-primary-hover: #7C3AED; } [data-accent="cyan"] { --pa-primary: #06B6D4; --pa-primary-hover: #0891B2; } [data-accent="teal"] { --pa-primary: #0D9488; --pa-primary-hover: #0F766E; } [data-accent="amber"] { --pa-primary: #F59E0B; --pa-primary-hover: #D97706; } [data-accent="rose"] { --pa-primary: #F43F5E; --pa-primary-hover: #E11D48; } [data-accent="ember"] { --pa-primary: #D04A1F; --pa-primary-hover: #B03D15; } /* Sidebar is a fixed dark slate across all schemes and themes. */ :root { --pa-sidebar-bg: #0F172A; --pa-sidebar-link: #CBCBCB; --pa-sidebar-text: #E8EBF3; --pa-sidebar-border: rgba(255, 255, 255, 0.08); --pa-sidebar-section-title: #6B7290; } /* ── Variables ── */ :root { --pa-primary-soft: color-mix(in srgb, var(--pa-primary) 10%, transparent); --pa-accent: var(--pa-primary); --pa-hover-bg: color-mix(in srgb, var(--pa-primary) 4%, transparent); --pa-bg: #fbf8f0; --pa-bg-alt: #fcfaf5; --pa-card-bg: #FFFFFF; --pa-text: #1A1D2B; --pa-text-muted: #5a6a7c; --pa-border: #e2e8eb; --pa-success: #22C55E; --pa-danger: #EF4444; --pa-danger-hover: #DC2626; --pa-danger-soft: rgba(239, 68, 68, 0.1); --pa-warning: #F59E0B; --pa-info: #3b82f6; --pa-input-bg: #F0F1F6; --pa-table-header-bg: rgba(0, 0, 0, 0.03); --pa-row-border: rgba(0, 0, 0, 0.06); --pa-dropdown-bg: #FFFFFF; --pa-dropdown-text: #1A1D2B; --pa-dropdown-hover: #F5F6FA; --pa-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --pa-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12); --pa-radius: 0.25rem; --pa-radius-lg: 0.75rem; --pa-sidebar-width: 260px; /* Font sizes */ --pa-font-xs: 0.75rem; --pa-font-sm: 0.8125rem; --pa-font-base: 1rem; --pa-font-lg: 1.125rem; --pa-font-xl: 1.5rem; --pa-font-2xl: 2rem; } [data-theme="dark"] { --pa-primary-soft: color-mix(in srgb, var(--pa-primary) 12%, transparent); --pa-hover-bg: color-mix(in srgb, var(--pa-primary) 3%, transparent); --pa-bg: #0D0F14; --pa-bg-alt: #1E2230; --pa-card-bg: #14171F; --pa-text: #CFD3DE; --pa-text-muted: #7A8199; --pa-border: #1E2230; --pa-input-bg: #0D0F14; --pa-table-header-bg: rgba(13, 15, 20, 0.5); --pa-row-border: rgba(30, 34, 48, 0.5); --pa-dropdown-bg: #14171F; --pa-dropdown-text: #F0F2F8; --pa-dropdown-hover: #1E2230; --pa-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --pa-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.4); } body { background-color: var(--pa-bg); color: var(--pa-text); font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; } /* ── Topbar ── */ .topbar { background: var(--pa-card-bg); border-bottom: 1px solid var(--pa-border); padding: 0 1.5rem; height: 54px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: var(--pa-sidebar-width); right: 0; z-index: 1030; } /* ── Utility classes ── */ .font-heading { font-family: 'Space Grotesk', sans-serif; } .font-heading-bold { font-family: 'Space Grotesk', sans-serif; font-weight: 700; } .text-xs { font-size: var(--pa-font-xs); } .text-sm { font-size: var(--pa-font-sm); } .text-lg { font-size: var(--pa-font-lg); } .text-xl { font-size: var(--pa-font-xl); } .text-primary { color: var(--pa-primary) !important; } .text-muted { color: var(--pa-text-muted) !important; } .text-success { color: var(--pa-success) !important; } .text-warning { color: var(--pa-warning) !important; } .text-danger { color: var(--pa-danger) !important; } .text-num { text-align: right; font-variant-numeric: tabular-nums; } .text-num-muted { text-align: right; font-variant-numeric: tabular-nums; color: var(--pa-text-muted); } .text-label { font-size: var(--pa-font-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pa-text-muted); } .text-sm-muted { font-size: var(--pa-font-sm); color: var(--pa-text-muted); } .text-xs-muted { font-size: var(--pa-font-xs); color: var(--pa-text-muted); } .icon-muted { color: var(--pa-text-muted); opacity: 0.5; font-size: var(--pa-font-lg); } .icon-primary { color: var(--pa-primary); } .topbar-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--pa-primary); text-decoration: none; display: none; } /* ── Sidebar ── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--pa-sidebar-width); height: 100vh; background: var(--pa-sidebar-bg); border-right: 1px solid var(--pa-sidebar-border); z-index: 1040; overflow-y: auto; transition: transform 0.3s ease; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); } .sidebar .sidebar-brand { padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--pa-sidebar-border); font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--pa-sidebar-text); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .sidebar .sidebar-brand span { color: var(--pa-primary); } .sidebar .site-switcher { padding: 0.75rem 1rem; border-bottom: 1px solid var(--pa-sidebar-border); } .sidebar .site-switcher select { width: 100%; background-color: rgba(255, 255, 255, 0.06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23CBCBCB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 14px; border: 1px solid var(--pa-sidebar-border); color: var(--pa-sidebar-text); padding: 0.5rem 2rem 0.5rem 0.75rem; border-radius: var(--pa-radius); font-size: 0.95rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .sidebar .site-switcher select:focus { border-color: var(--pa-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-primary) 20%, transparent); } /* Open dropdown panel — force dark readable text regardless of the sidebar's own colour scheme (browsers render