/* ============================================================================ Plume.ia — Mode sombre Activé par l'attribut data-theme="dark" sur (voir header.php). Stratégie : overrides ciblés des surfaces principales + utilitaires Tailwind les plus utilisés dans les templates. Défaut = préférence système. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --dk-bg: #0f172a; /* fond de page */ --dk-surface: #1e293b; /* cartes, panneaux */ --dk-surface-2: #263449; /* surfaces secondaires (hover, inputs) */ --dk-border: #334155; --dk-text: #e2e8f0; --dk-text-muted: #94a3b8; --dk-accent: #818cf8; } /* --- Fond et texte globaux ------------------------------------------------ */ /* NB: background-image none — le thème clair pose un dégradé clair sur body */ html[data-theme="dark"] body, html[data-theme="dark"] body.bg-slate-100 { background-color: var(--dk-bg) !important; background-image: none !important; color: var(--dk-text) !important; } /* --- Utilitaires Tailwind fréquents --------------------------------------- */ html[data-theme="dark"] .bg-white { background-color: var(--dk-surface) !important; } html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: var(--dk-surface-2) !important; } html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700 { color: var(--dk-text) !important; } html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-400, html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-gray-500 { color: var(--dk-text-muted) !important; } html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-300, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300 { border-color: var(--dk-border) !important; } /* --- Cartes et tuiles ------------------------------------------------------ */ html[data-theme="dark"] .card, html[data-theme="dark"] .mockup-card, html[data-theme="dark"] .admin-tile, html[data-theme="dark"] .dashboard-quick-card, html[data-theme="dark"] .dashboard-table-card, html[data-theme="dark"] .dashboard-dictation-card { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .admin-tile:hover, html[data-theme="dark"] .dashboard-quick-card--link:hover { background: var(--dk-surface-2) !important; } html[data-theme="dark"] .admin-tile-title, html[data-theme="dark"] .dashboard-quick-card-title, html[data-theme="dark"] .dashboard-table-title, html[data-theme="dark"] .file-row-title { color: var(--dk-text) !important; } html[data-theme="dark"] .admin-tile-desc, html[data-theme="dark"] .dashboard-quick-card-subtitle, html[data-theme="dark"] .dashboard-table-subtitle, html[data-theme="dark"] .file-row-date { color: var(--dk-text-muted) !important; } /* --- Hub / panneau latéral -------------------------------------------------- */ html[data-theme="dark"] .hub-panel, html[data-theme="dark"] .hub-tile, html[data-theme="dark"] .hub-modal-card { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .hub-tile--notes, html[data-theme="dark"] .hub-tile--audio, html[data-theme="dark"] .hub-tile--dictation, html[data-theme="dark"] .hub-tile--ghost { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .hub-mini-newchat { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* Conteneurs d'icônes d'images : en clair ils ont un fond blanc + cadre (joli autour d'une icône claire). En sombre, les nouvelles images « _sombre » portent déjà leur propre fond : on retire donc le cadre pour éviter le liseré clair disgracieux autour de l'image. */ html[data-theme="dark"] .file-row-icon, html[data-theme="dark"] .hub-tile-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .hub-tab { color: var(--dk-text-muted); } html[data-theme="dark"] .hub-tab.is-active { background: var(--dk-surface-2); color: var(--dk-accent); } html[data-theme="dark"] .hub-settings-item, html[data-theme="dark"] .hub-gpt-item, html[data-theme="dark"] .hub-suggestion, html[data-theme="dark"] .conversation-item { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .hub-settings-item:hover, html[data-theme="dark"] .hub-gpt-item:hover, html[data-theme="dark"] .hub-suggestion:hover, html[data-theme="dark"] .conversation-item:hover { background: var(--dk-surface-2) !important; } html[data-theme="dark"] .conversation-link { color: var(--dk-text); } html[data-theme="dark"] .hub-modal-title { color: var(--dk-accent); } html[data-theme="dark"] .hub-empty-state, html[data-theme="dark"] .dashboard-empty-state { color: var(--dk-text-muted); } /* --- Zone de chat ----------------------------------------------------------- */ html[data-theme="dark"] .chat-shell, html[data-theme="dark"] .chat-main, html[data-theme="dark"] .chat-header, html[data-theme="dark"] .chat-thread, html[data-theme="dark"] .hub-shell { background: var(--dk-bg) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .chat-sidebar { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .chat-message--assistant .chat-bubble { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } /* La bulle utilisateur garde son dégradé indigo (déjà lisible en sombre) */ html[data-theme="dark"] .chat-message-actions button { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text-muted); } html[data-theme="dark"] .chat-message-actions button:hover { background: var(--dk-surface-2); } html[data-theme="dark"] .chat-composer { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .composer-textarea, html[data-theme="dark"] .dashboard-textarea, html[data-theme="dark"] .dashboard-dictation-textarea { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .composer-icon-button, html[data-theme="dark"] .header-icon-button, html[data-theme="dark"] .sidebar-icon-button, html[data-theme="dark"] .hub-panel-iconbtn { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-muted); } /* Bouton « Sauvegarder » désactivé : sa règle propre force un fond blanc en #id + !important, qui bat le sélecteur de classe ci-dessus — d'où ce bouton resté blanc en sombre. On surcharge à spécificité équivalente. */ html[data-theme="dark"] #save-conversation-btn:disabled, html[data-theme="dark"] #save-conversation-btn[disabled] { background-color: var(--dk-surface-2) !important; color: var(--dk-text-muted) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .controls-pill, html[data-theme="dark"] .model-chip, html[data-theme="dark"] .composer-chip, html[data-theme="dark"] .attachment-chip { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .conversation-title { color: var(--dk-text); } html[data-theme="dark"] .chat-thread-placeholder { color: var(--dk-text-muted); } /* --- Formulaires ------------------------------------------------------------ */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-select, html[data-theme="dark"] .model-compact-select, html[data-theme="dark"] .hub-search-input, html[data-theme="dark"] .dashboard-search-input { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b; } /* --- Tableaux et listes ------------------------------------------------------ */ html[data-theme="dark"] table thead tr { color: var(--dk-text-muted); } html[data-theme="dark"] .border-b { border-color: var(--dk-border) !important; } html[data-theme="dark"] .dashboard-table-content, html[data-theme="dark"] .file-row-main { border-color: var(--dk-border); } html[data-theme="dark"] .hover\:bg-slate-50:hover, html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--dk-surface-2) !important; } /* --- Menus / dropdowns / modales --------------------------------------------- */ html[data-theme="dark"] .action-dropdown, html[data-theme="dark"] .dashboard-tooltip, html[data-theme="dark"] .memory-notification-content { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-box, html[data-theme="dark"] [id$="-modal"] > div { background-color: var(--dk-surface); color: var(--dk-text); } /* --- Blocs de code : déjà sombres (highlight.js github-dark), rien à faire --- */ html[data-theme="dark"] .message-content pre { border: 1px solid var(--dk-border); } /* --- Boutons secondaires et navigation admin --------------------------------- */ html[data-theme="dark"] .btn-secondary { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; } html[data-theme="dark"] .btn-secondary:hover { background: #2f3f57 !important; } html[data-theme="dark"] .admin-tile-icon, html[data-theme="dark"] .admin-back-btn { background: rgba(99, 102, 241, 0.15) !important; color: var(--dk-accent) !important; border-color: var(--dk-border) !important; } /* --- Tableaux : en-têtes clairs par défaut ------------------------------------ */ html[data-theme="dark"] thead th { background-color: var(--dk-surface-2) !important; color: var(--dk-text-muted) !important; border-color: var(--dk-border) !important; } /* --- Page « Gestion des GPTs » (classes dédiées + dégradé plein écran) -------- */ html[data-theme="dark"] .bg-gradient-to-br.from-slate-50, html[data-theme="dark"] .bg-gradient-to-br.from-white, html[data-theme="dark"] .bg-gradient-to-b.from-slate-50, html[data-theme="dark"] .bg-gradient-to-r.from-slate-50 { background-image: none !important; background-color: var(--dk-bg) !important; } html[data-theme="dark"] .quota-card, html[data-theme="dark"] .gpt-card, html[data-theme="dark"] .gpt-card-body { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text); } html[data-theme="dark"] .gpt-card-header, html[data-theme="dark"] .gpt-card-footer { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } /* --- Utilitaires pastel Tailwind (bandeaux d'info, badges, sélecteurs) -------- Fond -50/-100 → teinte translucide sombre ; texte -600/-900 → nuance claire. Les deux vont ensemble pour préserver le contraste. */ html[data-theme="dark"] .bg-slate-200, html[data-theme="dark"] .bg-slate-300, html[data-theme="dark"] .bg-gray-200 { background-color: var(--dk-border) !important; } html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.14) !important; } html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-blue-900 { color: #93c5fd !important; } html[data-theme="dark"] .border-blue-100, html[data-theme="dark"] .border-blue-200, html[data-theme="dark"] .border-blue-300 { border-color: rgba(59, 130, 246, 0.35) !important; } html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.16) !important; } html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-indigo-700, html[data-theme="dark"] .text-indigo-800, html[data-theme="dark"] .text-indigo-900 { color: #a5b4fc !important; } html[data-theme="dark"] .border-indigo-100, html[data-theme="dark"] .border-indigo-200, html[data-theme="dark"] .border-indigo-300 { border-color: rgba(99, 102, 241, 0.35) !important; } html[data-theme="dark"] .bg-purple-50, html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.14) !important; } html[data-theme="dark"] .text-purple-600, html[data-theme="dark"] .text-purple-700, html[data-theme="dark"] .text-purple-800, html[data-theme="dark"] .text-purple-900 { color: #d8b4fe !important; } html[data-theme="dark"] .border-purple-100, html[data-theme="dark"] .border-purple-200, html[data-theme="dark"] .border-purple-300 { border-color: rgba(168, 85, 247, 0.35) !important; } html[data-theme="dark"] .bg-violet-50, html[data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.14) !important; } html[data-theme="dark"] .text-violet-600, html[data-theme="dark"] .text-violet-700, html[data-theme="dark"] .text-violet-800 { color: #c4b5fd !important; } html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.14) !important; } html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-amber-900, html[data-theme="dark"] .text-yellow-600, html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-yellow-800 { color: #fcd34d !important; } html[data-theme="dark"] .border-amber-200, html[data-theme="dark"] .border-amber-300, html[data-theme="dark"] .border-yellow-200 { border-color: rgba(245, 158, 11, 0.35) !important; } html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-green-100, html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.14) !important; } html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-800, html[data-theme="dark"] .text-green-900, html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800 { color: #86efac !important; } html[data-theme="dark"] .border-green-200, html[data-theme="dark"] .border-green-300, html[data-theme="dark"] .border-green-400, html[data-theme="dark"] .border-emerald-200 { border-color: rgba(34, 197, 94, 0.35) !important; } html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-red-100, html[data-theme="dark"] .bg-rose-50, html[data-theme="dark"] .bg-rose-100 { background-color: rgba(239, 68, 68, 0.14) !important; } html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; } html[data-theme="dark"] .border-red-200, html[data-theme="dark"] .border-red-300, html[data-theme="dark"] .border-red-400, html[data-theme="dark"] .border-red-500 { border-color: rgba(239, 68, 68, 0.45) !important; } html[data-theme="dark"] .bg-pink-50, html[data-theme="dark"] .bg-pink-100 { background-color: rgba(236, 72, 153, 0.14) !important; } html[data-theme="dark"] .text-pink-600, html[data-theme="dark"] .text-pink-700, html[data-theme="dark"] .text-pink-800 { color: #f9a8d4 !important; } html[data-theme="dark"] .bg-cyan-50, html[data-theme="dark"] .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.14) !important; } html[data-theme="dark"] .text-cyan-600, html[data-theme="dark"] .text-cyan-700, html[data-theme="dark"] .text-cyan-800 { color: #67e8f9 !important; } html[data-theme="dark"] .bg-orange-50, html[data-theme="dark"] .bg-orange-100 { background-color: rgba(249, 115, 22, 0.14) !important; } html[data-theme="dark"] .text-orange-600, html[data-theme="dark"] .text-orange-700, html[data-theme="dark"] .text-orange-800 { color: #fdba74 !important; } /* --- Variantes Tailwind à état (peer-checked, hover) -------------------------- Utilisées par les cartes de sélection de provider (transcription/embeddings). */ html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-blue-50 { background-color: rgba(59, 130, 246, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-purple-50 { background-color: rgba(168, 85, 247, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-orange-50 { background-color: rgba(249, 115, 22, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-emerald-50 { background-color: rgba(16, 185, 129, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-green-50 { background-color: rgba(34, 197, 94, 0.18) !important; } html[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-indigo-50 { background-color: rgba(99, 102, 241, 0.18) !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--dk-surface-2) !important; } /* --- Scrollbars ---------------------------------------------------------------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dk-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dk-border); border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* --- Images dédiées au thème sombre ------------------------------------------- Le thème étant déterminé côté client (data-theme sur ), on ne peut pas choisir l'image au rendu PHP. On remplace donc chaque par sa variante « _sombre » via content:url(), ciblé par le src déjà présent. Fonctionne aussi pour les images injectées dynamiquement (ex. icônes de conversation créées en JS) puisque le sélecteur est basé sur l'attribut src. Chemin relatif depuis assets/css/ vers images/ = ../../images/. */ html[data-theme="dark"] img[src$="images/icon-conversation.png"] { content: url('../../images/icon-conversation_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-editor.png"] { content: url('../../images/icon-editor_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-recorder-vocal.png"] { content: url('../../images/icon-recorder-vocal_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-analysis-notes.png"] { content: url('../../images/icon-analysis-notes_sombre.png'); } html[data-theme="dark"] img[src$="images/icon-upload-audio.png"] { content: url('../../images/icon-upload-audio_sombre.png'); } /* Variantes fournies mais non encore référencées dans le code : règles dormantes (sans effet tant que l'image de base n'est pas affichée quelque part). */ html[data-theme="dark"] img[src$="images/icon-folder.png"] { content: url('../../images/icon-folder_sombre.png'); } html[data-theme="dark"] img[src$="images/illustration-conversations.png"] { content: url('../../images/illustration-conversations_sombre.png'); } html[data-theme="dark"] img[src$="images/illustration-transcripts.png"] { content: url('../../images/illustration-transcripts_sombre.png'); } /* --- Modales : zones claires résiduelles -------------------------------------- Certaines modales gardent un fond clair via un dégradé Tailwind « from-*-50 » ou un fond propre non couvert par les règles utilitaires plus haut. */ /* En-tête de la modale Dictée vocale (dégradé clair #eef2ff → #f5f3ff) */ html[data-theme="dark"] .hub-modal-header { background: var(--dk-surface-2) !important; border-bottom-color: var(--dk-border) !important; } /* Boutons d'action de la dictée (poubelle, copier, envoyer) — fond #f8fafc. On épargne le bouton violet « enregistrer » qui a son propre dégradé. */ html[data-theme="dark"] .dashboard-action-btn:not(.dashboard-action-btn-violet) { background: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; color: var(--dk-text-muted) !important; } html[data-theme="dark"] .dashboard-action-btn:not(.dashboard-action-btn-violet):hover { background: #2f3f57 !important; color: var(--dk-text) !important; } /* Cartes d'options de la modale « Sauvegarder la dictée » */ html[data-theme="dark"] .save-option-btn { background-color: var(--dk-surface-2) !important; border-color: var(--dk-border) !important; } html[data-theme="dark"] .save-option-btn:hover { background-color: #2f3f57 !important; } /* Dégradés Tailwind clairs (from-*-50 → to-*-50) sur les cartes de modales : carte « Manuel » de Formation, carte d'intro du Guide des GPTs, etc. Les utilitaires bg/text/border pastel sont déjà gérés plus haut ; ici on neutralise spécifiquement le dégradé (background-image) que ces règles ne touchent pas. */ html[data-theme="dark"] .bg-gradient-to-r.from-blue-50, html[data-theme="dark"] .bg-gradient-to-br.from-blue-50, html[data-theme="dark"] .bg-gradient-to-r.from-indigo-50, html[data-theme="dark"] .bg-gradient-to-br.from-indigo-50, html[data-theme="dark"] .bg-gradient-to-r.from-violet-50, html[data-theme="dark"] .bg-gradient-to-br.from-violet-50, html[data-theme="dark"] .bg-gradient-to-r.from-purple-50, html[data-theme="dark"] .bg-gradient-to-br.from-purple-50 { background-image: none !important; background-color: var(--dk-surface-2) !important; }