/* Оформление сервиса поддержки. Отдельным файлом, а не инлайном: страницы с ПДн отдаются с no-store, и встроенные стили переезжали бы к оператору при каждом открытии карточки. Дизайн снят с кабинета Fleet (fleet.yandex.kz, раздел «Исполнители»): оператор весь день держит кабинет соседним окном, и две консоли с разной раскладкой он читает как две разные профессии. Отсюда тёплые нейтрали без единого чистого серого, плитки с рамкой в 10 % вместо теней, чипы вместо подчёркиваний и заголовки обычным регистром. Жёлтый логотипа (#ffce00) от жёлтого Яндекса (#fce000) на глаз неотличим, поэтому акцент остался наш — менять было нечего. */ /* Сама палитра темы приходит из settings.UNFOLD_SUPPORT (см. support/sites.py) — подменять её здесь нечем. Остаётся одно: текст на кнопке тема задаёт белым, а на золотом фоне читается тёмный. Правила темы приходят отдельным файлом после этого, поэтому нужен !important. */ .bg-primary-600, .bg-primary-500 { color: #1a1a1a !important; } .sup-wrap { /* Нейтрали тёплые: и фон, и текст уведены в жёлтую сторону. Чистый серый рядом с ними читается грязным, поэтому его здесь нет ни одного. */ --brand: #ffce00; --brand-ink: #21201f; --ink: #21201f; --ink-2: rgba(33, 32, 31, .72); --muted: rgba(33, 32, 31, .5); --line: rgba(92, 90, 87, .16); /* Волосяная линия: рамки плиток и разделители строк. Отдельно от --line — у Fleet это два разных веса, и один на оба делает таблицы полосатыми. */ --hair: rgba(92, 90, 87, .1); /* Полотно под панелями. Белого фона у страницы больше нет: белым в этой палитре отмечены сами панели с данными. */ --ground: #f5f4f2; --bg: #ffffff; --surface: rgba(92, 90, 87, .07); /* Статусы: заливка в 11 %, текст затемнён до читаемого на ней */ --ok-bg: rgba(2, 145, 84, .11); --ok-fg: #016b3e; --warn-bg: rgba(252, 144, 0, .13); --warn-fg: #8f5200; --bad-bg: rgba(252, 82, 48, .11); --bad-fg: #b62b0b; --flat-bg: rgba(92, 90, 87, .1); --flat-fg: rgba(33, 32, 31, .72); /* TT Commons — шрифт бренда. Файлов в статике нет: раздавать их нужна веб-лицензия, поэтому берём установленный в системе. У кого не стоит — увидит системный шрифт, метрики близкие, раскладка не поедет. */ font-family: "TT Commons", "TT Commons Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; color: var(--ink); } /* Тёмная тема уведена в ту же тёплую сторону: холодный тёмно-серый под жёлтым акцентом отдаёт синевой. Панель (--bg) светлее полотна, а не темнее: так она читается приподнятой, как белая панель в светлой. */ @media (prefers-color-scheme: dark) { .sup-wrap { --ink: #f1efeb; --ink-2: rgba(241, 239, 235, .72); --muted: rgba(241, 239, 235, .5); --line: rgba(255, 255, 255, .13); --hair: rgba(255, 255, 255, .08); --ground: #161513; --bg: #201e1c; --surface: rgba(255, 255, 255, .06); --ok-bg: rgba(2, 145, 84, .18); --ok-fg: #47c48c; --warn-bg: rgba(252, 144, 0, .16); --warn-fg: #ffb040; --bad-bg: rgba(252, 82, 48, .16); --bad-fg: #ff8a6b; --flat-bg: rgba(255, 255, 255, .08); --flat-fg: rgba(241, 239, 235, .72); } } :root[data-theme="dark"] .sup-wrap, html.dark .sup-wrap { --ink: #f1efeb; --ink-2: rgba(241, 239, 235, .72); --muted: rgba(241, 239, 235, .5); --line: rgba(255, 255, 255, .13); --hair: rgba(255, 255, 255, .08); --ground: #161513; --bg: #201e1c; --surface: rgba(255, 255, 255, .06); --ok-bg: rgba(2, 145, 84, .18); --ok-fg: #47c48c; --warn-bg: rgba(252, 144, 0, .16); --warn-fg: #ffb040; --bad-bg: rgba(252, 82, 48, .16); --bad-fg: #ff8a6b; --flat-bg: rgba(255, 255, 255, .08); --flat-fg: rgba(241, 239, 235, .72); } :root[data-theme="light"] .sup-wrap { --ink: #21201f; --ink-2: rgba(33, 32, 31, .72); --muted: rgba(33, 32, 31, .5); --line: rgba(92, 90, 87, .16); --hair: rgba(92, 90, 87, .1); --ground: #f5f4f2; --bg: #ffffff; --surface: rgba(92, 90, 87, .07); --ok-bg: rgba(2, 145, 84, .11); --ok-fg: #016b3e; --warn-bg: rgba(252, 144, 0, .13); --warn-fg: #8f5200; --bad-bg: rgba(252, 82, 48, .11); --bad-fg: #b62b0b; --flat-bg: rgba(92, 90, 87, .1); --flat-fg: rgba(33, 32, 31, .72); } /* ── Оболочка админки ───────────────────────────────────────────────── Шапку и сайдбар вокруг консоли рисует тема Unfold, и они белые. В Fleet наоборот: полотно тёплое, а белым отмечена панель с данными — иначе непонятно, где кончается навигация и начинается карточка. Литералами, а не переменными: те живут на .sup-wrap, а эти узлы — его родители, и var() до них не достаёт. Файл грузится только со страниц консоли (base_support.html), поэтому /admin/ и CRM правило не видят. Шапка своего id не имеет, поэтому берём её через внука: прямой ребёнок — контейнер, у того прямой ребёнок — #header-inner. Просто :has(#header-inner) зацепил бы заодно и #page со всей страницей. */ /* body и обёртка сайдбара — тоже тема: без них по краям остаются полосы холодного почти-белого, и тёплое полотно читается как грязное пятно. */ body, #page, #main { background: #f5f4f2; } #nav-sidebar, div:has(> #nav-sidebar) { background: #f5f4f2; } /* Полоса с логотипом и список разделов красятся темой поштучно — гасим их фон, а не перечисляем: тема правит свою разметку когда захочет. */ #nav-sidebar > div { background: transparent; } #nav-sidebar { border-right-color: rgba(92, 90, 87, .16); } div:has(> div > #header-inner) { background: #f5f4f2; border-bottom-color: rgba(92, 90, 87, .16); } /* Меню — рельс иконок, как в кабинете: оператор держит консоль рядом с кабинетом, и широкий столбец с подписями съедал у карточки полторы сотни пикселей на восемь слов, которые и так помнят наизусть. Подписи не выброшены, а обрезаны: по наведению рельс разъезжается поверх страницы и показывает их целиком. Контент при этом не дёргается — ширину держит обёртка, а разъезжается сам сайдбар, он fixed. */ /* Ширину держат три вложенных узла темы, и все три несут её классом с !important — перебить можно только тем же. Внешний оставляет место в потоке, внутренний рисует сам рельс. */ div:has(> div > #nav-sidebar), div:has(> #nav-sidebar) { width: 72px !important; } #nav-sidebar { width: 72px !important; overflow: hidden; white-space: nowrap; transition: width .14s ease; } #nav-sidebar:hover, #nav-sidebar:focus-within { width: 264px !important; } /* Иконка не должна ездить, когда рельс разъезжается: её место фиксировано, подпись выезжает следом. */ #nav-sidebar .material-symbols-outlined { flex: none; } /* Подписи на узком рельсе читаются обрывками слов («Во», «Пр», «Об») — гасим их целиком, а на разъехавшемся возвращаем. Прозрачностью, а не display: иначе при разъезде подписи появлялись бы рывком, уже после анимации. */ #nav-sidebar h2, #nav-sidebar a > span:not(.material-symbols-outlined), #nav-sidebar a:not([class*="bg-primary"]):not([class*="rounded"]) { opacity: 0; transition: opacity .1s; } #nav-sidebar:hover h2, #nav-sidebar:focus-within h2, #nav-sidebar:hover a > span:not(.material-symbols-outlined), #nav-sidebar:focus-within a > span:not(.material-symbols-outlined), #nav-sidebar:hover a, #nav-sidebar:focus-within a { opacity: 1; } /* Иконка живёт внутри погашенной ссылки — возвращаем ей видимость отдельно. */ #nav-sidebar a .material-symbols-outlined { opacity: 1; } /* Панель с данными. Отступы внутри неё уже задаёт .sup-wrap. */ #content { background: #ffffff; border-radius: 20px; } /* Нижняя панель списка (счётчик, страницы, «Сохранить») у Unfold полупрозрачная и с размытием: под подписью «56 Журнал просмотров» просвечивает недокрученная строка, и таблица читается как сломанная — в тёмной теме особенно, там размытие почти не видно. Красим её фоном родителя: он и есть то, на чём панель лежит, в обеих темах. Литералов тут нет намеренно, но и переменных тоже: `inherit` берёт цвет #main, который выше в этом же файле мы и задаём. Селектор держится на служебных классах Unfold — переименуют, вернётся прозрачность; это косметика, а не поломка, поэтому без !important. */ #main [class*="lg:sticky"][class*="bottom-0"] { background-color: inherit; backdrop-filter: none; } @media (prefers-color-scheme: dark) { body, #page, #main, #nav-sidebar, div:has(> #nav-sidebar) { background: #161513; } #nav-sidebar { border-right-color: rgba(255, 255, 255, .13); } div:has(> div > #header-inner) { background: #161513; border-bottom-color: rgba(255, 255, 255, .13); } #content { background: #201e1c; } } :root[data-theme="dark"] body, :root[data-theme="dark"] #page, :root[data-theme="dark"] #main, :root[data-theme="dark"] #nav-sidebar, :root[data-theme="dark"] div:has(> #nav-sidebar), html.dark body, html.dark #page, html.dark #main, html.dark #nav-sidebar, html.dark div:has(> #nav-sidebar) { background: #161513; } :root[data-theme="dark"] #nav-sidebar, html.dark #nav-sidebar { border-right-color: rgba(255, 255, 255, .13); } :root[data-theme="dark"] div:has(> div > #header-inner), html.dark div:has(> div > #header-inner) { background: #161513; border-bottom-color: rgba(255, 255, 255, .13); } :root[data-theme="dark"] #content, html.dark #content { background: #201e1c; } :root[data-theme="light"] body, :root[data-theme="light"] #page, :root[data-theme="light"] #main, :root[data-theme="light"] #nav-sidebar, :root[data-theme="light"] div:has(> #nav-sidebar) { background: #f5f4f2; } :root[data-theme="light"] div:has(> div > #header-inner) { background: #f5f4f2; } :root[data-theme="light"] #content { background: #ffffff; } #sup-wm { position: fixed; inset: -20%; z-index: 2147483000; pointer-events: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 110px 70px; transform: rotate(-24deg); opacity: .045; overflow: hidden; } #sup-wm span { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #21201f; white-space: nowrap; } @media (prefers-color-scheme: dark) { #sup-wm span { color: #f1efeb; } } :root[data-theme="dark"] #sup-wm span, html.dark #sup-wm span { color: #f1efeb; } :root[data-theme="light"] #sup-wm span { color: #21201f; } /* Печать и «Сохранить как PDF» уносят данные так же, как скриншот, поэтому защищённое содержимое на бумагу не попадает. Справочник (в нём ПДн нет) печатается как обычно. Запрета на выделение здесь больше нет: адрес заказа оператор переносит в карты и в чат руками, и user-select: none стоил ему этой работы, а вынос всё равно шёл фотографией экрана. Осталось то, что уносит страницу целиком, — печать; копирование отмечается в журнале (copy.js). */ @media print { .sup-protected { display: none !important; } } /* ── Каркас ─────────────────────────────────────────────────────────── Рабочий экран, а не лендинг: оператор говорит по телефону и ему нужно видеть много сразу. Отсюда плотная сетка, линии вместо теней и цифры табличным начертанием, чтобы суммы выравнивались по разрядам. */ .sup-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 24px 64px; } /* Карточке нужно шире формы поиска, но не во весь экран: данные в ней идут одной колонкой, как в кабинете, и растянутая через монитор строка таблицы теряет связь между подписью и значением. Остальные страницы остаются узкими — сплошной текст справочника шире читать хуже. Класс ставит сама страница. Через :has(.sup-driver) ширина выводилась бы из содержимого, и форма поиска прыгала бы в ширину в тот момент, когда водитель нашёлся. */ .sup-wrap-wide { max-width: 1400px; } .sup-wrap h1 { margin: 0 0 18px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .sup-field { display: flex; gap: 8px; align-items: stretch; max-width: 560px; } /* Textarea и select — те же поля ввода: отдельная отделка для них разошлась бы с input на первой же правке палитры. */ .sup-field input, .sup-field textarea, .sup-field select { flex: 1; padding: 10px 13px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); } .sup-field textarea { resize: vertical; } .sup-field input:focus, .sup-field textarea:focus, .sup-field select:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); } /* Главная кнопка жёлтая, а не чёрная: в кабинете жёлтым отмечено ровно одно действие на экран, и у нас это «найти». */ .sup-field button { padding: 10px 20px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; border-radius: 10px; background: var(--brand); color: var(--brand-ink); } .sup-field button:hover { filter: brightness(.94); } .sup-hint { margin: 7px 1px 0; font-size: 12.5px; color: var(--muted); } .sup-note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; } /* Статус — чип с заливкой в 11 %, как в кабинете: подчёркивание отмечало слово, но в ряду из шести признаков они сливались в подчёркнутую строку. */ .sup-badge { display: inline-block; font-size: 11px; font-weight: 500; line-height: 13px; white-space: nowrap; padding: 4px 6px; border-radius: 4px; background: var(--flat-bg); color: var(--flat-fg); } .sup-b-green { background: var(--ok-bg); color: var(--ok-fg); } .sup-b-red { background: var(--bad-bg); color: var(--bad-fg); } .sup-b-amber { background: var(--warn-bg); color: var(--warn-fg); } .sup-b-gray { background: var(--flat-bg); color: var(--muted); } /* Баннер-подсказка: заливка и скругление, как у сообщений в кабинете. Левая полоса на белой панели читалась обрывком таблицы. */ .sup-panel { margin: 0 0 16px; padding: 12px 14px; font-size: 14px; background: var(--flat-bg); border-radius: 12px; color: var(--ink-2); } .sup-panel-bad { background: var(--bad-bg); color: var(--bad-fg); } .sup-panel-ok { background: var(--ok-bg); color: var(--ok-fg); } .sup-panel-title { font-weight: 600; margin-bottom: 4px; color: var(--ink); } .sup-panel-bad .sup-panel-title { color: var(--bad-fg); } .sup-panel-ok .sup-panel-title { color: var(--ok-fg); } .sup-article { padding: 14px 0 2px; border-top: 1px solid var(--line); } .sup-article:first-of-type { border-top: 0; padding-top: 4px; } .sup-article h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); } .sup-article h3 { margin: 12px 0 5px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sup-article ul { margin: 0; padding-left: 16px; } .sup-article li { margin: 3px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } /* ── Вкладки профилей ──────────────────────────────────────────────── */ /* У человека бывает до десятка профилей (мультипарк, переход в СМЗ). Подряд они не читаются: оператор во время разговора листает экран, чтобы понять, в каком парке смотрит. Вкладки — обычные ссылки: карточка собирается только для открытой, а без JS они работают тем более. */ /* Пилюли, как фильтры над списком исполнителей: рамка у всех, заливка — у открытой. Рамка-коробка вокруг всего ряда ушла — на белой панели она обводила пустоту. */ .sup-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; } .sup-tab { display: grid; gap: 1px; padding: 7px 14px; cursor: pointer; text-decoration: none; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); transition: background .15s, border-color .15s; } /* Ховер только обводкой: заливка совпала бы с выбранной вкладкой, и оператор посреди разговора не отличал бы «навёл» от «смотрю». */ .sup-tab:hover { border-color: var(--line); } .sup-tab-park { font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .sup-tab-note { font-size: 12px; white-space: nowrap; } /* Карточка внутри вкладки уже отделена полосой вкладок — своя ей не нужна. */ .sup-tabbed .sup-tabpanel > .sup-driver { margin-top: 0; border-top: 0; } /* Подсветка открытой вкладки. Раньше связь «N-й radio — N-я вкладка» занимала двенадцать правил и упиралась в потолок в двенадцать профилей; со ссылками её ставит сервер, и потолка больше нет. Заливка `surface`, а не `bg`: в тёмной теме surface светлее фона, и вкладка читается приподнятой, а не вдавленной. */ .sup-tab-on { background: var(--flat-bg); border-color: transparent; } .sup-tab-on .sup-tab-park { color: var(--ink); } /* Подложка карты под треком. Тайлы лежат абсолютно, координаты считает сервер — здесь только рамка и тёмный вид. Тёмная карта делается фильтром, а не платным стилем: готовые тёмные подложки для коммерческого продукта требуют лицензии или ключа, а стандартный слой OSM бесплатен и светлый. invert+hue-rotate — обычный приём: белое становится тёмным, а цвета возвращаются на место. Насыщенность приглушена нарочно, карта здесь фон: жёлтая и зелёная линии трека обязаны читаться поверх неё, а не соревноваться с зеленью парков. */ .sup-map-tiles { position: absolute; inset: 0; overflow: hidden; filter: invert(1) hue-rotate(180deg) saturate(.45) brightness(.82) contrast(1.08); } .sup-map-tiles img { position: absolute; display: block; } /* Подпись источника обязательна по лицензии, поэтому она не может быть украшением: своя, а не через filter родителя, иначе инверсия сделала бы её нечитаемой. */ .sup-map-credit { position: absolute; right: 6px; bottom: 4px; z-index: 2; font-size: 10px; color: var(--muted); opacity: .8; background: var(--bg); padding: 0 4px; border-radius: 3px; } /* ── Карточка водителя: сводка, разделы, панель действий ────────────── Раскладка повторяет страницу исполнителя в кабинете: под именем — полоса сводки, под ней строка тревог, дальше разделы горизонтальными вкладками и закреплённая панель действий внизу. Вкладки — radio + CSS, без единой строки JS: карточка стоит дюжины запросов к Яндексу, и переключение раздела не должно ходить за ними заново. Все разделы уже на странице, показан один. */ /* Подзаголовок под именем: кем числится, на чём ездит. */ .sup-who-sub { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; } .sup-who-sub span:not(:first-child)::before { content: "· "; } /* Полоса сводки: ячейки через вертикальные линии, как в кабинете. Здесь только то, что называют в первой фразе разговора. */ .sup-summary { display: flex; flex-wrap: wrap; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); overflow: hidden; } .sup-sum { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px; min-width: 120px; flex: 1 1 auto; border-left: 1px solid var(--hair); } .sup-sum:first-child { border-left: 0; } .sup-sum-label { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .02em; } .sup-sum-value { font-size: 17px; line-height: 20px; font-variant-numeric: tabular-nums; } .sup-sum-value i { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 2px; } /* Разделы карточки. Переключатели лежат перед панелями и управляют ими соседским селектором — поэтому и те, и другие обязаны быть детьми одного узла (.sup-secs). */ .sup-secs { display: contents; } .sup-secs > input { position: absolute; opacity: 0; pointer-events: none; } /* Вкладки в одну строку с прокруткой, как в кабинете: перенесённые на вторую строку, они читаются как два разных ряда, и оператор ищет раздел глазами по всей площади. */ .sup-sectabs { display: flex; flex-wrap: nowrap; gap: 2px 18px; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: 2px; scrollbar-width: thin; } .sup-sectabs label { padding: 8px 2px 10px; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -3px; white-space: nowrap; } .sup-sectabs label:hover { color: var(--ink); } /* Счётчик у названия раздела: сколько там строк. Пустые разделы не прячем — «обращений нет» это ответ, а исчезнувшая вкладка читается как поломка. */ .sup-sectabs label b { font-weight: 500; color: var(--muted); } .sup-pane { display: none; } /* Таблица внутри раздела не тянется во всю ширину карточки: на 1400px между подписью и значением получалась ладонь пустоты, и строка переставала читаться как пара. Ширину задаёт содержимое, потолок — чтобы длинный адрес не распирал её обратно. */ .sup-pane .sup-rows { width: auto; min-width: 34rem; max-width: 68rem; } .sup-pane > .sup-sec:first-child > .sup-sec-title, .sup-pane > .sup-sec:first-child .sup-sec-title { border-top: 0; padding-top: 0; } #sec-details:checked ~ [data-pane="details"] { display: block; } #sec-details:checked ~ .sup-sectabs label[for="sec-details"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-money:checked ~ [data-pane="money"] { display: block; } #sec-money:checked ~ .sup-sectabs label[for="sec-money"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-income:checked ~ [data-pane="income"] { display: block; } #sec-income:checked ~ .sup-sectabs label[for="sec-income"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-orders:checked ~ [data-pane="orders"] { display: block; } #sec-orders:checked ~ .sup-sectabs label[for="sec-orders"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-goals:checked ~ [data-pane="goals"] { display: block; } #sec-goals:checked ~ .sup-sectabs label[for="sec-goals"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-balance:checked ~ [data-pane="balance"] { display: block; } #sec-balance:checked ~ .sup-sectabs label[for="sec-balance"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-car:checked ~ [data-pane="car"] { display: block; } #sec-car:checked ~ .sup-sectabs label[for="sec-car"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-fleet:checked ~ [data-pane="fleet"] { display: block; } #sec-fleet:checked ~ .sup-sectabs label[for="sec-fleet"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-photos:checked ~ [data-pane="photos"] { display: block; } #sec-photos:checked ~ .sup-sectabs label[for="sec-photos"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-docs:checked ~ [data-pane="docs"] { display: block; } #sec-docs:checked ~ .sup-sectabs label[for="sec-docs"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-tickets:checked ~ [data-pane="tickets"] { display: block; } #sec-tickets:checked ~ .sup-sectabs label[for="sec-tickets"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-changes:checked ~ [data-pane="changes"] { display: block; } #sec-changes:checked ~ .sup-sectabs label[for="sec-changes"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } #sec-script:checked ~ [data-pane="script"] { display: block; } #sec-script:checked ~ .sup-sectabs label[for="sec-script"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 500; } /* Панель действий внизу карточки, прилипшая к краю окна: в кабинете она там же, и уезжать вместе с прокруткой ей нельзя — за ней приходят в любой момент разговора. */ .sup-actions { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 0; margin-top: 8px; background: var(--bg); border-top: 1px solid var(--line); } /* Кнопки копирования здесь — обычные действия, а не приглушённые сноски у поля: в панели им прятаться не за чем. */ .sup-actions .sup-copy { margin-left: 0; opacity: 1; padding: 8px 14px; font-size: 13px; color: var(--ink-2); border-radius: 10px; } .sup-actions .sup-copy:hover { color: var(--ink); background: var(--flat-bg); } .sup-actions .sup-board-go { padding: 8px 14px; } /* ── Карточка водителя ─────────────────────────────────────────────── */ /* Раскладка карточки: закреплённая колонка «кто это» + поток данных. Плотно и линиями — оператор читает её во время разговора, а не любуется. */ .sup-driver { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } /* Шапка: имя и телефон строкой, под ними чипы, действия и факты сеткой. Закреплённой колонки больше нет — она уезжала вместе с прокруткой только на первых двух экранах, а на остальных висела пустой. */ .sup-who { display: flex; flex-direction: column; gap: 12px; } .sup-who-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } /* Кнопка копирования прижата к правому краю колонки, а не приклеена к тексту: ФИО в две строки — обычное дело («Ашимова Айжан Ауганқызы»), и приклеенная кнопка съезжала под имя случайным хвостом. У правого края она стоит на одном месте независимо от длины имени, и обе кнопки выстраиваются в колонку. */ .sup-who-name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); } .sup-who-phone { font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* Действия строкой под именем: копирование, заказы за день, обращение. */ .sup-who-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sup-who-actions .sup-copy { margin-left: 0; opacity: 1; padding: 7px 12px; font-size: 13px; color: var(--ink-2); } /* Подпись над значением, а не слева от него: в столбик подписи съедали треть ширины, а выровненные по левому краю пары читаются колонками сами. */ .sup-facts { margin: 0; display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .sup-facts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sup-facts dt { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .02em; } .sup-facts dd { margin: 0; font-size: 16px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } /* Адрес длиннее остальных фактов: своя ячейка на всю строку, иначе он один задаёт высоту всему ряду. */ .sup-fact-wide { grid-column: 1 / -1; } .sup-tags { display: flex; flex-wrap: wrap; gap: 4px; } .sup-tag { font-size: 11px; font-weight: 500; line-height: 13px; padding: 4px 6px; border-radius: 4px; background: var(--flat-bg); color: var(--flat-fg); } .sup-tag-warn { background: var(--warn-bg); color: var(--warn-fg); } .sup-tag-bad { background: var(--bad-bg); color: var(--bad-fg); } /* Обе колонки — такие же контейнеры потока, как и главная: без этого длинная строка таблицы распирает ячейку грида и ломает раскладку. */ .sup-main, .sup-col { min-width: 0; } /* Панель первого экрана: шесть цифр, которыми закрывается большинство вопросов, и вход на страницу заказов. Раньше они лежали по четырём секциям, и первый экран не отвечал целиком ни на один вопрос. Правило самодостаточное. Опершись на класс .sup-figures в разметке, панель молча теряла бы свои отступы: у равной специфичности побеждает тот, кто объявлен ниже в файле, а .sup-figures объявлен ниже. */ .sup-board { margin: 0 0 22px; } .sup-board-go { align-self: center; white-space: nowrap; font-size: 13px; font-weight: 500; padding: 8px 14px; background: transparent; color: var(--ink); } .sup-board-go:hover { border-color: var(--ink); } /* Две колонки: слева то, из-за чего звонят, справа состояние в Яндексе. История и скрипты идут ПОД ними во всю ширину — их читают подряд, а не сравнивают друг с другом, и в узкой колонке таблицы стали бы нечитаемыми. */ /* Одной колонкой, как в кабинете: секции идут сверху вниз в порядке частоты вопросов. Двумя колонками оператор читал их по диагонали и на «ограничений нет» смотрел не туда — этот ответ стоит дороже сэкономленной прокрутки. */ .sup-cols { display: flex; flex-direction: column; } .sup-col { min-width: 0; } .sup-sec { margin: 0 0 26px; } /* Заголовок обычным регистром и линией СВЕРХУ: капслок в 12px оператор читает медленнее, а верхняя линия отделяет секцию от предыдущей, а не заголовок от собственных данных. */ .sup-sec-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--ink); padding-top: 16px; border-top: 1px solid var(--line); } /* Раздел, который оператор может свернуть (details.sup-sec). Заголовок тот же, добавлены курсор и подпись «свернуть» у правого края: слева выстроены заголовки всех разделов, и маркер перед текстом ломал бы этот край. У свёрнутого раздела подпись видна всегда, у раскрытого — по наведению: свёрнутый раздел не должен выглядеть отсутствующим. Разделы с тревогой (sup-sec-alarm) не сворачиваются вовсе и остаются обычными section: «ограничений нет» — самый дорогой ответ оператора, и свернуть то, из-за чего его нельзя давать, нельзя. */ details.sup-sec > summary.sup-sec-title { cursor: pointer; list-style: none; display: flex; align-items: baseline; /* 4px — та же ширина, что был перенос строки между заголовком и сноской, пока они лежали в блочном h2. */ gap: 4px; } details.sup-sec > summary::-webkit-details-marker { display: none; } details.sup-sec > summary.sup-sec-title::after { content: "свернуть"; margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); opacity: 0; } details.sup-sec:not([open]) > summary.sup-sec-title::after { content: "развернуть"; } details.sup-sec > summary.sup-sec-title:hover::after, details.sup-sec > summary.sup-sec-title:focus-visible::after, details.sup-sec:not([open]) > summary.sup-sec-title::after { opacity: 1; } /* Красным только заголовок: линия во всю ширину читалась чертой поперёк карточки и делила её надвое сильнее, чем сама тревога того стоит. */ .sup-sec-alarm { color: var(--bad-fg); } .sup-sec-note { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); } .sup-sec-title .sup-sec-note::before { content: "· "; } .sup-cause { margin: 0 0 10px; padding-left: 11px; border-left: 2px solid var(--bad-fg); } .sup-cause-text { font-size: 14px; color: var(--ink); } /* Цифры — плитками с рамкой в 10 %, как показатели в кабинете. Тени нет нигде: глубину держат рамка и смена фона. */ /* Сеткой, а не растяжкой: две плитки, поделив ширину пополам, становятся полотнами в пол-экрана под числом из пяти знаков. Ячейка одна и та же независимо от того, сколько цифр Fleet отдал в этот раз. */ .sup-figures, .sup-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0 0 18px; } .sup-figure { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 12px 14px 13px; border: 1px solid var(--hair); border-radius: 16px; } .sup-figure-label { font-size: 13px; font-weight: 500; color: var(--muted); } .sup-figure-value { font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.12; } .sup-figure-value i { font-style: normal; font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 3px; } /* Цифра, до которой оператору обычно нет дела: гасим её, а не плитку — пустая рамка в ряду читается как «данные не пришли». */ .sup-figure-dim .sup-figure-value { color: var(--muted); } /* Приоритет: подчёркивание плитки закрашено на долю от потолка (--fill) — «54 из 89» на глаз читается полоской, а не сравнением двух чисел. */ .sup-gauge { padding-bottom: 5px; background: linear-gradient(to right, var(--brand) var(--fill, 0%), var(--hair) var(--fill, 0%)) no-repeat bottom / 100% 3px; } /* Стоп-факторы: первое, что читает оператор, поэтому строкой поверх секций и без рамок-карточек — плотно, как ярлыки, а не как объявления. */ .sup-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; } .sup-alert { font-size: 13px; line-height: 1.25; padding: 6px 10px; border-radius: 6px; } .sup-rows { width: 100%; border-collapse: collapse; font-size: 14px; } .sup-rows th { text-align: left; font-weight: 400; color: var(--muted); padding: 8px 14px 8px 0; white-space: nowrap; vertical-align: top; width: 1%; } .sup-rows td { padding: 8px 14px 8px 0; color: var(--ink); vertical-align: top; font-variant-numeric: tabular-nums; } .sup-rows tr + tr th, .sup-rows tr + tr td { border-top: 1px solid var(--hair); } .sup-rows-log td:first-child { white-space: nowrap; } /* Строка заказа целиком ведёт на маршрут: слово «маршрут» у правого края операторы не находили. Адрес при этом по-прежнему выделяется — клик после выделения карточку не листает (card.js). */ .sup-rowlink { cursor: pointer; } .sup-rowlink:hover td { background: var(--surface); } .sup-when { color: var(--muted); white-space: nowrap; } .sup-amount { white-space: nowrap; font-weight: 500; } .sup-muted { color: var(--muted); } .sup-reveal, .sup-copy { margin-left: 6px; padding: 0 6px; font: inherit; font-size: 11.5px; cursor: pointer; background: transparent; color: var(--muted); } /* Кнопка приглушена, но видна всегда: спрятать её до наведения значит сделать невидимым ровно то, о чём операторы просили — они должны найти её глазами, а не наткнуться случайно. */ .sup-copy { opacity: .45; transition: opacity .12s; } .sup-who-head:hover .sup-copy, .sup-copy:hover, .sup-copy:focus-visible { opacity: 1; } .sup-copy:disabled { opacity: 1; cursor: default; color: var(--ok-fg); } /* ФИО ведёт в кабинет Яндекса — подчёркивание только по наведению, чтобы шапка не выглядела ссылкой поверх ссылки. */ .sup-who-name a { color: inherit; text-decoration: none; } .sup-who-name a:hover { text-decoration: underline; } .sup-details { margin: 14px 0 0; } .sup-details summary { cursor: pointer; font-size: 13px; color: var(--ink-2); list-style: none; padding: 6px 0; border-bottom: 1px solid var(--hair); } .sup-details summary::-webkit-details-marker { display: none; } .sup-details summary::before { content: "+ "; color: var(--muted); } .sup-details[open] summary::before { content: "− "; } .sup-details[open] summary { margin-bottom: 10px; border-bottom-style: solid; } /* Итог действия после редиректа (django.contrib.messages). */ .sup-messages { padding-top: 0; padding-bottom: 0; } .sup-message { margin: 12px 0 0; padding: 8px 12px; font-size: 13.5px; border-left: 2px solid var(--line); background: var(--surface); color: var(--ink); } .sup-message-success { border-left-color: var(--ok-fg); } .sup-message-error { border-left-color: var(--bad-fg); } /* ── Заметка о водителе ─────────────────────────────────────────────── Стоит в шапке, под фактами: её читают до «алло», а не по ходу разговора. Заливка, а не рамка — рамок в шапке и так хватает (кнопки, вкладки, плитки). */ .sup-note-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--flat-bg); font-size: 14px; line-height: 1.45; max-width: 62rem; } .sup-note-text .sup-muted { white-space: nowrap; } .sup-note-edit { margin-top: 8px; } .sup-note-form { display: flex; gap: 6px; align-items: flex-start; max-width: 62rem; } .sup-note-form textarea { flex: 1; padding: 8px 11px; font: inherit; font-size: 14px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); } .sup-note-form textarea:focus { outline: none; border-color: var(--ink); } .sup-note-form button { padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 0; border-radius: 10px; background: var(--brand); color: var(--brand-ink); } /* ── Ещё номера водителя ────────────────────────────────────────────── Живёт в узкой левой колонке, поэтому поля идут в столбик, а не в строку. */ .sup-phones { font-size: 13px; max-width: 560px; } .sup-phone-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); } .sup-phone-row button { margin-left: auto; } .sup-phone-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .sup-phone-add input { padding: 7px 9px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); } .sup-phone-add button { padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 0; border-radius: 8px; background: var(--brand); color: var(--brand-ink); } /* ── Заказ прямо сейчас ─────────────────────────────────────────────── Строка над всей карточкой: статус, маршрут, время. Отдельной секцией не делаем — это одна фраза, которую оператор проговаривает вслух. */ /* Живой заказ и панель цифр стоят в карточке вплотную: рамка, брендовый край и фон у них общие — разъехавшись, они читались бы как разные сущности. */ /* Панель цифр рамки не носит вовсе: её плитки уже обведены, и вторая рамка вокруг них рисует коробку в коробке. У живого заказа рамка своя. */ .sup-live-order { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); } .sup-live-order { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 9px 12px; font-size: 13.5px; } .sup-live-route { font-weight: 500; color: var(--ink); } /* ── Заказы за день ─────────────────────────────────────────────────── Строка на заказ, раскрывается в разбор: маршрут и удержания. Дату листают стрелками — водитель называет её сам, а не выбирает из списка. */ .sup-daybar { align-items: center; gap: 8px; } /* Поле даты растягиваться не должно: рядом с ним стрелки, и растянутое оно отодвигало «вперёд» на середину экрана. */ .sup-daybar input[type="date"] { flex: 0 0 auto; width: auto; } /* Обведённый контрол: стрелка дня, «показать» у скрытого поля и вход на заказы из панели. Рамка и скругление объявлены один раз — три копии уже начали расходиться радиусами. */ .sup-day-step, .sup-reveal, .sup-copy, .sup-board-go { border: 1px solid var(--line); border-radius: 8px; text-decoration: none; } .sup-day-step { padding: 0 9px; font-size: 17px; line-height: 1.7; color: var(--ink-2); } .sup-day-step:hover { background: var(--surface); } .sup-day-step-off { color: var(--line); } .sup-order summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); } /* Плюс-минус у остальных «деталей» подсказывает, что блок раскрывается; здесь раскрывается каждая строка, и маркер только сбивал бы колонку времени. Оба состояния — иначе открытая строка съезжает вправо. */ .sup-order summary::before, .sup-order[open] summary::before { content: ""; } .sup-order-when { white-space: nowrap; font-variant-numeric: tabular-nums; } .sup-order-route { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .sup-order[open] .sup-order-route { white-space: normal; overflow: visible; } /* ── Маршрут заказа ─────────────────────────────────────────────────── Линия трека поверх карты города. Раньше подложки не было вовсе: тайл чужого сервера выдал бы ему, где ездил водитель. Теперь тайлы идут через нас (support/services/basemap.py), наружу из браузера не уходит ничего, а улицы под линией отвечают на «повёз не туда» без похода в кабинет Яндекса. Карта при этом остаётся необязательной: не пришла — работают форма линии, подписи и масштабная линейка, ровно как до неё. */ .sup-map { position: relative; margin: 0 0 18px; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: var(--surface); } /* Поверх подложки: иначе тайлы накрыли бы линию, ради которой всё. */ .sup-map svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; } .sup-track { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .sup-track-green { stroke: var(--ok-fg); } .sup-track-amber { stroke: var(--warn-fg); } .sup-track-gray { stroke: var(--muted); } /* Начало трека полое, конец залит: направление движения по одной линии иначе не читается, а разговор идёт как раз о нём. */ .sup-track-tip { fill: var(--bg); stroke: var(--ink); stroke-width: 2; } .sup-track-end { fill: var(--ink); } .sup-pin circle { fill: var(--brand); stroke: var(--brand-ink); stroke-width: 1; } .sup-pin text { fill: var(--brand-ink); font-size: 11px; font-weight: 600; text-anchor: middle; } .sup-scale line { stroke: var(--ink-2); stroke-width: 2; } .sup-scale text { fill: var(--ink-2); font-size: 11px; } .sup-map-points { margin: 0 0 14px; padding: 0; list-style: none; font-size: 13.5px; } .sup-map-points li { padding: 6px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); } .sup-map-points b { display: inline-block; min-width: 16px; color: var(--ink); } /* ── Кадры фотоконтроля ─────────────────────────────────────────────── Ряд миниатюр, клик открывает снимок во весь экран (правило :target, без JS). Оверлей нарочно уложен под водяной знак: разбор фотографии — самая долгая часть разговора, и унесённый с неё кадр обязан остаться атрибутируемым. */ .sup-photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; } .sup-photo { display: block; width: 152px; text-decoration: none; color: var(--muted); } .sup-photo img { display: block; width: 152px; height: 114px; object-fit: cover; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); } .sup-photo:hover img { border-color: var(--muted); } .sup-photo span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; } .sup-zoom { display: none; } .sup-zoom:target { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(0, 0, 0, .92); } .sup-zoom:target img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Найденные по имени или госномеру: строка на человека, кликается целиком. Ни телефонов, ни ИИН — список отличает однофамильцев, а не выгружает их. */ .sup-choices { margin: 22px 0 0; max-width: 560px; } .sup-choice-btn { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 12px; font: inherit; cursor: pointer; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 8px; } .sup-choice-btn:hover { background: var(--surface); } .sup-choice-name { font-size: 14.5px; font-weight: 600; } .sup-empty { margin: 26px 0 0; font-size: 14px; color: var(--muted); } .sup-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad-fg); font-size: 14px; } .sup-usage { margin: 34px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } /* Страница входа. Стоит без обвязки админки, поэтому фон и отступы задаёт сама: обычно их даёт шаблон темы, а его здесь нет. */ /* Фон объявлен на самом теле страницы: переменные темы живут на .sup-wrap и до body не достают, а класс не даёт правилу зацепить остальные страницы сервиса — там фон рисует шаблон админки. Набор селекторов повторяет тот же, что и у .sup-wrap выше: иначе ручной переключатель темы менял бы карточку входа, а фон под ней оставлял системным. */ body.sup-login-page { margin: 0; background: #f5f4f2; } @media (prefers-color-scheme: dark) { body.sup-login-page { background: #161513; } } :root[data-theme="dark"] body.sup-login-page, html.dark body.sup-login-page { background: #161513; } :root[data-theme="light"] body.sup-login-page { background: #f5f4f2; } .sup-login { max-width: 460px; padding-top: 12vh; } .sup-login h1 { margin-bottom: 6px; } .sup-login-lead { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .sup-login .sup-field { max-width: none; } .sup-login-again { display: flex; gap: 16px; margin: 18px 0 0; } /* Второстепенные действия: «беру», «дозвонился», «карточка», «Показать». Раньше — подчёркнутый текст; на белой панели он читался сноской, и кнопку «Показать» рядом с фильтрами переставали замечать вовсе. Теперь обводка, как у вспомогательных кнопок в кабинете. Сброс подчёркивания обязателен: класс писался под