/* Дизайн-система «М01.Маркетинг». Палитра и правила движения — из docs/08-фирменный-стиль.md, разделы и UX — из docs/09-ux-селектора.md. Никаких сборщиков, фреймворков и внешних загрузок: обычный CSS поверх серверных шаблонов Jinja2. Имена компонентов — контракт для всех экранов: .knopka кнопка: основная (по умолчанию), --konturnaya, --opasnaya .kartochka карточка группы или блока: __shapka, __zagolovok, __schet .pole поле формы: label + ввод + __podpis; __ryad и __edinitsa .tablitsa таблица отчёта: __chislo для числовых ячеек .plashka сообщение на странице: --uspeh, --preduprezhdenie, --oshibka, --info (плюс синонимы --ok, --warn, --error под коды message() из app/templating.py) .uvedomlenie всплывающий тост (создаётся M01.uvedomit из base.html) .perekluchatel сегментный переключатель периода: __punkt, --aktivnyy .metka-otkloneniya стрелка и число отклонения: --rost, --padenie, --neytralnaya .plan-metka метка выполнения плана: --vypolnen, --blizko, --provalen .polosa-zapolneniya полоска «заполнено N из M»: __dolya, --gotovo .ikona инлайновый SVG-значок из набора символов base.html .bloki h1 в шапке: вкладки блоков «Селектор» и «Маркетинг» .vybor-bloka страница выбора блока: две крупные карточки .zagolovok-ekrana заголовок содержимого страницы (h2 — h1 занят шапкой) Единые компоненты фильтров (разметка — app/templates/components.html, поведение — app/static/components.js; правка здесь применяется во всех разделах, docs/09, раздел 2): .filtry форма фильтров экрана: __ryad, __tumblery, --odin .tumbler тумблер: __vhod, __dorozhka, __begunok, __podpis .tumbler-gruppa стрелка множественного выбора + тумблер .vybor раскрывающийся множественный выбор: __strelka, __panel, __punkt .vypadayushchiy кастомный выпадающий список: __nadpis, __okno, __knopka, __znachenie, __spisok, __punkt .kalendar календарь периода — стили в app/static/kalendar.css (там же закреплённая панель .filtry--zakreplennye); здесь их нет намеренно, см. заметку в разделе календаря .bez-js элемент нужен только без JavaScript (запасная кнопка «Применить»); .est-js-tolko — наоборот. Метку .est-js на ставит строка в base.html. Ежедневные действия не анимируются (docs/08): у кнопок только отклик нажатия, переходы и сохранения мгновенны. Анимация есть у редкого — тостов и листа «Ещё» — и только через transform/opacity, быстрее 300 мс, без ease-in. */ /* ========================================================================== Токены ========================================================================== */ :root { /* Фирменный красный — ровно из docs/08. */ --m01-red-accent: #dd2b1b; /* акценты, иконки, активная вкладка, текст-ссылка */ --m01-red-solid: #c81f12; /* заливка кнопок под белый текст */ --m01-red-press: #b81e11; /* нажатое состояние */ --m01-red-bright: #f5301c; /* только декор: градиенты, подсветка логотипа */ --m01-red-tint: #fdecea; /* фон плашек и выделенных строк */ /* Нейтральные. Тема системы строго светлая (решение заказчика от 04.09.2026, docs/08): тёмных переопределений не существует, эти значения — единственные. */ --m01-text: #0e0e10; --m01-text-muted: #5b5f66; --m01-border: #e6e7ea; --m01-bg: #f6f7f9; --m01-surface: #ffffff; /* Статусы. */ --m01-ok: #16a34a; --m01-warn: #d97706; --m01-error: #b42318; /* Голубой прогноза на диаграммах (правка заказчика от 05.09.2026, п. 11: прогноз сливался с фирменным красным). Только для графики: с белым фоном контраст 3,82:1 — выше порога 3:1 для графических объектов, но для текста этот цвет не использовать. */ --m01-goluboy: #2f86d6; /* Движение: ease-in запрещён, эти две кривые — единственные в системе. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* Красный текстом. #dd2b1b проходит AA только на белом (4,73:1), а на сером фоне страницы #f6f7f9 даёт лишь 4,42:1 — а на этом фоне красным набраны меню, «Выйти» и ссылки. Поэтому текстом идёт более глубокий --m01-red-solid: 5,35:1 на фоне и 5,74:1 на белом. Сами значения красных токенов не меняются — меняется выбор. */ --aktsent-tekst: var(--m01-red-solid); /* Плашки статусов: фон, текст и рамка подобраны с запасом контраста (тексты ошибок и предупреждений — тёмные на светлой подложке). */ --fon-uspeha: #e8f6ee; --ramka-uspeha: #bfe0cd; --tekst-uspeha: #166534; --fon-preduprezhdeniya: #fdf3e3; --ramka-preduprezhdeniya: #f0d7a8; --tekst-preduprezhdeniya: #8a4b06; --fon-oshibki: var(--m01-red-tint); --ramka-oshibki: #f3c4bd; --tekst-oshibki: #b42318; /* 5,75:1 на --m01-red-tint (docs/08) */ --fon-informatsii: #f0f1f4; --ramka-informatsii: #dfe2e7; /* Стекло: только шапка, нижняя панель, лист меню, модальные, уведомления. На формах ввода и таблицах отчётов — запрещено (docs/08). */ --steklo-fon: rgba(255, 255, 255, 0.72); --steklo-razmytie: 16px; /* не больше 20px — тяжёлое размытие дорого в Safari */ /* Прочее. */ --navedenie-stroki: #f1f2f5; /* подсветка строки таблицы под курсором */ --radius: 10px; /* поля и кнопки */ --radius-kartochki: 14px; /* Одна ширина содержимого на все страницы: шапка и вкладки не прыгают при переходах между разделами (правка заказчика от 05.09.2026, docs/09, раздел 14, п. 13). Сводка своё переопределение убрала. */ --shirina-soderzhimogo: 1320px; --vysota-nizhney-paneli: 62px; /* --- Переходные синонимы для экранов, свёрстанных до дизайн-системы (vvod_den.html, entry.html). Новый код берёт токены --m01-*. --- */ --fon: var(--m01-bg); --karta: var(--m01-surface); --tekst: var(--m01-text); --tekst-tusklyy: var(--m01-text-muted); --ramka: var(--m01-border); --osnovnoy: var(--aktsent-tekst); --osnovnoy-temnyy: var(--m01-red-press); --uspeh: var(--m01-ok); --uspeh-fon: var(--fon-uspeha); --oshibka: var(--tekst-oshibki); --oshibka-fon: var(--fon-oshibki); --info-fon: var(--fon-informatsii); --vnimanie: var(--tekst-preduprezhdeniya); } /* ========================================================================== База ========================================================================== */ * { box-sizing: border-box; } html { /* Полоса прокрутки резервируется всегда (ревизия от 05.09.2026, замечание 6): на системах с классическими полосами (Windows) короткая страница иначе шире длинной на ширину полосы, и переход между ними дёргает шапку и контент. На накладные полосы macOS не влияет. */ scrollbar-gutter: stable; } body { margin: 0; background: var(--m01-bg); color: var(--m01-text); /* Системный стек из docs/08: сервер российский, внешние шрифты недопустимы. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; } /* Заголовки не крупнее необходимого: рабочий инструмент, а не витрина. */ h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; } h2 { font-size: 19px; font-weight: 650; margin: 28px 0 10px; } a { color: var(--aktsent-tekst); } .podskazka { color: var(--m01-text-muted); } /* Видимый фокус для ходьбы с клавиатуры — фирменным красным. */ :focus-visible { outline: 2px solid var(--aktsent-tekst); outline-offset: 2px; } /* ========================================================================== Иконки: инлайновые SVG-символы из base.html ========================================================================== */ .ikona { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; } .ikona--malaya { width: 15px; height: 15px; vertical-align: -2px; } /* ========================================================================== Шапка: НЕ закреплена (решение заказчика от 07.09.2026, docs/09 §15 п. 7) — при прокрутке уходит вверх; закреплены только фильтры и тумблеры. ========================================================================== */ .shapka { background: var(--m01-bg); border-bottom: 1px solid transparent; } /* Класс ставит скрипт в base.html, когда страница прокручена. Смена фона мгновенная: шапку видят десятки раз в день, переход читался бы как тормоза. */ .shapka--plyvet { background: var(--steklo-fon); -webkit-backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); border-bottom-color: var(--m01-border); } /* Браузер без размытия получает непрозрачную поверхность — текст под шапкой не должен просвечивать сквозь полупрозрачный фон. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .shapka--plyvet { background: var(--m01-surface); } } .shapka__ryad { display: flex; align-items: center; gap: 8px 16px; justify-content: space-between; max-width: var(--shirina-soderzhimogo); margin: 0 auto; padding: 10px 16px; } .shapka__brend { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--m01-text); text-decoration: none; } /* Логотипа в шапке нет (правка заказчика от 04.09.2026, п. 8): бренд — только название текстом. */ .shapka__nazvanie { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .shapka__spravka { display: flex; align-items: center; gap: 6px 14px; min-width: 0; font-size: 14px; } .shapka__data { display: inline-flex; align-items: center; gap: 6px; color: var(--m01-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .shapka__imya { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shapka__rol { color: var(--m01-text-muted); white-space: nowrap; } .shapka__vyhod { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; /* цель касания */ padding: 0 6px; color: var(--aktsent-tekst); text-decoration: none; font-weight: 600; white-space: nowrap; } /* Служебные страницы («Таблица месяца», «Пользователи») — в шапке справа, вне ряда разделов (docs/09: у Селектора ровно шесть разделов). На телефоне эти ссылки прячутся — там они живут в листе «Ещё» нижней панели. */ .shapka__sluzhebnyy { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; /* цель касания */ padding: 0 6px; color: var(--m01-text-muted); text-decoration: none; font-weight: 600; white-space: nowrap; } .shapka__sluzhebnyy--aktivnyy { color: var(--aktsent-tekst); } @media (hover: hover) and (pointer: fine) { .shapka__sluzhebnyy:hover { color: var(--m01-text); } .shapka__sluzhebnyy--aktivnyy:hover { color: var(--aktsent-tekst); } } /* На средней ширине подписи не помещаются — остаются значки с aria-label. */ @media (max-width: 900px) { .shapka__sluzhebnyy span { display: none; } } /* Меню разделов: пункты — «таблетки» без линий-подчёркиваний (правка заказчика от 08.09.2026, docs/09 §16 п. 6). Активная — фирменная заливка --m01-red-solid с белым текстом (узаконенная пара docs/08: 5,74:1), у остальных фон появляется только при наведении. Переход — исключительно цвет и фон ≤200 мс; layout-свойства не анимируются. На узком экране меню прокручивается вбок; на телефоне заменяется нижней панелью. Вертикальные поля .menyu добраны так, что высота строки навигации осталась прежней (48px: 24px текста + поля таблетки + поля ряда). */ .menyu { display: flex; gap: 4px; overflow-x: auto; max-width: var(--shirina-soderzhimogo); margin: 0 auto; padding: 4px 12px; scrollbar-width: none; } .menyu::-webkit-scrollbar { display: none; } .menyu__punkt { flex: none; padding: 8px 14px; color: var(--m01-text-muted); text-decoration: none; font-weight: 550; white-space: nowrap; border-radius: 999px; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); -webkit-tap-highlight-color: transparent; } .menyu__punkt--aktivnyy { color: #fff; background: var(--m01-red-solid); font-weight: 650; } @media (hover: hover) and (pointer: fine) { .menyu__punkt:hover { color: var(--m01-text); background: var(--navedenie-stroki); } .menyu__punkt--aktivnyy:hover { color: #fff; background: var(--m01-red-solid); } } /* ========================================================================== Нижняя панель разделов на телефоне (стекло разрешено — docs/08) ========================================================================== */ .nizhnyaya-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; /* включается в блоке «Телефон» ниже */ justify-content: space-around; align-items: stretch; min-height: var(--vysota-nizhney-paneli); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--steklo-fon); -webkit-backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); border-top: 1px solid var(--m01-border); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nizhnyaya-panel { background: var(--m01-surface); } } .nizhnyaya-panel__punkt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 0; max-width: 96px; padding: 6px 2px; border: none; background: none; color: var(--m01-text-muted); text-decoration: none; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 10px; transition: transform 100ms var(--ease-out); } .nizhnyaya-panel__punkt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nizhnyaya-panel__punkt .ikona { width: 22px; height: 22px; } /* Отклик касания — система услышала. Ничего дольше и заметнее: панель трогают десятки раз в день. */ .nizhnyaya-panel__punkt:active { transform: scale(0.94); } /* Активный раздел подсвечен фирменным красным. */ .nizhnyaya-panel__punkt--aktivnyy { color: var(--aktsent-tekst); } /* Лист «Ещё»: разделы, не поместившиеся в панель. Меню — редкое раскрытие, поэтому у него есть появление: 200 мс, ease-out, из scale(0.97). */ .list-razdelov { position: fixed; right: 12px; bottom: calc(var(--vysota-nizhney-paneli) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 55; min-width: 220px; padding: 6px; border: 1px solid var(--m01-border); border-radius: var(--radius-kartochki); background: var(--steklo-fon); -webkit-backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); transform-origin: bottom right; /* раскрывается от своей кнопки, не из центра */ transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .list-razdelov { background: var(--m01-surface); } } @starting-style { .list-razdelov { opacity: 0; transform: scale(0.97) translateY(6px); } } .list-razdelov__punkt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius); color: var(--m01-text); text-decoration: none; font-weight: 550; white-space: nowrap; } .list-razdelov__punkt .ikona { color: var(--m01-text-muted); } .list-razdelov__punkt--aktivnyy, .list-razdelov__punkt--aktivnyy .ikona { color: var(--aktsent-tekst); } @media (hover: hover) and (pointer: fine) { .list-razdelov__punkt:hover { background: var(--navedenie-stroki); } } /* ========================================================================== Содержимое и подвал ========================================================================== */ .soderzhimoe { max-width: var(--shirina-soderzhimogo); margin: 0 auto; padding: 20px 16px 40px; } .podval { max-width: var(--shirina-soderzhimogo); margin: 0 auto; padding: 16px; color: var(--m01-text-muted); font-size: 13px; } /* ========================================================================== Кнопки ========================================================================== */ /* Кнопка без класса (например, «Сохранить» в форме ввода) — основная. :not([class]) оставляет в покое кнопки компонентов со своими классами. */ .knopka, button:not([class]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; /* не меньше 44px по docs/08; берём с запасом под палец */ padding: 10px 20px; font-size: 16px; font-family: inherit; font-weight: 600; line-height: 1.2; color: #ffffff; background: var(--m01-red-solid); /* белый текст на #c81f12 — 5,74:1 */ border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; /* Единственная анимация ежедневной кнопки — отклик нажатия. */ transition: transform 120ms var(--ease-out); } .knopka:active, button:not([class]):active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .knopka:hover, button:not([class]):hover { background: var(--m01-red-press); } } /* Второстепенное действие — контурная кнопка. */ .knopka--konturnaya { color: var(--aktsent-tekst); background: var(--m01-surface); border-color: var(--m01-border); } @media (hover: hover) and (pointer: fine) { .knopka--konturnaya:hover { background: var(--m01-red-tint); border-color: var(--ramka-oshibki); } } /* Опасное действие (отключить доступ, удалить строку). Красный занят брендом, поэтому опасность не в цвете заливки, а в контуре цвета ошибки и в подписи: рядом с такой кнопкой всегда текст, объясняющий последствие. */ .knopka--opasnaya { color: var(--tekst-oshibki); background: var(--m01-surface); border-color: var(--ramka-oshibki); } @media (hover: hover) and (pointer: fine) { .knopka--opasnaya:hover { background: var(--fon-oshibki); } } .knopka[disabled], button:not([class])[disabled] { opacity: 0.55; cursor: default; transform: none; } /* ========================================================================== Карточка ========================================================================== */ .kartochka { background: var(--m01-surface); border: 1px solid var(--m01-border); border-radius: var(--radius-kartochki); padding: 16px; margin-bottom: 16px; } .kartochka__shapka { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; } .kartochka__zagolovok { font-size: 18px; font-weight: 650; margin: 0; } /* Индикатор заполненности «12 из 18». */ .kartochka__schet { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--m01-text-muted); white-space: nowrap; } .kartochka__schet--gotovo { color: var(--tekst-uspeha); } /* ========================================================================== Полоска заполненности ========================================================================== */ .polosa-zapolneniya { height: 6px; border-radius: 3px; background: var(--m01-border); overflow: hidden; margin: 10px 0; } .polosa-zapolneniya__dolya { display: block; height: 100%; border-radius: 3px; background: var(--m01-red-accent); } .polosa-zapolneniya__dolya--gotovo { background: var(--m01-ok); } /* ========================================================================== Поля форм: крупные, вводят с телефона на ходу ========================================================================== */ label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; } input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; min-height: 48px; padding: 10px 12px; /* Не меньше 16px — иначе Safari на iPhone масштабирует страницу при фокусе. */ font-size: 17px; font-family: inherit; color: var(--m01-text); background: var(--m01-surface); border: 1px solid var(--m01-border); border-radius: var(--radius); } input[type="number"] { font-variant-numeric: tabular-nums; text-align: right; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--aktsent-tekst); outline-offset: 1px; border-color: var(--aktsent-tekst); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--m01-red-accent); } .pole { margin-bottom: 16px; } /* Подпись под полем: плановое значение, пояснение. */ .pole__podpis { margin: 6px 0 0; font-size: 14px; color: var(--m01-text-muted); } /* Поле и единица измерения в одну строку: «[ 1250 ] шт». */ .pole__ryad { display: flex; align-items: center; gap: 10px; } .pole__ryad input { flex: 1 1 auto; } .pole__edinitsa { flex: none; min-width: 34px; color: var(--m01-text-muted); } /* Строка с галочкой: вся строка — цель касания. */ .galochka { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-bottom: 0; font-weight: 500; cursor: pointer; } /* ========================================================================== Таблицы отчётов (стекла здесь не бывает — docs/08) ========================================================================== */ /* Обёртка даёт горизонтальную прокрутку широкой таблице на телефоне. */ .tablitsa-obertka { overflow-x: auto; } .tablitsa { width: 100%; border-collapse: collapse; background: var(--m01-surface); font-variant-numeric: tabular-nums; /* разряды выстраиваются в столбик */ } .tablitsa th, .tablitsa td { padding: 10px 12px; border-bottom: 1px solid var(--m01-border); text-align: left; } .tablitsa th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--m01-text-muted); white-space: nowrap; } .tablitsa__chislo { text-align: right !important; white-space: nowrap; } /* Подсветка строки — только там, где есть настоящий курсор: на телефоне :hover срабатывал бы от касания и залипал. */ @media (hover: hover) and (pointer: fine) { .tablitsa tbody tr:hover > td { background: var(--navedenie-stroki); } } /* ========================================================================== Плашки сообщений ========================================================================== */ /* Ошибка обозначается тремя признаками сразу: иконка, текст словами, плашка. Одним красным цветом нельзя — красный занят брендом (docs/08). */ .plashka { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--ramka-informatsii); border-radius: var(--radius); background: var(--fon-informatsii); font-size: 15px; } .plashka .ikona { margin-top: 1px; } .plashka__tekst { min-width: 0; } /* Ведущее слово («Ошибка.», «Внимание.») — словами, не только цветом. */ .plashka__slovo { font-weight: 700; } .plashka--uspeh, .plashka--ok { background: var(--fon-uspeha); border-color: var(--ramka-uspeha); color: var(--tekst-uspeha); } .plashka--preduprezhdenie, .plashka--warn { background: var(--fon-preduprezhdeniya); border-color: var(--ramka-preduprezhdeniya); color: var(--tekst-preduprezhdeniya); } .plashka--oshibka, .plashka--error { background: var(--fon-oshibki); border-color: var(--ramka-oshibki); color: var(--tekst-oshibki); } .soobshcheniya { margin-bottom: 16px; } /* ========================================================================== Уведомления (тосты): создаются функцией M01.uvedomit из base.html ========================================================================== */ .uvedomleniya { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } .uvedomlenie { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--m01-border); border-radius: 12px; background: var(--steklo-fon); /* всплывающее уведомление — стекло разрешено */ -webkit-backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); font-size: 15px; cursor: pointer; /* касание закрывает */ /* Появление и уход: transform и opacity, ease-out, быстрее 300 мс. */ transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .uvedomlenie { background: var(--m01-surface); } } @starting-style { .uvedomlenie { opacity: 0; transform: translateY(-8px) scale(0.97); } } /* Уход быстрее появления: система отвечает мгновенно. */ .uvedomlenie--uhodit { opacity: 0; transform: translateY(-8px) scale(0.97); transition-duration: 150ms; } .uvedomlenie--uspeh .ikona { color: var(--tekst-uspeha); } .uvedomlenie--oshibka .ikona { color: var(--tekst-oshibki); } .uvedomlenie--preduprezhdenie .ikona { color: var(--tekst-preduprezhdeniya); } .uvedomlenie--info .ikona { color: var(--m01-text-muted); } /* ========================================================================== Сегментный переключатель периода: День · Неделя · Месяц · Год ========================================================================== */ /* Переключение периода — ежедневное действие, поэтому НИКАКОЙ анимации: активный сегмент меняется мгновенно. */ .perekluchatel { display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto; padding: 3px; background: var(--m01-bg); border: 1px solid var(--m01-border); border-radius: var(--radius); } .perekluchatel__punkt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* цель касания — сама кнопка, не контейнер (docs/08) */ padding: 0 14px; border: none; border-radius: 7px; background: none; color: var(--m01-text-muted); font-family: inherit; font-size: 15px; font-weight: 550; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .perekluchatel__punkt--aktivnyy { background: var(--m01-surface); color: var(--aktsent-tekst); font-weight: 650; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } @media (hover: hover) and (pointer: fine) { .perekluchatel__punkt:not(.perekluchatel__punkt--aktivnyy):hover { color: var(--m01-text); } } /* ========================================================================== Метка отклонения: стрелка + число, никогда не только цвет ========================================================================== */ .metka-otkloneniya { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--m01-text-muted); background: var(--fon-informatsii); } .metka-otkloneniya .ikona { width: 14px; height: 14px; vertical-align: 0; } /* Рост — зелёная, падение — янтарная (красный занят брендом). Хорош рост или плох, решает экран: для «отмен доставок» классы ставятся наоборот. */ .metka-otkloneniya--rost { color: var(--tekst-uspeha); background: var(--fon-uspeha); } .metka-otkloneniya--padenie { color: var(--tekst-preduprezhdeniya); background: var(--fon-preduprezhdeniya); } .metka-otkloneniya--neytralnaya { color: var(--m01-text-muted); background: var(--fon-informatsii); } /* ========================================================================== Метка выполнения плана: значок + число + плашка, никогда один цвет ========================================================================== Единый компонент на всю систему (docs/09, раздел 2): сводка, отчётные экраны и таблица детализации модального окна берут его отсюда, своих копий не заводят. Пороги — docs/09, раздел 4: ≥100 % «vypolnen» зелёный, ≥89 % «blizko» жёлтый, ниже «provalen» красный. Красный в системе занят брендом, поэтому рядом с цветом всегда стоят сам процент и плашка, а где известно направление — ещё и значок (docs/08). Цвета — тёмные текстовые варианты статусов: сырые --m01-ok/--m01-warn на белом дают лишь ≈3,3:1 и текстом не используются. */ .plan-metka { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--ramka-informatsii); border-radius: 999px; background: var(--fon-informatsii); color: var(--m01-text-muted); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .plan-metka .ikona { width: 13px; height: 13px; vertical-align: 0; } .plan-metka--vypolnen { color: var(--tekst-uspeha); background: var(--fon-uspeha); border-color: var(--ramka-uspeha); } .plan-metka--blizko { color: var(--tekst-preduprezhdeniya); background: var(--fon-preduprezhdeniya); border-color: var(--ramka-preduprezhdeniya); } .plan-metka--provalen { color: var(--tekst-oshibki); background: var(--fon-oshibki); border-color: var(--ramka-oshibki); } /* ========================================================================== Раскрывающийся блок (details/summary) ========================================================================== */ .raskryvashka > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--aktsent-tekst); font-weight: 600; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .raskryvashka > summary::-webkit-details-marker { display: none; } .raskryvashka > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-right: 2px; } .raskryvashka[open] > summary::before { transform: rotate(45deg); } /* Страница ошибки. */ .oshibka-stranitsa { max-width: 520px; margin-top: 4vh; } .oshibka-stranitsa .ikona { width: 28px; height: 28px; color: var(--tekst-oshibki); } /* ========================================================================== Переходные синонимы для экранов, свёрстанных до дизайн-системы (vvod_den.html, entry.html). Новым экранам пользоваться именами выше. Убрать вместе с переводом состояния дня и ввода на .kartochka / .knopka--konturnaya. ========================================================================== */ .karta { background: var(--m01-surface); border: 1px solid var(--m01-border); border-radius: var(--radius-kartochki); padding: 16px; margin-bottom: 16px; } .knopka--vtorichnaya { color: var(--aktsent-tekst); background: var(--m01-surface); border-color: var(--m01-border); } @media (hover: hover) and (pointer: fine) { .knopka--vtorichnaya:hover { background: var(--fon-oshibki); } } /* ========================================================================== Телефон ========================================================================== */ @media (max-width: 700px) { .soderzhimoe { padding: 16px 12px 32px; } h1 { font-size: 22px; } /* Верхнее меню заменяется нижней панелью. */ .menyu { display: none; } .nizhnyaya-panel { display: flex; } /* Содержимому — место над нижней панелью. Класс ставит base.html, когда пользователь вошёл и панель вообще есть. */ .telo--s-panelyu .soderzhimoe { padding-bottom: calc(var(--vysota-nizhney-paneli) + 28px + env(safe-area-inset-bottom, 0px)); } .telo--s-panelyu .podval { padding-bottom: calc(var(--vysota-nizhney-paneli) + 12px + env(safe-area-inset-bottom, 0px)); } /* Роль в шапке не помещается — имя остаётся, роль видна на широком экране. */ .shapka__rol { display: none; } .shapka__imya { max-width: 120px; } .shapka__data { display: none; } .shapka__vyhod span { display: none; } /* остаётся значок выхода */ .shapka__sluzhebnyy { display: none; } /* служебные — в листе «Ещё» */ /* Кнопка на всю ширину: попасть пальцем проще. Вариант --v-stroku оставляет кнопку в строке (например, рядом с полем даты). */ .knopka, button:not([class]) { width: 100%; } .knopka--v-stroku { width: auto; } /* Уведомления на телефоне всплывают снизу (docs/08). */ .uvedomleniya { top: auto; right: 16px; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; } .telo--s-panelyu .uvedomleniya { bottom: calc(var(--vysota-nizhney-paneli) + 12px + env(safe-area-inset-bottom, 0px)); } } /* Появление тоста снизу на телефоне — и уход туда же: пространственная последовательность, откуда пришёл — туда и ушёл. */ @media (max-width: 700px) { @starting-style { .uvedomlenie { opacity: 0; transform: translateY(10px) scale(0.97); } } .uvedomlenie--uhodit { transform: translateY(10px) scale(0.97); } } /* ========================================================================== Ограниченное движение: убираем перемещения, оставляем прозрачность ========================================================================== */ @media (prefers-reduced-motion: reduce) { .uvedomlenie, .list-razdelov { transition: opacity 150ms var(--ease-out); transform: none !important; } .knopka:active, button:not([class]):active, .nizhnyaya-panel__punkt:active { transform: none; } } /* ========================================================================== Вкладки блоков — h1 системы в шапке (docs/09, раздел 1) ========================================================================== */ .bloki { max-width: var(--shirina-soderzhimogo); margin: 0 auto; padding: 0 16px; } .bloki__ryad { display: flex; gap: 20px; margin: 0; font-size: 20px; letter-spacing: -0.01em; } /* Крупные вкладки без черты (правка заказчика от 08.09.2026, docs/09 §16 п. 6): активная выделена насыщенным начертанием и фирменным цветом текста (--aktsent-tekst на --m01-bg — 5,35:1, docs/08), подчёркиваний нет. min-height 44px компенсирует убранные 2px границы — высота ряда прежняя. */ .bloki__vkladka { display: inline-flex; align-items: center; min-height: 44px; color: var(--m01-text-muted); text-decoration: none; font-weight: 650; transition: color 150ms var(--ease-out); -webkit-tap-highlight-color: transparent; } .bloki__vkladka--aktivnaya { color: var(--aktsent-tekst); font-weight: 700; } @media (hover: hover) and (pointer: fine) { .bloki__vkladka:not(.bloki__vkladka--aktivnaya):hover { color: var(--m01-text); } } /* ========================================================================== Страница выбора блока: по центру — «С чем работаем?» и две карточки (правка заказчика от 04.09.2026, п. 9: больше на главной нет ничего) ========================================================================== */ .vybor-bloka { max-width: 720px; margin: 0 auto; /* Вопрос и карточки — по центру видимой области, а не прижаты к шапке. 18svh сверху ставит композицию чуть выше геометрического центра — так она выглядит центрированной с учётом подвала. */ padding-top: 18svh; text-align: center; } .vybor-bloka__privet { margin: 0 0 26px; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; } .vybor-bloka__kartochki { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .vybor-bloka__kartochka { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 190px; padding: 26px 24px; background: var(--m01-surface); border: 1px solid var(--m01-border); border-radius: var(--radius-kartochki); color: var(--m01-text); text-decoration: none; transition: transform 120ms var(--ease-out); } .vybor-bloka__kartochka:active { transform: scale(0.98); } @media (hover: hover) and (pointer: fine) { .vybor-bloka__kartochka:hover { border-color: var(--m01-text-muted); } } .vybor-bloka__kartochka .ikona { width: 30px; height: 30px; color: var(--aktsent-tekst); } .vybor-bloka__nazvanie { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } /* Заглушка блока «Маркетинг». */ .zaglushka { max-width: 560px; padding: 26px 24px; } .zaglushka__ikona { width: 30px; height: 30px; color: var(--aktsent-tekst); } .zaglushka__zagolovok { margin: 10px 0 8px; font-size: 22px; } .zaglushka__opisanie { margin: 0 0 8px; } .zaglushka .knopka { margin-top: 8px; } /* Заголовок содержимого страницы: h1 занят вкладками блоков в шапке, поэтому страницы начинаются с h2 этого класса. */ .zagolovok-ekrana { margin: 0 0 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } /* ========================================================================== Запасной путь без JavaScript ========================================================================== */ /* Метку .est-js на ставит строка в base.html — до отрисовки. Скрипт работает: запасные кнопки «Применить» не нужны. */ .est-js .bez-js { display: none !important; } /* И наоборот: подсказки про протягивание мышью без скрипта бессмысленны. */ .est-js-tolko { display: none; } .est-js .est-js-tolko { display: inline; } /* Малая кнопка — «Применить» внутри раскрытых панелей компонентов и «Выгрузить в Excel» на отчётных экранах. Компактная за счёт шрифта и полей, но не ниже 44px: системой пользуются с телефона каждое утро (docs/08, «Компоненты»). */ .knopka--malaya { min-height: 44px; padding: 6px 14px; font-size: 14px; width: auto; } /* ========================================================================== Компоненты фильтров: форма экрана Разметка — app/templates/components.html, поведение — components.js. Фильтры трогают десятки раз в день, поэтому переключение состояний мгновенное; анимируется только раскрытие панелей (это меню) и бегунок. ========================================================================== */ .filtry { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .filtry--odin { display: inline-flex; margin-bottom: 0; } /* Ряд — якорь панели календаря (.kalendar__panel): панель ограничена шириной ряда и потому не может вытолкнуть страницу в горизонтальную прокрутку, как было бы при якоре на самой кнопке у правого края ряда. */ .filtry__ryad { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .filtry__tumblery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; } /* Общая панель раскрывающихся компонентов: выпадающее меню, стекло разрешено (docs/08). Появление 150 мс, только opacity/transform; закрытие мгновенное — details прячет содержимое сразу, система отвечает без задержки. */ .vybor__panel, .vypadayushchiy__spisok { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px; padding: 8px; display: flex; flex-direction: column; gap: 2px; background: var(--steklo-fon); -webkit-backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); backdrop-filter: blur(var(--steklo-razmytie)) saturate(150%); border: 1px solid var(--m01-border); border-radius: var(--radius-kartochki); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vybor__panel, .vypadayushchiy__spisok { background: var(--m01-surface); } } @starting-style { .vybor__panel, .vypadayushchiy__spisok { opacity: 0; transform: translateY(-4px) scale(0.98); } } /* Пункт панели: вся строка — цель касания. */ .vybor__punkt, .vypadayushchiy__punkt { display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 10px; border-radius: var(--radius); font-weight: 550; font-size: 15px; white-space: nowrap; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .vybor__punkt:hover, .vypadayushchiy__punkt:hover { background: var(--navedenie-stroki); } } /* ========================================================================== Тумблер ========================================================================== */ .tumbler { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin: 0; font-weight: 600; font-size: 15px; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Флажок скрыт визуально, но остаётся в форме и в порядке обхода клавиатурой. */ .tumbler__vhod { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .tumbler__dorozhka { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--m01-border); } .tumbler__begunok { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* Единственное движение фильтров — бегунок: transform, 150 мс, ease-out. */ transition: transform 150ms var(--ease-out); } .tumbler__vhod:checked + .tumbler__dorozhka { background: var(--m01-red-solid); } .tumbler__vhod:checked + .tumbler__dorozhka .tumbler__begunok { transform: translateX(16px); } .tumbler__vhod:focus-visible + .tumbler__dorozhka { outline: 2px solid var(--aktsent-tekst); outline-offset: 2px; } /* Стрелка множественного выбора стоит ПЕРЕД тумблером (docs/09, раздел 3). */ .tumbler-gruppa { position: relative; display: inline-flex; align-items: center; gap: 2px; } .vybor { position: relative; } .vybor__strelka { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-height: 44px; border-radius: var(--radius); color: var(--m01-text-muted); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .vybor__strelka::-webkit-details-marker { display: none; } .vybor[open] > .vybor__strelka { color: var(--aktsent-tekst); } @media (hover: hover) and (pointer: fine) { .vybor__strelka:hover { color: var(--m01-text); } } /* ========================================================================== Кастомный выпадающий список (одиночный выбор) ========================================================================== */ .vypadayushchiy { display: inline-flex; flex-direction: column; gap: 4px; } .vypadayushchiy__nadpis { font-size: 13px; font-weight: 600; color: var(--m01-text-muted); } .vypadayushchiy__okno { position: relative; } .vypadayushchiy__knopka { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; min-width: 190px; padding: 0 12px; background: var(--m01-surface); border: 1px solid var(--m01-border); border-radius: var(--radius); font-weight: 550; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .vypadayushchiy__knopka::-webkit-details-marker { display: none; } .vypadayushchiy__okno[open] > .vypadayushchiy__knopka { border-color: var(--aktsent-tekst); } .vypadayushchiy__znachenie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vypadayushchiy__spisok { max-height: 320px; overflow: auto; } /* ========================================================================== Календарь произвольного периода — в app/static/kalendar.css ========================================================================== Все правила .kalendar__* и закреплённой панели (.filtry--zakreplennye) переехали в отдельный файл kalendar.css (подключён в base.html): календарь перерисован по образцу заказчика (docs/09, раздел 13, пп. 5 и 7), а общий style.css правят несколько исполнителей параллельно. Здесь от календаря ничего не осталось намеренно. */ /* ========================================================================== Компоненты фильтров на телефоне ========================================================================== */ @media (max-width: 700px) { .bloki { padding: 0 12px; } .bloki__ryad { font-size: 18px; gap: 16px; } .vybor-bloka__kartochka { min-height: 150px; } /* Календарь на телефоне (один месяц, панель в потоке) — kalendar.css. */ /* Раскрытые списки на телефоне тоже не должны вылезать за экран. Якорь панели — весь ряд тумблеров, а не стрелка: стрелка шириной 34px стоит у левого края ряда, и панель min-width 230px, прижатая к её правому краю, уходила бы флажками за левый обрез экрана (тот же приём, что у календаря с якорем на .filtry__ryad — см. выше). */ .filtry__tumblery { position: relative; } .tumbler-gruppa, .vybor { position: static; } .vybor__panel { left: 0; right: auto; max-width: 100%; } } /* ========================================================================== Компоненты при ограниченном движении ========================================================================== */ @media (prefers-reduced-motion: reduce) { .vybor__panel, .vypadayushchiy__spisok { transition: opacity 150ms var(--ease-out); transform: none !important; } .tumbler__begunok { transition: none; } .vybor-bloka__kartochka:active { transform: none; } /* Календарь при ограниченном движении — kalendar.css. */ }