/* Наши собственные стили — всё, чего нет у haccp-online. Отдельным файлом нарочно: их `docs.css` и `docs_my.css` взяты как есть, и дописывать в них своё нельзя — при следующем снятии с их сайта правки затрутся, а различить, где их правило, а где наше, будет невозможно. Сейчас здесь только рабочая отметка о готовности журнала. Она временная: когда все 49 журналов будут приняты, отметки снимаются одной командой (`python -m scripts.mark_ready --clear-all`), а этот файл можно удалить. */ .reviewMark { margin-left: auto; margin-right: 12px; padding: 2px 10px; border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; } /* Разобран и сверен машиной, ждёт проверки заказчиком. */ .reviewMark.check { background-color: #eef0ff; color: #5162ff; } /* Принят заказчиком. */ .reviewMark.done { background-color: #e6f4ea; color: #0a7d32; } /* Наш собственный журнал из Excel заказчика: у конкурента такого нет, копировать нечего — форму придумываем сами, поэтому делаем последними. Цвет приглушённый нарочно: это не «готов» и не «в работе», а «не трогаем». */ .reviewMark.own { background-color: #f2f2f2; color: #767676; } /* Окно по центру экрана. У них окно прибито к «половине минус 270 пикселей» — расчёт под их самое высокое окно. Окна пониже (настройки журнала, частота контроля) от этого висят выше середины, а на невысоком экране упираются в верх. Ручная доработка (решение заказчика 10.08.2026): центрируем по-честному, разметку окна не трогаем. */ .popupPage.active { display: flex; align-items: center; justify-content: center; padding: 16px 0; /* Слой прибит к левому краю экрана. У них он лежит прямо в , и `position: fixed` без `left` встаёт в ноль сам собой; у нас окно живёт внутри страницы, и «своё место» оказалось смещённым на ширину левого поля — окно уезжало вправо примерно на 127 пикселей. */ left: 0; right: 0; } .popupPage.active .PopupMain { position: static; top: auto; margin: 0; } /* Кнопка «Дозаполнить прошедшие дни» в панели автозаполнения. Ручная доработка 10.08.2026: у них такой кнопки нет вовсе, а без оформления она читалась как обычный текст и её не замечали. Цвет — их фирменный синий (#5162FF), скругление и высота — как у кнопок в их же окнах (`.popupSelectMenu_content .button1`). */ .btnBackfill { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background-color: #5162ff; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s; } .btnBackfill:hover { background-color: #4450e0; } .btnBackfill:active { background-color: #3b46c8; } .btnBackfill:disabled { background-color: #b8bdf5; cursor: default; } /* Подпись под кнопкой дозаполнения: обычный ответ, а не ошибка. */ .autofillNote { display: block; margin: 8px 0 0; color: #767676; font-size: 13px; } /* Высокое окно не должно уезжать за край экрана. Ручная доработка 11.08.2026: у них окна невысокие, и прокрутки внутри нет вовсе. Наше окно периодичности с добавленным полем проветривания выше экрана ноутбука — нижние поля и кнопка «Сохранить» оказывались за краем. Ограничиваем высоту видимой областью и прокручиваем содержимое, разметку окна при этом не трогаем. */ .popupPage.active .PopupMain { max-height: calc(100vh - 32px); overflow-y: auto; } /* Размытие фона под открытым окном. У них оно делается классами на самой странице: `header.active`, `main.active`, `footer.active` дают `filter: blur(8px)` (их `docs.css`). Мы эти классы не вешали — фон оставался резким во всех журналах. Классы ставит `useBlur`, а здесь — только страховка для случая, когда разметка страницы у нас другая и нужных тегов нет. */ body.active .app-blurable { filter: blur(8px); } /* Положение календаря. Ручная доработка 12.08.2026. У них календарь лежит внутри поля, и `docs.css` держит его там принудительно (`right:0 !important; top:60px !important`). У нас окно прокручивается (см. выше), и раскрытый календарь раздвигал его, добавляя обе полосы прокрутки. Календарь вынесен в конец документа и ставится под полем — оформление при этом целиком их, меняется только положение. */ .calendarAnchor { z-index: 4000; } .calendarAnchor .daterangepicker { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; bottom: unset !important; margin-top: 0 !important; } /* Поле правки клетки на месте. Ручная доработка 12.08.2026, УЗКО: только наше собственное поле ввода (`.inputCell`), которое мы подставляем в клетку вместо их jQuery. Их собственные списки в клетке (`getSelectDoc…`) не трогаем вовсе — у них для них свои правила, и общее правило на `td select` ломало вид таблиц в других журналах. */ .inputCell { font-family: inherit; font-size: 13px; color: #21272c; border: 1px solid #d7d9e0; border-radius: 6px; padding: 2px 4px; height: 26px; } /* Подписи «часы» и «минуты» у времени в автозаполнении. Ручная доработка 12.08.2026 по решению заказчика: у них подписей нет, и два списка подряд читаются как «период от и до», хотя это одно время. Мелко, серым, над самим списком — оформление их же, от подписей полей в окнах. */ .autofill .select_container.timePart { position: relative; } .autofill .select_container.timePart .timeHint { position: absolute; top: -14px; left: 2px; font-size: 11px; line-height: 1; color: #8a8f98; pointer-events: none; } .autofill .container_bottom .select_container.timePart { margin-top: 14px; } /* Блок «Генеральная уборка» в панели автозаполнения. Ручная доработка 12.08.2026: у них генеральной в панели нет вовсе, и строка `.container_bottom` у них рассчитана на «подпись + один список» в одну линию. Наш блок из трёх частей в неё не влезал: подпись, поле и кнопка наезжали друг на друга, а иконку календаря их же правило (`.container_bottom img { position:absolute; right:15px; top:18px }`) уносило в угол всей строки. Поэтому раскладку задаём свою: подпись сверху, поле и кнопка — каждое на своей строке, как в остальных блоках панели. */ .autofill .autofill_background .main .container_bottom.general { display: block; margin-top: 16px; } .autofill .autofill_background .main .container_bottom.general > p { margin: 0 0 8px; font-size: 14px; font-weight: 600; } .autofill .autofill_background .main .container_bottom.general .PopupCalendar { position: relative; margin: 0 0 10px; width: 220px; max-width: 100%; } .autofill .autofill_background .main .container_bottom.general .PopupCalendar input { width: 100%; height: 42px; padding: 0 40px 0 15px; border: 1px solid #d7d7da; border-radius: 8px; font-size: 14px; color: #21272c; background-color: rgba(245, 246, 255, 1); cursor: pointer; } /* Иконка — внутри поля, а не в углу строки: перебиваем их правило. */ .autofill .autofill_background .main .container_bottom.general .PopupCalendar img { position: absolute; right: 14px; top: 50%; left: auto; transform: translateY(-50%); width: 18px; cursor: pointer; pointer-events: auto; } .autofill .autofill_background .main .container_bottom.general .btnBackfill { display: block; } /* Недоступные дни в календаре — их же приём для закрытых дат. */ .daterangepicker td.disabled { color: #c8ccd4 !important; cursor: default !important; background: #fff !important; } /* Пояснение под тумблером автозаполнения — мелким серым. Ручная доработка 12.08.2026: у них подписи нет, и по одному тумблеру не понять, что именно проставится ночью («Т» — текущая уборка). */ .autofill .autofill_background .title p.autofillHint { margin: 2px 0 0; font-size: 12px; line-height: 1.3; font-weight: 400; color: #8a8f98; } /* Крестик у предмета в перечне окна (журнал уборки). Ручная доработка 12.08.2026: у них предмет удаляется только через отдельное окно «Редактировать список». Крестик стоит справа в строке, виден при наведении на пункт — чтобы не мешал чтению списка. */ .PopupCheckbox .content2 .item { position: relative; } .PopupCheckbox .content2 .item .delItem { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #b0b4bd; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; } .PopupCheckbox .content2 .item:hover .delItem { opacity: 1; } .PopupCheckbox .content2 .item .delItem:hover { color: #e0413e; } /* Подвал прижимается к низу окна. У них он просто идёт следом за содержимым — и этого хватает, потому что у них на любой странице длинный список. У нас страница бывает короткой (журнал с одним документом, пустая вкладка), и подвал поднимался под заголовок, оставляя под собой пустоту во весь экран. Правило общее для всей страницы, а не для одного экрана: `header`, `main` и `footer` — прямые дети корня, поэтому вытягиваем сам корень на высоту окна и отдаём свободное место содержимому. Их файлы не тронуты. */ #root { display: flex; flex-direction: column; min-height: 100vh; } #root > .main { flex: 1 0 auto; } #root > .footer { flex: 0 0 auto; margin-top: auto; } /* Критерии оценки в бланке Ж.025 — по ширине содержимого. Их класс `clgroup` рассчитан на пояснительный текст под таблицей и занимает 80 % ширины по центру (`docs_my.css`), из-за чего абзацы получались заметно уже самой таблицы. Правило узкое, по классу, который есть только у этого бланка: медкнижки и остальные журналы с `clgroup` не затронуты. */ .clgroup.j025criteria { width: 100%; margin: 0; } .clgroup.j025criteria .text_p p { margin-bottom: 6px; } /* Полоса заголовка журнала: кнопки держатся вместе, у правого края. У них `.block2_content` — флекс с `space-between`, и это выглядит правильно ровно до тех пор, пока кнопка одна, а заголовок длинный: «Журнал приемки и входного контроля продукции» сам занимает почти всю строку, и кнопкам остаётся правый край. У Ж.025 заголовок — название получателя («ВкусВилл»), а кнопок четыре. Свободное место `space-between` раскидал между ними, и кнопки уехали по всему экрану. Отдаём свободное место заголовку — тогда кнопки собираются справа, как у них. Правило общее для полосы заголовка, а не для одного журнала: у остальных вид не меняется — там свободного места и так не было. */ .block2 .block2_content.wide-head > h1 { flex: 1 1 auto; margin-right: 16px; } /* Поправка 25.08.2026. Прежде растяжение стояло у ВСЕХ журналов, и это было неверно: у них `h1` шириной по тексту (`flex: 0 1 auto`), а у нас он занимал всё свободное место. На журналах, где кнопка в шапке одна, сверка страниц показывала «заголовок шире на 160 px» — и расхождение считалось известным, хотя было наше. Класс `wide-head` страница ставит сама, когда видимых кнопок в шапке больше одной (Ж.025). */ /* Широкая таблица журнала — с прокруткой вбок. Их контейнер `.clgroup` занимает 80 % страницы (`docs_my.css`), и это верно для журналов на семь-девять колонок. У входного контроля их пятнадцать: в ту же ширину они не влезают, и клетки сминаются в столбик по одной букве. Признак ставит страница (`wideTable`) по числу колонок, а не по журналу — так же поведёт себя любая широкая таблица. Ширина контейнера при этом расширяется до всей страницы: у широкой таблицы отступ в 10 % с каждой стороны — потеря места, а не оформление. */ .cl_col .clgroup.wideTable { width: 96%; overflow-x: auto; } .cl_col .clgroup.wideTable > table { min-width: 100%; } /* Подсказки по уже написанному — под полем ввода. Своей разметки у них для этого нет: поля с подсказками в их кабинете не существует вовсе (наименование там набирают целиком каждый раз). Ручная доработка 17.08.2026 по просьбе заказчика: «внизу показываются два совпадения из того, что вводили раньше». Вид взят от их же кнопок выбора — светлый прямоугольник с их синим текстом, — чтобы окно не выглядело чужим. */ .suggestRow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .suggestItem { border: 1px solid rgba(81, 98, 255, 0.35); background: rgba(245, 246, 255, 1); color: rgba(81, 98, 255, 1); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.2; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggestItem:hover { background: rgba(81, 98, 255, 0.12); } /* Строка перечня документов: «название — номер — плюс». Плюс у них квадратный, `full_button`, и он же служит кнопкой «убрать» у строк выше — тогда значок поворачивается на 45°, и получается крестик. */ .docRow { display: flex; align-items: center; gap: 8px; } .docRow > .PopupInput { flex: 1 1 auto; } .docRow > .PopupInput:last-of-type { flex: 0 0 34%; } .docRow > .full_button { flex: 0 0 auto; height: 44px; width: 44px; margin-top: 10px; /* Их синяя кнопка: значок `plus.svg` нарисован БЕЛЫМ (он у них лежит на синей кнопке «Добавить»), и на пустой кнопке его попросту не видно — заказчик так и сказал, «кнопку + не видно». Красим фон в их синий. */ background: rgba(81, 98, 255, 1); border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .docRow > .full_button:hover { background: rgba(66, 82, 230, 1); } .docRow > .full_button.minus { background: rgba(245, 246, 255, 1); border: 1px solid rgba(81, 98, 255, 0.35); } .docRow > .full_button.minus img { /* Крестик — это их же плюс, повёрнутый на 45°. Синий, потому что кнопка светлая. */ content: url('/img/v2/main/plus_blue.svg'); transform: rotate(45deg); } /* Выбор колонок в окне настроек документа — своей разметки у них нет: состав таблицы у них вообще не выбирается, это наша доработка от 17.08.2026. Вид взят от их же списков с галочками (`PopupCheckbox`), чтобы окно не выглядело чужим. */ .colPicker { margin-top: 14px; } .colPicker h2 { font-size: 15px; margin: 0 0 4px; } .colItem { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; } .colItem.locked { cursor: default; opacity: 0.75; /* Галочка у обязательной колонки есть, но заблокирована: человек должен видеть, что колонка включена. */ } .colItem input { width: 16px; height: 16px; accent-color: rgba(81, 98, 255, 1); } .colItem span { flex: 1 1 auto; font-size: 14px; /* Подпись — от левого края: их `.block` центрирует содержимое, и галочки выходили посреди строки, оторванные от текста. */ text-align: left; } .colItem em { font-style: normal; font-size: 12px; color: rgba(0, 0, 0, 0.45); } .colAdd { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .colAdd > .PopupInput { flex: 1 1 auto; } .colAdd > .full_button { flex: 0 0 auto; width: 44px; height: 44px; margin-top: 10px; background: rgba(81, 98, 255, 1); border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* План обучения: клетка месяца, когда месяц ещё не выбран. У них в клетке всегда стоит месяц — журнал заполняется сразу, — и пустой ссылки на их странице не бывает. У нас тема отмечается первой, и ссылка оказывается пустой: нулевой ширины, щёлкнуть по ней нечем и выбрать месяц невозможно. Даём ссылке размер — ровно настолько, чтобы попасть мышью. Ручная доработка 21.08.2026. */ .cl_col .tbDocBody .eduplancoldateon .editEduplancolDate { display: inline-block; min-width: 42px; min-height: 18px; } .cl_col .tbDocBody .eduplancoldateon .editEduplancolDate:empty::before { content: 'выбрать'; color: rgba(113, 127, 255, 0.75); font-size: 12px; } /* Компактная карточка журнала в списке (`spec.card_compact`). Нужна там, где в карточке стоят двое ответственных с должностями: у журнала прихода-выдачи дез. средств такая карточка занимала пол-экрана (заказчик, 25.08.2026). Их разметка не меняется — только размер шрифта и отступы. */ .listMagazines .listItem.compact .rightBlock .item p.title { font-size: 11px; line-height: 14px; } .listMagazines .listItem.compact .rightBlock .item p.text { font-size: 12px; line-height: 15px; } .listMagazines .listItem.compact .rightBlock .item { margin-bottom: 4px; } /* Кнопка «Номенклатура» в шапке (07.09.2026). Их `.nav_but4` рассчитан на слово «Сотрудники»: жёсткие 137 px и `justify-content: space-between` внутри 85 % ширины. Слово «Номенклатура» длиннее, кнопка забивалась текстом до края, и между значком и словом не оставалось просвета — у соседних кнопок он есть. Поэтому кнопке своя ширина и явный зазор; всё остальное — их стили. */ .nav_but_nom { width: 168px; } .nav_but_nom div { width: auto; gap: 8px; justify-content: flex-start; padding: 0 12px; } .nav_but_nom img { width: 18px; height: 18px; flex: none; } /* Экран «Номенклатура» (07.09.2026). Разметка и оформление их — те же `.block2`, `.listMagazines`, `.listItem`, что и на странице журнала. Своё здесь только поле поиска: такого элемента у них нет ни на одной снятой странице, а перечень из 125 позиций без него нелистаем. */ .listMagazines .nomBar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .listMagazines .nomSearch { height: 40px; width: 360px; max-width: 60%; border: 1px solid #F0F0F2; border-radius: 8px; padding: 0 14px; font-size: 16px; outline: none; background-color: white; transition: 0.3s; } .listMagazines .nomSearch:focus { border-color: #5162FF; } .listMagazines .nomCount { font-size: 14px; color: #5F606D; } /* Поле на НЕСКОЛЬКО значений (журнал мойки, «моющее средство»). 08.09.2026. Крестик у повторного поля ставился их классом `delItem` — а он рассчитан на строку списка в окне, и в поле ввода уезжал под него. Здесь он свой: прижат к правому краю самого поля, по вертикали по центру. Подпись у повторных полей короткая («Ещё значение»), длинная не помещалась и вылезала за край. */ .PopupInput.multiValue { position: relative; } .PopupInput.multiValue input { padding-right: 44px; } .PopupInput.multiValue .multiRemove { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 8px; background-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .PopupInput.multiValue .multiRemove:hover { background-color: #5162FF12; } .PopupInput.multiValue .multiRemove img { width: 12px; height: 12px; }