). Для браузеров без JS те же правила продублированы через :has(.adm-rail) в блоке @supports ниже. ============================================================================ */ :root { --adm-r-panel: 22px; /* у макета панели 22px, не 24px */ --adm-grad-chip: linear-gradient(140deg, #ffd75a, #ff8300); --adm-grad-gold-btn: linear-gradient(140deg, #ffe38a, #ffb800 50%, #ff8300); --adm-grad-gold-card: radial-gradient(130% 150% at 0% 0%, #ffe38a 0%, #ffb800 38%, #ff8300 74%, #c25b00 100%); --adm-grad-glass-line: linear-gradient(160deg, rgba(255, 184, 0, 0.4), rgba(255, 184, 0, 0.05) 45%, rgba(246, 240, 228, 0.08)); --adm-grad-tg: linear-gradient(140deg, #3fb6f2, #1477b8); --adm-tg-ink: #3fb6f2; --adm-gold-hover: #ffd15c; /* hover текстовых ссылок в макете */ --adm-halo: radial-gradient(circle, rgba(255, 150, 0, 0.18), rgba(255, 120, 0, 0.05) 45%, transparent 70%); } /* Ядро анимации у макета мягче кабинетного: 20px и blur(6px). */ @keyframes adm-rise { from { opacity: 0; transform: translateY(20px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } @keyframes adm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes adm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(88, 184, 120, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(88, 184, 120, 0); } } /* --- 15.1 Каркас админ-страницы -------------------------------------------- */ /* Заголовок один: кабинетная шапка уступает место .adm-topbar внутри контента. */ html[data-surface="admin"] .topbar { display: none; } /* Рельс занимает весь сайдбар: карточка пользователя, выход и переключатель локали на админ-страницах не нужны — выход остаётся в кабинете, куда ведёт знак в шапке рельса (так же, как в макете). */ html[data-surface="admin"] .fl-sidebar > .sidebar-header, html[data-surface="admin"] .fl-sidebar > .sidebar-admin-link, html[data-surface="admin"] .fl-sidebar > .sidebar-footer { display: none; } html[data-surface="admin"] .fl-sidebar { flex: 1 1 232px; width: auto; max-width: 270px; gap: 24px; padding: 22px 14px; } /* Ореол один, справа сверху, 56vw / 11s — как в макете. */ html[data-surface="admin"] .zp-decor__halo--a { width: 56vw; height: 56vw; background: var(--adm-halo); filter: blur(34px); animation-duration: 11s; } html[data-surface="admin"] .zp-decor__halo--b, html[data-surface="admin"] .zp-decor__grid { display: none; } html[data-surface="admin"] .main-content > .page-content { padding: clamp(18px, 2.4vw, 36px) clamp(16px, 2.8vw, 44px) clamp(40px, 5vw, 72px); } /* Горизонтальная лента разделов заменена рельсом. Разметку оставляем ради ссылок и подключения admin_page.css, но в макете её нет. */ .fl-body .adm-hub-nav { display: none; } html[data-surface="admin"] .zp-screen { animation: adm-rise 500ms var(--zp-ease) both; } .fl-body .adm-kpi { animation: adm-rise 700ms var(--zp-ease) 100ms both; } .fl-body .zp-rise-delay-2 { animation: adm-rise 700ms var(--zp-ease) 200ms both; } .fl-body .zp-rise-delay-3 { animation: adm-rise 700ms var(--zp-ease) 300ms both; } .fl-body .zp-rise-delay-4 { animation: adm-rise 700ms var(--zp-ease) 400ms both; } @supports selector(:has(*)) { .fl-body:has(.adm-rail) .topbar { display: none; } .fl-body:has(.adm-rail) .fl-sidebar > .sidebar-header, .fl-body:has(.adm-rail) .fl-sidebar > .sidebar-admin-link, .fl-body:has(.adm-rail) .fl-sidebar > .sidebar-footer { display: none; } .fl-body:has(.adm-rail) .fl-sidebar { flex: 1 1 232px; width: auto; max-width: 270px; gap: 24px; padding: 22px 14px; } .fl-body:has(.adm-rail) .zp-decor__halo--a { width: 56vw; height: 56vw; background: var(--adm-halo); filter: blur(34px); animation-duration: 11s; } .fl-body:has(.adm-rail) .zp-decor__halo--b, .fl-body:has(.adm-rail) .zp-decor__grid { display: none; } .fl-body:has(.adm-rail) .main-content > .page-content { padding: clamp(18px, 2.4vw, 36px) clamp(16px, 2.8vw, 44px) clamp(40px, 5vw, 72px); } .fl-body:has(.adm-rail) .zp-screen { animation: adm-rise 500ms var(--zp-ease) both; } } /* --- 15.2 Рельс админки (макет, блок S1) ----------------------------------- */ .fl-body .adm-rail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 24px; } .fl-body .adm-rail__brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px; min-width: 0; text-decoration: none; color: var(--zp-ink); } .fl-body .adm-rail__mark { width: 38px; height: 38px; flex: 0 0 auto; filter: drop-shadow(0 8px 20px rgba(255, 140, 0, 0.35)); } .fl-body .adm-rail__mark img { display: block; width: 100%; height: 100%; } .fl-body .adm-rail__brandtext { min-width: 0; } .fl-body .adm-rail__wordmark { display: block; font-family: var(--zp-font-display); font-weight: 700; font-size: 13.5px; letter-spacing: 0.14em; line-height: 1.1; color: var(--zp-ink); white-space: nowrap; } .fl-body .adm-rail__kicker { display: block; margin-top: 2px; font-family: var(--zp-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zp-ink-3); } .fl-body .adm-rail__nav { display: flex; flex-direction: column; gap: 20px; } .fl-body .adm-rail__grouptitle { padding: 0 12px 8px; font-family: var(--zp-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zp-ink-3); } .fl-body .adm-rail__items { display: flex; flex-wrap: wrap; gap: 3px; } .fl-body .adm-rail__link { display: flex; align-items: center; gap: 11px; width: 100%; flex: 1 1 160px; min-width: 0; min-height: 44px; /* тач-зона, README «Адаптив» */ padding: 10px 12px; border-radius: 11px; font-size: 14px; line-height: 1.25; text-decoration: none; color: var(--zp-ink-3); background: transparent; box-shadow: none; transition: color 200ms var(--zp-ease), background-color 200ms var(--zp-ease), transform 200ms var(--zp-ease), box-shadow 200ms var(--zp-ease); } .fl-body .adm-rail__link:hover { color: var(--zp-ink); background: rgba(255, 255, 255, 0.05); transform: translateX(3px); } .fl-body .adm-rail__link.is-active { color: var(--zp-ink); background: linear-gradient(90deg, rgba(255, 184, 0, 0.14), rgba(255, 184, 0, 0.03)); box-shadow: inset 0 0 0 1px rgba(255, 184, 0, 0.25); } .fl-body .adm-rail__dot { width: 6px; height: 6px; flex: 0 0 auto; transform: rotate(45deg); background: rgba(246, 240, 228, 0.2); transition: background 200ms var(--zp-ease), box-shadow 200ms var(--zp-ease); } .fl-body .adm-rail__link.is-active .adm-rail__dot { background: var(--adm-grad-chip); box-shadow: 0 0 12px rgba(255, 184, 0, 0.8); } .fl-body .adm-rail__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-body .adm-rail__badge { flex: 0 0 auto; font-family: var(--zp-font-mono); font-size: 10.5px; white-space: nowrap; color: var(--zp-ink-3); } .fl-body .adm-rail__link.is-active .adm-rail__badge { color: var(--zp-gold); } .fl-body .adm-rail__badge--ok { color: var(--zp-ok-ink); } .fl-body .adm-rail__status { margin-top: auto; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(246, 240, 228, 0.08); display: flex; align-items: center; gap: 12px; } .fl-body .adm-rail__statusdot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--zp-ok); animation: adm-glow 2.2s ease-out infinite; } .fl-body .adm-rail__statusdot--idle { background: var(--zp-ink-3); animation: none; } .fl-body .adm-rail__statustext { min-width: 0; font-family: var(--zp-font-mono); font-size: 11px; color: var(--zp-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- 15.3 Шапка экрана (макет, блок S3) ------------------------------------ */ .fl-body .adm-topbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 clamp(22px, 2.8vw, 36px); } .fl-body .adm-topbar__menu { order: -1; } .fl-body .adm-topbar__text { flex: 1 1 260px; min-width: 0; } .fl-body .adm-topbar__eyebrow { margin: 0; font-family: var(--zp-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zp-ink-3); } .fl-body .adm-topbar__title { margin: 8px 0 0; font-family: var(--zp-font-display); font-weight: 300; font-size: clamp(28px, 3.2vw, 42px); line-height: 1; letter-spacing: -0.035em; color: var(--zp-ink); } /* nowrap из макета — только там, где колонка заведомо шире заголовка. */ @media (min-width: 900px) { .fl-body .adm-topbar__title { white-space: nowrap; } } .fl-body .adm-topbar__side { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .fl-body .adm-search { margin: 0; } .fl-body .adm-search__label { position: relative; display: flex; align-items: center; margin: 0; } .fl-body .adm-search__icon { position: absolute; left: 14px; width: 15px; height: 15px; color: var(--zp-ink-3); pointer-events: none; } .fl-body .adm-search__input { width: min(320px, 70vw); padding: 11px 14px 11px 38px; border-radius: var(--zp-r-pill); background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(246, 240, 228, 0.12); color: var(--zp-ink); font-family: var(--zp-font-text); font-size: 13.5px; transition: border-color 200ms var(--zp-ease), box-shadow 200ms var(--zp-ease); } .fl-body .adm-search__input::placeholder { color: var(--zp-ink-3); } .fl-body .adm-search__input:focus { outline: none; border-color: var(--zp-gold); box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.12); } .fl-body .adm-rolepill { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--zp-r-pill); background: rgba(255, 184, 0, 0.08); border: 1px solid rgba(255, 184, 0, 0.3); } .fl-body .adm-rolepill__mark { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: var(--adm-grad-chip); color: var(--zp-on-gold); font-family: var(--zp-font-display); font-weight: 700; font-size: 11px; } .fl-body .adm-rolepill__role { font-family: var(--zp-font-mono); font-size: 11.5px; color: var(--zp-gold); white-space: nowrap; } /* --- 15.4 Чипы-фильтры (GET-форма в виде ряда пилюль) ----------------------- */ .fl-body form.adm-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } .fl-body .adm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .fl-body .adm-chips__caption { font-family: var(--zp-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--zp-ink-3); white-space: nowrap; } .fl-body .adm-chip { display: inline-flex; margin: 0; cursor: pointer; } .fl-body .adm-chip > input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; } .fl-body .adm-chip > span, .fl-body button.adm-chip, .fl-body summary.adm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 9px 16px; border-radius: var(--zp-r-pill); border: 1px solid rgba(246, 240, 228, 0.14); background: rgba(255, 255, 255, 0.03); font-family: var(--zp-font-mono); font-size: 12px; font-weight: 400; line-height: 1.2; white-space: nowrap; color: var(--zp-ink-2); box-shadow: none; cursor: pointer; list-style: none; transition: color 200ms var(--zp-ease), border-color 200ms var(--zp-ease), background-color 200ms var(--zp-ease), box-shadow 200ms var(--zp-ease); } .fl-body summary.adm-chip::-webkit-details-marker { display: none; } .fl-body .adm-chip > span:hover, .fl-body button.adm-chip:hover, .fl-body summary.adm-chip:hover { color: var(--zp-ink); border-color: rgba(255, 184, 0, 0.45); } .fl-body .adm-chip > input:checked + span, .fl-body button.adm-chip.is-active { color: var(--zp-on-gold); background: var(--adm-grad-chip); border-color: transparent; box-shadow: 0 10px 24px rgba(255, 140, 0, 0.3); } .fl-body .adm-chip > input:focus-visible + span { outline: 2px solid var(--zp-gold); outline-offset: 2px; } .fl-body .adm-chip--submit { font-family: var(--zp-font-mono); } /* «Ещё» раскрывает редкие состояния под рядом. display:contents здесь нельзя: он ломает штатное скрытие содержимого

— редкие чипы оказались бы видны всегда. */ .fl-body .adm-chips__more { display: block; min-width: 0; } /* Раскрытый список занимает всю строку ряда: иначе редкие чипы считались бы от 56-пиксельной ширины самой

и вылезали за карточку на узком экране. */ .fl-body .adm-chips__more[open] { flex: 1 1 100%; } .fl-body .adm-chips__moreitems { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-width: 100%; } /* --- 15.5 График выручки (макет, блок S4.2) -------------------------------- */ .fl-body .adm-bars { margin-top: 22px; display: flex; align-items: flex-end; gap: clamp(3px, 0.6vw, 8px); height: clamp(150px, 18vw, 220px); border-bottom: 1px solid rgba(246, 240, 228, 0.12); } .fl-body .adm-bars:empty { display: none; } .fl-body .adm-bars__col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } .fl-body .adm-bars__fill { display: block; width: 100%; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, rgba(255, 184, 0, 0.6), rgba(255, 184, 0, 0.2)); transition: height 700ms var(--zp-ease) var(--adm-bar-delay, 0ms); } .fl-body .adm-bars__fill--last { background: linear-gradient(180deg, var(--zp-gold-lighter), var(--zp-amber)); } .fl-body .adm-bars__empty { margin: 22px 0 0; font-size: 13px; color: var(--zp-ink-3); } .fl-body .adm-bars__legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--zp-font-mono); font-size: 11px; color: var(--zp-ink-3); } .fl-body .adm-bars__key { display: flex; align-items: center; gap: 8px; } .fl-body .adm-bars__swatch { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(180deg, var(--zp-gold-lighter), var(--zp-amber)); } .fl-body .adm-bars__total { margin-left: auto; } /* --- 15.6 «Требуют внимания» ----------------------------------------------- */ .fl-body .adm-panel__head--tight { align-items: center; margin-bottom: 0; } .fl-body .adm-countpill { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--zp-r-pill); background: var(--zp-err-bg); border: 1px solid rgba(255, 98, 93, 0.35); font-family: var(--zp-font-mono); font-size: 11px; color: var(--zp-err-ink); } .fl-body .adm-countpill--ok { background: var(--zp-ok-bg); border-color: var(--zp-ok-line); color: var(--zp-ok-ink); } .fl-body .adm-alerts { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .fl-body .adm-alert { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 0; border-bottom: 1px solid rgba(246, 240, 228, 0.07); text-decoration: none; color: var(--zp-ink); transition: padding 180ms var(--zp-ease); } .fl-body .adm-alert:hover { padding-left: 8px; color: var(--zp-ink); } .fl-body .adm-alerts li:last-child .adm-alert { border-bottom: 0; } .fl-body .adm-alert__dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 6px; border-radius: 50%; background: var(--zp-ink-3); } .fl-body .adm-alert__dot--warn { background: var(--zp-warn); animation: adm-pulse 1.6s ease-in-out infinite; } .fl-body .adm-alert__dot--err { background: var(--zp-err); } .fl-body .adm-alert__dot--muted { background: var(--zp-ink-3); } .fl-body .adm-alert__text { flex: 1 1 auto; min-width: 0; } .fl-body .adm-alert__title { display: block; font-size: 14px; color: var(--zp-ink); } .fl-body .adm-alert__meta { display: block; margin-top: 3px; font-family: var(--zp-font-mono); font-size: 11px; color: var(--zp-ink-3); } .fl-body .adm-alert__arrow { flex: 0 0 auto; color: var(--zp-ink-3); } .fl-body .adm-linkmore { flex: 0 0 auto; font-size: 14px; color: var(--zp-gold); text-decoration: none; white-space: nowrap; } .fl-body .adm-linkmore:hover { color: var(--adm-gold-hover); } .fl-body .adm-panel__note--empty { margin-top: 14px; } /* --- 15.7 Grid-таблица платежей на «Панели» -------------------------------- */ .fl-body .adm-gtable-wrap { margin-top: 14px; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-color: rgba(255, 184, 0, 0.45) transparent; scrollbar-width: thin; } /* Макет: min-width 880 и колонки 110px 1.4fr 1fr 110px 120px 100px. Первая колонка расширена со 110 до 150px (и min-width — с 880 до 920px): в макете там «14:32», а бэкенд отдаёт created_at целиком, «2026-09-16 14:32». На 110px строка переносилась и ряд становился двухэтажным — силуэт макета держится именно однострочной строкой. */ .fl-body .adm-gtable--payments { min-width: 920px; } .fl-body .adm-gtable__head, .fl-body .adm-gtable__row { display: grid; grid-template-columns: 150px 1.4fr 1fr 110px 120px 100px; gap: 12px; } .fl-body .adm-gtable__head { padding: 8px 12px; font-family: var(--zp-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zp-ink-3); } .fl-body .adm-gtable__row { align-items: center; padding: 12px; border-radius: 12px; transition: background-color 160ms var(--zp-ease); } .fl-body .adm-gtable__row:hover { background: rgba(255, 255, 255, 0.03); } .fl-body .adm-gtable__right { text-align: right; } .fl-body .adm-gtable__time { font-family: var(--zp-font-mono); font-size: 12px; white-space: nowrap; color: var(--zp-ink-3); } .fl-body .adm-gtable__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .fl-body .adm-gtable__desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--zp-ink-2); } .fl-body .adm-gtable__mono { font-family: var(--zp-font-mono); font-size: 12px; color: var(--zp-ink-2); } .fl-body .adm-gtable__money { font-family: var(--zp-font-mono); font-size: 13px; text-align: right; white-space: nowrap; color: var(--zp-ink-2); } .fl-body .adm-gtable__money--ok { color: var(--zp-ok-ink); } .fl-body .adm-gtable__money--pending { color: var(--zp-warn); } .fl-body .adm-gtable__money--fail { color: var(--zp-ink-3); } /* --- 15.8 Топ тарифов (столбики вместо Chart.js) --------------------------- */ .fl-body .adm-toplist { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .fl-body .adm-toplist:empty { display: none; } .fl-body .adm-toplist__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(90px, 2fr) 48px; gap: 12px; align-items: center; } .fl-body .adm-toplist__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .fl-body .adm-toplist__track { height: 8px; border-radius: var(--zp-r-pill); background: rgba(246, 240, 228, 0.08); overflow: hidden; } .fl-body .adm-toplist__fill { display: block; height: 100%; border-radius: var(--zp-r-pill); background: var(--adm-grad-chip); transition: width 700ms var(--zp-ease); } .fl-body .adm-toplist__val { font-family: var(--zp-font-mono); font-size: 12px; text-align: right; color: var(--zp-gold); } /* --- 15.9 Таблицы разделов: строки-плитки ---------------------------------- */ .fl-body .m2-admin-page .adm-tablecard { padding: clamp(14px, 1.8vw, 24px); border-radius: var(--adm-r-panel); } .fl-body .m2-admin-page .adm-table--users { min-width: 1000px; } .fl-body .m2-admin-page .adm-table--payments { min-width: 880px; } .fl-body .m2-admin-page .m2-table tbody tr:hover { background: transparent; } .fl-body .m2-admin-page .m2-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); } /* Аватар строки: плоский двухстоповый квадрат без свечения, как в макете. */ .fl-body .adm-user-cell .avatar { background: var(--adm-grad-chip); box-shadow: none; } .fl-body .adm-user-cell .avatar--tg { background: var(--adm-grad-tg); box-shadow: none; } /* Вторая строка ячейки — email, регистр не меняем. */ .fl-body .adm-user-cell__meta { font-size: 11px; letter-spacing: normal; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-body .adm-table__ellipsis { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Колонка «назначение» в макете — одна строка 13.5px, приглушённая, с многоточием: id платежа длиннее ячейки и не должен её распирать. */ .fl-body .adm-table__purpose { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--zp-ink-2); } .fl-body .adm-table__tg { font-family: var(--zp-font-mono); font-size: 12px; color: var(--adm-tg-ink); } .fl-body .adm-table__tg--empty { color: var(--zp-ink-3); } .fl-body .adm-table__money--ok { color: var(--zp-ok-ink); } .fl-body .adm-table__money--pending { color: var(--zp-warn); } .fl-body .adm-table__money--fail { color: var(--zp-ink-3); } /* --- 15.9b Карточка открытого пользователя (макет, экран «Пользователи») ---- Стеклянная панель с золотой градиентной рамкой под таблицей: аватар 48, имя Geologica 500/20, моно-строка «email · telegram», ряд из четырёх тёмных плиток (те же .adm-metric, что и в остальной админке) и строка действий, где «заблокировать» отжата вправо. Значения — из хендоффа. */ .fl-body .adm-usercard { margin: 0; padding: clamp(18px, 2.2vw, 30px); border-radius: var(--adm-r-panel); background: var(--zp-grad-glass) padding-box, var(--zp-grad-glass-line) border-box; border: 1px solid transparent; box-shadow: var(--zp-shadow-card); animation: adm-rise 400ms var(--zp-ease) both; } .fl-body .adm-usercard__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .fl-body .adm-usercard__ident { display: flex; align-items: center; gap: 14px; min-width: 0; } .fl-body .adm-usercard__avatar { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; font-family: var(--zp-font-display); font-weight: 700; font-size: 16px; color: var(--zp-on-gold); background: var(--adm-grad-chip); } .fl-body .adm-usercard__avatar--tg { background: var(--adm-grad-tg); } .fl-body .adm-usercard__idtext { min-width: 0; } .fl-body .m2-admin-page .adm-usercard__name { margin: 0; font-family: var(--zp-font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; text-transform: none; color: var(--zp-ink); overflow-wrap: anywhere; } .fl-body .adm-usercard__meta { margin-top: 2px; font-family: var(--zp-font-mono); font-size: 12px; color: var(--zp-ink-3); overflow-wrap: anywhere; } .fl-body .adm-usercard__close { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(246, 240, 228, 0.14); text-decoration: none; color: var(--zp-ink-2); transition: color var(--zp-t-fast) var(--zp-ease), border-color var(--zp-t-fast) var(--zp-ease); } .fl-body .adm-usercard__close:hover { color: var(--zp-ink); border-color: rgba(246, 240, 228, 0.35); } /* Плитки карточки шире обычных счётчиков: в макете 180px, а не 96px. */ .fl-body .adm-usercard .adm-metrics--user { margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } /* Дата и длинный статус не должны ломать плитку. */ .fl-body .adm-usercard .adm-metric__value { overflow-wrap: anywhere; } .fl-body .adm-usercard .adm-metric__value--date { font-family: var(--zp-font-mono); font-size: 22px; } .fl-body .adm-usercard__actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fl-body .adm-usercard__form { display: inline-flex; margin: 0; } .fl-body .adm-usercard__form--end { margin-left: auto; } .fl-body .adm-usercard__note { margin: 18px 0 0; font-size: 13.5px; color: var(--zp-ink-3); } /* Кнопка карточки: 11×18, радиус 12, 14px — админский размер из макета (общая .zp-btn кабинета крупнее: 13×22, радиус 16, 15px). */ .fl-body .m2-admin-page .adm-ubtn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 12px; border: 1px solid rgba(246, 240, 228, 0.16); background: transparent; font-family: var(--zp-font-text); font-size: 14px; font-weight: 400; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; color: var(--zp-ink); transition: color var(--zp-t-fast) var(--zp-ease), border-color var(--zp-t-fast) var(--zp-ease), background-color var(--zp-t-fast) var(--zp-ease); } .fl-body .m2-admin-page .adm-ubtn:hover { border-color: var(--zp-gold); color: var(--zp-gold); } .fl-body .m2-admin-page .adm-ubtn--gold { border-color: transparent; background: var(--adm-grad-chip); font-weight: 600; color: var(--zp-on-gold); box-shadow: 0 10px 26px rgba(255, 140, 0, 0.3); } .fl-body .m2-admin-page .adm-ubtn--gold:hover { color: var(--zp-on-gold); } .fl-body .m2-admin-page .adm-ubtn--danger { border-color: rgba(255, 98, 93, 0.3); color: var(--zp-err-ink); } .fl-body .m2-admin-page .adm-ubtn--danger:hover { background: var(--zp-err-bg); border-color: rgba(255, 98, 93, 0.3); color: var(--zp-err-ink); } .fl-body .m2-admin-page .adm-ubtn--ok { border-color: var(--zp-ok-line); color: var(--zp-ok-ink); } .fl-body .m2-admin-page .adm-ubtn--ok:hover { background: var(--zp-ok-bg); border-color: var(--zp-ok-line); color: var(--zp-ok-ink); } /* --- 15.10 Тарифы карточками (макет, блок S7) ------------------------------ */ .fl-body .adm-tariffs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .fl-body .adm-tariffs-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fl-body .adm-tariffs-bar__actions form { margin: 0; } .fl-body .adm-tariffs-note { margin: 12px 0 0; font-size: 13.5px; max-width: 70ch; color: var(--zp-ink-3); } .fl-body .adm-tariffs { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; } .fl-body .adm-tariff { position: relative; min-width: 0; padding: clamp(18px, 2.2vw, 26px); border-radius: var(--zp-r-tile); background: var(--zp-grad-card); border: 1px solid var(--zp-hairline); transition: transform 240ms var(--zp-ease), border-color 240ms var(--zp-ease); } .fl-body .adm-tariff:hover { transform: translateY(-3px); border-color: rgba(255, 184, 0, 0.45); } .fl-body .adm-tariff__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fl-body .adm-tariff__code { min-width: 0; font-family: var(--zp-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zp-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-body .adm-tariff__name { margin: 14px 0 0; font-family: var(--zp-font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; color: var(--zp-ink); } .fl-body .adm-tariff__price { margin-top: 12px; font-family: var(--zp-font-display); font-weight: 300; font-size: 34px; letter-spacing: -0.04em; line-height: 1; color: var(--zp-ink); } .fl-body .adm-tariff.is-off .adm-tariff__price { color: var(--zp-ink-3); } .fl-body .adm-tariff__dl { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12.5px; } .fl-body .adm-tariff__dl dt { font-family: var(--zp-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zp-ink-3); } .fl-body .adm-tariff__dl dd { margin: 3px 0 0; font-family: var(--zp-font-mono); color: var(--zp-ink); } /* «Редактировать» и удаление стоят в одну строку, поля раскрываются под ними. Сетка вместо display:contents: у

с display:contents содержимое перестаёт скрываться в закрытом состоянии. */ .fl-body .adm-tariff__foot { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; } .fl-body .adm-tariff__edit { min-width: 0; } .fl-body .adm-tariff__editbtn { display: block; width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(246, 240, 228, 0.16); font-size: 13.5px; text-align: center; list-style: none; cursor: pointer; color: var(--zp-ink-2); transition: color 200ms var(--zp-ease), border-color 200ms var(--zp-ease); } .fl-body .adm-tariff__editbtn::-webkit-details-marker { display: none; } .fl-body .adm-tariff__editbtn:hover { border-color: var(--zp-gold); color: var(--zp-gold); } .fl-body .adm-tariff__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; margin-top: 8px; } .fl-body .adm-tariff__fields .m2-field { margin: 0; } .fl-body .adm-tariff__save { grid-column: 1 / -1; margin: 0; } .fl-body .adm-tariff__delete { flex: 0 0 auto; margin: 0; } /* Тумблер активности — числа макета (трек 40×22, кноб 16, ход 2 → 19). */ .fl-body .adm-tariff .toggle { width: 40px; height: 22px; } .fl-body .adm-tariff .toggle-slider { background: rgba(246, 240, 228, 0.08); border: 1px solid rgba(246, 240, 228, 0.14); transition: background-color 220ms var(--zp-ease-toggle), border-color 220ms var(--zp-ease-toggle); } .fl-body .adm-tariff .toggle-slider::before { top: 2px; left: 2px; width: 16px; height: 16px; background: var(--zp-ink-3); transition: transform 220ms var(--zp-ease-toggle), background-color 220ms var(--zp-ease-toggle); } .fl-body .adm-tariff .toggle input:checked + .toggle-slider { background: rgba(255, 184, 0, 0.25); border-color: rgba(255, 184, 0, 0.5); } .fl-body .adm-tariff .toggle input:checked + .toggle-slider::before { transform: translateX(17px); background: var(--zp-gold); } /* --- 15.11 Тикеты (макет, блок S8) ----------------------------------------- */ .fl-body .adm-support .grid.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; } /* display:flex перебивает UA-правило [hidden] — возвращаем его явно, иначе карточка тикета видна ещё до выбора обращения. */ .fl-body .m2-admin-page .adm-support__chat[hidden] { display: none; } .fl-body .m2-admin-page .adm-support__chat { display: flex; flex-direction: column; min-height: 480px; border-radius: var(--adm-r-panel); padding: clamp(18px, 2.2vw, 28px); } .fl-body .admin-ticket-msg .text-secondary { display: block; margin-top: 5px; font-family: var(--zp-font-mono); font-size: 10.5px; color: var(--zp-ink-3); } /* --- 15.12 Адаптив рельса и шапки ------------------------------------------ */ @media (max-width: 1024px) { /* Рельс уезжает в выдвижное меню (shell.css). Возвращаем ему те же размеры, иначе наши десктопные flex/max-width перебивают мобильное правило и сайдбар продолжает занимать колонку. */ html[data-surface="admin"] .fl-sidebar { flex: 0 0 auto; width: min(300px, 86vw); max-width: none; padding: 22px 14px; } @supports selector(:has(*)) { .fl-body:has(.adm-rail) .fl-sidebar { flex: 0 0 auto; width: min(300px, 86vw); max-width: none; padding: 22px 14px; } } .fl-body .adm-topbar__title { white-space: normal; } } @media (max-width: 760px) { .fl-body .adm-topbar { align-items: flex-start; } .fl-body .adm-topbar__side { flex: 1 1 100%; } .fl-body .adm-search { flex: 1 1 100%; } .fl-body .adm-search__input { width: 100%; } .fl-body .adm-gtable__head { display: none; } .fl-body .adm-gtable--payments { min-width: 0; } .fl-body .adm-gtable__row { grid-template-columns: 1fr auto; row-gap: 4px; border: 1px solid var(--zp-hairline); margin-bottom: 8px; } } @media (max-width: 560px) { .fl-body .adm-tariff__dl { grid-template-columns: 1fr; } /* Крестик остаётся в правом верхнем углу карточки, а не уезжает под имя. */ .fl-body .adm-usercard__head { flex-wrap: nowrap; align-items: flex-start; } .fl-body .adm-usercard__ident { flex: 1 1 auto; } .fl-body .adm-usercard__actions > *, .fl-body .adm-usercard__form { width: 100%; } .fl-body .adm-usercard__form--end { margin-left: 0; } .fl-body .m2-admin-page .adm-ubtn { width: 100%; white-space: normal; } } /* ============================================================================ 16. Тикеты: чат по макету (блок S8) Список слева с рядом чипов, переписка справа: шапка с двумя кнопками и разделителем, лента, прижатая к низу, и инлайн-строка ответа. ============================================================================ */ .fl-body .adm-chips--tickets { gap: 6px; margin-bottom: 12px; } .fl-body .adm-support__refresh { margin-left: auto; } .fl-body .adm-support__items { display: flex; flex-direction: column; gap: 4px; } .fl-body .adm-chat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(246, 240, 228, 0.08); } .fl-body .adm-chat__titlebox { min-width: 0; } .fl-body .adm-chat__meta { margin-top: 4px; font-family: var(--zp-font-mono); font-size: 11.5px; color: var(--zp-ink-3); } .fl-body .adm-chat__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; } .fl-body .adm-chat__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(246, 240, 228, 0.16); background: transparent; font-family: var(--zp-font-text); font-size: 13px; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; color: var(--zp-ink-2); transition: color var(--zp-t-fast) var(--zp-ease), border-color var(--zp-t-fast) var(--zp-ease), background-color var(--zp-t-fast) var(--zp-ease); } .fl-body .adm-chat__btn:hover { border-color: var(--zp-gold); color: var(--zp-gold); } .fl-body .adm-chat__btn--ok { border-color: rgba(88, 184, 120, 0.35); color: var(--zp-ok-ink); } .fl-body .adm-chat__btn--ok:hover { background: rgba(88, 184, 120, 0.12); border-color: rgba(88, 184, 120, 0.35); color: var(--zp-ok-ink); } .fl-body .adm-chat__state { margin-top: 12px; } .fl-body .adm-chat__statebtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(246, 240, 228, 0.14); font-family: var(--zp-font-mono); font-size: 11px; color: var(--zp-ink-3); cursor: pointer; list-style: none; } .fl-body .adm-chat__statebtn::-webkit-details-marker { display: none; } .fl-body .adm-chat__statebtn:hover { color: var(--zp-ink); border-color: rgba(255, 184, 0, 0.45); } .fl-body .adm-chat__stategrid { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; align-items: end; } /* Лента прижимает строку ответа к низу карточки. */ .fl-body #adminTicketUserHistory { margin-top: 10px; } .fl-body .admin-ticket-row { display: flex; flex-direction: column; max-width: 82%; } .fl-body .admin-ticket-row--user { align-self: flex-start; align-items: flex-start; } .fl-body .admin-ticket-row--admin { align-self: flex-end; align-items: flex-end; } .fl-body .admin-ticket-msg p { margin: 0; } .fl-body .admin-ticket-meta { margin-top: 5px; font-family: var(--zp-font-mono); font-size: 10.5px; color: var(--zp-ink-3); } .fl-body .adm-chat__reply { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(246, 240, 228, 0.08); } .fl-body .adm-chat__input { flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 140px; padding: 13px 16px; border-radius: var(--zp-r-input); background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(246, 240, 228, 0.14); color: var(--zp-ink); font-family: var(--zp-font-text); font-size: 14px; line-height: 1.4; resize: vertical; transition: border-color var(--zp-t-fast) var(--zp-ease), box-shadow var(--zp-t-fast) var(--zp-ease); } .fl-body .adm-chat__input::placeholder { color: var(--zp-ink-3); } .fl-body .adm-chat__input:focus { outline: none; border-color: var(--zp-gold); box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.12); } .fl-body .adm-chat__attach { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; margin: 0; border-radius: var(--zp-r-input); border: 1px solid rgba(246, 240, 228, 0.14); color: var(--zp-ink-2); cursor: pointer; transition: border-color var(--zp-t-fast) var(--zp-ease), color var(--zp-t-fast) var(--zp-ease); } .fl-body .adm-chat__attach:hover { border-color: var(--zp-gold); color: var(--zp-gold); } .fl-body .adm-chat__attach input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .fl-body .adm-chat__send { flex: 0 0 auto; padding: 13px 20px; border: 0; border-radius: var(--zp-r-input); background: var(--adm-grad-gold-btn); color: var(--zp-on-gold); font-family: var(--zp-font-text); font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 10px 26px rgba(255, 140, 0, 0.3); transition: transform var(--zp-t-fast) var(--zp-ease), box-shadow var(--zp-t-fast) var(--zp-ease); } .fl-body .adm-chat__send:hover { transform: translateY(-2px); box-shadow: var(--zp-shadow-gold-hover); } @media (max-width: 560px) { .fl-body .adm-chat__reply { flex-wrap: wrap; } .fl-body .adm-chat__input { flex: 1 1 100%; } .fl-body .adm-chat__send { flex: 1 1 auto; } .fl-body .admin-ticket-row { max-width: 100%; } } /* ============================================================================ 17. Разделы, дошедшие до макета вторым проходом Рассылки, промокоды, рефералы, группы тарифов, админы, уведомления, дизайн. Все значения взяты из «Zapret VPN Админка.dc.html»: тумблер 40×22 с ходом 17px — тот же, что на карточке тарифа; пилюля-чип 9px/14px, radius 999; сетка пар и троек — auto-fit minmax(min(100%,…),1fr) с зазором 10–12px. Hex-кодов нет: только переменные из tokens.css и rgba() из хендоффа. ============================================================================ */ /* ---------------------------------------------------------------------------- 17.1 Тумблер строки настройки В макете переключатель живёт справа от подписи и занимает всю ширину строки (карточка тарифа, блок S6). Базовый .toggle из shell.css — 46×26; здесь он ужимается до макетных 40×22 ровно так же, как у .adm-tariff .toggle. ---------------------------------------------------------------------------- */ .fl-body .toggle.adm-switch { width: 40px; height: 22px; } .fl-body .toggle.adm-switch .toggle-slider { background: rgba(246, 240, 228, 0.08); border: 1px solid rgba(246, 240, 228, 0.14); } .fl-body .toggle.adm-switch .toggle-slider::before { top: 2px; left: 2px; width: 16px; height: 16px; background: var(--zp-ink-3); } .fl-body .toggle.adm-switch input:checked + .toggle-slider { background: rgba(255, 184, 0, 0.25); border-color: rgba(255, 184, 0, 0.5); } .fl-body .toggle.adm-switch input:checked + .toggle-slider::before { transform: translateX(17px); background: var(--zp-gold); } .fl-body .adm-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 42px; margin: 0; padding: 10px 14px; border-radius: var(--zp-r-input); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(246, 240, 228, 0.08); cursor: pointer; transition: border-color var(--zp-t-fast) var(--zp-ease); } .fl-body .adm-switchrow:hover { border-color: rgba(255, 184, 0, 0.35); } /* Недоступная настройка: тумблер и подпись гаснут, курсор обычный */ .fl-body .adm-switchrow:has(input:disabled) { cursor: default; opacity: 0.55; } .fl-body .adm-switchrow:has(input:disabled):hover { border-color: rgba(246, 240, 228, 0.08); } .fl-body .adm-switchrow__text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--zp-ink); overflow-wrap: anywhere; } /* Строка переключателя + поле рядом; на узком — друг под другом */ .fl-body .adm-switchgroup { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: center; } .fl-body .adm-switchgroup--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } /* ---------------------------------------------------------------------------- 17.2 Сетки пар и троек внутри карточки ---------------------------------------------------------------------------- */ .fl-body .adm-grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .fl-body .adm-grid--trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } /* Внутри карточки зазор мельче страничного */ .fl-body .adm-panel .adm-grid { gap: 10px; } /* ---------------------------------------------------------------------------- 17.3 Пилюля-чип только для чтения (макет, блок «прочие разделы») ---------------------------------------------------------------------------- */ .fl-body .adm-pill { display: inline-block; max-width: 100%; padding: 9px 14px; border-radius: var(--zp-r-pill); border: 1px solid rgba(246, 240, 228, 0.14); font-family: var(--zp-font-mono); font-size: 12px; line-height: 1.2; color: var(--zp-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* ---------------------------------------------------------------------------- 17.4 Части панели: подвал, подзаголовок, вложенная таблица ---------------------------------------------------------------------------- */ .fl-body .adm-panel__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--zp-hairline); } .fl-body .m2-admin-page .adm-panel__subtitle { margin: 0 0 8px; font-family: var(--zp-font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--zp-ink-3); opacity: 1; } .fl-body .adm-panel__table { margin-top: 14px; } /* Таблица-карточка, у которой есть своя шапка с заголовком */ .fl-body .m2-admin-page .adm-panel.adm-tablecard { padding: clamp(14px, 1.8vw, 22px); } .fl-body .adm-panel.adm-tablecard .adm-panel__head { margin-bottom: 10px; } /* ---------------------------------------------------------------------------- 17.5 Формы разделов ---------------------------------------------------------------------------- */ .fl-body .adm-inlineform__grow { flex: 1 1 220px; } .fl-body .adm-stackform__submit { justify-self: start; margin-top: 2px; } .fl-body .adm-formactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } /* Промокоды: форма создания и раскрытая строка редактирования. display:grid сильнее атрибута hidden, поэтому скрытие возвращаем явно — иначе форма создания видна до нажатия кнопки. */ .fl-body .adm-promoform { display: grid; gap: 10px; } .fl-body .adm-promoform[hidden], .fl-body .adm-stackform[hidden], .fl-body .adm-inlineform[hidden], .fl-body .adm-createform[hidden], .fl-body .adm-switchgroup[hidden], .fl-body .adm-grid[hidden] { display: none; } .fl-body .adm-promoform__code { text-transform: uppercase; } .fl-body .m2-admin-page .adm-editrow > td { padding: 14px 12px; background: rgba(0, 0, 0, 0.32); border-radius: var(--zp-r-tile-sm); } .fl-body .m2-admin-page .adm-editrow:hover { background: transparent; } /* Группы тарифов: список сквадов + тип + кнопка одной строкой */ .fl-body .adm-squadform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; } .fl-body .adm-squadform__ta { flex: 1 1 200px; min-width: 0; min-height: 62px; font-family: var(--zp-font-mono); font-size: 12px; resize: vertical; } .fl-body .adm-squadform__type { flex: 0 0 110px; } /* Рассылки: размер батча и процент партнёра — узкие поля прямо в строке */ .fl-body .adm-batchform, .fl-body .adm-pctform { display: inline-flex; align-items: center; gap: 4px; } .fl-body .adm-rowactions--wrap { flex-wrap: wrap; justify-content: flex-end; } /* Предпросмотр логотипа */ .fl-body .adm-logopreview { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: var(--zp-r-input); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(246, 240, 228, 0.08); } .fl-body .adm-logopreview img { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; object-fit: contain; background: rgba(0, 0, 0, 0.35); } .fl-body .adm-logopreview__note { min-width: 0; font-family: var(--zp-font-mono); font-size: 11px; color: var(--zp-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------------------------- 17.6 Свёртка-предупреждение (режим обслуживания) ---------------------------------------------------------------------------- */ .fl-body .m2-admin-page .adm-fold--warn { border-color: var(--zp-err-line); background: linear-gradient(180deg, rgba(255, 98, 93, 0.06), rgba(255, 255, 255, 0.01)); } .fl-body .adm-fold--warn > .adm-fold__summary { color: var(--zp-err-ink); } .fl-body .adm-fold--warn[open] > .adm-fold__summary { border-bottom-color: var(--zp-err-line); } /* ---------------------------------------------------------------------------- 17.7 Поиск внутри раздела (строка действий промокодов) ---------------------------------------------------------------------------- */ .fl-body .adm-search--inline { flex: 1 1 260px; min-width: 0; max-width: 420px; margin: 0; } .fl-body .adm-search--inline .adm-search__input { width: 100%; border-radius: var(--zp-r-pill); padding-left: 16px; } /* ---------------------------------------------------------------------------- 17.8 Модалка подтверждения ---------------------------------------------------------------------------- */ .fl-body .m2-admin-page .m2-coupon-modal__dialog { display: grid; gap: 10px; padding: clamp(18px, 2.2vw, 28px); width: min(420px, calc(100vw - 32px)); } .fl-body .adm-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* ---------------------------------------------------------------------------- 17.9 Мелочи, которых не хватало разметке первого прохода ---------------------------------------------------------------------------- */ .fl-body .adm-tariff__sync { display: flex; align-items: center; gap: 6px; } /* Таблица админов — пять колонок, ей хватает меньшей ширины, чем списку пользователей (там 1000px из-за баланса и ряда действий). */ .fl-body .m2-admin-page .adm-table--admins { min-width: 720px; } /* Таблицы разделов без инлайн-редактирования: узкие, но не уже макетных 880px */ .fl-body .m2-admin-page .adm-panel__table .adm-table { min-width: 720px; } .fl-body .m2-admin-page .adm-panel__table .adm-table--edit { min-width: 940px; } @media (max-width: 760px) { .fl-body .adm-switchgroup, .fl-body .adm-switchgroup--wide { grid-template-columns: 1fr; } .fl-body .adm-squadform__type { flex: 1 1 110px; } .fl-body .adm-search--inline { max-width: none; } } @media (max-width: 560px) { .fl-body .adm-grid--pair, .fl-body .adm-grid--trio { grid-template-columns: 1fr; } .fl-body .adm-switchrow { padding: 10px 12px; } .fl-body .adm-rowactions--wrap { justify-content: flex-start; } } /* ============================================================================ 18. Тикеты: строка списка и счётчики по макету (блок S8) В макете строка тикета двухэтажная: тема слева, пилюля статуса справа, под ними — моно-строка «#id · пользователь · когда». Раньше разметку рисовал JS одной плоской строкой с кнопочными классами .btn.btn-ghost; теперь он отдаёт структуру макета, а размеры задаются здесь. ============================================================================ */ .fl-body .adm-support__body { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; } /* Список тикетов — обычная тёмная карточка макета, чат рядом — золотая */ .fl-body .m2-admin-page .adm-support__list { padding: clamp(14px, 1.8vw, 22px); } .fl-body .adm-support__stats { margin-bottom: 0; } .fl-body .admin-ticket-item__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .fl-body .admin-ticket-item__title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--zp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-body .admin-ticket-item__meta { display: block; margin-top: 5px; font-family: var(--zp-font-mono); font-size: 11px; line-height: 1.4; color: var(--zp-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Пилюля статуса внутри строки не должна тянуть строку по ширине */ .fl-body .admin-ticket-item .adm-status { flex: 0 0 auto; } /* Ссылка на вложение внутри пузыря */ .fl-body .admin-ticket-msg__file { display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: var(--zp-r-btn-sm); border: 1px solid rgba(246, 240, 228, 0.16); font-size: 12.5px; line-height: 1.2; text-decoration: none; color: var(--zp-ink-2); transition: color var(--zp-t-fast) var(--zp-ease), border-color var(--zp-t-fast) var(--zp-ease); } .fl-body .admin-ticket-msg__file:hover { border-color: var(--zp-gold); color: var(--zp-gold); } /* Сетка «статус / приоритет / кнопки» в свёртке чата — поля gold, не form-* */ .fl-body .adm-chat__stategrid .m2-field { margin: 0; min-width: 0; } /* ============================================================================ Правки по итогам машинного прогона вёрстки (layout_audit.py) ============================================================================ */ /* Таблицы пользователей и платежей вылезали за экран на 12px и тянули страницу. Причина не в самой таблице, а в цепочке контейнеров: элемент grid/flex по умолчанию имеет min-width:auto и отказывается сжиматься под широкого потомка, поэтому overflow-x на обёртке не срабатывал. */ .fl-body .m2-admin-page, .fl-body .m2-admin-page .m2-card, .fl-body .m2-admin-page .adm-panel, .fl-body .m2-admin-page .adm-panel__body, .fl-body .m2-admin-page .m2-table-wrap { min-width: 0; } .fl-body .m2-admin-page .m2-table-wrap { max-width: 100%; overscroll-behavior-x: contain; } /* Чипы «ещё N» вылезали за свой контейнер — переносим их по строкам. */ .fl-body .m2-admin-page .adm-chips__moreitems { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .fl-body .m2-admin-page .adm-chips__moreitems .adm-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Закрытый

в современном Chrome больше не убирает содержимое из раскладки: оно живёт в ::details-content с content-visibility: hidden и сохраняет застывшую геометрию. Поля свёрнутой панели продолжают отдавать свои прямоугольники — они наезжают друг на друга (шаг строки 23px при высоте поля 42px) и на то, что нарисовано ниже по странице. Глазом этого не видно, но ломается всё, что меряет раскладку: автотесты, скролл к элементу, hit-testing. Явный display:none в закрытом состоянии возвращает прежнее поведение; по клику на «Редактировать»/«Создать» панель раскрывается и все поля доступны как раньше. */ .fl-body .adm-fold:not([open]) > .adm-fold__body, .fl-body .adm-tariff__edit:not([open]) > .adm-tariff__fields { display: none; } /* Подзаголовки карточек: в макете интерлиньяж 1.5 (28.5px при 19px), у нас наследовался 1.25 — строка сидела теснее эталона. */ .fl-body .m2-admin-page h2, .fl-body .m2-admin-page .adm-card__title, .fl-body .m2-admin-page .m2-card__title { line-height: 1.5; }