/* Radar — карта во весь экран, поиск сверху, главные кнопки и панель фильтров снизу, карточка самоката шторкой. Обе темы на CSS-переменных: переключатель меняет data-theme на . */ /* Гамма держится на двух вещах. Акцент один — янтарный. Раньше их было два: жёлтый в чипах и оранжевый в кнопках, и глазу приходилось решать, который из них главный. Янтарь при этом заметно спокойнее тревожного оранжевого на карте (#f07f1a): цвет метки означает состояние самоката, и интерфейс не должен перетягивать этот сигнал на себя. Нейтральные тона уведены в холод — они перекликаются с сине-серыми кластерами (#42506a) и серой подложкой, а тёплый акцент на холодном фоне читается сам собой, без нажима. Палитра карты — статусы, кластеры, точки событий — сюда не входит намеренно: её задаёт сервер, и меняться она должна не отсюда. */ :root { color-scheme: light; --bg: #eceef2; --surface: #ffffff; --surface-2: #f1f3f7; --surface-hover: #e6e9ef; --border: #dce0e8; --border-strong: #c1c7d2; --text: #151820; --text-dim: #59606d; --text-faint: #858d9c; /* Три роли одного цвета: обрамление и точки, текст на светлом, подложка-подсветка. Текстовый темнее нарочно — янтарь на белом иначе не дочитывается. */ --accent: #e08b3d; --accent-strong: #a75f18; --accent-soft: rgba(224, 139, 61, 0.14); --accent-ink: #ffffff; /* То же, но непрозрачно: элементы поверх карты полупрозрачной подсветкой красить нельзя — сквозь них видно плитки и метки. */ --accent-wash: #fbefe4; --ok: #23a35a; --warn: #e8930c; --bad: #e0453c; --info: #3b7de0; /* Флажок «самокат вероятнее всего здесь». Ярче тревожного красного: он единственный такой на всю ленту и должен ловиться глазом сразу, не заставляя вчитываться в строки. */ --flag: #f01a0c; --shadow-1: 0 1px 3px rgba(16, 18, 22, 0.10), 0 1px 2px rgba(16, 18, 22, 0.06); --shadow-2: 0 12px 32px rgba(16, 18, 22, 0.16), 0 2px 8px rgba(16, 18, 22, 0.08); --radius: 10px; --radius-lg: 16px; --sheet-h: 46vh; } html[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #171a21; --surface-2: #1e222a; --surface-hover: #262b34; --border: #2a3038; --border-strong: #3a414c; --text: #e7eaef; --text-dim: #98a0ac; --text-faint: #6a7280; /* На тёмном роли меняются местами: светлее — то, что читают, а не то, чем обводят. */ --accent: #d18944; --accent-strong: #eda862; --accent-soft: rgba(209, 137, 68, 0.16); --accent-ink: #17120a; --accent-wash: #352c27; --ok: #35c46f; --warn: #f0a92c; --bad: #f2564b; --info: #5b96f0; --flag: #ff4436; --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-2: 0 14px 36px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } /* Скрытое должно быть скрыто. Браузерное правило для [hidden] — это всего лишь `display: none` на элементе, и любой наш `display: flex` в правиле с классом перебивает его по специфичности. На этом уже дважды ловились: панель фильтров, стрелки и окно просмотра фото оставались на экране, хотя код честно ставил hidden. Одно правило с !important закрывает весь класс таких ошибок. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; } button, input, select { font: inherit; color: inherit; } /* ------------------------------------------------------------------ карта */ #map { position: absolute; inset: 0; } .maplibregl-ctrl-attrib { font-size: 10px; } /* Копирайт подложки поднят над нижним рядом кнопок: его видно всегда — это условие использования данных OpenStreetMap, а не украшение. */ .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: 58px; } /* --------------------------------------------------------------- топ-панель */ .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 10px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .topbar > * { pointer-events: auto; } .topbar-row { display: flex; gap: 8px; align-items: center; } .brand { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 0 12px; height: 40px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; } .brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; } .search { flex: 1; min-width: 0; position: relative; } .search input { width: 100%; height: 40px; padding: 0 34px 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); outline: none; } .search input:focus { border-color: var(--accent); box-shadow: var(--shadow-1), 0 0 0 3px var(--accent-soft); } .search-clear { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--text-faint); cursor: pointer; display: none; } .search-clear:hover { background: var(--surface-hover); color: var(--text); } .search.has-value .search-clear { display: block; } .icon-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); cursor: pointer; color: var(--text-dim); transition: background .12s, color .12s; } .icon-btn:hover { background: var(--surface-hover); color: var(--text); } /* Включённое состояние — той же янтарной подсветкой, что и внизу экрана: один язык на весь интерфейс. */ .icon-btn.active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-strong); } .icon-btn svg { width: 19px; height: 19px; } /* --------------------------------------------------- нижние кнопки */ /* Главные действия внизу экрана: до них дотягивается большой палец, а верх в поле занят солнцем и капюшоном. Ряд центрирован, обе кнопки одной ширины — ни одна не выглядит главнее другой. */ .bottombar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; transition: padding-right .28s cubic-bezier(.4, 0, .2, 1), opacity .18s; } .bottombar > * { pointer-events: auto; } .bottombar-row { display: flex; gap: 12px; width: min(100%, 560px); } /* Кнопки вытянутые и без цветной заливки: цветом взяты только текст, значок и обрамление. Подложка нейтральная, как у остальных панелей, — без неё надпись легла бы прямо на плитки карты и стала нечитаемой. */ .wide-btn { flex: 1 1 0; min-width: 0; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 999px; box-shadow: var(--shadow-1); color: var(--accent-strong); font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s; } .wide-btn:hover { background: var(--accent-wash); } .wide-btn:active { transform: translateY(1px); } .wide-btn svg { width: 18px; height: 18px; flex: none; } /* Панель раскрыта или фильтры выбраны — обводка плотнее, подложка янтарная. Заливки по-прежнему нет, но состояние видно. */ .wide-btn.on, .wide-btn.active { background: var(--accent-wash); border-color: var(--accent-strong); } /* Сколько фильтров выбрано. Внутри кнопки, а не значком в углу: на широкой кнопке место есть, а угловой значок пришлось бы ловить глазом. */ .btn-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; } /* Шторка карточки накрывает низ экрана — кнопкам под ней делать нечего. */ body.sheet-open .bottombar { opacity: 0; visibility: hidden; } /* --------------------------------------------------------------- фильтры */ .filters { width: min(100%, 460px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 12px; max-height: min(62vh, 560px); overflow-y: auto; } .filter-group + .filter-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .filter-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 8px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text-dim); white-space: nowrap; transition: background .12s, color .12s, border-color .12s; } /* Точка цвета статуса. Благодаря ей панель фильтров работает легендой карты — отдельная не нужна. */ .chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); } .chip:hover { background: var(--surface-hover); color: var(--text); } .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; } .range-val { font-variant-numeric: tabular-nums; color: var(--text-dim); min-width: 66px; text-align: right; font-size: 13px; } .filters-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .btn { padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-size: 13px; transition: background .12s; } .btn:hover { background: var(--surface-hover); } /* Единственная залитая кнопка в интерфейсе — та, что подтверждает выбор диапазона. Берём тёмный янтарь: на нём белая надпись читается. */ .btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); font-weight: 600; } .btn-primary:hover { filter: brightness(1.06); } .btn:disabled { opacity: .5; cursor: default; } /* --------------------------------------------------- инструменты карты */ /* Правый верхний угол. На узком экране топ-панель занимает всю ширину и её кнопки стоят ровно здесь, поэтому опускаем инструменты под неё; с 860px топ-панель обрезана по 460px и место наверху свободно. */ .map-tools { position: absolute; top: 58px; right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; transition: right .28s cubic-bezier(.4, 0, .2, 1), opacity .15s; } /* ------------------------------------------------------------ статус-строка */ /* Стоит над нижним рядом кнопок: 10 отступа, 46 кнопки, 10 отступа. */ .statusline { position: absolute; left: 10px; bottom: 66px; z-index: 4; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-1); font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; transition: bottom .28s cubic-bezier(.4, 0, .2, 1), opacity .18s; } body.sheet-open .statusline { bottom: calc(var(--sheet-h) + 10px); } /* Раскрытая панель фильтров занимает низ экрана целиком — строке там не место, а её счёт всё равно продублирован в подвале панели. */ body.filters-open .statusline { opacity: 0; pointer-events: none; } /* На узком экране копирайт карты занимает всю полосу над кнопками — поднимаем строку над ним, иначе они налезают друг на друга. */ @media (max-width: 560px) { .statusline { bottom: 90px; } body.sheet-open .statusline { bottom: calc(var(--sheet-h) + 10px); } } .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; } .pulse.stale { background: var(--warn); } .pulse.error { background: var(--bad); } .pulse.busy { animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .3; } } /* ------------------------------------------------------------------ шторка */ .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: var(--sheet-h); background: var(--surface); border-top: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-2); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .sheet.open { transform: translateY(0); } .sheet-grip { flex: none; padding: 8px 0 4px; display: grid; place-items: center; cursor: grab; touch-action: none; } .sheet-grip::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); } .sheet-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 4px 16px 12px; border-bottom: 1px solid var(--border); } .sheet-title { flex: 1; min-width: 0; } .sheet-number { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .sheet-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; -webkit-overflow-scrolling: touch; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-bottom: 16px; } .stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 10px; /* Без этого длинные подписи вроде «Нет хартбита» распирают колонку и наезжают на соседнюю плитку. */ min-width: 0; overflow: hidden; } .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; } .stat-value { font-size: 16px; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } /* Облачко при наведении на метку. Сердце — когда самокат в последний раз подал признак жизни, стрелка — когда сообщил, где он. */ .tip-row { display: inline-flex; gap: 12px; margin-top: 3px; } .tip-metric { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .tip-icon { width: 12px; height: 12px; flex: none; color: var(--text-faint); } /* Молчащий модуль: сердце краснеет вместе с подписью. */ .tip-bad, .tip-bad .tip-icon { color: #e0453c; } /* Теги кабинета — его собственная разметка парка. Показываем их отдельными плашками, как во Флите. */ .tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .tag { padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 500; color: var(--text-dim); white-space: nowrap; } /* Формулировка кабинета под нашим статусом: наш — свёртка, и если они разойдутся, это должно быть видно сразу. */ .stat-note { margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--text-dim); overflow-wrap: anywhere; } .batt-ok { color: var(--ok); } .batt-warn { color: var(--warn); } .batt-bad { color: var(--bad); } .stat-status { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .alive-ok { color: var(--ok); } .alive-bad { color: var(--bad); font-size: 13px !important; } .stat-dead { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface-2)); } /* Предупреждение в шапке карточки: без хартбита координаты и заряд показывают состояние на момент последнего сеанса связи. */ .warn-banner { display: flex; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--bad); border-radius: var(--radius); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--text); font-size: 12.5px; line-height: 1.4; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 9px; } .section-head:first-child { margin-top: 0; } .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); } /* лента событий */ .events { display: flex; flex-direction: column; } .event { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 9px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; } .event:hover { background: var(--surface-2); } .event.active { background: var(--accent-soft); border-color: var(--accent); } .event-dot { width: 10px; height: 10px; border-radius: 50%; margin: 5px auto 0; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px currentColor; } .event-label { font-weight: 550; } /* Флажок у точки, где самокат вероятнее всего стоит. Красный здесь единственный на всю ленту — он отвечает на вопрос «куда ехать», а не сообщает об ошибке, поэтому и размер у него скромный. */ .likely { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--flag); } .likely-flag { width: 15px; height: 15px; } /* Флажок съедает ширину, и координаты в отмеченной строке рвались посреди пары: «55.14377,» на одной строке, «61.44389» на другой. Пусть уходят вниз целиком — перенос по замыслу читается лучше случайного. */ .event:has(.likely) .event-meta { display: block; } /* Тот же флажок в подписи под лентой — там он идёт без обёртки. */ .hint .likely-flag { color: var(--flag); vertical-align: -2px; } .event-meta { font-size: 12px; color: var(--text-faint); margin-top: 1px; font-variant-numeric: tabular-nums; } .event-time { font-size: 12px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .empty { padding: 22px 14px; text-align: center; color: var(--text-faint); font-size: 13px; } /* диапазон дат */ .range-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .date-inputs { display: none; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .date-inputs.on { display: flex; } .date-inputs input { flex: 1; min-width: 150px; height: 34px; padding: 0 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; outline: none; } .date-inputs input:focus { border-color: var(--accent); } /* поездки */ .trip { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; } .trip:hover { background: var(--surface-2); } .trip.active { border-color: var(--accent); background: var(--accent-soft); } .trip-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .trip-when { font-weight: 600; } .trip-meta { color: var(--text-faint); font-size: 12px; margin-top: 2px; } .photos { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .photos img { width: 96px; height: 72px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border); cursor: zoom-in; } .photos img:hover { border-color: var(--accent); } /* Фото, которого на стороне Флита уже нет: открывать нечего. */ .photos img.gone { cursor: default; opacity: .7; } .photos img.gone:hover { border-color: var(--border); } /* ------------------------------------------------- фото во весь экран */ /* Тёмный фон здесь одинаков в обеих темах: на светлом снимок парковки разглядеть труднее, а глазу нужен именно снимок, а не интерфейс. */ .lightbox { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 44px 16px 56px; background: rgba(8, 9, 12, 0.92); backdrop-filter: blur(2px); } .lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-2); } .lightbox-gone { display: none; color: rgba(255, 255, 255, 0.72); font-size: 14px; } .lightbox.broken .lightbox-img { display: none; } .lightbox.broken .lightbox-gone { display: block; } .lightbox.broken .lightbox-orig { display: none; } .lightbox-close, .lightbox-nav { position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: grid; place-items: center; border-radius: 50%; line-height: 1; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); } .lightbox-close { top: 10px; right: 12px; width: 36px; height: 36px; font-size: 16px; } .lightbox-nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 28px; padding-bottom: 4px; } .lightbox-nav.prev { left: 10px; } .lightbox-nav.next { right: 10px; } .lightbox-foot { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; color: rgba(255, 255, 255, 0.72); font-size: 13px; font-variant-numeric: tabular-nums; } .lightbox-orig { color: rgba(255, 255, 255, 0.72); } .lightbox-orig:hover { color: #fff; } /* Пока смотрим фото, страница под ним не прокручивается. */ body.lightbox-open { overflow: hidden; } .hint { color: var(--text-faint); font-size: 12px; padding: 10px 0 2px; } .spinner { width: 15px; height: 15px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } /* всплывающая подсказка на карте */ .maplibregl-popup-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-2); padding: 7px 10px; font-size: 12px; } .maplibregl-popup-tip { display: none; } /* планшет и десктоп: шторка становится боковой панелью */ @media (min-width: 860px) { .topbar { max-width: 460px; } .sheet { top: 0; bottom: 0; left: auto; right: 0; width: 400px; height: auto; border-radius: 0; border-top: 0; border-left: 1px solid var(--border); transform: translateX(100%); } .sheet.open { transform: translateX(0); } .sheet-grip { display: none; } .sheet-head { padding-top: 16px; } body.sheet-open .statusline { bottom: 66px; } .map-tools { top: 10px; } /* Боковая шторка накрыла бы кнопку — уводим её левее вместе с ней. */ body.sheet-open .map-tools { right: 410px; } /* Здесь шторка занимает правый край, а не весь низ, поэтому нижний ряд не прячем, а центрируем в том, что от экрана осталось. */ body.sheet-open .bottombar { opacity: 1; visibility: visible; padding-right: 410px; } }