/* Manrope, SIL Open Font License 1.1 — self-hosted on purpose. Loading it from fonts.googleapis.com meant CSS waiting on CSS waiting on the font before the first paint, and every metric in the cabinet shifted whenever Google Fonts was slow or unreachable. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/manrope-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2"); 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; } /* --------------------------------------------------------------------------- Контрольные точки кабинета. Было двадцать три значения: 420, 430, 520, 560, 600, 620, 640, 680, 700, 720, 760, 800, 820, 880, 881, 900, 950, 980, 1080, 1100, 1180, 1280, 1399. Часть из них отличалась на десять-двадцать пикселей, то есть выбиралась наугад под конкретный экран, а не по правилу. Осталось тринадцать: 420 очень узкий телефон 560 телефон 640 крупный телефон 700 телефон в альбомной / узкий планшет 760 планшет 820 планшет в альбомной 900 граница «сайдбар против бургера» (парная к min-width: 901px) 980 узкий ноутбук 1100 ноутбук 1180 широкий ноутбук 1280 десктоп 1399 широкий десктоп Слияние делалось только вверх: max-width, сдвинутый вверх, начинает действовать на чуть более широком экране, то есть блок схлопывается раньше и переполниться не может. Вниз не сдвигалось ничего, кроме 430 -> 420. Дальнейшее сокращение до пяти точек упирается в глаза: свести 980 к 900 значит оставить широкую раскладку на экранах 900-980, а это уже проверяется только в браузере. Новую точку не заводить — брать существующую. --------------------------------------------------------------------------- */ :root { /* ------------------------------------------------------------------ Роли, а не краски. Раньше один --green нёс четыре разных смысла сразу: главное действие, «вы здесь», ховер и «сделано». Развести их переназначением было нельзя — подложки подбирались руками, а .tag.ok красился по зелёной рампе напрямую, минуя --ok. Теперь смысл объявлен здесь, и смена тона акцента — это одно значение --brand, а не обход файла. Зелёный знака #2d7d61 остался в --logo, favicon.svg и pwa-icon.svg; цвет строки браузера задаёт _theme_color.html по контурам. ------------------------------------------------------------------ */ /* Действие: первичная кнопка, кольцо фокуса, акцентная граница. Графит, а не зелёный. Зелёный в кабинете означал одновременно «главное действие» и «сделано»; на строке, где «Сохранить» стоит рядом с «Оплачено», цвет не помогал различить их. Теперь зелёный остался ровно значением (--ok), а действие ушло в ахромат: на экране администратора хроматическими остаются только осмысленные краски — статус, сигнал и направление занятия. Знак студии этим не задет: в studio-logo.png он почти чёрный с лаймовыми точками (133°), и нефрит 167° никогда не был цветом бренда. */ --brand: #3f5d7d; /* Тот же тон под текстом: 13,0:1 на карточке. */ --brand-ink: #345271; /* Заливка под курсором. Отдельно от --brand-ink, потому что это разные роли: текстовый акцент обязан быть темнее фона, а ховер — всего лишь отличим от покоя. У зелёного они совпадали, и токен был один; у тёмного акцента совпасть не могут — почти чёрное, ставшее ещё чернее, не читается как отклик, и кнопка выглядит мёртвой. */ --brand-hover: #244160; --on-brand: #ffffff; /* Подложки выводятся из действия, а не подбираются. Из-за ручного подбора смена тона кнопки оставляла под ней мятную заливку, мятную границу и мятный ховер. */ --brand-tint: color-mix(in oklab, var(--brand) 10%, var(--card)); --brand-strong: color-mix(in oklab, var(--brand) 18%, var(--card)); --brand-border: color-mix(in oklab, var(--brand) 34%, var(--card)); --brand-border-strong: color-mix(in oklab, var(--brand) 52%, var(--card)); /* Состояния — нейтральные ступени, а не бренд. Ховер, нажатие и «вы здесь» были одной мятной заливкой в 1,18:1 к карточке: ни одно из трёх не читалось, и ховер кнопки выглядел выбранным пунктом. */ --hover: #f1f5f9; /* 1,09:1 к карточке */ --selected: #e0ebf7; /* 1,20:1 к карточке */ /* Ориентир: «вы здесь» в пространстве и «сегодня» во времени. Ахроматичен намеренно, и это не экономия. Перекраска раздала хроматику трём смыслам — статус, сигнал, направление занятия. Место ориентира в этом списке пришлось бы отбирать у одного из них, а доска расписания и так несёт восемь пастельных подложек направлений: девятая краска на ней перестала бы читаться как метка и стала бы ещё одним пятном. Поэтому ориентир говорит формой. --selected заливает выбранное тихо, --marker заливает сегодняшнее плотно и выворачивает текст. Это две ступени одного ахроматического канала, и они складываются: день может быть одновременно сегодняшним и выбранным, и обе метки видны. Отдельный токен, а не var(--brand): действие и ориентир совпали по тону случайно. Ровно так уже утекла подсветка выбранного дня — она была написана как var(--brand-ink), и смена акцента на графит сравняла её с обычным текстом. Следующая смена акцента не должна утащить метку. */ --marker: #3f5d7d; /* 13,0:1 под --on-marker */ --on-marker: #ffffff; /* Статус «хорошо» — отдельная краска, а не var(--brand). Пока тон тот же, но «Оплачено» и «Сохранить» больше не связаны одним токеном. */ /* Знак продукта. Отдельно от действия сознательно: главное открытие всей перекраски в том, что акцент интерфейса никогда не был цветом бренда — в studio-logo.png знак почти чёрный с лаймовыми точками. Раз акцент не был брендом, смена акцента не имеет права перекрашивать знак. Зелёный на экране входа остаётся зелёным. */ --logo: #2d7d61; --on-logo: #ffffff; --ok: #16a34a; --ok-bg: #eefaf1; --ok-ink: #146c34; /* 6,6:1 на --ok-bg */ --ok-border: #bbe7c9; /* Псевдонимы старых зелёных имён сняты: 139 обращений на 112 строках переписаны в роли. Пока они жили, файл читался так, будто в кабинете ещё есть цвет по имени «зелёный», и правило, красившее текст «зелёным тёмным», выглядело осмысленным — хотя означало «графит цвета текста». Именно так молча умерла подсветка выбранного дня: имя обещало цвет, которого в кабинете уже не было. Роль теперь названа в самом правиле, а возврат псевдонимов ловит тест test_the_green_aliases_stay_removed. */ /* Ахроматическая светлая тема строится как рабочий документ: белый холст, тёпло-серая навигация и чуть более светлые панели. Карточка отделяется от холста тихой заливкой и рамкой, а не тяжёлой серой подложкой всей страницы. */ --surface-2: #eef2f7; --surface-raised: #ffffff; --bg: #f6f7f9; --topbar: #ffffff; --sidebar: #131c26; --card: #ffffff; --search-bg: #ffffff; --ink: #0f172a; /* 16,5:1 на карточке */ --muted: #545f6e; /* 6,9:1 на карточке */ --faint: #5a6473; /* 4,6:1 даже на выбранной строке */ --border: #d9e0e9; /* 1,32:1 к карточке */ --text: var(--ink); /* Signal colours. The schedule board, the chat list and the task queue used to carry three unrelated reds and two unrelated blues; they share these. */ --info: #2f7370; --info-soft: #e9f5f4; --info-border: #b7dedb; --danger: #c8342a; --on-danger: #ffffff; --danger-soft: #fdeeed; --danger-border: #f2c4c0; --warn: #8a5a06; --warn-soft: #fdf6e6; /* Фон внутренней заметки и полосы истории: заметно светлее, чем бейдж ожидания, иначе служебный блок выглядит как предупреждение. */ --warn-tint: #fdf8ec; --warn-border: #e6d5a8; --warn-bg: #fbf1dd; --err: var(--danger); /* Панель, оторвавшаяся от страницы: липкая панель сохранения, всплывшее уведомление. Токен использовался в трёх правилах и нигде не был объявлен, поэтому те элементы оставались вовсе без тени. */ --shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 10px 28px rgb(15 23 42 / 8%); /* Toast общий для нескольких контуров; только кабинет задаёт ему свою тень. */ --hui-toast-shadow: var(--shadow); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; /* Motion. Every interactive surface reads from these so the cabinet has one speed instead of a handful of ad-hoc durations. */ --dur-fast: .12s; --dur: .18s; --ease: cubic-bezier(.2, .8, .2, 1); /* Отступы карточки от краёв экрана. Верхний — не просто отступ, а точка привязки: карточка растёт вниз от него, а не в обе стороны от центра. Потолки высоты считаются от этих двух чисел, поэтому поменять отступ значит поменять одно значение, а не восемь calc по файлу. */ --dialog-top: min(6vh, 56px); --dialog-bottom: 24px; /* Сумма боковых отступов окна от краёв экрана — одна на все ступени ширины (было 24, 28, 32 и 36 px у разных окон). */ --dialog-gutter: 32px; /* Stacking order, so a new overlay never needs another guessed 9999. */ --z-raised: 2; --z-sticky: 5; --z-sidebar: 60; --z-menu: 70; --z-submenu: 80; --z-toast: 90; /* Затемнение под всплывающим слоем. Было три близких значения на трёх подложках: rgba(30,42,35,.38) у диалога, .42 у выдвижной карточки и rgb(20 32 26 / 38%) у поиска. Разницу между ними никто не выбирал. */ --scrim: rgb(13 17 23 / 45%); --z-skip: 100; /* ------------------------------------------------------------------ Категориальные палитры. Это не сигнальные цвета: они не значат «хорошо» или «ошибка», они отвечают на вопрос «чей» и «какое направление». Поэтому лежат отдельно от --info/--danger/--warn. ------------------------------------------------------------------ */ /* Администраторы в графике смен: подложка дня и полоса слева. */ --admin-0-bg: #dff2e8; --admin-0-accent: #2d7d61; --admin-1-bg: #e2ecfa; --admin-1-accent: #4677b8; --admin-2-bg: #f7e6ee; --admin-2-accent: #b45f82; --admin-3-bg: #f7eddc; --admin-3-accent: #ad762d; --admin-4-bg: #eae5f8; --admin-4-accent: #7358ad; --admin-5-bg: #dff1f2; --admin-5-accent: #33858b; --admin-6-bg: #f4e8df; --admin-6-accent: #a8663c; --admin-7-bg: #e7f0dc; --admin-7-accent: #6b8c3b; --admin-8-bg: #f2e6f4; --admin-8-accent: #9655a0; --admin-9-bg: #e8eaf5; --admin-9-accent: #5d68a8; /* Аналитика: рампа — десять акцентов администраторов и два своих тона. Когорты рисуются своей, более насыщенной рампой из двенадцати тонов и своим тоном тепловой карты. */ --analytics-teal-deep: #257d73; --analytics-rose-deep: #a64f78; --cohort-0: #1673b9; --cohort-1: #c13f78; --cohort-2: #14805e; --cohort-3: #6d4bc3; --cohort-4: #d9534f; --cohort-5: #008ca0; --cohort-6: #6c941f; --cohort-7: #3046a3; --cohort-8: #9c46a8; --cohort-9: #3f8fd2; --cohort-10: #0d8879; --cohort-11: #d5689b; --cohort-heat: #136fa8; /* Каналы переписки в карточке клиента. Цвет здесь — опознавательный знак чужого канала, а не статус: он говорит, где лежит переписка, и подобран так, чтобы штрих 1.75 держал 3:1 на белой карточке (фирменные #04E061 и #2AABEE этого не держат). */ --channel-telegram: #0088cc; --channel-vk: #0077ff; --channel-instagram: #d62976; --channel-avito: #965eeb; /* Направления в расписании: восьмёрка, разведённая по кругу с шагом 37,5° так, что сектор бренда (167° ± 30°) остаётся пустым. Раньше четыре из восьми стояли в 176-202°, то есть вплотную к акценту, и на самом плотном экране кабинета категория занятия и главное действие читались как одно семейство. Второй признак различия — светлота: соседние по кругу чередуются между 0,905 и 0,862 по OKLCH, потому что 37,5° по тону на пастели различаются хуже, чем хочется на доске из тридцати карточек. Регистр отличает их от сигналов: категория это бледная заливка с тёмным текстом, сигнал — насыщенная краска под текстом и границей. Поэтому --sched-6 (25°) не читается как ошибка, хотя стоит рядом с --danger. */ --sched-1-bg: #d9daff; --sched-1-ink: var(--ink); /* 285.0° */ --sched-2-bg: #eac5f1; --sched-2-ink: var(--ink); /* 322.5° */ --sched-3-bg: #ffcce0; --sched-3-ink: var(--ink); /* 0.0° */ --sched-4-bg: #ffc3b5; --sched-4-ink: var(--ink); /* 37.5° */ --sched-5-bg: #ffd8ac; --sched-5-ink: var(--ink); /* 75.0° */ --sched-6-bg: #d8d8a1; --sched-6-ink: var(--ink); /* 112.5° */ --sched-7-bg: #c3edc2; --sched-7-ink: var(--ink); /* 150.0° */ --sched-8-bg: #9ee4d6; --sched-8-ink: var(--ink); /* 187.5° */ /* Мероприятие на доске: «магическая» плашка, как в виджете расписания и в приложении. Своя пара цветов, а не тон направления: у мероприятия направления нет, и во всех схемах кабинета плашка одинакова. */ --event-magic-from: #2e2168; --event-magic-via: #62349a; --event-magic-to: #b24a86; --event-magic-gold: #ffd98c; --event-magic-ink: #fff; --event-magic-glow: rgb(255 204 112 / 30%); --event-magic-muted-ink: rgb(255 246 234 / 82%); --event-magic-full-ring: rgb(255 190 190 / 85%); --event-magic-shadow: 0 6px 16px rgb(62 30 120 / 22%); /* Нейтральные слои поверх цветной подложки: полоса зала на карточке занятия, штриховка «мест нет», блик сегмента когорт. Без тона, чтобы не спорить с краской под ними. */ --shade: rgb(0 0 0 / 8%); --shade-stripe: rgb(0 0 0 / 10%); --gloss: rgb(255 255 255 / 72%); /* Сегмент и ИИ-агент: две несигнальные идентичности со своим тоном. */ --segment-bg: #f0e9fa; --segment-border: #ddcff0; --segment-ink: #68458b; --ai-bg: #eceefb; --ai-border: #c3c8ee; --ai-ink: #3f4796; --ai-tag-bg: #e2e5fa; /* ------------------------------------------------------------------ Чернила борта. Боковая панель перестала быть ступенью холста и стала отдельной почти чёрной плоскостью. Значит, и текст на ней свой — --ink на #17171a не читается вовсе. Три роли те же, что у содержимого: основной пункт, иконка, подпись раздела. Метка «вы здесь» на борту — лайм из знака студии: в studio-logo.png точки нарисованы #78c030, и это единственная краска, которая на борту принадлежит продукту. Она не статус и не действие, поэтому живёт отдельным токеном. ------------------------------------------------------------------ */ --nav-ink: #c3cdd9; --nav-icon: #93a1b1; --nav-section: #9aa8b8; --nav-hover: #1e2b39; --nav-active-bg: #26374a; --nav-active-ink: #ffffff; --nav-marker: #8fb3d9; } /* --------------------------------------------------------------------------- Визуальный язык shadcn, перенесённый токенами. Сам shadcn — это React, Radix и Tailwind, и целиком сюда он не едет. Но «современно» в нём делает не React, а несколько решений о поверхности: граница вместо тени, кольцо фокуса со смещением, приглушённый заголовок без капитализации, крупная строка, цифры моноширинными знаками. Это переносится значениями. Токены построены поверх палитры кабинета, а не рядом с ней: --row-hover считается из --surface-2, --ring из --brand. Поэтому схема оформления ([data-scheme]), которая переопределяет палитру, получает их без второго набора правил. Осторожно с --muted: в этом файле это цвет ТЕКСТА, тогда как в shadcn --muted — это фон. Здесь ничего не переименовано; фон приглушённой поверхности так и остался --surface-2. --------------------------------------------------------------------------- */ :root { /* Кольцо фокуса. Раньше видимый фокус в кабинете рисовался где обводкой, где рамкой, где сменой фона, и на тёмной строке таблицы его не было видно вовсе. Смещение в 2px обязательно: без него кольцо садится вплотную к границе ячейки и сливается с ней. */ --ring: var(--brand); --ring-w: 2px; --ring-offset: 2px; /* Ритм таблицы. Строка была 9px сверху и снизу — при 14px шрифта это 32px высоты, то есть плотность отчёта, а не рабочего списка: строки сливаются и глаз теряет ту, по которой ведёт. 48px — та же высота, что у кнопки и поля ввода, поэтому строка с элементом управления внутри не распирает соседние. --row-h-sm остаётся для вложенных таблиц в панелях, где на экран должно поместиться больше. */ --row-h: 44px; --row-h-sm: 38px; /* Высота однострочного контрола. Ровно та же, что у .hui-button: поле и кнопка стоят рядом в каждой панели фильтров, и до этого расходились на четыре пикселя — поле 36, кнопка 40. При align-items: end это давало заметный уступ. Одно число на оба, чтобы они не разъезжались снова. */ --control-h: 36px; --cell-x: 14px; --head-h: 40px; /* Подъём панели над холстом. Панель отделяется границей, тень только намекает на слой — один пиксель, а не облако. Тёмная тема переопределяет его ниже: там та же тень должна быть плотнее. */ --lift: 0 1px 2px rgb(15 23 42 / 5%); /* Наведение и выделение строки. Прежний --surface-2 целиком давал плашку заметнее, чем выделение выбранной строки, — наведение кричало громче состояния. Через color-mix та же краска берётся вполсилы. */ --row-hover: color-mix(in srgb, var(--surface-2) 55%, transparent); --row-selected: color-mix(in srgb, var(--brand-tint) 70%, transparent); /* Цвет подписи колонки. Заголовок перестал быть прописным и разряженным: ЗАГЛАВНЫЕ с letter-spacing читаются по буквам, а не словом, и в русском это дороже, чем в английском — слова длиннее. Вес 500 и обычный регистр отделяют заголовок от данных не криком, а тоном. */ --head-ink: var(--muted); /* Ширина, ниже которой таблица уезжает в горизонтальную прокрутку вместо того, чтобы ломать колонки в нечитаемые столбики по одному слову. */ --table-min: 720px; } /* --------------------------------------------------------------------------- Схемы кабинета. Тёмной темы больше нет: одна светлая поверхность, три палитры поверх неё. Схема — это акцент и борт вместе, а не два независимых тумблера: борт под акцент подбирается так, чтобы чернила на нём брали AA, и разрешать их произвольные пары значило бы разрешить нечитаемые. Базовая схема живёт в :root выше — она же значение по умолчанию, если в localStorage ничего нет. Ниже только отличия. Каждая схема несёт и свою восьмёрку направлений: сектор акцента ±33° остаётся пустым, иначе категория занятия читается как родственница главной кнопки. Значения посчитаны, а не подобраны, и проверяются тестом test_cabinet_colour_contract. --------------------------------------------------------------------------- */ /* Хвоя */ :root[data-scheme="forest"] { --brand: #2f5d4a; --brand-ink: #24523f; --brand-hover: #4e7d69; --on-brand: #ffffff; --marker: #2f5d4a; --on-marker: #ffffff; --selected: #deeee6; --info: #2563eb; --info-soft: #eff6ff; --info-border: #bfdbfe; --sidebar: #ffffff; --nav-ink: #44514a; --nav-icon: #5e6b65; --nav-section: #5e6b65; --nav-hover: #eef3ef; --nav-active-bg: #e4efe8; --nav-active-ink: #14231c; --nav-marker: #2f5d4a; /* Борт светлый — знак студии выворачивать нельзя, он и так почти чёрный. */ --logo-filter: none; --sched-1-bg: #a6eff1; --sched-1-ink: var(--ink); /* 198.0° */ --sched-2-bg: #a5dcfc; --sched-2-ink: var(--ink); /* 234.7° */ --sched-3-bg: #cedeff; --sched-3-ink: var(--ink); /* 271.5° */ --sched-4-bg: #e1c7f9; --sched-4-ink: var(--ink); /* 308.2° */ --sched-5-bg: #ffcdeb; --sched-5-ink: var(--ink); /* 345.0° */ --sched-6-bg: #ffc2bf; --sched-6-ink: var(--ink); /* 21.7° */ --sched-7-bg: #ffd5b1; --sched-7-ink: var(--ink); /* 58.5° */ --sched-8-bg: #e2d49e; --sched-8-ink: var(--ink); /* 95.2° */ } /* Уголь — кабинет, каким он был до круга схем: тот же стальной акцент, но борт нейтрально-чёрный, а не уведённый в синеву акцента, и ориентир на нём лаймовый. Оставлен схемой по просьбе Ярослава. От «Основной» отличается только бортом и его лестницей: холст, панель и чернила содержимого те же. --faint взят нынешний, а не прежний: тот стоял ровно на пороге AA и на «выбранном» уходил под него. */ :root[data-scheme="charcoal"] { --brand: #3f5d7d; --brand-ink: #33506e; --brand-hover: #557697; --marker: #3f5d7d; --selected: #e6edf4; --sidebar: #17171a; --nav-ink: #c8ccd4; --nav-icon: #9aa0ab; --nav-section: #959aa4; --nav-hover: #26262b; --nav-active-bg: #2c2c33; --nav-active-ink: #ffffff; --nav-marker: #a3e635; --sched-1-bg: #dadaff; --sched-1-ink: var(--ink); --sched-2-bg: #ebc4f0; --sched-2-ink: var(--ink); --sched-3-bg: #ffccde; --sched-3-ink: var(--ink); --sched-4-bg: #ffc4b2; --sched-4-ink: var(--ink); --sched-5-bg: #fcdaab; --sched-5-ink: var(--ink); --sched-6-bg: #d4d9a3; --sched-6-ink: var(--ink); --sched-7-bg: #beeec7; --sched-7-ink: var(--ink); --sched-8-bg: #9ce3dc; --sched-8-ink: var(--ink); } /* Бухта */ :root[data-scheme="bay"] { --brand: #0f617d; --brand-ink: #005671; --brand-hover: #004560; --marker: #0f617d; --selected: #d8eef8; --hover: #e7f6fd; /* Справка уходит в синий: тил стоит в 37° от циана. Порог контракта (32°) он проходит, но впритык, а «подсказка» рядом с действием читается как приглушённое действие. Запас взят до 40°. */ --info: #2563eb; --info-soft: #eff6ff; --info-border: #bfdbfe; /* Холст холоднее базового, борт — ступень под ним. Светлый борт держится ступенью, а не границей: это вторая механика из мокапов, у «Хвои» другая. */ --bg: #f4f6f8; --surface-2: #eaeff3; --border: #d1dae3; --sidebar: #e5ebf2; --nav-ink: #33424c; --nav-icon: #4c5c66; --nav-section: #51616b; --nav-hover: #dbe4ed; --nav-active-bg: #d0dde9; --nav-active-ink: #12242e; --nav-marker: #0f617d; --logo-filter: none; --sched-1-bg: #cbdfff; --sched-1-ink: var(--ink); /* 267.5° */ --sched-2-bg: #dcc9fc; --sched-2-ink: var(--ink); /* 302.5° */ --sched-3-bg: #ffcef1; --sched-3-ink: var(--ink); /* 337.5° */ --sched-4-bg: #ffc1c6; --sched-4-ink: var(--ink); /* 12.5° */ --sched-5-bg: #ffd2b7; --sched-5-ink: var(--ink); /* 47.5° */ --sched-6-bg: #ebd09e; --sched-6-ink: var(--ink); /* 82.5° */ --sched-7-bg: #dbe7b1; --sched-7-ink: var(--ink); /* 117.5° */ --sched-8-bg: #b0e2bd; --sched-8-ink: var(--ink); /* 152.5° */ } * { box-sizing: border-box; } /* Те же пиксели, что и раньше, но из токенов: --ring-w и --ring-offset уже держат кнопки HeroUI и заголовки таблиц. Раньше это правило повторяло их значения числами, и сменить толщину кольца значило найти все места. */ *:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); } /* The reduced-motion block below already turned this off; it was overriding a declaration that never existed, so in-page anchors jumped. */ html { scroll-behavior: smooth; } /* Атрибут hidden прячет всегда. Браузерное [hidden] проигрывает любому правилу с display — flex у label, grid у формы, inline-flex у кнопки, — и каждая такая пара заводила своё «X[hidden] { display: none }»: их было три десятка по файлу, а забытая давала элемент, видимый с hidden. Показать скрытое значит снять атрибут, а не перебить его стилем. */ [hidden] { display: none !important; } body { margin: 0; font-family: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Ссылка отличается от текста не только цветом. Требование WCAG 1.4.1: если ссылку в тексте выделяет один цвет, он обязан отстоять от цвета текста на 3:1. Тёмно-зелёный давал 2,07:1 к чернилам, то есть критерий был провален и до графита; с ахроматическим действием стало бы 1,21:1. Подчёркивание снимает вопрос и заодно возвращает ссылке привычный вид. Компоненты, которым подчёркивание не нужно (навигация, кнопки-ссылки, карточки), гасят его сами — таких правил в файле три десятка. */ a { color: var(--brand-ink); text-decoration: underline; /* Волосяная линия, а не жирная черта: в таблице кабинета ссылка стоит в каждой второй ячейке, и сплошное подчёркивание превращает плотный экран в частокол. Признак при этом остаётся, а под курсором линия набирает полный вес. */ text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur) ease, text-decoration-color var(--dur) ease; } a:hover { text-decoration-color: currentColor; } /* App shell */ .app-shell { display: flex; align-items: flex-start; min-height: 100dvh; } .sidebar { position: sticky; top: 0; align-self: flex-start; flex: 0 0 250px; width: 250px; height: 100dvh; min-height: 0; display: flex; flex-direction: column; gap: 5px; background: var(--sidebar); border-right: 1px solid var(--border); padding: 18px 14px; overflow: visible; z-index: var(--z-sidebar); transition: width var(--dur) var(--ease), flex-basis var(--dur) var(--ease), padding var(--dur) var(--ease); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 38px; flex-shrink: 0; } .sidebar-logo { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; height: 38px; overflow: hidden; } .sidebar-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 38px; object-fit: contain; object-position: left center; } /* Знак нарисован почти чёрным (#101010) на прозрачном фоне, поэтому на тёмном холсте от него оставались одни лаймовые точки. Плашку логотипа делит с кабинетом клиентский контур, значит перерисовывать сам файл нельзя — берём тот же приём, которым это уже решено в client.css для .cp-brand-logo. Тень оттуда не переносится: там знак лежит на фотографии, здесь — на ровной поверхности, и тень была бы украшением. */ /* Знак нарисован почти чёрным. На тёмном борту его выворачивают, на светлом он читается как есть — поэтому фильтр принадлежит схеме, а не элементу. */ .sidebar-logo img { filter: var(--logo-filter, brightness(0) invert(1)); } .sidebar-collapse { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--nav-ink) 20%, var(--sidebar)); border-radius: var(--radius-sm); background: var(--nav-hover); color: var(--nav-icon); font: inherit; cursor: pointer; transition: color var(--dur) ease, background var(--dur) ease, border-color var(--dur) ease; } .sidebar-collapse:hover { color: var(--nav-active-ink); background: var(--nav-active-bg); border-color: color-mix(in srgb, var(--nav-ink) 38%, var(--sidebar)); } .sidebar-collapse:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .sidebar-collapse svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; text-decoration: none; color: var(--ink); } .brand-mark { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--logo); color: var(--on-logo); font-weight: 700; font-size: 16px; } .brand.big { font-size: 26px; color: var(--logo); } .sidenav { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; padding-bottom: 12px; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; } .sidenav > * { flex-shrink: 0; } .nav-section { padding: 14px 8px 4px; color: var(--nav-section); font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--nav-ink); text-align: left; text-decoration: none; font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; } .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item:hover { background: var(--nav-hover); } .nav-item:active { background: var(--nav-active-bg); } /* «Вы здесь» на борту: плотная плашка плюс лаймовая метка слева. Лайм взят из знака студии — точки в studio-logo.png, — и это единственная краска, которая на тёмном борту принадлежит продукту. Значение живёт в --nav-marker, а не здесь. */ .nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--nav-marker); } .nav-dropdown { position: relative; } .nav-parent { padding-right: 8px; } .nav-caret { display: inline-flex; margin-left: auto; color: var(--nav-section); } .nav-caret svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); } .nav-parent[aria-expanded="true"] .nav-caret svg, .nav-dropdown:hover .nav-caret svg, .nav-dropdown:focus-within .nav-caret svg { transform: rotate(90deg); } .nav-submenu { position: absolute; left: 100%; top: 0; z-index: var(--z-submenu); min-width: 210px; display: none; padding: 6px; background: var(--nav-active-bg); border: 1px solid color-mix(in srgb, var(--nav-ink) 22%, var(--nav-active-bg)); border-radius: var(--radius-md); box-shadow: var(--shadow); } .nav-dropdown:hover > .nav-submenu, .nav-dropdown:focus-within > .nav-submenu { display: grid; gap: 3px; } .nav-subitem { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--nav-ink); text-decoration: none; font-size: 13px; line-height: 1.2; } .nav-subitem:hover { background: var(--nav-hover); color: var(--nav-active-ink); } .nav-subitem.active { background: color-mix(in srgb, var(--nav-ink) 16%, var(--nav-active-bg)); color: var(--nav-active-ink); font-weight: 600; } .nav-icon { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--nav-icon); } /* Один набор символов вместо юникодных глифов: одинаковая сетка, одинаковая толщина обводки, ни одного повтора среди видимых пунктов меню. */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .nav-item:hover .nav-icon { color: var(--nav-active-ink); } .nav-item.active .nav-icon { color: var(--nav-active-ink); } @media (min-width: 901px) { html[data-sidebar-collapsed="true"] .sidebar { flex-basis: 68px; width: 68px; padding-right: 12px; padding-left: 12px; } html[data-sidebar-collapsed="true"] .sidebar-header { justify-content: flex-end; } html[data-sidebar-collapsed="true"] .sidebar-logo, html[data-sidebar-collapsed="true"] .nav-section, html[data-sidebar-collapsed="true"] .nav-label, html[data-sidebar-collapsed="true"] .nav-caret { display: none; } html[data-sidebar-collapsed="true"] .sidebar-collapse { width: 34px; padding: 0; } html[data-sidebar-collapsed="true"] .sidebar-collapse svg { transform: rotate(180deg); } html[data-sidebar-collapsed="true"] .sidenav { align-items: stretch; } /* Свёрнутая карточка — снова флекс: остаются одни кнопки. */ html[data-sidebar-collapsed="true"] .sidebar-account { display: flex; width: 100%; justify-content: center; gap: 0; padding-right: 4px; padding-left: 4px; } html[data-sidebar-collapsed="true"] .sidebar-account-icon, html[data-sidebar-collapsed="true"] .sidebar-account-copy { display: none; } /* В свёрнутом меню две кнопки не помещаются в ряд — встают столбиком. */ html[data-sidebar-collapsed="true"] .sidebar-account:has(.sidebar-account-link) { flex-direction: column; gap: 6px; } html[data-sidebar-collapsed="true"] .sidebar-account-link, html[data-sidebar-collapsed="true"] .sidebar-account-link + .sidebar-logout-form { margin: 0; } html[data-sidebar-collapsed="true"] .sidebar-logout-form { width: auto; height: 34px; margin-right: auto; margin-left: auto; } html[data-sidebar-collapsed="true"] .sidebar-logout { width: 34px; height: 34px; min-height: 34px; padding-right: 0; padding-left: 0; } html[data-sidebar-collapsed="true"] .nav-item { position: relative; justify-content: center; gap: 0; padding: 8px; } html[data-sidebar-collapsed="true"] .nav-parent { padding-right: 8px; } html[data-sidebar-collapsed="true"] .nav-submenu { left: calc(100% + 12px); } /* Невидимый мост перекрывает визуальный зазор между иконкой и слоем. Без него курсор на 12px покидал весь .nav-dropdown, :hover снимался и подменю исчезало раньше, чем до него можно было дойти. */ html[data-sidebar-collapsed="true"] .nav-submenu::before { content: ""; position: absolute; inset-block: -1px; inset-inline-end: 100%; inline-size: 13px; } html[data-sidebar-collapsed="true"] .nav-badge { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9px; } } .avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--on-brand); font-size: 13px; font-weight: 700; } .username { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; } .main-shell { flex: 1; min-width: 0; } .topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 12px; padding: 6px 26px; background: color-mix(in srgb, var(--topbar) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .topbar-heading { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } .topbar-section, .topbar-title { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; } .topbar-section { flex: 0 1 auto; color: var(--muted); } .topbar-divider { flex: 0 0 auto; color: var(--faint); font: inherit; font-weight: 400; } .topbar-title { flex: 1 1 auto; color: var(--ink); } .topbar-chips { --topbar-control-height: 32px; display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } /* Учётка и завершение сессии замыкают сайдбар одним нижним блоком. */ .sidebar-account-stack { display: flex; flex-shrink: 0; align-items: stretch; gap: 6px; min-width: 0; margin-top: auto; } /* Карточка — сетка в две строки. Первая — значок, имя и кнопки «База знаний» и «Выйти», выровненные по общему центру; вторая — роль, от колонки имени до правого края. Пока роль стояла под именем в узкой колонке между значком и двумя кнопками, «Администратор» обрезался до «Администра…» и читался только во всплывающей подсказке. Имя по-прежнему может обрезаться; роль переносится, но не обрезается. */ .sidebar-account { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; flex: 1 1 auto; align-items: center; column-gap: 9px; row-gap: 0; width: 100%; min-width: 0; min-height: 48px; margin-top: 0; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--nav-ink) 18%, var(--sidebar)); border-radius: var(--radius-sm); background: var(--nav-hover); color: var(--nav-ink); white-space: nowrap; } .sidebar-account-icon { width: 28px; height: 28px; grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--nav-active-bg); color: var(--nav-ink); } .sidebar-account-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sidebar-account-copy { display: contents; line-height: 1; } .sidebar-account-name { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; } .sidebar-account-role { grid-column: 2 / -1; grid-row: 2; align-self: start; margin-top: 2px; color: var(--nav-section); font-size: 12px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; } /* Бургер и затемнение нужны только на узких экранах. */ .nav-burger, .nav-scrim { display: none; } /* --------------------------------------------------------------------------- Combobox, перенесённый из shadcn/ui. Там это Popover + Command на Radix и cmdk; сюда едет не React, а решения о поверхности: контурный триггер во всю ширину с шевроном вполсилы, всплывающий список без своих отступов, пункт с галочкой слева — она занимает место всегда, чтобы подписи не прыгали при смене выбора. Строка фильтра из cmdk не поехала: схем три, и поле поиска над тремя строками только просит, чтобы в него печатали. Живёт в верхней полосе на месте прежнего тумблера темы. Тёмной темы больше нет, переключается схема — акцент и борт вместе. --------------------------------------------------------------------------- */ .hui-combobox { position: relative; display: inline-flex; } .hui-combobox-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 168px; height: var(--topbar-control-height); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: var(--lift); transition: background var(--dur) ease, border-color var(--dur) ease; } .hui-combobox-trigger:hover { background: var(--hover); } .hui-combobox-trigger:focus-visible { outline: var(--ring-w) solid var(--ring); outline-offset: var(--ring-offset); } .hui-combobox-caret { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* Шеврон в shadcn стоит вполсилы: это подсказка, а не элемент управления. */ opacity: .5; } .hui-combobox-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-menu); /* 208px здесь стояли под строку фильтра. Её нет — список равняется по триггеру, как в shadcn, и дальше растёт по самой длинной подписи. */ min-width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow); overflow: hidden; } .hui-combobox-list { display: grid; gap: 2px; padding: 4px; } .hui-combobox-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.2; text-align: left; cursor: pointer; } .hui-combobox-option:hover { background: var(--hover); } .hui-combobox-option:focus-visible { outline: none; background: var(--selected); } .hui-combobox-option[aria-selected="true"] { background: var(--selected); font-weight: 600; } .hui-combobox-check { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; /* Галочка занимает место всегда: иначе подписи прыгают при смене выбора. */ opacity: 0; } .hui-combobox-option[aria-selected="true"] .hui-combobox-check { opacity: 1; } /* HeroUI Popover для серверной Jinja-разметки. В React-компоненте содержимое живёт в portal; здесь app.js делает то же самое, поэтому слой не обрезается таблицей, drawer или прокруткой контейнера. */ .hui-popover { position: relative; display: inline-flex; } .hui-popover__content { position: fixed; z-index: var(--z-menu); width: max-content; max-width: min(380px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow); outline: none; } .hui-popover__dialog { max-height: min(360px, calc(100vh - 32px)); padding: 14px; overflow: auto; } .hui-popover__heading { margin: 0 0 8px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3; } .hui-popover__arrow { position: absolute; left: var(--hui-popover-arrow-left, 50%); width: 10px; height: 10px; border: solid var(--border); background: var(--surface-raised); transform: translateX(-50%) rotate(45deg); pointer-events: none; } .hui-popover__content[data-placement="bottom"] .hui-popover__arrow { top: -6px; border-width: 1px 0 0 1px; } .hui-popover__content[data-placement="top"] .hui-popover__arrow { bottom: -6px; border-width: 0 1px 1px 0; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 600; } .sidebar-logout-form { display: inline-flex; width: auto; height: 34px; flex: 0 0 auto; grid-column: 4; grid-row: 1; margin: 0 0 0 auto; } .sidebar-logout { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: var(--radius-sm); /* Выход завершает сессию, но не удаляет данные, поэтому остаётся контурным. Необратимые удаления используют заполненный danger-вариант. */ border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--sidebar)); background: var(--nav-hover); color: color-mix(in srgb, var(--danger) 62%, var(--nav-ink)); font: inherit; line-height: 1; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .sidebar-logout:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 26%, var(--sidebar)); color: var(--on-danger); } .sidebar-logout:active { transform: translateY(1px); } /* База знаний — соседняя кнопка той же формы, но нейтральная: это переход, а не завершение сессии. Кнопка забирает auto-отступ, выход встаёт рядом на обычный зазор карточки. */ .sidebar-account-link { display: inline-flex; flex: 0 0 auto; grid-column: 3; grid-row: 1; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; border: 1px solid color-mix(in srgb, var(--nav-ink) 18%, var(--sidebar)); border-radius: var(--radius-sm); background: var(--nav-hover); color: var(--nav-ink); text-decoration: none; transition: background .18s ease, color .18s ease; } .sidebar-account-link:hover { background: var(--nav-active-bg); color: var(--nav-active-ink); } .sidebar-account-link + .sidebar-logout-form { margin-left: 0; } .sidebar-logout-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; } .sidebar-logout-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .chip.dark { background: var(--ink); border-color: var(--ink); color: var(--bg); } .container { max-width: 1100px; margin: 22px auto; padding: 0 18px; } .container.wide { max-width: 1360px; } .app-shell .container { max-width: 1280px; margin: 0 auto; padding: 24px 26px 52px; } .app-shell .container.wide { max-width: 1500px; } .app-shell .container.dashboard-container { max-width: none; width: 100%; } .app-shell .container.expenses-container { max-width: none; width: 100%; } /* Мероприятия — список, как остальные модули-списки, во всю ширину: общий потолок .operations-container не действовал, его перебивал .app-shell. */ .app-shell .container.events-container { max-width: none; width: 100%; } .app-shell .container.branches-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .app-shell .container.shelf-products-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } /* Оптимизатор расписания: три вкладки на 20 % шире обычной страницы кабинета — сетка с колонкой «Относительно шаблона» и таблица преподавателей иначе не помещаются. */ .container.schedule-optimizer-container { max-width: 1320px; } .app-shell .container.schedule-optimizer-container { max-width: 1536px; } .app-shell .container.checkout-orders-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .app-shell .container.shifts-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .shifts-open-header h2 { margin: 0; } .app-shell .container.contracts-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .shifts-table { width: 100%; } .shifts-table th, .shifts-table td { width: auto; white-space: nowrap; } .shifts-history-pagination { margin-top: 16px; } .cash-delta { font-weight: 800; } .cash-delta.positive { color: var(--ok-ink); } .cash-delta.negative { color: var(--err); } .app-shell .container.communications-container, .app-shell .container.wide-container, .app-shell .container.tasks-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .app-shell .container.clients-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .app-shell .container.staff-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .app-shell .container.users-container { max-width: none; width: 100%; margin: 0; padding-left: 18px; padding-right: 18px; } .branch-multiselect-field { display: grid; flex: 1 1 100%; min-width: 0; gap: 4px; } /* Подпись поля без