/* Generated from old includes/layout/theme-vars.php with the default MenuMania preset (#198754). */ :root { /* Brand */ --primary-color: #198754; --primary-rgb: 25,135,84; --on-primary: #ffffff; /* Layered backgrounds (set once per variant) */ --bg-base: #f4f6f8; --bg-elevated: #ffffff; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-chrome: rgba(255, 255, 255, 0.92); /* Text */ --text-primary: #0f172a; --text-muted: #475569; --text-on-primary: var(--on-primary); /* Borders / chrome */ --border-subtle: #e2e8f0; --glass-bg: rgba(25,135,84, 0.88); --glass-border: rgba(255, 255, 255, 0.35); --chrome-bg: var(--bg-chrome); /* Side / bottom nav (always brand-tinted for icon contrast) */ --nav-bg: rgba(25,135,84, 0.94); --nav-fg: #ffffff; --nav-border: rgba(255, 255, 255, 0.22); --nav-hover: rgba(255, 255, 255, 0.14); --nav-active: rgba(255, 255, 255, 0.2); --nav-glider-bg: linear-gradient( 135deg, rgba(25,135,84, 0.42), rgba(25,135,84, 0.92) ); --nav-glider-shadow: 0 0 18px rgba(25,135,84, 0.42), inset 0 0 10px rgba(255, 255, 255, 0.28); /* Header chips (account, inbox) on chrome surface */ --header-chip-bg: rgba(15, 23, 42, 0.05); --header-chip-border: #e2e8f0; --header-chip-fg: var(--text-primary); --header-chip-muted: var(--text-muted); --header-chip-hover: rgba(15, 23, 42, 0.08); /* Back-compat aliases */ --body-bg: var(--bg-base); --surface-bg: var(--bg-surface); --card-bg: var(--bg-card); --surface-muted: rgba(15, 23, 42, 0.045); --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-card-hover: 0 12px 28px rgba(15, 23, 42, 0.14); --shadow-modal: 0 1.25rem 2.75rem rgba(15, 23, 42, 0.18); /* Layout */ --island-radius: 28px; --sidebar-width: 90px; --sidebar-offset: 120px; --mobile-bottom-space: 104px; --app-header-offset: 5.75rem; /* Form / control system (forms.css) */ --control-radius: 0.7rem; --control-radius-sm: 0.55rem; --control-radius-pill: 9999px; --control-height: 2.5rem; --control-height-sm: 2rem; --control-height-lg: 3rem; --control-padding-x: 0.85rem; --control-padding-y: 0.55rem; --control-font-size: 0.9375rem; --control-border-width: 1px; --control-bg: var(--bg-surface); --control-fg: var(--text-primary); --control-border: var(--border-subtle); --control-placeholder: var(--text-muted); --control-focus-border: rgba(var(--primary-rgb), 0.55); --control-focus-ring: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.18); --control-disabled-bg: var(--bg-elevated, var(--bg-surface)); --control-disabled-fg: var(--text-muted); --btn-radius: var(--control-radius); --btn-font-weight: 600; --danger-color: #dc3545; --danger-rgb: 220, 53, 69; --warning-color: #f59e0b; --warning-rgb: 245, 158, 11; --info-color: #0ea5e9; --info-rgb: 14, 165, 233; --success-color: var(--primary-color); --success-rgb: var(--primary-rgb); /* Transient toast (app-notify.css) - change here → all pages */ --notify-radius: 14px; --notify-fg: #ffffff; --notify-z: 1035; --notify-max-width: 560px; --notify-duration: 3500ms; --notify-success-from: rgba(var(--primary-rgb), 0.94); --notify-success-to: rgba(var(--primary-rgb), 0.82); --notify-success-border: rgba(255, 255, 255, 0.28); --notify-danger-from: rgba(var(--danger-rgb), 0.94); --notify-danger-to: rgba(185, 28, 28, 0.92); --notify-danger-border: rgba(254, 202, 202, 0.35); --notify-warning-from: rgba(var(--warning-rgb), 0.94); --notify-warning-to: rgba(180, 83, 9, 0.92); --notify-warning-border: rgba(253, 230, 138, 0.35); --notify-info-from: rgba(var(--info-rgb), 0.94); --notify-info-to: rgba(29, 78, 216, 0.92); --notify-info-border: rgba(191, 219, 254, 0.35); /* Bootstrap bridges */ --bs-primary: var(--primary-color); --bs-success: var(--primary-color); --bs-danger: var(--danger-color); --bs-warning: var(--warning-color); --bs-info: var(--info-color); --bs-link-color: var(--primary-color); --bs-link-hover-color: var(--primary-color); --bs-body-color: var(--text-primary); --bs-body-bg: var(--bg-base); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border-subtle); --bs-emphasis-color: var(--text-primary); --bs-border-radius: var(--control-radius); } /* Dark / AMOLED layer - toggled by html.theme-dark */ html.theme-dark { --bg-base: #0d1117; --bg-elevated: #161b22; --bg-surface: #161b22; --bg-card: #1c2128; --bg-chrome: rgba(22, 27, 34, 0.94); --text-primary: #e8eef8; --text-muted: #94a3b8; --border-subtle: #30363d; --glass-bg: rgba(22, 27, 34, 0.92); --glass-border: rgba(255, 255, 255, 0.12); --on-primary: #ffffff; --body-bg: var(--bg-base); --surface-bg: var(--bg-surface); --card-bg: var(--bg-card); --chrome-bg: var(--bg-chrome); --surface-muted: rgba(255, 255, 255, 0.06); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.42); --shadow-modal: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.55); --nav-bg: rgba(25,135,84, 0.88); --nav-fg: #ffffff; --nav-border: rgba(255, 255, 255, 0.14); --nav-hover: rgba(255, 255, 255, 0.1); --nav-active: rgba(255, 255, 255, 0.16); --nav-glider-bg: linear-gradient( 135deg, rgba(25,135,84, 0.38), rgba(25,135,84, 0.88) ); --nav-glider-shadow: 0 0 18px rgba(25,135,84, 0.38), inset 0 0 10px rgba(255, 255, 255, 0.18); --header-chip-bg: rgba(255, 255, 255, 0.08); --header-chip-border: rgba(255, 255, 255, 0.14); --header-chip-fg: var(--text-primary); --header-chip-muted: var(--text-muted); --header-chip-hover: rgba(255, 255, 255, 0.12); --bs-body-color: var(--text-primary); --bs-body-bg: var(--bg-base); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border-subtle); --bs-emphasis-color: var(--text-primary); } /* AMOLED: pure black chrome; nav icons use bright primary (not black-on-black) */ html[data-theme-look="amoled"], html[data-theme-preset="amoled"] { --nav-bg: #000000; --nav-fg: #198754; --nav-border: #1c1c1e; --nav-hover: rgba(255, 255, 255, 0.06); --nav-active: rgba(var(--primary-rgb), 0.14); --nav-glider-bg: linear-gradient( 135deg, rgba(var(--primary-rgb), 0.22), rgba(var(--primary-rgb), 0.55) ); --nav-glider-shadow: 0 0 16px rgba(var(--primary-rgb), 0.35), inset 0 0 8px rgba(255, 255, 255, 0.08); --header-chip-bg: rgba(255, 255, 255, 0.06); --header-chip-border: #1c1c1e; --header-chip-fg: #f5f5f7; --header-chip-muted: #a1a1aa; } body { background-color: var(--bg-base); color: var(--text-primary); }