/* Бренд-тема Антиплатформы для панели CloudCLI — светлая и тёмная. * * Палитра из /root/antiplatforma2/OFORMLENIE.md: * ink #131211 · orange #EC592A · cream #F0EFEA * sand #F3D9C3 · muted #8a857b · frame #c3bcae * * Панель на shadcn/ui, поэтому основную работу делают CSS-переменные — * компоненты и раскладку не трогаем. Светлая тема живёт в :root, * тёмная в .dark (класс панель вешает на сама). * * Файл лежит ВНЕ npm-пакета; в dist/ его кладёт cloudcli-local-patches. * После правки: cloudcli-local-patches, затем Ctrl+Shift+R в браузере. */ /* =============================================================== * ШРИФТ — Golos Text, те же файлы, что на платформе * (app/static/fonts). Раздаётся самой панелью из /brand-fonts, * ничего не тянется из интернета. Сабсеты и unicode-range * скопированы с платформы один в один. * =============================================================== */ @font-face { font-family: "Golos Text"; src: url(/brand-fonts/GolosText-cyrillic.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116; } @font-face { font-family: "Golos Text"; src: url(/brand-fonts/GolosText-cyrillic-ext.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: u+0460-052f, u+1c80-1c8a, u+20b4, u+2de0-2dff, u+a640-a69f, u+fe2e-fe2f; } @font-face { font-family: "Golos Text"; src: url(/brand-fonts/GolosText-latin.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } @font-face { font-family: "Golos Text"; src: url(/brand-fonts/GolosText-latin-ext.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff; } /* Панель по умолчанию берёт Encode Sans, а текст сообщений — Merriweather через утилиту font-serif. Переводим и то, и другое на Golos. Моноширинное (терминал, блоки кода) НЕ трогаем — там нужен свой шрифт. */ :root { --brand-font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } body, .font-serif, .font-sans { font-family: var(--brand-font); } /* Элементы форм шрифт не наследуют — задаём явно */ button, input, textarea, select { font-family: inherit; } /* =============================================================== * СВЕТЛАЯ — кремовый фон, чернильный текст * =============================================================== */ :root { color-scheme: light; --background: 50 17% 93%; /* cream #F0EFEA */ --foreground: 30 6% 7%; /* ink #131211 */ --card: 48 20% 97%; /* карточки чуть светлее фона */ --card-foreground: 30 6% 7%; --popover: 48 20% 97%; --popover-foreground: 30 6% 7%; --primary: 14 84% 47%; /* orange, притемнён для контраста на кремовом */ --primary-foreground: 50 17% 93%; --ring: 14 84% 47%; --secondary: 44 16% 88%; --secondary-foreground: 30 6% 7%; --muted: 44 16% 88%; --muted-foreground: 40 6% 44%; /* muted #8a857b, притемнён под светлый фон */ --accent: 44 16% 88%; --accent-foreground: 30 6% 7%; --border: 40 15% 78%; /* frame #c3bcae */ --input: 40 15% 74%; --destructive: 0 65% 45%; --destructive-foreground: 50 17% 93%; --nav-glass-bg: 50 17% 93% / 0.7; --nav-tab-glow: 14 84% 47% / 0.28; /* Служебные токены темы — ими пользуются правила ниже */ --brand-accent-text: hsl(14 84% 40%); /* оранжевый текст, читаемый на светлом */ --brand-accent-tint: hsl(14 84% 55% / 0.12); --brand-bubble-user: hsl(27 67% 86%); /* sand: на кремовом фоне кремовый бабл не виден */ --brand-bubble-assistant: hsl(45 18% 89%); /* тёмно-молочный — на тон глубже фона */ } /* =============================================================== * ТЁМНАЯ — чернильный фон, кремовый текст * =============================================================== */ .dark { color-scheme: dark; --background: 30 6% 7%; /* ink #131211 */ --foreground: 50 17% 93%; /* cream #F0EFEA */ --card: 30 5% 10%; --card-foreground: 50 17% 93%; --popover: 30 5% 10%; --popover-foreground: 50 17% 93%; --primary: 14 84% 55%; /* orange #EC592A */ --primary-foreground: 50 17% 93%; --ring: 14 84% 55%; --secondary: 30 5% 15%; --secondary-foreground: 50 17% 93%; --muted: 30 5% 15%; --muted-foreground: 40 6% 62%; /* muted #8a857b, поднят под тёмный фон */ --accent: 30 5% 17%; --accent-foreground: 50 17% 93%; --border: 30 5% 18%; --input: 30 5% 22%; --destructive: 0 62% 45%; --destructive-foreground: 50 17% 93%; --nav-glass-bg: 30 5% 10% / 0.55; --nav-tab-glow: 14 84% 55% / 0.35; --brand-accent-text: hsl(14 84% 66%); --brand-accent-tint: hsl(14 84% 55% / 0.16); --brand-bubble-user: hsl(50 17% 93%); /* cream */ --brand-bubble-assistant: hsl(30 5% 11%); /* на тон светлее чернильного фона */ } /* Полосы прокрутки под фон каждой темы */ * { scrollbar-color: hsl(40 15% 78%) transparent; } .dark * { scrollbar-color: hsl(30 5% 22%) transparent; } /* =============================================================== * Хардкодные Tailwind-классы мимо переменных * * Часть панели покрашена литеральными цветами светлой темы * (bg-gray-100, text-blue-500). В светлой теме они уместны и не трогаются; * чиним только тёмную, где они дают белые пятна и нечитаемый текст. * Без !important: файл грузится последним и выигрывает при равной * специфичности, а варианты hover: и dark: остаются сильнее. * =============================================================== */ /* Светлые подложки → тёмная поверхность (из-за них терялось поле поиска) */ .dark .bg-white, .dark .bg-gray-50, .dark .bg-gray-100, .dark .bg-gray-200, .dark .bg-gray-300, .dark .bg-slate-50, .dark .bg-slate-100, .dark .bg-zinc-50, .dark .bg-zinc-100 { background-color: hsl(30 5% 13%); } /* Тёмный текст, рассчитанный на светлую подложку → кремовый */ .dark .text-gray-700, .dark .text-gray-800, .dark .text-gray-900, .dark .text-slate-700, .dark .text-slate-800, .dark .text-slate-900, .dark .text-zinc-700, .dark .text-zinc-900 { color: hsl(50 17% 93%); } /* Второстепенный серый текст — поднят по светлоте, чтобы не тонул */ .dark .text-gray-500, .dark .text-gray-600, .dark .text-slate-500, .dark .text-slate-600, .dark .text-neutral-500 { color: hsl(40 6% 68%); } /* Светлые границы → приглушённая тёмная рамка */ .dark .border-gray-100, .dark .border-gray-200, .dark .border-gray-300, .dark .border-slate-200, .dark .border-slate-300, .dark .border-zinc-200 { border-color: hsl(30 5% 20%); } /* Плейсхолдеры полей ввода — в обеих темах */ input::placeholder, textarea::placeholder { color: hsl(40 6% 48%); opacity: 1; } .dark input::placeholder, .dark textarea::placeholder { color: hsl(40 6% 58%); } /* --------------------------------------------------------------- * Синие акценты → фирменный оранжевый (обе темы, оттенок из токена) * Это про статус подключения нейронки и подобные бейджи. * --------------------------------------------------------------- */ .bg-blue-500, .bg-blue-600, .bg-blue-800, .from-blue-500, .from-blue-600, .bg-cyan-400 { background-color: hsl(var(--primary)); } .bg-blue-50, .bg-blue-100, .bg-blue-300, .bg-blue-50\/80, .bg-blue-200\/70, .bg-indigo-50, .bg-sky-50, .bg-blue-500\/10, .bg-blue-500\/30, .bg-sky-500\/10, .from-blue-500\/10 { background-color: var(--brand-accent-tint); } .border-blue-100, .border-blue-100\/80, .border-blue-200, .border-blue-200\/60, .border-blue-300, .border-blue-300\/60, .border-blue-500, .border-blue-600, .border-indigo-200, .border-sky-200, .border-sky-500\/30 { border-color: hsl(14 84% 55% / 0.45); } .ring-blue-200\/50 { --tw-ring-color: hsl(14 84% 55% / 0.35); } /* Светлый текст на залитых плашках остаётся светлым */ .text-blue-100, .text-blue-300 { color: hsl(50 17% 93%); } .text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-blue-500\/70, .text-blue-600\/70, .text-sky-700, .text-indigo-500, .text-indigo-700, .text-cyan-400, .text-cyan-500 { color: var(--brand-accent-text); } /* =============================================================== * Чат: баблы и подсказка * =============================================================== */ /* Скачки при скролле. * * Панель метит каждое сообщение `content-visibility:auto` с заглушкой * `contain-intrinsic-size` (180/240/96px). Пока сообщение за экраном, * оно занимает высоту заглушки; попав в зону видимости, разворачивается * в реальную — и всё, что ниже, скачком уезжает. В Safari это особенно * заметно: он не поддерживает scroll anchoring, который в Chrome * компенсирует такие сдвиги. * * Отключаем пропуск отрисовки — высоты становятся честными с самого начала. * Цена: длинная переписка целиком рисуется в DOM. Если на очень больших * чатах появятся тормоза — удалить этот блок, скачки вернутся взамен. * `contain: layout style paint` не трогаем, он полезен и скачков не даёт. */ .chat-message { content-visibility: visible; contain-intrinsic-size: none; } /* Подсказка «Enter для отправки • Shift+Enter…» под полем ввода — наезжала на соседний элемент. Селектор из четырёх классов перебивает tailwind-овский lg:block без !important. */ div.text-xs.text-muted-foreground\/50.transition-opacity.lg\:block { display: none; } /* Бабл моего сообщения: в сборке это bg-blue-600 + text-white. В тёмной теме — молочный, в светлой — песочный (молочный слился бы с кремовым фоном). Текст в обоих случаях чернильный. */ .chat-message.user .bg-blue-600 { background-color: var(--brand-bubble-user); } .chat-message.user .text-white, .chat-message.user .text-blue-100 { color: hsl(30 6% 7%); } /* Внутри бабла markdown рендерится через prose-invert (светлый текст) — на светлом бабле он исчезает, поэтому возвращаем тёмные чернила. */ .chat-message.user .prose { --tw-prose-body: hsl(30 6% 7%); --tw-prose-headings: hsl(30 6% 7%); --tw-prose-bold: hsl(30 6% 7%); --tw-prose-quotes: hsl(30 6% 7%); --tw-prose-code: hsl(30 6% 7%); --tw-prose-links: hsl(14 84% 40%); } /* Ответ нейронки в сборке рендерится голым блоком .prose, без подложки — текст лежит прямо на фоне страницы. Даём ему бабл на тон глубже фона, чтобы реплики читались как отдельные блоки. Зеркалим скруглением левый нижний угол — у моего бабла срезан правый. */ .chat-message.assistant .prose { background-color: var(--brand-bubble-assistant); padding: 0.75rem 1rem; border-radius: 1rem; border-bottom-left-radius: 0.375rem; } /* У абзацев prose свои внешние отступы — внутри бабла они дают лишний воздух сверху и снизу, поэтому у крайних элементов их снимаем. */ .chat-message.assistant .prose > :first-child { margin-top: 0; } .chat-message.assistant .prose > :last-child { margin-bottom: 0; } /* Ответ нейронки идёт классом prose-gray, рассчитанным на белый фон: в тёмной теме он почти не виден. В светлой он уместен и не трогается. */ .dark .chat-message.assistant .prose, .dark .chat-message.tool .prose { --tw-prose-body: hsl(50 17% 93%); --tw-prose-headings: hsl(50 17% 93%); --tw-prose-bold: hsl(50 17% 93%); --tw-prose-quotes: hsl(40 6% 72%); --tw-prose-code: hsl(50 17% 93%); --tw-prose-links: hsl(14 84% 66%); }