. Формы и карточки человека остаются в 1200 px — длинная строка ввода читается хуже. */ .m-wrap--wide, [data-layout="wide"] .m-wrap, [data-layout="wide"] .m-head__in { max-width: 1680px; } @media (min-width: 1900px) { .m-wrap--wide, [data-layout="wide"] .m-wrap, [data-layout="wide"] .m-head__in { max-width: 1840px; } } /* 2. Раскладка блоков. Два блока рядом — только если каждому хватает места; иначе они сами встают друг под другом (а не сжимаются до прокрутки). */ .m-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); align-items: start; } .m-cols--charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); } /* Таблица с 5+ колонками — всегда во всю ширину строки, даже внутри .m-cols */ .m-cols > .m-span-all { grid-column: 1 / -1; } /* 3. Таблица-окно: одна прокрутка вместо двух. Высота окна = высота экрана минус шапка, поэтому на странице видна целиком, а внутри прокручиваются строки; шапка таблицы и первая колонка стоят на месте. Использовать для таблиц длиннее ~15 строк. Короткие — обычный .m-tablebox без высоты. */ .m-tablebox--fit { max-height: calc(100vh - 120px); min-height: 240px; overflow: auto; overscroll-behavior: contain; } .m-tablebox--fit .m-table thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--m-line); } .m-table--fix1 tbody td:first-child, .m-table--fix1 thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--m-paper); box-shadow: inset -1px 0 0 var(--m-line-soft); } .m-table--fix1 thead th:first-child { z-index: 4; background: var(--m-thead); } .m-table--fix1 tbody tr.is-link:hover td:first-child { background: var(--m-hover); } /* тень у края, когда таблицу можно прокрутить вбок — видно, что колонки есть дальше */ .m-tablebox--fit, .m-tablebox { background: linear-gradient(90deg, var(--m-paper) 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local, linear-gradient(270deg, var(--m-paper) 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(28,27,41,.12), rgba(28,27,41,0)) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(28,27,41,.12), rgba(28,27,41,0)) right center / 12px 100% no-repeat scroll, var(--m-paper); } /* 4. Колонки. Шапка переносится словами (не по буквам), числа не переносятся, длинные названия — максимум 2 строки, полный текст в title. */ .m-table th { white-space: normal; vertical-align: bottom; line-height: 1.25; min-width: 72px; } .m-table th.m-num { text-align: right; } .m-table td.m-num, .m-table th.m-num { white-space: nowrap; } .m-table .m-col-okrug { min-width: 180px; } .m-table .m-col-name { min-width: 240px; max-width: 420px; } .m-table .m-col-text { min-width: 320px; max-width: 560px; } @media (max-width: 640px) { .m-table .m-col-okrug { min-width: 130px; } .m-table .m-col-name { min-width: 180px; } .m-table .m-col-text { min-width: 220px; } } .m-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .m-table .m-col-zone { width: 92px; min-width: 92px; } /* «Городской округ» в каждой строке — шум: служба убирает хвост, полное название — в title */ /* плотность: для таблиц от 8 колонок */ .m-table--dense { font-size: 13.5px; } .m-table--dense th { padding: 9px 10px; } .m-table--dense td { padding: 8px 10px; } /* 5. Порции вместо обрезки «первые 800 строк». 100 строк на страницу, счётчик и переход; поиск/фильтры — над таблицей. */ .m-pager { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 10px 2px 0; font-size: 13px; color: var(--m-soft); } .m-pager__nav { display: flex; gap: 4px; align-items: center; } .m-pager__nav button { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--m-line); border-radius: 8px; background: #fff; font: 600 13px var(--m-font); color: var(--m-ink); cursor: pointer; font-variant-numeric: tabular-nums; } .m-pager__nav button:hover { border-color: #b3a9e6; } .m-pager__nav button[aria-current="page"] { background: var(--m-accent); border-color: var(--m-accent); color: #fff; } .m-pager__nav button:disabled { color: var(--m-quiet); cursor: default; } /* 6. Графики. Подсказка не вылезает за карточку: карточка графика — точка отсчёта, скрипт ставит подсказку слева от точки, если справа не хватает места (класс --left). */ .m-chart { position: relative; overflow: visible; } .m-chart svg { width: 100%; height: auto; display: block; } .m-chart__tip { position: absolute; z-index: 5; pointer-events: none; max-width: 260px; background: var(--m-ink); color: #fff; border-radius: 9px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 10px 24px rgba(28,27,41,.22); white-space: nowrap; transform: translate(12px, -50%); } .m-chart__tip--left { transform: translate(calc(-100% - 12px), -50%); } /* Кто отключил движение в системе — анимаций нет вовсе */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }