/* ============================================================================= MODE SOMBRE — palette + bouton de bascule ----------------------------------------------------------------------------- Ce fichier est chargé APRÈS admin-design.css et client-design.css (dans layout.blade.php et frontlayout.blade.php), afin que ses règles l'emportent. Le thème sombre s'active en posant l'attribut data-theme="dark" sur (voir theme-toggle.js). Aucune classe ni variable existante n'est supprimée : tout composant qui utilise déjà les variables (--bg-card, --text-main, etc.) s'adapte automatiquement dès que ces variables changent de valeur ci-dessous. Seuls les composants qui utilisaient une couleur écrite en dur reçoivent une règle de correction explicite, listée par fichier d'origine. ============================================================================= */ /* ---------- Bouton clair / sombre (présent sur toutes les topbars) ---------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; padding: 0; border-radius: 9999px; border: 1px solid var(--border-color); background: var(--bg-body); color: var(--text-main); cursor: pointer; transition: all 0.2s ease; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .theme-toggle-icon--sun { display: none; } [data-theme="dark"] .theme-toggle-icon--sun { display: block; } [data-theme="dark"] .theme-toggle-icon--moon { display: none; } /* ---------- Bascule "Mode sombre" intégrée au sidebar client (dashfront.blade.php) ---------- Réutilise .admin-menu-item pour l'alignement icône/texte, et .theme-toggle-btn pour se brancher automatiquement sur theme-toggle.js (qui cible tous les .theme-toggle-btn de la page, topbar comme sidebar, et les garde synchronisés). Seul ajout : un petit switch visuel à droite plutôt qu'un simple lien, pour bien montrer l'état actif/inactif. */ .admin-menu-item.client-sidebar-theme-toggle { display: flex; justify-content: flex-start; width: 100%; height: auto; min-width: 0; background: none; border: none; border-left: 3px solid transparent; border-radius: 0; margin: 0; padding: 12px 24px; text-align: left; color: var(--text-sidebar); font-family: inherit; font-size: inherit; font-weight: 500; line-height: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; } .admin-menu-item.client-sidebar-theme-toggle:hover { color: var(--text-sidebar-hover); border-color: var(--accent); } .client-sidebar-theme-toggle svg.theme-toggle-icon, .client-sidebar-theme-toggle .theme-toggle-icon { width: 20px; height: 20px; margin-right: 12px; flex-shrink: 0; } .client-sidebar-theme-toggle .theme-toggle-icon--sun { display: none; } [data-theme="dark"] .client-sidebar-theme-toggle .theme-toggle-icon--sun { display: block; } [data-theme="dark"] .client-sidebar-theme-toggle .theme-toggle-icon--moon { display: none; } .client-sidebar-theme-label--to-light { display: none; } [data-theme="dark"] .client-sidebar-theme-label--to-dark { display: none; } [data-theme="dark"] .client-sidebar-theme-label--to-light { display: inline; } /* ---------- Palette sombre (aucun jaune/or : bleu, indigo, émeraude, corail) ---------- */ html[data-theme="dark"] { --bg-body: #111a2e; --bg-card: #182338; --bg-sidebar: #131c30; --text-main: #e8ecf4; --text-muted: #94a3b8; --text-sidebar: #8996ab; --text-sidebar-hover: #60a5fa; --border-color: #232d42; --accent: #4f8cff; --accent-hover: #6fa2ff; --success: #34d399; --danger: #f87171; --warning: #fb923c; --info: #4f8cff; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-card: 0 10px 20px -5px rgba(0, 0, 0, 0.45), 0 4px 10px -4px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* Transition douce au moment du changement de thème */ html[data-theme] body, html[data-theme] .admin-sidebar, html[data-theme] .client-topbar, html[data-theme] .admin-card, html[data-theme] .admin-header, html[data-theme] .admin-form-control { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ---------- Correctifs : sidebar (admin ET client, markup partagé) ---------- */ /* La sidebar reste sombre comme le reste de l'interface. L'encart du logo (.admin-brand) reprend le même dégradé bleu sombre que le fond de la page d'accueil (.mk-dark-hero), pour rester cohérent avec l'ensemble. */ [data-theme="dark"] .admin-sidebar { box-shadow: 2px 0 18px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .admin-brand { background: linear-gradient(135deg, #24365c 0%, #1b2536 100%); border-bottom-color: transparent; } [data-theme="dark"] .admin-brand-mark { background: linear-gradient(135deg, var(--accent), #6366f1); } [data-theme="dark"] .admin-menu-item:hover, [data-theme="dark"] .admin-menu-item.active { background-color: rgba(79, 140, 255, 0.12); } [data-theme="dark"] .sidebar-star { background: var(--accent); } /* ---------- Correctifs : admin-design.css ---------- */ [data-theme="dark"] .admin-header-status { background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] table.admin-table th { background-color: rgba(255, 255, 255, 0.03); } [data-theme="dark"] table.admin-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); } /* Boutons secondaires "Fermer / Retour" à fond gris clair codé en dur : sans ce correctif, le texte (var(--text-main), clair en mode sombre) devient illisible sur ce fond resté clair. */ [data-theme="dark"] .admin-btn[style*="#e5e7eb"] { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-main) !important; } /* Onglets de filtre à 2 niveaux (Réserves / Taux / Historique) : leur état actif utilisait background: var(--text-main) + texte blanc fixe, ce qui devient un fond quasi blanc + texte blanc (illisible) en mode sombre. */ [data-theme="dark"] .reserve-group-tab.active, [data-theme="dark"] .rate-group-tab.active, [data-theme="dark"] .hist-group-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Lignes de tableau surlignées (en attente / épuisée / active) à fond clair codé en dur : restait clair et illisible en mode sombre. */ [data-theme="dark"] table.admin-table tbody tr.is-pending-row { background: rgba(251, 146, 60, 0.1); } [data-theme="dark"] table.admin-table tbody tr.is-pending-row:hover { background: rgba(251, 146, 60, 0.16); } [data-theme="dark"] table.admin-table tbody tr.is-depleted { background: rgba(248, 113, 113, 0.08); } [data-theme="dark"] table.admin-table tbody tr.is-depleted:hover { background: rgba(248, 113, 113, 0.14); } [data-theme="dark"] table.admin-table tbody tr.is-active-row { background: rgba(52, 211, 153, 0.08); } [data-theme="dark"] table.admin-table tbody tr.is-active-row:hover { background: rgba(52, 211, 153, 0.14); } [data-theme="dark"] .reserve-status-dot.low { background: rgba(251, 146, 60, 0.16); color: #fdba8c; } [data-theme="dark"] .reserve-status-dot.empty { background: rgba(248, 113, 113, 0.16); color: #fca5a5; } [data-theme="dark"] .ann-badge-active { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; } [data-theme="dark"] .ann-badge-hidden { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } [data-theme="dark"] .rate-pill.sell { background: rgba(251, 146, 60, 0.16); color: #fdba8c; } [data-theme="dark"] .admin-mini-card .trend-pill.flat { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); } [data-theme="dark"] .admin-badge-success { background-color: rgba(52, 211, 153, 0.15); color: #6ee7b7; } [data-theme="dark"] .admin-badge-danger { background-color: rgba(248, 113, 113, 0.15); color: #fca5a5; } [data-theme="dark"] .admin-badge-warning { background-color: rgba(251, 146, 60, 0.16); color: #fdba8c; } [data-theme="dark"] .admin-badge-info { background-color: rgba(79, 140, 255, 0.16); color: #93c0ff; } [data-theme="dark"] .admin-badge-primary { background-color: rgba(167, 139, 250, 0.16); color: #c4b5fd; } [data-theme="dark"] .admin-badge[style*="#ecfdf5"] { background: rgba(52, 211, 153, 0.15) !important; color: #6ee7b7 !important; } [data-theme="dark"] .admin-badge[style*="#e0e7ff"] { background: rgba(167, 139, 250, 0.16) !important; color: #c4b5fd !important; } [data-theme="dark"] .admin-btn-icon.danger:hover { background: rgba(248, 113, 113, 0.15); } [data-theme="dark"] .admin-btn-icon.primary:hover { background: rgba(251, 146, 60, 0.16); } [data-theme="dark"] .admin-btn-icon[style*="#e5e7eb"] { background: rgba(255, 255, 255, 0.06) !important; color: var(--text-muted) !important; } [data-theme="dark"] .admin-form-control:focus { box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.18); } [data-theme="dark"] .admin-stat-icon { background-color: rgba(79, 140, 255, 0.14); } [data-theme="dark"] .admin-stat-icon.variant-success { background-color: rgba(52, 211, 153, 0.14); } [data-theme="dark"] .admin-stat-icon.variant-info { background-color: rgba(79, 140, 255, 0.14); } [data-theme="dark"] .admin-card-icon { background-color: rgba(79, 140, 255, 0.14); } [data-theme="dark"] .admin-empty-icon { background-color: rgba(52, 211, 153, 0.12); } [data-theme="dark"] .admin-empty-icon.is-danger { background-color: rgba(248, 113, 113, 0.14); } [data-theme="dark"] .client-sidebar-close { background-color: rgba(255, 255, 255, 0.08); color: var(--text-main); border-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .client-sidebar-close:hover { background-color: rgba(255, 255, 255, 0.16); } /* Bootstrap brut encore utilisé pour les modales / DataTables */ [data-theme="dark"] .modal-content { background-color: var(--bg-card); color: var(--text-main); border-color: var(--border-color); } [data-theme="dark"] .modal-content .close { color: var(--text-main); text-shadow: none; opacity: 0.7; } [data-theme="dark"] .modal-content .close:hover { opacity: 1; } [data-theme="dark"] .modal-footer .admin-btn[style*="#e5e7eb"] { background: var(--border-color) !important; color: var(--text-main) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_info { color: var(--text-muted); } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--text-main) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--bg-body) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } /* ---------- Correctifs : client-design.css ---------- */ [data-theme="dark"] .client-hero { background: var(--bg-card); } [data-theme="dark"] .client-hero-title { color: var(--text-main); } [data-theme="dark"] .client-hero-subtitle { color: var(--text-muted); } [data-theme="dark"] .client-hero-stat { background: rgba(255, 255, 255, 0.03); border-color: var(--border-color); } [data-theme="dark"] .client-hero-stat .val { color: var(--text-main); } [data-theme="dark"] .client-hero-stat .val small { color: var(--accent-hover); } [data-theme="dark"] .client-hero-stat.accent-warning .val { color: var(--warning); } [data-theme="dark"] .client-hero-stat.accent-success .val { color: var(--success); } [data-theme="dark"] .client-hero-stat.accent-info .val { color: var(--info); } [data-theme="dark"] .client-banner.success, [data-theme="dark"] .trade-banner.success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; } [data-theme="dark"] .client-banner.error, [data-theme="dark"] .trade-banner.error { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); color: #fca5a5; } [data-theme="dark"] .client-banner.info, [data-theme="dark"] .trade-banner.info { background: rgba(79, 140, 255, 0.12); border-color: rgba(79, 140, 255, 0.3); color: #93c0ff; } [data-theme="dark"] .trade-banner.warning { background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.3); border-left-color: #fb923c; color: #fdba8c; } [data-theme="dark"] .payment-countdown-banner.is-expiring .payment-countdown-value { color: #fca5a5; } [data-theme="dark"] .client-balance-card { background: var(--bg-card); color: var(--text-main); } [data-theme="dark"] .client-balance-card .lbl, [data-theme="dark"] .client-balance-card .amount small { color: var(--text-muted); } [data-theme="dark"] .trade-marquee { background: linear-gradient(135deg, rgba(79, 140, 255, 0.14) 0%, rgba(79, 140, 255, 0.04) 100%); border-color: rgba(79, 140, 255, 0.28); } [data-theme="dark"] .trade-marquee-divider { background: rgba(79, 140, 255, 0.25); } [data-theme="dark"] .trade-marquee-link { background: rgba(255, 255, 255, 0.06); border-color: rgba(79, 140, 255, 0.35); } [data-theme="dark"] .contact-whatsapp-btn { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; } [data-theme="dark"] .contact-whatsapp-btn:hover { background: #22c55e; border-color: #22c55e; color: #fff; } [data-theme="dark"] .client-topbar-avatar, [data-theme="dark"] .settings-profile-avatar { background: linear-gradient(135deg, var(--accent), #6366f1); } [data-theme="dark"] .testi-add-btn { background: linear-gradient(135deg, #6366f1 0%, var(--accent) 55%, var(--accent-hover) 100%); } [data-theme="dark"] .testi-add-btn-icon { background: rgba(255, 255, 255, 0.14); } [data-theme="dark"] .star-rating label { color: #3a4356; } [data-theme="dark"] .testi-feed-stars .star { color: #3a4356; } [data-theme="dark"] .myexchange-toolbar { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .trade-reserve-icon img { background: var(--bg-card); border-color: var(--bg-card); }