/* ════════════════════════════════════════════════════════════════════════ iManage — theme-toggle (v1.2.0) Définit les variables CSS pour le mode sombre. Le mode clair est le défaut (variables de imanage.css). v1.1.0 — Tokens iManage globaux + list-view + alertes + composants. v1.2.0 — theme-toggle.js pose maintenant data-theme sur ET → [data-theme="dark"] body est désormais valide. Ajout override --canvas + tokens --surface-* / --ink-* pour lemai. Correction bg html, body, page_header. Application : + (v1.2.0+) ════════════════════════════════════════════════════════════════════════ */ /* ─── Mode sombre : override des tokens iManage ──────────────────────── */ [data-theme="dark"] { /* ── Backgrounds & surfaces ── */ --bg-primary: #0d0e17; --bg-surface: #161824; --bg-content: #11121b; --bg-navbar: rgba(13, 14, 23, 0.92); --bg-notification: rgba(8, 9, 15, 0.96); /* ── Textes ── */ --text-primary: #e8eaff; --text-secondary: rgba(232,234,255,0.62); --text-on-dark: #e8eaff; /* ── Bordures ── */ --border: rgba(255,255,255,0.09); /* ── Tokens lemai (surface-* + ink-*) ── */ --surface-0: #161824; --surface-1: #0d0e17; --surface-2: rgba(255,255,255,0.04); --ink-900: #e8eaff; --ink-700: rgba(232,234,255,0.85); --ink-500: rgba(232,234,255,0.55); --ink-300: rgba(232,234,255,0.30); --ink-100: rgba(255,255,255,0.09); /* ── Aliases iManage partagés (ne recalculent pas automatiquement) ── */ --paper: #161824; --ink: #e8eaff; --muted: rgba(232,234,255,0.55); --line: rgba(255,255,255,0.09); --line-soft: rgba(255,255,255,0.04); --canvas: #0d0e17; /* ── Tokens list-view (:root level override) ── */ --lv-ink: #e8eaff; --lv-mute: rgba(232,234,255,0.55); --lv-line: rgba(255,255,255,0.09); --lv-surf: #161824; --lv-soft: #11121b; --lv-softer: rgba(255,255,255,0.04); /* ── Overlay 2-tons du body (cf. body::after dans imanage.css) ── En light mode l'overlay est noir 3% → assombrit la moitié droite. En dark mode on inverse : blanc 2.5% → ÉCLAIRCIT la moitié droite, sinon l'effet disparaît visuellement (assombrir un fond déjà sombre n'a aucun rendu perceptible). */ --body-tone-overlay: rgba(255, 255, 255, 0.025); } /* ─── Body : transition fluide ───────────────────────────────────────── */ body { transition: background-color .25s ease, color .25s ease; } /* ─── Mode sombre : fond html + body (double sélecteur pour fiabilité) ── */ [data-theme="dark"] body, body[data-theme="dark"] { background: var(--bg-primary); color: var(--text-primary); } /* page_header gradient */ [data-theme="dark"] #page_header, body[data-theme="dark"] #page_header { background: linear-gradient(to bottom, var(--bg-surface), var(--bg-content)); } /* ─── Composants Bootstrap — overrides mode sombre ───────────────────── */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: rgba(255,255,255,0.04); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: rgba(255,255,255,0.06); color: var(--text-primary); } [data-theme="dark"] .form-control::placeholder { color: rgba(232,234,255,0.38); } [data-theme="dark"] label { color: var(--text-primary); } [data-theme="dark"] .input-group-text { background: rgba(255,255,255,0.05); border-color: var(--border); color: rgba(232,234,255,0.5); } [data-theme="dark"] .table { --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--border); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,0.04); color: var(--text-primary); } /* Stripes — Bootstrap utilise --bs-table-striped-bg (gris très clair en light). En dark, on tinte les lignes paires d'un blanc à 3% pour conserver le zébré subtil sans casser le contraste général. */ [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.025); color: var(--text-primary); } [data-theme="dark"] .table-striped > tbody > tr:hover > * { background-color: rgba(255,255,255,0.06); } /* Caption + thead/tfoot light variant utilisé dans les rapports détail */ [data-theme="dark"] .table > thead { color: var(--text-secondary); } [data-theme="dark"] .table > tfoot { color: var(--text-secondary); } /* Variante .table-light (utilisée dans certains thead) */ [data-theme="dark"] .table-light, [data-theme="dark"] .table-light > th, [data-theme="dark"] .table-light > td { background: var(--bg-content); color: var(--text-primary); border-color: var(--border); } /* ─── DataTables (plugin jQuery) — couverture dark mode ────────────── Le plugin est chargé via js/plugins/datatables.min.js + css/datatables.min.css. Il ajoute ses propres classes (.dataTable, .dt-*) qui ignorent --bs-* tokens. */ [data-theme="dark"] table.dataTable, [data-theme="dark"] .dataTables_wrapper { color: var(--text-primary); } [data-theme="dark"] table.dataTable thead th, [data-theme="dark"] table.dataTable thead td, [data-theme="dark"] table.dataTable tfoot th, [data-theme="dark"] table.dataTable tfoot td { color: var(--text-primary); border-color: var(--border); background: transparent; } [data-theme="dark"] table.dataTable tbody tr { background: transparent; color: var(--text-primary); } [data-theme="dark"] table.dataTable tbody tr:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] table.dataTable.stripe tbody tr.odd, [data-theme="dark"] table.dataTable.display tbody tr.odd { background: rgba(255,255,255,0.025); } [data-theme="dark"] table.dataTable tbody td, [data-theme="dark"] table.dataTable tbody th { border-color: var(--border); } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-theme="dark"] .dt-search input, [data-theme="dark"] .dt-length select { background: rgba(255,255,255,0.04); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate, [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter, [data-theme="dark"] .dt-info, [data-theme="dark"] .dt-paging, [data-theme="dark"] .dt-length, [data-theme="dark"] .dt-search { color: var(--text-secondary); } [data-theme="dark"] .dataTables_wrapper .paginate_button, [data-theme="dark"] .dt-paging-button { color: var(--text-secondary) !important; background: transparent !important; border-color: var(--border) !important; } [data-theme="dark"] .dataTables_wrapper .paginate_button.current, [data-theme="dark"] .dt-paging-button.current { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] .dataTables_wrapper .paginate_button:hover, [data-theme="dark"] .dt-paging-button:hover { background: rgba(255,255,255,0.06) !important; color: var(--text-primary) !important; } [data-theme="dark"] .dropdown-menu { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: rgba(255,255,255,0.06); color: var(--text-primary); } [data-theme="dark"] .dropdown-divider { border-color: var(--border); } [data-theme="dark"] .btn-light { background: rgba(255,255,255,0.07); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .btn-light:hover { background: rgba(255,255,255,0.12); } [data-theme="dark"] .btn-close { filter: invert(1); } /* ─── Alertes génériques + variantes colorées ────────────────────────── */ [data-theme="dark"] .alert { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .alert-info { background: rgba(27,94,32,0.12); color: #86efac; border-color: rgba(27,94,32,0.28); } [data-theme="dark"] .alert-success { background: rgba(16,185,129,0.10); color: #6ee7b7; border-color: rgba(16,185,129,0.22); } [data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.10); color: #fcd34d; border-color: rgba(245,158,11,0.22); } [data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.10); color: #fca5a5; border-color: rgba(239,68,68,0.22); } [data-theme="dark"] hr, [data-theme="dark"] .border { border-color: var(--border) !important; } [data-theme="dark"] .text-muted { color: rgba(232,234,255,0.5) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background: var(--bg-surface) !important; color: var(--text-primary); } /* ─── Composant : list-view (.lv-root redéfinit --lv-* localement) ───── */ [data-theme="dark"] .lv-root { --lv-ink: #e8eaff; --lv-mute: rgba(232,234,255,0.55); --lv-line: rgba(255,255,255,0.09); --lv-surf: #161824; --lv-soft: #11121b; --lv-softer: rgba(255,255,255,0.04); background: var(--lv-surf); border-color: var(--lv-line); color: var(--lv-ink); } [data-theme="dark"] .lv-header { border-color: var(--lv-line); } [data-theme="dark"] .lv-footer { background: var(--lv-soft); border-color: var(--lv-line); color: var(--lv-mute); } [data-theme="dark"] .lv-count { background: var(--lv-softer); color: var(--lv-mute); border-color: var(--lv-line); } [data-theme="dark"] .lv-th { color: var(--lv-mute); border-color: var(--lv-line); background: var(--lv-soft); } [data-theme="dark"] .lv-table tbody td { color: var(--lv-ink); border-color: var(--lv-line); } [data-theme="dark"] .lv-table tbody tr:hover td { background: var(--lv-softer); } [data-theme="dark"] .lv-empty { color: var(--lv-mute); } [data-theme="dark"] .record_tools { color: var(--lv-mute); } [data-theme="dark"] .lv-search { background: var(--lv-softer); border-color: var(--lv-line); } [data-theme="dark"] .lv-search-input { color: var(--lv-ink); } [data-theme="dark"] .lv-search-input::placeholder { color: var(--lv-mute); } [data-theme="dark"] .lv-btn-ghost { color: var(--lv-mute); border-color: var(--lv-line); } [data-theme="dark"] .lv-btn-ghost:hover:not(:disabled) { background: var(--lv-softer); color: var(--lv-ink); } [data-theme="dark"] .lv-pagesize-select { background: var(--lv-soft); color: var(--lv-ink); border-color: var(--lv-line); } [data-theme="dark"] .lv-filters > [class*="col-"] { background: var(--lv-softer); border-color: var(--lv-line); } [data-theme="dark"] .lv-filters .form-select, [data-theme="dark"] .lv-filters .form-control { color: var(--lv-ink) !important; } /* ─── Composant : user-account ───────────────────────────────────────── */ [data-theme="dark"] .user-account-panel { background: var(--bg-surface); border-color: var(--border); } [data-theme="dark"] .ua-name { color: var(--text-primary); } [data-theme="dark"] .ua-job { color: var(--text-secondary); } [data-theme="dark"] .ua-divider { background: var(--border); } [data-theme="dark"] .ua-section-label { color: var(--text-secondary); } [data-theme="dark"] .ua-menu-item { color: var(--text-primary); } [data-theme="dark"] .ua-menu-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } [data-theme="dark"] .ua-menu-item--danger { color: #fca5a5; } /* ─── Composant : page-footer ─────────────────────────────────────────── */ [data-theme="dark"] #page_footer { background: var(--bg-surface); border-color: var(--border); } [data-theme="dark"] .footer-copy, [data-theme="dark"] .footer-datetime { color: var(--text-secondary); } [data-theme="dark"] .footer-time strong, [data-theme="dark"] .footer-colon { color: var(--text-primary); } /* ─── Composant : login-box ──────────────────────────────────────────── */ [data-theme="dark"] .lb-form-col { background: var(--bg-surface); border-color: var(--border); } [data-theme="dark"] .lb-eye-btn { color: var(--text-secondary); } /* ─── Composant : form-container ─────────────────────────────────────── */ [data-theme="dark"] .form-panel { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .form-backdrop { background: rgba(0,0,0,0.72); } [data-theme="dark"] .form-title { color: var(--text-primary); border-color: var(--border); } /* ─── Composant : record-detail ──────────────────────────────────────── */ [data-theme="dark"] .record-detail { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .rd-label { color: var(--text-secondary); } /* ─── Lemai — composants spécifiques ─────────────────────────────────── */ [data-theme="dark"] .lm-page-title { color: var(--text-primary); } [data-theme="dark"] .lm-page-subtitle { color: var(--text-secondary); } [data-theme="dark"] .lm-stat-card { background: var(--bg-surface); border-color: var(--border); } [data-theme="dark"] .lm-stat-val { color: var(--text-primary); } [data-theme="dark"] .mag-card { background: var(--bg-surface); border-color: var(--border); } [data-theme="dark"] .mag-card-name { color: var(--text-primary); } [data-theme="dark"] .mag-card-stats { background: var(--bg-content); } [data-theme="dark"] .mag-stat-val { color: var(--text-primary); } [data-theme="dark"] .mag-stat-lbl, [data-theme="dark"] .mag-entite-label { color: var(--text-secondary); } [data-theme="dark"] .mag-stat-sep { background: rgba(255,255,255,0.09); } /* ─── Navbar en mode sombre ───────────────────────────────────────────── */ [data-theme="dark"] .navbar { background: var(--bg-navbar); border-bottom-color: var(--border); } [data-theme="dark"] .navbar .nav-link { color: rgba(232,234,255,0.75); } [data-theme="dark"] .navbar .nav-link:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); } [data-theme="dark"] .navbar .nav-link > .bi { color: rgba(232,234,255,0.35); } [data-theme="dark"] .navbar .nav-link:hover > .bi { color: rgba(232,234,255,0.75); } [data-theme="dark"] .navbar .dropdown-menu { background: var(--bg-surface); border-color: var(--border); } [data-theme="dark"] .navbar .dropdown-item { color: rgba(232,234,255,0.75); } [data-theme="dark"] .navbar .dropdown-item:hover, [data-theme="dark"] .navbar .dropdown-item:focus { background: rgba(255,255,255,0.06); color: var(--text-primary); } [data-theme="dark"] .navbar .nav-item + .nav-item::before { background: rgba(255,255,255,0.12); } /* ─── Toggle button (transition icône) ───────────────────────────────── */ #imanage_theme_toggle { transition: transform .25s ease, color .18s ease; } #imanage_theme_toggle:hover { transform: rotate(20deg); color: var(--accent) !important; }