/* Platform.UI — Bridge Bootswatch (5.3.3). Remappe les variables Bootstrap vers les tokens --app-* pour que la navbar, les cards, badges, boutons, inputs, dropdowns, tables et modals EXISTANTS héritent du thème sombre sans réécriture de markup. data-bs-theme="dark" est posé sur dans index.html ; ici on remappe explicitement car Bootswatch n'embarque qu'un support partiel. */ :root { color-scheme: dark; /* ---- Globales ---- */ --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-body-font-family: var(--app-font-sans); --bs-border-color: var(--app-border); --bs-border-color-translucent: rgba(255, 255, 255, .1); --bs-secondary-color: var(--app-text-muted); --bs-secondary-bg: var(--app-surface-2); --bs-tertiary-bg: var(--app-surface); --bs-tertiary-color: var(--app-text-subtle); --bs-emphasis-color: var(--app-text); --bs-heading-color: var(--app-text); /* ---- Accent / brand (laiton) ---- */ --bs-primary: var(--app-accent); --bs-primary-rgb: var(--app-accent-rgb); --bs-primary-text-emphasis: var(--app-accent-hover); --bs-link-color: var(--app-accent); --bs-link-color-rgb: var(--app-accent-rgb); --bs-link-hover-color: var(--app-accent-hover); /* ---- Sémantique ---- */ --bs-success: var(--app-success); --bs-warning: var(--app-warning); --bs-danger: var(--app-danger); --bs-info: var(--app-info); /* ---- Surfaces de composants (point clé : sinon dropdowns/tables/forms restent clairs) ---- */ --bs-card-bg: var(--app-surface); --bs-card-cap-bg: var(--app-surface-2); --bs-card-color: var(--app-text); --bs-card-border-color: var(--app-border); --bs-dropdown-bg: var(--app-surface); --bs-dropdown-color: var(--app-text); --bs-dropdown-border-color: var(--app-border); --bs-dropdown-link-color: var(--app-text); --bs-dropdown-link-hover-color: var(--app-text); --bs-dropdown-link-hover-bg: var(--app-surface-2); --bs-modal-bg: var(--app-surface); --bs-modal-color: var(--app-text); --bs-modal-border-color: var(--app-border); --bs-modal-header-border-color: var(--app-border); --bs-modal-footer-border-color: var(--app-border); --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); --bs-table-striped-color: var(--app-text); --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-list-group-bg: var(--app-surface); --bs-list-group-color: var(--app-text); --bs-list-group-border-color: var(--app-border); --bs-nav-pills-link-active-bg: var(--app-accent); --bs-nav-pills-link-active-color: var(--app-on-accent); --bs-nav-link-color: var(--app-text-muted); --bs-nav-link-hover-color: var(--app-text); } /* Form controls : pas de var globale fiable côté Bootswatch → cibler les classes. */ .form-control, .form-select, .input-group-text { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } .form-control::placeholder { color: var(--app-text-subtle); } .form-control:focus, .form-select:focus { background-color: var(--app-surface); border-color: var(--app-accent); color: var(--app-text); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .25); } /* Boutons primaires : texte lisible sur laiton. */ .btn-primary { --bs-btn-color: var(--app-on-accent); --bs-btn-bg: var(--app-accent); --bs-btn-border-color: var(--app-accent); --bs-btn-hover-color: var(--app-on-accent); --bs-btn-hover-bg: var(--app-accent-hover); --bs-btn-hover-border-color: var(--app-accent-hover); --bs-btn-active-bg: var(--app-accent-hover); --bs-btn-active-border-color: var(--app-accent-hover); --bs-btn-disabled-bg: var(--app-accent); --bs-btn-disabled-border-color: var(--app-accent); --bs-btn-disabled-color: var(--app-on-accent); } /* ---- Base ---- */ body { background-color: var(--app-bg); color: var(--app-text); font-family: var(--app-font-sans); } :focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; } ::selection { background: rgba(var(--app-accent-rgb), .35); color: var(--app-text); } /* Scrollbar discrète sur surfaces sombres. */ * { scrollbar-width: thin; scrollbar-color: var(--app-surface-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--app-surface-2); border-radius: var(--app-radius-pill); } *::-webkit-scrollbar-track { background: transparent; } /* ---- Utilitaire : surface sombre (navbar, panneaux chrome) ---- */ .bg-app-surface { background-color: var(--app-surface) !important; }