/* ═══════════════════════════════════════════════════════════ Идея: продукт торгует временем, значит герой интерфейса — шкала времени. Тёмная полоса-линейка с часовыми делениями, на которой брони висят как замеры на приборе. Инверсия: колонка навигации светлая и тихая, календарь — самый тёмный и плотный элемент. Инструмент важнее навигации. Правила, заданные ранее и сохранённые: · основа shadcn/ui · светлая тема · шахматка первым экраном · адаптивная плотность · одно окно — одна задача · цвет отдан статусам, действия почти чёрные ═══════════════════════════════════════════════════════════ */ /* ── Размер экрана ─────────────────────────────────────────── Один множитель на весь инструмент: на большом мониторе шахматка должна становиться крупнее, а не тонуть в полях. Через него выражены высоты, ширины и кегли обеих раскладок, поэтому шаг меняет их согласованно и не спорит с «Плотно/Свободно» — та остаётся выбором пользователя, а это свойство экрана. Шаги привязаны и к высоте: на широком, но низком мониторе строки не растут, иначе неделя перестанет помещаться. */ :root{ --ui:1 } @media (min-width:1680px) and (min-height:900px){ :root{ --ui:1.08 } } @media (min-width:2100px) and (min-height:1100px){ :root{ --ui:1.2 } } :root{ /* бумага и поверхности — тёплый нейтрал, но не «AI-крем» */ --paper:#EBEAE6; --card:#FFFFFF; --sunk:#E1E0DA; --rule:#C9C6BE; --rule-2:#EDECE8; /* чернила */ --ink:#191815; --ink-2:#57534B; --ink-3:#96918A; /* Акцент интерфейсного слоя: он носит действия — главную кнопку, выбранный раздел, знак площадки. Цвет статусов остаётся за статусами (§8.3). Пока это прежний тёмный тон; тон меняется здесь одним значением, разметку для этого трогать не нужно. */ --accent:#23211D; --accent-2:#2E2B26; --accent-ink:#EDEAE3; /* приборная полоса — сигнатурный элемент */ --band:#23211D; --band-2:#2E2B26; --band-3:#3A362F; --band-ink:#EDEAE3; --band-ink-2:#A39C90; --band-ink-3:#8C8478; /* статусы как пигменты на бумаге, а не как палитра фреймворка */ --ok:#1E5540; --ok-bg:#E9F1EC; --ok-line:#BED4C9; --wait:#8A5406; --wait-bg:#FBF0DC; --wait-line:#E6D2A3; --late:#8F2A1C; --late-bg:#FBEDEA; --late-line:#E8C4BC; --stop:#6B655F; --stop-bg:#EAE8E3; --stop-line:#D8D4CC; /* «Сейчас» — живой красный, а не жжёный оранжевый. Он соседствует с --late по тону, поэтому разведены по светлоте и по форме: «сейчас» — тонкая линия, «просрочено» — глубокий заливной блок. Красный приглушён: в этой палитре он единственный насыщенный, и чистый алый кричал бы громче всего на экране. */ --now:#B8453F; /* ── тона меток гостя (SPEC §4.7, §8.3) ── Единственный набор, из которого цвет выбирает клиент, а не мы. Он отделён от статусов нарочно: заливка со словом внутри, а не точка и линия, и глубина другая — это язычок картотеки, наклеенный на карточку, а не состояние дела. Шесть, а не свободный hex: клиент не обязан считать контраст, это наша работа. Пары «заливка · чернила» проверены на 4.5:1 (§8.3). */ --tag-1-bg:#F1D9D3; --tag-1-ink:#8B2A1B; /* кирпич */ --tag-2-bg:#F0E3C6; --tag-2-ink:#77500A; /* охра */ --tag-3-bg:#D5E4DB; --tag-3-ink:#1D5340; /* хвоя */ --tag-4-bg:#D6E0EA; --tag-4-ink:#234E6C; /* вода */ --tag-5-bg:#E4DBE9; --tag-5-ink:#573768; /* слива */ --tag-6-bg:#DFDCD5; --tag-6-ink:#37332C; /* графит */ /* ── тона знака человека (SPEC §8.5) ── Цвет не отвечает на вопрос о деле — он опознаёт человека, как кружок сотрудника в колонке смены. Тона глухие и тёмные: буквы на них светлые, и со светлыми наклейками меток они не спорят. Выводятся из ключа гостя, а не выбираются (guest-avatar.mjs). */ --av-1:#3E4761; --av-2:#2C5E3C; --av-3:#6B4F30; --av-4:#5A3550; --av-5:#1F5560; --av-6:#6B3A33; --av-ink:#F2F0EB; /* Приборная плита (§8.5) тёмная в обеих темах, и чернила у неё свои. Вторичный тон светлее общего --band-ink-2 ровно настолько, чтобы держать 4.5:1 под пятном света; статусы подняты под лак — тона палитры рассчитаны на бумагу и на тёмном читаются грязью. Раньше каждый экран держал свою копию, и зелёных на плитах было пять. */ --plate-ink-2:#BBB4A6; --plate-ink-3:#ADA596; --plate-hi:#FFFFFF; --plate-ok:#9FD3B7; --plate-wait:#E8B35A; --plate-late:#F39A88; /* Текст на заливке статуса («сегодня», счётчик, отметка, «Отменить»). В тёмной теме заливки светлеют, белый на них падает до 3:1, и текст становится тёмным (theme.css). */ --on-status:#FFFFFF; /* Ширина под фактическое содержимое: две строки текста ушли, и прежние 200 px оставляли пустоту справа от коротких названий. */ --label-w:calc(170px * var(--ui)); /* Число в линейке и в датах календарей — общий кегль: они говорят одно и то же в двух раскладках и должны расти вместе. */ --fs-date:calc(12.5px * var(--ui)); /* Нерабочий день — выходной или праздник — везде подложен одним тоном: на бумаге чернилами, на приборной полосе светом. Прежние 2,2 % давали на бумаге разницу в полторы единицы яркости: признак формально был, а на экране его не было. */ --off-paper:rgba(25,24,21,.05); --off-band:rgba(255,255,255,.055); /* ── серии графиков (аналитика и отчёты) ── Три серии, и цвет следует за сущностью: «сутки» — всегда вода, «часы» — мёд, «услуги и товары» — слива, где бы они ни стояли. Набор отделён от статусов (§8.3): зелёный, янтарный и красный остаются ответом на вопрос о деле, а эти три — только опознание серии. Проверены валидатором dataviz по шести проверкам: светлота, цветность, различимость при цветослепоте (ΔE ≥ 15 у соседей), контраст ≥ 3:1. */ --viz-night:#2B72B0; --viz-hour:#B08321; --viz-extras:#7C4F8F; /* Приглушённая серия — фон для сравнения («состоялось», «год назад»): тише линовки не бывает, но и с ней не сливается. */ --viz-mute:#D3D0C8; /* ── лист документа ── Бумага одна в любой теме: лист печатают, и на экране он должен быть тем, что выйдет из принтера, поэтому тёмная тема этих значений не трогает. Тон заведения касается только плашки суммы и черт; пять тонов проверены на контраст черты по белому и на светлоту плашки в чёрно-белой печати (doc-sheet.test.mjs). */ --doc-paper:#FFFFFF; --doc-ink:#191815; --doc-ink-2:#57534B; --doc-ink-3:#6F6A63; --doc-rule:#C9C6BE; --doc-rule-2:#E4E2DC; --doc-tone-ink:#191815; --doc-tone-pine:#2E5A48; --doc-tone-sea:#2F4F6B; --doc-tone-brick:#8A3A2C; --doc-tone-plum:#5B3A55; /* скругления Шкала одна, и ступень выбирается по предмету, а не на глаз. Раньше в стилях жило двадцать разных радиусов от 1 до 100 px, и соседние кнопки одного ряда различались на пиксель — это читалось сборкой из кусков. xs 3 — мелкое до 20 px: метка, печать, клавиша, плашка времени; sm 5 — мелкие органы управления и ячейки; r 8 — кнопки, поля, плашки броней, всплывающие подсказки; lg 12 — крупные кнопки, панели, карточки, всплывающие окна; xl 16 — окна, листы, строка поиска виджета; pill — то, чем выбирают, и счётчики: радиус в половину высоты; mark — квадратный знак (человек, объект, листок числа): доля стороны, чтобы знак оставался тем же предметом в любом размере; 50 % — точки и круглые кнопки. Тонкая полоса (риска, шкала, доля) скругляется на половину толщины — это pill. Вложенное скругление концентрично: внешнее минус отступ, `calc(var(--r) - 2px)` у кнопки внутри обоймы с полями в 2 px. */ --r-xs:3px; --r-sm:5px; --r:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px; --r-mark:27%; /* знак предупреждения — Lucide circle-alert (ISC), маской: цвет он берёт от текста. Один на продукт: предупреждение говорит знаком и тоном, а не цветной кромкой у края плашки. */ --glyph-alert:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpath d=%27M12 8v4M12 16h.01%27/%3E%3C/svg%3E"); --sh-1:0 1px 2px rgba(25,24,21,.05), 0 0 0 1px rgba(25,24,21,.05); --sh-2:0 1px 2px rgba(25,24,21,.04), 0 6px 16px rgba(25,24,21,.06), 0 0 0 1px rgba(25,24,21,.05); --sh-3:0 8px 18px rgba(25,24,21,.07), 0 20px 44px rgba(25,24,21,.10), 0 0 0 1px rgba(25,24,21,.06); --sh-modal:0 28px 56px -14px rgba(25,24,21,.30), 0 0 0 1px rgba(25,24,21,.07); --font:"Golos Text","Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono","SF Mono",Menlo,monospace; /* движение Подпись движения у продукта одна, как и шрифт: разгон в начале и долгое затухание в конце — так останавливается тяжёлое, а не пружинит лёгкое. Отскока нет нигде: администратор переключает разделы десятки раз за смену, и на десятый раз отскок раздражает. Длительностей ровно три, и выбираются они не на глаз, а по тому, что именно движется: отклик на нажатие, переезд по экрану, приход нового содержания. Четвёртая длительность означала бы, что для одного движения не нашлось места среди трёх. */ --ease:cubic-bezier(.2,.8,.3,1); --t-tap:.12s; --t-move:.24s; --t-page:.28s; /* Смена темы: цвета перетекают ровно, равными долями, без подписи движения. Элемент со своим движением (окно, шторка, колонка меню) дописывает это к своему переходу, а не отдаёт переход целиком: одно правило на всех стирало выезд окна, и оно появлялось рывком. */ --theme-fade:color var(--t-page) linear,background-color var(--t-page) linear,border-color var(--t-page) linear; } /* плотность */ /* В ленте плотность задаёт высота строки, в колонках дней — зазор между карточками и их поля: там высоту диктует содержимое дня. */ [data-density="compact"]{ --row-h:calc(60px * var(--ui)); --fs:calc(12.5px * var(--ui)); --fs-s:calc(11px * var(--ui)); --fs-xs:calc(10px * var(--ui)); --dg-gap:calc(6px * var(--ui)); --dg-pad-x:calc(7px * var(--ui)); --dg-pad-y:calc(13px * var(--ui)); --dg-pad:calc(8px * var(--ui)) calc(7px * var(--ui)); } [data-density="cozy"]{ --row-h:calc(76px * var(--ui)); --fs:calc(13.5px * var(--ui)); --fs-s:calc(12px * var(--ui)); --fs-xs:calc(11px * var(--ui)); --dg-gap:calc(8px * var(--ui)); --dg-pad-x:calc(9px * var(--ui)); --dg-pad-y:calc(17px * var(--ui)); --dg-pad:calc(11px * var(--ui)) calc(9px * var(--ui)); }