/* Тема следует системной по умолчанию (color-scheme: light dark) и переключается вручную кнопкой в нижнем баре (см. initThemeToggle в app.js): явный выбор пишется в data-theme на и localStorage, «авто» — это просто отсутствие атрибута, тогда решает prefers-color-scheme. */ :root { color-scheme: light dark; --bg: #eef0f2; --surface: #ffffff; /* Граница ЗАМЕТНО темнее фона: раньше #eceef1 был светлее самого фона (#eef0f2), то есть края карточек не очерчивались вообще — и держались только на мягкой тени, отсюда ощущение размытости. */ --border: #dfe3e8; --text: #17202a; --text-dim: #7a8494; --accent: #0a68d8; --accent-contrast: #ffffff; --ok: #158a4a; --warn: #a86200; --error: #c62b2b; --ring-track: #eef0f2; --bar-track: #ccd2d9; --chart-grid: #e8ebef; /* Палитра круглых иконок плиток — как в референсе: каждая метрика узнаётся по цвету значка, а не только по подписи. */ --icon-orange: #f0821e; --icon-purple: #9333ea; --icon-teal: #0ea5b7; /* Только короткая контактная тень. Любой второй, размытый слой (пробовал 0 4px 8px и 0 10px 24px) размазывает край — чёткость даёт граница --border плюс вот эта минимальная тень на 1-2 пикселя. */ --shadow: 0 1px 2px rgba(16, 24, 40, .07); } /* Системная тёмная тема — работает, только пока нет явного выбора светлой. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0e1218; --surface: #151d27; --border: #223044; --text: #e8edf5; --text-dim: #8fa3bd; --accent: #4f9cf9; --accent-contrast: #08111f; --ok: #4ade80; --warn: #fbbf24; --error: #f87171; --ring-track: #223044; --bar-track: #35455c; --chart-grid: #1e2833; --icon-orange: #fb923c; --icon-purple: #c084fc; --icon-teal: #2dd4bf; --shadow: 0 1px 2px rgba(0, 0, 0, .4); } } /* Явный выбор тёмной темы побеждает в обе стороны — и над системной светлой, и (см. правило выше) под системной тёмной он просто совпадает. */ :root[data-theme="dark"] { --bg: #0e1218; --surface: #151d27; --border: #223044; --text: #e8edf5; --text-dim: #8fa3bd; --accent: #4f9cf9; --accent-contrast: #08111f; --ok: #4ade80; --warn: #fbbf24; --error: #f87171; --ring-track: #223044; --bar-track: #35455c; --chart-grid: #1e2833; --icon-orange: #fb923c; --icon-purple: #c084fc; --icon-teal: #2dd4bf; --shadow: 0 1px 2px rgba(0, 0, 0, .4); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif; -webkit-text-size-adjust: 100%; } /* Ссылка на настройки внизу страницы статистики — не раздел навигации и нужна редко, поэтому не в нижнем баре, а просто последним пунктом. */ .settings-link { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .settings-link .ic { width: 18px; height: 18px; } .wrap { max-width: 1100px; margin: 0 auto; /* Нижний запас чуть больше высоты плавающего .nav (~62px + 10px отступ). */ padding: 10px 14px calc(84px + env(safe-area-inset-bottom)); } .wrap--center { display: grid; place-items: center; min-height: 100vh; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 10px; } .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .head-car b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; } .updated-row { display: flex; align-items: center; gap: 4px; } .head-car span { font-size: 12px; color: var(--text-dim); } /* Кнопка ручного обновления рядом с меткой времени — крутится, пока идёт опрос. */ .refresh-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: none; padding: 0; margin: 0; color: var(--text-dim); cursor: pointer; } .refresh-btn .ic { width: 13px; height: 13px; } .refresh-btn.is-spinning { color: var(--accent); } .refresh-btn.is-spinning .ic { animation: spin .8s linear infinite; } .refresh-btn[disabled] { cursor: progress; } @keyframes spin { to { transform: rotate(360deg); } } /* Потяни-чтобы-обновить: растёт от 0 при жесте вниз в начале страницы, JS выставляет высоту напрямую в touchmove — без transition, иначе палец «отстаёт» от анимации и жест ощущается резиновым. */ .pull-refresh { position: fixed; inset: 0 0 auto 0; height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 60; } .pull-refresh .ic { width: 20px; height: 20px; color: var(--text-dim); } .pull-refresh.is-armed .ic { color: var(--accent); } .pull-refresh.is-loading .ic { color: var(--accent); animation: spin .8s linear infinite; } /* Статусная группа справа вверху — замок, связь, сигнал GSM в одном ряду, как значки в статус-баре телефона (сигнал/wifi/батарея у iPhone). */ .head-status { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .head-status-ic { display: inline-flex; color: var(--text-dim); } .head-status-ic .ic { width: 18px; height: 18px; } .head-status-ic.is-armed { color: var(--accent); } .head-status-ic.is-ok { color: var(--ok); } .head-status-ic.is-warn { color: var(--warn); } .head-status-ic.is-danger { color: var(--error); } /* Выключенное состояние — заведомо бледнее обычного серого текста, иначе «заглушен» читается почти так же активно, как «работает». */ .head-status-ic.is-muted { color: var(--bar-track); } /* Индикатор GSM в виде полосок, как на телефоне: 4 столбика растущей высоты, закрашено столько, сколько «делений» дал SignalLevel::gsmBars(). */ .signal-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 15px; flex: none; } .signal-bars .bar { width: 4px; border-radius: 1px; /* Полоска-заглушка лежит прямо на фоне страницы (.head), а не на карточке — var(--ring-track) там сливается с фоном (тот же цвет), поэтому здесь отдельный, заведомо более тёмный серый — чтобы «из скольких» было видно. */ background: var(--bar-track); } .signal-bars .bar.on { background: var(--text); } .signal-bars .bar:nth-child(1) { height: 40%; } .signal-bars .bar:nth-child(2) { height: 60%; } .signal-bars .bar:nth-child(3) { height: 80%; } .signal-bars .bar:nth-child(4) { height: 100%; } /* Иконки в бейджах и списках: currentColor, чтобы подхватывали цвет родителя. */ .ic { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .alert { background: var(--surface); border: 1px solid var(--warn); color: var(--warn); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; font-size: 13px; } .alert--error { border-color: var(--error); color: var(--error); } /* 60/40: два равноправных блока-карточки, как и остальные плитки на экране — слева кольцо с цифрами, справа кнопка заправки. Grid, а не flex с flex-basis в процентах: 60%+40%+gap на flex превышает 100% ширины контейнера (flex-basis не ужимается под gap), из-за чего правый блок выходил за пределы ряда плиток. Grid-колонки считают gap сами. */ .hero-split { display: grid; grid-template-columns: 3fr 2fr; gap: 10px; margin-bottom: 10px; } /* Горизонтальная карточка «запас хода», как Range-карточка в референсе: заголовок и подпись слева, крупный процент справа, прогресс-бар во всю ширину снизу — узнаваемый элемент мокапов вместо кольцевого индикатора. */ .hero-fuel { min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; } .range-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .range-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; } .range-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; } .range-value { font-size: 28px; font-weight: 700; color: var(--ok); letter-spacing: -.02em; white-space: nowrap; line-height: 1; } .range-value small { font-size: 14px; font-weight: 400; color: var(--text-dim); margin-left: 2px; } .range-bar { height: 10px; border-radius: 999px; background: var(--ring-track); overflow: hidden; } .range-bar-fill { height: 100%; border-radius: 999px; background: var(--ok); } .hero-hint { font-size: 12px; color: var(--text-dim); } /* Кнопка заправки: тот же .card (форма, паддинги, радиус), что и остальные плитки, только сплошь зелёная — чтобы визуально читаться как действие, а не как ещё один информационный блок. Иконка колонки + треугольник — как индикатор стороны бака на приборной панели автомобиля. */ .hero-refuel { min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-color: var(--ok); background: var(--ok); color: var(--accent-contrast); font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; text-align: center; } .hero-refuel[disabled] { opacity: .7; cursor: progress; } .hero-refuel-icon { display: flex; align-items: center; gap: 2px; } .ic-pump { width: 28px; height: 28px; stroke-width: 1.6; } .ic-tank-side { width: 15px; height: 15px; stroke: none; fill: currentColor; margin-left: -2px; } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; } @media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, 1fr); } } .tile { margin-bottom: 0; } /* Иконка и название плитки в одну строку сверху, как в «Последняя заправка» — тот же .tile-title, что и .fillup-title, только без даты справа. Под этой строкой — крупное значение и (если есть) серая уточняющая подпись. */ .tile-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .tile-title b { font-size: 13px; } .tile-badge { display: inline-flex; align-items: center; color: var(--text-dim); } .tile-badge .ic { width: 20px; height: 20px; stroke-width: 1.9; } .tile-badge--blue { color: var(--accent); } .tile-badge--green { color: var(--ok); } .tile-badge--orange { color: var(--icon-orange); } .tile-badge--purple { color: var(--icon-purple); } .tile-badge--teal { color: var(--icon-teal); } .tile-badge--red { color: var(--error); } .tile-value { font-size: 20px; font-weight: 700; letter-spacing: -.01em; } .tile-value small { font-size: 11px; font-weight: 400; color: var(--text-dim); margin-left: 3px; } .tile-value.is-estimate { color: var(--text-dim); } .tile-value.is-warn { color: var(--warn); } /* Тревожные значения (топливо < 10 л, аккумулятор < 11,5 В, баланс SIM < 20 ₽). */ .tile-value.is-danger, .range-value.is-danger { color: var(--error); } .range-bar-fill.is-danger { background: var(--error); } /* «нет данных» и т.п. — не число, поэтому меньше и без плотного трекинга. */ .tile-value--text { font-size: 14px; font-weight: 600; letter-spacing: normal; } .tile-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; } /* Две температуры в одной плитке — салон и двигатель рядом. */ .tile-pair { display: flex; margin-top: 6px; } .tile-pair div { flex: 1; display: flex; flex-direction: column; padding: 0 12px; } .tile-pair div:first-child { padding-left: 0; } .tile-pair div:last-child { padding-right: 0; } .tile-pair div + div { border-left: 1px solid var(--border); } .tile-pair b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .tile-pair span { font-size: 10px; color: var(--text-dim); margin-top: 1px; } /* Температура двигателя вне рабочего диапазона — цвет вместо текста: холодный (до 40°) синий, прогрев (до 80°) жёлтый, рабочий (до 99°) зелёный, перегрев (выше) красный. */ .tile-pair-temp.is-cold { color: var(--accent); } .tile-pair-temp.is-warm { color: var(--warn); } .tile-pair-temp.is-hot-ok { color: var(--ok); } .tile-pair-temp.is-danger { color: var(--error); } /* Карточка последней заправки в три колонки с разделителями — как «Last Fill-up» в референсе. Расход тут честен только между двумя заправками до полного бака, иначе в колонке стоит прочерк. */ .fillup { margin-bottom: 10px; } .fillup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .fillup-title { display: flex; align-items: center; gap: 8px; } .fillup-title .tile-badge { margin-bottom: 0; } .fillup-title b { font-size: 14px; } .fillup-date { font-size: 12px; color: var(--text-dim); text-align: right; } .fillup-cols { display: grid; grid-template-columns: repeat(3, 1fr); } .fillup-cols div { padding: 0 12px; } .fillup-cols div:first-child { padding-left: 0; } .fillup-cols div:last-child { padding-right: 0; } .fillup-cols div + div { border-left: 1px solid var(--border); } .fillup-cols b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .fillup-cols small { font-size: 11px; font-weight: 400; color: var(--text-dim); margin-left: 3px; } .fillup-cols span { font-size: 11.5px; color: var(--text-dim); } .fillup-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 12px; } /* Чекбокс в формах: подпись рядом, кликается вся строка. */ .check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; cursor: pointer; } .check input { width: 18px; height: 18px; accent-color: var(--accent); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; padding: 11px 16px; cursor: pointer; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn--big { width: 100%; padding: 16px; font-size: 16px; margin: 14px 0; } .btn[disabled] { opacity: .6; cursor: progress; } .input { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; margin-bottom: 10px; } .card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .card-head b { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); } /* * Chart.js с maintainAspectRatio:false берёт высоту канваса из родителя. * Без явной высоты у обёртки родитель растёт под канвас, а канвас — под * родителя: бесконечный цикл роста. Высота здесь — источник истины для графика. */ .chart-box { position: relative; height: 220px; width: 100%; } .chart-box canvas { position: absolute; inset: 0; } .list { list-style: none; margin: 0; padding: 0; font-size: 13px; } .list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .list li:last-child { border-bottom: 0; } .list span { color: var(--text-dim); } .list b { font-weight: 700; } /* Заканчивающийся баланс SIM: без связи приложение просто ослепнет. */ .list .is-warn { color: var(--warn); } .link { color: var(--accent); margin-left: 6px; } .btn--danger { color: var(--error); border-color: var(--error); background: var(--surface); } /* Свёрнутый редактор записи: не мешает читать список, но всегда под рукой. */ .editor { margin-top: 10px; } .editor summary { cursor: pointer; font-size: 12px; color: var(--accent); padding: 4px 0; } .editor[open] summary { margin-bottom: 8px; } .row { display: flex; gap: 8px; } .row .btn { flex: 1; } /* Крестик удаления в строках списка. */ .btn-link { border: 0; background: none; color: var(--text-tertiary, var(--text-dim)); font: inherit; cursor: pointer; padding: 0 0 0 8px; } .btn-link:hover { color: var(--error); } .login { width: min(340px, 90vw); } .login-title { font-size: 17px; margin: 0 0 12px; } /* Плавающая пилюля вместо приклеенной ко дну полосы, как в референсе: бар не касается краёв экрана, у активного пункта — подсветка-капсула. pointer-events на обёртке снят, чтобы прозрачные поля по бокам не перехватывали тапы по контенту под ними. */ .nav { position: fixed; inset: auto 0 0 0; display: flex; justify-content: center; padding: 0 14px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; } .nav-inner { position: relative; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(16, 24, 40, .08); pointer-events: auto; } /* Капсула-подсветка активного пункта: одна на весь бар, JS двигает её трансформом — так переход между разделами читается как перемещение пилюли, а не как мгновенное перекрашивание. */ .nav-pill { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 999px; /* color-mix вместо фиксированного rgba(10,104,216,...): подсветка должна следовать за --accent, который в тёмной теме заметно светлее. */ background: color-mix(in srgb, var(--accent) 12%, transparent); transform: translateX(0); transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1); } /* Пока JS не расставил размеры (или отключён) — капсулы просто нет. */ .nav-pill:not(.is-ready) { opacity: 0; } .nav-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 14px; border-radius: 999px; color: var(--text-dim); text-decoration: none; font-size: 10px; line-height: 1.2; transition: color .2s ease; } .nav-item.is-active { color: var(--accent); } .ic-nav { width: 21px; height: 21px; stroke-width: 1.8; } /* Сегмент-контрол темы на странице настроек: три равные кнопки в одной капсуле, активная закрашена — тот же язык, что и .nav-pill в нижнем баре. */ .segmented { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 3px; margin-bottom: 10px; } .segmented button, .segmented a { flex: 1; border: none; background: none; border-radius: 9px; padding: 8px 4px; font: inherit; font-size: 13px; color: var(--text-dim); cursor: pointer; text-align: center; text-decoration: none; } .segmented button.is-active, .segmented a.is-active { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); } /* Строка-переключатель («свитч») — вся строка кликабельна, не только сам тумблер. */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: none; background: none; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; } .switch-row small { color: var(--text-dim); } .switch { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--bar-track); position: relative; transition: background .2s ease; } .switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .25); transition: transform .2s ease; } .switch.is-on { background: var(--accent); } .switch.is-on .switch-knob { transform: translateX(18px); } .switch-row[disabled] { opacity: .6; cursor: default; } .car-alias-form { display: flex; gap: 8px; } .car-alias-form .input { margin-bottom: 0; } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); padding: 6px 8px; } .table td { padding: 9px 8px; border-top: 1px solid var(--border); } .table .is-estimate { color: var(--text-dim); } .table-scroll { overflow-x: auto; }