/* * Plugin Accessibilité GLPI — Mode sombre « Ardoise Bleu » * * Thème sombre optionnel pour l'interface helpdesk / centrale / anonyme. * Activé par data-a11y-dark="1" sur (préférence utilisateur `dark_mode`), * via la bascule du widget. AUCUNE auto-activation depuis l'OS. * * Toutes les règles sont scopées sous l'interrupteur maître * (html[data-a11y-baseline="1"]) : sans opt-in, le rendu GLPI natif est préservé. * * Parti pris visuel : gris-ardoise neutre froid, cohérent avec l'identité GLPI, * avec un bleu clair comme seule note vive (actions primaires, liens, onglet * actif). Trois niveaux de surface bien distincts donnent du relief ; le texte * est franc (≈ 14:1) pour une lisibilité maximale. Contrastes vérifiés WCAG * 2.1 AA, la plupart AAA. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] { --a11y-dark-bg: #15181d; /* fond page — ardoise sombre */ --a11y-dark-surface: #1e232b; /* cartes, navbar, modales */ --a11y-dark-surface-2: #283039; /* champs, lignes alternées, survol */ --a11y-dark-border: #3a444f; /* bordures — séparation nette */ --a11y-dark-text: #e6e9ee; /* gris très clair — ≈ 14:1 sur le fond */ --a11y-dark-muted: #9aa6b2; /* gris-bleu — ≈ 7:1 sur le fond */ --a11y-dark-accent: #339af0; /* bleu — actions primaires */ --a11y-dark-accent-hi: #4dabf7; /* bleu survol */ --a11y-dark-link: #6cb6f5; /* lien bleu clair — ≈ 7:1 sur le fond */ --a11y-dark-on-accent: #0a1016; /* texte sur aplat bleu */ color-scheme: dark; /* Le focus bleu de base (#005FCC) ne tient que ~2:1 sur fond sombre : on le remplace par un bleu clair (≈ 7:1) — corrige un défaut latent. */ --a11y-focus-color: #7cc0ff; } /* Barre de défilement assortie ──────────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] { scrollbar-color: var(--a11y-dark-border) var(--a11y-dark-bg); } /* ── Fond global et texte de base ──────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] body, html[data-a11y-baseline="1"][data-a11y-dark="1"] .page, html[data-a11y-baseline="1"][data-a11y-dark="1"] .page-wrapper, html[data-a11y-baseline="1"][data-a11y-dark="1"] .page-body, html[data-a11y-baseline="1"][data-a11y-dark="1"] .content-wrapper, html[data-a11y-baseline="1"][data-a11y-dark="1"] .container-fluid { background-color: var(--a11y-dark-bg) !important; color: var(--a11y-dark-text) !important; } /* ── Texte courant et titres ───────────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] p, html[data-a11y-baseline="1"][data-a11y-dark="1"] li, html[data-a11y-baseline="1"][data-a11y-dark="1"] dt, html[data-a11y-baseline="1"][data-a11y-dark="1"] dd, html[data-a11y-baseline="1"][data-a11y-dark="1"] span, html[data-a11y-baseline="1"][data-a11y-dark="1"] label, html[data-a11y-baseline="1"][data-a11y-dark="1"] h1, html[data-a11y-baseline="1"][data-a11y-dark="1"] h2, html[data-a11y-baseline="1"][data-a11y-dark="1"] h3, html[data-a11y-baseline="1"][data-a11y-dark="1"] h4, html[data-a11y-baseline="1"][data-a11y-dark="1"] h5, html[data-a11y-baseline="1"][data-a11y-dark="1"] h6, html[data-a11y-baseline="1"][data-a11y-dark="1"] .page.title, html[data-a11y-baseline="1"][data-a11y-dark="1"] .page-title { color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .text-muted, html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-hint, html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-text, html[data-a11y-baseline="1"][data-a11y-dark="1"] small { color: var(--a11y-dark-muted) !important; } /* ── Surfaces : cartes, navbar, menus, modales, accordéons ─────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .card, html[data-a11y-baseline="1"][data-a11y-dark="1"] .card-header, html[data-a11y-baseline="1"][data-a11y-dark="1"] .card-body, html[data-a11y-baseline="1"][data-a11y-dark="1"] .card-footer, html[data-a11y-baseline="1"][data-a11y-dark="1"] .navbar, html[data-a11y-baseline="1"][data-a11y-dark="1"] .navbar-light, html[data-a11y-baseline="1"][data-a11y-dark="1"] .dropdown-menu, html[data-a11y-baseline="1"][data-a11y-dark="1"] .modal-content, html[data-a11y-baseline="1"][data-a11y-dark="1"] .modal-header, html[data-a11y-baseline="1"][data-a11y-dark="1"] .modal-footer, html[data-a11y-baseline="1"][data-a11y-dark="1"] .offcanvas, html[data-a11y-baseline="1"][data-a11y-dark="1"] .accordion-item, html[data-a11y-baseline="1"][data-a11y-dark="1"] .accordion-button, html[data-a11y-baseline="1"][data-a11y-dark="1"] .list-group-item, html[data-a11y-baseline="1"][data-a11y-dark="1"] .popover, html[data-a11y-baseline="1"][data-a11y-dark="1"] .popover-body { background-color: var(--a11y-dark-surface) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .dropdown-item { color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .dropdown-item:hover, html[data-a11y-baseline="1"][data-a11y-dark="1"] .dropdown-item:focus { background-color: var(--a11y-dark-surface-2) !important; } /* ── Liens — ambre clair + soulignement (WCAG 1.4.1 : pas la couleur seule) ── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] a { color: var(--a11y-dark-link) !important; text-decoration-color: color-mix(in srgb, var(--a11y-dark-link) 55%, transparent); } html[data-a11y-baseline="1"][data-a11y-dark="1"] a:hover { color: var(--a11y-dark-accent-hi) !important; } /* Liens qui sont des boutons / éléments de nav : pas de soulignement imposé. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] a.btn, html[data-a11y-baseline="1"][data-a11y-dark="1"] a.nav-link, html[data-a11y-baseline="1"][data-a11y-dark="1"] a.dropdown-item, html[data-a11y-baseline="1"][data-a11y-dark="1"] a.page-link { text-decoration: none !important; } /* ── Champs de formulaire ──────────────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]), html[data-a11y-baseline="1"][data-a11y-dark="1"] select, html[data-a11y-baseline="1"][data-a11y-dark="1"] textarea, html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-control, html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-select, html[data-a11y-baseline="1"][data-a11y-dark="1"] .input-group-text { background-color: var(--a11y-dark-surface-2) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] input::placeholder, html[data-a11y-baseline="1"][data-a11y-dark="1"] textarea::placeholder { color: var(--a11y-dark-muted) !important; } /* Survol/focus de champ : liseré bleu discret. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-control:focus, html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-select:focus, html[data-a11y-baseline="1"][data-a11y-dark="1"] textarea:focus { border-color: var(--a11y-dark-accent) !important; } /* Cases / radios cochés — aplat bleu. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .form-check-input:checked { background-color: var(--a11y-dark-accent) !important; border-color: var(--a11y-dark-accent) !important; } /* ── Boutons ───────────────────────────────────────────────────────────────── */ /* Primaire : aplat bleu, texte sombre — la signature de l'identité. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-primary { background-color: var(--a11y-dark-accent) !important; border-color: var(--a11y-dark-accent) !important; color: var(--a11y-dark-on-accent) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-primary:hover, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-primary:focus { background-color: var(--a11y-dark-accent-hi) !important; border-color: var(--a11y-dark-accent-hi) !important; color: var(--a11y-dark-on-accent) !important; } /* Secondaires / neutres : surface + bordure chaude. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-secondary, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-light, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-outline-secondary, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-default { background-color: var(--a11y-dark-surface-2) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-secondary:hover, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-light:hover, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-outline-secondary:hover, html[data-a11y-baseline="1"][data-a11y-dark="1"] .btn-default:hover { background-color: var(--a11y-dark-border) !important; } /* ── Badges, alertes ───────────────────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .alert { background-color: var(--a11y-dark-surface) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } /* ── Tableaux ──────────────────────────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] table, html[data-a11y-baseline="1"][data-a11y-dark="1"] .table, html[data-a11y-baseline="1"][data-a11y-dark="1"] th, html[data-a11y-baseline="1"][data-a11y-dark="1"] td { background-color: var(--a11y-dark-surface) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] thead th { background-color: var(--a11y-dark-surface-2) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--a11y-dark-surface-2) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .table-hover > tbody > tr:hover > * { background-color: var(--a11y-dark-border) !important; } /* ── Onglets, fil d'ariane, pagination ─────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .nav-tabs, html[data-a11y-baseline="1"][data-a11y-dark="1"] .breadcrumb { border-color: var(--a11y-dark-border) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .nav-tabs .nav-link { color: var(--a11y-dark-muted) !important; border-color: transparent !important; } /* Onglet actif : repère bleu — pas seulement la couleur, aussi la bordure. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] .nav-tabs .nav-link.active { color: var(--a11y-dark-text) !important; background-color: var(--a11y-dark-surface) !important; border-color: var(--a11y-dark-border) !important; border-bottom-color: var(--a11y-dark-accent) !important; box-shadow: inset 0 -2px 0 0 var(--a11y-dark-accent); } html[data-a11y-baseline="1"][data-a11y-dark="1"] .breadcrumb-item, html[data-a11y-baseline="1"][data-a11y-dark="1"] .breadcrumb-item.active { color: var(--a11y-dark-muted) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .page-link { background-color: var(--a11y-dark-surface) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } html[data-a11y-baseline="1"][data-a11y-dark="1"] .page-item.active .page-link { background-color: var(--a11y-dark-accent) !important; border-color: var(--a11y-dark-accent) !important; color: var(--a11y-dark-on-accent) !important; } /* ── Code, préformaté, raccourcis clavier ──────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] code, html[data-a11y-baseline="1"][data-a11y-dark="1"] pre, html[data-a11y-baseline="1"][data-a11y-dark="1"] kbd { background-color: var(--a11y-dark-surface-2) !important; border-color: var(--a11y-dark-border) !important; color: var(--a11y-dark-text) !important; } /* ── Séparateurs ───────────────────────────────────────────────────────────── */ html[data-a11y-baseline="1"][data-a11y-dark="1"] hr, html[data-a11y-baseline="1"][data-a11y-dark="1"] .dropdown-divider { border-color: var(--a11y-dark-border) !important; } /* ── Widget « Encre & Craie » — variante sombre par override de tokens ────── Le widget suit le mode sombre en inversant simplement sa palette : toutes les règles de a11y-base.css consomment ces variables. */ html[data-a11y-baseline="1"][data-a11y-dark="1"] { --aw-bg: #0e0f14; --aw-bg-surface: #1b1d26; --aw-bg-hover: rgba(255 255 255 / .06); --aw-border: rgba(255 255 255 / .12); --aw-border-hover: rgba(255 255 255 / .22); --aw-text: #eef1f5; --aw-text-muted: #a7b0bd; /* ≈ 7:1 sur fond sombre (AAA) */ --aw-accent: #7CA9FF; /* outremer éclairci — ≈ 7:1 sur #0e0f14 */ --aw-accent-strong: #A8C5FF; --aw-accent-glow: rgba(124 169 255 / .2); --aw-accent-dim: rgba(124 169 255 / .14); --aw-knob-on: #0e0f14; /* pastille sombre sur piste claire */ --aw-track-off: #22232e; --aw-shadow-panel: 0 32px 64px rgba(0 0 0 / .65), 0 0 0 1px rgba(255 255 255 / .06); } html[data-a11y-baseline="1"][data-a11y-dark="1"] #a11y-panel, html[data-a11y-baseline="1"][data-a11y-dark="1"] #a11y-trigger { color-scheme: dark; }