/* ============================================================ theme-light.css — Mode clair ChatNova Activé par la classe `cn-light` sur . Stratégie : on bascule les variables de thème (app.css + ui-system.css) et on rattrape les surfaces / textes codés en dur du cœur de l'UI. ============================================================ */ html.cn-light { /* ── jeu de variables app.css ── */ --bg:#eef1f7; --bg-soft:#ffffff; --panel:#ffffff; --panel-2:#f3f6fb; --panel-3:#e9eef7; --line:rgba(20,30,55,.12); --line-soft:rgba(20,30,55,.07); --text:#1b2438; --muted:rgba(27,36,56,.66); --muted-2:#5a6a86; --shadow-1:0 4px 16px rgba(20,30,60,.10); --shadow-2:0 8px 28px rgba(20,30,60,.14); /* ── jeu de variables css/ui-system.css ── */ --cn-bg-0:#eef1f7; --cn-bg-1:#ffffff; --cn-bg-2:#ffffff; --cn-bg-3:#eef2f9; --cn-line:rgba(20,30,55,.12); --cn-line-strong:rgba(20,30,55,.18); --cn-text:#1b2438; --cn-text-soft:rgba(27,36,56,.78); --cn-text-faint:rgba(27,36,56,.60); --cn-shadow:0 8px 28px rgba(20,30,60,.14); --cn-shadow-soft:0 4px 16px rgba(20,30,60,.10); } /* ── Fond global ── */ html.cn-light, html.cn-light body { background:#eef1f7 !important; color:var(--text); } /* ── Topbar ── */ html.cn-light .topbar { background:linear-gradient(180deg,#ffffff,#f3f6fb) !important; border-bottom:1px solid rgba(20,30,55,.10) !important; } /* ── En-tête de salon ── */ html.cn-light .room-head { background:transparent !important; border-color:rgba(20,30,55,.10) !important; } html.cn-light .room-title { color:#16203a !important; } html.cn-light .modes-line { color:#5a6a86 !important; } /* ── Bulles de message (battent les !important sombres d'app.css) ── */ html.cn-light .msg { background:linear-gradient(180deg,#ffffff,#f5f8fd) !important; border-color:rgba(20,30,55,.08) !important; } html.cn-light .msg__text { color:#1b2438 !important; } html.cn-light .msg__meta { color:#5a6a86 !important; } html.cn-light .msg__nick { color:#16203a !important; } html.cn-light .msg--chat:hover { background:rgba(20,30,55,.04) !important; } /* ── Liste des membres ── */ html.cn-light .members-rail { background:linear-gradient(180deg,#ffffff,#f3f6fb) !important; border:1px solid rgba(20,30,55,.10) !important; } html.cn-light .members-rail__head h3 { color:#16203a !important; } html.cn-light .user-item:hover { background:rgba(20,30,55,.05) !important; } /* ── Composer (saisie) ── */ html.cn-light .composer { background:#ffffff !important; border-top:1px solid rgba(20,30,55,.10) !important; } html.cn-light .composer textarea, html.cn-light .composer input[type="text"] { background:#f3f6fb !important; color:#1b2438 !important; border-color:rgba(20,30,55,.14) !important; } html.cn-light .composer textarea::placeholder, html.cn-light .composer input::placeholder { color:#8593ab !important; } /* ── Barre de recherche membres ── */ html.cn-light .ui-search-bar input, html.cn-light #userSearchInput { background:#f3f6fb !important; color:#1b2438 !important; border-color:rgba(20,30,55,.14) !important; } /* ── Panneaux / overlays très "inline" (réglages, profil, carte PV, drawers) ── Rattrapage best-effort des fonds sombres et textes clairs codés en dur. (Recoins rares à affiner en 2e passe.) */ html.cn-light #drawer, html.cn-light .drawer { background:#ffffff !important; border-left:1px solid rgba(20,30,55,.10) !important; } html.cn-light [style*="rgba(6,10,24"], html.cn-light [style*="rgba(8,12,28"], html.cn-light [style*="rgba(4,6,15"], html.cn-light [style*="rgba(4,8,22"], html.cn-light [style*="background:#0b1220"], html.cn-light [style*="background:#0a1024"], html.cn-light [style*="background:#060914"], html.cn-light [style*="background:#080c1e"], html.cn-light [style*="#0d1628"] { background:#ffffff !important; border-color:rgba(20,30,55,.12) !important; } /* Textes clairs codés en dur → sombres (on évite color:#fff, souvent sur boutons accent) */ html.cn-light [style*="color:#e8eefc"], html.cn-light [style*="color:#e8edf5"], html.cn-light [style*="color:#dce6f8"], html.cn-light [style*="color:#eef3ff"] { color:#1b2438 !important; } html.cn-light [style*="color:#7a8fbc"], html.cn-light [style*="color:#8fa0bc"], html.cn-light [style*="color:#9fb1d1"], html.cn-light [style*="color:#6a7faa"], html.cn-light [style*="color:#7e8ea6"] { color:#5a6a86 !important; } /* ── Bascule de thème dans Réglages ── */ .cn-theme-row { display:flex; gap:8px; } .cn-theme-opt { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; border-radius:12px; cursor:pointer; font-weight:700; font-size:13px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#cfd8ea; transition:background .15s, border-color .15s, color .15s; } .cn-theme-opt[aria-pressed="true"] { border-color:#4f8ef7; background:rgba(79,142,247,.15); color:#9cc2ff; } html.cn-light .cn-theme-opt { border-color:rgba(20,30,55,.14); background:rgba(20,30,55,.04); color:#41506e; } html.cn-light .cn-theme-opt[aria-pressed="true"] { border-color:#2d6fd4; background:rgba(45,111,212,.12); color:#1d4ea0; } /* ── Pseudos lisibles en mode clair (fil + member-list + join/quit/kick) ── Sinon certains pseudos clairs (#c9d7f2, #a8edcc…) sont blanc-sur-blanc. On garde la distinction H/F avec des teintes assombries. */ html.cn-light .msg__nick.nick--male, html.cn-light .user-name--male, html.cn-light .ui-nick.user-name--male { color:#1d63c7 !important; } html.cn-light .msg__nick.nick--female, html.cn-light .user-name--female, html.cn-light .ui-nick.user-name--female { color:#c2316e !important; } html.cn-light .user-name--unknown, html.cn-light .ui-nick.user-name--unknown{ color:#2a3550 !important; } html.cn-light .msg__nick.nick--me { color:#0f7a55 !important; } html.cn-light .ui-nick--owner { color:#6d28d9 !important; text-shadow:none !important; } html.cn-light .ui-nick--op { color:#1d4ed8 !important; text-shadow:none !important; } html.cn-light .ui-nick--halfop { color:#946200 !important; text-shadow:none !important; } html.cn-light .ui-nick--voice { color:#0f7a55 !important; text-shadow:none !important; } html.cn-light .msg__nick--admin { color:#c2410c !important; text-shadow:none !important; } html.cn-light .msg__nick--bot { color:#3a5bd0 !important; } html.cn-light .msg__nick.nick--op { color:#1d4ed8 !important; } html.cn-light .msg__nick.nick--owner { color:#6d28d9 !important; } /* Effets de pseudo : garder l'effet visible sur fond clair */ html.cn-light .cnfx-flame, html.cn-light .cnfx-matrix, html.cn-light .cnfx-rainbow, html.cn-light .cnfx-scan { color:transparent !important; -webkit-text-fill-color:transparent !important; } html.cn-light .cnfx-glow { color:#b06a00 !important; -webkit-text-fill-color:#b06a00 !important; } html.cn-light .cnfx-neon { color:#0784a3 !important; -webkit-text-fill-color:#0784a3 !important; }