/* ─── Светлая тема для Intellebox ───────────────────────────────── Тёмная — дефолтная (без атрибута data-theme или data-theme="dark"). Светлая — html[data-theme="light"]. У 5 страниц (assistant, search, ocr, mktu, decisions) три разных набора имён CSS-переменных. Здесь перечислены ВСЕ имена — лишние перекрытия безвредны. Жёсткие rgba/#hex (header, hover, badges) пробиваем через !important на конкретных селекторах. */ /* ═══ 1. Полная палитра переменных ═══════════════════════════════ ВАЖНО: префикс `html` обязателен — иначе селектор имеет ту же специфичность что `:root` (0,1,0), и shell-CSS (грузится позже) побеждает в каскаде. `html[data-theme="light"]` = 0,1,1 > :root. */ html[data-theme="light"] { /* Базовые фоны */ --bg: #ffffff; --bg2: #f4f5f7; --bg3: #e8eaef; --s: #f4f5f7; --s2: #e8eaef; --surface: #f4f5f7; --surface-2: #e8eaef; --user: #eef1f7; /* фон сообщения пользователя в ассистенте */ --bot: #f8f9fb; /* фон бот-сообщения */ /* Бордеры */ --b: #d4d6dd; --brd: #d4d6dd; --border: #d4d6dd; /* Акценты */ --a: #5b4cd6; --a2: #d64c9a; --accent: #5b4cd6; --accent-2: #d64c9a; /* Золотой (для assistant/ocr/mktu/decisions) */ --gold: #8a6f2e; --gold2: #6b551f; --gold-dim: #c9a84c; --gold-glow: rgba(138,111,46,0.10); /* Текст */ --t: #1a1c25; --tx: #1a1c25; --text: #1a1c25; --m: #5a5c6a; --mu: #5a5c6a; --mid: #3a3c45; --dim: #6a6c7a; --text-dim: #6a6c7a; --text-mid: #3a3c45; /* Семантика */ --ok: #1a8a4a; --green: #1a8a4a; --err: #c0392b; --red: #c0392b; --red-dim: rgba(192,57,43,0.10); --blue: #2a6fb0; --warn: #c97a1f; /* Shell-overlay из frontend_server.py (COMMON_HEAD + _shell_html). Этот CSS инжектится в и побеждает в каскаде, поэтому переопределить ему переменные — самый надёжный путь. */ --if-shell-bg: #ffffff; --if-shell-panel: rgba(244,245,247,0.92); --if-shell-line: #d4d6dd; --if-shell-text: #1a1c25; --if-shell-muted: #5a5c6a; --if-shell-gold: #8a6f2e; --if-shell-blue: #2a6fb0; --if-shell-panel-2: #f4f5f7; --if-shell-shadow: 0 4px 14px rgba(0,0,0,0.06); } /* ═══ 1b. Перебиваем !important shell-блока с большей специфичностью ═ Shell-CSS лежит в позже чем theme.css в , поэтому при равной специфичности он побеждает. Префикс html[data-theme...] поднимает специфичность с 0,1,1 до 0,1,2 — пробивает shell. */ html[data-theme="light"], html[data-theme="light"] body { background: radial-gradient(circle at top left, rgba(42,111,176,0.06), transparent 24%), radial-gradient(circle at bottom right, rgba(138,111,46,0.05), transparent 20%), linear-gradient(180deg,#ffffff 0,#f4f5f7 100%) !important; color: var(--tx, #1a1c25) !important; } html[data-theme="light"] header { background: rgba(255,255,255,0.92) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } /* Shell-overlay: верхняя плашка nav + brand + health чипы */ html[data-theme="light"] .if-shell { background: rgba(255,255,255,0.92) !important; border-bottom-color: var(--if-shell-line) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important; } html[data-theme="light"] .if-nav a { background: rgba(244,245,247,0.92) !important; color: var(--if-shell-text) !important; border-color: var(--if-shell-line) !important; } html[data-theme="light"] .if-nav a.active { background: linear-gradient(135deg, rgba(138,111,46,0.20), rgba(42,111,176,0.16)) !important; border-color: rgba(138,111,46,0.45) !important; color: var(--if-shell-text) !important; } html[data-theme="light"] .if-chip { background: rgba(244,245,247,0.92) !important; color: var(--if-shell-muted) !important; border-color: var(--if-shell-line) !important; } html[data-theme="light"] .if-chip.ok { color: #1a8a4a !important; border-color: rgba(26,138,74,0.40) !important; } html[data-theme="light"] .if-chip.err { color: #c0392b !important; border-color: rgba(192,57,43,0.40) !important; } html[data-theme="light"] .if-brand-title { color: var(--if-shell-gold) !important; } html[data-theme="light"] .if-brand-sub { color: var(--if-shell-muted) !important; } /* Shell делает `a { color:#9cc7ff }` глобально — на белом это бледно. Возвращаем нормальную ссылку. */ html[data-theme="light"] a { color: var(--blue, #2a6fb0); } /* Shell делает .btn / .btn-go gold→blue gradient → на белом норм, но текст на нём `color:#071019` (почти чёрный) — это терпимо. */ /* Override на shell-CSS `.card, .drop-zone, textarea, select { background:var(--if-shell-panel-2) !important }`. Переменная уже переопределена выше, так что должно сработать. */ /* ═══ 2. Body / фоновые градиенты ═════════════════════════════════ */ [data-theme="light"] body { background: var(--bg, #fff) !important; background-image: none !important; color: var(--t, var(--text, var(--tx, #1a1c25))) !important; } [data-theme="light"] body::before, [data-theme="light"] body::after { opacity: 0 !important; } /* ═══ 3. Header — везде жёстко rgba(12,13,16,...) ═════════════════ */ [data-theme="light"] header { background: rgba(255,255,255,0.95) !important; border-bottom-color: var(--brd, #d4d6dd) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ═══ 4. assistant.html ═══════════════════════════════════════════ */ /* Sidebar и tools-col */ [data-theme="light"] .sidebar, [data-theme="light"] .input-area { background: var(--bg2, #f4f5f7) !important; } /* Пузыри сообщений */ [data-theme="light"] .msg.user .bubble { background: var(--user, #eef1f7) !important; color: var(--tx, #1a1c25) !important; } [data-theme="light"] .msg.bot .bubble { background: var(--bot, #f8f9fb) !important; border-color: var(--brd, #d4d6dd) !important; color: var(--tx, #1a1c25) !important; } /* Ссылки в пузыре */ [data-theme="light"] .bubble a { color: var(--gold2, #6b551f) !important; } [data-theme="light"] .bubble a:hover { color: var(--gold, #8a6f2e) !important; } /* Strong/heading акценты в пузыре */ [data-theme="light"] .bubble strong { color: var(--gold, #8a6f2e) !important; } [data-theme="light"] .bubble blockquote { border-left-color: var(--gold-dim, #c9a84c) !important; color: var(--mid, #3a3c45) !important; } [data-theme="light"] .bubble th { background: var(--bg3, #e8eaef) !important; color: var(--gold, #8a6f2e) !important; } /* Аватар пользователя — оставляем gold, но текст внутри читаемый */ [data-theme="light"] .msg.user .avatar { background: var(--gold, #8a6f2e) !important; color: #fff !important; } [data-theme="light"] .msg.bot .avatar { background: var(--bg3, #e8eaef) !important; border-color: var(--brd, #d4d6dd) !important; } /* Кнопки внизу */ [data-theme="light"] .btn-send { background: var(--gold, #8a6f2e) !important; color: #fff !important; } [data-theme="light"] .btn-attach, [data-theme="light"] .btn-app { background: var(--bg3, #e8eaef) !important; border-color: var(--brd, #d4d6dd) !important; color: var(--mid, #3a3c45) !important; } [data-theme="light"] .btn-app.active { background: rgba(138,111,46,0.10) !important; border-color: var(--gold, #8a6f2e) !important; color: var(--gold, #8a6f2e) !important; } [data-theme="light"] .btn-analyze { background: var(--gold, #8a6f2e) !important; color: #fff !important; } /* Tool calls panel */ [data-theme="light"] .tool-call { background: var(--bg3, #e8eaef) !important; border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .tool-args, [data-theme="light"] .tool-timing { color: var(--mid, #3a3c45) !important; } [data-theme="light"] .tool-result { color: var(--ok, #1a8a4a) !important; } /* App panel / TM panel */ [data-theme="light"] .app-panel, [data-theme="light"] .tm-panel { background: var(--bg3, #e8eaef) !important; border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .app-file-btn, [data-theme="light"] .app-preview, [data-theme="light"] .tm-btn, [data-theme="light"] .tm-status, [data-theme="light"] .tm-grid textarea, [data-theme="light"] .tm-grid input, [data-theme="light"] .tm-grid select { background: var(--bg2, #f4f5f7) !important; border-color: var(--brd, #d4d6dd) !important; color: var(--tx, #1a1c25) !important; } [data-theme="light"] .tm-btn:hover { border-color: var(--blue, #2a6fb0) !important; color: var(--blue, #2a6fb0) !important; /* было светло-голубое #d9e9ff */ } /* Drop overlay — золотой делаем чуть плотнее, чтобы заметить на белом */ [data-theme="light"] .drop-overlay { background: rgba(138,111,46,0.06) !important; border-color: var(--gold, #8a6f2e) !important; color: var(--gold, #8a6f2e) !important; } /* ═══ 5. search.html ══════════════════════════════════════════════ */ [data-theme="light"] .di { background: linear-gradient(135deg, rgba(91,76,214,0.10), rgba(214,76,154,0.10)) !important; } [data-theme="light"] .live-warn .lw-badge { background: #fff !important; } [data-theme="light"] .live-warn .lw-badge.lw-exact { border-color: var(--err, #c0392b) !important; background: rgba(192,57,43,0.06) !important; } [data-theme="light"] .live-warn .lw-badge.lw-ok { border-color: var(--ok, #1a8a4a) !important; background: rgba(26,138,74,0.06) !important; color: var(--ok, #1a8a4a) !important; } [data-theme="light"] .mktu-hint { background: rgba(91,76,214,0.05) !important; border-color: rgba(91,76,214,0.30) !important; } [data-theme="light"] .mktu-hint .mh-chip.mh-main { border-color: var(--ok, #1a8a4a) !important; color: var(--ok, #1a8a4a) !important; } /* Кнопки .btn-go (search) */ [data-theme="light"] .btn-go { color: #fff !important; } /* Tabs */ [data-theme="light"] .tab, [data-theme="light"] .btn-cfg { background: var(--bg2, #f4f5f7) !important; color: var(--tx, #1a1c25) !important; border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .tab.active { background: linear-gradient(135deg, #f0c97e, #d6a4cc) !important; color: #1a1c25 !important; } /* История drawer */ [data-theme="light"] .hist-drawer { background: var(--bg, #fff) !important; border-color: var(--brd, #d4d6dd) !important; box-shadow: -8px 0 32px rgba(0,0,0,0.12); } [data-theme="light"] .hist-item { background: var(--bg2, #f4f5f7) !important; border-color: var(--brd, #d4d6dd) !important; color: var(--tx, #1a1c25) !important; } /* ═══ 6. ocr.html ═════════════════════════════════════════════════ */ [data-theme="light"] .dropzone { border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .dropzone:hover, [data-theme="light"] .dropzone.over { border-color: var(--gold, #8a6f2e) !important; background: rgba(138,111,46,0.06) !important; } [data-theme="light"] .preview-clear { background: rgba(0,0,0,0.4) !important; color: #fff !important; } [data-theme="light"] .element-row, [data-theme="light"] .search-item { border-bottom-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .raw-block { background: var(--bg2, #f4f5f7) !important; border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .error-box { background: rgba(192,57,43,0.06) !important; border-color: rgba(192,57,43,0.30) !important; color: var(--err, #c0392b) !important; } [data-theme="light"] .btn { /* OCR-кнопка прозрачная — на белом её почти не видно. Делаем заливку. */ background: rgba(138,111,46,0.06) !important; border-color: var(--gold, #8a6f2e) !important; color: var(--gold, #8a6f2e) !important; } [data-theme="light"] .btn:hover:not(:disabled) { background: rgba(138,111,46,0.14) !important; } /* ═══ 7. mktu.html ════════════════════════════════════════════════ */ [data-theme="light"] .low-banner, [data-theme="light"] .error-box { background: var(--red-dim) !important; } /* ═══ 8. decisions.html ══════════════════════════════════════════ */ [data-theme="light"] .sbox, [data-theme="light"] .dec-card, [data-theme="light"] .analyze-box { background: var(--bg2, #f4f5f7) !important; border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] input[type="range"] { background: var(--bg3, #e8eaef) !important; border-color: var(--brd, #d4d6dd) !important; color: var(--tx, #1a1c25) !important; } [data-theme="light"] .tag { /* было rgba(255,255,255,.06) — невидимо на белом */ background: rgba(0,0,0,0.05) !important; color: var(--mid, #3a3c45) !important; } [data-theme="light"] .outcome-ok { background: rgba(26,138,74,0.10) !important; color: var(--ok, #1a8a4a) !important; border-color: rgba(26,138,74,0.35) !important; } [data-theme="light"] .outcome-no { background: rgba(192,57,43,0.10) !important; color: var(--err, #c0392b) !important; border-color: rgba(192,57,43,0.35) !important; } [data-theme="light"] .outcome-partial { background: rgba(42,111,176,0.10) !important; color: var(--blue, #2a6fb0) !important; border-color: rgba(42,111,176,0.35) !important; } [data-theme="light"] .outcome-unknown { background: rgba(0,0,0,0.05) !important; color: var(--mu, #5a5c6a) !important; border-color: var(--brd, #d4d6dd) !important; } [data-theme="light"] .dec-resolution { background: rgba(138,111,46,0.06) !important; border-color: rgba(138,111,46,0.25) !important; } [data-theme="light"] .draft-badge { background: rgba(138,111,46,0.10) !important; color: var(--gold, #8a6f2e) !important; border-color: rgba(138,111,46,0.30) !important; } [data-theme="light"] .src-dense { background: rgba(138,111,46,0.10) !important; color: var(--gold, #8a6f2e) !important; } [data-theme="light"] .src-bm25 { background: rgba(42,111,176,0.10) !important; color: var(--blue, #2a6fb0) !important; } [data-theme="light"] .src-hybrid { background: rgba(26,138,74,0.10) !important; color: var(--ok, #1a8a4a) !important; } [data-theme="light"] .btn { background: var(--gold, #8a6f2e) !important; color: #fff !important; } /* ═══ 9. Карточки общие ═══════════════════════════════════════════ */ [data-theme="light"] .card, [data-theme="light"] .name-row, [data-theme="light"] .tm-row, [data-theme="light"] .drop-zone, [data-theme="light"] .txt-inp, [data-theme="light"] .cg, [data-theme="light"] .ld, [data-theme="light"] .qp { box-shadow: 0 1px 3px rgba(0,0,0,0.06); } [data-theme="light"] .card img { background: #f8f8f8 !important; } /* ═══ 10. Скроллбар ═══════════════════════════════════════════════ */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0f3; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0cc; border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a0a0ac; } /* ═══ 11. Floating-кнопка переключения темы ═══════════════════════ */ #themeToggleBtn { position: fixed; top: 14px; right: 14px; z-index: 10000; width: 38px; height: 38px; border-radius: 50%; background: rgba(124, 106, 247, 0.15); border: 1px solid rgba(124, 106, 247, 0.4); color: var(--a, #7c6af7); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .2s; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } #themeToggleBtn:hover { transform: rotate(20deg) scale(1.08); background: rgba(124, 106, 247, 0.25); } [data-theme="light"] #themeToggleBtn { background: rgba(91, 76, 214, 0.10); border-color: rgba(91, 76, 214, 0.35); color: var(--a, #5b4cd6); }