/* ============================================================================ hub-ia · Chat — thèmes multiples (injection CSS, aucun rebuild) Sélection in-app via custom/hub-ia-theme.js (bouton 🎨 flottant, localStorage) qui pose `data-hubia-theme` sur . Défaut (sans attribut) = AZURE. Robustesse : tout est scopé `:root[data-hubia-theme="X"]` (spécificité 0,1,1) + `!important` -> gagne sur le `.dark` natif de LibreChat quel que soit le mode clair/sombre de l'app. Les thèmes forcent leur propre palette. Contrastes texte/fond visés WCAG AA. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* =========================================================================== DÉFAUT (aucun attribut) = AZURE — évite tout flash avant le JS =========================================================================== */ :root { --hub-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --hub-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace; --hub-radius: 12px; --hub-radius-lg: 18px; --hub-ease: cubic-bezier(0.32, 0.72, 0, 1); } /* --------------------------------------------------------------------------- AZURE — fond dégradé "mesh" bleu/indigo/cyan + surfaces verre (défaut) --------------------------------------------------------------------------- */ :root, :root[data-hubia-theme="azure"], :root[data-hubia-theme="aurora"] { --brand-purple: #7c8cff !important; --surface-submit: #4257d6 !important; --surface-submit-hover: #3647bd !important; --ring-primary: #7c8cff !important; /* --presentation = fond principal du chat (=#212121 par défaut). Transparent -> le dégradé/l'image du body apparaît partout. */ --presentation: transparent !important; --surface-primary: rgba(18, 22, 40, 0.62) !important; --surface-primary-alt: rgba(22, 27, 48, 0.66) !important; --surface-primary-contrast: rgba(34, 40, 66, 0.72) !important; --surface-secondary: rgba(11, 14, 28, 0.70) !important; --surface-secondary-alt: rgba(11, 14, 28, 0.70) !important; --surface-tertiary: rgba(30, 36, 60, 0.66) !important; --surface-tertiary-alt: rgba(30, 36, 60, 0.66) !important; --surface-dialog: rgba(16, 20, 38, 0.92) !important; --surface-chat: rgba(18, 22, 40, 0.42) !important; --surface-active: rgba(124, 140, 255, 0.18) !important; --surface-active-alt: rgba(124, 140, 255, 0.18) !important; --surface-hover: rgba(124, 140, 255, 0.12) !important; --surface-hover-alt: rgba(124, 140, 255, 0.16) !important; --header-primary: rgba(14, 18, 34, 0.55) !important; --header-hover: rgba(124, 140, 255, 0.12) !important; --header-button-hover: rgba(124, 140, 255, 0.12) !important; --text-primary: #eaedf8 !important; /* ~14:1 */ --text-secondary: #bcc4e0 !important; /* ~8:1 */ --text-secondary-alt: #9aa4c8 !important; --text-tertiary: #8a93b6 !important; /* ~4.6:1 */ --border-light: rgba(255, 255, 255, 0.08) !important; --border-medium: rgba(255, 255, 255, 0.16) !important; --border-medium-alt: rgba(255, 255, 255, 0.16) !important; --border-heavy: rgba(255, 255, 255, 0.26) !important; --border-xheavy: rgba(255, 255, 255, 0.34) !important; } /* Le fond "mesh" Azure : dégradés radiaux fixes sur la racine de l'app. */ :root body, :root[data-hubia-theme="azure"] body, :root #root, :root[data-hubia-theme="azure"] #root { background-color: #0a0e1c !important; background-image: radial-gradient(at 18% 16%, rgba(64, 116, 255, 0.42), transparent 55%), radial-gradient(at 84% 10%, rgba(124, 92, 246, 0.36), transparent 55%), radial-gradient(at 76% 84%, rgba(34, 197, 235, 0.24), transparent 52%), radial-gradient(at 10% 90%, rgba(99, 102, 241, 0.32), transparent 55%) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } /* Effet verre sur composer + bulles assistant (le dégradé transparaît). */ :root[data-hubia-theme="azure"] form textarea, :root[data-hubia-theme="azure"] form .form-textarea, :root[data-hubia-theme="azure"] .assistant-item, :root[data-hubia-theme="aurora"] form textarea, :root[data-hubia-theme="aurora"] form .form-textarea, :root[data-hubia-theme="aurora"] .assistant-item, :root:not([data-hubia-theme]) form textarea, :root:not([data-hubia-theme]) .assistant-item { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } /* --------------------------------------------------------------------------- AURORA — image de fond (custom/hub-bg.jpg, montée en /assets/) + voile sombre Réutilise les surfaces-verre + accent d'Azure (ci-dessus). Fallback dégradé si l'image n'est pas montée. --------------------------------------------------------------------------- */ :root[data-hubia-theme="aurora"] body, :root[data-hubia-theme="aurora"] #root { background-color: #0a0e1c !important; background-image: linear-gradient(rgba(10, 12, 26, 0.74), rgba(8, 10, 20, 0.90)), radial-gradient(at 80% 12%, rgba(124, 92, 246, 0.20), transparent 55%), url('/assets/hub-bg.jpg') !important; background-size: cover, cover, cover !important; background-position: center, center, center !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-attachment: fixed, fixed, fixed !important; } /* --------------------------------------------------------------------------- OBSIDIAN — charbon + accent violet (sobre, AA) --------------------------------------------------------------------------- */ :root[data-hubia-theme="obsidian"] { --brand-purple: #8a5cf6 !important; --surface-submit: #7c4ef0 !important; --surface-submit-hover: #6b3ee0 !important; --ring-primary: #8a5cf6 !important; --presentation: #161616 !important; --surface-primary: #1e1e1e !important; --surface-primary-alt: #1a1a1a !important; --surface-primary-contrast: #262626 !important; --surface-secondary: #161616 !important; --surface-secondary-alt: #161616 !important; --surface-tertiary: #262626 !important; --surface-tertiary-alt: #262626 !important; --surface-dialog: #1e1e1e !important; --surface-chat: #1e1e1e !important; --surface-active: #2a2a2a !important; --surface-active-alt: #2a2a2a !important; --surface-hover: #262626 !important; --surface-hover-alt: #2f2f2f !important; --header-primary: #1e1e1e !important; --header-hover: #262626 !important; --header-button-hover: #262626 !important; --text-primary: #dcddde !important; --text-secondary: #b7b9bd !important; --text-secondary-alt: #9a9a9a !important; --text-tertiary: #8a8a8a !important; --border-light: #383838 !important; --border-medium: #6e6e6e !important; --border-medium-alt: #6e6e6e !important; --border-heavy: #828282 !important; --border-xheavy: #969696 !important; } /* Obsidian = surfaces opaques : on coupe le dégradé Azure. */ :root[data-hubia-theme="obsidian"] body, :root[data-hubia-theme="obsidian"] #root { background-color: #1e1e1e !important; background-image: none !important; } /* --------------------------------------------------------------------------- LOVABLE — tiède, gradient rose/corail (AA) --------------------------------------------------------------------------- */ :root[data-hubia-theme="lovable"] { --brand-purple: #ff5c8a !important; --surface-submit: #c41f5e !important; --surface-submit-hover: #ad1a52 !important; --ring-primary: #ff5c8a !important; --presentation: #181016 !important; --surface-primary: #1b1418 !important; --surface-primary-alt: #211820 !important; --surface-primary-contrast: #2a1f28 !important; --surface-secondary: #181016 !important; --surface-secondary-alt: #181016 !important; --surface-tertiary: #2a1f28 !important; --surface-tertiary-alt: #2a1f28 !important; --surface-dialog: #1b1418 !important; --surface-chat: #1b1418 !important; --surface-active: #311f2b !important; --surface-active-alt: #311f2b !important; --surface-hover: #271b24 !important; --surface-hover-alt: #311f2b !important; --header-primary: #1b1418 !important; --header-hover: #271b24 !important; --header-button-hover: #271b24 !important; --text-primary: #f5e9ee !important; --text-secondary: #d3bdc7 !important; --text-secondary-alt: #b39aa6 !important; --text-tertiary: #a98f99 !important; --border-light: #34232d !important; --border-medium: #4a3340 !important; --border-medium-alt: #4a3340 !important; --border-heavy: #66495a !important; --border-xheavy: #7d5a6e !important; } :root[data-hubia-theme="lovable"] body, :root[data-hubia-theme="lovable"] #root { background-color: #1b1418 !important; background-image: none !important; } /* Lovable : bouton d'envoi en dégradé assombri (texte blanc AA). */ :root[data-hubia-theme="lovable"] button[type='submit']:not(:disabled), :root[data-hubia-theme="lovable"] .btn-primary:not(:disabled) { background-image: linear-gradient(135deg, #c41f5e, #b8501e) !important; border: 0 !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } /* =========================================================================== FOND GLOBAL — LibreChat peint le fond via des classes Tailwind GRISES BRUTES (`dark:bg-gray-900` #0d0d0d, sidebar `dark:bg-gray-800` #212121) qui NE lisent PAS `--surface-*`. On les neutralise par thème, sinon le fond reste #212121. azure/aurora -> transparent (le gradient/image du body apparaît). obsidian/lovable -> couleur solide du thème. =========================================================================== */ :root[data-hubia-theme="azure"] .bg-gray-900, :root[data-hubia-theme="azure"] .dark\:bg-gray-900, :root[data-hubia-theme="azure"] .bg-gray-850, :root[data-hubia-theme="azure"] .dark\:bg-gray-850, :root[data-hubia-theme="azure"] .bg-gray-800, :root[data-hubia-theme="azure"] .dark\:bg-gray-800, :root[data-hubia-theme="aurora"] .bg-gray-900, :root[data-hubia-theme="aurora"] .dark\:bg-gray-900, :root[data-hubia-theme="aurora"] .bg-gray-850, :root[data-hubia-theme="aurora"] .dark\:bg-gray-850, :root[data-hubia-theme="aurora"] .bg-gray-800, :root[data-hubia-theme="aurora"] .dark\:bg-gray-800 { background-color: transparent !important; } :root[data-hubia-theme="obsidian"] .bg-gray-900, :root[data-hubia-theme="obsidian"] .dark\:bg-gray-900 { background-color: #1a1a1a !important; } :root[data-hubia-theme="obsidian"] .bg-gray-850, :root[data-hubia-theme="obsidian"] .dark\:bg-gray-850 { background-color: #1e1e1e !important; } :root[data-hubia-theme="obsidian"] .bg-gray-800, :root[data-hubia-theme="obsidian"] .dark\:bg-gray-800 { background-color: #161616 !important; } :root[data-hubia-theme="lovable"] .bg-gray-900, :root[data-hubia-theme="lovable"] .dark\:bg-gray-900 { background-color: #150f13 !important; } :root[data-hubia-theme="lovable"] .bg-gray-850, :root[data-hubia-theme="lovable"] .dark\:bg-gray-850 { background-color: #1b1418 !important; } :root[data-hubia-theme="lovable"] .bg-gray-800, :root[data-hubia-theme="lovable"] .dark\:bg-gray-800 { background-color: #181016 !important; } /* =========================================================================== POLISH PARTAGÉ (tous thèmes — référence les variables -> s'adapte) =========================================================================== */ body, input, textarea, button, select, .message-content, .form-input, .form-textarea { font-family: var(--hub-font-ui); } .message-content { line-height: 1.62; } .message-content pre, .message-content code, kbd, samp { font-family: var(--hub-font-mono); } .assistant-item { border-radius: var(--hub-radius-lg); } .message-content pre { border-radius: var(--hub-radius); border: 1px solid var(--border-medium); } form .form-textarea, form textarea { border-radius: var(--hub-radius-lg); transition: box-shadow .16s var(--hub-ease), border-color .16s var(--hub-ease); } form textarea:focus, form .form-textarea:focus-within { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28); } button, a, .btn, .btn-primary, .btn-secondary, .btn-neutral, .custom-btn { transition: background-color .16s var(--hub-ease), color .16s var(--hub-ease), border-color .16s var(--hub-ease), transform .16s var(--hub-ease), box-shadow .16s var(--hub-ease), filter .16s var(--hub-ease); } .btn:active, .btn-primary:active, button[type='submit']:active, .custom-btn:active { transform: scale(0.98); } button[type='submit']:disabled, .btn-primary:disabled { opacity: 0.5 !important; filter: grayscale(0.4); } :where(button, a, textarea, input, [role='button'], [tabindex]):focus-visible { outline: 2px solid var(--ring-primary) !important; outline-offset: 2px !important; } * { scrollbar-color: var(--border-heavy) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--border-heavy); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .btn:active, button[type='submit']:active { transform: none; } :root body, :root #root { background-attachment: scroll !important; } }