/* ============================================================ bootstrap-bridge.css — Calque de thème « Design System » ------------------------------------------------------------ Ré-habille Bootstrap 5 + les classes maison de l'app avec les tokens du design system. NE TOUCHE PAS au JS ni au HTML. À charger EN DERNIER, après bootstrap + style-connect + style-onair. Le thème sombre suit le mécanisme existant : . L'accent suit . ============================================================ */ /* ---------- Base ---------- */ body { font-family: var(--font-base); font-size: var(--fs-body); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; } /* ---------- Boutons (alignés sur le DS pur : components.css .btn) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; padding: 0.625rem 1rem; border-radius: var(--radius); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .btn:active { transform: translateY(1px); } .btn i { font-size: 0.95em; } .btn-sm, .btn-group-sm > .btn { padding: 0.4rem 0.7rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); } .btn-lg, .btn-group-lg > .btn { padding: 0.8rem 1.4rem; font-size: var(--fs-h3); } .btn-xs { padding: 0.2rem 0.45rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); line-height: 1.3; } .btn-primary, .btn-onair { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-primary:hover, .btn-onair:hover, .btn-primary:focus, .btn-onair:focus { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); } .btn-outline-primary { color: var(--accent); border-color: var(--accent); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* AI.biza : l'accent jaune est illisible sur fond clair, EN TEXTE comme EN BORDURE FINE (cf. règle 2). En thème clair : bordure + icône neutres et lisibles ; au survol, remplissage accent (identité). En thème sombre : le jaune contraste -> on le restaure sur la bordure et l'icône. */ [data-product="aibiza"] .btn-outline-primary { color: var(--c-text); border-color: var(--c-border-strong); } [data-product="aibiza"] .btn-outline-primary:hover, [data-product="aibiza"] .btn-outline-primary:focus { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } [data-bs-theme="dark"] [data-product="aibiza"] .btn-outline-primary { color: var(--accent); border-color: var(--accent); } .btn-secondary { background-color: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); } .btn-secondary:hover { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); } .btn-outline-secondary { color: var(--c-text-muted); border-color: var(--c-border-strong); } .btn-outline-secondary:hover { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); } /* .btn-outline-dark : Bootstrap le laisse noir sur fond transparent même en data-bs-theme="dark" -> invisible sur nos surfaces sombres. On le mappe sur les tokens ; l'état actif s'inverse (fond = texte) pour rester contrasté dans les deux thèmes. */ .btn-outline-dark { color: var(--c-text); border-color: var(--c-border-strong); } .btn-outline-dark:hover, .btn-outline-dark:focus { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); } .btn-outline-dark.active, .btn-outline-dark:active { background-color: var(--c-text); border-color: var(--c-text); color: var(--c-bg); } /* Boutons-toggle (.btn-check) : l'état coché suit l'accent du produit, pas le bleu Bootstrap par défaut */ .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-check:checked + .btn-outline-secondary { background-color: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-text); } .btn-check:focus-visible + .btn { box-shadow: 0 0 0 3px var(--accent-soft); } #user-display .dropdown-toggle { cursor: pointer; } /* btn-dark : bouton « neutre fort » qui s'inverse avec le thème (sombre en clair, clair en sombre) via les tokens --c-text / --c-bg. Évite le fond quasi-noir illisible de Bootstrap en thème sombre. */ .btn-dark { background-color: var(--c-text); border-color: var(--c-text); color: var(--c-bg); } .btn-dark:hover, .btn-dark:focus { background-color: var(--c-text-muted); border-color: var(--c-text-muted); color: var(--c-bg); } .btn-success { background-color: var(--c-success); border-color: var(--c-success); } .btn-success:hover { filter: brightness(0.93); } .btn-outline-success { color: var(--c-success); border-color: var(--c-success); } .btn-outline-success:hover { background-color: var(--c-success); border-color: var(--c-success); color: #fff; } .btn-danger { background-color: var(--c-danger); border-color: var(--c-danger); } .btn-outline-danger { color: var(--c-danger); border-color: var(--c-danger); } .btn-outline-danger:hover { background-color: var(--c-danger); border-color: var(--c-danger); color: #fff; } .btn-warning { background-color: var(--c-warning); border-color: var(--c-warning); color: #fff; } .btn-outline-warning { color: var(--c-warning); border-color: var(--c-warning); } .btn-outline-warning:hover { background-color: var(--c-warning); border-color: var(--c-warning); color: #fff; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; } /* ---------- Cartes ---------- */ .card { border-radius: var(--radius-lg); border: 1px solid var(--c-border); background-color: var(--c-surface); box-shadow: var(--shadow-xs); } .card-header { background-color: var(--c-surface); border-bottom: 1px solid var(--c-border); font-weight: var(--fw-semibold); padding: var(--sp-4) var(--sp-5); } .card-body { padding: var(--sp-5); } .card-footer { background-color: var(--c-surface-2); border-top: 1px solid var(--c-border); padding: var(--sp-4) var(--sp-5); } /* Variante "guide/configuration" : en-tête teinté warning depuis les tokens (remplace les bg-warning + color:#000 en dur, illisibles en thème sombre). */ .card-header--soft-warning { background-color: var(--c-warning-soft); color: var(--c-warning); } .card-header--soft-warning i { color: var(--c-warning); } /* En-tête de groupe repliable dans une .list-group (bibliothèques : Prompt Studio…). */ .list-group-header { background-color: var(--c-surface-2); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; } .list-group-header:hover { color: var(--c-text); } .list-group-header .pill { margin-left: auto; } /* ---------- Badges & fonds utilitaires ---------- */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.03em; } .bg-onair { background-color: var(--accent) !important; color: var(--accent-contrast) !important; } .badge.bg-onair { background-color: var(--accent-soft) !important; color: var(--accent) !important; } /* rgba + --bs-bg-opacity : fond plein par défaut, mais respecte .bg-opacity-* de Bootstrap (sinon un .bg-info.bg-opacity-10 devenait plein → texte coloré illisible dessus). */ .bg-success { background-color: rgba(var(--c-success-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-danger { background-color: rgba(var(--c-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-warning { background-color: rgba(var(--c-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-info { background-color: rgba(var(--c-info-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-secondary { background-color: rgba(var(--c-text-muted-rgb), var(--bs-bg-opacity, 1)) !important; } .badge.bg-secondary { background-color: var(--c-surface-2) !important; color: var(--c-text-muted) !important; } /* ---------- Formulaires ---------- */ .form-control, .form-select { border-radius: var(--radius); border: 1px solid var(--c-border-strong); background-color: var(--c-surface); color: var(--c-text); padding: 0.6rem 0.75rem; } /* Variante compacte (sinon le padding ci-dessus écrase Bootstrap .form-*-sm) */ .form-control-sm, .form-select-sm { padding: 0.3rem 0.6rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form-control::placeholder { color: var(--c-text-faint); } .form-label { font-weight: var(--fw-medium); color: var(--c-text); font-size: var(--fs-sm); margin-bottom: var(--sp-2); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* AI.biza : accent jaune pâle -> poignée du switch en foncé (sinon blanc-sur-jaune illisible) */ [data-product="aibiza"] .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231a1d21'/%3e%3c/svg%3e"); } /* ---------- Tableaux ---------- */ .table { --bs-table-bg: transparent; color: var(--c-text); } .table > thead th, .table-light, .table-light th { background-color: var(--c-surface-2) !important; color: var(--c-text-muted) !important; font-weight: var(--fw-semibold); border-color: var(--c-border) !important; } .table > :not(caption) > * > * { border-bottom-color: var(--c-border); } .table > thead th { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); } .table > tbody > tr > td { padding: var(--sp-3) var(--sp-4); } /* Variante compacte : lignes moins hautes (sinon le padding dur ci-dessus neutralise .table-sm de Bootstrap) */ .table-sm > thead > tr > th, .table-sm > tbody > tr > td { padding: var(--sp-2) var(--sp-3); } .table-hover > tbody > tr:hover > * { background-color: var(--c-surface-2); color: var(--c-text); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: color-mix(in srgb, var(--c-surface-2) 55%, transparent); color: var(--c-text); } /* Utilitaires Bootstrap « fixes-clair » (.bg-light / .bg-white) : restent blancs en thème sombre par design. On les thématise (sinon en-têtes/cartes blancs en dark, ex. card-header bg-light). */ [data-bs-theme="dark"] .bg-light { background-color: var(--c-surface-2) !important; } [data-bs-theme="dark"] .bg-white { background-color: var(--c-surface) !important; } /* ---------- Modales ---------- */ .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--c-border); background-color: var(--c-surface); box-shadow: var(--shadow-lg); } .modal-header { border-bottom: 1px solid var(--c-border); } .modal-footer { border-top: 1px solid var(--c-border); } .modal-header.bg-onair { background-color: var(--accent) !important; color: var(--accent-contrast) !important; } /* ---------- Sidebar ---------- */ .sidebar, .sidebar.bg-dark { background-color: var(--c-sidebar-bg) !important; border-right: 1px solid var(--c-sidebar-border); } .sidebar .nav-link { border-radius: var(--radius); margin: 1px var(--sp-2); padding: var(--sp-2) var(--sp-3); font-weight: var(--fw-medium); transition: background var(--t-fast), color var(--t-fast); } .sidebar .nav-link.text-white { color: var(--c-sidebar-text) !important; } .sidebar .nav-link.text-white:hover { background-color: var(--c-sidebar-surface); color: #fff !important; } .sidebar .nav-link.main-menu-link { color: var(--c-sidebar-text-muted) !important; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; } .sidebar .nav-link.active-onair { background-color: var(--accent-soft) !important; color: #fff !important; } .sidebar .nav-link.active-onair i { color: var(--accent) !important; } /* ---------- Header / topbar ---------- */ .top-header, .header-onair { background: var(--c-surface) !important; color: var(--c-text) !important; border-bottom: 1px solid var(--c-border); box-shadow: none !important; } .header-onair .logo-text-tagline { color: var(--c-text-muted) !important; } /* ---------- Conteneurs applicatifs (sync-*) ---------- */ .sync-grid-header, .sync-toolbar, .sync-tracks-header { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); } .sync-toolbar { box-shadow: var(--shadow-xs); } .sync-card, .sync-card-cover { border-radius: var(--radius-lg); } .sync-card { border: 1px solid var(--c-border) !important; box-shadow: var(--shadow-xs); transition: box-shadow var(--t-base), transform var(--t-base); background: var(--c-surface); } .sync-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .vt-main-panel .card, .vt-tracks-panel { border-radius: var(--radius-lg); } .list-group-item { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } /* ---------- Onglets / alertes ---------- */ .nav-tabs { border-bottom: 1px solid var(--c-border); gap: var(--sp-1); } .nav-tabs .nav-link { color: var(--c-text-muted); background: transparent; border: none; border-bottom: 3px solid transparent; border-radius: 0; padding: 0.75rem 1.25rem; margin-bottom: -1px; font-weight: var(--fw-medium); font-size: 0.9rem; transition: color var(--t-fast), border-color var(--t-fast); } .nav-tabs .nav-link:hover { color: var(--c-text); background: transparent; border-color: transparent; border-bottom-color: var(--accent-soft); } .nav-tabs .nav-link.active { color: var(--accent); background: transparent; border-color: transparent; border-bottom: 3px solid var(--accent); } /* AI.biza : l'accent jaune est illisible en texte -> onglet actif en texte lisible, soulignement accent jaune conservé */ [data-product="aibiza"] .nav-tabs .nav-link.active { color: var(--c-text); } .alert { border-radius: var(--radius); padding: var(--sp-4); border: 1px solid transparent; } .alert-success { background: var(--c-success-soft); color: var(--c-success); } .alert-danger { background: var(--c-danger-soft); color: var(--c-danger); } .alert-warning { background: var(--c-warning-soft); color: var(--c-warning); } .alert-info { background: var(--c-info-soft); color: var(--c-info); } /* ---------- Sélecteur de produit (pills topbar) ---------- */ .product-pills { display: flex; gap: var(--sp-2); } .product-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .product-pill:hover { color: var(--c-text); text-decoration: none; } .product-pill.is-active { border-color: var(--accent); color: var(--c-text); background: var(--accent-soft); } .product-pill .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .product-pill .dot--aibiza { background: var(--product-aibiza); } .product-pill .dot--connect { background: var(--product-connect); } .product-pill .dot--analytics { background: var(--product-analytics); } .product-pill .dot--onair { background: var(--product-onair); } @media (max-width: 860px) { .product-pill span:not(.dot) { display: none; } .product-pill { padding: 0.4rem; } } /* ---------- Sidebar : logo identique à l'original (placement pt-3 px-3 + .sidebar-logo d'origine) ---------- */ .sidebar__logo { padding: 1rem 1rem 0; } .sidebar__logo a { display: block; } .app[data-collapsed="true"] .sidebar__logo { padding: 0.75rem 0.5rem 0; } .app[data-collapsed="true"] .sidebar__logo .sidebar-logo { max-width: 100%; } /* ---------- Bouton de thème (lune/soleil) : cohérent avec le style-guide ---------- */ .theme-toggle-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text-muted); cursor: pointer; font-size: 0.95rem; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .theme-toggle-btn:hover { background: var(--c-surface-2); color: var(--accent); border-color: var(--accent); } /* ---------- (Legacy) ancien switch de thème — conservé au cas où, plus injecté ---------- */ .theme-toggle-wrapper .toggle-icon { color: var(--c-text-faint); } .theme-toggle-wrapper .toggle-icon.active { color: var(--accent); } .theme-switch-track { background-color: var(--c-border-strong); border-color: var(--c-border-strong); } .theme-switch input:checked + .theme-switch-track { background-color: var(--accent); border-color: var(--accent); } .theme-switch-track::after { background: #fff; } /* ---------- Lisibilité : .text-dark doit rester lisible en thème sombre ---------- */ [data-bs-theme="dark"] .text-dark { color: var(--c-text) !important; } /* ---------- Spinners : le bleu Bootstrap (.text-primary) suit la couleur d'action du produit ---------- */ .spinner-border.text-primary, .spinner-grow.text-primary { color: var(--color-primary, var(--accent)) !important; } /* ---------- Analytics : remappe l'ancien rouge marque vers le vert RevMA ---------- */ [data-product="analytics"] { --analytics-primary: var(--accent); } /* Le
Analytics force un fond clair : on le neutralise pour suivre le thème (sombre inclus) */ .main > main.bg-light { background-color: var(--c-bg) !important; } /* ---------- Accordéon (Bootstrap 5.3) thématisé via tokens DS (clair + sombre) ---------- Remplace les surcharges legacy de style-standard.css. Les variables --bs-accordion-* suivent les tokens (qui s'adaptent au thème) ; le chevron suit le mode natif BS via data-bs-theme. */ .accordion { --bs-accordion-bg: var(--c-surface); --bs-accordion-color: var(--c-text); --bs-accordion-border-color: var(--c-border); --bs-accordion-btn-color: var(--c-text); --bs-accordion-btn-bg: var(--c-surface); --bs-accordion-active-color: var(--c-text); --bs-accordion-active-bg: var(--accent-soft); --bs-accordion-btn-focus-border-color: var(--accent); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--accent-soft); --bs-accordion-border-radius: var(--radius); } /* ---------- Tri de colonnes (tables) — tokenisé (ex style-standard, clair + sombre) ---------- */ .sortable, .sortable-col { cursor: pointer; user-select: none; } .sortable:hover { background-color: var(--c-surface-2); } .sort-icon { margin-left: 0.4rem; color: var(--c-text-faint); font-size: 0.75rem; } .sortable.active .sort-icon, .sortable-col.active .sort-icon { color: var(--c-text-muted); } .sortable-col:hover, .sortable-col.active { color: var(--c-text); } /* ---------- Échelle OFFICIELLE des scores & popularités (score-scale.js) ---------- Chargée par TOUS les produits (Connect ET AI.biza) : la popularité Spotify s'affiche aussi sur les pages Artistes. Tokens --c-score-* dans tokens.css. 0-19 rouge · 20-44 orange · 45-59 vert clair · 60-100 vert foncé. */ /* !important assumé (comme les utilitaires .bg-*/.text-* de Bootstrap) pour primer sur les composants hôtes quel que soit l'ordre de chargement — ex. .pill (pills.css, chargé après) ou .badge fixent leur propre fond. */ .score-level--strong { background: var(--c-score-strong-soft) !important; color: var(--c-score-strong) !important; border-color: var(--c-score-strong) !important; } .score-level--good { background: var(--c-score-good-soft) !important; color: var(--c-score-good) !important; border-color: var(--c-score-good) !important; } .score-level--weak { background: var(--c-orange-soft) !important; color: var(--c-orange) !important; border-color: var(--c-orange) !important; } .score-level--poor { background: var(--c-danger-soft) !important; color: var(--c-danger) !important; border-color: var(--c-danger) !important; } /* Utilitaires de couleur de texte : !important assumé (comme les .text-* Bootstrap) pour primer sur la couleur des composants hôtes. */ .score-text--strong { color: var(--c-score-strong) !important; } .score-text--good { color: var(--c-score-good) !important; } .score-text--weak { color: var(--c-orange) !important; } .score-text--poor { color: var(--c-danger) !important; }