/* ============================================================================ СоцПульс AI — themes.css Корпоративный редизайн: тёплая «бумажная» тема с оранжевым акцентом. Подключается ПОСЛЕ styles.css. Активация: или . Без атрибута — базовая тема. Источник значений: «СоцПульс AI - редизайн.dc.html» (значения точные). ========================================================================== */ /* ---------- Токены: corporate (light) ---------- */ [data-theme="corporate"] { --bg: #f3f2f0; --surface: #ffffff; --surface-2: #faf9f7; --border: #e3e1db; --border-strong: #d4d1c9; --divider: #eeece7; --text: #21242a; --text-2: #6c7077; --text-3: #9a9ea5; --text-inverse: #ffffff; --accent: #dd6b1e; --accent-600: #c2580f; --accent-soft: #fbeadc; --green: #3f8f5b; --green-soft: rgba(63, 143, 91, .14); --amber: #a87815; --amber-soft: rgba(168, 120, 21, .14); --red: #c14b4b; --red-soft: rgba(193, 75, 75, .14); /* синего в редизайне нет — бейджи методов становятся оранжевыми */ --blue: #dd6b1e; --blue-soft: #fbeadc; --shadow: 0 1px 2px rgba(20, 22, 26, .05); --shadow-lg: 0 16px 40px rgba(20, 22, 26, .12); } /* ---------- Токены: corporate-dark ---------- */ [data-theme="corporate-dark"] { --bg: #16181c; --surface: #1e2126; --surface-2: #24272d; --border: #33373e; --border-strong: #3f444c; --divider: #282c32; --text: #f3f3f1; --text-2: #a6abb2; --text-3: #71767d; --text-inverse: #16181c; --accent: #f0883e; --accent-600: #f59a57; --accent-soft: #33271c; --green: #5fbe83; --green-soft: rgba(95, 190, 131, .16); --amber: #d9a441; --amber-soft: rgba(217, 164, 65, .16); --red: #e07a7a; --red-soft: rgba(224, 122, 122, .16); --blue: #f0883e; --blue-soft: #33271c; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 18px 40px rgba(0, 0, 0, .46); } /* ============================================================================ Общие правила обеих corporate-тем (захардкоженные цвета styles.css, пересаженные на токены) ========================================================================== */ /* Сайдбар: плоский, светлый (surface), вместо тёмного #11151f */ [data-theme^="corporate"] .sidebar { background: var(--surface); color: var(--text-2); border-right: 1px solid var(--border); } /* Сайдбар в корпоративных темах светлый — ползунок прокрутки под него */ [data-theme^="corporate"] .sidebar { scrollbar-color: var(--border-strong) transparent; } [data-theme^="corporate"] .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); } [data-theme^="corporate"] .sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-3); } [data-theme^="corporate"] .brand b { color: var(--text); } [data-theme^="corporate"] .brand small { color: var(--text-3); } [data-theme^="corporate"] .nav-group { color: var(--text-3); } [data-theme^="corporate"] .nav-item { color: var(--text-2); transition: background 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1); } [data-theme^="corporate"] .nav-item:hover { background: var(--surface-2); color: var(--text); } [data-theme^="corporate"] .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Кнопки: фирменный easing + инверсный текст на primary */ [data-theme^="corporate"] .btn { transition: background 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1), transform .05s; } [data-theme^="corporate"] .btn.primary { color: var(--text-inverse); } /* Метрики-карточки: акцентная верхняя кромка */ [data-theme^="corporate"] .stat { border-top: 2px solid var(--accent); } /* RLM-бейдж: индиго-градиент -> оранжевый */ [data-theme^="corporate"] .rlm-badge { background: linear-gradient(90deg, #dd6b1e, #f0883e); color: #ffffff; } /* Разделитель — отдельный, более мягкий тон из дизайн-системы */ [data-theme^="corporate"] .divider { background: var(--divider); } [data-theme^="corporate"] .setting-row { border-bottom-color: var(--divider); } [data-theme^="corporate"] .setting-row:last-child { border-bottom: none; } /* ============================================================================ corporate (light): точечные переопределения ========================================================================== */ /* Экран входа: индиго-градиент -> тёплый персиковый */ [data-theme="corporate"] .login-wrap { background: radial-gradient(1200px 600px at 70% -10%, #fbeadc, transparent), var(--bg); } /* Тосты: захардкоженные тёмно-красный/тёмно-зелёный -> цвета редизайна */ [data-theme="corporate"] .toast { background: #21242a; } [data-theme="corporate"] .toast.ok { background: #3f8f5b; } [data-theme="corporate"] .toast.err { background: #c14b4b; } /* Danger-кнопка: розовая рамка #eccaca -> тёплый красный */ [data-theme="corporate"] .btn.danger { border-color: rgba(193, 75, 75, .35); } /* Подложка модалки — тёплый тон вместо сине-серого */ [data-theme="corporate"] .modal-backdrop { background: rgba(32, 27, 20, .42); } /* ============================================================================ corporate-dark: точечные переопределения и контрасты ========================================================================== */ /* Экран входа: тёплое тёмное свечение */ [data-theme="corporate-dark"] .login-wrap { background: radial-gradient(1200px 600px at 70% -10%, #33271c, transparent), var(--bg); } /* Тосты: базовые в styles.css рассчитаны на светлую тему (bg = var(--text)) */ [data-theme="corporate-dark"] .toast { background: #262a30; color: var(--text); border: 1px solid var(--border); } [data-theme="corporate-dark"] .toast.ok { background: #26362d; color: #5fbe83; border-color: rgba(95, 190, 131, .35); } [data-theme="corporate-dark"] .toast.err { background: #392628; color: #e07a7a; border-color: rgba(224, 122, 122, .35); } /* Инпуты: фон surface-2, чтобы читались на карточках surface */ [data-theme="corporate-dark"] .input, [data-theme="corporate-dark"] .select, [data-theme="corporate-dark"] .textarea { background: var(--surface-2); color: var(--text); } /* Danger-кнопка: рамка под тёмный фон */ [data-theme="corporate-dark"] .btn.danger { border-color: rgba(224, 122, 122, .35); } /* Подложка модалки — плотнее на тёмном */ [data-theme="corporate-dark"] .modal-backdrop { background: rgba(0, 0, 0, .6); } /* Focus-кольцо: accent-soft в dark почти сливается с фоном — делаем заметнее */ [data-theme="corporate-dark"] .input:focus, [data-theme="corporate-dark"] .select:focus, [data-theme="corporate-dark"] .textarea:focus { box-shadow: 0 0 0 3px rgba(240, 136, 62, .25); } /* Выделение текста: accent-soft (#33271c) на тёмном не видно как selection */ [data-theme="corporate-dark"] ::selection { background: rgba(240, 136, 62, .35); } /* Активная реплика транскрипта: accent-soft на тёмном почти сливается с фоном */ [data-theme="corporate-dark"] .tr-seg.active { background: rgba(240, 136, 62, .16); }