/* ============================================================================ oko-admin.css — ТЁМНАЯ перекраска ядра CRM под «Око» (профиль holding). Подключается ПОСЛЕДНИМ в UNFOLD["STYLES"] и ТОЛЬКО на инстансе holding (ветвление в config/settings.py). Профили client/demo этот файл не грузят. Механика двухслойная: 1) unfold-админка: THEME="dark" рисует → unfold применяет свои dark:*-утилиты, цвета которых заданы тёмными рампами «Ока» в UNFOLD["COLORS"] (base 900=#0b0d11 фон / 800=#12151c карточки / 700=#232936 границы; primary = янтарь #f2b84b). Здесь — только доводки (сайдбар-тон, активный пункт, тёмный текст на янтарных кнопках). 2) кастом-страницы (.sage / .tsk / .docs / .home / .aifin …) сидят на :root-переменных sage-tokens.css → блок `html.dark {…}` ниже переопределяет ЭТИ переменные значениями палитры «Ока» (static/css/oko.css :root — единый источник), после чего страницы перекрашиваются сами; хардкод-хвосты добираются точечными правилами. ВСЁ скоуплено под html.dark: даже попав на светлый профиль, файл инертен (там THEME="light" и класса dark не бывает). Значения-цвета — 1-в-1 токены oko.css; собственных оттенков не изобретаем, кроме промежуточных нейтралей той же холодной рампы (hue ~220), помеченных комментарием. ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ 1. ТОКЕНЫ: sage-переменные → палитра «Ока» (html.dark сильнее :root) -------------------------------------------------------------------------- Рампа --base-* для кастом-страниц ИНВЕРТИРУЕТСЯ (в светлой теме base-900 = «почти чёрный текст заголовков», в тёмной тот же var(--base-900) должен дать СВЕТЛЫЙ текст). Это НЕ unfold-рампа --color-base-* (та задана «прямой» в UNFOLD["COLORS"] и живёт в своём неймспейсе). ════════════════════════════════════════════════════════════════════════════ */ html.dark { color-scheme: dark; /* — primary: янтарь «Ока». Семантика мест использования: 200 = мягкая рамка акцента (было светло-зелёное) → полупрозрачный янтарь; 600 = сам акцент; 700 = hover (на тёмном hover СВЕТЛЕЕ); 800 = «густой» текст акцента (было тёмно-зелёное) → светлый янтарь. — */ --primary-50: rgba(242, 184, 75, .07); --primary-100: rgba(242, 184, 75, .12); /* = iris-soft */ --primary-200: rgba(242, 184, 75, .35); /* = iris-line */ --primary-300: rgba(242, 184, 75, .5); --primary-400: #d99e2e; --primary-500: #f2b84b; /* = --iris */ --primary-600: #f2b84b; /* акцент темы */ --primary-700: #f6c667; /* hover: светлее */ --primary-800: #f6ce7d; --primary-900: #f9dfa9; --primary-950: #fbecd0; /* — base: инверсия под тёмное (50 = ховер-поверхность … 900 = яркий текст). Опорные точки — токены oko.css; промежуточные (300/500/700/800/950) — та же холодная рампа. — */ --base-50: #181c25; /* --surface-2 (ховеры строк) */ --base-100: #1e232e; /* --surface-3 */ --base-200: #232936; /* --line (border-strong) */ --base-300: #39414f; /* muted */ --base-400: #5d6879; /* --text-3 */ --base-500: #7c8598; --base-600: #9aa3b5; /* --text-2 */ --base-700: #c3cad9; --base-800: #dbe0ea; --base-900: #e9ecf2; /* --text (заголовки/KPI) */ --base-950: #f4f6fa; /* — семантические поверхности — */ --surface: #12151c; /* карточки */ --canvas: #0b0d11; /* фон страницы = --ink */ --col-bg: #181c25; /* th таблиц / колонки */ --border: #232936; /* = --line */ --border-strong: #2c3342; /* заметнее line (рамки контролов) */ --divider: #1b2029; /* = --line-soft */ --text: #e9ecf2; --text-2: #9aa3b5; --text-3: #5d6879; --muted: #39414f; --primary: #f2b84b; /* = --iris */ --primary-hover: #f6c667; --primary-soft: rgba(242, 184, 75, .12); /* = iris-soft */ --primary-softer: rgba(242, 184, 75, .07); /* — акценты: ok/risk/warn/info из oko.css (…-soft как фоны) — */ --success: #57c878; --success-bg: rgba(87, 200, 120, .13); --success-border: rgba(87, 200, 120, .28); --danger: #e4655f; --danger-bg: rgba(228, 101, 95, .13); --danger-border: rgba(228, 101, 95, .28); --warning: #e0813c; --warning-bg: rgba(224, 129, 60, .14); --warning-border: rgba(224, 129, 60, .3); --info: #5b9bd5; --info-bg: rgba(91, 155, 213, .13); --info-border: rgba(91, 155, 213, .28); /* — воронка: прогресс = от глухого янтаря к яркому — */ --st-1: #57492a; --st-2: #7a6234; --st-3: #a07d3c; --st-4: #c99a44; --st-5: #f2b84b; /* — тени: на чернильном фоне глубже и без цветного тона — */ --sh-card: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .25); --sh-lift: 0 12px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); --sh-focus: 0 0 0 3px rgba(242, 184, 75, .18); /* — спарклайны — */ --spark-line: #f2b84b; --spark-area: rgba(242, 184, 75, .14); --spark-dot: #f6c667; --spark-empty: #39414f; } html.dark ::selection { background: rgba(242, 184, 75, .12); color: #f2b84b; } /* ════════════════════════════════════════════════════════════════════════════ 2. ДОВОДКИ UNFOLD-DARK (шелл админки: сайдбар / границы / кнопки) ════════════════════════════════════════════════════════════════════════════ */ /* Сайдбар — тон --ink-2 (чуть светлее фона, как .side в oko.css); unfold даёт dark:bg-base-950/20 (полупрозрачный, почти неотличим от фона). */ html.dark #nav-sidebar-inner, html.dark #nav-sidebar-apps { background: #0e1117 !important; } html.dark #nav-sidebar { border-right: 1px solid #1b2029; } /* «Мягкие» границы unfold (утилита dark:border-base-800): рампа даёт #12151c = цвет поверхности → на карточках граница исчезает. Смещаем на --line-soft, НЕ трогая фоны base-800. */ html.dark .dark\:border-base-800 { border-color: #1b2029; } /* Активный пункт сайдбара: unfold в dark даёт bg-white/[.06]; по эталону Ока — янтарная мягкая подсветка (`.nav__item.is-active`). Текст уже primary-500. */ html.dark #nav-sidebar #nav-sidebar-apps ol li a.active { background: rgba(242, 184, 75, .12) !important; } html.dark #nav-sidebar #nav-sidebar-apps ol li a.active .material-symbols-outlined { color: #f2b84b; } /* Любая primary-заливка (кнопки unfold: BUTTON_CLASSES = bg-primary-600 + text-white; addlink; submit-row) на янтаре читается только ТЁМНЫМ текстом — как в эталоне Ока (кнопка «+ Лид»: color = --ink). */ html.dark .bg-primary-600, html.dark .bg-primary-500 { color: #0b0d11 !important; } /* Пасхалка в сайдбаре: light-правило admin-theme скоупнуто html:not(.dark) — зеркалим на тёмную тему (текст прозрачный, золотое яичко видно). */ html.dark #nav-sidebar a[href*="/easter/"] { color: transparent !important; } html.dark #nav-sidebar a[href*="/easter/"] .material-symbols-outlined { color: #d4af37 !important; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } /* ════════════════════════════════════════════════════════════════════════════ 3. SAGE-КОМПОНЕНТЫ (sage.css): добор хардкодов, не покрытых токенами -------------------------------------------------------------------------- Светлые константы sage.css (#f7f8f4 / #fafbf8 / #f1f3ee / #fff на заливках) переезжают на поверхности Ока. Селекторы повторяют sage.css + html.dark — специфичность выше, порядок загрузки не важен. ════════════════════════════════════════════════════════════════════════════ */ /* На янтарной/цветной заливке — чернильный текст (в Ока нет белого на акценте) */ html.dark .sage-btn--primary, html.dark .sage-btn--success, html.dark .sage-btn--danger, html.dark .sage-btn--warning, html.dark .sage-pager button.is-active { color: #0b0d11; } html.dark .sage-btn--ghost:hover { background: #181c25; border-color: #39414f; } html.dark .sage-icon-btn:hover { background: #181c25; } html.dark .sage-table thead th { background: #161a23; } /* между surface и surface-2 */ html.dark .sage-table tbody td { border-bottom-color: #1b2029; } html.dark .sage-table tbody tr:hover { background: #181c25; } html.dark .sage-pager button:hover { background: #181c25; border-color: #39414f; } /* ════════════════════════════════════════════════════════════════════════════ 4. КАСТОМ-СТРАНИЦЫ НАВИГАЦИИ «ОКА» — точечный добор хардкодов ════════════════════════════════════════════════════════════════════════════ */ /* — Задачи: список (.tsk-обёртка) + карточка (.tk-*) — */ html.dark .tsk .tsk-row { border-bottom-color: #1b2029; } html.dark .tsk .tsk-row:hover { background: #181c25; } html.dark .tk-prop, html.dark .tk-cmt { border-bottom-color: #1b2029; } /* — Документы: общие + корзина — */ html.dark .docs-list li { border-bottom-color: #1b2029; } html.dark .docs-upload { background: #0e1117; } /* — Домашняя (/admin/): Кокпит + Панорама — */ html.dark .home .tsk:hover, html.dark .home .dl:hover, html.dark .home .apr:hover, html.dark .home .thr:hover, html.dark .attband .atile:hover { background: #181c25; } html.dark .home .fnl { border-bottom-color: #1b2029; } html.dark .home .tsk__chk .material-symbols-outlined { color: #0b0d11; } /* — Подключение Telegram (в наве «Задач») — */ html.dark .tgconn .btn--primary { color: #0b0d11; } /* — Карточка клиента (/clients//) и карточка сделки (/deals//card/): светлые подвалы-панели (загрузка файла, резерв) + hover-кнопки — */ html.dark .cd-docupload, html.dark .dc-docupload, html.dark .dealrsv__foot, html.dark .dealrsv__issue { background: #0e1117; } html.dark .dc-cbtn:hover { background: #181c25; } /* узлы степпера стадий: белые цифры/галочки на янтаре → чернильные */ html.dark .fstep.done .node, html.dark .fstep.cur .node { color: #0b0d11; } /* — «Инверсионные ловушки»: в light эти плашки были «почти чёрными» (bg base-900 / --text) с белым текстом; при инвертированной рампе фон становится светлым, а текст остаётся белым → нечитаемо. На тёмной теме тёмная плашка = поверхность-3 Ока. — */ html.dark .dc-toast { background: #1e232e; color: #e9ecf2; } html.dark .db-toast__item { background: #1e232e; color: #e9ecf2; } /* error-варианты тостов: специфичность моих правил выше шаблонных модификаторов (.is-err/--error) — возвращаем красную плашку явно, текст чернильный (risk #e4655f — светлый, белый текст на нём слаб). */ html.dark .dc-toast.is-err { background: #e4655f; color: #0b0d11; } html.dark .db-toast__item--error { background: #e4655f; color: #0b0d11; } html.dark .salesdash .chip.on { background: rgba(242, 184, 75, .12); border-color: rgba(242, 184, 75, .35); color: #f2b84b; } /* ════════════════════════════════════════════════════════════════════════════ 5. ИИ-АНАЛИТИК (/reports/financist/, scoped .aifin) — самая «хардкодная» страница: эталонные светло-зелёные вкрапления → поверхности/янтарь Ока. ════════════════════════════════════════════════════════════════════════════ */ /* AI-строка */ html.dark .aifin .ask__icon { background: #1e232e; } html.dark .aifin .ask__input { background: #0e1117; } html.dark .aifin .ask__input:focus { box-shadow: 0 0 0 3px rgba(242, 184, 75, .18); } html.dark .aifin .ask__send { color: #0b0d11; box-shadow: none; } html.dark .aifin .filecard { background: #181c25; border-color: #232936; } html.dark .aifin .filecard__icon { background: #1e232e; } /* чипы-примеры */ html.dark .aifin .chip { background: #181c25; color: #9aa3b5; } /* тумблер описаний */ html.dark .aifin .seg { background: #181c25; } html.dark .aifin .seg button.on { background: #1e232e; color: #f2b84b; box-shadow: none; } /* витрина отчётов */ html.dark .aifin .card__icon { background: #1e232e; } html.dark .aifin .card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } /* AI-разбор (инсайт) */ html.dark .aifin .insight { background: #181c25; border-color: #232936; } html.dark .aifin .insight__icon { background: #1e232e; } html.dark .aifin .insight__lbl { color: #5d6879; } html.dark .aifin .insight__body { color: #e9ecf2; } /* индикатор записи речи — оранжевый эталон → --warn Ока */ html.dark .aifin .ask__listen { color: #e0813c; } html.dark .aifin .ask__listen .bars i { background: #e0813c; } /* таблица результата */ html.dark .aifin .rtbl thead th { background: #161a23; border-bottom-color: #232936; color: #9aa3b5; } html.dark .aifin .rtbl tbody td { border-bottom-color: #1b2029; } html.dark .aifin .rtbl tbody tr.data:hover { background: #181c25; } html.dark .aifin .grp td { background: #181c25; } html.dark .aifin .grp:hover td { background: #1e232e; } html.dark .aifin .grp__bar { background: #232936; } html.dark .aifin .grp__bar i { background: #f2b84b; } html.dark .aifin .rtbl tfoot td { background: #161a23; } html.dark .aifin .rtbl tfoot td.lbl { color: #e9ecf2; } html.dark .aifin .gtb button:hover { background: #181c25; border-color: #39414f; } html.dark .aifin .res__export:hover { background: #181c25; border-color: #39414f; } html.dark .aifin .rb-warn { color: #e0a13c; } /* бары по группам + ИТОГО */ html.dark .aifin .barcard__h { color: #9aa3b5; } html.dark .aifin .barrow__track { background: #232936; } html.dark .aifin .barrow__track i { background: #f2b84b; } html.dark .aifin .bartotal__lbl, html.dark .aifin .barcount__lbl { color: #c3cad9; } /* плашка «Чего 1С не знает» — кремовая → тёмно-янтарная */ html.dark .aifin .not1c { background: rgba(242, 184, 75, .07); border-color: rgba(242, 184, 75, .25); color: #d9c491; } html.dark .aifin .not1c b { color: #f2d391; } html.dark .aifin .not1c .material-symbols-outlined { color: #f2b84b; } html.dark .aifin .card__not1c { color: #d9c491; } html.dark .aifin .card__not1c b { color: #f2d391; } html.dark .aifin .card__not1c .material-symbols-outlined { color: #f2b84b; } /* тост экспорта — тёмно-зелёный эталон → поверхность Ока */ html.dark .aifin .toast { background: #1e232e; color: #e9ecf2; border: 1px solid #232936; } html.dark .aifin .toast .material-symbols-outlined { color: #57c878; } /* блок-приглашение «Загрузите файл» */ html.dark .aifin .finvite { background: #12151c; border-color: rgba(242, 184, 75, .3); } html.dark .aifin .finvite__icon { background: rgba(242, 184, 75, .12); } html.dark .aifin .finvite__badge { background: rgba(87, 200, 120, .13); color: #57c878; } html.dark .aifin .finvite__h { color: #e9ecf2; } html.dark .aifin .finvite__btn { color: #0b0d11; box-shadow: none; } html.dark .aifin .finvite__chips { border-top-color: #232936; } html.dark .aifin .finvite__chip { background: #181c25; border-color: #232936; color: #9aa3b5; } /* ════════════════════════════════════════════════════════════════════════════ 6. МАСТЕР ОТЧЁТОВ (/reports/builder/, scoped .rw) — пункт сайдбара админки holding (не нав шелла Ока, но в одном клике). Та же семья хардкодов, что у .aifin: светло-зелёные подложки/рамки → поверхности и янтарь Ока. ════════════════════════════════════════════════════════════════════════════ */ /* рельс-конструктор */ html.dark .rw .cfg { border-color: #232936; box-shadow: none; } html.dark .rw .saved { background: #181c25; border-color: #232936; } html.dark .rw .saved__h span { color: #5d6879; } html.dark .rw .sect__n { color: #0b0d11; } /* чипы конструктора */ html.dark .rw .chip { border-color: #2c3342; } html.dark .rw .chip:hover { background: #181c25; border-color: #39414f; } html.dark .rw .chip.on { background: rgba(242, 184, 75, .12); border-color: rgba(242, 184, 75, .35); } html.dark .rw .chip--add { border-color: #39414f; } html.dark .rw .chip--add:hover { background: #181c25; } html.dark .rw .chip--filt, html.dark .rw .focus-chip { background: rgba(242, 184, 75, .12); border-color: rgba(242, 184, 75, .35); color: #f2d391; } html.dark .rw .chip--filt button, html.dark .rw .focus-chip button { background: rgba(242, 184, 75, .2); color: #f2d391; } html.dark .rw .chip--filt button:hover { background: rgba(242, 184, 75, .35); } /* выпадашки / поп-форма фильтра / фокус-поиск */ html.dark .rw .dd__btn { border-color: rgba(242, 184, 75, .35); } html.dark .rw .dd__btn:hover { background: #181c25; } html.dark .rw .dd--soft .dd__btn { border-color: #2c3342; color: #9aa3b5; } html.dark .rw .dd__menu { border-color: #232936; box-shadow: 0 16px 38px rgba(0, 0, 0, .5); } html.dark .rw .dd__item:hover { background: #181c25; } html.dark .rw .dd__item.on { background: rgba(242, 184, 75, .12); } html.dark .rw .ff { border-color: #232936; box-shadow: 0 20px 46px rgba(0, 0, 0, .55); } html.dark .rw .ff__lbl { color: #5d6879; } html.dark .rw .ff__opt:hover { background: #181c25; } html.dark .rw .ff__opt .box { border-color: #39414f; color: #0b0d11; } html.dark .rw .ff input.ff__in, html.dark .rw .focus-search input, html.dark .rw .period-range input { border-color: #2c3342; } html.dark .rw .ff__btn { border-color: #2c3342; } html.dark .rw .ff__btn:hover { background: #181c25; } html.dark .rw .ff__btn--go { color: #0b0d11; } html.dark .rw .focus-list { border-color: #232936; box-shadow: 0 16px 38px rgba(0, 0, 0, .5); } html.dark .rw .focus-list__item:hover { background: #181c25; } /* кнопки построения/экспорта: тёмный текст на янтаре */ html.dark .rw .build-btn { color: #0b0d11; box-shadow: none; } html.dark .rw .res__xls { color: #0b0d11; box-shadow: none; } html.dark .rw .res__src b, html.dark .rw .res__grp .lead b { color: #e9ecf2; } html.dark .rw .gtb button { border-color: #2c3342; color: #9aa3b5; } html.dark .rw .gtb button:hover { background: #181c25; } /* таблица результата */ html.dark .rw .tblwrap { border-color: #232936; } html.dark .rw .rtbl thead th { background: #161a23; border-bottom-color: #232936; color: #9aa3b5; } html.dark .rw .rtbl tbody td { border-bottom-color: #1b2029; } html.dark .rw .rtbl tbody tr.data:hover { background: #181c25; } html.dark .rw .grp td { background: #181c25; } html.dark .rw .grp:hover td { background: #1e232e; } html.dark .rw .grp__bar { background: #232936; } html.dark .rw .grp__bar i { background: #f2b84b; } html.dark .rw .rtbl tfoot td { background: #161a23; } html.dark .rw .rtbl tfoot td.lbl { color: #e9ecf2; } html.dark .rw .rb-warn { color: #e0a13c; } /* ── Шапка сайдбара «Ока» на unfold-страницах (Задачи/Документы/Отчёты…): большой глаз-лого вместо лого+текста, как в тёмном шелле base_oko — чтобы левое меню при переходе не «менялось». Переопределяет navigation_header.html под holding. ── */ html.dark .oko-navhead { --iris: #f2b84b; /* нужен глазу (oko_eye использует var(--iris)) */ display: flex; align-items: center; justify-content: center; position: relative; padding: 16px 12px 12px; min-height: 116px; border-bottom: 1px solid #232936; margin-bottom: 8px; } html.dark .oko-navhead__eye { display: block; width: 92px; height: 92px; line-height: 0; transition: transform .16s ease, filter .16s ease; } html.dark .oko-navhead__eye:hover { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(242, 184, 75, .14)); } html.dark .oko-navhead__eye svg { display: block; width: 100%; height: 100%; } html.dark .oko-navhead .eye__lid { transform-origin: 20px 20px; animation: oko-blink 9s ease-in-out infinite; } html.dark .oko-navhead__close { position: absolute; right: 12px; top: 12px; color: #9aa3b5; } @keyframes oko-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }