/* ======================================================================= REMISCORE — THEME SOMBRE VIOLET (VIVID) Objectif : visuellement très différent du dark par défaut. Activation : ======================================================================= */ /* ----------------------------- Variables principales ----------------------------- */ [data-theme="dark-violet-vivid"] { /* Neutres teintés violet */ --bg-0: #0c0814; --bg-1: #0f0b17; --bg-2: #120a1f; --surface-1: #1a1130; --surface-2: #140d24; --surface-3: #1f1440; /* Texte */ --text-strong: #efe6ff; --text: #e9d5ff; --text-muted: #c9b6ff; --text-dim: #a596d8; /* Accents violets (palette) */ --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-800: #5b21b6; /* Bootstrap-like tokens */ --bs-body-bg: var(--bg-1) !important; --bs-body-color: var(--text) !important; --bs-primary: var(--violet-400); --bs-secondary: var(--violet-600); --bs-success: #22c55e; --bs-danger: #f43f5e; --bs-warning: #eab308; --bs-info: var(--violet-400); --bs-light: var(--surface-2); --bs-dark: var(--bg-0); /* ÉLIMINATION COMPLÈTE DES FONDS BLANCS BOOTSTRAP */ --bs-bg-opacity: 0 !important; --bs-white: var(--bg-1) !important; --bs-gray-100: var(--bg-1) !important; --bs-gray-200: var(--bg-1) !important; --bs-gray-300: var(--surface-1) !important; --bs-light: var(--surface-2) !important; --bs-light-rgb: 15, 11, 23 !important; } /* ======================================== FORCE BRUTE ANTI-FOND-BLANC ======================================== */ /* Éliminer absolument TOUS les fonds blancs possibles */ [data-theme="dark-violet-vivid"] { background-color: var(--bg-1) !important; } /* Forcer tous les éléments SAUF html et body à être transparents */ [data-theme="dark-violet-vivid"] *:not(html):not(body) { background-color: transparent !important; } /* Restauration sélective des backgrounds nécessaires */ [data-theme="dark-violet-vivid"] .card, [data-theme="dark-violet-vivid"] .podium-card, [data-theme="dark-violet-vivid"] .ranking-item, [data-theme="dark-violet-vivid"] .form-control, [data-theme="dark-violet-vivid"] .form-select, [data-theme="dark-violet-vivid"] .btn, [data-theme="dark-violet-vivid"] .navbar, [data-theme="dark-violet-vivid"] .toast, [data-theme="dark-violet-vivid"] .modal-content, [data-theme="dark-violet-vivid"] .dropdown-menu, [data-theme="dark-violet-vivid"] .alert { background-color: revert !important; } /* Élimination des backgrounds Bootstrap par défaut */ [data-theme="dark-violet-vivid"] .bg-white, [data-theme="dark-violet-vivid"] .bg-light, [data-theme="dark-violet-vivid"] .bg-body, [data-theme="dark-violet-vivid"] .bg-body-secondary, [data-theme="dark-violet-vivid"] .bg-body-tertiary { background-color: transparent !important; } /* ÉLIMINATION COMPLÈTE DES CONTENEURS BLANCS */ [data-theme="dark-violet-vivid"] .container, [data-theme="dark-violet-vivid"] .container-fluid, [data-theme="dark-violet-vivid"] .container-sm, [data-theme="dark-violet-vivid"] .container-md, [data-theme="dark-violet-vivid"] .container-lg, [data-theme="dark-violet-vivid"] .container-xl, [data-theme="dark-violet-vivid"] .container-xxl, [data-theme="dark-violet-vivid"] .row, [data-theme="dark-violet-vivid"] [class*="col-"], [data-theme="dark-violet-vivid"] .col, [data-theme="dark-violet-vivid"] main, [data-theme="dark-violet-vivid"] section, [data-theme="dark-violet-vivid"] article, [data-theme="dark-violet-vivid"] aside, [data-theme="dark-violet-vivid"] header, [data-theme="dark-violet-vivid"] div:not(.card):not(.podium-card):not(.ranking-item):not(.form-control):not(.btn):not(.navbar):not(.toast):not(.modal):not(.dropdown-menu):not(.alert) { background-color: transparent !important; background: none !important; } /* Classes Bootstrap flexbox et layout */ [data-theme="dark-violet-vivid"] .d-flex, [data-theme="dark-violet-vivid"] .flex-column, [data-theme="dark-violet-vivid"] .min-vh-100, [data-theme="dark-violet-vivid"] .justify-content-center, [data-theme="dark-violet-vivid"] .align-items-center { background-color: transparent !important; } /* Règles spécifiques pour les classes Bootstrap communes */ [data-theme="dark-violet-vivid"] .mt-1, [data-theme="dark-violet-vivid"] .mt-2, [data-theme="dark-violet-vivid"] .mt-3, [data-theme="dark-violet-vivid"] .mt-4, [data-theme="dark-violet-vivid"] .mt-5, [data-theme="dark-violet-vivid"] .mb-1, [data-theme="dark-violet-vivid"] .mb-2, [data-theme="dark-violet-vivid"] .mb-3, [data-theme="dark-violet-vivid"] .mb-4, [data-theme="dark-violet-vivid"] .mb-5, [data-theme="dark-violet-vivid"] .pt-1, [data-theme="dark-violet-vivid"] .pt-2, [data-theme="dark-violet-vivid"] .pt-3, [data-theme="dark-violet-vivid"] .pt-4, [data-theme="dark-violet-vivid"] .pt-5, [data-theme="dark-violet-vivid"] .pb-1, [data-theme="dark-violet-vivid"] .pb-2, [data-theme="dark-violet-vivid"] .pb-3, [data-theme="dark-violet-vivid"] .pb-4, [data-theme="dark-violet-vivid"] .pb-5, [data-theme="dark-violet-vivid"] .px-1, [data-theme="dark-violet-vivid"] .px-2, [data-theme="dark-violet-vivid"] .px-3, [data-theme="dark-violet-vivid"] .px-4, [data-theme="dark-violet-vivid"] .px-5, [data-theme="dark-violet-vivid"] .py-1, [data-theme="dark-violet-vivid"] .py-2, [data-theme="dark-violet-vivid"] .py-3, [data-theme="dark-violet-vivid"] .py-4, [data-theme="dark-violet-vivid"] .py-5 { background-color: transparent !important; } /* ----------------------------- Fond global ----------------------------- */ html[data-theme="dark-violet-vivid"], html[data-theme="dark-violet-vivid"] body { background: radial-gradient(1000px 600px at 80% -10%, rgba(167,139,250,.18), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(124,58,237,.16), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-2)); color: var(--text); } /* ----------------------------- Sélection & focus ----------------------------- */ [data-theme="dark-violet-vivid"] ::selection { background: rgba(167,139,250,.25); color: var(--text-strong); } [data-theme="dark-violet-vivid"] :focus-visible { outline: 2px solid rgba(167,139,250,.6); outline-offset: 2px; } /* ----------------------------- Typo ----------------------------- */ [data-theme="dark-violet-vivid"] h1, [data-theme="dark-violet-vivid"] h2, [data-theme="dark-violet-vivid"] h3, [data-theme="dark-violet-vivid"] .h1, [data-theme="dark-violet-vivid"] .h2, [data-theme="dark-violet-vivid"] .h3 { color: var(--text-strong); } [data-theme="dark-violet-vivid"] .text-muted { color: var(--text-dim) !important; } /* ----------------------------- Cartes & surfaces principales ----------------------------- */ [data-theme="dark-violet-vivid"] .card, [data-theme="dark-violet-vivid"] .toast, [data-theme="dark-violet-vivid"] .modal-content, [data-theme="dark-violet-vivid"] .dropdown-menu, [data-theme="dark-violet-vivid"] .offcanvas, [data-theme="dark-violet-vivid"] .navbar { background: radial-gradient(120% 80% at 0% 0%, rgba(167,139,250,.10), transparent 50%), linear-gradient(180deg, var(--surface-1), var(--surface-2)) !important; color: var(--text); border: 1px solid rgba(167,139,250,.16) !important; box-shadow: 0 6px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03); } [data-theme="dark-violet-vivid"] .card:hover { box-shadow: 0 12px 42px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.25) inset; transform: translateY(-2px); } /* ----------------------------- Boutons ----------------------------- */ [data-theme="dark-violet-vivid"] .btn-primary { background: linear-gradient(180deg, var(--violet-400), var(--violet-600)) !important; border-color: var(--violet-600) !important; color: #0f0b17 !important; box-shadow: 0 10px 22px rgba(124,58,237,.35); } [data-theme="dark-violet-vivid"] .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 28px rgba(124,58,237,.45); } [data-theme="dark-violet-vivid"] .btn-outline-primary { color: var(--violet-300) !important; border-color: var(--violet-400) !important; } [data-theme="dark-violet-vivid"] .btn-outline-primary:hover { background-color: rgba(167,139,250,.12) !important; color: var(--violet-200) !important; } [data-theme="dark-violet-vivid"] .btn, [data-theme="dark-violet-vivid"] .btn:focus { box-shadow: none; } /* ----------------------------- Liens ----------------------------- */ [data-theme="dark-violet-vivid"] a, [data-theme="dark-violet-vivid"] .link-primary { color: var(--violet-300); } [data-theme="dark-violet-vivid"] a:hover { color: var(--violet-200); } /* ----------------------------- Formulaires ----------------------------- */ [data-theme="dark-violet-vivid"] .form-control, [data-theme="dark-violet-vivid"] .form-select, [data-theme="dark-violet-vivid"] .input-group-text { background: linear-gradient(180deg, #17112e, #110c21) !important; color: var(--text); border: 1px solid rgba(167,139,250,.18) !important; } [data-theme="dark-violet-vivid"] .form-control:focus, [data-theme="dark-violet-vivid"] .form-select:focus { border-color: var(--violet-400) !important; box-shadow: 0 0 0 .20rem rgba(167,139,250,.28) !important; } [data-theme="dark-violet-vivid"] .form-control::placeholder { color: var(--text-dim); } /* ----------------------------- Tables ----------------------------- */ [data-theme="dark-violet-vivid"] table { color: var(--text); border-color: rgba(167,139,250,.15); } [data-theme="dark-violet-vivid"] thead th { background: linear-gradient(180deg, #1e153b, #1a1232); color: var(--text-strong); border-bottom: 1px solid rgba(167,139,250,.24); } [data-theme="dark-violet-vivid"] tbody tr { background: linear-gradient(180deg, #130c24, #10091c); } [data-theme="dark-violet-vivid"] tbody tr:nth-child(odd) { background: linear-gradient(180deg, #150e29, #110a20); } [data-theme="dark-violet-vivid"] tbody tr:hover { background: linear-gradient(180deg, #1a1232, #140d24); } /* ----------------------------- Badges & pill ----------------------------- */ [data-theme="dark-violet-vivid"] .badge.bg-primary, [data-theme="dark-violet-vivid"] .badge.text-bg-primary { background: linear-gradient(180deg, var(--violet-500), var(--violet-700)) !important; color: #f5f3ff !important; border: 1px solid rgba(255,255,255,.06); } /* ----------------------------- Podium — CARTES EN FOND PLEIN ----------------------------- */ [data-theme="dark-violet-vivid"] .podium .podium-card { background: radial-gradient(120% 80% at 10% -10%, rgba(167,139,250,.10), transparent 50%), linear-gradient(180deg, #1c1436, #140f29) !important; border: 1px solid rgba(167,139,250,.20) !important; box-shadow: 0 10px 30px rgba(0,0,0,.55); } [data-theme="dark-violet-vivid"] .podium .position-1 .podium-card { background: radial-gradient(120% 80% at 80% 0%, rgba(255,205,92,.22) 0%, rgba(255,205,92,0) 60%), radial-gradient(120% 80% at 0% 100%, rgba(167,139,250,.15), transparent 60%), linear-gradient(180deg, #2f2448, #1b162d) !important; border: 1px solid rgba(255,205,92,.35) !important; box-shadow: 0 18px 48px rgba(255,205,92,.15), 0 10px 30px rgba(0,0,0,.6); } [data-theme="dark-violet-vivid"] .position-1 .podium-card .podium-rank { color: #ffcd5c !important; } [data-theme="dark-violet-vivid"] .podium .position-2 .podium-card { background: radial-gradient(120% 80% at 80% 0%, rgba(207,214,227,.20) 0%, rgba(207,214,227,0) 60%), linear-gradient(180deg, #262944, #191b2a) !important; border: 1px solid rgba(207,214,227,.30) !important; box-shadow: 0 16px 44px rgba(207,214,227,.12), 0 10px 30px rgba(0,0,0,.6); } [data-theme="dark-violet-vivid"] .position-2 .podium-card .podium-rank { color: #cfd6e3 !important; } [data-theme="dark-violet-vivid"] .podium .position-3 .podium-card { background: radial-gradient(120% 80% at 80% 0%, rgba(213,154,106,.20) 0%, rgba(213,154,106,0) 60%), linear-gradient(180deg, #2b2019, #1b1612) !important; border: 1px solid rgba(213,154,106,.28) !important; box-shadow: 0 16px 44px rgba(213,154,106,.12), 0 10px 30px rgba(0,0,0,.6); } [data-theme="dark-violet-vivid"] .position-3 .podium-card .podium-rank { color: #d59a6a !important; } /* Halo sous les cartes podium pour donner un look différent */ [data-theme="dark-violet-vivid"] .podium .position-1 .podium-card::after, [data-theme="dark-violet-vivid"] .podium .position-2 .podium-card::after, [data-theme="dark-violet-vivid"] .podium .position-3 .podium-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 18px; border-radius: 14px; filter: blur(8px); background: radial-gradient(60% 80% at 50% 50%, rgba(167,139,250,.22), transparent 70%); pointer-events: none; } /* ----------------------------- Divers ----------------------------- */ [data-theme="dark-violet-vivid"] .progress { background-color: #130c24 !important; } [data-theme="dark-violet-vivid"] .progress-bar { background: linear-gradient(90deg, var(--violet-400), var(--violet-600)) !important; } [data-theme="dark-violet-vivid"] .list-group-item { background: linear-gradient(180deg, #130c24, #10091c) !important; color: var(--text); border-color: rgba(167,139,250,.16) !important; } [data-theme="dark-violet-vivid"] .toast .btn-close, [data-theme="dark-violet-vivid"] .modal .btn-close { filter: invert(1) hue-rotate(250deg); opacity: .7; } /* ======================================== RÈGLE FINALE - PRIORITÉ ABSOLUE ======================================== */ /* Forcer spécifiquement les éléments de layout à être transparents */ [data-theme="dark-violet-vivid"] div, [data-theme="dark-violet-vivid"] section, [data-theme="dark-violet-vivid"] article, [data-theme="dark-violet-vivid"] aside, [data-theme="dark-violet-vivid"] header, [data-theme="dark-violet-vivid"] main, [data-theme="dark-violet-vivid"] nav { background-color: transparent !important; } /* Forcer le fond sombre sur html et body avec priorité maximale */ [data-theme="dark-violet-vivid"] html { background-color: var(--bg-0) !important; background: var(--bg-0) !important; } [data-theme="dark-violet-vivid"] body { background: radial-gradient(1000px 600px at 80% -10%, rgba(167,139,250,.18), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(124,58,237,.16), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important; color: var(--text) !important; } /* Forcer le body avec ses classes Bootstrap spécifiques - PRIORITÉ MAXIMALE */ html[data-theme="dark-violet-vivid"] body, html[data-theme="dark-violet-vivid"] body.d-flex, html[data-theme="dark-violet-vivid"] body.flex-column, html[data-theme="dark-violet-vivid"] body.min-vh-100 { background: radial-gradient(1000px 600px at 80% -10%, rgba(167,139,250,.18), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(124,58,237,.16), transparent 60%), linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important; color: var(--text) !important; } /* Restaurer les backgrounds des composants nécessaires */ [data-theme="dark-violet-vivid"] .card, [data-theme="dark-violet-vivid"] .podium-card, [data-theme="dark-violet-vivid"] .ranking-item, [data-theme="dark-violet-vivid"] .form-control, [data-theme="dark-violet-vivid"] .form-select, [data-theme="dark-violet-vivid"] .btn, [data-theme="dark-violet-vivid"] .navbar, [data-theme="dark-violet-vivid"] .toast, [data-theme="dark-violet-vivid"] .modal-content, [data-theme="dark-violet-vivid"] .dropdown-menu, [data-theme="dark-violet-vivid"] .alert, [data-theme="dark-violet-vivid"] footer { background-color: revert !important; } /* Règle ULTIME pour éliminer TOUS les fonds blancs */ [data-theme="dark-violet-vivid"] *:not(.card):not(.podium-card):not(.ranking-item):not(.form-control):not(.btn):not(.podium-base):not(.podium-base-1):not(.podium-base-2):not(.podium-base-3) { background-color: transparent !important; } /* Footer spécifique pour le thème violet vivid */ [data-theme="dark-violet-vivid"] footer { margin-top: auto; background: linear-gradient(135deg, var(--surface-1) 0%, var(--bg-1) 100%) !important; color: var(--text); border-top: 1px solid rgba(167,139,250,.2); } /* Main content */ [data-theme="dark-violet-vivid"] main { flex: 1; background-color: transparent !important; } /* ======================================================================= TABLES — LISIBLE SUR FOND VIOLET (HOTFIX) ======================================================================= */ [data-theme="dark-violet-vivid"] .table, [data-theme="dark-violet-vivid"] table { color: var(--text) !important; border-color: rgba(167,139,250,.18) !important; } /* Forcer la couleur du texte pour toutes les cellules (sélecteur Bootstrap) */ [data-theme="dark-violet-vivid"] .table > :not(caption) > * > * { color: var(--text) !important; border-color: rgba(167,139,250,.18) !important; background-clip: padding-box; } /* En-têtes */ [data-theme="dark-violet-vivid"] .table thead th, [data-theme="dark-violet-vivid"] thead th { background: linear-gradient(180deg, #1e153b, #1a1232) !important; color: var(--text-strong) !important; border-bottom: 1px solid rgba(167,139,250,.24) !important; } /* Lignes principales */ [data-theme="dark-violet-vivid"] .table tbody tr > * { background: linear-gradient(180deg, #130c24, #10091c) !important; } [data-theme="dark-violet-vivid"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: linear-gradient(180deg, #150e29, #110a20) !important; } [data-theme="dark-violet-vivid"] .table-hover > tbody > tr:hover > * { background: linear-gradient(180deg, #1a1232, #140d24) !important; } /* États et utilitaires qui imposent du noir dans Bootstrap */ [data-theme="dark-violet-vivid"] .table .text-body, [data-theme="dark-violet-vivid"] .table .text-dark, [data-theme="dark-violet-vivid"] table .text-body, [data-theme="dark-violet-vivid"] table .text-dark { color: var(--text) !important; } [data-theme="dark-violet-vivid"] .table .text-muted, [data-theme="dark-violet-vivid"] table .text-muted { color: var(--text-dim) !important; } /* Liens dans les tableaux */ [data-theme="dark-violet-vivid"] .table a { color: var(--violet-300) !important; } [data-theme="dark-violet-vivid"] .table a:hover { color: var(--violet-200) !important; } /* Bordures */ [data-theme="dark-violet-vivid"] .table, [data-theme="dark-violet-vivid"] .table-bordered { border-color: rgba(167,139,250,.18) !important; } [data-theme="dark-violet-vivid"] .table > :not(caption) > * { border-color: rgba(167,139,250,.18) !important; } /* Cellules actives/selectionnées */ [data-theme="dark-violet-vivid"] .table-active > *, [data-theme="dark-violet-vivid"] .table .table-active > * { background: linear-gradient(180deg, #221742, #1a1232) !important; color: var(--text-strong) !important; } /* Petites tables */ [data-theme="dark-violet-vivid"] .table-sm > :not(caption) > * > * { padding-top: .35rem; padding-bottom: .35rem; } /* === Boutons info & variantes claires — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-info { background: linear-gradient(180deg, var(--violet-300), var(--violet-600)) !important; border-color: var(--violet-600) !important; color: #0f0b17 !important; /* texte sombre pour contraste */ box-shadow: 0 10px 22px rgba(124,58,237,.30); } [data-theme="dark-violet-vivid"] .btn-info:hover { filter: brightness(1.06); box-shadow: 0 14px 28px rgba(124,58,237,.40); } /* Outline info */ [data-theme="dark-violet-vivid"] .btn-outline-info { color: var(--violet-300) !important; border-color: var(--violet-400) !important; } [data-theme="dark-violet-vivid"] .btn-outline-info:hover { background-color: rgba(167,139,250,.12) !important; color: var(--violet-200) !important; } /* Variantes claires qui apparaissent blanches -> surfaces violettes */ [data-theme="dark-violet-vivid"] .btn-light, [data-theme="dark-violet-vivid"] .btn-white, [data-theme="dark-violet-vivid"] .btn-default { background: linear-gradient(180deg, #1e153b, #1a1232) !important; color: var(--text) !important; border-color: rgba(167,139,250,.18) !important; } [data-theme="dark-violet-vivid"] .btn-light:hover, [data-theme="dark-violet-vivid"] .btn-white:hover, [data-theme="dark-violet-vivid"] .btn-default:hover { background: linear-gradient(180deg, #241a4a, #1c1439) !important; } /* Icônes dans les boutons : héritent la couleur du texte */ [data-theme="dark-violet-vivid"] .btn i { color: currentColor !important; } /* === Boutons danger — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-danger { background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%) !important; /* rose/rouge */ border-color: #e11d48 !important; color: #fff !important; /* meilleur contraste sur fond rouge */ box-shadow: 0 10px 22px rgba(225, 29, 72, .35); } [data-theme="dark-violet-vivid"] .btn-danger:hover { filter: brightness(1.05); box-shadow: 0 14px 28px rgba(225, 29, 72, .45); } [data-theme="dark-violet-vivid"] .btn-danger:focus-visible { outline: 2px solid rgba(244, 63, 94, .6); outline-offset: 2px; } /* Outline/ghost */ [data-theme="dark-violet-vivid"] .btn-outline-danger { color: #fda4af !important; /* rose-300 */ border-color: #f43f5e !important; } [data-theme="dark-violet-vivid"] .btn-outline-danger:hover { background-color: rgba(244, 63, 94, .12) !important; color: #ffe4e6 !important; /* rose-100 */ } /* Variante "subtle" (Bootstrap ≥5.3) si utilisée */ [data-theme="dark-violet-vivid"] .btn-danger-subtle { background-color: rgba(244, 63, 94, .15) !important; color: #fecdd3 !important; border-color: rgba(244, 63, 94, .25) !important; } [data-theme="dark-violet-vivid"] .btn i { color: currentColor !important; } /* icône = texte */ /* === Boutons warning — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-warning { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important; /* amber */ border-color: #d97706 !important; color: #0b0911 !important; /* texte sombre pour un bon contraste sur l'ambre lumineux */ box-shadow: 0 10px 22px rgba(217, 119, 6, .35); } [data-theme="dark-violet-vivid"] .btn-warning:hover { filter: brightness(1.06); box-shadow: 0 14px 28px rgba(217, 119, 6, .45); } [data-theme="dark-violet-vivid"] .btn-warning:focus-visible { outline: 2px solid rgba(251, 191, 36, .6); outline-offset: 2px; } /* Outline/ghost */ [data-theme="dark-violet-vivid"] .btn-outline-warning { color: #fbbf24 !important; border-color: #f59e0b !important; } [data-theme="dark-violet-vivid"] .btn-outline-warning:hover { background-color: rgba(251, 191, 36, .12) !important; color: #fde68a !important; } /* Variante "subtle" (Bootstrap ≥5.3), si utilisée */ [data-theme="dark-violet-vivid"] .btn-warning-subtle { background-color: rgba(251, 191, 36, .16) !important; color: #fde68a !important; border-color: rgba(251, 191, 36, .28) !important; } /* Icônes = couleur du texte du bouton */ [data-theme="dark-violet-vivid"] .btn i { color: currentColor !important; } /* === Boutons success — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-success { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important; /* vert/émeraude */ border-color: #16a34a !important; color: #ffffff !important; /* contraste lisible */ box-shadow: 0 10px 22px rgba(22, 163, 74, .35); } [data-theme="dark-violet-vivid"] .btn-success:hover { filter: brightness(1.06); box-shadow: 0 14px 28px rgba(22, 163, 74, .45); } [data-theme="dark-violet-vivid"] .btn-success:focus-visible { outline: 2px solid rgba(34, 197, 94, .6); outline-offset: 2px; } /* Outline/ghost */ [data-theme="dark-violet-vivid"] .btn-outline-success { color: #86efac !important; /* vert clair */ border-color: #22c55e !important; } [data-theme="dark-violet-vivid"] .btn-outline-success:hover { background-color: rgba(34, 197, 94, .12) !important; color: #dcfce7 !important; } /* Variante "subtle" (Bootstrap ≥5.3), si utilisée */ [data-theme="dark-violet-vivid"] .btn-success-subtle { background-color: rgba(34, 197, 94, .15) !important; color: #bbf7d0 !important; border-color: rgba(34, 197, 94, .25) !important; } /* Icône = couleur du texte du bouton */ [data-theme="dark-violet-vivid"] .btn i { color: currentColor !important; } /* === Bouton secondary — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-secondary { background: linear-gradient(180deg, #211a36, #18122a) !important; border-color: rgba(167,139,250,.24) !important; color: var(--text) !important; box-shadow: 0 8px 20px rgba(0,0,0,.35); } [data-theme="dark-violet-vivid"] .btn-secondary:hover { background: linear-gradient(180deg, #271f42, #1e1736) !important; border-color: rgba(167,139,250,.32) !important; color: var(--text-strong) !important; } [data-theme="dark-violet-vivid"] .btn-secondary:focus-visible { outline: 2px solid rgba(167,139,250,.55); outline-offset: 2px; } [data-theme="dark-violet-vivid"] .btn-secondary:disabled, [data-theme="dark-violet-vivid"] .btn-secondary.disabled { opacity: .6; background: linear-gradient(180deg, #1b152e, #151027) !important; } /* Outline secondary */ [data-theme="dark-violet-vivid"] .btn-outline-secondary { color: var(--text) !important; border-color: rgba(167,139,250,.24) !important; background: transparent !important; } [data-theme="dark-violet-vivid"] .btn-outline-secondary:hover { background: rgba(167,139,250,.10) !important; border-color: rgba(167,139,250,.34) !important; color: var(--text-strong) !important; } /* Variante "subtle" (Bootstrap ≥5.3) */ [data-theme="dark-violet-vivid"] .btn-secondary-subtle { background-color: rgba(167,139,250,.12) !important; color: var(--text) !important; border-color: rgba(167,139,250,.22) !important; } /* Icônes = couleur du texte du bouton */ [data-theme="dark-violet-vivid"] .btn i { color: currentColor !important; } /* === Boutons outline danger (delete) — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-outline-danger { background: transparent !important; color: #fda4af !important; /* rouge clair lisible sur fond sombre */ border-color: #f43f5e !important; /* rouge vif pour le contour */ box-shadow: none !important; } [data-theme="dark-violet-vivid"] .btn-outline-danger:hover { background-color: rgba(244, 63, 94, .12) !important; color: #ffe4e6 !important; border-color: #fb7185 !important; /* renforce au survol */ } [data-theme="dark-violet-vivid"] .btn-outline-danger:active { background-color: rgba(244, 63, 94, .18) !important; border-color: #e11d48 !important; color: #ffe4e6 !important; } [data-theme="dark-violet-vivid"] .btn-outline-danger:focus-visible { outline: 2px solid rgba(244, 63, 94, .6); outline-offset: 2px; } /* Variante subtile (Bootstrap ≥5.3), si jamais utilisée */ [data-theme="dark-violet-vivid"] .btn-danger-subtle { background-color: rgba(244, 63, 94, .15) !important; color: #fecdd3 !important; border-color: rgba(244, 63, 94, .25) !important; } /* Icône = même couleur que le texte du bouton */ [data-theme="dark-violet-vivid"] .btn-outline-danger i { color: currentColor !important; } /* Ajustements taille petite */ [data-theme="dark-violet-vivid"] .btn-outline-danger.btn-sm { padding: .25rem .5rem; line-height: 1.25; border-width: 1px; } /* === Boutons outline warning (désactiver) — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-outline-warning { background: transparent !important; color: #fde68a !important; /* amber-200 lisible sur fond sombre */ border-color: #f59e0b !important; /* amber-500 pour le contour */ box-shadow: none !important; } [data-theme="dark-violet-vivid"] .btn-outline-warning:hover { background-color: rgba(251, 191, 36, .12) !important; /* amber-400 à ~12% */ color: #fff7cc !important; /* amber très clair */ border-color: #fbbf24 !important; /* amber-400 */ } [data-theme="dark-violet-vivid"] .btn-outline-warning:active { background-color: rgba(251, 191, 36, .18) !important; border-color: #d97706 !important; /* amber-600 */ color: #fff7cc !important; } [data-theme="dark-violet-vivid"] .btn-outline-warning:focus-visible { outline: 2px solid rgba(251, 191, 36, .6); outline-offset: 2px; } /* Icône = couleur du texte du bouton */ [data-theme="dark-violet-vivid"] .btn-outline-warning i { color: currentColor !important; } /* Ajustements taille petite */ [data-theme="dark-violet-vivid"] .btn-outline-warning.btn-sm { padding: .25rem .5rem; line-height: 1.25; border-width: 1px; } /* (Optionnel) Variante "subtle" Bootstrap ≥5.3 */ [data-theme="dark-violet-vivid"] .btn-warning-subtle { background-color: rgba(251, 191, 36, .16) !important; color: #fde68a !important; border-color: rgba(251, 191, 36, .28) !important; } /* === Boutons outline primary (rechercher) — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-outline-primary { background: transparent !important; color: var(--violet-300) !important; border-color: var(--violet-400) !important; box-shadow: none !important; } [data-theme="dark-violet-vivid"] .btn-outline-primary:hover, [data-theme="dark-violet-vivid"] .btn-outline-primary:focus { background-color: rgba(167,139,250,.12) !important; /* halo violet */ color: var(--violet-200) !important; border-color: var(--violet-300) !important; } [data-theme="dark-violet-vivid"] .btn-outline-primary:active { background-color: rgba(167,139,250,.18) !important; border-color: var(--violet-600) !important; color: var(--violet-200) !important; } [data-theme="dark-violet-vivid"] .btn-outline-primary:focus-visible { outline: 2px solid rgba(167,139,250,.6); outline-offset: 2px; } [data-theme="dark-violet-vivid"] .btn-outline-primary:disabled, [data-theme="dark-violet-vivid"] .btn-outline-primary.disabled { background: transparent !important; color: var(--text-dim) !important; border-color: rgba(167,139,250,.22) !important; opacity: .7; } /* Icône = même couleur que le texte */ [data-theme="dark-violet-vivid"] .btn-outline-primary i { color: currentColor !important; } /* Taille petite si utilisée quelque part */ [data-theme="dark-violet-vivid"] .btn-outline-primary.btn-sm { padding: .25rem .5rem; line-height: 1.25; border-width: 1px; } /* === Boutons outline success (activer) — thème dark-violet-vivid === */ [data-theme="dark-violet-vivid"] .btn-outline-success { background: transparent !important; color: #86efac !important; /* vert clair lisible */ border-color: #22c55e !important; /* émeraude (contour) */ box-shadow: none !important; } [data-theme="dark-violet-vivid"] .btn-outline-success:hover { background-color: rgba(34, 197, 94, .12) !important; color: #dcfce7 !important; border-color: #34d399 !important; } [data-theme="dark-violet-vivid"] .btn-outline-success:active { background-color: rgba(34, 197, 94, .18) !important; border-color: #16a34a !important; color: #ecfdf5 !important; } [data-theme="dark-violet-vivid"] .btn-outline-success:focus-visible { outline: 2px solid rgba(34, 197, 94, .55); outline-offset: 2px; } [data-theme="dark-violet-vivid"] .btn-outline-success:disabled, [data-theme="dark-violet-vivid"] .btn-outline-success.disabled { background: transparent !important; color: var(--text-dim) !important; border-color: rgba(34, 197, 94, .24) !important; opacity: .7; } /* Icône = couleur du texte du bouton */ [data-theme="dark-violet-vivid"] .btn-outline-success i { color: currentColor !important; } /* Ajustements taille petite */ [data-theme="dark-violet-vivid"] .btn-outline-success.btn-sm { padding: .25rem .5rem; line-height: 1.25; border-width: 1px; } /* 0) Supprime l'ancien effet (le voile qui fait gris) */ .user-agent-text.long::after { content: none !important; background: none !important; } /* 1) Conteneur texte dans la cellule */ .user-agent-text{ display: block; /* ou inline-block si besoin */ max-width: 100%; white-space: nowrap; overflow: hidden; /* cache le surplus */ padding-right: 6px; /* petit espace avant le fondu */ } /* 2) Vrai fondu sans couleur via mask (montre le fond exact de la cellule) */ .user-agent-text.long{ --ua-fade: 36px; /* ajuste 24–48px selon ton espace */ -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - var(--ua-fade)), transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - var(--ua-fade)), transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Badge aide circulaire */ [data-theme="dark-violet-vivid"] [data-bs-toggle="tooltip"] { background: linear-gradient(180deg, #2a1d55, #1d153a); color: #e9d5ff !important; /* texte du ? */ border: 2px solid rgba(167,139,250,.55) !important; border-radius: 50%; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 6px 16px rgba(124,58,237,.35); cursor: help; } [data-theme="dark-violet-vivid"] [data-bs-toggle="tooltip"]:hover { filter: brightness(1.08); } /* Couleurs du tooltip en dark violet */ [data-theme="dark-violet-vivid"] .tooltip { --bs-tooltip-bg: #1b132f; /* fond principal */ --bs-tooltip-color: #f3e8ff; /* texte */ --bs-tooltip-opacity: 1; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); border: 1px solid rgba(167,139,250,.25); backdrop-filter: saturate(120%) blur(10px); /* optionnel */ -webkit-backdrop-filter: saturate(120%) blur(10px); } /* Contenu : conserver les retours à la ligne de ton data-bs-title */ [data-theme="dark-violet-vivid"] .tooltip .tooltip-inner { max-width: 380px; white-space: pre-line; /* ← affiche \n en vraies lignes */ padding: .75rem .9rem; } /* 1) Indiquer aux navigateurs d'utiliser des contrôles "dark" natifs */ [data-theme="dark-violet-vivid"] { color-scheme: dark; /* Chrome/Edge/Safari assombrissent aussi le popup natif */ } /* 2) Le champ