/* src/web/static/app.css — единственный источник цветов и размеров фронта. Значения перенесены из макета mockups/variant-b-navigator.html; менять их осмысленно только там же и здесь одновременно. */ :root { color-scheme: light; --bg: #f4f6f4; --surface: #ffffff; --surface-soft: #fbfcfb; --line: #e2e6e1; --line-soft: #edf0ec; --field-line: #ccd4cd; --ink: #16211a; --ink-soft: #3c4a41; --ink-soft-2: #4a5a50; /* неактивные пункты навигации и призрачные кнопки — из макета */ --muted: #5c6b61; --muted-2: #6b7a70; --placeholder: #9aa8a0; --brand: #1f5f3b; --brand-dark: #1a5033; --brand-ink: #16432b; --brand-soft: #e8f2ea; --brand-tint: #eef3ee; --warn: #8a5a00; --warn-mark: #c9a227; --warn-line: #e0d7bd; --warn-bg: #fffdf6; --warn-field: #fffbf0; --danger: #a3261f; --danger-ink: #8f231d; --danger-line: #e3c4c1; --danger-bg: #fbeceb; --radius: 10px; --radius-sm: 7px; --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } /* Кнопки-ссылки (drafts.js «Продолжить», history.html «Открыть»/.docx, drafts.html «Новая инструкция») — это , и правило для ссылок красило и подчёркивало их поверх оформления кнопки. Исключаем их из источника, а не перебиваем следом отдельным селектором на наведённую ссылку с классом btn: перебивающее правило пришлось бы считать против каждого варианта кнопки (.pri, .dgr, .gh), и один такой перебивающий селектор здесь уже стоял — специфичностью 0,2,1 он перебивал .btn.pri { color: #fff } (0,2,0) независимо от порядка правил: белый текст на наведённой тёмно-зелёной кнопке "Продолжить"/"Новая инструкция" становился inherit, то есть цветом страницы. */ a:hover:not(.btn) { color: #14432a; text-decoration: underline; } .mono { font-family: var(--mono); } .muted { color: var(--muted); font-size: 13px; } .hidden { display: none !important; } /* Атрибут hidden обязан побеждать любой класс с display: авторский слой всегда сильнее браузерного, поэтому .btn { display: inline-flex } молча показывал элемент, помеченный hidden. */ [hidden] { display: none !important; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* --- топбар и навигация ------------------------------------------------ */ .topbar { display: flex; align-items: center; gap: 28px; height: 58px; padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line); /* Шапка не уезжает при прокрутке: навигация между анкетой, черновиками и историей нужна с любой точки длинной формы. z-index ниже модалок (.editor-dialog: 50), но выше липкого рельса и низа формы. */ position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* Цвет иконки — только на самой svg (currentColor в base.html), не на всём .brand: соседний текст «Инструкции ПБ» остаётся обычным цветом страницы, его перекрашивать никто не просил. Единственный источник значения — токен --brand, а не литерал в разметке svg (см. app.css:1-3). */ .brand svg { color: var(--brand); } .topbar nav { display: flex; align-items: center; gap: 4px; } .nav-link { padding: 6px 12px; border-radius: 6px; font-size: 14px; color: var(--ink-soft-2); } .nav-link:hover { background: var(--brand-tint); text-decoration: none; } .nav-link.active { background: var(--brand-tint); font-weight: 500; color: var(--ink); } .topbar .side { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--muted); } .inline-form { display: inline; margin: 0; } /* Бренд + три пункта навигации + «Выйти» на фиксированных 40px отступах и без flex-wrap — это около 550px по одной линии; топбар один на все страницы (base.html), поэтому без адаптации горизонтальная прокрутка вылезала бы на КАЖДОЙ странице уже на телефонном экране. 980px (как у .form-grid) не подходит — задел бы и проверяемые 900 px, где топбар и так помещается; ниже — своя, более узкая точка. */ @media (max-width: 600px) { .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px 16px; } } /* --- страница ---------------------------------------------------------- */ .page { max-width: 1000px; margin: 0 auto; padding: 26px 40px 36px; } .page-wide { max-width: 1180px; } h1 { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; } .page-lead { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: 760px; } .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 8px; } .crumbs .here { color: var(--ink); font-weight: 500; } /* --- карточки и поля --------------------------------------------------- */ /* overflow-x: auto — не только про очень узкий экран: таблицы (истории, разделов в карточке типа и на экране подтверждения) и инлайновая grid- раскладка карточки черновика (drafts.js: 190px + 160px фиксированных колонки) шире контейнера не сжимаются до 100% сами — table-layout: auto считает ширину по содержимому, а inline grid-template-columns вообще не знает о ширине контейнера. Без этого правила они раздвигают саму .card, и прокрутка вместо карточки достаётся всей странице. */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; overflow-x: auto; } .card + .card { margin-top: 16px; } .card-h { font-size: 17px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; } .card-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .span2 { grid-column: span 2; } .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; } .lbl .opt { color: var(--placeholder); font-weight: 400; } .hint { font-size: 12.5px; color: var(--muted-2); margin: 6px 0 0; } .hint.warn { color: var(--warn); display: flex; align-items: center; gap: 6px; } .hint.ok { color: var(--brand); display: flex; align-items: center; gap: 6px; } input[type="text"], input[type="password"], input[type="date"], input[type="number"], select, textarea { width: 100%; padding: 0 12px; height: 42px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 15px; font-family: inherit; } textarea { height: auto; min-height: 78px; padding: 11px 12px; line-height: 1.45; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--placeholder); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); } input[type="checkbox"], input[type="radio"] { width: auto; height: auto; } /* #history-search (history.html) держит инлайновый style="width: 340px" — на своей строке фильтров .row (flex-wrap, без .card) шире 420px это не мешает, но на более узких экранах 340px не помещаются и раздвигают страницу. max-width не конфликтует с width, заданным где угодно (даже инлайново): он только ограничивает сверху, поэтому на широких экранах ничего не меняется. */ #history-search { max-width: 100%; } /* --- вопрос анкеты ---------------------------------------------------- */ .qs { display: flex; flex-direction: column; gap: 24px; } .qn { font-family: var(--mono); font-size: 12px; color: #8b9990; letter-spacing: 0.02em; } /* display: block обязателен: десять вопросов ниже используют .q-t на