/* * Thème Sombre pour l'Administration CSH * * Appliqué quand la classe "admin-dark" est présente sur */ /* ========================================================================== Variables du thème sombre ========================================================================== */ .admin-dark { --admin-bg-primary: #1a1a2e; --admin-bg-secondary: #16213e; --admin-bg-tertiary: #0f0f1a; --admin-bg-card: #1f1f3a; --admin-text-primary: #ffffff; --admin-text-secondary: #a0a0b0; --admin-text-muted: #6b6b7b; --admin-border: #2d2d4a; --admin-border-light: #3d3d5a; --admin-accent: #3b82f6; --admin-accent-hover: #2563eb; --admin-success: #22c55e; --admin-success-bg: rgba(34, 197, 94, 0.1); --admin-danger: #ef4444; --admin-danger-bg: rgba(239, 68, 68, 0.1); --admin-warning: #f59e0b; --admin-warning-bg: rgba(245, 158, 11, 0.1); } /* ========================================================================== Body et conteneurs principaux ========================================================================== */ .admin-dark body { background-color: var(--admin-bg-primary) !important; color: var(--admin-text-primary) !important; } /* ========================================================================== Header ========================================================================== */ .admin-dark header { background-color: var(--admin-bg-secondary) !important; border-bottom-color: var(--admin-border) !important; } .admin-dark header h1 { color: var(--admin-accent) !important; } .admin-dark header span { color: var(--admin-text-secondary) !important; } /* ========================================================================== Sidebar ========================================================================== */ .admin-dark aside { background-color: var(--admin-bg-secondary) !important; border-right-color: var(--admin-border) !important; } .admin-dark aside a, .admin-dark aside button { color: var(--admin-text-secondary) !important; } .admin-dark aside a:hover, .admin-dark aside button:hover { background-color: var(--admin-bg-card) !important; color: var(--admin-text-primary) !important; } /* Lien actif dans sidebar */ .admin-dark aside a.bg-blue-600 { background-color: var(--admin-accent) !important; color: var(--admin-text-primary) !important; } /* Badge compteur messages */ .admin-dark aside .bg-blue-600.text-white { background-color: var(--admin-accent) !important; } .admin-dark aside .bg-white.text-blue-600 { background-color: var(--admin-text-primary) !important; color: var(--admin-accent) !important; } /* Séparateur sidebar */ .admin-dark aside .border-gray-200 { border-color: var(--admin-border) !important; } /* Bouton déconnexion */ .admin-dark aside .text-red-600 { color: var(--admin-danger) !important; } .admin-dark aside .hover\:bg-red-50:hover { background-color: var(--admin-danger-bg) !important; } /* ========================================================================== Cartes et conteneurs ========================================================================== */ .admin-dark .bg-white { background-color: var(--admin-bg-card) !important; } /* Aperçu du bandeau du site : reste blanc pour refléter le rendu réel */ .admin-dark .admin-banner-preview { background-color: #ffffff !important; } .admin-dark .bg-gray-50 { background-color: var(--admin-bg-primary) !important; } .admin-dark .bg-gray-100 { background-color: var(--admin-bg-secondary) !important; } /* ========================================================================== Bordures ========================================================================== */ .admin-dark .border-gray-100, .admin-dark .border-gray-200, .admin-dark .border-gray-300 { border-color: var(--admin-border) !important; } .admin-dark .divide-gray-200 > * + * { border-color: var(--admin-border) !important; } /* ========================================================================== Textes ========================================================================== */ .admin-dark .text-gray-900, .admin-dark .text-gray-800 { color: var(--admin-text-primary) !important; } .admin-dark .text-gray-700, .admin-dark .text-gray-600 { color: var(--admin-text-secondary) !important; } .admin-dark .text-gray-500, .admin-dark .text-gray-400 { color: var(--admin-text-muted) !important; } /* ========================================================================== Liens ========================================================================== */ .admin-dark .text-blue-600 { color: var(--admin-accent) !important; } .admin-dark .hover\:text-blue-800:hover { color: var(--admin-accent-hover) !important; } /* ========================================================================== Formulaires ========================================================================== */ .admin-dark input, .admin-dark textarea, .admin-dark select { background-color: var(--admin-bg-tertiary) !important; color: var(--admin-text-primary) !important; border-color: var(--admin-border) !important; } .admin-dark input:focus, .admin-dark textarea:focus, .admin-dark select:focus { border-color: var(--admin-accent) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; } .admin-dark input::placeholder, .admin-dark textarea::placeholder { color: var(--admin-text-muted) !important; } .admin-dark label { color: var(--admin-text-secondary) !important; } /* ========================================================================== Boutons ========================================================================== */ .admin-dark .bg-blue-600 { background-color: var(--admin-accent) !important; } .admin-dark .hover\:bg-blue-700:hover { background-color: var(--admin-accent-hover) !important; } .admin-dark .bg-red-600 { background-color: var(--admin-danger) !important; } .admin-dark .bg-green-600 { background-color: var(--admin-success) !important; } /* ========================================================================== Tableaux ========================================================================== */ .admin-dark table { background-color: var(--admin-bg-card) !important; } .admin-dark th { background-color: var(--admin-bg-secondary) !important; color: var(--admin-text-secondary) !important; } .admin-dark td { color: var(--admin-text-primary) !important; border-color: var(--admin-border) !important; } .admin-dark tbody tr:hover { background-color: var(--admin-bg-secondary) !important; } /* ========================================================================== Alertes et messages flash ========================================================================== */ /* Succès */ .admin-dark .bg-green-50 { background-color: var(--admin-success-bg) !important; border-color: var(--admin-success) !important; } .admin-dark .text-green-800, .admin-dark .text-green-600 { color: var(--admin-success) !important; } /* Erreur */ .admin-dark .bg-red-50 { background-color: var(--admin-danger-bg) !important; border-color: var(--admin-danger) !important; } .admin-dark .text-red-800, .admin-dark .text-red-600 { color: var(--admin-danger) !important; } /* Warning */ .admin-dark .bg-yellow-50, .admin-dark .bg-amber-50 { background-color: var(--admin-warning-bg) !important; border-color: var(--admin-warning) !important; } .admin-dark .text-yellow-800, .admin-dark .text-amber-800 { color: var(--admin-warning) !important; } /* ========================================================================== Badges et indicateurs ========================================================================== */ .admin-dark .bg-green-100 { background-color: var(--admin-success-bg) !important; } .admin-dark .text-green-700 { color: var(--admin-success) !important; } .admin-dark .bg-red-100 { background-color: var(--admin-danger-bg) !important; } .admin-dark .text-red-700 { color: var(--admin-danger) !important; } .admin-dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } .admin-dark .text-blue-700 { color: var(--admin-accent) !important; } /* ========================================================================== Cartes colorées du dashboard (statistiques) ========================================================================== */ /* Bleu - Visites aujourd'hui */ .admin-dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; } .admin-dark .text-blue-900 { color: #93c5fd !important; } /* Vert - Visites cette semaine */ .admin-dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; } .admin-dark .text-green-900 { color: #86efac !important; } /* Violet/Purple - Visites ce mois */ .admin-dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; border: 1px solid rgba(168, 85, 247, 0.3) !important; } .admin-dark .text-purple-600 { color: #c084fc !important; } .admin-dark .text-purple-900 { color: #e9d5ff !important; } .admin-dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; } /* Teal - Messages ce mois */ .admin-dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.15) !important; border: 1px solid rgba(20, 184, 166, 0.3) !important; } .admin-dark .text-teal-600 { color: #5eead4 !important; } .admin-dark .text-teal-900 { color: #99f6e4 !important; } .admin-dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.2) !important; } /* Amber - Messages cette semaine */ .admin-dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; } .admin-dark .text-amber-600 { color: #fcd34d !important; } .admin-dark .text-amber-900 { color: #fef3c7 !important; } .admin-dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; } /* Rouge - Messages non lus */ .admin-dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } .admin-dark .text-red-900 { color: #fecaca !important; } /* Gris - Total messages */ .admin-dark .bg-gray-200 { background-color: rgba(156, 163, 175, 0.3) !important; } /* ========================================================================== Pagination ========================================================================== */ .admin-dark .pagy-nav a, .admin-dark .pagy a { color: var(--admin-text-secondary) !important; background-color: var(--admin-bg-card) !important; border-color: var(--admin-border) !important; } .admin-dark .pagy-nav a:hover, .admin-dark .pagy a:hover { background-color: var(--admin-bg-secondary) !important; color: var(--admin-text-primary) !important; } .admin-dark .pagy-nav .current, .admin-dark .pagy .current { background-color: var(--admin-accent) !important; color: var(--admin-text-primary) !important; } /* ========================================================================== Graphiques (Chart.js) ========================================================================== */ .admin-dark canvas { filter: brightness(0.95); } /* ========================================================================== Menu mobile ========================================================================== */ .admin-dark #mobile-menu { background-color: var(--admin-bg-secondary) !important; border-color: var(--admin-border) !important; } .admin-dark #mobile-menu a { color: var(--admin-text-secondary) !important; } .admin-dark #mobile-menu a:hover { background-color: var(--admin-bg-card) !important; } /* ========================================================================== Bouton toggle thème ========================================================================== */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; } /* Mode clair */ .theme-toggle-btn { color: #4b5563; background-color: #f3f4f6; border: 1px solid #e5e7eb; } .theme-toggle-btn:hover { background-color: #e5e7eb; } /* Mode sombre - bouton plus visible */ .admin-dark .theme-toggle-btn { color: #ffffff !important; background-color: #3b82f6; border-color: #3b82f6; } .admin-dark .theme-toggle-btn:hover { background-color: #2563eb; border-color: #2563eb; } .admin-dark .theme-toggle-btn span, .admin-dark .theme-toggle-btn svg { color: #ffffff !important; } .theme-toggle-btn svg { width: 1.25rem; height: 1.25rem; } /* ========================================================================== Hover states généraux ========================================================================== */ .admin-dark .hover\:bg-gray-50:hover { background-color: var(--admin-bg-secondary) !important; } .admin-dark .hover\:bg-gray-100:hover { background-color: var(--admin-bg-card) !important; } /* ========================================================================== Ombres ========================================================================== */ .admin-dark .shadow, .admin-dark .shadow-sm, .admin-dark .shadow-md, .admin-dark .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important; } /* ========================================================================== Scrollbar ========================================================================== */ .admin-dark ::-webkit-scrollbar { width: 8px; height: 8px; } .admin-dark ::-webkit-scrollbar-track { background: var(--admin-bg-tertiary); } .admin-dark ::-webkit-scrollbar-thumb { background: var(--admin-border); border-radius: 4px; } .admin-dark ::-webkit-scrollbar-thumb:hover { background: var(--admin-border-light); }