/* app.css — Style moderne, responsive et compatible avec HTML/Thymeleaf Auteur: ChatGPT Version: 1.0 -------------------------------------------------------------- Objectifs: - Design propre et cohérent pour tableaux, formulaires, cartes, barres de navigation - Responsive sur mobile, tablette, desktop - Thème clair/sombre via data-theme="dark" sur ou - Utilitaires (espacements, flex, grid, textes, ombres, arrondis, etc.) - Compatible avec pages sans framework, et cohabite avec Bootstrap si présent -------------------------------------------------------------- */ /* ============================= Variables & thèmes ============================== */ :root { --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 6px 16px rgba(0,0,0,.08); --shadow-lg: 0 18px 40px rgba(0,0,0,.12); --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem;/* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem;/* 40px */ --space-12: 3rem; /* 48px */ /* Couleurs thème clair */ --bg: #0b0c0f0a; /* subtil */ --panel: #ffffff; --panel-2: #f7f8fa; --text: #0f172a; --text-muted: #475569; --border: #e5e7eb; --primary: #2563eb; --primary-600: #1d4ed8; --primary-50: #eff6ff; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; /* Variables pour patch dark/Bootstrap */ --bg-1: #0f172a; --bg-2: #111827; --card: #0b1220; --text-1: #e5e7eb; --text-2: #cbd5e1; --muted: #94a3b8; --border-strong: #1f2937; } /* Thème sombre */ :root[data-theme="dark"], [data-theme="dark"] :root, html[data-theme="dark"], body[data-theme="dark"] { --bg: #0b0c0f; --panel: #111827; --panel-2: #0f172a; --text: #f8fafc; --text-muted: #94a3b8; --border: #1f2937; --primary: #60a5fa; --primary-600: #3b82f6; --primary-50: #0b1220; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #22d3ee; } /* Respect du thème système si souhaité */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0c0f; --panel: #111827; --panel-2: #0f172a; --text: #f8fafc; --text-muted: #94a3b8; --border: #1f2937; } } /* ============================= Reset & bases typographiques ============================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--text); background: linear-gradient(180deg, var(--panel-2) 0, var(--bg) 100%); line-height: 1.55; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--space-4); font-weight: 700; } p { margin: 0 0 var(--space-4); } small { color: var(--text-muted); } /* ============================= Containers & layout ============================== */ .container { width: 100%; margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 640px){ .container { max-width: var(--container-sm); } } @media (min-width: 768px){ .container { max-width: var(--container-md); } } @media (min-width: 1024px){ .container { max-width: var(--container-lg); } } @media (min-width: 1280px){ .container { max-width: var(--container-xl); } } .section { padding-block: var(--space-8); } /* Navbar simple */ .navbar { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .navbar .inner { display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; padding: var(--space-3) var(--space-4); } .navbar .brand { font-weight: 800; letter-spacing: .2px; } .navbar .actions { display: flex; align-items: center; gap: var(--space-2); } /* Sidebar (optionnelle) */ .sidebar { background: var(--panel); border-right: 1px solid var(--border); min-width: 260px; height: 100dvh; position: sticky; top: 0; padding: var(--space-4); } .sidebar .menu { list-style: none; padding: 0; margin: 0; } .sidebar .menu li a { display: flex; align-items: center; gap: var(--space-3); padding: .6rem .75rem; border-radius: var(--radius-md); color: var(--text); } .sidebar .menu li a:hover { background: var(--primary-50); } /* Layout 2 colonnes (sidebar + contenu) */ .layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 1024px){ .layout { grid-template-columns: 260px 1fr; } } /* ============================= Grille & flex utils ============================== */ .grid { display: grid; gap: var(--space-4); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1023.98px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .flex { display: flex; } .inline-flex { display: inline-flex; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .flex-col { flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } /* Espacements */ .p-2{ padding: var(--space-2); } .p-3{ padding: var(--space-3); } .p-4{ padding: var(--space-4); } .p-6{ padding: var(--space-6); } .px-4{ padding-inline: var(--space-4);} .py-4{ padding-block: var(--space-4);} .py-6{ padding-block: var(--space-6);} .py-8{ padding-block: var(--space-8);} .m-0{ margin:0;} .mb-2{ margin-bottom: var(--space-2);} .mb-3{ margin-bottom: var(--space-3);} .mb-4{ margin-bottom: var(--space-4);} .mb-6{ margin-bottom: var(--space-6);} .mt-4{ margin-top: var(--space-4);} .mt-6{ margin-top: var(--space-6);} .mx-auto{ margin-inline:auto; } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .text-center { text-align:center; } .text-muted { color: var(--text-muted); } .text-sm { font-size:.875rem; } .text-xs { font-size:.75rem; } /* ============================= Cartes ============================== */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-header { padding: var(--space-4); border-bottom: 1px solid var(--border); font-weight: 700; } .card-body { padding: var(--space-4); } .card-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); } /* ============================= Boutons ============================== */ .btn { --btn-bg: var(--primary); --btn-text: #fff; --btn-border: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; border-radius: var(--radius-md); padding: .6rem 1rem; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-text); transition: transform .06s ease, filter .15s ease, background .15s ease; } .btn:hover { filter: brightness(.97); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .6; pointer-events: none; } .btn-primary { --btn-bg: var(--primary); } .btn-secondary { --btn-bg: #64748b; } .btn-success { --btn-bg: var(--success); } .btn-warning { --btn-bg: var(--warning); } .btn-danger { --btn-bg: var(--danger); } .btn-info { --btn-bg: var(--info); } .btn-outline { --btn-bg: transparent; --btn-text: var(--text); --btn-border: var(--border); } .btn-ghost { --btn-bg: transparent; --btn-text: var(--text); --btn-border: transparent; } .btn-sm { padding: .45rem .75rem; font-size: .875rem; } .btn-lg { padding: .8rem 1.25rem; font-size: 1.05rem; border-radius: var(--radius-lg); } /* ============================= Formulaires ============================== */ .form { display: grid; gap: var(--space-4); } .form-row { display: grid; gap: var(--space-3); } @media (min-width:768px){ .form-row { grid-template-columns: 1fr 1fr; } } .label { font-weight: 600; margin-bottom: .35rem; } .control, .input, .select, .textarea { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .6rem .8rem; outline: none; box-shadow: 0 0 0 0 rgba(0,0,0,0); } .control:focus, .input:focus, .select:focus, .textarea:focus { border-color: var(--primary-600); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 16%, transparent); } .textarea { min-height: 120px; resize: vertical; } /* Aide & erreurs */ .form-help { color: var(--text-muted); font-size: .875rem; } .is-invalid { border-color: var(--danger) !important; } .invalid-feedback { color: var(--danger); font-size: .85rem; margin-top: .35rem; } .is-valid { border-color: var(--success) !important; } .valid-feedback { color: var(--success); font-size: .85rem; margin-top: .35rem; } /* Switch */ .switch { appearance: none; width: 44px; height: 24px; border-radius: 999px; background: var(--border); position: relative; outline: none; cursor: pointer; transition: background .2s ease; } .switch::after { content: ""; position: absolute; inset: 3px auto 3px 3px; width: 18px; border-radius: 50%; background: #fff; transition: left .2s ease, transform .2s ease; } .switch:checked { background: var(--primary-600); } .switch:checked::after { left: 23px; } /* ============================= Tableaux ============================== */ .table-wrap { width: 100%; overflow: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--panel); } .table { width: 100%; border-collapse: collapse; } .table th, .table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); text-align: left; } .table thead th { background: var(--panel-2); font-weight: 700; position: sticky; top: 0; z-index: 1; } .table tbody tr:hover { background: color-mix(in oklab, var(--primary-50) 60%, transparent); } .table .cell-actions { display: flex; gap: .35rem; } /* Pagination simple */ .pagination { display: flex; align-items: center; gap: .25rem; } .pagination .page { border: 1px solid var(--border); padding: .45rem .7rem; border-radius: var(--radius-sm); background: var(--panel); } .pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ============================= Badges & alertes ============================== */ .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid var(--border); background: var(--panel-2); } .badge.dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .badge.success { color: var(--success); border-color: color-mix(in oklab, var(--success) 35%, transparent); } .badge.warning { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 35%, transparent); } .badge.danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, transparent); } .badge.info { color: var(--info); border-color: color-mix(in oklab, var(--info) 35%, transparent); } .alert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-md); } .alert.success { border-color: color-mix(in oklab, var(--success) 35%, transparent); } .alert.warning { border-color: color-mix(in oklab, var(--warning) 35%, transparent); } .alert.danger { border-color: color-mix(in oklab, var(--danger) 35%, transparent); } .alert.info { border-color: color-mix(in oklab, var(--info) 35%, transparent); } /* ============================= Modales (sans JS, structure CSS) ============================== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; } .modal { position: fixed; inset: 0; display: none; place-items: center; padding: var(--space-4); } .modal .dialog { width: min(680px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .modal .dialog-header { padding: var(--space-4); border-bottom: 1px solid var(--border); font-weight: 700; } .modal .dialog-body { padding: var(--space-4); } .modal .dialog-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; } /* Affichage conditionnel via :target (ancre #id) */ .modal:target, .modal:target + .modal-backdrop { display: grid; } /* ============================= Cartes statistiques / KPI ============================== */ .kpi { display: grid; gap: var(--space-3); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); } .kpi .label { color: var(--text-muted); font-size: .9rem; } .kpi .value { font-size: clamp(1.4rem, 1rem + 2vw, 2rem); font-weight: 800; } .kpi .trend { font-size: .85rem; } /* ============================= Listes & tableaux responsives denses ============================== */ .list { display: grid; gap: var(--space-2); } .list .item { display: grid; gap: var(--space-2); grid-template-columns: 1fr auto; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); } /* ============================= Helpers responsive ============================== */ .hide-sm { display: none; } @media (min-width: 640px){ .hide-sm { display: initial; } } .hide-md { display: none; } @media (min-width: 768px){ .hide-md { display: initial; } } .hide-lg { display: none; } @media (min-width: 1024px){ .hide-lg { display: initial; } } /* ============================= Breadcrumb ============================== */ .breadcrumb { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; color: var(--text-muted); } .breadcrumb a { color: inherit; } .breadcrumb .sep { opacity: .6; } /* ============================= Header de page ============================== */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .page-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); font-weight: 800; } /* ============================= Footer ============================== */ .footer { padding: var(--space-6) var(--space-4); color: var(--text-muted); } /* ============================= Skeleton loaders ============================== */ .skeleton { position: relative; overflow: hidden; background: var(--panel-2); border-radius: var(--radius-sm); } .skeleton::after { content:""; position: absolute; inset: 0 -50% 0 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: shimmer 1.25s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* ============================= Toast (positionné en haut à droite) ============================== */ .toast-area { position: fixed; top: 1rem; right: 1rem; display: grid; gap: .5rem; z-index: 1000; } .toast { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .6rem .8rem; box-shadow: var(--shadow-md); } /* ============================= Cartes d’authentification / formulaires centrés ============================== */ .auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); } .auth-card { width: min(460px, 100%); } /* ============================= Avatars & chips ============================== */ .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .chips { display: flex; gap: .5rem; flex-wrap: wrap; } .chip { padding: .35rem .6rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; } /* ============================= Cards de liste d’entités (ex: users) ============================== */ .entity-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: .9rem; border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-lg); } .entity-card .meta { color: var(--text-muted); font-size: .9rem; } /* ============================= Utilitaires couleur de texte ============================== */ .text-primary{ color: var(--primary); } .text-success{ color: var(--success); } .text-warning{ color: var(--warning); } .text-danger{ color: var(--danger); } .text-info{ color: var(--info); } /* ============================= Barres de recherche ============================== */ .searchbar { display: flex; gap: .5rem; } .searchbar .input { flex: 1; } /* ============================= Cards tableau de bord ============================== */ .dashboard { display: grid; gap: var(--space-4); } @media (min-width: 1024px){ .dashboard { grid-template-columns: 2fr 1fr; } } /* ============================= Helpers d’élévation et bordure ============================== */ .border { border: 1px solid var(--border); } .border-top { border-top: 1px solid var(--border); } .border-bottom { border-bottom: 1px solid var(--border); } /* ============================= Tables compactes & denses ============================== */ .table-compact th, .table-compact td { padding: .55rem .75rem; } /* ============================= Progress bar ============================== */ .progress { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--border); } .progress > div { height: 100%; width: 0; background: var(--primary); transition: width .3s ease; } /* ============================= Tooltips (data-title) ============================== */ [data-title] { position: relative; } [data-title]:hover::after { content: attr(data-title); position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + .5rem); white-space: nowrap; background: var(--text); color: #fff; padding: .35rem .55rem; border-radius: var(--radius-sm); font-size: .78rem; box-shadow: var(--shadow-sm); } /* ============================= Exemple de sections spécifiques (optionnel) ============================== */ .header-stats { display: grid; gap: var(--space-4); } @media (min-width: 768px){ .header-stats { grid-template-columns: repeat(4, 1fr); } } /* ============================= Impression (améliorations basiques) ============================== */ @media print { .navbar, .sidebar, .toast-area, .modal, .modal-backdrop { display: none !important; } .card, .table-wrap, .entity-card, .kpi { box-shadow: none !important; } body { background: #fff; color: #000; } } /* ========================================================= OVERRIDES DARK MODE (génériques) ========================================================= */ html[data-theme="dark"], body.dark { background: var(--bg-1); color: var(--text-1); } /* Corps / titres / liens */ html[data-theme="dark"] body { background: var(--bg-1); color: var(--text-1); } html[data-theme="dark"] a { color: #93c5fd; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .muted { color: var(--muted) !important; } html[data-theme="dark"] .page-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--text-1); } /* Cartes / séparateurs */ html[data-theme="dark"] .card { background: var(--card); border: 1px solid var(--border); color: var(--text-1); } html[data-theme="dark"] hr { border-color: var(--border); } /* Tableaux */ html[data-theme="dark"] .table { color: var(--text-1); } html[data-theme="dark"] .table thead th { color: var(--text-1); border-bottom-color: var(--border); background: rgba(255,255,255,0.02); } html[data-theme="dark"] .table tbody td { color: var(--text-1); border-top-color: var(--border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,0.02); color: var(--text-1); } /* Badges (classes custom) */ html[data-theme="dark"] .badge { color: #0b1220; background: #e5e7eb; border: 0; padding: .35rem .6rem; font-weight: 700; } html[data-theme="dark"] .badge.success { background: #10b981; color: #052d1d; } html[data-theme="dark"] .badge.warning { background: #fbbf24; color: #3b2b05; } html[data-theme="dark"] .badge.danger { background: #f87171; color: #4a0b0b; } html[data-theme="dark"] .badge.info { background: #60a5fa; color: #0b2559; } /* Boutons */ html[data-theme="dark"] .btn { color: var(--text-1); border-color: var(--border); } html[data-theme="dark"] .btn.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } html[data-theme="dark"] .btn.btn-success { background: var(--success); border-color: var(--success); color: #052d1d; } html[data-theme="dark"] .btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } html[data-theme="dark"] .btn.btn-outline, html[data-theme="dark"] .btn.btn-outline-secondary { background: transparent; color: var(--text-1); border-color: var(--text-2); } html[data-theme="dark"] .btn.btn-outline.btn-danger { color: #fca5a5; border-color: #fca5a5; } /* Formulaires */ html[data-theme="dark"] .form-label, html[data-theme="dark"] label { color: var(--text-1); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input, html[data-theme="dark"] .select { background: #0f172a; color: var(--text-1); border-color: var(--border); } html[data-theme="dark"] .form-control::placeholder { color: var(--muted); } html[data-theme="dark"] .form-check-label { color: var(--text-1); } /* Alertes */ html[data-theme="dark"] .alert { background: #0f172a; color: var(--text-1); border: 1px solid var(--border); } html[data-theme="dark"] .alert.success { background: rgba(16,185,129,.12); border-color: #065f46; color: #d1fae5; } html[data-theme="dark"] .alert.warning { background: rgba(251,191,36,.12); border-color: #92400e; color: #ffedd5; } html[data-theme="dark"] .alert.danger { background: rgba(248,113,113,.12); border-color: #7f1d1d; color: #fee2e2; } html[data-theme="dark"] .alert.info { background: rgba(59,130,246,.12); border-color: #1e3a8a; color: #dbeafe; } /* Navbar */ html[data-theme="dark"] .navbar { background: var(--bg-2); border-bottom: 1px solid var(--border); } html[data-theme="dark"] .navbar .brand { color: var(--text-1); } html[data-theme="dark"] .navbar .btn { color: var(--text-1); } /* Divers */ html[data-theme="dark"] .table-wrap { background: transparent; } html[data-theme="dark"] .cell-actions .btn { color: var(--text-1); } /* ========================================================= PATCH CONTRASTE — Compat Bootstrap en DARK MODE (surcharge des classes Bootstrap .badge.bg-*, .btn-outline-*) ========================================================= */ /* Badges Bootstrap (bg-*) */ html[data-theme="dark"] .badge.bg-secondary { background-color: #334155 !important; color: #e5e7eb !important; } html[data-theme="dark"] .badge.bg-success { background-color: #10b981 !important; color: #052d1d !important; } html[data-theme="dark"] .badge.bg-warning { background-color: #f59e0b !important; color: #3b2b05 !important; } html[data-theme="dark"] .badge.bg-danger { background-color: #ef4444 !important; color: #fff !important; } html[data-theme="dark"] .badge.bg-info, html[data-theme="dark"] .badge.bg-primary { background-color: #3b82f6 !important; color: #fff !important; } /* Boutons outline Bootstrap */ html[data-theme="dark"] .btn-outline-secondary { color: #e5e7eb !important; border-color: #94a3b8 !important; } html[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(148,163,184,.12) !important; } html[data-theme="dark"] .btn-outline-danger { color: #fca5a5 !important; border-color: #fca5a5 !important; } html[data-theme="dark"] .btn-outline-danger:hover { background: rgba(252,165,165,.12) !important; } /* Renfort tableaux Bootstrap */ html[data-theme="dark"] .table thead th { background: rgba(255,255,255,.04) !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,0.03) !important; } /* ======= FIX VISIBILITÉ TABLEAUX EN DARK MODE (Bootstrap 5) ======= */ html[data-theme="dark"] .table { /* Couleur du texte (lignes normales / zébrées / hover) */ --bs-table-color: var(--text-1); --bs-table-striped-color: var(--text-1); --bs-table-hover-color: var(--text-1); /* Arrières-plans des lignes */ --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-hover-bg: rgba(255,255,255,0.06); /* Bordures plus visibles */ --bs-border-color: var(--border); color: var(--text-1) !important; } html[data-theme="dark"] .table thead th { color: var(--text-1) !important; background: rgba(255,255,255,0.05) !important; border-bottom-color: var(--border) !important; } html[data-theme="dark"] .table > :not(caption) > * > * { /* Neutralise tout éventuel "muted" hérité par Bootstrap */ color: var(--text-1) !important; border-color: var(--border) !important; } /* Au survol : garder le texte lisible */ html[data-theme="dark"] .table tbody tr:hover > * { color: var(--text-1) !important; } /* (Optionnel) si tu utilises .table-striped, renforce un peu le contraste */ html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,0.03) !important; color: var(--text-1) !important; } /* ====== FIX statut badge en mode CLAIR ====== */ .badge { /* forcer la couleur de texte des badges par défaut */ color: var(--text) !important; /* neutraliser les variables Bootstrap pour éviter le texte blanc */ --bs-badge-color: var(--text); --bs-badge-bg: var(--panel-2); } /* On garde nos variantes colorées (si utilisées) */ .badge.success { color: var(--success) !important; --bs-badge-color: var(--success); } .badge.warning { color: var(--warning) !important; --bs-badge-color: var(--warning); } .badge.danger { color: var(--danger) !important; --bs-badge-color: var(--danger); } .badge.info { color: var(--info) !important; --bs-badge-color: var(--info); } /* (Optionnel) style dédié pour un statut neutre */ .badge.status { background: var(--panel-2); border: 1px solid var(--border); color: var(--text) !important; --bs-badge-color: var(--text); --bs-badge-bg: var(--panel-2); } /* === BADGES LISIBLES CLAIR/SOMBRE (statut & inclusion) === */ /* Base badge : texte hérite la couleur, fond léger + bordure, jamais texte blanc imposé */ .badge { --bs-badge-bg: transparent; --bs-badge-color: currentColor; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 999px; font-weight: 700; line-height: 1; border: 1px solid var(--border); background: var(--panel-2); color: var(--text) !important; } .badge * { color: inherit !important; } /* Variante neutre dédiée aux statuts non terminaux (ex: EN_ATTENTE_*) */ .badge.status { background: var(--panel-2); border: 1px solid var(--border); color: var(--text) !important; --bs-badge-color: var(--text); } /* Variantes colorées — texte coloré + fond subtil teinté + bordure teintée */ .badge.success { color: var(--success) !important; border-color: color-mix(in oklab, var(--success) 40%, transparent); background: color-mix(in oklab, var(--success) 12%, transparent); } .badge.warning { color: var(--warning) !important; border-color: color-mix(in oklab, var(--warning) 40%, transparent); background: color-mix(in oklab, var(--warning) 12%, transparent); } .badge.danger { color: var(--danger) !important; border-color: color-mix(in oklab, var(--danger) 40%, transparent); background: color-mix(in oklab, var(--danger) 12%, transparent); } .badge.info { color: var(--info) !important; border-color: color-mix(in oklab, var(--info) 40%, transparent); background: color-mix(in oklab, var(--info) 12%, transparent); } /* Renforts en DARK pour augmenter un peu le fond (meilleur contraste sur arrière-plan sombre) */ html[data-theme="dark"] .badge.success { background: color-mix(in oklab, var(--success) 20%, transparent); } html[data-theme="dark"] .badge.warning { background: color-mix(in oklab, var(--warning) 20%, transparent); } html[data-theme="dark"] .badge.danger { background: color-mix(in oklab, var(--danger) 20%, transparent); } html[data-theme="dark"] .badge.info { background: color-mix(in oklab, var(--info) 20%, transparent); } /* Dans les tables Bootstrap, neutraliser les surcouches de couleur */ .table .badge { --bs-badge-color: currentColor; color: inherit !important; } /* (Déjà ajouté plus haut, mais on renforce) – texte cellules visible en dark */ html[data-theme="dark"] .table { --bs-table-color: var(--text-1); --bs-table-striped-color: var(--text-1); --bs-table-hover-color: var(--text-1); --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,0.03); --bs-table-hover-bg: rgba(255,255,255,0.06); --bs-border-color: var(--border); } html[data-theme="dark"] .table > :not(caption) > * > * { color: var(--text-1) !important; border-color: var(--border) !important; } /* ===== VISIBILITÉ MAX POUR BADGES DANS LES TABLES ===== */ /* Base */ .table .badge { --bs-badge-color: currentColor; display: inline-flex; align-items: center; padding: .32rem .65rem; border-radius: 999px; font-weight: 700; line-height: 1; border: 1px solid var(--border); } /* --- Mode sombre : texte clair, fond/bordure contrastés --- */ html[data-theme="dark"] .table .badge { color: var(--text-1) !important; background: rgba(255,255,255,.10) !important; border-color: var(--border) !important; } /* statut neutre (EN_ATTENTE_*) */ html[data-theme="dark"] .table .badge.status { color: var(--text-1) !important; background: rgba(255,255,255,.14) !important; border-color: var(--border) !important; } /* variantes colorées */ html[data-theme="dark"] .table .badge.success { color: #10e17a !important; /* plus vif que var(--success) */ background: rgba(16,185,129,.18) !important; border-color: rgba(16,185,129,.45) !important; } html[data-theme="dark"] .table .badge.warning { color: #ffcf5b !important; background: rgba(251,191,36,.18) !important; border-color: rgba(251,191,36,.45) !important; } html[data-theme="dark"] .table .badge.danger { color: #ff8a8a !important; background: rgba(239,68,68,.18) !important; border-color: rgba(239,68,68,.45) !important; } /* --- Mode clair : texte sombre, fond léger --- */ html:not([data-theme="dark"]) .table .badge { color: var(--text) !important; background: var(--panel-2) !important; border-color: var(--border) !important; } html:not([data-theme="dark"]) .table .badge.success { color: var(--success) !important; background: color-mix(in oklab, var(--success) 12%, #fff) !important; border-color: color-mix(in oklab, var(--success) 35%, transparent) !important; } html:not([data-theme="dark"]) .table .badge.warning { color: var(--warning) !important; background: color-mix(in oklab, var(--warning) 12%, #fff) !important; border-color: color-mix(in oklab, var(--warning) 35%, transparent) !important; } html:not([data-theme="dark"]) .table .badge.danger { color: var(--danger) !important; background: color-mix(in oklab, var(--danger) 12%, #fff) !important; border-color: color-mix(in oklab, var(--danger) 35%, transparent) !important; } /* Renfort : que rien ne réimpose du blanc par variable Bootstrap */ .table .badge { --bs-badge-color: currentColor !important; } /* ——— Badges "status" : base lisible en clair & sombre ——— */ .badge.status{ background: var(--panel-2); color: var(--text); border: 1px solid var(--border); font-weight: 700; } /* Variante "neutre" (par défaut : Jours : -, Inclusion : -) */ .badge.status.neutral{ background: color-mix(in oklab, var(--panel-2) 85%, transparent); border-color: color-mix(in oklab, var(--border) 75%, transparent); color: var(--text); } /* Variantes colorées */ .badge.status.success{ background: rgba(22, 163, 74, .14); /* #16a34a */ border-color: rgba(22, 163, 74, .45); color: #16a34a; } .badge.status.warning{ background: rgba(217, 119, 6, .16); /* #d97706 */ border-color: rgba(217, 119, 6, .45); color: #d97706; } .badge.status.danger{ background: rgba(239, 68, 68, .16); /* #ef4444 */ border-color: rgba(239, 68, 68, .45); color: #ef4444; } /* Assure un contraste renforcé en mode sombre */ html[data-theme="dark"] .badge.status{ background: #0f172a; /* fond sombre neutre */ border-color: #334155; color: var(--text-1); } html[data-theme="dark"] .badge.status.success{ background: rgba(34, 197, 94, .18); /* #22c55e */ border-color: rgba(34, 197, 94, .55); color: #22c55e; } html[data-theme="dark"] .badge.status.warning{ background: rgba(245, 158, 11, .2); /* #f59e0b */ border-color: rgba(245, 158, 11, .55); color: #f59e0b; } html[data-theme="dark"] .badge.status.danger{ background: rgba(239, 68, 68, .22); /* #ef4444 */ border-color: rgba(239, 68, 68, .6); color: #ef4444; }