/** * theme_global.css * * ⚠️ IMPORTANT : Ce fichier doit être chargé sur TOUTES les pages du site * Ajouter dans le de chaque page (AVANT les autres CSS) : * * * Définit les variables CSS pour les thèmes jour et nuit */ /* ========================================== */ /* VARIABLES CSS GLOBALES */ /* ========================================== */ /* MODE NUIT (par défaut) */ :root, :root[data-theme="dark"] { /* Couleurs de fond */ --bg-primary: #0B1416; --bg-secondary: #1A1A1B; --bg-tertiary: #272729; --bg-hover: #343536; /* Couleurs de texte */ --text-primary: #D7DADC; --text-secondary: #818384; --text-tertiary: #565758; /* Couleurs d'accent */ --accent-primary: #FF4500; --accent-secondary: #FF5722; --accent-hover: #E63E00; /* Couleurs de bordure */ --border-primary: #343536; --border-secondary: #474748; /* Couleurs des boutons */ --btn-primary-bg: #FF4500; --btn-primary-text: #FFFFFF; --btn-secondary-bg: #272729; --btn-secondary-text: #D7DADC; /* Ombres */ --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.6); /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.8); /* Success/Error/Warning */ --success-color: #46D160; --error-color: #FF4458; --warning-color: #FFB000; --info-color: #0079D3; /* Inputs */ --input-bg: #272729; --input-border: #343536; --input-text: #D7DADC; --input-placeholder: #818384; --input-focus-border: #FF4500; /* Cards */ --card-bg: #1A1A1B; --card-hover-bg: #272729; /* Navbar */ --navbar-bg: #1A1A1B; --navbar-border: #343536; /* Scrollbar */ --scrollbar-track: #1A1A1B; --scrollbar-thumb: #343536; --scrollbar-thumb-hover: #474748; } /* MODE JOUR */ :root[data-theme="light"] { /* Couleurs de fond */ --bg-primary: #F8F9FA; --bg-secondary: #FFFFFF; --bg-tertiary: #F3F4F6; --bg-hover: #E5E7EB; /* Couleurs de texte */ --text-primary: #1C1C1E; --text-secondary: #48484A; --text-tertiary: #8E8E93; /* Couleurs d'accent */ --accent-primary: #007AFF; --accent-secondary: #0066CC; --accent-hover: #0051CC; /* Couleurs de bordure */ --border-primary: #D1D5DB; --border-secondary: #E5E7EB; /* Couleurs des boutons */ --btn-primary-bg: #007AFF; --btn-primary-text: #FFFFFF; --btn-secondary-bg: #F3F4F6; --btn-secondary-text: #1C1C1E; /* Ombres */ --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.16); /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.5); /* Success/Error/Warning */ --success-color: #34C759; --error-color: #FF3B30; --warning-color: #FF9500; --info-color: #007AFF; /* Inputs */ --input-bg: #FFFFFF; --input-border: #D1D5DB; --input-text: #1C1C1E; --input-placeholder: #8E8E93; --input-focus-border: #007AFF; /* Cards */ --card-bg: #FFFFFF; --card-hover-bg: #F8F9FA; /* Navbar */ --navbar-bg: #FFFFFF; --navbar-border: #E5E7EB; /* Scrollbar */ --scrollbar-track: #F3F4F6; --scrollbar-thumb: #D1D5DB; --scrollbar-thumb-hover: #9CA3AF; } /* ========================================== */ /* STYLES GLOBAUX AVEC TRANSITION */ /* ========================================== */ * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } body { background-color: var(--bg-primary); color: var(--text-primary); } /* ========================================== */ /* SCROLLBAR PERSONNALISÉE */ /* ========================================== */ /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* Chrome, Edge, Safari */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; border: 2px solid var(--scrollbar-track); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ========================================== */ /* CLASSES UTILITAIRES POUR LES THÈMES */ /* ========================================== */ .theme-bg-primary { background-color: var(--bg-primary); } .theme-bg-secondary { background-color: var(--bg-secondary); } .theme-text-primary { color: var(--text-primary); } .theme-text-secondary { color: var(--text-secondary); } .theme-border { border-color: var(--border-primary); } .theme-shadow { box-shadow: var(--shadow-medium); } .theme-btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-text); border: none; } .theme-btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--border-primary); } /* ========================================== */ /* ANIMATIONS */ /* ========================================== */ @keyframes themeTransition { 0% { opacity: 0.95; } 50% { opacity: 1; } 100% { opacity: 1; } } [data-theme] { animation: themeTransition 0.3s ease; } /* ========================================== */ /* ANTI-FLASH (éviter le flash blanc) */ /* ========================================== */ html { background-color: #0B1416; } html[data-theme="light"] { background-color: #F8F9FA; }