когда формы dirty — visibility/transform управляются здесь. */
.ui-save-bar {
position: fixed;
left: 0;
right: 0;
bottom: 16px;
z-index: 950;
margin: 0 auto;
width: min(640px, calc(100% - 32px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
background: var(--ui-surface);
border: 1px solid var(--ui-border-strong);
border-radius: 12px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
pointer-events: none;
transition:
opacity var(--duration-base) var(--ease-out-quart),
transform var(--duration-base) var(--ease-spring),
visibility 0s linear var(--duration-base);
}
.ui-save-bar.is-revealed {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition:
opacity var(--duration-base) var(--ease-out-quart),
transform var(--duration-base) var(--ease-spring),
visibility 0s linear 0s;
}
.ui-save-bar__status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ui-text);
font-weight: 500;
}
.ui-save-bar__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ui-warning);
box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.14);
}
.ui-save-bar__actions { display: inline-flex; gap: 8px; }
/* ── Top progress bar для page navigation ─────────────────────────────────
Работает во ВСЕХ браузерах (не только Chromium): тонкая полоса 2px вверху
страницы, синяя градиентная заливка, плавно растёт во время перехода.
Управление — через JS в shared/layout.js (классы add/remove на body). */
.nav-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 9999;
background: transparent;
pointer-events: none;
opacity: 0;
transition: opacity 180ms var(--ease-out-quart);
}
.nav-progress::before {
content: '';
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg,
var(--ui-primary) 0%,
color-mix(in srgb, var(--ui-primary) 60%, transparent) 50%,
var(--ui-primary) 100%);
background-size: 200% 100%;
box-shadow: 0 0 8px var(--ui-primary);
/* Кривая ease-out-expo: быстро стартует, замедляется к 90% — даёт
ощущение «почти готово», даже если страница ещё грузится. */
transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
animation: nav-progress-shimmer 1.4s linear infinite;
}
@keyframes nav-progress-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
body.nav-progress-active .nav-progress {
opacity: 1;
}
body.nav-progress-active .nav-progress::before {
width: 88%;
}
body.nav-progress-done .nav-progress {
opacity: 0;
transition: opacity 200ms var(--ease-out-quart) 120ms;
}
body.nav-progress-done .nav-progress::before {
width: 100%;
transition: width 160ms var(--ease-out-quart);
}
/* ── Soft-hidden утилита ──────────────────────────────────────────────────
Замена `display: none` для модалок/дропдаунов/алертов: плавно гасим
opacity + visibility + transform, потом скрываем по visibility (а не по
display, иначе HTML-flow дёрнется). Использование:
…
// показано
…
// спрятано
В JS: el.classList.toggle("is-revealed", show).
Если нужен мгновенный hide без анимации — можно дополнительно поставить
.is-instant и сбросить transition. */
.soft-hidden,
[data-soft-hidden] {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition:
opacity var(--duration-fast) var(--ease-out-quart),
transform var(--duration-fast) var(--ease-out-quart),
visibility 0s linear var(--duration-fast);
}
.soft-hidden.is-revealed,
[data-soft-hidden].is-revealed {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition:
opacity var(--duration-fast) var(--ease-out-quart),
transform var(--duration-fast) var(--ease-out-quart),
visibility 0s;
}
/* ── Stagger utility: плавное появление списков по очереди ─────────────────
Применение: добавить .ui-stagger на родителя (tbody / ul / .grid). Каждый
прямой потомок (≤20) появится с шагом 30мс. Старается работать «дёшево»:
только opacity + translateY, без layout-thrash.
Ограничение: фиксированные nth-child(1..20) — для длинных списков (50+)
stagger вырождается в одновременное появление последних строк, что
как раз ОК (длинная пачка не должна играть полминуты). */
.ui-stagger > * {
opacity: 0;
transform: translateY(6px);
animation: ui-slide-up var(--duration-base) var(--ease-out-quart) forwards;
}
.ui-stagger > *:nth-child(1) { animation-delay: 20ms; }
.ui-stagger > *:nth-child(2) { animation-delay: 50ms; }
.ui-stagger > *:nth-child(3) { animation-delay: 80ms; }
.ui-stagger > *:nth-child(4) { animation-delay: 110ms; }
.ui-stagger > *:nth-child(5) { animation-delay: 140ms; }
.ui-stagger > *:nth-child(6) { animation-delay: 170ms; }
.ui-stagger > *:nth-child(7) { animation-delay: 200ms; }
.ui-stagger > *:nth-child(8) { animation-delay: 230ms; }
.ui-stagger > *:nth-child(9) { animation-delay: 260ms; }
.ui-stagger > *:nth-child(10) { animation-delay: 290ms; }
.ui-stagger > *:nth-child(11) { animation-delay: 320ms; }
.ui-stagger > *:nth-child(12) { animation-delay: 350ms; }
.ui-stagger > *:nth-child(13) { animation-delay: 380ms; }
.ui-stagger > *:nth-child(14) { animation-delay: 410ms; }
.ui-stagger > *:nth-child(15) { animation-delay: 440ms; }
.ui-stagger > *:nth-child(n+16) { animation-delay: 470ms; }
/* ── prefers-reduced-motion ───────────────────────────────────────────────
Полностью убираем transform/scale/translate, оставляем opacity-only
(короткий duration), чтобы пользователи с вестибулярной чувствительностью
всё равно видели state-change, но без «уезжающих» элементов. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.soft-hidden,
[data-soft-hidden],
.ui-skeleton {
transition-duration: 150ms !important;
}
}
.ui-table {
width: 100%;
border-collapse: collapse;
}
.ui-table th {
font-size: var(--text-xs);
color: var(--ui-text-soft);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
background: rgba(241, 244, 246, 0.72);
}
.ui-table th,
.ui-table td {
padding: var(--space-4) var(--space-5);
text-align: left;
border-bottom: 0.5px solid rgba(171, 179, 183, 0.18);
}
.ui-table tr:last-child td {
border-bottom: 0;
}
.ui-table tbody tr td {
transition: background-color var(--duration-instant) var(--ease-out-quart);
}
.ui-table tr:hover td {
background: rgba(241, 244, 246, 0.55);
}
.ui-empty-hero {
min-height: 240px;
display: grid;
place-items: center;
text-align: center;
}
.ui-footer-links {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
@media (max-width: 1100px) {
.ui-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-grid-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
:root {
--ui-page-gutter: 1rem;
--ui-shell-gutter: 1rem;
}
.shell-header__inner {
grid-template-columns: auto 1fr auto;
gap: 0.75rem;
}
.shell-header__nav {
display: none;
}
.ui-page-header--split {
flex-direction: column;
}
.ui-grid-2,
.ui-grid-4 {
grid-template-columns: 1fr;
}
.ui-title {
font-size: 1.5rem;
line-height: 1.9rem;
}
.ui-page-header__title {
font-size: 1.5rem;
line-height: 1.9rem;
}
.ui-panel-header,
.ui-panel-body {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Адаптивный масштаб на больших экранах: вёрстка фиксированная (px/rem), иначе на крупных
мониторах всё мелкое. zoom на .inn-shell-stack масштабирует контент и навбар; порталы шелла
(дропдауны уведомлений/аккаунта, тост) остаются в body — позиционируются по визуальным
координатам якоря через getBoundingClientRect и НЕ смещаются (проверено эмпирически),
просто рендерятся нативного размера. */
@media (min-width: 1700px) { .inn-shell-stack { zoom: 1.10; } }
@media (min-width: 2000px) { .inn-shell-stack { zoom: 1.18; } }
@media (min-width: 2560px) { .inn-shell-stack { zoom: 1.30; } }
@media (min-width: 3200px) { .inn-shell-stack { zoom: 1.45; } }
/* ════════════════════════════════════════════════════════════════════════
MOBILE FOUNDATION (shared, added in the responsive pass)
Everything below is scoped to ≤767.98px and must NOT affect desktop ≥768px.
Page-local stylesheets build on the helper classes defined here.
════════════════════════════════════════════════════════════════════════ */
/* ── Visibility utilities (work at any width) ──────────────────────────── */
.ui-only-mobile { display: none; }
@media (max-width: 767.98px) {
.ui-only-desktop { display: none !important; }
.ui-only-mobile { display: revert; }
.ui-only-mobile.ui-only-mobile--flex { display: flex; }
}
/* ── Responsive table helpers (use one per data table) ─────────────────── */
/* (a) horizontal scroll — keep table intact, scroll inside its own box */
.ui-table--responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-table--responsive:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
/* ── Global keyboard focus ring (a11y, WCAG 2.4.7 / 2.4.11) ────────────────
Видимое фокус-кольцо на всём интерактиве. :focus-visible показывается ТОЛЬКО
при навигации с клавиатуры — мышиные клики/тач не затрагиваются. Страницы
могут переопределить точечно более специфичным селектором. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--ui-primary);
outline-offset: 2px;
}
/* (b) stacked cards — each row becomes a card; add data-label="
" to every */
@media (max-width: 767.98px) {
.ui-table--cards thead {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.ui-table--cards,
.ui-table--cards tbody,
.ui-table--cards tr,
.ui-table--cards td { display: block; width: 100%; }
.ui-table--cards tr {
border: 0.5px solid var(--ui-border);
border-radius: 12px;
margin-bottom: 12px;
background: var(--ui-surface);
overflow: hidden;
}
.ui-table--cards td {
display: flex; align-items: baseline; justify-content: space-between;
gap: 14px; padding: 10px 14px; text-align: right;
border: 0; border-bottom: 0.5px solid rgba(171, 179, 183, 0.18);
}
.ui-table--cards tr td:last-child { border-bottom: 0; }
.ui-table--cards td::before {
content: attr(data-label);
font-weight: 600; color: var(--ui-text-muted);
text-align: left; flex: 0 0 auto;
}
.ui-table--cards td[data-label=""]::before { content: none; }
/* (b2) тот же карточный паттерн для div-grid «таблиц» React-страниц
(раскладка колонок задана inline style={{display:'grid',…}}, поэтому
здесь нужен !important — иначе inline-стили побеждают).
Разметка: контейнер получает .ui-table--cards, строка-шапка —
.ui-table-cards__head, строка данных — .ui-table-cards__row, каждая
ячейка — .ui-table-cards__cell + data-label="<заголовок колонки>".
В отличие от | -варианта строка НЕ становится отдельной карточкой:
div-таблицы уже живут внутри карточки-контейнера со своей шапкой,
карточка-в-карточке дала бы двойные рамки. Строки разделяются своим
существующим border-bottom. */
.ui-table--cards .ui-table-cards__head { display: none !important; }
.ui-table--cards .ui-table-cards__row {
display: block !important;
width: 100% !important;
padding: 4px 0 !important;
}
.ui-table--cards .ui-table-cards__cell {
display: flex !important;
flex-direction: row !important;
align-items: baseline;
justify-content: space-between !important;
gap: 14px;
width: 100%;
padding: 6px 16px !important;
text-align: right;
font-size: 14px !important;
/* длинные названия компаний переносятся по словам, не по буквам */
overflow-wrap: anywhere;
}
.ui-table--cards .ui-table-cards__cell::before {
content: attr(data-label);
font-weight: 600; color: var(--ui-text-muted);
text-align: left; flex: 0 0 auto;
}
.ui-table--cards .ui-table-cards__cell[data-label=""]::before { content: none; }
/* (b3) ячейка-действия (общая для | и div-варианта): ссылки/кнопки
строки складываются колонкой во всю ширину с тап-таргетом ≥44px.
Метка (data-label) остаётся первой строкой, как в /reports/. */
.ui-table--cards .ui-table-cards__actions {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 8px !important;
text-align: left !important;
white-space: normal !important;
}
.ui-table--cards .ui-table-cards__actions a,
.ui-table--cards .ui-table-cards__actions button,
.ui-table--cards .ui-table-cards__actions [aria-disabled="true"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px;
padding: 0 14px !important;
margin: 0 !important;
border: 0.5px solid var(--ui-border) !important;
border-radius: 8px;
font-size: 14px !important;
text-decoration: none !important;
}
}
/* ── Off-canvas page sidebar primitive (e.g. company sections) ─────────── */
/* Page wires a toggle button that sets [data-mobile-open="true"] + a backdrop. */
.ui-sidebar-backdrop { display: none; }
@media (max-width: 767.98px) {
.ui-app-sidebar.ui-app-sidebar--offcanvas {
position: fixed; top: 52px; bottom: 0; left: 0;
width: min(86vw, 320px);
transform: translateX(-100%);
transition: transform 0.28s var(--ease-out-quart, ease);
z-index: 1200;
box-shadow: 0 18px 44px rgba(18, 35, 52, 0.22);
will-change: transform;
}
.ui-app-sidebar.ui-app-sidebar--offcanvas[data-mobile-open="true"] { transform: translateX(0); }
.ui-sidebar-backdrop {
display: block; position: fixed; inset: 52px 0 0 0;
background: rgba(15, 23, 42, 0.42); z-index: 1199;
opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
.ui-sidebar-backdrop[data-mobile-open="true"] { opacity: 1; pointer-events: auto; }
/* alternative: horizontal tab strip for short section lists */
.ui-app-sidebar.ui-app-sidebar--tabs {
position: static; width: 100%; flex: 0 0 auto;
display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
gap: 6px; padding: 6px 0; border-bottom: 0.5px solid var(--ui-border);
}
.ui-app-sidebar.ui-app-sidebar--tabs .ui-app-sidebar__scroll { display: flex; gap: 6px; }
}
/* ── Hamburger / toggle button (44px tap target) ───────────────────────── */
.ui-nav-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border: 0.5px solid var(--ui-border);
border-radius: var(--ui-radius); background: var(--ui-surface);
color: var(--ui-text); cursor: pointer;
}
/* ── Global mobile safeguards ──────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* media never breaks layout width */
img, svg, video, canvas, iframe { max-width: 100%; }
/* prevent iOS auto-zoom on focus (16px min), low specificity so pages can opt out */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
:where(select),
:where(textarea) { font-size: 16px; }
/* comfortable tap targets for small interactive controls */
.ui-icon-btn, .ui-chip, .ui-tab, .ui-app-sidebar__nav-inner a, .ui-footer-links a {
min-height: 44px;
}
/* fluid main headings */
.ui-title { font-size: clamp(1.25rem, 5.2vw, 1.5rem); line-height: 1.25; }
.ui-page-header__title { font-size: clamp(1.25rem, 5.2vw, 1.5rem); line-height: 1.25; }
/* tighter card padding on phones */
.ui-card { padding: var(--space-4); }
/* full-width primary actions read better on phones */
.ui-btn--block-mobile { width: 100%; }
}
|