/* Палитра службы — одна на все страницы: чат, вход, сводка. Раньше её держали две таблицы стилей: `style.css` и `admin.css`, каждая свою копию. Пока тема была одна, это сходило с рук; с двумя темами две копии разъедутся в первую же правку — человек переключит тему в чате, уйдёт в сводку и увидит там прежнюю. Поэтому палитра вынесена сюда и подключается первой на каждой странице. **Переменные названы по роли, а не по цвету.** Прежние имена были цветами: `--navy` служил и фоном кнопки, и цветом заголовка, и цветом ссылки. В тёмной теме «navy» перестаёт быть тёмно-синим, и имя начинает врать — через месяц никто не поймёт, почему `--navy` светлый. Роль же остаётся ролью в любой теме: `--основной` и в светлой основной, и в тёмной. Преемственность с vicgroup.ru: фирменный синий основным, малиновый акцентом и редко, скругление 4 пикселя, Roboto. Тёмная тема построена на том же синем, а не на нейтральном графите, — так узнаваемость сохраняется. Шрифт лежит в проекте файлами: служба обязана работать без интернета. */ @font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("/static/fonts/Roboto-Regular.ttf") format("truetype"); } @font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("/static/fonts/Roboto-Medium.ttf") format("truetype"); } @font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url("/static/fonts/Roboto-Bold.ttf") format("truetype"); } /* Шрифты стиля vet.agropredict.ru (ночь 24, `225` §2): Open Sans и Oswald, лицензия OFL (`static/fonts/OFL.txt`). Скачаны 11.10.2026 с Google Fonts (fonts.gstatic.com, v44) — вариативные woff2, подмножества cyrillic и latin; браузер берёт файл по `unicode-range`. Roboto выше — запасной. */ @font-face { font-family: "Open Sans"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/OpenSans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Open Sans"; font-weight: 400 700; font-display: swap; src: url("/static/fonts/OpenSans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, 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: Oswald; font-weight: 500 600; font-display: swap; src: url("/static/fonts/Oswald-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: Oswald; font-weight: 500 600; font-display: swap; src: url("/static/fonts/Oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, 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; } :root { /* --- поверхности, от дальней к ближней */ --фон: #F4F4F4; /* полотно страницы (сайт: --color-main-gray) */ --панель: #FFFFFF; /* боковая панель, панели чата (--color-main-white) */ --карточка: #FFFFFF; /* плитки, поля ввода, всплывающие окна */ --граница: #E4E4E4; /* тонкая (--color-gray-bg) */ --граница-ярче: #CCCDCE; /* рамка, она же при наведении (--color-gray-border) */ --строка-наведение: #FAFAFA; /* --- текст, от заметного к бледному */ --текст: #0B1227; /* --color-main-black */ /* Сайт: #82858F (--color-gray) — на #F4F4F4 3,35:1, а мелкому тексту нужно 4,5:1; затемнён минимально до прохождения (ночь 24). */ --текст-тихий: #6B6E76; /* Сведены четыре почти одинаковых серых из сводки: они отличались друг от друга на три процента и служили одному — «этого тут нет». Каждый требовал бы своей пары в тёмной теме, а разницы никто не видел. */ --текст-бледный: #ACAEB2; /* --color-black-20 */ /* --- фирменные цвета */ --основной: #3860D2; /* кнопки, ссылки, активное (--color-blue-accent) */ --основной-т: #2D56C8; /* наведение (--color-blue-accent-hover) */ --на-основном: #FFFFFF; /* текст поверх основного */ /* «Акцент» прежней палитры (малиновый) убран: у сайта акцент — синий основного и зелёная подложка выбранного. Имена оставлены: на них держатся подсветка вкладки, фокус, сортировка. Удалить и отклонить — своей красной парой сайта (`--опасное`). */ --акцент: #3860D2; --на-акценте: #FFFFFF; --основной-светлый: #DFE6F8; /* подложка выбранного (--color-blue-accent-15) */ --основной-светлый-наведение: #CDD8F4; --выбрано: #ECFFB7; /* выбранная вкладка-фильтр (--color-green-accent) */ /* Логотип Agropredict (ночь 25, `234` §5): цвета знака фирменные в обеих темах, надпись в тёмной — светлая, иначе не читается. */ --лого-синий: #3860D2; --лого-салатовый: #ECFFB7; --лого-надпись: #484D5B; --выбрано-рамка: #E2F3A1; --опасное: #961515; /* удалить, отклонить, хуже (--color-red) */ --опасное-фон: #F0D9D9; /* состояния — как значки «норма / внимание / критично» сайта: текст, фон, точка */ --хорошо: #285A00; --хорошо-фон: #EDF8E4; --хорошо-точка: #84CE49; --внимание: #774700; --внимание-фон: #FFF2DF; --внимание-точка: #FFA726; --плохо: #961515; --плохо-фон: #F0D9D9; --плохо-точка: #D73E3E; /* --- служебное */ --выделение: rgba(56, 96, 210, .10); /* выбранная беседа */ --подчёркивание: rgba(56, 96, 210, .30); --кольцо: rgba(56, 96, 210, .14); /* обводка при наведении и фокусе */ --кольцо-плотное: rgba(56, 96, 210, .24); --кольцо-акцент: rgba(56, 96, 210, .16); --ошибка-фон: #F0D9D9; --ошибка-текст: #961515; /* Едва заметная заливка под курсором: беседа в списке, строка настроек. */ --наведение: rgba(56, 96, 210, .06); /* То же, но у опасного: удалить беседу, закрыть окно. */ --акцент-мягкий: rgba(150, 21, 21, .10); /* Подложка увеличенного снимка тёмная в обеих темах: снимок разглядывают, и светлое поле вокруг мешает этому одинаково днём и ночью. */ --подложка: rgba(4, 6, 15, .82); --на-подложке: #FFFFFF; --подложка-окна: rgba(11, 18, 39, .38); /* за окном настроек */ --подложка-лёгкая: rgba(4, 6, 15, .35); /* за панелью карточки в сводке */ /* Полоска заполнения в сводке. Заливка приглушена: двести полосок в столбце не должны рябить. */ --полоса-жёлоб: #E4E4E4; --полоса: #A4B4DB; /* Бегунок полосы прокрутки. Не `--граница`: та слишком бледная, чтобы бегунок был виден, и слишком похожа на разделители таблицы. */ --полоса-бегунок: #C3CBDE; --полоса-бегунок-ярче: #A2AEC9; /* --- тени по назначению, а не по числам. На тёмном фоне тень цвета текста не видна вовсе, поэтому в тёмной теме они становятся чёрными и плотнее. Ради этого тени и названы уровнями. */ --тень-1: rgba(79, 94, 105, .05) -1px 4px 10px 0; /* лёгкий подъём */ --тень-2: rgba(79, 94, 105, .05) -1px 8px 19px 0; /* карточка, плитка (сайт) */ --тень-3: rgba(79, 94, 105, .10) -1px 8px 19px 0; /* нажимаемое, выпадающее */ --тень-4: rgba(11, 18, 39, .18) 0 24px 64px 0; /* окно поверх страницы */ --тень-акцент: rgba(56, 96, 210, .18) 0 4px 14px 0; /* Выдвижные панели: боковая в чате уезжает вправо, карточка в сводке — влево, поэтому тени у них разного направления и одной быть не может. */ --тень-боковая: 4px 0 24px rgba(4, 6, 15, .16); --тень-панель: -2px 0 16px rgba(4, 6, 15, .14); /* --- размеры и ход времени, от темы не зависят */ /* Радиусы сайта: карточка 16, блок и подложка вкладок 12, пункт меню и вкладка 8, кнопка и поле 6, значок 99. `--r` — кнопка и поле. */ --r: 6px; --r-карточка: 16px; --r-блок: 12px; --r-пункт: 8px; --r-значок: 99px; --r-тонкий: 3px; /* Шрифты сайта: Open Sans и Oswald (OFL, файлы — в static/fonts, @font-face выше); Roboto — запасной. Oswald — только заголовки карточек и крупные числа. */ --шрифт: "Open Sans", Roboto, "Segoe UI", Arial, sans-serif; --шрифт-акцент: Oswald, "Arial Narrow", "Open Sans", Roboto, sans-serif; --шрифт-код: ui-monospace, Consolas, "Courier New", monospace; /* Размеры сайта: заголовок страницы 30/700, акцентный 24, тело 16, кнопки и таблицы 14, подписи 12, метки 10/700. */ --размер-заголовок: 30px; --размер-акцент: 24px; --размер-крупный: 20px; --размер-подзаголовок: 18px; --размер-тело: 16px; --размер-кнопка: 14px; --размер-подпись: 12px; --размер-метка: 10px; --side: 300px; --ease: cubic-bezier(.22, .61, .36, 1); /* мягкое торможение в конце */ --fast: .16s; --slow: .3s; /* Ход бегунка. Работает и при перетаскивании — в этом весь смысл: делений всего 15, и без плавности бегунок прыгает между ними скачками. */ --glide: .13s; --тема-переход: .2s; } /* Тёмная тема — на фирменном тёмно-синем. Две вещи нельзя переносить из светлой механически. Первая: синий и малиновый меняются по светлоте. `#192A67` на `#0B1130` даёт около 1.3:1 и не читается вовсе, поэтому основной здесь светлый, а тёмно-синий уходит в фон. Вторая: тени становятся чёрными — синяя тень на синем фоне невидима. Контраст проверяется числом, а не глазом: `tests/test_theme.py` считает отношение яркостей по этому же файлу и падает, если пара не проходит. */ [data-тема="тёмная"] { --фон: #0B1227; --панель: #121A33; --карточка: #172040; --граница: #263052; --граница-ярче: #38446E; --строка-наведение: #19223F; --текст: #E9EDF7; --текст-тихий: #9AA3BD; --текст-бледный: #6E7899; --основной: #7F9CF0; --основной-т: #9DB3F4; --на-основном: #0B1227; --акцент: #7F9CF0; --на-акценте: #0B1227; --основной-светлый: #1E2A55; --основной-светлый-наведение: #26346A; --выбрано: #33401A; --лого-синий: #3860D2; --лого-салатовый: #ECFFB7; --лого-надпись: #9AA3BD; /* как --текст-тихий тёмной темы */ --выбрано-рамка: #4A5A23; --опасное: #FF8A8A; --опасное-фон: #3A1620; --хорошо: #A8E07A; --хорошо-фон: #1C2E14; --хорошо-точка: #84CE49; --внимание: #FFC66B; --внимание-фон: #33260F; --внимание-точка: #FFA726; --плохо: #FF8A8A; --плохо-фон: #3A1620; --плохо-точка: #D73E3E; --выделение: rgba(127, 156, 240, .16); --подчёркивание: rgba(143, 166, 232, .38); --кольцо: rgba(143, 166, 232, .22); --кольцо-плотное: rgba(143, 166, 232, .34); --кольцо-акцент: rgba(127, 156, 240, .26); --ошибка-фон: #3A1620; --ошибка-текст: #FFB3B3; --подложка: rgba(2, 4, 12, .88); --на-подложке: #FFFFFF; --полоса-жёлоб: #1E2856; --полоса: #6E86D6; --полоса-бегунок: #2E3A66; --полоса-бегунок-ярче: #445396; --тень-1: 0 2px 8px rgba(0, 0, 0, .40); --тень-2: 0 6px 18px rgba(0, 0, 0, .50); --тень-3: 0 4px 14px rgba(0, 0, 0, .55); --тень-4: 0 24px 64px rgba(0, 0, 0, .65); --тень-акцент: 0 4px 14px rgba(127, 156, 240, .30); --наведение: rgba(143, 166, 232, .10); --акцент-мягкий: rgba(255, 138, 138, .16); --подложка-окна: rgba(2, 4, 12, .62); --подложка-лёгкая: rgba(2, 4, 12, .55); --тень-боковая: 4px 0 24px rgba(0, 0, 0, .55); --тень-панель: -2px 0 16px rgba(0, 0, 0, .50); } /* «Как в системе» здесь не отдельный набор цветов, а разрешённый выбор. Соблазн был написать вторую копию тёмных значений под `@media (prefers-color-scheme: dark)`. Копия цветов — это ровно та беда, от которой уходили, вынося палитру из двух таблиц стилей в одну: рано или поздно правят одну половину. Поэтому «как в системе» разрешается скриптом в ``: он читает настройку системы и ставит на `` уже готовое «светлая» или «тёмная», а при смене настройки переставляет. В файле остаются ровно два набора цветов, и второго места для правки нет. */ /* Плавная смена темы — только на слоях, которые правда меняются. Не через `*`: на странице сводки полсотни строк таблицы, и переход, назначенный всему подряд, превращает переключение в заметный рывок. Здесь перечислены поверхности — их немного, и этого хватает глазу. */ html, body, .side, .panel, .card, .drug, .chip, .composer, .topbar, .ahead, .фильтры, .панель, .таблица td, .таблица th { transition: background-color var(--тема-переход) var(--ease), color var(--тема-переход) var(--ease), border-color var(--тема-переход) var(--ease); } @media (prefers-reduced-motion: reduce) { html, body, .side, .panel, .card, .drug, .chip, .composer, .topbar, .ahead, .фильтры, .панель, .таблица td, .таблица th { transition: none; } } /* ------------------------------------------------- полосы прокрутки Ту же беду, что и с раскрытым `