/* * theme.css — Système dark/light pour Rock's Cool * * Ce fichier doit être chargé EN DERNIER parmi les CSS (après flatifytheme et custom). * Le script anti-FOUC dans pose data-theme="dark|light" sur * avant tout rendu, ce qui évite le flash de couleur incorrecte. * * Conventions d'ajout de variables : * - Ajouter toute nouvelle couleur dans :root ET dans [data-theme="light"] * - Toujours utiliser var(--color-*) dans les overrides, jamais de hex direct * - Les sections d'override sont nommées par layout/page pour s'y retrouver */ /* ========================================================================== 1. VARIABLES — DARK (défaut) ========================================================================== */ :root { /* Couleurs */ --color-bg: #0d141f; --color-surface: #24344d; --color-surface-alt: #2e3f5b; --color-surface-deep: #192231; --color-border: #1d2840; --color-text: rgba(225, 235, 245, 0.9); --color-text-muted: rgba(225, 235, 245, 0.55); --color-primary: #9f7ce1; --color-accent: #2ec5d3; --color-accent-dark: #1fa1ad; --color-danger: #ec5e69; --color-warning: #f1c205; --color-success: #99cf52; --color-recovery: #f0883e; color-scheme: dark; /* Border-radius — système uniforme */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* Ombres — 3 niveaux */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5); /* Transitions — durées standardisées */ --transition-fast: 0.1s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* Gradient signature — violet → cyan, utilisé pour tous les éléments de mise en évidence */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); --gradient-primary-glow: rgba(159, 124, 225, 0.35); } /* ========================================================================== 2. VARIABLES — LIGHT ========================================================================== */ [data-theme="light"] { --color-bg: #f0f4f8; --color-surface: #ffffff; --color-surface-alt: #f5f7fa; --color-surface-deep: #e9ecef; --color-border: #d0d7e2; --color-text: #1a2332; --color-text-muted: #6c757d; --color-primary: #7b5cb8; --color-accent: #1a9daa; --color-accent-dark: #157e89; --color-danger: #c9303d; --color-warning: #a07800; --color-success: #3e7214; --color-recovery: #c9640f; color-scheme: light; /* Ombres allégées en mode light */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); /* Glow atténué en light (les couleurs primary/accent sont plus sombres) */ --gradient-primary-glow: rgba(123, 92, 184, 0.22); } /* ========================================================================== 3. BOUTON TOGGLE DARK/LIGHT ========================================================================== */ #theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 9999; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: rgba(225, 235, 245, 0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 15px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } #theme-toggle:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); } [data-theme="light"] #theme-toggle { border-color: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.05); color: rgba(26, 35, 50, 0.75); } [data-theme="light"] #theme-toggle:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.25); } /* Visibilité des icônes selon le thème actif */ .theme-icon-moon { display: none; } .theme-icon-sun { display: inline; } [data-theme="light"] .theme-icon-moon { display: inline; } [data-theme="light"] .theme-icon-sun { display: none; } /* ========================================================================== 4. LOGIN PAGE (outsidebase.html.twig) — Modern centered layout Utilisé par : login, checkemail, changepassword ========================================================================== */ /* Body — fond dégradé, pas d'image */ .login-body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(150deg, #070e18 0%, #0d141f 45%, #131e30 100%); padding: 24px 16px; box-sizing: border-box; } [data-theme="light"] .login-body { background: linear-gradient(150deg, #d8e4f0 0%, #f0f4f8 50%, #e4eef7 100%); } /* Wrapper centré */ .login-wrapper { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; } /* Card */ .login-card { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 40px 36px 32px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } [data-theme="light"] .login-card { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } /* Logo centré */ .login-logo { text-align: center; margin-bottom: 32px; } .login-logo img { max-width: 150px; height: auto; } /* Titre */ .login-card h1 { color: var(--color-text) !important; font-size: 1.25rem !important; font-weight: 700 !important; text-align: center; margin: 0 0 24px !important; } /* Labels */ .login-card label { color: var(--color-text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; } /* Champs — login.html.twig (sans form-group) et Symfony form_row (avec form-group) */ .login-card .form-control { background: var(--color-surface-deep) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; border-radius: 8px !important; height: 44px; font-size: 15px; margin-bottom: 14px; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } [data-theme="light"] .login-card .form-control { background: var(--color-surface-alt) !important; } .login-card .form-control:focus { border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px rgba(46, 197, 211, 0.15) !important; outline: none; } [data-theme="light"] .login-card .form-control:focus { box-shadow: 0 0 0 3px rgba(26, 157, 170, 0.18) !important; } .login-card .form-group { margin-bottom: 4px; } /* Boutons CTA — btn-primary pour toutes les pages de ce layout (btn-success réservé aux états booléens ON) */ .login-card .btn-primary, .login-card .btn-success { display: block; width: 100%; height: 46px; font-size: 15px; margin-top: 10px; } /* Séparateur */ .login-card hr { border-color: var(--color-border); margin: 18px 0; } /* Liens */ .login-card a { color: var(--color-accent); font-size: 14px; } .login-card a:hover, .login-card a:focus { color: var(--color-primary); text-decoration: none; } /* Alerte erreur */ .login-card .alert-danger { background: rgba(236, 94, 105, 0.1); border: 1px solid rgba(236, 94, 105, 0.3); color: #f8aaaf; border-radius: 8px; margin-bottom: 18px; padding: 10px 14px; } [data-theme="light"] .login-card .alert-danger { background: #f8d7da; border-color: #f5c2c7; color: #842029; } /* Texte de pied (note développeur dans login.html.twig) */ .login-card .text-muted { color: var(--color-text-muted) !important; } /* Responsive — mobile */ @media (max-width: 480px) { .login-card { padding: 32px 20px 24px; border-radius: 12px; } } /* ========================================================================== 5. LAYOUT PRINCIPAL (base.html.twig) — Sidebar, navbar, page-inner ========================================================================== */ /* --- 5a. Toggle dans la navbar (remplace position:fixed hors login) --- */ /* Le toggle de base (section 3) est position:fixed — correct pour login. Dans l'app, le bouton vit dans la navbar, on annule le positionnement fixe. */ .page-header #theme-toggle { position: static; top: auto; right: auto; z-index: auto; width: 40px; height: 40px; border-radius: 8px; margin: 0 4px; font-size: 14px; } /* Conteneur
  • du toggle dans la navbar */ .theme-toggle-nav-item { display: flex !important; align-items: center; } /* Sur mobile la navbar-right se cache — on remet le bouton en fixed bottom-right */ @media (max-width: 767px) { .page-header #theme-toggle { position: fixed; bottom: 16px; right: 16px; top: auto; z-index: 500; width: 44px; height: 44px; border-radius: 50%; } } /* --- 5b. Bouton user navbar --- */ .navbar-user-name { font-size: 13px; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; } /* --- 5c. Page container & sidebar --- */ .page-content { background: var(--color-bg) !important; } [data-theme="light"] .page-container { background-color: var(--color-bg) !important; } [data-theme="light"] .page-sidebar { background: var(--color-surface) !important; border-right: 1px solid var(--color-border) !important; } /* Logo en light mode : SVG blanc → fond primary pour le garder visible */ [data-theme="light"] .logo-box { background: var(--color-primary) !important; border-bottom: 1px solid rgba(0,0,0,0.12) !important; } /* --- 5d. Navbar / page-header --- */ [data-theme="light"] .page-header { background: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; } [data-theme="light"] .navbar-default { background: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="light"] .navbar-default .navbar-nav > li > a { color: var(--color-text) !important; } [data-theme="light"] .navbar-default .navbar-nav > li > a:hover, [data-theme="light"] .navbar-default .navbar-nav > li > a:focus { color: var(--color-primary) !important; background: var(--color-surface-alt) !important; } /* --- 5e. Accordion menu (sidebar links) --- */ [data-theme="light"] .accordion-menu > li > a, [data-theme="light"] .accordion-menu li a { color: var(--color-text) !important; } [data-theme="light"] .accordion-menu > li > a:hover, [data-theme="light"] .accordion-menu li a:hover, [data-theme="light"] .accordion-menu li:hover > a { background: var(--color-surface-alt) !important; color: var(--color-primary) !important; } [data-theme="light"] .accordion-menu li:hover { background: transparent !important; } [data-theme="light"] .accordion-menu > li.active > a, [data-theme="light"] .accordion-menu > li.open > a { background: var(--color-primary) !important; color: #ffffff !important; } [data-theme="light"] .accordion-menu .sub-menu li a { color: var(--color-text-muted) !important; } [data-theme="light"] .accordion-menu .sub-menu li a:hover, [data-theme="light"] .accordion-menu .sub-menu li.active a { color: var(--color-primary) !important; background: var(--color-surface-alt) !important; } /* --- 5f. Page inner & footer --- */ [data-theme="light"] .page-inner { background: var(--color-bg) !important; } [data-theme="light"] .page-footer { background: var(--color-surface) !important; border-top: 1px solid var(--color-border) !important; color: var(--color-text-muted) !important; } /* --- 5g. Right sidebar --- */ [data-theme="light"] .page-right-sidebar { background: var(--color-surface) !important; border-left: 1px solid var(--color-border) !important; } /* --- 5h. Dropdowns --- */ [data-theme="light"] .dropdown-menu { background-color: var(--color-surface) !important; border: 1px solid var(--color-border) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .dropdown-menu > li > a { color: var(--color-text) !important; } [data-theme="light"] .dropdown-menu > li > a:hover, [data-theme="light"] .dropdown-menu > li > a:focus { background-color: var(--color-surface-alt) !important; color: var(--color-primary) !important; } [data-theme="light"] .dropdown-menu .divider { background-color: var(--color-border) !important; } /* --- 5i. Nav-tabs (Dashboard et autres pages avec onglets) --- */ /* Fond de la zone de tabs */ [data-theme="light"] .nav-tabs { border-bottom-color: var(--color-border) !important; } /* Onglet inactif */ [data-theme="light"] .nav-tabs > li > a { color: var(--color-text-muted) !important; border-color: transparent transparent var(--color-border) !important; background: transparent !important; } [data-theme="light"] .nav-tabs > li > a:hover { color: var(--color-primary) !important; border-color: transparent transparent var(--color-primary) !important; background: var(--color-surface-alt) !important; } /* Onglet actif — indicateur de ligne, fond transparent (fix WCAG 2.4:1 → pass) */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 3px solid var(--color-accent) !important; background: transparent !important; color: var(--color-accent) !important; font-weight: 700; } [data-theme="light"] .nav-tabs > li.active > a, [data-theme="light"] .nav-tabs > li.active > a:hover, [data-theme="light"] .nav-tabs > li.active > a:focus { color: var(--color-accent-dark) !important; border-bottom-color: var(--color-accent-dark) !important; } /* Tab content */ .tab-content { background: var(--color-surface); border: 1px solid var(--color-border); border-top: none; padding: 16px; } [data-theme="light"] .tab-content { background: var(--color-surface) !important; border-color: var(--color-border) !important; } /* Scroll horizontal sur mobile */ @media (max-width: 767px) { .nav-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } .nav-tabs > li { float: none; flex-shrink: 0; } .nav-tabs > li > a { min-height: 44px; display: flex; align-items: center; white-space: nowrap; } } /* --- 5j. Panels (Bootstrap 3 .panel) --- custom.min.css fixe background:#2e3f5b / color:#f4f6fb sur tous les variants — on écrase tout en light mode ici. */ [data-theme="light"] .panel, [data-theme="light"] .panel-default, [data-theme="light"] .panel-info, [data-theme="light"] .panel-primary, [data-theme="light"] .panel-success, [data-theme="light"] .panel-warning, [data-theme="light"] .panel-danger { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .panel-heading { background-color: var(--color-surface-alt) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .panel-body { background-color: var(--color-surface) !important; } [data-theme="light"] .panel-footer { background-color: var(--color-surface-alt) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* --- 5k. Modals --- */ [data-theme="light"] .modal-content { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .modal-header { background-color: var(--color-surface) !important; border-bottom-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .modal-body { background-color: var(--color-surface) !important; color: var(--color-text) !important; } [data-theme="light"] .modal-footer { background-color: var(--color-surface-alt) !important; border-top-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .modal-title { color: var(--color-text) !important; } [data-theme="light"] .close { color: var(--color-text) !important; opacity: 0.6; } [data-theme="light"] .close:hover { color: var(--color-text) !important; opacity: 1; } /* --- 5l. Wells --- */ [data-theme="light"] .well { background-color: var(--color-surface-alt) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* --- 5m. Form controls --- */ [data-theme="light"] .form-control { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .form-control:focus { border-color: var(--color-accent-dark) !important; box-shadow: 0 0 0 3px rgba(26, 157, 170, 0.18) !important; } [data-theme="light"] .form-control::placeholder { color: var(--color-text-muted) !important; } [data-theme="light"] .input-group-addon { background-color: var(--color-surface-alt) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; } /* --- 5n. Tables --- */ [data-theme="light"] .table { color: var(--color-text) !important; } [data-theme="light"] .table > thead > tr > th { border-bottom-color: var(--color-border) !important; color: var(--color-text-muted) !important; } [data-theme="light"] .table > tbody > tr > td, [data-theme="light"] .table > tbody > tr > th, [data-theme="light"] .table > tfoot > tr > td { border-top-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--color-surface-alt) !important; } [data-theme="light"] .table-hover > tbody > tr:hover { background-color: var(--color-surface-alt) !important; } /* Liens dans les tables — contraste WCAG corrigé (ratio > 4.5:1 sur fond blanc) */ [data-theme="light"] table td a, [data-theme="light"] table th a { color: #157585 !important; } [data-theme="light"] table td a:hover, [data-theme="light"] table th a:hover { color: var(--color-primary) !important; } /* --- 5o. Breadcrumb --- */ [data-theme="light"] .breadcrumb { background-color: var(--color-surface-alt) !important; color: var(--color-text-muted) !important; } [data-theme="light"] .breadcrumb > li + li::before { color: var(--color-text-muted) !important; } [data-theme="light"] .breadcrumb > .active { color: var(--color-text-muted) !important; } /* --- 5p. Overrides custom.css couleurs hardcodées (dark) en mode light --- */ /* Titres (custom.css les colore avec les hex du thème dark) */ [data-theme="light"] h1 { color: var(--color-primary) !important; } [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: var(--color-accent-dark) !important; } /* Légendes de fieldset */ [data-theme="light"] legend { color: var(--color-accent-dark) !important; border-color: var(--color-border) !important; } /* Alertes Bootstrap */ [data-theme="light"] .alert-info { background-color: #d1ecf1 !important; border-color: #bee5eb !important; color: #0c5460 !important; } [data-theme="light"] .alert-warning { background-color: #fff3cd !important; border-color: #ffc107 !important; color: #856404 !important; } [data-theme="light"] .alert-success { background-color: #d4edda !important; border-color: #c3e6cb !important; color: #155724 !important; } [data-theme="light"] .alert-danger { background-color: #f8d7da !important; border-color: #f5c6cb !important; color: #721c24 !important; } /* Labels / badges */ [data-theme="light"] .label-default { background-color: var(--color-surface-alt) !important; color: var(--color-text) !important; } /* Select2 */ [data-theme="light"] .select2-container--default .select2-selection--single, [data-theme="light"] .select2-container--default .select2-selection--multiple { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .select2-dropdown { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="light"] .select2-results__option { color: var(--color-text) !important; } [data-theme="light"] .select2-results__option--highlighted { background-color: var(--color-surface-alt) !important; color: var(--color-primary) !important; } [data-theme="light"] .select2-container--default .select2-selection__rendered { color: var(--color-text) !important; } [data-theme="light"] .select2-search--dropdown .select2-search__field { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } /* SweetAlert2 — dark mode (popup par défaut blanc de SweetAlert2, on le force sombre) */ .swal2-popup { background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; } .swal2-title { color: var(--color-text) !important; } .swal2-html-container, .swal2-content { color: var(--color-text-muted) !important; } .swal2-input, .swal2-select, .swal2-textarea { background: var(--color-bg) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .swal2-select option { background-color: var(--color-bg); color: var(--color-text); } .swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(159, 124, 225, 0.2) !important; } .swal2-confirm { background: var(--gradient-primary) !important; border-color: transparent !important; color: #ffffff !important; } .swal2-cancel { background: var(--color-surface-alt) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; } .swal2-deny { background: var(--color-danger) !important; color: #ffffff !important; } .swal2-icon.swal2-warning { border-color: var(--color-warning) !important; color: var(--color-warning) !important; } .swal2-icon.swal2-error { border-color: var(--color-danger) !important; color: var(--color-danger) !important; } .swal2-icon.swal2-success { border-color: var(--color-success) !important; color: var(--color-success) !important; } .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--color-success) !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(153, 207, 82, 0.3) !important; } /* SweetAlert2 — light mode */ [data-theme="light"] .swal2-popup { background: #ffffff !important; color: var(--color-text) !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="light"] .swal2-title { color: var(--color-text) !important; } [data-theme="light"] .swal2-html-container, [data-theme="light"] .swal2-content { color: var(--color-text-muted) !important; } [data-theme="light"] .swal2-input, [data-theme="light"] .swal2-select, [data-theme="light"] .swal2-textarea { background: #f5f7fa !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; } [data-theme="light"] .swal2-select option { background-color: #f5f7fa; color: var(--color-text); } [data-theme="light"] .swal2-cancel { background: var(--color-surface-deep) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; } /* DataTables — voir components.css Section 16 pour les règles complètes */ /* Créneau non assigné — custom.css utilise rgba(255,255,255,0.4) invisible sur fond clair */ [data-theme="light"] .empty-time-slot { border-color: rgba(0, 0, 0, 0.25) !important; color: rgba(0, 0, 0, 0.45) !important; } [data-theme="light"] .empty-time-slot:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* Place libre dans horaire (time_slot) — custom.css utilise #2e3f5b invisible sur fond clair */ [data-theme="light"] .empty_place { border-color: rgba(0, 0, 0, 0.18) !important; color: rgba(0, 0, 0, 0.35) !important; } [data-theme="light"] .empty_place:hover { background: rgba(0, 0, 0, 0.05) !important; border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* Élève hors ensemble — components.css (0,5,2)+!important, on monte à (0,6,2) via .panel-body */ [data-theme="light"] .panel-body .table td .occupied_place_ctnr a.occupied_place.occupied_place_no_ensemble { color: orange !important; } /* Même bug dans la modale "Horaire de l'année passée" (readOnly) : pas de .panel-body ancestor ici */ [data-theme="light"] #previous-year-schedule-modal .table td .occupied_place_ctnr a.occupied_place.occupied_place_no_ensemble { color: orange !important; } #annonce_text_dashboard a, #annonce_text_dashboard a:hover, #annonce_text_dashboard a:focus, #annonce_text_dashboard a .fas, #annonce_text_dashboard a strong { color: #fff !important; } /* Remarque en liste d'attente — fond dark hardcodé dans custom.css */ [data-theme="light"] .remarkinwaitinglist { background: var(--color-surface-alt) !important; border-color: var(--color-primary) !important; color: var(--color-text) !important; } /* Bootstrap datepicker */ #createWorkDayModal #newWorkDayDate, .time-input-add-to-workday { width: 220px !important; max-width: 100% !important; height: 48px !important; box-sizing: border-box; background: var(--color-surface-alt) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; color: var(--color-text) !important; box-shadow: var(--shadow-sm); font-size: 18px !important; font-weight: 600; line-height: 1.2; padding: 0 16px !important; text-align: center; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } #createWorkDayModal #newWorkDayDate::placeholder, .time-input-add-to-workday::placeholder { color: var(--color-text-muted); opacity: 0.8; } #createWorkDayModal #newWorkDayDate:focus, .time-input-add-to-workday:focus { background: var(--color-surface) !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 24%, transparent); outline: none; } #createWorkDayModal #newWorkDayDate[disabled], .time-input-add-to-workday[disabled] { opacity: 0.65; cursor: not-allowed; } .datepicker-dropdown { background-color: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg); padding: 8px !important; } .datepicker table tr td, .datepicker table tr th { border-radius: var(--radius-sm) !important; color: var(--color-text) !important; } .datepicker table tr td.day:hover, .datepicker table tr th:hover { background: var(--color-surface-alt) !important; } .datepicker table tr td.old, .datepicker table tr td.new, .datepicker table tr td.disabled { color: var(--color-text-muted) !important; } .datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.today, .datepicker table tr td.today:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #ffffff !important; text-shadow: none !important; } [data-theme="light"] .datepicker-dropdown { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="light"] .datepicker table tr td, [data-theme="light"] .datepicker table tr th { color: var(--color-text) !important; } [data-theme="light"] .datepicker table tr td.day:hover, [data-theme="light"] .datepicker table tr th:hover { background: var(--color-surface-alt) !important; } [data-theme="light"] .datepicker table tr td.active, [data-theme="light"] .datepicker table tr td.active:hover { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #ffffff !important; } /* --- 5q. Modal Todo — fix layout mobile --- */ @media (max-width: 767px) { .modal-dialog .col-md-8, .modal-dialog .col-md-4 { width: 100% !important; float: none !important; } } /* ========================================================================== 6. DASHBOARD — Visual Polish Corrections issues du rapport UI/UX + frontend-design ========================================================================== */ /* --- 6a. Sidebar — polish complet (dark ET light) --- */ /* * La sidebar doit respirer. Items avec border-radius, transitions, * et un indicateur latéral d'item actif (référence : touche de piano, * trait vertical qui marque le rythme de navigation). */ .page-sidebar { background: var(--color-surface-deep) !important; border-right: 1px solid var(--color-border) !important; } /* Logo box */ .logo-box { border-bottom: 1px solid var(--color-border) !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 56px !important; } .logo-box img { max-height: 32px; width: auto; } /* Logo étendu vs icône seule (mode collapsed) */ .logo-box-icon { display: none; } .page-sidebar-collapsed .logo-box-full { display: none; } .page-sidebar-collapsed .logo-box-icon { display: inline-block; } /* Zone scrollable des menus */ .page-sidebar-menu { padding: 8px 0 !important; } /* Tous les liens du menu accordion */ .accordion-menu li a { display: flex !important; align-items: center !important; color: var(--color-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; padding: 9px 14px !important; margin: 1px 8px !important; border-radius: var(--radius-md) !important; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base) !important; border-left: 2px solid transparent !important; text-decoration: none !important; } /* Hover — li:hover couvre la zone de marge entre li et a */ .accordion-menu li:hover { background: transparent !important; } .accordion-menu li a:hover, .accordion-menu li:hover > a { background: rgba(159, 124, 225, 0.18) !important; color: var(--color-primary) !important; border-left-color: rgba(159, 124, 225, 0.4) !important; } /* Item actif (niveau 1) — indicateur gauche plein, fond subtil */ .accordion-menu > li.active-page > a, .accordion-menu > li.open > a { background: rgba(159, 124, 225, 0.15) !important; color: var(--color-primary) !important; border-left-color: var(--color-primary) !important; font-weight: 600 !important; } /* Sous-menu */ .accordion-menu .sub-menu { padding: 0 0 4px 0 !important; background: transparent !important; /* transparent en mode expanded (normal) */ } /* En mode compact, le sous-menu est position:absolute — il faut un fond solide */ .page-sidebar-collapsed .accordion-menu .sub-menu { background: var(--color-surface-deep) !important; border: 1px solid var(--color-border) !important; border-left: none !important; border-top: none !important; border-radius: 0 0 var(--radius-md) var(--radius-md) !important; box-shadow: var(--shadow-md) !important; width: 150px !important; } /* Lien actif (hover sur le li parent) en mode compact */ .page-sidebar-collapsed .page-sidebar-menu > ul > li:hover > a { background: var(--color-surface-deep) !important; color: var(--color-text) !important; } /* Light mode — fond blanc + ombre visible */ [data-theme="light"] .page-sidebar-collapsed .accordion-menu .sub-menu { background: var(--color-surface) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="light"] .page-sidebar-collapsed .page-sidebar-menu > ul > li:hover > a { background: var(--color-surface) !important; color: var(--color-primary) !important; box-shadow: var(--shadow-md) !important; } /* Atténue l'effet "2 blocs" entre le libellé du parent et son sous-menu, sans déplacer ni redimensionner le lien (source d'instabilité au survol) : coins arrondis seulement en haut pour le libellé (le sous-menu juste en dessous a, lui, des coins arrondis seulement en bas — cf. règle .sub-menu ci-dessus). */ .page-sidebar-collapsed .accordion-menu li:has(> .sub-menu):hover > a { border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md) !important; box-shadow: none !important; } .accordion-menu .sub-menu li a { padding: 7px 14px 7px 38px !important; font-size: 12px !important; color: var(--color-text-muted) !important; } /* En mode réduit, le sous-menu est un petit panneau flottant (150px) : le padding-left:38px (pensé pour l'indentation sous une icône en mode étendu) écrase le texte contre le bord droit, avec un grand vide à gauche. */ .page-sidebar-collapsed .accordion-menu .sub-menu li a { padding-left: 14px !important; } /* flatifytheme.css ajoute padding-left:25px à tout span non-.label dans un lien de menu réduit (pensé pour le libellé du flyout) — ça élargit inutilement les badges de notification (badge-danger, etc.), on leur restaure leur padding normal. Le mécanisme de reveal au survol (flatifytheme.css) force aussi display:inline sur tout span révélé, ce qui casse le display:inline-flex du badge et décentre son texte (aligné en haut, plus de centrage vertical) — on le restaure ici. */ .page-sidebar-collapsed .page-sidebar-menu ul li a span.badge, .page-sidebar-collapsed .page-sidebar-menu ul li:hover a span.badge, .page-sidebar-collapsed .page-sidebar-menu ul li a:hover span.badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-left: 6px !important; align-self: center !important; line-height: 1 !important; } .accordion-menu .sub-menu li.active-page > a { color: var(--color-accent) !important; border-left-color: var(--color-accent) !important; font-weight: 600 !important; } /* Icônes de menu */ .accordion-menu li a .menu-icon, .accordion-menu li a i:first-child { width: 18px !important; margin-right: 10px !important; text-align: center !important; font-size: 14px !important; color: inherit !important; transition: color var(--transition-base) !important; flex-shrink: 0; } /* Flèche sous-menu */ .accordion-menu li a .accordion-icon { margin-left: auto !important; font-size: 10px !important; transition: transform var(--transition-base) !important; } .accordion-menu li.open > a .accordion-icon { transform: rotate(90deg) !important; } /* Séparateurs */ .accordion-menu .menu-divider, .accordion-menu hr { border: none !important; border-top: 1px solid var(--color-border) !important; margin: 6px 16px !important; opacity: 0.6; } /* Light mode sidebar */ [data-theme="light"] .page-sidebar { background: var(--color-surface) !important; } [data-theme="light"] .accordion-menu li a { color: var(--color-text-muted) !important; } /* Chevron accordion — forcé explicitement car flatifytheme le rend blanc (invisible sur fond clair) */ [data-theme="light"] .accordion-menu li a .accordion-icon { color: var(--color-text-muted) !important; } [data-theme="light"] .accordion-menu li a:hover { background: rgba(123, 92, 184, 0.08) !important; color: var(--color-primary) !important; } [data-theme="light"] .accordion-menu li a:hover .accordion-icon { color: var(--color-primary) !important; } [data-theme="light"] .accordion-menu > li.active-page > a, [data-theme="light"] .accordion-menu > li.open > a { background: rgba(123, 92, 184, 0.12) !important; color: var(--color-primary) !important; border-left-color: var(--color-primary) !important; } [data-theme="light"] .accordion-menu > li.active-page > a .accordion-icon, [data-theme="light"] .accordion-menu > li.open > a .accordion-icon { color: var(--color-primary) !important; } [data-theme="light"] .accordion-menu .sub-menu li.active-page > a { color: var(--color-accent-dark) !important; border-left-color: var(--color-accent-dark) !important; } /* --- 6b. Navbar — équilibre toggle/user (mêmes dimensions) --- */ /* Les deux boutons : 38×38px, même border-radius, même poids visuel */ .page-header #theme-toggle { position: static !important; top: auto !important; right: auto !important; z-index: auto !important; width: 38px !important; height: 38px !important; border-radius: var(--radius-md) !important; margin: 0 4px !important; font-size: 14px !important; flex-shrink: 0; } /* Icône user — taille proportionnée */ .navbar-user-btn .fa-user { font-size: 14px !important; flex-shrink: 0; } /* La