/* * Lex — стили экземпляра DOC-V (/opt/lex/view/custom.css; DOC-V подключает его на всех страницах). * Источник — /angular/lex/docv/auth/view/custom.css, ставит install-view.sh. * Цвета и шрифты — токены бренда /angular/lex/brand/tokens.css (копия в view/lex/tokens.css, переменные --lex-*). * После правки: install-view.sh (он же удаляет view/index.html, чтобы у custom.css сменился ?суффикс). * * .lex-topbar — шапка (настройка themes.top_bar), на всех страницах; * .guest-mode — класс обёртки макета у гостя (anon_user_uid): прячем меню, фон бренда; * .lex-login — страница входа и регистрации (шаблоны «Аутентификации» и «Регистрации клиента»); * .lex-cab — «Кабинет клиента» (../CABINET.md); * .lex-ru / .lex-kz — двуязычные тексты (сообщения действий, шапка): показывается язык формы шаблона * (.lex-lang-ru / .lex-lang-kz у корня формы) или шапки (html[data-lex-lang], ставит top_bar); * по умолчанию — русский. */ @import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,500..600&display=swap"); @import url("lex/tokens.css?v=1"); /* ---------- Шапка ---------- */ .top-bar-panel .lex-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 var(--lex-gutter, 24px); background: var(--lex-white); border-bottom: 1px solid var(--lex-line); font-family: var(--lex-font-sans); font-size: var(--lex-text-xs); color: var(--lex-muted); box-sizing: border-box; } .lex-topbar__logo { display: inline-flex; align-items: center; } .lex-topbar__logo img { display: block; height: 32px; width: auto; } .lex-topbar__right { display: flex; align-items: center; gap: 20px; } .lex-topbar a { color: var(--lex-color-link); text-decoration: none; } .lex-topbar a:hover { color: var(--lex-color-link-hover); text-decoration: underline; } .lex-topbar__logout { padding: 6px 14px; border: 1px solid var(--lex-line-input); border-radius: var(--lex-radius); color: var(--lex-ink) !important; font-weight: 500; } .lex-topbar__logout:hover { background: var(--lex-gray-50); text-decoration: none !important; } .guest-mode .lex-topbar__logout { display: none; } /* «Кабинет» (CABINET.md): «/» - «Стартовая страница», она ведёт клиента в кабинет его организации, сотрудника Lex - в «Личный кабинет». Слово одно на оба языка. Гостю не нужен */ .top-bar-panel .lex-topbar__cab { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--lex-weight-medium); color: var(--lex-color-primary); } /* иконка - псевдоэлементом: пустой в шапке TinyMCE («Оформление → Верхняя панель») при правке выбросил бы */ .top-bar-panel .lex-topbar__cab::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat; } .guest-mode .lex-topbar__cab { display: none; } @media (max-width: 640px) { .lex-topbar__contact { display: none; } .lex-topbar__logo img { height: 28px; } } /* ---------- Гость: страница без меню DOC-V ---------- */ html body:has(.guest-mode) { background: var(--lex-blue-50) !important; } body .guest-mode { background: var(--lex-blue-50); } /* узор фона DOC-V (topography и др.) рисует ::before у области страницы - гостю без узора: бренд без декора */ body .guest-mode .main-layoute-route-outlet::before { display: none !important; } .guest-mode .v-menu, .guest-mode .menubar-block, .guest-mode .h-menu { display: none !important; } .guest-mode .main-layoute-route-outlet { width: 100% !important; max-width: 100% !important; margin: 0 !important; background: transparent !important; } /* у DOC-V: [_nghost] .document-template { background-color: #fff !important } - перебиваем большей специфичностью */ body .guest-mode .document-page, body .guest-mode .document-page > .document-template { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* ---------- Страница входа / регистрации ---------- */ .lex-login { display: flex; justify-content: center; padding: clamp(24px, 6vh, 72px) 16px 48px; font-family: var(--lex-font-sans); font-size: var(--lex-text-sm); line-height: var(--lex-leading); color: var(--lex-color-text); box-sizing: border-box; } .lex-login *, .lex-login *::before, .lex-login *::after { box-sizing: border-box; } .lex-login__card { width: 100%; max-width: 480px; padding: 32px; background: var(--lex-white); border: 1px solid var(--lex-line); border-radius: var(--lex-radius-lg); box-shadow: var(--lex-shadow); } .lex-login__tabs { display: flex; align-items: flex-end; gap: 28px; margin: 0 0 28px; border-bottom: 1px solid var(--lex-line); } .lex-login__tab { margin-bottom: -1px; padding: 0 0 12px; border-bottom: 2px solid transparent; font-size: var(--lex-text-base); font-weight: var(--lex-weight-medium); color: var(--lex-muted); text-decoration: none; } a.lex-login__tab:hover { color: var(--lex-blue-500); border-bottom-color: var(--lex-blue-200); } .lex-login__tab.is-active { color: var(--lex-blue-700); border-bottom-color: var(--lex-sky); } /* переключатель языка RU/KZ - справа от вкладок; ставит localStorage.selectedLang (ключ языка гостя во фронте DOC-V) */ .lex-login__lang { margin: 0 0 -1px auto; padding: 0 0 12px; font-size: var(--lex-text-xs); font-weight: var(--lex-weight-medium); color: var(--lex-muted); text-decoration: none; white-space: nowrap; } .lex-login__lang:hover { color: var(--lex-blue-500); } .lex-login .lex-login__title { margin: 0 0 8px; padding: 0; font-family: var(--lex-font-serif); font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem); font-weight: var(--lex-weight-semibold); line-height: var(--lex-leading-tight); color: var(--lex-color-heading); } .lex-login__lead { margin: 0 0 20px; color: var(--lex-ink-2); } .lex-login__grid.grid { margin: 0 !important; } .lex-login__grid > [class*="col-"] { padding: 0 !important; } .lex-login__label { display: block; margin: 0 0 6px; font-weight: var(--lex-weight-medium); color: var(--lex-ink); } .lex-login__form { margin-bottom: 20px; } .lex-login__form input { width: 100% !important; height: var(--lex-control-height); font-family: var(--lex-font-sans); font-size: 1.125rem; letter-spacing: 0.06em; border-radius: var(--lex-radius) !important; } .lex-login__actions { display: flex; flex-direction: column; gap: 12px; } .lex-login__actions > .lex-login__lead { margin-bottom: 8px; } .lex-login__actions field-list { display: block; width: 100%; } .lex-login__actions field-list .p-button { width: 100%; min-height: var(--lex-control-height); justify-content: center; border: 1px solid var(--lex-color-primary) !important; border-radius: var(--lex-radius) !important; background: var(--lex-color-primary) !important; color: var(--lex-color-on-primary) !important; box-shadow: none !important; font-family: var(--lex-font-sans); font-size: 1rem; font-weight: var(--lex-weight-medium); transition: background var(--lex-transition), border-color var(--lex-transition); } .lex-login__actions field-list .p-button .p-button-label { font-weight: var(--lex-weight-medium); } .lex-login__actions field-list .p-button:enabled:hover { background: var(--lex-color-primary-hover) !important; border-color: var(--lex-color-primary-hover) !important; } .lex-login__actions field-list + field-list .p-button { background: var(--lex-white) !important; color: var(--lex-color-primary) !important; } .lex-login__actions field-list + field-list .p-button:enabled:hover { background: var(--lex-blue-50) !important; color: var(--lex-blue-700) !important; } .lex-login__actions field-list .p-button:focus-visible { outline: 2px solid var(--lex-color-focus); outline-offset: 2px; } .lex-login__actions field-list .p-button:disabled { opacity: 0.7; } .lex-login__msg:not(:empty) { margin-top: 16px; } /* «Попробовать ещё раз / Қайта көру» - кнопка-список в карточке под текстом отказа (блок lexRetry: виден только на точках отказа, ошибки подписи и отмены); основной цвет, во всю ширину, со значком повтора */ .lex-login__retry { margin-top: 16px; } .lex-login__retry field-list .p-button { box-shadow: 0 6px 16px rgba(16, 52, 92, 0.22) !important; } .lex-login__retry field-list .p-button .p-button-label::before { content: "\21BB"; margin-right: 8px; font-weight: 600; } /* «Демо-доступ» - только на демостенде (build_lex_auth.py --demo, DEMO.md): вход вымышленными персонами без ключа. Панель с пометкой «демо» (цвета предупреждения, как метка «Демо» на лендинге), кнопки - контурные, по две в ряд */ .lex-login__demo { margin-top: 24px; padding: 16px; border: 1px dashed var(--lex-warning); border-radius: var(--lex-radius); background: var(--lex-warning-bg); } .lex-login__demo-title { margin: 0 0 4px; color: var(--lex-warning); font-size: var(--lex-text-xs); font-weight: var(--lex-weight-semibold); letter-spacing: var(--lex-tracking-caps); text-transform: uppercase; } .lex-login__demo-lead { margin: 0 0 12px; color: var(--lex-ink-2); font-size: var(--lex-text-sm); } .lex-login__demo-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .lex-login__demo-btns field-list { display: block; } .lex-login__demo-btns field-list .p-button { width: 100%; min-height: 40px; justify-content: center; border: 1px solid var(--lex-color-primary) !important; border-radius: var(--lex-radius) !important; background: var(--lex-white) !important; color: var(--lex-color-primary) !important; box-shadow: none !important; font-family: var(--lex-font-sans); font-size: var(--lex-text-sm); } .lex-login__demo-btns field-list .p-button:enabled:hover { background: var(--lex-blue-50) !important; color: var(--lex-blue-700) !important; } .lex-login__demo-btns field-list .p-button:focus-visible { outline: 2px solid var(--lex-color-focus); outline-offset: 2px; } .lex-login__msg p { margin: 0; } .lex-login .lex-err { padding: 10px 12px; border-radius: var(--lex-radius); background: var(--lex-danger-bg); color: var(--lex-danger); } .lex-login__hint { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--lex-line-soft); font-size: var(--lex-text-xs); line-height: 1.55; color: var(--lex-muted); } .lex-login__hint p { margin: 0 0 10px; } .lex-login__hint b { color: var(--lex-ink-2); font-weight: var(--lex-weight-semibold); } .lex-login a { color: var(--lex-color-link); } .lex-login a:hover { color: var(--lex-color-link-hover); } .lex-login__contacts { margin-top: 8px; font-size: var(--lex-text-xs); color: var(--lex-muted); } @media (max-width: 520px) { .lex-login { padding: 0; } .lex-login__card { max-width: none; min-height: calc(100vh - 56px); padding: 24px 16px 32px; border: 0; border-radius: 0; box-shadow: none; } } /* ---------- Карточка регистрации для администратора ---------- */ .lex-admin-table { border-collapse: collapse; } .lex-admin-table td { padding: 4px 12px 4px 0; vertical-align: top; } .lex-admin-table td:first-child { color: var(--lex-muted, #6c757d); white-space: nowrap; } /* ---------- Документы с клиентами: договор, доп. соглашение, акт (contracts/build_lex_contracts.py) ---------- */ /* .lex-doc — формы и диалоги (ширина как у формы); .lex-doc.lex-card — карточка просмотра во всю ширину */ .lex-doc { max-width: 980px; color: var(--lex-ink, #1f2327); } .lex-doc-title { margin: 0 0 4px; font-family: var(--lex-font-serif, inherit); } .lex-doc-status { margin: 0 0 16px; color: var(--lex-ink-2, #495057); } .lex-doc-sub { margin: 20px 0 8px; font-size: 1rem; } .lex-doc-row { border-bottom: 1px solid var(--lex-line-soft, #e9ecef); } .lex-doc-label { color: var(--lex-muted, #6c757d); padding: 8px 8px 8px 0; } .lex-doc-value { padding: 8px 0; overflow-wrap: anywhere; } .lex-doc-msg { margin: 0 0 16px; } .lex-doc-msg p { margin: 0; padding: 10px 14px; border-radius: var(--lex-radius, 6px); } .lex-doc .lex-msg-err { color: var(--lex-danger, #c53b3b); background: var(--lex-danger-bg, #fbeaea); } .lex-doc .lex-msg-info { background: var(--lex-blue-50, #f0f6f9); } .lex-doc-stub { margin: 0 0 16px; padding: 10px; border: 2px dashed #b8860b; } /* Карточка в духе BPM: шапка (заголовок, бейдж статуса, шаги маршрута), ниже справа на всё место PDF и под ним обсуждение (17.10: в узкой колонке переписку не прочесть), слева узкая колонка панелей (реквизиты, участники). Колонки — flex с переносом, а не @media: документ бывает открыт и в окне, уже экрана. Когда на обе колонки нет 340 + 24 + 720 px, они встают одна под другой во всю ширину, PDF и обсуждение первыми: в шаблоне широкая колонка идёт первой, а row-reverse ставит её справа, пока колонки рядом. Цвет бейджа, шаги и отметки «ожидает» — блоки шаблона с фильтрами по статусу, виден один вариант. */ .lex-doc.lex-card { max-width: none; } .lex-hidden { display: none !important; } .lex-card__head { margin: 0 0 16px; padding: 2px 0 16px; border-bottom: 1px solid var(--lex-line-soft, #e9ecef); } .lex-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .lex-card .lex-doc-title { margin: 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.25; color: var(--lex-color-heading, #0e415f); } /* бейдж статуса */ .lex-card__badges { display: flex; flex-wrap: wrap; gap: 8px; } .lex-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; background: #eef1f4; color: var(--lex-ink-2, #495057); } .lex-badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .lex-badge--work { background: var(--lex-blue-50, #f0f6f9); color: var(--lex-blue-600, #114b6e); box-shadow: inset 0 0 0 1px var(--lex-blue-100, #dceaf0); } .lex-badge--warn { background: var(--lex-warning-bg, #fdf4e8); color: var(--lex-warning, #b45309); } .lex-badge--sign { background: #f2edfb; color: #5b34a6; } .lex-badge--ok { background: var(--lex-success-bg, #edf7f0); color: var(--lex-success, #15803d); } .lex-badge--err { background: var(--lex-danger-bg, #fbeaea); color: var(--lex-danger, #c53b3b); } /* шаги маршрута */ .lex-card__steps { margin-top: 16px; } .lex-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: lexstep; } .lex-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.75rem; line-height: 1.25; color: var(--lex-muted, #6c757d); } .lex-step::before { content: ""; position: absolute; top: 11px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; border-radius: 1px; background: var(--lex-line, #dee2e6); } .lex-step:first-child::before { display: none; } .lex-step.is-done::before, .lex-step.is-cur::before, .lex-step.is-warn::before, .lex-step.is-err::before { background: var(--lex-success, #15803d); } .lex-step__dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--lex-line-input, #ced4da); border-radius: 50%; background: var(--lex-white, #fff); font-size: 0.75rem; font-weight: 700; color: var(--lex-muted, #6c757d); counter-increment: lexstep; box-sizing: border-box; } .lex-step__dot::before { content: counter(lexstep); } .lex-step.is-done .lex-step__dot { border-color: var(--lex-success, #15803d); background: var(--lex-success, #15803d); color: #fff; } .lex-step.is-done .lex-step__dot::before { content: "\2713"; } .lex-step.is-cur .lex-step__dot { border-color: var(--lex-blue-500, #16618f); background: var(--lex-blue-500, #16618f); color: #fff; box-shadow: 0 0 0 4px var(--lex-blue-100, #dceaf0); } .lex-step.is-warn .lex-step__dot { border-color: var(--lex-warning, #b45309); background: var(--lex-warning, #b45309); color: #fff; box-shadow: 0 0 0 4px var(--lex-warning-bg, #fdf4e8); } .lex-step.is-warn .lex-step__dot::before { content: "!"; } .lex-step.is-err .lex-step__dot { border-color: var(--lex-danger, #c53b3b); background: var(--lex-danger, #c53b3b); color: #fff; box-shadow: 0 0 0 4px var(--lex-danger-bg, #fbeaea); } .lex-step.is-err .lex-step__dot::before { content: "\2715"; } .lex-step__label { max-width: 100%; overflow-wrap: anywhere; } .lex-step.is-done .lex-step__label { color: var(--lex-ink-2, #495057); } .lex-step.is-cur .lex-step__label, .lex-step.is-warn .lex-step__label, .lex-step.is-err .lex-step__label { font-weight: 600; color: var(--lex-ink, #1f2327); } @media (max-width: 640px) { .lex-step:not(.is-cur):not(.is-warn):not(.is-err) .lex-step__label { display: none; } .lex-step__label { white-space: nowrap; } } /* колонки */ .lex-card__grid { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; } .lex-card__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .lex-card__main { flex: 999 1 720px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } /* панели */ .lex-panel { padding: 12px 16px 14px; border: 1px solid var(--lex-line, #dee2e6); border-radius: var(--lex-radius-lg, 8px); background: var(--lex-white, #fff); } .lex-card .lex-panel__title { margin: 0 0 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lex-muted, #6c757d); } /* реквизиты: подпись слева, значение справа; ячеек в ряд столько, сколько влезает (в узкой колонке — одна) */ .lex-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 24px; } .lex-item { display: grid; grid-template-columns: minmax(92px, 36%) minmax(0, 1fr); column-gap: 12px; min-width: 0; padding: 6px 0; border-top: 1px solid var(--lex-line-soft, #e9ecef); } .lex-item--wide { grid-column: 1 / -1; } .lex-item__label { font-size: var(--lex-text-xs, 0.8125rem); line-height: 1.45; color: var(--lex-muted, #6c757d); } .lex-item__value { font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; } .lex-item__note { margin-top: 1px; font-size: var(--lex-text-xs, 0.8125rem); color: var(--lex-ink-2, #495057); font-variant-numeric: tabular-nums; } /* участники: роль, имя, отметки */ .lex-people { display: flex; flex-direction: column; gap: 12px; } .lex-person__role { font-size: var(--lex-text-xs, 0.8125rem); line-height: 1.35; color: var(--lex-muted, #6c757d); } .lex-person__name { font-size: 0.875rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; } .lex-person__states { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; } .lex-person__states:empty { display: none; } .lex-state { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; line-height: 1.45; overflow-wrap: anywhere; } .lex-state--ok { background: var(--lex-success-bg, #edf7f0); color: var(--lex-success, #15803d); } .lex-state--ok::before { content: "\2713"; font-weight: 700; } .lex-state--wait { background: var(--lex-blue-50, #f0f6f9); color: var(--lex-blue-600, #114b6e); } .lex-state--wait::before { content: "\25F7"; } .lex-state--err { background: var(--lex-danger-bg, #fbeaea); color: var(--lex-danger, #c53b3b); } .lex-state--err::before { content: "\2715"; font-weight: 700; } .lex-state--note { background: #eef1f4; color: var(--lex-ink-2, #495057); } .lex-state a { color: inherit; } .lex-card__talk .lex-panel__title { margin-bottom: 4px; } /* PDF: подпись, ссылка на файл, под ними просмотрщик */ .lex-file { padding: 12px 16px 16px; border: 1px solid var(--lex-line, #dee2e6); border-radius: var(--lex-radius-lg, 8px); background: var(--lex-white, #fff); } .lex-file__label { margin: 0 0 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lex-muted, #6c757d); } .lex-file__label--final { color: var(--lex-success, #15803d); } .lex-file__label--final::before { content: "\2713\00a0"; } .lex-card__main .shadow-2 { margin-top: 10px !important; } /* Высоту просмотрщика DOC-V ставит по окну (окно − панели − 100 px), но над ним ещё шапка карточки и подпись файла: низ уходил за экран, а pdf.js при открытии ставит фокус в просмотрщик, и браузер докручивал страницу вниз, пряча заголовок. Ограничение по высоте окна держит просмотрщик в пределах экрана */ .lex-card__main .zoom { max-height: max(360px, calc(100vh - 330px)); max-height: max(360px, calc(100dvh - 330px)); } /* таблицы ДС и актов, техническое (администраторам) */ .lex-card__related, .lex-card__tech { margin-top: 16px; } .lex-items--table { grid-template-columns: minmax(0, 1fr); } .lex-items--table .lex-item { grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); column-gap: 16px; } .lex-items--table .lex-item__label { font-size: inherit; line-height: inherit; } @media (max-width: 640px) { .lex-items--table .lex-item { display: block; } .lex-items--table .lex-item__label { margin-bottom: 2px; font-size: var(--lex-text-xs, 0.8125rem); } } /* кнопки действий над карточкой — крупнее (три типа документов с клиентами) */ :is(.doctype-ed49aa9f-705a-5aca-9b28-93a268a24f6a, .doctype-4b34caae-0436-5b9f-8244-b6edf7849eaa, .doctype-bb6c273d-0fda-5acd-b278-b5a6ba255326) .doc-toolbar .toolbar-btn.p-button { min-height: 38px; padding: 0 14px; border-radius: var(--lex-radius, 6px); font-size: 0.9375rem; } /* ---------- «Добавление сотрудника клиента» (форма и карточка) ---------- */ .lex-ae-label { display: block; margin: 0 0 4px; font-weight: 500; color: var(--lex-ink, #1f2937); } /* ---------- «Кабинет клиента» (auth/templates/cabinet.*.html, ../CABINET.md) ---------- */ /* Разделы — карточками. «Ждут вашего действия» и «Документы организации» — поля «Коллекция документов» DOC-V (таблица PrimeNG внутри .lex-cab__coll); их оформление трогается минимально: строка поиска убрана только в «Ждут вашего действия», пустой список заменён текстом раздела (:has). */ /* Ширина до 1600 px, без центрирования: левый край - как у панелей журнала (12 px от области страницы), лишнее место на широком экране остаётся справа. Обёртка документа кабинета - без белой подложки и отступов, карточки разделов лежат на фоне, как панели журнала (у DOC-V: [_nghost] .document-template { background: #fff !important }) */ body .doctype-5554f9ea-3c17-5db2-b1cf-5673f3f4813e > .document-template { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } /* «Личный кабинет» сотрудников Lex (типовой тип f46dd760, одна «Коллекция документов») - так же: та же ширина до 1600 px, левый край - как у журнала; белая подложка остаётся, коллекция без неё лежала бы на узоре фона */ body .doctype-f46dd760-0441-11ea-a747-c0143dc7d3a5 > .document-template { max-width: 1600px; } .lex-cab { max-width: none; margin: 0; padding: 0 0 32px; font-family: var(--lex-font-sans); color: var(--lex-color-text, #1f2327); } .lex-cab *, .lex-cab *::before, .lex-cab *::after { box-sizing: border-box; } .lex-cab__card { min-width: 0; margin: 0 0 16px; padding: 20px 24px; background: var(--lex-white, #fff); border: 1px solid var(--lex-line, #dee2e6); border-radius: var(--lex-radius-lg, 10px); box-shadow: var(--lex-shadow-sm, none); } /* Блок организации .lex-cab__head (17.10, просьба пользователя: раньше - шапка над колонками) - карточка: подпись «Личный кабинет Lex», наименование, «БИН / ИИН» и заметка для сотрудника Lex. Место - в сетке ниже */ .lex-cab__head { padding: 16px 20px; } .lex-cab__eyebrow { margin: 0 0 4px; font-size: var(--lex-text-xs, 0.8125rem); letter-spacing: var(--lex-tracking-caps, 0.06em); text-transform: uppercase; color: var(--lex-muted, #6c757d); } .lex-cab__org { margin: 0; padding: 0; font-family: var(--lex-font-serif, inherit); font-size: var(--lex-text-xl, 1.25rem); line-height: var(--lex-leading-tight, 1.2); color: var(--lex-color-heading, #12324a); overflow-wrap: anywhere; } .lex-cab__bin { margin: 6px 0 0; color: var(--lex-ink-2, #495057); font-variant-numeric: tabular-nums; } /* ЭДО, 23.10.2026 (просьба Андрея): шапка в две строки - подпись, ниже наименование слева и БИН справа (от 700 px); на узком экране БИН под наименованием. Заметка сотрудника Lex (если показана) - на всю ширину под ними */ @media (min-width: 700px) { .lex-cab__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; } .lex-cab__head > * { grid-column: 1 / -1; } .lex-cab__head > .lex-cab__org { grid-column: 1; grid-row: 2; } .lex-cab__head > .lex-cab__bin { grid-column: 2; grid-row: 2; margin: 0; white-space: nowrap; } } .lex-cab__h { margin: 0 0 12px; font-family: var(--lex-font-serif, inherit); font-size: var(--lex-text-lg, 1.125rem); font-weight: var(--lex-weight-semibold, 600); color: var(--lex-color-heading, #12324a); } .lex-cab__hint { margin: -4px 0 12px; font-size: var(--lex-text-xs, 0.8125rem); color: var(--lex-muted, #6c757d); } .lex-cab__staff .lex-cab__hint { margin: 12px 0 0; } /* «Сотрудники» (STAFF): подзаголовки «Администраторы организации» / «Отключены» и кнопки-списки «Добавить сотрудника», «Права и отключение» - как кнопки входа (.lex-login__actions), но в строку и меньше; вторая - контурная */ .lex-cab__sub { margin: 14px 0 2px; font-size: var(--lex-text-xs, 0.8125rem); letter-spacing: var(--lex-tracking-caps, 0.06em); text-transform: uppercase; color: var(--lex-muted, #6c757d); } .lex-cab__list--off, .lex-cab__list--off a { color: var(--lex-muted, #6c757d) !important; } .lex-cab__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .lex-cab__actions field-list { display: block; } .lex-cab__actions field-list .p-button { min-height: 40px; padding: 8px 16px; justify-content: center; border: 1px solid var(--lex-color-primary) !important; border-radius: var(--lex-radius, 6px) !important; background: var(--lex-color-primary) !important; color: var(--lex-color-on-primary, #fff) !important; box-shadow: none !important; font-family: var(--lex-font-sans); font-weight: var(--lex-weight-medium, 500); } .lex-cab__actions field-list .p-button:enabled:hover { background: var(--lex-color-primary-hover) !important; border-color: var(--lex-color-primary-hover) !important; } .lex-cab__actions field-list + field-list .p-button { background: var(--lex-white, #fff) !important; color: var(--lex-color-primary) !important; } .lex-cab__actions field-list + field-list .p-button:enabled:hover { background: var(--lex-blue-50) !important; color: var(--lex-blue-700) !important; } .lex-cab__actions field-list .p-button:focus-visible { outline: 2px solid var(--lex-color-focus); outline-offset: 2px; } /* Сетка: до 1440 px - одна колонка: широкие разделы друг под другом, узкие («Сотрудники», «Контакты Lex») от 900 px по два в ряд, «Вопросы в Lex» и .lex-cab__card--full - во всю ширину. От 1440 px - две колонки: широкая слева (70 %: «Ждут вашего действия», «Документы организации», …) и узкая справа (30 %: «Сотрудники», «Контакты Lex», «Вопросы в Lex», …). 70/30, а не 2/3: коллекция DOC-V уже 767 px (smallWidth) переходит в вид телефона с вкладками, а на 1440 px при развёрнутом меню 2/3 давали ей 742 px. Новые блоки - секции .lex-cab__card в .lex-cab__main или .lex-cab__side. Блок организации .lex-cab__head - первый элемент сетки: в одну колонку он первый, над «Ждут вашего действия»; от 1440 px - справа в первой строке, над «Сотрудниками», а широкая колонка занимает обе строки и начинается сразу с «Ждут вашего действия». Вторая строка - 1fr: тогда высоту первой задаёт только блок организации (элемент, который захватывает гибкую строку, отдаёт свою высоту ей) и между ним и «Сотрудниками» нет зазора */ .lex-cab__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; align-items: start; } .lex-cab__main, .lex-cab__side { min-width: 0; } .lex-cab__side { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; } .lex-cab__side > .lex-cab__card { align-self: start; } @media (min-width: 900px) { .lex-cab__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lex-cab__side > .lex-cab__card { align-self: stretch; } } .lex-cab__side > .lex-cab__ask, .lex-cab__side > .lex-cab__card--full { grid-column: 1 / -1; } /* ЭДО, 23.10.2026 (просьба Андрея): вместо 70/30 от 1440 px - одна широкая колонка: организация, .lex-cab__main, .lex-cab__side («Сотрудники» и «Контакты» по два в ряд от 900 px). От 1600 px «Входящие» и «Исходящие» (.lex-cab__exchange, подряд в .lex-cab__main) стоят рядом по 50 %, остальные разделы широкой колонки - во всю ширину. На 1440 px половина (588 px) уже не вмещает журнал из четырёх колонок (горизонтальная прокрутка), поэтому порог 1600 px */ @media (min-width: 1600px) { .lex-cab__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; } .lex-cab__main > .lex-cab__card { grid-column: 1 / -1; } .lex-cab__main > .lex-cab__exchange { grid-column: auto; align-self: stretch; } } /* ЭДО, 23.10.2026 (просьба Андрея): «Создать документ» на панели кабинета - главное действие, заливка основным цветом темы (как у «Создать» журнала, .toolbar-btn-accent: в режиме кнопок документа фронт этот класс не ставит; !important - у компонента панели фон кнопки тоже !important) */ body .doctype-5554f9ea-3c17-5db2-b1cf-5673f3f4813e .doc-toolbar .toolbar-btn.p-button:not(:disabled) { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--on-primary, var(--primary-color-text, #fff)) !important; } body .doctype-5554f9ea-3c17-5db2-b1cf-5673f3f4813e .doc-toolbar .toolbar-btn.p-button:not(:disabled) :is(.p-button-label, .p-button-icon, .pi, icon, span) { color: inherit; } body .doctype-5554f9ea-3c17-5db2-b1cf-5673f3f4813e .doc-toolbar .toolbar-btn.p-button:not(:disabled):hover { background: var(--primary-dark, var(--primary-color)) !important; border-color: var(--primary-dark, var(--primary-color)) !important; color: var(--on-primary, var(--primary-color-text, #fff)) !important; } /* ЭДО, 23.10.2026: журнал внутри коллекции «Входящие»/«Исходящие» сам выставляет себе высоту от высоты окна (inline, ~900 px при 1100 px окна), и две строки занимали карточку в 1200 px. В кабинете высота - по содержимому (на странице 20 строк) */ .lex-cab__exchange .coll-main folder, .lex-cab__exchange .coll-main .folder, .lex-cab__exchange .folder-view, .lex-cab__exchange .big-display, .lex-cab__exchange .folder-table-container { height: auto !important; } .lex-cab__list { line-height: 1.8; overflow-wrap: anywhere; } .lex-cab__clist { list-style: none; margin: 0 0 16px; padding: 0; line-height: 1.9; } /* ЭДО, 23.10.2026 (просьба Андрея): на широком экране контакты в два столбца - слева телефон и почта, справа WhatsApp и Telegram, внизу на всю ширину «Поддержка: ссылка на портал» (пятый пункт списка) */ @media (min-width: 1100px) { .lex-cab__contacts .lex-cab__clist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 24px; } .lex-cab__contacts .lex-cab__clist > li:nth-child(5) { grid-column: 1 / -1; grid-row: 3; } } .lex-cab__clist a { color: var(--lex-color-link, #16618f); text-decoration: none; } .lex-cab__clist a:hover { text-decoration: underline; } .lex-cab__btn { display: inline-block; padding: 10px 18px; border-radius: var(--lex-radius, 6px); background: var(--lex-color-primary, #16618f); color: var(--lex-color-on-primary, #fff) !important; font-weight: var(--lex-weight-medium, 500); text-decoration: none !important; transition: background var(--lex-transition, .15s); } .lex-cab__btn:hover { background: var(--lex-color-primary-hover, #124f75); } /* Выпадающий список группы кнопок кабинета («Создать документ», p-menu с appendTo=body) на телефоне фронт ставит от левого края кнопки: на 375 px он уходил за правый край (left 222, ширина 210), страница расширялась до 432 px и подписи резались. В кабинете список прижат к правому краю (16.10, находка сессии обмена) */ @media (max-width: 767px) { body:has(.lex-cab) .btn-menu.p-menu-overlay { left: auto !important; right: 8px !important; max-width: calc(100vw - 16px); } } .lex-cab__pending .p-datatable-header { display: none; } /* DOC-V ставит коллекции с журналами высоту по своей оценке свободного места (у кабинета выходило ~2000 px пустоты), а таблице — max-height под неё: в кабинете высота по содержимому */ .lex-cab .collectiondoc-block { height: auto !important; } .lex-cab .p-datatable-wrapper { max-height: none !important; } /* Журналы-кнопки (плитки журналов поля «Коллекция») скрыты только в разделах, где журнал один и повторяет таблицу раздела (16.10, решение пользователя): «Мои обращения», «Отчёты», «Входящие», «Исходящие», «Контрагенты» - адресно, по классам их секций. На широком экране плитка открывала журнал прямо в разделе - с деревом, «Колонок: N» и фильтрами столбцов, а вернуться к таблице у коллекции без категорий нечем (фронт запоминает журнал и после перезагрузки). На узком экране скрыты вкладки «… / Журналы»: без них открыта первая - таблица. Полные журналы - в меню. В «Документах организации» три разных журнала - кнопки и вкладки там остаются */ .lex-cab :is(.lex-cab__requests, .lex-cab__reports, .lex-cab__exchange, .lex-cab__counterparties) :is(.coll-nav-section:has(.coll-folders), .coll-tabs) { display: none !important; } .lex-cab :is(.lex-cab__requests, .lex-cab__reports, .lex-cab__exchange, .lex-cab__counterparties) .coll-nav:not(:has(.coll-cats)) { display: none !important; } /* Пустые списки кабинета (16.10, CABINET.md 2.5). Пустую коллекцию DOC-V рисует таблицей: поиск, шапка столбцов, одна строка с ячейкой colspan (текст «нет данных» из перевода фронта — у lex пустой) и «Всего: 0». Вместо этого — текст раздела. Пусто = в теле таблицы нет ячейки без colspan и нет строки-карточки (.coll-card-cell: на узком экране строки - карточки в ячейке с colspan). Условие срабатывает только если: - открыта таблица, а не плитки журналов: на узком экране у коллекции вкладки «Последние» / «Журналы», на второй фронт прячет таблицу стилем и рисует .coll-folder-list (на широком плитки другие, .coll-folder-list нет); - строка поиска пуста: иначе спрятанный поиск нельзя было бы очистить; - загрузка закончена. Вкладки узкого экрана остаются. Текст — переменная --lex-empty у раздела; сотруднику Lex в чужом кабинете строки не видны никогда (он не владелец строк), для него — свой текст (видимый блок .lex-cab__lexnote в шаблоне). */ .lex-cab__coll:has(.p-datatable-tbody):has(.p-datatable-header input:placeholder-shown):not(:has(.p-datatable-tbody td:not([colspan]))):not(:has(.p-datatable-tbody .coll-card-cell)):not(:has(.p-datatable-loading-overlay)):not(:has(.coll-folder-list)) :is(.p-datatable-header, .p-datatable-thead, .p-datatable-tbody, p-paginator) { display: none !important; } .lex-cab__coll:has(.p-datatable-tbody):has(.p-datatable-header input:placeholder-shown):not(:has(.p-datatable-tbody td:not([colspan]))):not(:has(.p-datatable-tbody .coll-card-cell)):not(:has(.p-datatable-loading-overlay)):not(:has(.coll-folder-list))::after { content: var(--lex-empty, "Записей пока нет."); display: block; margin: 4px 0 0; padding: 14px 16px; border: 1px dashed var(--lex-line, #d7dee5); border-radius: var(--lex-radius, 6px); background: var(--lex-blue-50, #f3f8fb); color: var(--lex-ink-2, #495057); line-height: 1.5; } .lex-cab__docs .lex-cab__coll { --lex-empty: "Документов пока нет. Договоры от Lex и ваши проекты появятся здесь."; } .lex-cab__requests .lex-cab__coll { --lex-empty: "Обращений пока нет. Чтобы задать вопрос юристу, нажмите «Создать обращение» вверху страницы."; } .lex-cab__reports .lex-cab__coll { --lex-empty: "Отчётов пока нет. Ежемесячный отчёт Lex появится здесь."; } .lex-cab__exchange .lex-cab__coll { --lex-empty: "Входящих документов пока нет."; } .lex-cab__exchange + .lex-cab__exchange .lex-cab__coll { --lex-empty: "Исходящих документов пока нет."; } .lex-cab__counterparties .lex-cab__coll { --lex-empty: "Контрагентов пока нет. Добавить — кнопка «Добавить контрагента» вверху страницы."; } .lex-lang-kz .lex-cab__coll { --lex-empty: "Әзірге жазбалар жоқ."; } .lex-lang-kz .lex-cab__docs .lex-cab__coll { --lex-empty: "Әзірге құжаттар жоқ. Lex-тен келген шарттар мен сіздің жобаларыңыз осында пайда болады."; } .lex-lang-kz .lex-cab__requests .lex-cab__coll { --lex-empty: "Әзірге өтініштер жоқ. Заңгерге сұрақ қою үшін беттің жоғарғы жағындағы «Өтініш жасау» батырмасын басыңыз."; } .lex-lang-kz .lex-cab__reports .lex-cab__coll { --lex-empty: "Әзірге есептер жоқ. Lex-тің ай сайынғы есебі осында пайда болады."; } .lex-lang-kz .lex-cab__exchange .lex-cab__coll { --lex-empty: "Әзірге кіріс құжаттар жоқ."; } .lex-lang-kz .lex-cab__exchange + .lex-cab__exchange .lex-cab__coll { --lex-empty: "Әзірге шығыс құжаттар жоқ."; } .lex-lang-kz .lex-cab__counterparties .lex-cab__coll { --lex-empty: "Әзірге контрагенттер жоқ. Қосу — беттің жоғарғы жағындағы «Контрагент қосу» батырмасы."; } /* скрытый фильтром отображения блок фронт оставляет в DOM с style="display: none !important" (16.10, фронт e589e3000) - признак «смотрит сотрудник Lex» - заметка, не спрятанная стилем */ .lex-cab:has(.lex-cab__lexnote):not(:has([style*="none"] > .lex-cab__lexnote)) .lex-cab__card .lex-cab__coll { --lex-empty: "Строки этого списка видят только сотрудники организации."; } .lex-cab.lex-lang-kz:has(.lex-cab__lexnote):not(:has([style*="none"] > .lex-cab__lexnote)) .lex-cab__card .lex-cab__coll { --lex-empty: "Бұл тізімнің жолдарын тек ұйым қызметкерлері көреді."; } .lex-cab__lexnote { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--lex-radius, 6px); background: var(--lex-warning-bg, #fff4e5); color: var(--lex-warning, #8a5300); font-size: var(--lex-text-xs, .8125rem); } .lex-cab__ask { scroll-margin-top: 72px; } @media (max-width: 640px) { /* на телефоне у обёртки документа нет внешнего отступа: без своего карточки встали бы вплотную к краям экрана */ body .doctype-5554f9ea-3c17-5db2-b1cf-5673f3f4813e > .document-template { padding: 0 8px !important; } .lex-cab__card { padding: 16px; border-radius: var(--lex-radius, 6px); } } /* ---------- Формы Lex (.lex-form, 16.10): бланки и карточки (сотрудник клиента, контрагент, документ контрагенту…) ---------- Корень шаблона:
. Внутри: .lex-form__head (h3), .lex-form__sub / __lead (текст под заголовком), .lex-form__msg (сообщение обработки), .lex-form__org (строка «Организация: …»), .lex-form__row (поле: .lex-form__label + поле + .lex-form__hint), .lex-form__facts (dl: подпись - значение), .lex-form__status (is-on/is-off), .lex-form__actions (кнопки-списки; первая - главная, остальные - контурные). Карточка как у кабинета, до 760 px, одна колонка, левый край как у журналов; обёртка документа - без белой подложки. На телефоне - во всю ширину. */ body .document-template:has(.lex-form) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } .lex-form { box-sizing: border-box; max-width: 760px; margin: 4px 0 24px; padding: 24px 28px; background: var(--lex-white, #fff); border: 1px solid var(--lex-line, #dee2e6); border-radius: var(--lex-radius-lg, 8px); box-shadow: var(--lex-shadow-sm, none); font-family: var(--lex-font-sans); color: var(--lex-color-text, #1f2327); } .lex-form *, .lex-form *::before, .lex-form *::after { box-sizing: border-box; } .lex-form [data-type="block"] { padding: 0; } .lex-form__head { margin: 0 0 4px; padding: 0 !important; font-family: var(--lex-font-serif, inherit); font-size: var(--lex-text-xl, 1.25rem); font-weight: var(--lex-weight-semibold, 600); color: var(--lex-color-heading, #12324a); } /* заголовок прямо в корне формы (формы создания): без подзаголовка под ним - отступ до первого поля */ .lex-form > .lex-form__head { margin-bottom: 16px; } .lex-form > .lex-form__head:has(+ :is(.lex-form__sub, .lex-form__lead)) { margin-bottom: 4px; } .lex-form__sub, .lex-form__lead { margin: 0 0 16px; color: var(--lex-ink-2, #495057); } .lex-form__lead { font-size: var(--lex-text-sm, 0.875rem); } .lex-form__msg { margin: 8px 0 16px; } .lex-form__msg:empty { display: none; } .lex-form__msg p { margin: 0; } .lex-form__msg .lex-err { padding: 10px 12px; border-radius: var(--lex-radius, 4px); background: var(--lex-danger-bg, #fdecea); color: var(--lex-danger, #b42318); } .lex-form__org { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 20px; padding: 10px 14px; border-radius: var(--lex-radius, 4px); background: var(--lex-blue-50, #f3f8fb); } .lex-form__org .lex-form__label { display: inline; margin: 0; color: var(--lex-muted, #6c757d); font-weight: var(--lex-weight-regular, 400); } .lex-form__org > *:not(.lex-form__label) { flex: 1 1 260px; min-width: 0; font-weight: var(--lex-weight-medium, 500); } .lex-form__row { margin: 0 0 16px; } .lex-form__label { display: block; margin: 0 0 6px; font-weight: var(--lex-weight-medium, 500); color: var(--lex-ink, #1f2327); } .lex-form__hint { margin: 6px 0 0; font-size: var(--lex-text-xs, 0.8125rem); color: var(--lex-muted, #6c757d); } .lex-form__value { padding: 8px 0; color: var(--lex-ink, #1f2327); } .lex-form__row :is(input.p-inputtext, textarea.p-inputtext, .p-dropdown, .p-autocomplete, .p-autocomplete-input, .p-calendar) { width: 100%; max-width: 100%; } .lex-form__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 8px 0 16px; } .lex-form__facts dt { color: var(--lex-muted, #6c757d); } .lex-form__facts dd { margin: 0; color: var(--lex-ink, #1f2327); overflow-wrap: anywhere; } .lex-form__status { display: inline-block; margin: 0 0 4px; padding: 4px 12px; border-radius: 14px; font-size: var(--lex-text-sm, 0.875rem); font-weight: var(--lex-weight-semibold, 600); } .lex-form__status.is-on { background: var(--lex-success-bg, #e7f6ec); color: var(--lex-success, #1b7a3d); } .lex-form__status.is-off { background: var(--lex-line-soft, #eef1f4); color: var(--lex-ink-2, #495057); } .lex-form__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; } .lex-form__actions field-list { display: block; } .lex-form__actions field-list .p-button { min-height: 40px; padding: 8px 18px; justify-content: center; border: 1px solid var(--lex-color-primary) !important; border-radius: var(--lex-radius, 4px) !important; background: var(--lex-color-primary) !important; color: var(--lex-color-on-primary, #fff) !important; box-shadow: none !important; font-family: var(--lex-font-sans); font-weight: var(--lex-weight-medium, 500); } .lex-form__actions field-list .p-button:enabled:hover { background: var(--lex-color-primary-hover) !important; border-color: var(--lex-color-primary-hover) !important; } .lex-form__actions field-list + field-list .p-button { background: var(--lex-white, #fff) !important; color: var(--lex-color-primary) !important; } .lex-form__actions field-list + field-list .p-button:enabled:hover { background: var(--lex-blue-50) !important; color: var(--lex-blue-700) !important; } @media (max-width: 640px) { body .document-template:has(.lex-form) { padding: 0 8px !important; } .lex-form { margin: 0 0 16px; padding: 16px; border-radius: var(--lex-radius, 4px); } .lex-form__facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .lex-form__facts dd { margin-bottom: 10px; } .lex-form__actions field-list { flex: 1 1 100%; } .lex-form__actions field-list .p-button { width: 100%; } } /* ---------- Два языка: RU / KZ ---------- */ /* Сообщение, которое пишет действие (одно значение поля), содержит оба языка: ……. Видимый выбирает класс языка у корня формы шаблона (у каждой языковой формы свой) или атрибут html[data-lex-lang] (ставит шапка top_bar из localStorage.selectedLang: 2 - русский, 3 - казахский). Без них - русский. */ .lex-kz { display: none; } html[data-lex-lang="3"] .lex-kz, .lex-lang-kz .lex-kz { display: inline; } html[data-lex-lang="3"] .lex-ru, .lex-lang-kz .lex-ru { display: none; } .lex-lang-ru .lex-ru { display: inline; } .lex-lang-ru .lex-kz { display: none; } /* ---------- «Согласие на обработку ПД» (auth/templates/consent-*.html, ../AUTH.md, раздел 11) ---------- */ /* Карточка как у входа, но шире: текст согласия читается в прокручиваемом блоке. Шаблон «Подписание» (.lex-consent--gate) - «шлагбаум»: пока он открыт, меню DOC-V и ссылка «Кабинет» в шапке спрятаны, как у гостя. Это оформление, а не запрет: адреса журналов и документов движок открывает по правам (AUTH.md, раздел 11). */ .lex-consent .lex-consent__card { max-width: 760px; } .lex-consent__eyebrow { margin: 0 0 6px; font-size: var(--lex-text-xs); font-weight: var(--lex-weight-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--lex-muted); } .lex-consent__draft { display: inline-block; margin: 0 0 14px; padding: 4px 10px; border-radius: var(--lex-radius); background: var(--lex-warning-bg, #fff4e5); color: var(--lex-warning, #8a5300); font-size: var(--lex-text-xs); font-weight: var(--lex-weight-medium); } .lex-consent__text { max-height: min(46vh, 420px); overflow-y: auto; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--lex-line); border-radius: var(--lex-radius); background: var(--lex-blue-50, #f3f8fb); font-size: var(--lex-text-xs); line-height: 1.6; color: var(--lex-ink-2); } .lex-consent__text h3 { margin: 0 0 4px; font-family: var(--lex-font-serif); font-size: 1.05rem; color: var(--lex-color-heading); } .lex-consent__text p { margin: 0 0 8px; } .lex-consent__status { display: inline-block; margin: 4px 0 16px; padding: 4px 12px; border-radius: 999px; font-weight: var(--lex-weight-semibold); } .lex-consent__status.is-valid { background: var(--lex-success-bg, #e7f6ec); color: var(--lex-success, #1b7a3d); } .lex-consent__status.is-revoked { background: var(--lex-danger-bg); color: var(--lex-danger); } .lex-consent__status.is-replaced { background: var(--lex-line-soft, #eef1f4); color: var(--lex-ink-2); } .lex-consent__facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; } .lex-consent__facts dt { color: var(--lex-muted); } .lex-consent__facts dd { margin: 0; color: var(--lex-ink); } .lex-consent__details { margin: 0 0 16px; } .lex-consent__details > summary { cursor: pointer; color: var(--lex-color-link); font-weight: var(--lex-weight-medium); } .lex-consent__signed { margin-top: 10px; max-height: 40vh; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--lex-line); border-radius: var(--lex-radius); white-space: pre-wrap; font-size: var(--lex-text-xs); line-height: 1.55; color: var(--lex-ink-2); } .lex-consent__revoke { margin-top: 8px; } .lex-consent__revoke field-list .p-button { background: var(--lex-white) !important; color: var(--lex-danger) !important; border-color: var(--lex-danger) !important; } .lex-consent__revoke field-list .p-button:enabled:hover { background: var(--lex-danger-bg) !important; color: var(--lex-danger) !important; border-color: var(--lex-danger) !important; } .lex-consent__revoke field-list:first-of-type + field-list .p-button { color: var(--lex-ink-2) !important; border-color: var(--lex-line) !important; } .lex-consent__warn { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--lex-radius); background: var(--lex-danger-bg); color: var(--lex-danger); } /* карточка согласия в стиле .lex-form (16.10): предупреждение об отзыве - строкой над кнопками «Да, отозвать» / «Отмена» */ .lex-form__actions > .lex-consent__warn { flex: 1 1 100%; } .lex-consent__back { margin: 20px 0 0; } .lex-form .lex-consent__back a { color: var(--lex-color-link); } .lex-form .lex-consent__back a:hover { color: var(--lex-color-link-hover); } /* на регистрации текст согласия - в форме, под полем БИН (подпись заявки - это и согласие) */ .lex-login__consent { margin: 16px 0 0; } .lex-login__consent > summary { font-weight: var(--lex-weight-medium); color: var(--lex-ink); } .lex-login__consent .lex-consent__text { margin: 10px 0 0; max-height: 220px; } /* «шлагбаум» на странице подписи: меню и «Кабинет» в шапке скрыты, страница во всю ширину */ body:has(.lex-consent--gate) .v-menu, body:has(.lex-consent--gate) .menubar-block, body:has(.lex-consent--gate) .h-menu, body:has(.lex-consent--gate) .lex-topbar__cab { display: none !important; } body:has(.lex-consent--gate) .main-layoute-route-outlet { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* кабинет: ссылка «Моё согласие» - второстепенная кнопка */ .lex-cab__btn.lex-cab__btn--ghost { background: transparent; color: var(--lex-color-primary, #16618f) !important; border: 1px solid var(--lex-color-primary, #16618f); } .lex-cab__btn.lex-cab__btn--ghost:hover { background: var(--lex-blue-50, #f3f8fb); } @media (max-width: 520px) { .lex-consent__facts { grid-template-columns: 1fr; gap: 2px; } .lex-consent__facts dd { margin-bottom: 8px; } .lex-consent__text { max-height: 50vh; } } /* текст на втором языке - свёрнутым блоком под основным (подписывается текст на обоих языках) */ .lex-consent__other { margin: -8px 0 20px; } /* ---- Обращения и ежемесячные отчёты (../requests/build_lex_requests.py, ../REQUESTS.md) ---- Карточки обращения и отчёта - на классах карточки договора (.lex-card*, .lex-panel*, .lex-item*); основная колонка у них - панели друг под другом. .lex-late - отметка просрочки в «Моих обращениях». */ .lex-req__main { display: flex; flex-direction: column; gap: 14px; } .lex-req .lex-doc-hint, .lex-doc .lex-doc-hint { margin-top: 4px; font-size: var(--lex-text-xs, 0.8125rem); color: var(--lex-muted, #6c757d); } .lex-late { color: var(--lex-danger, #c53b3b); font-weight: var(--lex-weight-medium, 500); white-space: nowrap; } /* ---- Статусы плашкой (17.10; ../common/lex_status.py, ../CONTRACTS.md «Бейджи статусов») ---- Журналы: у колонки «Статус» «Вид значения» = «Плашка» (span.cell-chip-system), а смысловой цвет задаёт стиль журнала: ячейка получает класс lex-tone-<тон> (DOC-V ставит ему префикс font-). Цвета - отдельно для светлой и тёмной темы (контраст текста на плашке не ниже 4,5:1): цвет, который DOC-V сам подмешивает стилю в тёмной теме, на жёлтом, зелёном и красном даёт 3,1-3,8:1. Серый - ячейка без стиля: плашка в цвет текста таблицы. Без поддержки color-mix правила фона и рамки отбрасываются, остаётся серая плашка DOC-V. Коллекции кабинета: значение ячейки - (тоны .lex-badge--work/warn/ok/err выше) */ .cell-chip-system { color: inherit !important; font-weight: var(--lex-weight-semibold, 600) !important; border-radius: 12px !important; background: color-mix(in srgb, currentColor 8%, transparent) !important; border-color: color-mix(in srgb, currentColor 24%, transparent) !important; } .cell-chip-system::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle; } .font-lex-tone-work { --lex-tone: #114b6e; } .font-lex-tone-warn { --lex-tone: #92400e; } .font-lex-tone-ok { --lex-tone: #166534; } .font-lex-tone-err { --lex-tone: #b02a2a; } body.docv-theme-dark .font-lex-tone-work { --lex-tone: #8fc3e6; } body.docv-theme-dark .font-lex-tone-warn { --lex-tone: #f2b36b; } body.docv-theme-dark .font-lex-tone-ok { --lex-tone: #6fcf8f; } body.docv-theme-dark .font-lex-tone-err { --lex-tone: #f28b8b; } [class*="font-lex-tone-"] .cell-chip-system { color: var(--lex-tone) !important; background: color-mix(in srgb, var(--lex-tone) 10%, transparent) !important; border-color: color-mix(in srgb, var(--lex-tone) 28%, transparent) !important; } body.docv-theme-dark [class*="font-lex-tone-"] .cell-chip-system { background: color-mix(in srgb, var(--lex-tone) 16%, transparent) !important; } .lex-cab__coll .lex-badge { padding: 2px 10px 2px 8px; font-size: 0.75rem; } /* ЭДО: синие акценты Lex заменены зелёными токенами лендинга (23.10.2026) */ html:root { --lex-blue-50: #ecfdf3; --lex-blue-100: #d3f5dc; --lex-blue-200: #a9e5b8; --lex-blue-500: #2a8720; --lex-blue-600: #167536; --lex-blue-700: #167536; --lex-color-primary: #2a8720; --lex-color-primary-hover: #167536; --lex-color-link: #2a8720; --lex-color-link-hover: #167536; --lex-color-focus: #2a8720; --lex-color-accent-text: #167536; } /* Согласие подписано (23.10.2026): на точке «Вход разрешён» в сообщении есть ссылка в кабинет. Текст и кнопки подписи прячем, ссылку делаем крупной кнопкой. Признак - ссылка в .lex-login__msg: до подписи сообщение пустое или без ссылки. */ .lex-consent--gate:has(.lex-login__msg a[href="/"]) .lex-consent__draft, .lex-consent--gate:has(.lex-login__msg a[href="/"]) .lex-login__lead, .lex-consent--gate:has(.lex-login__msg a[href="/"]) .lex-consent__text, .lex-consent--gate:has(.lex-login__msg a[href="/"]) .lex-consent__details, .lex-consent--gate:has(.lex-login__msg a[href="/"]) .lex-login__grid, .lex-consent--gate:has(.lex-login__msg a[href="/"]) .lex-login__hint { display: none; } .lex-consent--gate .lex-login__msg a[href="/"] { display: block; margin-top: 12px; padding: 14px 20px; border-radius: var(--lex-radius); background: var(--lex-color-link); color: #fff; text-align: center; font-weight: var(--lex-weight-semibold); text-decoration: none; } .lex-consent--gate .lex-login__msg a[href="/"]:hover { opacity: .9; }