/* VoiceTrics UI — единственный стилевой файл приложения. Подключается вместо Bootstrap. Порядок: токены → база → оболочка → компоненты. Все размеры и цвета — только через переменные ниже. */ /* ─── Токены ─────────────────────────────────────────────── */ :root { --ac: #4F46E5; /* акцент: фоны кнопок, бары, активные состояния */ --ac-2: #6D66F0; /* акцент при наведении */ --ac-soft: #EEEDFD; /* мягкая подложка акцента */ --ac-fg: #4F46E5; /* акцент как ЦВЕТ ТЕКСТА (в тёмной теме светлее) */ --bg: #F3F4F9; --surface: #FFFFFF; --surface-2: #F7F8FC; /* шапки таблиц, поля ввода, вторичные кнопки */ --line: #EAEBF2; --tx: #14151C; /* основной текст */ --tx-2: #6B7080; /* вторичный */ --tx-3: #6A7086; /* подписи, метки колонок — не светлее этого */ --ok: #0F9D6E; --ok-soft: #E7F7F1; --bad: #E11D48; --bad-soft: #FEECF0; --warn: #C2740A; --warn-soft: #FDF3E3; --vio: #7C3AED; --vio-soft: #F1EBFE; /* «очень высокая ценность» */ --sh: 0 1px 2px rgba(18,21,40,.04), 0 6px 20px rgba(18,21,40,.05); --rp: 8px; /* вертикальный padding строки таблицы (плотность) */ --gap: 14px; /* шаг сетки между карточками */ --r-card: 12px; --r-ctl: 8px; --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Manrope', system-ui, -apple-system, sans-serif; } [data-theme="dark"] { --ac-soft: rgba(109,102,240,.20); --ac-fg: #B0ACF3; --bg: #0A0B10; --surface: #14161E; --surface-2: #1A1D26; --line: #252935; --tx: #EDEFF5; --tx-2: #99A0B2; --tx-3: #8B92A6; --ok: #34D399; --ok-soft: rgba(52,211,153,.14); --bad: #FB7185; --bad-soft: rgba(251,113,133,.15); --warn: #FBBF24; --warn-soft: rgba(251,191,36,.14); --vio: #A78BFA; --vio-soft: rgba(167,139,250,.16); --sh: 0 1px 2px rgba(0,0,0,.45); } /* ─── Палитры акцента ──────────────────────────────────────── Акцент — четыре токена, поэтому смена палитры это блок объявлений, а не перекраска экранов. Индиго живёт в :root выше, остальные три вешаются атрибутом data-accent на (см. theme.js). Тёмные варианты обязаны быть специфичнее блока [data-theme="dark"], иначе индиговые --ac-soft/--ac-fg оттуда перебьют палитру. Отсюда двойной атрибут в селекторе. --ac-fg — цвет ТЕКСТА на светлом фоне, поэтому у бирюзы и изумруда он темнее самого акцента: #059669 на белом даёт 3.8:1, мелкий текст таким набирать нельзя. Белый текст на кнопке --ac проверен так же. Графит — случай, ради которого тёмные блоки двигают и сам --ac: #0F172A темнее тёмной подложки, кнопка на ней просто исчезает. */ :root[data-accent="teal"] { --ac: #0E7C86; --ac-2: #12939F; --ac-soft: #E3F1F2; --ac-fg: #0E7C86; } :root[data-accent="teal"][data-theme="dark"] { --ac-soft: rgba(45,180,193,.20); --ac-fg: #6FD4DE; } :root[data-accent="graphite"] { --ac: #0F172A; --ac-2: #1E293B; --ac-soft: #EDF0F6; --ac-fg: #0F172A; } :root[data-accent="graphite"][data-theme="dark"] { --ac: #475569; --ac-2: #64748B; --ac-soft: rgba(148,163,184,.18); --ac-fg: #CBD5E1; } :root[data-accent="emerald"] { --ac: #047857; --ac-2: #059669; --ac-soft: #E3F5EE; --ac-fg: #047857; } :root[data-accent="emerald"][data-theme="dark"] { --ac-soft: rgba(52,211,153,.18); --ac-fg: #6EE7B7; } /* Образцы для переключателя палитры в настройках. Живут здесь, а не в шаблоне: иначе hex пришлось бы держать во втором месте, и образец начал бы врать про сам акцент. */ .swatch { width: 22px; height: 22px; border-radius: 7px; flex: none; } .swatch--indigo { background: #4F46E5; } .swatch--teal { background: #0E7C86; } .swatch--graphite { background: #0F172A; } .swatch--emerald { background: #047857; } /* Просторный режим — вешается на */ .roomy { --rp: 13px; --gap: 20px; } /* ─── База ───────────────────────────────────────────────── */ * { box-sizing: border-box; } /* Атрибут hidden должен побеждать любой наш display. Браузер задаёт его правилом `[hidden] { display: none }` на уровне UA, а любое авторское `.field { display: flex }` специфичнее по происхождению — и элемент остаётся на экране. Ровно так «своё сочетание» в правилах получателя показывалось при выбранном пресете. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--sans); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--ac-fg); text-decoration: none; } a:hover { color: var(--ac-fg); text-decoration: underline; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .muted { color: var(--tx-3); } .hint { font-size: 11.5px; color: var(--tx-3); text-wrap: pretty; } /* ─── Оболочка ───────────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .rail { width: 56px; flex: none; background: var(--surface); box-shadow: var(--sh); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; } .rail__logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ac); display: grid; place-items: center; margin-bottom: 10px; flex: none; } .rail__btn { width: 40px; height: 40px; border: 0; border-radius: 11px; background: transparent; color: var(--tx-3); display: grid; place-items: center; cursor: pointer; } .rail__btn:hover { background: var(--surface-2); color: var(--tx-2); } .rail__btn.is-active { background: var(--ac-soft); color: var(--ac-fg); } .rail__btn.is-active:hover { background: var(--ac-soft); } .rail__spacer { flex: 1; } .shell { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); box-shadow: var(--sh); height: 52px; flex: none; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 16px; } /* Всё в шапке не сжимается, кроме поиска — иначе логотип ломается по слогам, а блок компании уезжает за край на неразвёрнутом окне ноутбука. */ .topbar > * { flex: none; } .topbar__div { width: 1px; height: 20px; background: var(--line); } /* Заголовок не сжимается — он главный ориентир на странице. Единственный сжимаемый элемент шапки — поле поиска (.search). */ .topbar__title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; } .topbar__spacer { flex: 1 1 auto; } /* Логотип-леттеринг: те же точки над «ı», что на лендинге */ .logotype { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--tx); flex: none; white-space: nowrap; } .logotype i { position: relative; display: inline-block; font-style: normal; } .logotype i::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: .09em; width: .15em; height: .15em; border-radius: 50%; background: var(--ac); } .search { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border-radius: var(--r-ctl); height: 32px; padding: 0 10px; flex: 0 1 200px; min-width: 0; overflow: hidden; } .search input { border: 0; background: transparent; outline: none; font: inherit; font-size: 12.5px; color: var(--tx); width: 100%; min-width: 0; } /* На неразвёрнутом окне ноутбука шапка разгружается по шагам: сначала убирается поле поиска, затем имя компании. */ @media (max-width: 1100px) { .topbar .search { display: none; } } @media (max-width: 720px) { .empty { padding: 36px 18px; } .empty .btn-row .btn { width: 100%; } .tech__grid { grid-template-columns: 1fr; } } @media (max-width: 1000px) { .org { padding: 0 4px; } .org__name { display: none; } } .icon-btn { width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--tx-2); display: grid; place-items: center; cursor: pointer; } .icon-btn:hover { color: var(--tx); } .org { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--r-ctl); height: 32px; padding: 0 4px 0 10px; } .org__name { font-size: 12px; font-weight: 700; color: var(--tx-2); white-space: nowrap; } .org__ava { width: 24px; height: 24px; border-radius: 6px; background: var(--ac); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; } .page { padding: 16px; display: flex; flex-direction: column; gap: var(--gap); } .page--narrow { max-width: 900px; } .foot { margin-top: auto; padding: 14px 16px; display: flex; align-items: center; gap: 10px; } .foot .logotype { font-size: 12px; color: var(--tx-3); } .foot .num { font-size: 11px; color: var(--tx-3); } /* ─── Сетки ──────────────────────────────────────────────── */ .grid { display: grid; gap: var(--gap); } .grid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .grid--2 { grid-template-columns: 1.6fr 1fr; } .grid--detail { grid-template-columns: 1fr 1.35fr; align-items: start; } .stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } @media (max-width: 1200px) { .grid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid--2, .grid--detail { grid-template-columns: 1fr; } } /* ─── Карточка ───────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); } .card--pad { padding: 16px; display: flex; flex-direction: column; gap: 12px; } .card--clip { overflow: hidden; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; } .card__foot { padding: 10px 16px; border-top: 1px solid var(--line); } /* Заголовок карточки и описание под ним — самая частая пара в настройках и разборах. Держится классом, а не инлайном: правило дизайн-системы — «только классы из этого файла», и одна правка отступа тут не должна означать обход четырнадцати мест в шаблонах. */ .card__intro { display: flex; flex-direction: column; gap: 3px; } .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--tx-3); } .card__title { font-size: 13.5px; font-weight: 700; } .body-text { font-size: 12.5px; line-height: 1.55; color: var(--tx-2); text-wrap: pretty; } /* ─── KPI-плитка ─────────────────────────────────────────── */ .kpi { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh); padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; } .kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .kpi__val { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .kpi__val--money { font-size: 23px; white-space: nowrap; } .kpi__cur { font-size: 16px; font-weight: 600; margin-left: 2px; } /* ₽ не отрывается */ .kpi__note { font-size: 11.5px; font-weight: 600; color: var(--tx-3); } .kpi--flag { outline: 1px solid var(--warn); outline-offset: -1px; } /* ─── Таблица ────────────────────────────────────────────── */ .tw { overflow-x: auto; } /* ОБЯЗАТЕЛЬНАЯ обёртка: card--clip режет содержимое */ table { border-collapse: collapse; width: 100%; } thead tr { background: var(--surface-2); } th { text-align: left; padding: 8px 10px; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); } th:first-child, td:first-child { padding-left: 16px; } th:last-child, td:last-child { padding-right: 16px; } th.r, td.r { text-align: right; } th.c, td.c { text-align: center; } tbody tr { border-top: 1px solid var(--line); } tbody tr:hover { background: var(--surface-2); } td { padding: var(--rp) 10px; } td.name { font-weight: 600; } td.clip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Подсветка строк — по ценности упущенного обращения */ tr.row-critical { background: var(--bad-soft); } tr.row-critical:hover { background: var(--bad-soft); } tr.row-attention { background: var(--warn-soft); } tr.row-attention:hover { background: var(--warn-soft); } tr.row-off { opacity: .55; } /* ─── Бейджи и статусы ───────────────────────────────────── */ .tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 7px; white-space: nowrap; background: var(--surface-2); color: var(--tx-2); } .tag--ac { background: var(--ac-soft); color: var(--ac-fg); } /* На подсвеченной строке подложка бейджа переключается на белый лист */ tr.row-critical .tag, tr.row-attention .tag, tr.row-critical .score, tr.row-attention .score { background: var(--surface); } .score { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; border-radius: 5px; padding: 2px 7px; } .score--ok { color: var(--ok); background: var(--ok-soft); } .score--warn { color: var(--warn); background: var(--warn-soft); } .score--bad { color: var(--bad); background: var(--bad-soft); } .dot { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--tx-2); white-space: nowrap; } .dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--tx-3); flex: none; } .dot--ok::before { background: var(--ok); } .dot--warn::before { background: var(--warn); } .dot--bad::before { background: var(--bad); } .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; height: 26px; padding: 0 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .pill--ok { background: var(--ok-soft); color: var(--ok); } .pill--warn { background: var(--warn-soft); color: var(--warn); } .pill--bad { background: var(--bad-soft); color: var(--bad); } .pill--ac { background: var(--ac-soft); color: var(--ac-fg); } .value { font-size: 12px; font-weight: 700; white-space: nowrap; } .value--vhigh { color: var(--vio); } .value--high { color: var(--warn); } .value--mid { color: var(--tx-2); } .value--low { color: var(--tx-3); font-weight: 600; } .reason { color: var(--bad); font-weight: 600; white-space: nowrap; } .money-lost { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--bad); white-space: nowrap; } /* ─── Бары и графики ────────────────────────────────────── */ .bar { display: block; height: 7px; border-radius: 4px; background: var(--surface-2); } .bar--tall { height: 8px; } .bar--funnel { height: 26px; border-radius: 7px; } .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ac); } .bar--ok > span { background: var(--ok); } .bar--warn > span { background: var(--warn); } .bar--bad > span { background: var(--bad); } .bar-row { display: flex; align-items: center; gap: 10px; } .bar-row__label { width: 74px; flex: none; font-size: 12.5px; font-weight: 600; } /* Причины отказов — фразы, а не слова: на 74 px «Ошибка менеджера» ломается на две строки. Модификатор на карточке, а не на каждой строке: обёртка вокруг каждой .bar-row была бы инлайновым span вокруг флекса. */ .card--reasons .bar-row__label { width: 130px; } .bar-row__val { width: 34px; flex: none; text-align: right; font-family: var(--mono); font-size: 12.5px; font-weight: 700; } .bar-row .bar { flex: 1; min-width: 56px; } .chart { width: 100%; display: block; } .chart .grid-line { stroke: var(--line); stroke-width: 1; } .chart .line { fill: none; stroke: var(--ac); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .chart .line--dash { stroke: var(--tx-3); stroke-width: 1.8; stroke-dasharray: 4 4; fill: none; } .chart .area { fill: var(--ac); opacity: .10; } .chart .label { fill: var(--tx-3); font-size: 11px; font-family: var(--mono); } .legend { display: flex; align-items: center; gap: 14px; } .legend span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--tx-2); } .legend i { width: 16px; height: 3px; border-radius: 2px; background: var(--ac); } .legend i.alt { background: var(--tx-3); } /* ─── Кнопки ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: var(--r-ctl); height: 32px; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--surface-2); color: var(--tx-2); } .btn:hover { color: var(--tx); } .btn--primary { background: var(--ac); color: #fff; } .btn--primary:hover { background: var(--ac-2); color: #fff; } .btn--ghost { background: transparent; color: var(--ac-fg); box-shadow: inset 0 0 0 1px var(--ac-fg); } .btn--ghost:hover { background: var(--ac-soft); color: var(--ac-fg); } .btn--danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); } .btn--danger:hover { background: var(--bad-soft); color: var(--bad); } .btn--card { background: var(--surface); box-shadow: var(--sh); } .btn--lg { height: 34px; padding: 0 15px; font-size: 12.5px; } .btn--play { width: 26px; height: 26px; padding: 0; border-radius: 7px; background: var(--ac-soft); color: var(--ac-fg); } .btn:disabled { background: var(--surface-2); color: var(--tx-3); cursor: not-allowed; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } .seg { display: flex; background: var(--surface-2); border-radius: var(--r-ctl); padding: 2px; gap: 2px; } .seg button { border: 0; background: transparent; color: var(--tx-2); font: inherit; font-size: 12px; font-weight: 600; height: 28px; padding: 0 11px; border-radius: 6px; cursor: pointer; } .seg button:hover { color: var(--tx); } .seg button.is-active { background: var(--surface); color: var(--tx); font-weight: 700; box-shadow: var(--sh); } .tabs { display: flex; gap: 6px; flex-wrap: wrap; } .tabs a { display: flex; align-items: center; border-radius: 9px; height: 34px; padding: 0 13px; font-size: 12.5px; font-weight: 700; text-decoration: none; background: var(--surface); color: var(--tx-2); box-shadow: var(--sh); } .tabs a:hover { color: var(--tx); text-decoration: none; } .tabs a.is-active { background: var(--ac); color: #fff; } /* ─── Формы ──────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 4px; } .field > span { font-size: 11.5px; font-weight: 600; color: var(--tx-2); } input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select, textarea { border: 0; background: var(--surface-2); border-radius: var(--r-ctl); height: 34px; padding: 0 11px; font: inherit; font-size: 12.5px; color: var(--tx); outline: none; } input.num, select.num { font-family: var(--mono); font-size: 13px; font-weight: 600; } select { cursor: pointer; padding: 0 9px; } textarea { height: auto; padding: 9px 11px; } input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--ac); } input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ac); cursor: pointer; } .check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; color: var(--tx-2); } .suffix { display: flex; align-items: center; background: var(--surface-2); border-radius: var(--r-ctl); height: 34px; padding: 0 11px; gap: 8px; } .suffix input { background: transparent; height: auto; padding: 0; flex: 1; min-width: 0; } .suffix span { font-size: 13px; font-weight: 600; color: var(--tx-3); } .switch { display: flex; align-items: center; gap: 10px; cursor: pointer; } .switch__track { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .15s; } .switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; } .switch input { display: none; } .switch input:checked + .switch__track { background: var(--ac); } .switch input:checked + .switch__track::after { left: 16px; } .switch__label { font-size: 12.5px; font-weight: 600; color: var(--tx-2); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: baseline; } .kv dt { font-size: 12.5px; color: var(--tx-3); margin: 0; } .kv dd { font-size: 12.5px; font-weight: 600; margin: 0; } /* ─── Сообщения и списки ────────────────────────────────── */ .note { border-radius: var(--r-card); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; } .note--warn { background: var(--warn-soft); } .note--bad { background: var(--bad-soft); } .note--ok { background: var(--ok-soft); } .note svg { flex: none; margin-top: 1px; } .note__title { font-size: 13.5px; font-weight: 700; } .note--warn .note__title { color: var(--warn); } .note--bad .note__title { color: var(--bad); } /* Дописано при переносе: акцентный вариант (демо-доступ) в макете набран инлайном, а действие справа от текста есть у всех баннеров лицензии. */ .note--ac { background: var(--ac-soft); } .note--ac .note__title { color: var(--ac-fg); } .note__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .note__action { flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .list { display: flex; flex-direction: column; gap: 8px; } .list__item { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; font-weight: 600; } .list__item svg { flex: none; margin-top: 1px; } .list__item--miss { color: var(--bad); } .bullets { display: flex; flex-direction: column; gap: 11px; } .bullets li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--tx-2); } .bullets { list-style: none; margin: 0; padding: 0; } .bullets li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ac-fg); flex: none; margin-top: 6px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 4px 9px; background: var(--warn-soft); color: var(--warn); } .quote { display: block; border-left: 2px solid var(--line); padding: 2px 0 2px 11px; font-size: 12.5px; line-height: 1.5; color: var(--tx-2); font-style: italic; } .quote--bad { border-left-color: var(--bad); } .transcript { background: var(--surface-2); border-radius: 9px; padding: 13px 14px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .transcript p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--tx-2); text-wrap: pretty; } /* ─── Плеер ──────────────────────────────────────────────── */ .player { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; } .player__play { width: 38px; height: 38px; flex: none; border: 0; border-radius: 11px; background: var(--ac); color: #fff; display: grid; place-items: center; cursor: pointer; } .player__play:hover { background: var(--ac-2); } .wave { display: flex; align-items: flex-end; gap: 2px; height: 30px; flex: 1; min-width: 180px; } .wave i { flex: 1; background: var(--line); border-radius: 1px; } .wave i.done { background: var(--ac); opacity: .85; } .player__time { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--tx-2); white-space: nowrap; } /* ─── Карточка звонка: шапка, полоса метрик, состояние ───── Дописано при переносе экрана: в макете эти блоки набраны инлайном, отдельных классов дизайн-система не давала. Значения — как в макете. */ .callhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .callhead__id { font-family: var(--mono); font-size: 18px; font-weight: 700; } .callhead__name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .rule { display: block; height: 1px; background: var(--line); } /* Состояние обработки — та же логика, что у .dot, но плашкой в шапке карточки */ .state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-radius: var(--r-ctl); height: 32px; padding: 0 11px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--tx-2); } .state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tx-3); flex: none; } .state--ok { background: var(--ok-soft); color: var(--ok); } .state--warn { background: var(--warn-soft); color: var(--warn); } .state--bad { background: var(--bad-soft); color: var(--bad); } .state--ok::before { background: var(--ok); } .state--warn::before { background: var(--warn); } .state--bad::before { background: var(--bad); } .meta { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; } .meta__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .meta__label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-3); } .meta__val { display: flex; align-items: baseline; gap: 5px; } .meta__num { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.03em; } .meta__unit { font-family: var(--mono); font-size: 12px; color: var(--tx-3); } .meta__line { font-size: 12.5px; font-weight: 700; white-space: nowrap; } @media (max-width: 1200px) { .meta { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Правка имени прямо в строке таблицы: поле выглядит текстом, пока в него не целятся. Иначе колонка из десяти полей ввода читается как форма, а не как список людей. */ .inline-edit { background: transparent; height: 28px; padding: 0 7px; max-width: 180px; font-size: 13px; font-weight: 600; color: var(--tx); } .inline-edit:hover { background: var(--surface-2); } .inline-edit:focus { background: var(--surface-2); } /* Длинный пункт чек-листа в узкой колонке — обрезаем, полный текст в подсказке */ .chip--clip { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Смена сотрудника прямо в шапке */ .picker { display: flex; align-items: center; gap: 7px; background: var(--surface-2); border-radius: var(--r-ctl); height: 32px; padding: 0 4px 0 10px; } .picker > span { font-size: 12px; font-weight: 600; color: var(--tx-3); white-space: nowrap; } .picker select { height: 26px; border-radius: 6px; background: var(--surface); box-shadow: var(--sh); font-size: 12px; font-weight: 700; } /* ─── Вход ───────────────────────────────────────────────── */ .login { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login__box { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 18px; } .login__head { display: flex; flex-direction: column; align-items: center; gap: 6px; } .login__head .logotype { font-size: 30px; } .login__card { background: var(--surface); border-radius: 14px; box-shadow: var(--sh); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .login__card input { height: 38px; border-radius: 9px; font-size: 13.5px; } .login__card .btn { height: 40px; border-radius: 9px; font-size: 13.5px; margin-top: 2px; } /* ─── Модальные окна () ──────────────────────────── */ dialog { border: 0; padding: 0; color: var(--tx); background: var(--surface); border-radius: 16px; box-shadow: 0 24px 70px rgba(18,21,40,.28); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 64px); font-family: var(--sans); font-size: 13px; } dialog::backdrop { background: rgba(10,11,16,.45); } [data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,.6); } dialog[open] { display: flex; flex-direction: column; } .dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 0; } .dlg__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .dlg__close { width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--tx-2); cursor: pointer; display: grid; place-items: center; } .dlg__close:hover { color: var(--tx); } .dlg__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .dlg__foot { padding: 0 18px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .dlg__foot .btn { min-width: 96px; } /* Окно «Подключение получателя»: QR по центру, ссылка выделяется целиком */ .dlg__qr { align-self: center; width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 10px; } .dlg__link { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border-radius: var(--r-ctl); padding: 10px 12px; word-break: break-all; user-select: all; } /* ─── Пустые состояния ──────────────────────────────────── */ /* Занимают место таблицы или списка. Всегда: иконка, заголовок, объяснение откуда появятся данные, и одно действие. Без действия — только «всё хорошо». */ .empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .empty--sm { padding: 32px 24px; gap: 11px; } .empty__icon { width: 52px; height: 52px; border-radius: 15px; background: var(--surface-2); color: var(--tx-3); display: grid; place-items: center; } .empty--sm .empty__icon { width: 46px; height: 46px; border-radius: 14px; } .empty__icon--ok { background: var(--ok-soft); color: var(--ok); } /* Единственное «пусто», где виноват не пустой список, а негодная ссылка: экран демо-доступа. */ .empty__icon--bad { background: var(--bad-soft); color: var(--bad); } .empty__text { display: flex; flex-direction: column; gap: 5px; max-width: 420px; } .empty__title { font-size: 15px; font-weight: 700; } .empty--sm .empty__title { font-size: 14.5px; } .empty__body { font-size: 13px; line-height: 1.55; color: var(--tx-2); text-wrap: pretty; } .empty .btn-row { justify-content: center; margin-top: 2px; } /* ─── Прогресс обработки ────────────────────────────────── */ .progress { height: 7px; border-radius: 4px; background: var(--surface-2); display: block; overflow: hidden; max-width: 420px; } .progress > span { display: block; height: 100%; border-radius: 4px; background: var(--tx-3); } .progress--warn > span { background: var(--warn); } /* ─── Технические детали (свёрнутый блок) ───────────────── */ /*
в самом низу карточки звонка. */ .tech { } .tech > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; } .tech > summary::-webkit-details-marker { display: none; } .tech__label { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--tx-2); } .tech__chev { transition: transform .15s ease; } .tech[open] .tech__chev { transform: rotate(90deg); } .tech__models { font-family: var(--mono); font-size: 11.5px; color: var(--tx-3); } .tech__grid { border-top: 1px solid var(--line); padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .tech__col { display: flex; flex-direction: column; gap: 8px; } /* Строка «ключ — значение» с разлётом по краям: используется и в деталях проверки подключения. Отличается от .kv (та выравнивает две колонки). */ .row-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; } .row-kv > :first-child { color: var(--tx-3); } .row-kv > :last-child { font-weight: 600; text-align: right; } .raw { display: block; background: var(--surface); border-radius: var(--r-ctl); padding: 9px 11px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--tx-2); word-break: break-all; } /* ─── Пресеты (радио-карточки) ──────────────────────────── */ /* Состав сообщения в правилах получателя: четыре готовых набора вместо россыпи флажков. Флажки открываются только на «своём сочетании». */ .preset { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; background: var(--surface-2); border-radius: 10px; padding: 11px 12px; } .preset input { width: 15px; height: 15px; accent-color: var(--ac); cursor: pointer; margin-top: 2px; flex: none; } .preset__title { font-size: 13px; font-weight: 700; } .preset__hint { font-size: 11.5px; color: var(--tx-3); } .preset:has(input:checked) { background: var(--ac-soft); } .preset:has(input:checked) .preset__hint { color: var(--tx-2); } /* ─── Демо-режим ────────────────────────────────────────── */ .demobar { background: var(--ac); color: #fff; padding: 11px 16px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .demobar__tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.18); border-radius: 7px; height: 26px; padding: 0 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .demobar__text { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 200px; } .demobar a { color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: underline; } /* Зона перетаскивания файлов в окне загрузки звонка */ .dropzone { border: 1.5px dashed var(--line); border-radius: 12px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; cursor: pointer; } .dropzone:hover { border-color: var(--ac); background: var(--ac-soft); } .dropzone__hint { font-size: 12px; color: var(--tx-3); } @media (max-width: 720px) { dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto auto 0; border-radius: 18px 18px 0 0; } .dlg__foot { flex-direction: column-reverse; } .dlg__foot .btn { width: 100%; } } /* ─── Телефон ──────────────────────────────────────────────── Один порог: 720 px. Ниже него рельс уходит в нижние вкладки, таблицы заменяются карточками, шапка сокращается до логотипа и иконок. Таблицу из 14 колонок нельзя «сложить» силами CSS, поэтому список рендерится дважды из одного цикла (макросы call_row и call_card), а CSS показывает нужный вариант. Дублируется разметка, не данные. */ .only-narrow { display: none; } .tabbar { display: none; } .tabbar__btn { border: 0; background: transparent; color: var(--tx-3); border-radius: 12px; height: 50px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; text-decoration: none; } .tabbar__btn span { font-size: 10.5px; font-weight: 700; } .tabbar__btn.is-active { background: var(--ac-soft); color: var(--ac-fg); } /* Список-карточки вместо таблицы */ .cards { display: flex; flex-direction: column; gap: 9px; } /* .cards задаёт собственный display, и одного класса .only-narrow ему не хватает в обе стороны: на широком экране .cards стоит в файле ниже и перебивает `display:none`, а в медиазапросе `display:revert` откатывает flex до block вместе с gap между карточками. Разводится специфичностью — обе строки нужны. Найдено при переносе списка звонков; сказать дизайнеру, чтобы вернулось в исходник дизайн-системы. */ .cards.only-narrow { display: none; } @media (max-width: 720px) { .cards.only-narrow { display: flex; } } .ccard { display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; background: var(--surface-2); border-radius: 13px; padding: 13px 14px; } .ccard--critical { background: var(--bad-soft); } .ccard--attention { background: var(--warn-soft); } .ccard__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--ac-soft); color: var(--ac-fg); display: grid; place-items: center; } .ccard--critical .ccard__icon, .ccard--attention .ccard__icon { background: var(--surface); } .ccard__body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; } .ccard__top { display: flex; align-items: center; gap: 8px; } .ccard__name { font-size: 13.5px; font-weight: 700; color: var(--tx); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ccard__score { flex: none; font-size: 13px; padding: 3px 8px; border-radius: 6px; } .ccard--critical .ccard__score, .ccard--attention .ccard__score { background: var(--surface); } .ccard__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; } .ccard__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-3); flex: none; } @media (max-width: 720px) { .only-wide { display: none !important; } .only-narrow { display: revert; } .rail { display: none; } /* Шапка: остаются логотип, поиск-иконка и аватар компании */ .topbar { gap: 10px; padding: 0 16px; } .topbar .search, .topbar .seg, .topbar__div, .topbar__title, .org__name { display: none; } .topbar .icon-btn { width: 44px; height: 44px; } .page { padding: 0 16px 16px; gap: 12px; } .page--narrow { max-width: none; } /* Одна колонка везде, KPI — по две плитки в ряд */ .grid--2, .grid--detail, .grid--5, .grid--4 { grid-template-columns: 1fr; } .grid--kpi { grid-template-columns: 1fr 1fr; gap: 10px; } .meta { grid-template-columns: 1fr 1fr; gap: 12px; } /* Карточка без лишней рамки: на узком экране она только режет ширину */ .card { background: transparent; box-shadow: none; border-radius: 0; } .card--pad { padding: 0; gap: 12px; } .card__head, .card__foot { padding: 0; border: 0; } /* Крупнее цифры и текст — читать с руки */ .kpi { background: var(--surface-2); border-radius: 13px; } .kpi__val { font-size: 24px; } .kpi__val--money { font-size: 22px; } .body-text, .bullets li, .quote, .transcript p { font-size: 13.5px; } .eyebrow { font-size: 12px; } /* Пальцем: минимум 44 px по высоте */ .btn, .btn--lg { height: 44px; padding: 0 15px; font-size: 13.5px; border-radius: 12px; } .btn--play { width: 38px; height: 38px; border-radius: 11px; } input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select { height: 48px; border-radius: 11px; font-size: 14px; padding: 0 14px; } input[type=checkbox] { width: 20px; height: 20px; } .check { min-height: 44px; } .switch__track { width: 44px; height: 26px; } .switch__track::after { width: 20px; height: 20px; } .switch input:checked + .switch__track::after { left: 21px; } /* Вкладки настроек — горизонтальная лента */ .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } .tabs a { flex: none; height: 36px; } /* Нижние вкладки поверх контента */ .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; position: sticky; bottom: 0; z-index: 20; padding: 6px 8px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); } .foot { display: none; } } @media print { /* .tabbar дописан при уборке: выше 720 px он и так скрыт, но печать с телефона — ровно тот случай, когда порог не спасает. */ .rail, .topbar, .foot, .btn, .seg, .tabs, .tabbar { display: none !important; } .card { box-shadow: none; border: 1px solid var(--line); } /* Иначе на бумагу уходит первый экран таблицы, а остальные колонки просто пропадают: на печати прокручивать нечем. */ .tw { overflow: visible !important; } .only-narrow { display: none !important; } }