ISMAIL MASSERAN
73 lines
4.0 KiB
CSS
Vendored
73 lines
4.0 KiB
CSS
Vendored
:root {
|
|
/*
|
|
* Centralized semantic palette — literal colors live here only.
|
|
* Primary / Secondary / Accent / Background / Surface / Text / Border
|
|
*/
|
|
--color-primary: #4F7DB8;
|
|
--color-secondary: #2F5D9A;
|
|
--color-accent: #C62828;
|
|
--color-background: #F5F9FD;
|
|
--color-surface: #ffffff;
|
|
--color-text: #1F2937;
|
|
--color-border: #D6E0EA;
|
|
|
|
/* Content on filled regions (no extra literals) */
|
|
--color-on-primary: var(--color-surface);
|
|
--color-on-accent: var(--color-surface);
|
|
|
|
/* Derived tones — color-mix + semantic vars only */
|
|
--color-accent-strong: color-mix(in srgb, var(--color-accent) 78%, var(--color-text) 22%);
|
|
--color-accent-deep: color-mix(in srgb, var(--color-accent) 52%, var(--color-text) 48%);
|
|
--color-primary-soft-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
|
|
--color-accent-soft-glow: color-mix(in srgb, var(--color-accent) 18%, transparent);
|
|
--color-secondary-soft-glow: color-mix(in srgb, var(--color-secondary) 12%, transparent);
|
|
--color-text-soft-shadow: color-mix(in srgb, var(--color-text) 16%, transparent);
|
|
--color-surface-veil-08: color-mix(in srgb, var(--color-surface) 8%, transparent);
|
|
--color-surface-veil-10: color-mix(in srgb, var(--color-surface) 10%, transparent);
|
|
--color-surface-veil-14: color-mix(in srgb, var(--color-surface) 14%, transparent);
|
|
--color-surface-veil-25: color-mix(in srgb, var(--color-surface) 25%, transparent);
|
|
--color-surface-veil-35: color-mix(in srgb, var(--color-surface) 35%, transparent);
|
|
--color-surface-veil-92: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
|
--color-accent-veil-08: color-mix(in srgb, var(--color-accent) 8%, transparent);
|
|
--color-accent-veil-92: color-mix(in srgb, var(--color-accent) 92%, transparent);
|
|
--color-nav-ink: color-mix(in srgb, var(--color-surface) 97%, var(--color-border) 3%);
|
|
|
|
/* Admin data table — maps to semantic palette */
|
|
--admin-table-header-bg: color-mix(in srgb, var(--color-secondary) 42%, var(--color-text) 58%);
|
|
--admin-table-header-color: var(--color-on-primary);
|
|
--admin-table-border-color: var(--color-border);
|
|
--admin-table-row-border-color: color-mix(in srgb, var(--color-border) 52%, var(--color-surface) 48%);
|
|
--admin-table-shell-bg: var(--color-surface);
|
|
--admin-table-row-hover-bg: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface) 91%);
|
|
--admin-table-footer-bg: var(--color-background);
|
|
--admin-table-text-muted: color-mix(in srgb, var(--color-text) 58%, var(--color-border) 42%);
|
|
--admin-table-text-strong: var(--color-text);
|
|
--admin-table-footer-mid-text: color-mix(in srgb, var(--color-text) 74%, var(--color-border) 26%);
|
|
--admin-table-pagination-disabled: color-mix(in srgb, var(--color-border) 66%, var(--color-background) 34%);
|
|
|
|
/* Floating header — gradient + glass (semantic + derived only) */
|
|
--floating-header-bg-1: var(--color-primary);
|
|
--floating-header-bg-2: var(--color-secondary);
|
|
--floating-header-bg-3: var(--color-accent-strong);
|
|
--floating-header-bg-4: var(--color-accent-deep);
|
|
--floating-header-border: var(--color-surface-veil-14);
|
|
--floating-header-shadow-1: var(--color-primary-soft-glow);
|
|
--floating-header-shadow-2: var(--color-accent-soft-glow);
|
|
--floating-header-overlay-1: var(--color-surface-veil-10);
|
|
--floating-header-overlay-2: var(--color-accent-veil-08);
|
|
--floating-header-hover-bg: var(--color-accent-veil-92);
|
|
--floating-header-nav-text: var(--color-nav-ink);
|
|
--floating-header-brand-text: var(--color-on-primary);
|
|
--floating-header-brand-shadow: var(--color-surface-veil-25);
|
|
|
|
/* Floating navbar — dropdowns & chrome */
|
|
--floating-header-dropdown-hover-bg: var(--color-accent);
|
|
--floating-header-dropdown-hover-text: var(--color-on-accent);
|
|
--floating-header-dropdown-menu-shadow: var(--color-text-soft-shadow);
|
|
--floating-header-toggle-border: var(--color-surface-veil-35);
|
|
--floating-header-toggle-bg: var(--color-surface-veil-08);
|
|
--floating-header-icon-bar: var(--color-surface);
|
|
--floating-header-mobile-submenu-bg: var(--color-surface-veil-92);
|
|
--floating-header-mobile-submenu-shadow: var(--color-secondary-soft-glow);
|
|
}
|