/* ============================================================================ panel.css — всё, что нужно живой странице сверх артбордов docs/design. flow.css кладётся байт-в-байт и не правится (docs/decisions.md, Т1); где flow.css и таблица «Анимации» из docs/design/README.md расходятся, главнее таблица — её недостающие строки тоже здесь. ========================================================================== */ /* ---------- Страница вместо артборда: .fc — это ---------- */ html.fc { position: static; overflow: visible; min-height: 100%; } html.fc body { margin: 0; min-height: 100vh; min-height: 100dvh; } html.fc .app { min-height: 100vh; min-height: 100dvh; height: auto; } /* z-index: у .main во flow.css есть view-transition-name — он сам себе слой и иначе накрыл бы меню аватара */ html.fc .rail { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100dvh; } /* рамка фокуса — только там, где flow.css свою не нарисовал (кнопки, поля, ячейки кода — со своей) */ html.fc :focus-visible:not(.btn, .input, .otp__cell) { outline: 2px solid var(--ink); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Вход ---------- */ .login { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 72px; } .login__col { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: 400px; margin-top: -40px; } .login__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; } .login__logo { width: 56px; height: 56px; display: grid; place-items: center; } .login__names { display: flex; flex-direction: column; align-items: center; gap: 2px; } .login__form { width: 100%; padding: 28px; display: flex; flex-direction: column; gap: 18px; } .login__form--code { padding-top: 20px; } .login__domain { position: absolute; left: 32px; bottom: 28px; } .otp__cell:focus { border-color: var(--ink); box-shadow: var(--focus); } .otp__cell.is-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .input.is-error:focus { box-shadow: 0 0 0 3px var(--danger-soft); } /* Каретка кода 2FA (README, «Анимации»): своя, мигает steps(1); при reduced-motion не мигает (flow.css). Видна в пустой ячейке с фокусом; родная каретка браузера спрятана. */ .otp__cell { caret-color: transparent; } .otp__caret { display: none; } .otp__cell:focus:placeholder-shown + .otp__caret { display: block; } @media (max-width: 420px) { .login__form { padding: 22px 18px; } .otp { gap: 6px; } .otp__cell { width: 42px; height: 54px; } .login__domain { left: 0; right: 0; text-align: center; } } /* ---------- Меню админа (аватар в левой колонке) ---------- */ .usermenu { position: relative; } .usermenu > summary { list-style: none; } .usermenu > summary::-webkit-details-marker { display: none; } .usermenu__pop { position: absolute; left: calc(100% + 14px); bottom: -6px; z-index: 30; width: 272px; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow-float); } .usermenu[open] .usermenu__pop { animation: fade-in 120ms var(--e-out) both; } .usermenu__who { display: flex; flex-direction: column; gap: 2px; } .usermenu__theme { display: flex; flex-direction: column; gap: 6px; } /* ---------- Настройки ---------- */ .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } /* «Telegram-уведомления» (артборд Settings) */ .tg { padding-bottom: 6px; } .tg__status { margin: 14px 20px 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .tg__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .tg__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tg__sub { padding-left: 16px; overflow-wrap: anywhere; } .tg__h { padding: 16px 20px 4px; } .tg__list { margin: 0; padding: 0; list-style: none; } .tg__item { display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 14px; padding: 10px 20px; align-items: start; } .tg__item > .dot { margin-top: 7px; } .tg__foot { padding: 12px 20px 14px; margin-top: 6px; border-top: 1px solid var(--line); } .tg .btn { flex: none; } @media (max-width: 1100px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- Телефон: вместо левой колонки — таббар снизу (артборды Phone*) ---------- */ html.fc .tabbar { display: none; } .phone-head { display: none; } @media (max-width: 760px) { html.fc .app { grid-template-columns: minmax(0, 1fr); } html.fc .rail { display: none; } html.fc .main { padding: 16px 16px 108px; gap: 16px; } html.fc .tabbar { display: grid; position: fixed; z-index: 20; padding-bottom: max(28px, env(safe-area-inset-bottom)); } .phone-head { display: flex; align-items: center; justify-content: space-between; height: 44px; } .phone-head__brand { display: flex; align-items: center; gap: 14px; padding-left: 6px; } .phone-head .usermenu__pop { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; } html.fc .h1 { font-size: 38px; line-height: 40px; } /* время входа — строкой под именем, иначе имя сжимается в столбик */ .admins-tbl { --cols: 34px minmax(0, 1fr) !important; } .admins-tbl .tbl__row { padding-top: 12px; padding-bottom: 12px; row-gap: 2px; } .admins-tbl__seen { grid-column: 2; text-align: left !important; } } /* ---------- Кнопки-ссылки: «.fc a { color: inherit }» из flow.css сильнее цвета кнопки — возвращаем его ---------- */ html.fc a.btn--primary { color: var(--paper); } html.fc a.btn--danger { color: var(--on-accent); } html.fc a.btn--danger-ghost { color: var(--danger); } html.fc a.btn-dl.is-done { color: var(--on-accent); } /* «Скачать .conf»: в «Скачано» — 160 мс (flow.css), обратно — 240 мс (README «Анимации») */ .btn-dl:not(.is-done) { transition: background-color 240ms var(--e-out), color 240ms var(--e-out), transform var(--d-press) var(--e-std); } .btn-dl:not(.is-done) .btn-dl__a, .btn-dl:not(.is-done) .btn-dl__b { transition-duration: 240ms; } /* ---------- Оверлеи (Kit2 «Drawer и модалка», «Тост и панель действий»): от окна, а не от артборда ---------- */ html.has-overlay, html.has-overlay body { overflow: hidden; } /* выбор даты и времени — в теме панели (flow.css правит только цвета) */ html.fc[data-theme="dark"] { color-scheme: dark; } html.fc[data-theme="light"] { color-scheme: light; } html.fc .scrim { position: fixed; z-index: 40; } html.fc .drawer { position: fixed; z-index: 41; } html.fc #overlay-modal .scrim { z-index: 50; } html.fc .modal { position: fixed; z-index: 51; max-width: calc(100vw - 32px); } html.fc .modal.is-leaving { animation: modal-out 160ms var(--e-in) both; } @keyframes modal-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.98); } } .modal__form { display: flex; flex-direction: column; gap: 18px; } .drawer .sheet__grab { display: none; } .drawer__content { flex: 1; min-height: 0; display: flex; flex-direction: column; } html.fc .drawer__body { overflow-y: auto; overscroll-behavior: contain; } /* «Drawer → экран успеха»: содержимое opacity 0 → 1, translateY 8 → 0, 180 мс */ .fade-up { animation: content-in 180ms var(--e-out) both; } @keyframes content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .form-banner { padding: 12px 14px; } .form-banner > svg.i { color: var(--danger); flex: none; } .client-title { font-size: 40px; line-height: 44px; overflow-wrap: anywhere; } /* тосты стопкой справа внизу; уходят сами через 4 с */ .toasts { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } html.fc .toasts .toast { position: relative; right: auto; bottom: auto; pointer-events: auto; } /* панель действий над выбранными строками — по центру рабочей области */ html.fc .fbar { position: fixed; z-index: 30; left: calc(50% + 38px); } html.fc .fbar[hidden] { display: none; } html.fc .fbar.is-leaving { animation: fbar-out 180ms var(--e-in) both; } @keyframes fbar-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 24px); } } /* ожидание ответа: подпись кнопки меняется на «Создаём…» */ .when-busy { display: none; } form.htmx-request button[type=submit] .when-idle, .htmx-request > .when-idle { display: none; } form.htmx-request button[type=submit] .when-busy, .htmx-request > .when-busy { display: inline; } /* раскрытие «QR-код и ссылка vpn://» */ .disclosure__btn { justify-content: space-between; padding: 0 12px; } .disclosure__chev { transition: transform var(--d-fast) var(--e-out); } .disclosure__btn[aria-expanded="true"] .disclosure__chev { transform: rotate(180deg); } .disclosure__panel { padding: 14px 12px 4px; } .qr-block { display: grid; grid-template-columns: minmax(0, 216px) minmax(160px, 1fr); gap: 20px; align-items: center; } .drawer--wide .qr-block { grid-template-columns: minmax(0, 248px) minmax(160px, 1fr); } .qr-block .qr { width: 100%; height: auto; padding: 8px; } .qr-block__side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .qr-sk { width: 100%; aspect-ratio: 1; height: auto; border-radius: 12px; } .copy-fallback { width: 100%; font-size: 12px; } /* ---------- Клиенты (Clients, PhoneClients) ---------- */ .clients-head__title { display: flex; align-items: baseline; gap: 10px; } .clients-head__n { display: none; } .clients-head__acts { display: flex; align-items: center; gap: 8px; } .clients-search { width: 300px; } .clients-new-phone { display: none; width: 44px; border-radius: 14px; } .clients-banners { display: flex; flex-direction: column; gap: 12px; } .clients-banners:empty { display: none; } .clients-banners .banner > svg.i { color: var(--warn); flex: none; } .clients-body { display: flex; flex-direction: column; gap: 20px; min-height: 0; } /* смена фильтра: список opacity .5 → 1 на время ответа, высота держится */ .clients-body.htmx-request .clients-panel, .clients-body.htmx-request .clients-empty { opacity: .5; transition: opacity 120ms linear; } /* скелетон — только если ответ дольше 150 мс (README «Скелетон») */ .sk-delay { animation: sk-delay 200ms var(--e-out) 150ms both; } @keyframes sk-delay { from { opacity: 0; } to { opacity: 1; } } /* скелетон сменяется данными — crossfade 200 мс */ .crossfade { animation: fade-in 200ms var(--e-out) both; } /* поиска нет, пока список грузится или пуст (Clients-loading, Clients-empty) */ .main:has(#clients-body > .sk-delay) .clients-search, .main:has(.clients-empty) .clients-search { display: none; } .clients-row { cursor: pointer; } .clients-row .cell-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); } .clients-row__name { overflow: hidden; text-overflow: ellipsis; } .clients-row__dot { display: none; } .clients-note { display: flex; flex-direction: column; min-width: 0; } .clients-contact { font-size: 12.5px; line-height: 16px; } .clients-by { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; } .clients-st .st-short { display: none; } .clients-none { cursor: default; } .clients-none > span { grid-column: 1 / -1; } .clients-empty { flex: 1; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; padding: 40px; } .rowx.is-hidden { pointer-events: none; } /* срок (D15, D32): сегмент на радиокнопках, «Дата…» раскрывает дату и время */ label.seg__btn { display: inline-flex; align-items: center; justify-content: center; } .seg__btn:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; } .term-lp { display: none; } .term-date { display: none; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; } .term-field:has(input[value="date"]:checked) .term-date, .term-date--on { display: grid; } .card-term { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .card-term--gone { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger-edge); } .card-term__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-term__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .card-term__form { display: flex; flex-direction: column; gap: 10px; } .card-term__clear { margin-left: auto; } .clients-exp .st-short { display: none; } .clients-exp { min-width: 0; overflow: hidden; } .clients-exp .st-full { overflow: hidden; text-overflow: ellipsis; } .dot-warn { color: var(--warn); } /* «Продлить» для выбранных: меню над панелью действий */ .fbar__extend { position: relative; } .fbar__menu { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-l); background: var(--inv); color: var(--inv-text); box-shadow: var(--shadow-float); white-space: normal; } .fbar__menu[hidden] { display: none; } .fbar__menu-row { display: flex; gap: 6px; align-items: center; } .fbar__menu-row .input { height: 32px; font-size: 13px; } .fbar__menu-row input[type=time] { width: 92px; flex: none; } .fbar__menu-note { font-size: 12px; line-height: 16px; color: var(--inv-2); } /* массовое создание */ .bulk-names { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 20px; } .bulk-tile { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; } .bulk-skip ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 17px; color: var(--danger); } .bulk-sum { display: flex; gap: 32px; } .bulk-sum > div { display: flex; align-items: baseline; gap: 8px; } .bulk-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .bulk-item { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; } .bulk-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bulk-item__st { white-space: normal; align-items: baseline; gap: 6px; } .bulk-item__st .dot, .bulk-item__st .sk--dot { flex: none; transform: translateY(-1px); } /* карточка клиента */ .card-meta { display: flex; flex-direction: column; gap: 14px; } .card-meta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; } .card-meta__grid dd { margin: 2px 0 0; min-width: 0; overflow-wrap: anywhere; } .card-history { display: flex; flex-direction: column; gap: 6px; } .card-hist { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; font-size: 13px; line-height: 18px; padding: 5px 0; } .card-edit { display: flex; flex-direction: column; gap: 16px; } /* ---------- Журнал ---------- */ .journal-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .journal-filters__admin { width: 184px; } .journal-filters__client { width: 220px; } .journal-chips { flex-wrap: wrap; } .journal-chips .chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; } .journal-list.htmx-request { opacity: .5; transition: opacity 120ms linear; } .journal-day { padding: 16px 20px 8px; display: flex; align-items: baseline; gap: 10px; } .journal-tbl { --cols: 64px 6px minmax(0, 1fr) 120px 128px; } .journal-row { min-height: 44px; } .journal-row__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .journal-row__text b { font-weight: 600; } .journal-row__res { text-align: right; } .journal-empty { padding: 28px 20px; } .journal-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--line); } /* трафик за 30 дней в списке (D27) и в карточке. Колонки ужаты так, чтобы на 1281+ px заметке оставалось ~150 px; уже — сначала прячется «Создал» (он есть в карточке), потом мини-график, потом весь трафик */ .clients-tbl { --cols: 18px 160px minmax(0, 1fr) 140px 156px 150px 104px 44px; } @media (min-width: 761px) and (max-width: 1280px) { .clients-tbl { --cols: 18px 160px minmax(0, 1fr) 140px 156px 150px 44px; } .clients-tbl .tbl__head > :nth-child(7), .clients-by { display: none; } } .clients-traffic .spark { flex: none; } .clients-traffic > span { white-space: nowrap; } .card-traffic { display: flex; flex-direction: column; gap: 10px; } .card-traffic__head { display: flex; justify-content: space-between; align-items: baseline; } /* ---------- Графики (Kit2): SVG тянется по ширине, толщина линий — нет ---------- */ .plot svg { width: 100%; height: 100%; } .plot svg path { vector-effect: non-scaling-stroke; } .plot--292 { height: 292px; } .plot--72 { height: 72px; } .plot--empty { display: grid; place-items: center; box-shadow: inset 0 -1px 0 var(--line); } .plot__x--abs { position: relative; display: block; height: 14px; } .plot__x--abs > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .plot__x--abs > .is-start { transform: none; } .plot__x--abs > .is-end { transform: translateX(-100%); } .plot .tip { z-index: 1; } /* ---------- Дашборд (Main, PhoneDash) ---------- */ .dash-banners { display: flex; flex-direction: column; gap: 12px; } .dash-banners:not(:has(*)) { display: none; } .dash-banner__main { display: contents; } /* «Баннер аварии» (README «Анимации»): grid-template-rows 0fr → 1fr + opacity, 240 мс, контент ниже сдвигается; при reduced motion row-in из flow.css — просто fade */ .banner-in { display: grid; grid-template-rows: 1fr; animation: row-in 240ms var(--e-out) both; } .banner-in > * { min-height: 0; overflow: hidden; } /* нет связи с панелью (Main-offline): рисует panel.js, когда опрос не получил ответа */ .dash-offline { display: none; } .dash-offline__ic { display: inline-flex; color: var(--warn); } .when-offline { display: none; } html.is-offline .dash-offline { display: grid; } html.is-offline .when-online { display: none; } html.is-offline .when-offline { display: inline; } html.is-offline .dash-new { opacity: .38; pointer-events: none; } .dash-new--phone { display: none; flex: none; width: 44px; border-radius: 14px; } .dash-head > div:first-child { flex: 1; min-width: 0; } .dash-body { display: flex; flex-direction: column; gap: 20px; } .dash-cascade__row { padding: 16px 24px 22px; } .dash-cascade__none { padding: 8px 24px 24px; } .node__where { display: flex; justify-content: space-between; gap: 12px; } .node__where > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .node__where > span:last-child { white-space: nowrap; } .dash-globe { width: 26px; height: 26px; color: var(--ink-2); stroke-width: 1.3; } .dash-warn { color: var(--warn); } .dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; } .dash-traffic { display: flex; flex-direction: column; } .dash-traffic__title { display: flex; align-items: baseline; gap: 12px; min-width: 0; } .dash-traffic__peak { display: none; } .dash-traffic__body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 10px; } /* смена периода: график opacity .5 на время ответа (README «Смена фильтра»); фоновый опрос раз в минуту — без */ .dash-traffic__body.htmx-request { opacity: .5; transition: opacity 120ms linear; } /* «Туннель · разрыв»: линия — сразу, цвет — 400 мс; смена состояния знака — там же */ .tunnel { transition: background-color var(--d-state) var(--e-out), border-color var(--d-state) var(--e-out); } .tun__age { transition: color var(--d-state) var(--e-out); } /* выхода в списке серверов нет: схема ВХОД → туннель → интернет */ .cascade--noexit { grid-template-columns: 104px minmax(24px, .5fr) 316px minmax(0, 1.6fr) minmax(24px, .5fr) 84px; } .feed__empty { padding: 10px 20px 18px; list-style: none; } .dash-cascade-p { display: none; } @media (max-width: 1320px) { .cascade { grid-template-columns: 88px minmax(16px, .4fr) minmax(236px, 316px) minmax(96px, 1fr) minmax(236px, 316px) minmax(16px, .4fr) 64px; } .cascade--noexit { grid-template-columns: 88px minmax(16px, .4fr) minmax(236px, 316px) minmax(96px, 1fr) minmax(16px, .4fr) 64px; } .dash-cascade__row { padding: 16px 20px 22px; } } @media (max-width: 1180px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- Серверы (Servers, D20) ---------- */ .servers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .srv { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 24px; } .srv__top { display: flex; flex-direction: column; gap: 4px; } .srv__title { display: flex; align-items: center; gap: 12px; } .srv__title .h2 { margin-left: 2px; } .srv__role { font-size: 11.5px; } .srv__where { padding-left: 22px; } .srv__block { display: flex; flex-direction: column; gap: 8px; } .srv__block + .srv__block { gap: 10px; } .srv__check { display: grid; grid-template-columns: 18px 150px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; line-height: 20px; padding: 3px 0; } .srv__res { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px 128px; column-gap: 14px; row-gap: 12px; align-items: center; font-size: 13px; line-height: 18px; } .srv__res-v { text-align: right; } .srv__load { display: flex; gap: 24px; font-size: 13px; line-height: 18px; margin-top: 2px; } .srv__facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); row-gap: 8px; column-gap: 10px; font-size: 13.5px; line-height: 20px; margin: 0; } .srv__facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } @media (max-width: 1180px) { .servers-grid { grid-template-columns: minmax(0, 1fr); } } .phone-only { display: none; } .wide-only { display: inline; } /* между телефоном и широким экраном таблица клиентов не влезает — «Создал» прячем (он есть в карточке), у трафика остаётся только число */ @media (min-width: 761px) and (max-width: 1100px) { .clients-tbl { --cols: 18px 150px minmax(0, 1fr) 120px 64px 150px 44px; } .clients-traffic .spark, .wide-only { display: none; } /* схема каскада — столбиком, как на телефоне; показатели 2 × 2 */ .dash-cascade { display: none; } .dash-cascade-p { display: flex; } .metrics.dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-metrics .metric:nth-child(3) { border-left: 0; } .dash-metrics .metric:nth-child(n+3) { border-top: 1px solid var(--line); } } @media (min-width: 761px) and (max-width: 960px) { .clients-tbl { --cols: 18px 140px minmax(0, 1fr) 120px 150px 44px; } .clients-traffic { display: none; } } /* ---------- Телефон: клиенты, шторки снизу, журнал ---------- */ @media (max-width: 760px) { .phone-only { display: block; } .desktop-only { display: none; } /* шапка PhoneClients: заголовок с числом и «+», поиск строкой ниже */ .clients-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text add" "search search"; align-items: end; gap: 14px 12px; padding: 0 4px; } .clients-head__text { grid-area: text; } .clients-head__acts { display: contents; } .clients-head__n { display: inline; } .clients-head .head__sub { font-size: 13px; line-height: 18px; margin-top: 4px; } .clients-search { grid-area: search; width: auto; margin: 0 -4px; } .clients-search .input { height: 44px; font-size: 15px; } .clients-search .input-end { display: none; } .clients-bulk-btn, .clients-new-btn { display: none; } .clients-new-phone { display: inline-flex; grid-area: add; } .clients-body { gap: 14px; } .clients-chips { overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; } .clients-chips::-webkit-scrollbar { display: none; } .clients-chips .chip { height: 36px; flex: none; } .clients-tbl .tbl__head { display: none; } .clients-tbl .clients-row { --cols: minmax(0, 1fr) auto; grid-template-areas: "name exp" "note st"; min-height: 64px; padding: 10px 16px; column-gap: 12px; row-gap: 2px; } .clients-tbl .tbl__head + .rowx .clients-row { border-top-color: transparent; } .clients-row > .cb, .clients-by, .clients-row .row-actions { display: none; } .clients-row .cell-name { grid-area: name; font-size: 15px; } .clients-row__dot { display: inline-block; } .clients-note { grid-area: note; padding-left: 16px; } .clients-note .cell-note { font-size: 13px; } .clients-contact { display: none; } .clients-st { grid-area: st; justify-self: end; font-size: 12px; line-height: 16px; } .clients-exp { grid-area: exp; justify-self: end; font-size: 13px; } .clients-exp .dot { display: none; } .clients-exp .st-full { display: none; } .clients-exp .st-short { display: inline; } /* PhoneNew: срок — сетка 3 × 2 с «7 дней», «30 дней» */ .term-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .term-seg .seg__btn { height: 40px; } .term-l { display: none; } .term-lp { display: inline; } .clients-st .dot { display: none; } .clients-st .st-full { display: none; } .clients-st .st-short { display: inline; } html.fc .fbar { display: none; } .clients-traffic, .wide-only { display: none; } /* PhoneDash: «+» в шапке, схема столбиком, показатели 2 × 2, трафик 150 px */ /* баннер аварии на телефоне (PhoneDash-broken): текст, под ним кнопка во всю ширину */ .dash-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; } .dash-banner__main { display: flex; gap: 12px; align-items: flex-start; } .dash-banner__main > .mark { margin-top: 5px; } .dash-banner .banner__acts .btn { width: 100%; height: 44px; justify-content: center; } .dash-head { padding: 4px 4px 0; align-items: flex-start; } .dash-head .head__sub { font-size: 13px; line-height: 18px; } .dash-new { display: none; } .dash-new--phone { display: inline-flex; } .dash-body { gap: 16px; } .dash-cascade { display: none; } .dash-cascade-p { display: flex; } .metrics.dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-metrics .metric { padding: 16px 18px; } .dash-metrics .metric:nth-child(3) { border-left: 0; } .dash-metrics .metric:nth-child(n+3) { border-top: 1px solid var(--line); } .dash-metrics .num-xl { font-size: 48px; line-height: 46px; } .dash-metrics .metric__unit { font-size: 14px; } .dash-cap2 { display: none; } .dash-traffic__head { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 16px 0; min-height: 0; } .dash-traffic__title { justify-content: space-between; } .dash-traffic__sum { display: none; } .dash-traffic__peak { display: inline; } .dash-traffic__seg { display: flex; } .dash-traffic__seg .seg__btn { flex: 1; } .dash-traffic__body { padding: 14px 16px 18px; } .plot--292 { height: 150px; } .plot__x--abs > .is-minor, .plot__ylab.is-mid { display: none; } .dash-feed .panel__head { padding: 16px 16px 0; min-height: 36px; } .dash-feed .feed__item { padding: 9px 16px; } .srv { padding: 18px 16px 20px; gap: 18px; } .srv__where { padding-left: 0; } .srv__check { grid-template-columns: 18px 118px minmax(0, 1fr); align-items: start; } .srv__check > svg { margin-top: 2px; } .srv__res { grid-template-columns: 64px minmax(0, 1fr) 44px; } .srv__res-d { display: none; } .srv__load { flex-wrap: wrap; gap: 6px 20px; } .srv__facts { grid-template-columns: 118px minmax(0, 1fr); } /* шторка снизу вместо drawer (PhoneNew, D35): отступ сверху 44 */ html.fc .drawer { top: 44px; left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; } html.fc .drawer .sheet__grab { display: block; } html.fc .drawer.is-entering { animation: sheet-in var(--d-drawer) var(--e-drawer) both; } html.fc .drawer.is-leaving { animation: sheet-out 200ms var(--e-in) both; } html.fc .drawer__head { padding: 10px 12px 0 20px; } html.fc .drawer__body { padding: 12px 20px 20px; } html.fc .drawer__foot { padding: 12px 20px max(30px, env(safe-area-inset-bottom)); flex-wrap: wrap; } .drawer__head .h2 { font-size: 30px; line-height: 34px; } /* PhoneNew: «Один | Несколько» на всю ширину, внизу одна главная кнопка */ .drawer__head > div:first-child { flex: 1; min-width: 0; } .drawer__head .seg { display: flex; } .drawer__head .seg .seg__btn { flex: 1 1 auto; height: 36px; } .qr-block { grid-template-columns: minmax(0, 1fr); } .qr-block .qr { max-width: 320px; } .qr-sk { max-width: 320px; } .card-hist { grid-template-columns: 96px minmax(0, 1fr); } .card-hist > :last-child { grid-column: 2; } .toasts { left: 12px; right: 12px; bottom: 96px; align-items: stretch; } html.fc .toasts .toast { width: auto; } html.fc .modal { width: calc(100% - 32px); } .journal-filters__admin, .journal-filters__client { width: 100%; } .journal-filters__vr { display: none; } .journal-tbl { --cols: 60px 6px minmax(0, 1fr); } .journal-row { grid-template-areas: "t d x" "t d w"; padding: 8px 16px; row-gap: 2px; } .journal-row__t { grid-area: t; align-self: start; } .journal-row__dot { grid-area: d; align-self: start; margin-top: 6px; } .journal-row__text { grid-area: x; white-space: normal; } .journal-row__who { grid-area: w; font-size: 12px; color: var(--ink-2); } .journal-row__res { display: none; } } @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes sheet-out { from { transform: none; } to { transform: translateY(100%); } } /* ---------- Дашборд на телефоне и в узком окне: схема каскада столбиком (PhoneDash) ---------- */ .dash-cascade-p { flex-direction: column; padding: 16px 16px 18px; } .dash-cascade-p__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .dash-cascade-p__ep { display: flex; align-items: center; gap: 10px; padding-left: 14px; } .dash-wire-v { width: 1px; height: 14px; margin-left: 21px; } .dash-tile-p { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .dash-tile-p__top { display: flex; align-items: center; gap: 10px; } .dash-tile-p__top .h3 { font-size: 24px; margin-left: 2px; } .dash-tile-p__up { margin-left: auto; white-space: nowrap; } .dash-tile-p__where { margin-top: -6px; } .dash-meters-p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 12px; line-height: 16px; } .dash-meters-p > div { display: flex; flex-direction: column; gap: 6px; } .dash-meters-p__row { display: flex; justify-content: space-between; } .dash-tun-p { display: flex; align-items: stretch; gap: 16px; height: 68px; padding-left: 20px; } .dash-tun-p .tunnel { height: 68px; } .dash-tun-p__txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; } /* ---------- Движение: строки таблицы README, которых нет в flow.css ---------- */ @media (prefers-reduced-motion: reduce) { html.fc .mark { transition-duration: 120ms; } /* Знак · смена состояния: 120 мс */ html.fc .bar > span { transition: none; } /* Полосы CPU / RAM / диск: мгновенно */ html.fc .row-new { animation: row-in 120ms linear both; } /* Новая строка: fade 120 мс, без вспышки */ html.fc .usermenu[open] .usermenu__pop { animation: none; } .fade-up { animation: fade-in 180ms linear both; } /* Drawer → экран успеха: fade */ @keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } } /* шторка на телефоне: fade 120 мс */ @keyframes sheet-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%); } } @keyframes fbar-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 0); } } html.fc .drawer.is-entering, html.fc .drawer.is-leaving { animation-duration: 120ms; } .disclosure__chev { transition: none; } .sk-delay { animation-duration: 1ms; } }