/* ───────────────────────────────────────────────────────────────────────────── Сервис управления компанией — дизайн-система. Mobile-first: базовые стили для телефона, @media расширяют до планшета и десктопа. Светлая и тёмная тема по системной настройке. ───────────────────────────────────────────────────────────────────────────── */ :root { /* Поверхности */ --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f8f9fb; --line: #e4e7ec; --line-strong: #d0d5dd; /* Текст */ --ink: #101828; --ink-2: #344054; --muted: #667085; --faint: #98a2b3; /* Акценты */ --accent: #2f6fed; --accent-hover: #245ed6; --accent-soft: #eaf1ff; --accent-ink: #ffffff; --ok: #12873f; --ok-soft: #e6f4ea; --warn: #b7791f; --warn-soft: #fdf3dd; --danger: #d92d20; --danger-soft: #fee4e2; /* Площадки */ --wb: #b420a0; --wb-soft: #fbe8f7; --ozon: #0a5cff; --ozon-soft: #e5eeff; --ms: #5b6b7f; --ms-soft: #eef1f5; --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --shadow-lg: 0 12px 32px rgba(16, 24, 40, .16); --ring: 0 0 0 3px rgba(47, 111, 237, .25); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --nav-h: 56px; --tabbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); color-scheme: light dark; } /* Тёмная тема: по умолчанию — как в системе; переключатель ставит data-theme на . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0d10; --surface: #14171c; --surface-2: #1a1e24; --line: #262b33; --line-strong: #343b45; --ink: #eaedf1; --ink-2: #c9cfd8; --muted: #8b93a1; --faint: #5f6774; --accent: #4d8bff; --accent-hover: #6a9dff; --accent-soft: #15233d; --ok: #4cc06a; --ok-soft: #12261a; --warn: #e0a83a; --warn-soft: #2a2213; --danger: #f0605a; --danger-soft: #2e1717; --wb: #e364cd; --wb-soft: #2b1628; --ozon: #5f95ff; --ozon-soft: #14203a; --ms: #9aa6b8; --ms-soft: #1d222a; --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6); --ring: 0 0 0 3px rgba(77, 139, 255, .35); } } :root[data-theme="dark"] { --bg: #0b0d10; --surface: #14171c; --surface-2: #1a1e24; --line: #262b33; --line-strong: #343b45; --ink: #eaedf1; --ink-2: #c9cfd8; --muted: #8b93a1; --faint: #5f6774; --accent: #4d8bff; --accent-hover: #6a9dff; --accent-soft: #15233d; --ok: #4cc06a; --ok-soft: #12261a; --warn: #e0a83a; --warn-soft: #2a2213; --danger: #f0605a; --danger-soft: #2e1717; --wb: #e364cd; --wb-soft: #2b1628; --ozon: #5f95ff; --ozon-soft: #14203a; --ms: #9aa6b8; --ms-soft: #1d222a; --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6); --ring: 0 0 0 3px rgba(77, 139, 255, .35); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ── База ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); min-height: 100dvh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 0; } h2 { font-size: 15px; font-weight: 600; letter-spacing: -.005em; margin: 0; color: var(--ink); } p { margin: 0; } .muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 13px; } .mono { font-family: var(--mono); font-size: 12.5px; } .num { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } svg.i.sm { width: 15px; height: 15px; } svg.i.lg { width: 24px; height: 24px; } /* ── Верхняя панель ────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; height: var(--nav-h); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 16px; padding-top: env(safe-area-inset-top, 0px); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .brand:hover { text-decoration: none; } .brand .mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #7c4dff); display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 2px 6px rgba(47, 111, 237, .35); } .topbar .title { font-weight: 600; flex: 1; text-align: center; font-size: 16px; } .topbar nav { display: none; } .topbar .who { display: none; } .topbar .user-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; border: none; cursor: pointer; } /* ── Нижняя навигация (телефон) ────────────────────────────────────────────── */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: stretch; } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; } .tabbar a.active { color: var(--accent); } .tabbar a:hover { text-decoration: none; } .tabbar a .badge { position: absolute; top: 8px; left: calc(50% + 6px); } .badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } /* ── Контейнер ─────────────────────────────────────────────────────────────── */ .page { max-width: 1120px; margin: 0 auto; padding: 16px 16px 24px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .page-head .lead { color: var(--muted); margin-top: 4px; font-size: 14px; } .page-head h1 { display: none; } .page-head .actions { display: flex; gap: 8px; flex: none; } .section { margin-top: 22px; } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; } .section-head h2 { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--muted); font-weight: 600; } /* ── Карточки ──────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card.pad { padding: 16px; } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; } a.stat:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lg); } .stat .ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .stat .n { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; } .stat .l { color: var(--muted); font-size: 13px; } .stat.warn .ico { background: var(--warn-soft); color: var(--warn); } .stat.warn .n { color: var(--warn); } .stat.ok .ico { background: var(--ok-soft); color: var(--ok); } /* Список-карточка: строки с разделителями */ .list { display: flex; flex-direction: column; } .list > .row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); } .list > .row:first-child { border-top: none; } .list > .row.link { color: inherit; text-decoration: none; } .list > .row.link:hover { background: var(--surface-2); } .row .grow { flex: 1; min-width: 0; } .row .t { font-weight: 500; } .row .s { color: var(--muted); font-size: 13px; margin-top: 1px; } .row .end { flex: none; display: flex; align-items: center; gap: 8px; } .row .chev { color: var(--faint); } /* ── Таблицы ───────────────────────────────────────────────────────────────── */ /* Широкая таблица прокручивается внутри карточки: тело страницы вбок не ездит. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .table-wrap table { min-width: 100%; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; } th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--surface-2); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Артикул — единственная колонка, которой можно переноситься. */ tbody td:first-child { white-space: normal; min-width: 140px; } /* ── Пилюли и метки ────────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .pill.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .pill.wb { background: var(--wb-soft); color: var(--wb); border-color: transparent; } .pill.ozon { background: var(--ozon-soft); color: var(--ozon); border-color: transparent; } .pill.ms { background: var(--ms-soft); color: var(--ms); border-color: transparent; } .mp-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .02em; } .mp-mark.wb { background: var(--wb-soft); color: var(--wb); } .mp-mark.ozon { background: var(--ozon-soft); color: var(--ozon); } .mp-mark.ms { background: var(--ms-soft); color: var(--ms); } /* ── Кнопки и формы ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: background .12s, border-color .12s, transform .05s; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:active { transform: scale(.985); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); } .btn.primary:hover { background: var(--accent-hover); } .btn.ghost { border-color: transparent; background: transparent; color: var(--accent); } .btn.ghost:hover { background: var(--accent-soft); } .btn.danger { color: var(--danger); } .btn.danger:hover { background: var(--danger-soft); border-color: transparent; } .btn.sm { min-height: 34px; padding: 0 11px; font-size: 13px; } .btn.icon { width: 40px; padding: 0; } .btn.block { width: 100%; } .btn[disabled], .btn.htmx-request { opacity: .55; cursor: progress; } .btn .spin { display: none; } .btn.htmx-request .spin { display: inline-block; } .btn.htmx-request .i:not(.spin) { display: none; } .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink-2); } .field .hint { font-size: 12.5px; color: var(--muted); } .input, .select { width: 100%; min-height: 42px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); -webkit-appearance: none; appearance: none; } .input::placeholder { color: var(--faint); } .input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .select { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .input.mono { font-family: var(--mono); font-size: 13.5px; } .form-grid { display: grid; gap: 14px; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .search { position: relative; } .search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; } .search .input { padding-left: 36px; } /* ── Чипы-фильтры ──────────────────────────────────────────────────────────── */ .chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; } .chip:hover { text-decoration: none; background: var(--surface-2); } .chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip .cnt { font-variant-numeric: tabular-nums; opacity: .75; } /* ── Магазин: карточка ─────────────────────────────────────────────────────── */ .store-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .store { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .store.off { opacity: .62; } .store .head { display: flex; align-items: center; gap: 12px; } .store .head .name { font-weight: 600; font-size: 16px; letter-spacing: -.01em; } .store .head .sub { color: var(--muted); font-size: 13px; } .store .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .store .meta .k { color: var(--muted); font-size: 12px; } .store .meta .v { font-weight: 500; font-size: 14px; margin-top: 1px; } .store .foot { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; } .store .foot .btn { flex: 1; } /* ── Склад: строка ─────────────────────────────────────────────────────────── */ .wh { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; } .wh:first-child { border-top: none; } .wh.hidden { display: none; } .wh .name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; } .wh .name .src { font-size: 12px; color: var(--muted); font-weight: 400; } .wh form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wh form .btn { grid-column: 1 / -1; } .wh.pending { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); } .wh .ro { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Пустое состояние ──────────────────────────────────────────────────────── */ .empty { text-align: center; padding: 36px 20px; color: var(--muted); } .empty .ico { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--faint); } .empty .t { color: var(--ink); font-weight: 600; margin-bottom: 4px; } /* ── Уведомления ───────────────────────────────────────────────────────────── */ .notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; } .notice .i { margin-top: 1px; } .notice.warn { background: var(--warn-soft); color: var(--warn); } .notice.danger { background: var(--danger-soft); color: var(--danger); } .notice.ok { background: var(--ok-soft); color: var(--ok); } .notice a { color: inherit; font-weight: 600; text-decoration: underline; } #toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-size: 14px; line-height: 1.35; animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); } .toast.ok .i { color: #4cc06a; } .toast.bad .i { color: #ff8a80; } .toast.leaving { animation: toast-out .2s ease forwards; } .toast .x { margin-left: auto; background: none; border: none; color: inherit; opacity: .6; cursor: pointer; padding: 0 2px; font-size: 18px; line-height: 1; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes toast-out { to { opacity: 0; transform: translateY(6px); } } /* Полоска прогресса при запросах */ #progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 60; opacity: 0; transition: width .3s ease, opacity .3s; } #progress.on { opacity: 1; width: 70%; } #progress.done { width: 100%; opacity: 0; transition: width .15s, opacity .4s .15s; } /* ── Диалог (нижний лист на телефоне) ──────────────────────────────────────── */ dialog.sheet { border: none; padding: 0; margin: 0; max-width: none; width: 100%; background: var(--surface); color: var(--ink); border-radius: 20px 20px 0 0; position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 92dvh; overflow: auto; box-shadow: var(--shadow-lg); padding-bottom: calc(var(--safe-b) + 8px); } dialog.sheet::backdrop { background: rgba(16, 24, 40, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } dialog.sheet[open] { animation: sheet-in .25s cubic-bezier(.2, .8, .2, 1); } @keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } } .sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 10px auto 4px; } .sheet .body { padding: 10px 20px 16px; } .sheet .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sheet .head h2 { font-size: 18px; letter-spacing: -.01em; } .sheet .close { background: var(--surface-2); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--muted); display: grid; place-items: center; } /* ── Лента активности ──────────────────────────────────────────────────────── */ .timeline .row { align-items: flex-start; } .timeline .when { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; width: 74px; flex: none; padding-top: 2px; } .timeline .what { font-size: 14px; } .timeline .who { color: var(--muted); font-size: 12.5px; } /* ── Вход ──────────────────────────────────────────────────────────────────── */ body.login-page { padding-bottom: 0; display: grid; place-items: center; } .login { width: 100%; max-width: 380px; padding: 28px 22px; } .login .mark { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; margin-bottom: 18px; } .login h1 { font-size: 26px; } .login .lead { color: var(--muted); margin: 6px 0 22px; } .login .form-grid { gap: 12px; } .login .btn { margin-top: 6px; min-height: 46px; font-size: 15px; } /* ── Планшет и десктоп ─────────────────────────────────────────────────────── */ @media (min-width: 720px) { body { padding-bottom: 32px; } .tabbar { display: none; } .topbar { padding: 0 24px; gap: 20px; } .topbar .title { display: none; } .topbar nav { display: flex; gap: 2px; flex: 1; } .topbar nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 14px; text-decoration: none; } .topbar nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .topbar nav a.active { color: var(--ink); background: var(--accent-soft); color: var(--accent); } .topbar .who { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; } .topbar .who a { color: inherit; } .topbar .user-btn { margin-left: 0; } .page { padding: 28px 24px 48px; } .page-head h1 { display: block; } .page-head { margin-bottom: 18px; } .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .stat { padding: 18px 18px 16px; } .stat .n { font-size: 30px; } .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store .foot .btn { flex: none; } .wh { grid-template-columns: minmax(220px, 1.3fr) 2fr; align-items: center; } .wh form { grid-template-columns: 1fr 1fr auto; } .wh form .btn { grid-column: auto; } #toasts { left: auto; right: 20px; bottom: 20px; width: 360px; } dialog.sheet { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100% - 32px)); height: fit-content; max-height: 86vh; border-radius: 18px; padding-bottom: 0; } .sheet .grab { display: none; } .sheet .body { padding: 20px 24px 22px; } @keyframes sheet-in { from { transform: translateY(10px) scale(.98); opacity: 0; } } } @media (min-width: 1024px) { .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .store .foot .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── Раздел «Склад»: подменю, фильтры, чипы-галочки ───────────────────────── */ .subtabs { display: flex; gap: 4px; margin-bottom: 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .subtabs::-webkit-scrollbar { display: none; } .subtabs a { flex: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; border: 1px solid transparent; } .subtabs a:hover { background: var(--surface-2); text-decoration: none; } .subtabs a.active { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; } .filters { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 14px 0; } .filters .search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); } .filters .search input { width: 100%; min-height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 15px; } .filters .search input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); } .filter-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } /* Галочка-чип: сам input не показываем, вид держит соседний span. Так работает в любом браузере, без :has(). */ .chip-check { display: inline-flex; flex: none; } .chip-check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .chip-check span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; } .chip-check span:hover { background: var(--surface-2); } .chip-check input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip-check input:focus-visible + span { box-shadow: var(--ring); } .badge.muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } tr.faint td { color: var(--faint); } .lead.small { font-size: 13px; margin: -4px 0 10px; } @media (min-width: 720px) { .filters { flex-direction: row; align-items: center; flex-wrap: wrap; } .filters .search { flex: 1 1 260px; } .filter-actions { margin-left: auto; } } /* ── Широкие денежные таблицы ─────────────────────────────────────────────── */ .money-stats .stat .n { font-size: 20px; } table.money th.grp { text-align: center; border-left: 1px solid var(--line); white-space: nowrap; } table.money td, table.money th { white-space: nowrap; } table.money td:first-child { white-space: normal; min-width: 150px; } table.money tfoot th { position: sticky; bottom: 0; background: var(--surface-2); } @media (min-width: 720px) { .money-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .money-stats .stat .n { font-size: 22px; } } table.money tr.band td { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding-top: 8px; padding-bottom: 8px; } /* Поиск по списку прячет строки классом hidden — на любом экране, не только в складах. */ [data-search].hidden { display: none; } /* ── Таблица с правкой в ячейках ──────────────────────────────────────────── */ table.sheet { border-collapse: separate; border-spacing: 0; } table.sheet th, table.sheet td { white-space: nowrap; vertical-align: middle; } table.sheet th.auto, table.sheet td.auto { background: var(--surface-2); color: var(--muted); } table.sheet .sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 170px; white-space: normal; box-shadow: 1px 0 0 var(--line); } table.sheet thead .sticky { z-index: 2; } table.sheet td.cell { padding: 2px 4px; } /* Один язык для всех таблиц с правкой: ручная ячейка выглядит полем ввода (рамка, * белый фон, ✎ в шапке), автоматическая — серым текстом без рамки, незаполненная * обязательная — жёлтой рамкой. Без этого ручное поле не отличить от посчитанного. */ table.sheet td.cell input, table.sheet td.cell select { width: 100%; min-width: 60px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 5px 7px; font: inherit; color: var(--ink); } table.sheet td.cell input::placeholder { color: var(--faint); font-style: italic; } table.sheet td.cell input:hover, table.sheet td.cell select:hover { border-color: var(--line-strong); } table.sheet th.manual::after { content: "✎"; margin-left: 5px; color: var(--accent); font-weight: 400; } table.sheet td.auto { cursor: default; } table.sheet td.missing { background: var(--warn-soft); } table.sheet td.cell.missing input, table.sheet td.cell.missing select { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); } table.sheet td.cell input:focus, table.sheet td.cell select:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); } table.sheet td.cell.busy input { opacity: .5; } /* Выбранные галочкой строки видны целиком, как выделение в таблицах Google */ tbody tr:has(> td > input[data-select]:checked) td { background: var(--accent-soft); } tbody td:has(> input[data-select]) { cursor: pointer; user-select: none; } /* Выделенные ячейки — полупрозрачная заливка поверх любого фона строки * (жёлтой ручной, серой авто), чтобы не терять, какая ячейка какая */ tbody td.cell-picked { background-image: linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } tbody td.cell-picked input, tbody td.cell-picked select { background-color: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .cells-dragging, .cells-dragging * { user-select: none; -webkit-user-select: none; cursor: cell; } .cell-sum { position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 55; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; box-shadow: 0 6px 20px rgba(16, 24, 40, .14); font-variant-numeric: tabular-nums; } .cell-sum[hidden] { display: none; } @media (min-width: 1024px) { .cell-sum { bottom: 16px; } } /* нижних вкладок нет — плашка к краю */ .cell-sum b { color: var(--ink); } .cell-sum .sep { color: var(--faint); } table.sheet td.cell.ok input, table.sheet td.cell.ok select { background: var(--ok-soft); } table.sheet td.cell.err input, table.sheet td.cell.err select { border-color: var(--danger); background: var(--danger-soft); } table.sheet td.cell.missing.err input { box-shadow: 0 0 0 1px var(--danger); } table.sheet tr.edit-row td { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); } table.sheet tr.edit-row td.sticky { background: var(--warn-soft); } .sheet-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 10px; font-size: 12px; color: var(--muted); } .sheet-legend .sw { display: inline-block; width: 22px; height: 14px; margin-right: 6px; border-radius: 4px; vertical-align: -2px; } .sheet-legend .sw.manual { background: var(--surface); border: 1px solid var(--line-strong); } .sheet-legend .sw.auto { background: var(--surface-2); border: 1px solid var(--line-strong); } .sheet-legend .sw.missing { background: var(--surface); border: 1px solid var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); } .sheet-legend .pen { color: var(--accent); } /* ── Пользователи: галочки функций ────────────────────────────────────────── */ .rights-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .check-line { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 14px; cursor: pointer; } .check-line input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); } .tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent); vertical-align: middle; } .tag.muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .form-grid > label:not(.chip-check) { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 500; min-width: 0; } .form-grid > label:not(.chip-check) .input { font-weight: 400; } label.chip-check span { white-space: normal; min-height: 34px; height: auto; padding: 6px 12px; } input, select, textarea { box-sizing: border-box; max-width: 100%; } /* ══ Оболочка: левое меню ═════════════════════════════════════════════════════ Как у финтех-кабинетов: тёмная панель слева, разделы с подменю. На широком экране панель можно свернуть до значков — тогда подменю всплывает по наведению. На телефоне панель выезжает по кнопке меню. */ :root { --sb-w: 248px; --sb-w-min: 68px; --sb-bg: #1b1f27; --sb-ink: #c7ccd6; --sb-muted: #8a91a0; --sb-hover: #262b35; --sb-active: #2d3441; --tabbar-h: 0px; } body { padding-bottom: 0; } .shell { min-height: 100dvh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sb-w); z-index: 40; background: var(--sb-bg); color: var(--sb-ink); display: flex; flex-direction: column; padding: 14px 10px 12px; transform: translateX(-100%); transition: transform .2s ease, width .18s ease; } .nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); } .sb-backdrop { display: none; } .nav-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(10, 12, 16, .45); z-index: 35; } .sb-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 14px; } .sidebar .brand { color: #fff; flex: 1; min-width: 0; } .sidebar .brand .mark { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; flex: none; } .brand-text { display: grid; line-height: 1.15; min-width: 0; } .brand-text b { font-size: 15px; color: #fff; } .brand-text small { font-size: 12px; color: var(--sb-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-collapse { display: none; background: none; border: 0; color: var(--sb-muted); padding: 6px; border-radius: 8px; cursor: pointer; } .sb-collapse:hover { color: #fff; background: var(--sb-hover); } .sb-nav { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; } .sb-foot { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid #2a303b; } .sb-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer; color: var(--sb-ink); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none; } .sb-link:hover { background: var(--sb-hover); color: #fff; text-decoration: none; } .sb-link.active { background: var(--sb-active); color: #fff; } .sb-link .i { width: 19px; height: 19px; color: var(--sb-muted); } .sb-link.active .i, .sb-link:hover .i { color: #fff; } .sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-chev { transition: transform .15s ease; opacity: .7; } .sb-group.open .sb-chev { transform: rotate(90deg); } .sb-sub { display: none; padding: 2px 0 6px 41px; } .sb-group.open .sb-sub { display: grid; gap: 1px; } .sb-sub a { color: var(--sb-muted); font-size: 13.5px; font-weight: 500; padding: 6px 10px; border-radius: 8px; text-decoration: none; } .sb-sub a:hover { color: #fff; background: var(--sb-hover); } .sb-sub a.active { color: #fff; background: var(--sb-active); } .sb-fly { display: none; } .main { min-width: 0; } .bar { position: sticky; top: 0; z-index: 20; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .bar-menu { background: none; border: 0; padding: 6px; margin-left: -6px; color: var(--ink); cursor: pointer; border-radius: 8px; } .bar-title { flex: 1; font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-user { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; } .page-head h1 { display: none !important; } @media (min-width: 1024px) { .sidebar { transform: none; } .main { margin-left: var(--sb-w); transition: margin-left .18s ease; } .bar-menu, .sb-backdrop { display: none !important; } .bar { padding: 0 28px; } .sb-collapse { display: block; } .nav-collapsed .sidebar { width: var(--sb-w-min); } .nav-collapsed .main { margin-left: var(--sb-w-min); } .nav-collapsed .brand-text, .nav-collapsed .sb-label, .nav-collapsed .sb-chev, .nav-collapsed .sb-group .sb-sub { display: none !important; } .nav-collapsed .sb-head { flex-direction: column; padding-left: 0; padding-right: 0; } .nav-collapsed .sb-link { justify-content: center; padding: 10px 0; } .nav-collapsed .sb-collapse svg { transform: scaleX(-1); } .page { max-width: 1320px; padding: 24px 28px 48px; } } #toasts { bottom: 16px; } /* ── Переключатели: сегменты вместо россыпи пилюль ─────────────────────────── Как «Активные | Отключённые»: одна рамка, выбранный сегмент подсвечен. */ .filters { padding: 0; margin: 4px 0 16px; gap: 10px; } .filters .chips { display: inline-flex; gap: 0; padding: 3px; align-self: flex-start; max-width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; } .filters .chip { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; } .filters .chip:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); } .filters .chip.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--line); } .filters .search { position: relative; } @media (min-width: 720px) { .filters { flex-direction: row; flex-wrap: wrap; align-items: center; } } /* ── Карточки показателей ─────────────────────────────────────────────────── */ .stats .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .stat .n { font-variant-numeric: tabular-nums; } .stat.ok .n { color: var(--ink); } .stat.ok { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); } /* ── Таблицы: плотнее и читаемее ──────────────────────────────────────────── */ table.money thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-size: 11.5px; letter-spacing: .04em; } table.money tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); } table.money td, table.money th { padding-top: 9px; padding-bottom: 9px; } /* ══ Меню как у Adesk ═══════════════════════════════════════════════════════ Узкая тёмная панель. Раздел с подпунктами не раскрывается вниз: при наведении справа выпадает окошко — плитка-значок, название, пояснение. Подпункт со своим подменю открывает второе окошко. В свёрнутой панели у пунктов — подсказка. */ .sb-fly, .sb-fly-2 { display: none; } @media (min-width: 1024px) { :root { --sb-w: 214px; --sb-w-min: 60px; --sb-bg: #1d222b; --sb-fly-bg: #1a1e26; --sb-tile: #2b313b; } .sidebar { padding: 12px 8px 10px; } .sb-head { padding: 2px 6px 16px; } .sb-nav { overflow: visible; gap: 1px; } .sb-foot { gap: 1px; } .sb-link { position: relative; gap: 10px; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600; } .sb-link .i { width: 17px; height: 17px; } .sb-chev, .sb-group.open .sb-chev { transform: none; opacity: .55; } .sb-group { position: relative; } .sb-group .sb-sub { display: none !important; } .sb-group:hover > .sb-link, .sb-group.fly-open > .sb-link { background: var(--sb-hover); color: #fff; } .sb-group:hover > .sb-link .i { color: #fff; } .sb-fly { position: absolute; left: calc(100% + 12px); top: -8px; z-index: 60; width: 232px; background: var(--sb-fly-bg); border-radius: 8px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); grid-auto-rows: min-content; gap: 2px; } .sb-fly::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; } .sb-group:hover > .sb-fly, .sb-group.fly-open > .sb-fly { display: grid; animation: sb-fly-in .12s ease-out; } .sb-foot .sb-group > .sb-fly { top: auto; bottom: -8px; } @keyframes sb-fly-in { from { opacity: 0; transform: translateX(-4px); } } .sb-fly-item { display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 6px; text-decoration: none; color: #fff; } .sb-fly-item:hover, .sb-fly-group:hover > .sb-fly-item { background: var(--sb-hover); text-decoration: none; } .sb-fly-item.active { background: var(--sb-active); } .sb-tile { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--sb-tile); color: #a3abb9; } .sb-tile .i { width: 19px; height: 19px; } .sb-fly-item.active .sb-tile, .sb-fly-item:hover .sb-tile { color: #fff; } .sb-fly-text { display: grid; gap: 2px; min-width: 0; flex: 1; } .sb-fly-text b { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; } .sb-fly-text small { font-size: 11.5px; color: var(--sb-muted); line-height: 1.25; } .sb-fly-chev { color: var(--sb-muted); flex: none; } .sb-fly-group { position: relative; } .sb-fly-group > .sb-fly-2 { left: calc(100% + 16px); top: -8px; } .sb-fly-group:hover > .sb-fly-2 { display: grid; animation: sb-fly-in .12s ease-out; } /* Свёрнутая панель: только значки, подсказка с названием */ .nav-collapsed .sb-link { justify-content: center; padding: 9px 0; } .nav-collapsed .sb-link[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: #2a2f38; color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; padding: 5px 9px; border-radius: 5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); pointer-events: none; z-index: 70; } .nav-collapsed .sb-group > .sb-link[data-tip]:hover::after { display: none; } } /* Переключатель темы в подвале меню */ .sb-theme .sb-theme-value { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--sb-muted); } .nav-collapsed .sb-theme .sb-theme-value { display: none; } /* Закреплённые заголовки: таблица прокручивается внутри своей карточки, шапка (и строка итогов снизу, где она есть) остаётся на месте. */ @media (min-width: 720px) { .card.table-wrap { max-height: calc(100dvh - 150px); overflow: auto; } .oh-unacc .table-wrap { max-height: 360px; } } .table-wrap thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); } .table-wrap thead th.sticky { z-index: 3; } /* Счётчик у пункта меню — как непрочитанные сообщения */ .sb-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #f04438; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; } .sb-link .sb-badge { margin-left: auto; } .sb-link .sb-badge + .sb-chev { margin-left: 4px; } @media (min-width: 1024px) { .nav-collapsed .sb-link .sb-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; font-size: 10px; margin: 0; padding: 0 4px; } } /* ══ Телефон ═════════════════════════════════════════════════════════════════ Вырез и полоса «Домой» (safe-area), кнопки под палец, без случайного зума и выделения текста. Страница вбок не ездит: всё широкое переносится или прокручивается внутри своей карточки. */ /* Только до десктопной раскладки: там у .bar, .page и .sidebar свои отступы. */ @media (max-width: 1023px) { .bar { height: calc(58px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .sidebar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: calc(10px + env(safe-area-inset-left, 0px)); } } @media (max-width: 719px) { .page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } } @media (min-width: 720px) and (max-width: 1023px) { .page { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } } #toasts { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* Шапка страницы и уведомление: кнопки уходят на следующую строку, а не за край. */ .page-head { flex-wrap: wrap; } .page-head > :first-child { flex: 1 1 220px; min-width: 0; } .page-head .actions { flex-wrap: wrap; max-width: 100%; } .notice { flex-wrap: wrap; } .notice > span, .notice > div { flex: 1 1 200px; min-width: 0; } /* Нажатие без серой вспышки и без задержки на двойной тап; текст кнопок не выделяется. */ a, button, summary, label, select, .btn, .chip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn, .chip, .chip-check span, .sb-link, .sb-sub a, .subtabs a, .wh-tabs a, .bar, .bar-menu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Палец, а не мышь: цели не меньше 44 px (рекомендация Apple). В плотных таблицах оставляем как есть — там строка важнее. Префикс :root — чтобы перебить правила разделов из ui.css, который подключается позже. */ @media (pointer: coarse) { :root :is(.btn, .input, .select, .chip, .chip-check span, .filters .search input) { min-height: 44px; } .btn.icon { width: 44px; } :root :is(.subtabs a, .wh-tabs a) { display: inline-flex; align-items: center; min-height: 44px; } .bar-menu { width: 44px; height: 44px; display: grid; place-items: center; } .sb-link { padding-top: 12px; padding-bottom: 12px; } .sb-sub a { padding-top: 10px; padding-bottom: 10px; } .sheet .close { width: 44px; height: 44px; } :root table :is(.btn, .input, .select, .chip, .filters .search input) { min-height: 34px; } } /* ══ Как приложение ══════════════════════════════════════════════════════════ Нижние вкладки на телефоне и планшете, переходы между страницами без белой вспышки, жесты в режиме «с экрана Домой». Поведение — app.js, «Как приложение». */ /* Фон под страницей — цвет темы: пока грузится следующая, экран не белеет. */ html { background: var(--bg); } .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 500; } .tabbar a, .tabbar button { min-width: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .tabbar span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; } .tabbar .i { width: 24px; height: 24px; transition: transform .12s ease; } .tabbar button.active { color: var(--accent); } .tabbar a:active .i, .tabbar button:active .i { transform: scale(.88); } .tabbar a .badge { top: 5px; left: calc(50% + 8px); } @media (max-width: 1023px) { :root { --tabbar-h: 56px; } .tabbar { display: flex; } .shell { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); } /* Меню открывается вкладкой «Ещё» — кнопка в шапке дублировала бы её. */ .shell .bar-menu { display: none; } .shell ~ #toasts { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); } } /* Полосу «Домой» уже учитывает панель вкладок — странице второй отступ не нужен. */ @media (max-width: 719px) { .shell .page { padding-bottom: 24px; } } @media (min-width: 720px) and (max-width: 1023px) { .shell .page { padding-bottom: 48px; } } @media (min-width: 1024px) { .tabbar { display: none; } } /* Переход между страницами: новая плавно проявляется поверх старой, шапка и вкладки стоят на месте. Браузер без поддержки просто открывает страницу. */ @view-transition { navigation: auto; } .bar { view-transition-name: mw-bar; } .tabbar { view-transition-name: mw-tabbar; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Жесты: «потянуть для обновления» и «свайп назад» */ .ptr, .swipe-back { position: fixed; z-index: 45; display: grid; place-items: center; pointer-events: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--accent); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .15s ease; } .ptr { left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px); margin-left: -18px; } .swipe-back { left: 6px; top: 50%; margin-top: -18px; } .ptr.ready, .swipe-back.ready { background: var(--accent); color: var(--accent-ink); } .ptr.spinning .i { animation: spin .7s linear infinite; } /* Плашка «нет связи» над сохранённой копией страницы (вставляет /sw.js) */ .offline-note { margin-bottom: 14px; } /* Подсказка к ячейке таблицы на сенсорном экране (app.js) — под шапкой, над клавиатурой */ .touch-tip { position: fixed; left: 12px; right: 12px; z-index: 50; top: calc(58px + env(safe-area-inset-top, 0px) + 8px); padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 13.5px; line-height: 1.35; box-shadow: var(--shadow-lg); pointer-events: none; animation: toast-in .18s ease; } /* Карточки-плитки на телефоне: единственное поле — во всю ширину, заголовок не сжимается рядом с меткой состояния, а уходит под неё. */ .store .meta > :only-child { grid-column: 1 / -1; } .store .head { flex-wrap: wrap; } .store .head .grow { flex: 1 1 180px; min-width: 0; } /* Заголовок раздела с действиями справа («скопировать с: …») переносится целиком */ .section-head { flex-wrap: wrap; } .section-head .chips { align-items: center; max-width: 100%; } .section-head .chips > span { white-space: nowrap; margin-right: 4px; } /* Длинная таблица на телефоне прокручивается внутри своей карточки, как на компьютере: шапка с названиями колонок и первая колонка всегда перед глазами. Высота — экран без шапки, нижних вкладок и отступа: страницу вокруг таблицы можно пролистать, взявшись за шапку страницы или фильтры. */ @media (max-width: 719px) { .card.table-wrap { max-height: calc(100dvh - 58px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px) - 24px); overflow: auto; } } /* Кнопка «показано N из M — ещё» под таблицей, дорисованной порциями (app.js) */ .more-rows { border-radius: 0; border-width: 1px 0 0; font-weight: 500; color: var(--muted); } /* Таблица с правкой на телефоне: закреплённая колонка уже, данным остаётся место */ @media (max-width: 719px) { table.sheet .sticky { min-width: 96px; max-width: 120px; font-size: 12px; overflow-wrap: anywhere; } }