/* ============================================================
Domchu · История заказов — production styles
Единственный CSS-файл для интеграции. Мержится в src/app.css
или подключается отдельно.
============================================================
Темизация через body-классы (а не data-theme):
— client light (default)
— client night
— driver day
— driver night
============================================================ */
/* ── Keyframes ──────────────────────────────────────────── */
@keyframes dm-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes dm-digit-pop {
0% { opacity: 0; transform: translateY(4px) scaleY(.92); }
60% { opacity: 1; transform: translateY(0) scaleY(1.02); }
100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes dm-pulse {
0%, 100% { opacity: .55 }
50% { opacity: .9 }
}
/* ── Tokens · CLIENT LIGHT (default / :root fallback) ──── */
:root,
body {
--dm-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', 'Segoe UI',
'MaximSans', 'DriverSans', Roboto, sans-serif;
--dm-fs-10: 10px; --dm-fs-11: 11px; --dm-fs-12: 12px; --dm-fs-13: 13px;
--dm-fs-14: 14px; --dm-fs-15: 15px; --dm-fs-17: 17px; --dm-fs-20: 20px;
--dm-fs-44: 44px;
--dm-s-1: 2px; --dm-s-2: 4px; --dm-s-3: 8px; --dm-s-4: 12px;
--dm-s-5: 16px; --dm-s-6: 20px; --dm-s-7: 24px;
--dm-r-sm: 10px; --dm-r-md: 14px; --dm-r-lg: 18px;
--dm-r-xl: 22px; --dm-r-pill: 999px;
--dm-dur-150: 150ms; --dm-dur-200: 200ms; --dm-dur-400: 400ms;
--dm-ease-std: cubic-bezier(0.2, 0, 0, 1);
--dm-pin-from: #10B981;
--dm-pin-to: #EF4444;
/* Client · day palette */
--dm-bg: #F3F4F6;
--dm-bg-2: #FFFFFF;
--dm-surface: #FFFFFF;
--dm-surface-2: #F9FAFB;
--dm-surface-3: #F3F4F6;
--dm-divider: rgba(15, 23, 42, 0.06);
--dm-border: rgba(15, 23, 42, 0.09);
--dm-text: #0F172A;
--dm-text-2: #475569;
--dm-text-3: #94A3B8;
--dm-brand: #3B82F6;
--dm-brand-dark: #2563EB;
--dm-brand-tint: rgba(59, 130, 246, 0.10);
--dm-brand-ink: #1D4ED8;
--dm-success: #10B981;
--dm-danger: #EF4444;
--dm-shadow-sm: 0 2px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
--dm-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.05);
--dm-shadow-hero: none;
--dm-skeleton-base: #EEF1F4;
--dm-skeleton-shine: rgba(255,255,255,.95);
--dm-focus: #3B82F6;
--dm-focus-ring: rgba(59,130,246,.22);
}
/* ── Client · NIGHT ─────────────────────────────────────── */
body.client-night,
.client-night {
--dm-bg: #0B0F17;
--dm-bg-2: #0F1420;
--dm-surface: #151B2B;
--dm-surface-2: #1A2133;
--dm-surface-3: #232B40;
--dm-divider: rgba(255,255,255,.06);
--dm-border: rgba(255,255,255,.08);
--dm-text: #F1F5F9;
--dm-text-2: #94A3B8;
--dm-text-3: #64748B;
--dm-brand: #60A5FA;
--dm-brand-dark: #3B82F6;
--dm-brand-tint: rgba(96,165,250,.14);
--dm-brand-ink: #93C5FD;
--dm-success: #34D399;
--dm-danger: #F87171;
--dm-shadow-sm: 0 2px 4px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.22);
--dm-shadow-md: 0 6px 16px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.28);
--dm-skeleton-base: #1A2133;
--dm-skeleton-shine: rgba(255,255,255,.06);
--dm-focus: #93C5FD;
--dm-focus-ring: rgba(147,197,253,.26);
}
/* ── Driver · DAY (teal) ────────────────────────────────── */
body.driver-mode,
.driver-mode {
--dm-bg: #EEF2F2;
--dm-bg-2: #FFFFFF;
--dm-surface: #FFFFFF;
--dm-surface-2: #F7FAFA;
--dm-surface-3: #EEF2F2;
--dm-divider: rgba(2, 44, 49, 0.08);
--dm-border: rgba(2, 44, 49, 0.10);
--dm-text: #0B2A2E;
--dm-text-2: #47666A;
--dm-text-3: #8FA6AA;
--dm-brand: #006D7B;
--dm-brand-dark: #005A66;
--dm-brand-tint: rgba(0,109,123,.10);
--dm-brand-ink: #005762;
--dm-success: #00A37A;
--dm-danger: #DC2626;
--dm-shadow-sm: 0 2px 4px rgba(2,44,49,.08), 0 1px 2px rgba(2,44,49,.05);
--dm-shadow-md: 0 4px 14px rgba(2,44,49,.10), 0 2px 4px rgba(2,44,49,.06);
--dm-skeleton-base: #E6ECEC;
--dm-skeleton-shine: rgba(255,255,255,.92);
--dm-focus: #006D7B;
--dm-focus-ring: rgba(0,109,123,.22);
}
/* ── Driver · NIGHT (teal bright) ───────────────────────── */
body.driver-mode.driver-night,
.driver-mode.driver-night {
/* 2026-06-08: поверхности приведены к СТАНДАРТНОМУ driver-night слейту
(как drawer/sheet/остальной UI: экран #171C23, карточки #232B38), убран
teal-тинт — карточки заказов больше НЕ «зеленоватые». Бирюза осталась
ТОЛЬКО акцентом через --dm-brand (hero «Заработано», суммы +₽, график).
Сохранён порядок lightness surface < surface-2 < surface-3. */
--dm-bg: #171C23;
--dm-bg-2: #1E2530;
--dm-surface: #232B38;
--dm-surface-2: #2A3443;
--dm-surface-3: #323D50;
--dm-divider: rgba(255,255,255,.06);
--dm-border: rgba(255,255,255,.09);
--dm-text: #E5EBF2;
--dm-text-2: #A2AAB7;
--dm-text-3: #8D95A0;
--dm-brand: #1AABC1;
--dm-brand-dark: #0F8F9F;
--dm-brand-tint: rgba(26,171,193,.16);
--dm-brand-ink: #5BC7D6;
--dm-success: #2DD4BF;
--dm-danger: #FB7185;
--dm-shadow-sm: 0 2px 4px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.30);
--dm-shadow-md: 0 6px 18px rgba(0,0,0,.50), 0 2px 5px rgba(0,0,0,.32);
--dm-skeleton-base: #232B38;
--dm-skeleton-shine: rgba(255,255,255,.06);
--dm-focus: #5BC7D6;
--dm-focus-ring: rgba(91,199,214,.26);
}
/* ════════════════════════════════════════════════════════
Component classes — .dm-history-* / .dm-*
════════════════════════════════════════════════════════ */
/* Page shell
domchu-fix: фон НЕ задаём — единый фон рисует родитель
.drawer-page-body из app.css. Убран background: var(--dm-bg) и
min-height: 100% — они создавали "срез" в тёмной теме: первые
карточки на --dm-bg, а ниже (при скролле за пределы 100%-ой высоты)
просвечивал фон drawer'а другой палитры. */
.dm-history-page {
padding: 4px 14px 28px;
font-family: var(--dm-font);
color: var(--dm-text);
display: flex;
flex-direction: column;
gap: 14px;
}
/* Header */
.dm-history-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 4px 6px; gap: 8px;
min-height: 36px;
position: relative;
}
.dm-history-header__back-slot {
width: 28px; height: 28px; opacity: .22;
border: 1px dashed var(--dm-text-3); border-radius: 8px;
}
.dm-history-header__title {
position: absolute; left: 0; right: 0;
text-align: center; pointer-events: none;
margin: 0;
font-size: var(--dm-fs-17); font-weight: 600;
color: var(--dm-text); letter-spacing: -0.01em;
}
.dm-history-header__spacer { width: 28px; height: 28px; }
/* Period chips */
.dm-chips {
display: inline-flex; gap: 4px; padding: 4px;
background: var(--dm-surface-3);
border-radius: var(--dm-r-pill);
align-self: center;
}
.dm-chip {
border: none; cursor: pointer;
padding: 7px 14px; border-radius: var(--dm-r-pill);
font-size: var(--dm-fs-13); font-weight: 500;
background: transparent; color: var(--dm-text-2);
transition: all var(--dm-dur-200) var(--dm-ease-std);
}
.dm-chip.is-active {
background: var(--dm-surface); color: var(--dm-text);
font-weight: 600;
box-shadow: var(--dm-shadow-sm);
}
/* Hero · driver */
.dm-hero-driver {
background: var(--dm-brand);
color: #fff;
border-radius: var(--dm-r-xl);
padding: 18px 18px 16px;
position: relative;
box-shadow: var(--dm-shadow-hero);
}
.dm-hero-driver__head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 4px;
}
.dm-hero-driver__label {
font-size: var(--dm-fs-11); font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; opacity: .88;
}
.dm-hero-driver__meta {
font-size: var(--dm-fs-11); opacity: .72; font-weight: 500;
}
.dm-hero-driver__amount-row {
min-height: 44px; display: flex; align-items: baseline;
}
.dm-hero-driver__chart-wrap { margin-top: 12px; }
/* Hero · client */
.dm-hero-client {
background: var(--dm-surface);
border: 1px solid var(--dm-divider);
border-radius: var(--dm-r-xl);
padding: 16px 18px;
box-shadow: var(--dm-shadow-sm);
}
.dm-hero-client__label {
font-size: var(--dm-fs-11); font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; color: var(--dm-text-3);
}
.dm-hero-client__amount-row {
display: flex; align-items: baseline; gap: 10px;
margin-top: 4px; color: var(--dm-text);
}
.dm-hero-client__meta {
font-size: var(--dm-fs-12); color: var(--dm-text-3);
margin-top: 6px; font-weight: 500;
}
/* Chart */
.dm-chart__svg { display: block; width: 100%; }
.dm-chart__svg.is-interactive { cursor: crosshair; }
.dm-chart__footer {
display: flex; justify-content: space-between;
font-size: var(--dm-fs-11); opacity: .72; margin-top: 6px;
font-variant-numeric: tabular-nums; font-weight: 500;
}
/* Odometer */
.dm-odo {
display: inline-flex; align-items: baseline;
font-weight: 700; line-height: 1; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: currentColor;
}
.dm-odo--size-44 { font-size: var(--dm-fs-44); }
.dm-odo__plus { margin-right: 0.08em; }
.dm-odo__sep { width: 0.22em; display: inline-block; }
.dm-odo__rub { margin-left: 0.22em; opacity: .85; }
.dm-odo__digit-wrap {
display: inline-block;
animation: dm-digit-pop 500ms cubic-bezier(.34,1.3,.64,1) both;
}
.dm-odo__digit {
display: inline-block; height: 1em; line-height: 1;
overflow: hidden; vertical-align: top;
}
.dm-odo__reel {
display: block; will-change: transform;
transition: transform 780ms cubic-bezier(.2,.85,.25,1);
}
.dm-odo__cell { display: block; height: 1em; }
/* Date separator */
.dm-date-sep {
display: flex; align-items: baseline; justify-content: space-between;
padding: 0 4px;
}
.dm-date-sep__day {
font-size: var(--dm-fs-13); font-weight: 700;
color: var(--dm-text); letter-spacing: -0.005em;
}
.dm-date-sep__sum {
font-size: var(--dm-fs-12); color: var(--dm-text-3);
font-weight: 500; font-variant-numeric: tabular-nums;
}
/* Trip group */
.dm-trip-group { display: flex; flex-direction: column; gap: 8px; }
.dm-trip-list { display: flex; flex-direction: column; gap: 10px; }
/* Trip card */
.dm-trip-card {
all: unset;
display: flex; gap: 10px; padding: 12px 14px;
background: var(--dm-surface);
border-radius: var(--dm-r-md);
box-shadow: var(--dm-shadow-sm);
border: 1px solid var(--dm-divider);
cursor: pointer; width: 100%; box-sizing: border-box;
transition: transform var(--dm-dur-150) var(--dm-ease-std),
box-shadow var(--dm-dur-150),
background-color var(--dm-dur-150);
}
.dm-trip-card:hover { background-color: var(--dm-surface-2); }
.dm-trip-card:active { transform: scale(.985); background-color: var(--dm-surface-2); }
.dm-trip-card:focus-visible {
outline: 2px solid var(--dm-focus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--dm-focus-ring);
}
.dm-trip-card__body { flex: 1; min-width: 0; }
.dm-trip-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.dm-trip-card__name {
flex: 1 1 auto; min-width: 0; /* без min-width:0 default flex min-width:auto = intrinsic max-content,
nowrap-текст не ужимается, выходит за card. С 0 ellipsis работает. */
font-weight: 600; font-size: var(--dm-fs-15);
color: var(--dm-text); line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-trip-card__address {
font-size: var(--dm-fs-12); color: var(--dm-text-2);
line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-trip-card__price {
flex: 0 0 auto; /* цена никогда не ужимается — длинный name truncates, не price */
font-weight: 700; font-size: var(--dm-fs-15);
color: var(--dm-text);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dm-trip-card__price--driver { color: var(--dm-success); }
.dm-trip-card__meta {
display: flex; align-items: center; gap: 5px;
font-size: var(--dm-fs-11); color: var(--dm-text-3);
font-variant-numeric: tabular-nums;
}
.dm-trip-card__meta-dot {
width: 2px; height: 2px; border-radius: 50%;
background: currentColor; opacity: .4;
}
.dm-trip-card__gap { height: 4px; }
.dm-trip-card__actions { display: flex; gap: 8px; margin-top: 10px; }
/* Pin trail */
.dm-pin-trail {
display: flex; flex-direction: column; align-items: center;
width: 14px; flex: 0 0 14px;
padding-top: 4px; padding-bottom: 2px;
}
.dm-pin-trail__from {
width: 8px; height: 8px; border-radius: 50%;
background: var(--dm-pin-from);
box-shadow: 0 0 0 2px var(--dm-surface),
0 0 0 3px color-mix(in srgb, var(--dm-pin-from) 25%, transparent);
}
.dm-pin-trail__line {
flex: 1; width: 1.5px;
background: repeating-linear-gradient(
to bottom,
var(--dm-text-3) 0 3px,
transparent 3px 6px
);
opacity: .5; margin: 3px 0;
}
/* Pill button (repeat on trip card) */
.dm-pill {
all: unset;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border: 1px solid var(--dm-border);
background: transparent;
color: var(--dm-brand-ink);
border-radius: var(--dm-r-pill);
font-size: var(--dm-fs-12); font-weight: 600;
cursor: pointer; box-sizing: border-box;
transition: background-color var(--dm-dur-150);
}
.dm-pill:hover { background-color: var(--dm-brand-tint); }
.dm-pill:active { transform: scale(.985); }
.dm-pill:focus-visible {
outline: 2px solid var(--dm-focus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--dm-focus-ring);
}
/* Primary CTA */
.dm-cta {
all: unset;
display: block; text-align: center; box-sizing: border-box;
width: 100%;
padding: 11px;
background: var(--dm-brand); color: #fff;
border-radius: var(--dm-r-sm);
font-size: var(--dm-fs-14); font-weight: 700;
cursor: pointer;
transition: transform var(--dm-dur-150) var(--dm-ease-std),
filter var(--dm-dur-150);
}
.dm-cta:hover { filter: brightness(1.06); }
.dm-cta:active { transform: scale(.985); }
.dm-cta:focus-visible {
outline: 2px solid var(--dm-focus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--dm-focus-ring);
}
.dm-cta--lg { padding: 14px; font-size: var(--dm-fs-15); box-shadow: var(--dm-shadow-md); border-radius: var(--dm-r-md); margin-top: 4px; }
/* Last-trip map tile (client) */
.dm-map-tile {
background: var(--dm-surface);
border-radius: var(--dm-r-xl);
overflow: hidden;
border: 1px solid var(--dm-divider);
box-shadow: var(--dm-shadow-sm);
}
.dm-map-tile__map-wrap { position: relative; }
.dm-map-tile__chip {
position: absolute; top: 10px; left: 12px;
font-size: var(--dm-fs-10); font-weight: 700; letter-spacing: .5px;
text-transform: uppercase;
padding: 4px 8px; border-radius: 999px;
background: var(--dm-surface); color: var(--dm-text-2);
box-shadow: var(--dm-shadow-sm);
}
.dm-map-tile__body { padding: 12px 14px; }
.dm-map-tile__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
/* domchu: раньше был одиночный .dm-map-tile__route = "from → to" в одну
строку с ellipsis'ом — длинные адреса резались. Теперь stack из двух
строк (from / to), каждая отдельно, price выравнен по верхней строке. */
.dm-map-tile__route-stack {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.dm-map-tile__route-line {
font-weight: 600; font-size: var(--dm-fs-14);
color: var(--dm-text); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-map-tile__price {
font-weight: 700; font-size: var(--dm-fs-15);
font-variant-numeric: tabular-nums; white-space: nowrap;
padding-top: 2px; /* оптически выравниваем с первой строкой stack'а */
}
.dm-map-tile__meta {
font-size: var(--dm-fs-11); color: var(--dm-text-3);
margin-top: 3px; font-weight: 500;
}
.dm-map-tile__cta-wrap { margin-top: 12px; }
/* Mini map
domchu: SVG-overlay удалён — MiniMap теперь либо шиммер (preload через
new Image() ещё не завершён), либо ![]()
с реальной картой от
off-screen MapLibre. Маркеры/route запечены в изображение. */
.dm-minimap { width: 100%; height: 160px; display: block; }
.dm-minimap__img {
width: 100%; height: 160px; object-fit: cover; display: block;
}
/* CTA spinner (dm-cta кнопка в loading-state при "Повторить маршрут")
Белый 20px, border 2.5px прозрачно-белый + white top — animation spin.
Совпадает с Maxim .btn-spinner из app.css но локален для DMHistory. */
.dm-cta-spinner {
display: inline-block;
width: 20px; height: 20px;
border: 2.5px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: dm-spin 0.8s linear infinite;
vertical-align: middle;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }
/* Loading state: spinner внутри, кнопка "думает". Остаётся живой визуально. */
.dm-cta[disabled] {
opacity: 0.85;
cursor: wait;
filter: none;
}
/* Locked state: действие недоступно (v194-trip-details: блок "Повторить"
при активном заказе у пассажира). Используем единый проект-токен
--state-disabled-opacity (0.4) что и в btn-primary:disabled / driver-offer-btn
/ ripple-disabled из app.css — consistent с остальным UI. Более высокая
специфичность (2 класса + :disabled) перебивает .dm-cta[disabled]. */
.dm-cta.is-locked,
.dm-cta.is-locked:disabled {
opacity: var(--state-disabled-opacity);
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
/* Pill кнопка "Повторить" в trip-карточке — аналогично locked-стиль */
.dm-pill:disabled {
opacity: var(--state-disabled-opacity);
cursor: not-allowed;
pointer-events: none;
background: transparent;
}
/* Shimmer / skeletons */
.dm-shimmer {
display: inline-block;
background: var(--dm-skeleton-base);
position: relative; overflow: hidden;
border-radius: 6px;
}
.dm-shimmer::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(
100deg,
transparent 20%,
var(--dm-skeleton-shine) 50%,
transparent 80%
);
animation: dm-shimmer 1.6s ease-in-out infinite;
}
.dm-skeleton-card {
display: flex; gap: 12px; padding: 14px;
background: var(--dm-surface);
border-radius: var(--dm-r-md);
border: 1px solid var(--dm-divider);
}
.dm-skeleton-card__trail {
display: flex; flex-direction: column; align-items: center; gap: 4px; width: 14px;
}
.dm-skeleton-card__body {
flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.dm-skeleton-card__row {
display: flex; justify-content: space-between; gap: 10px;
}
.dm-skeleton-hero {
height: 170px;
border-radius: var(--dm-r-xl);
background: var(--dm-skeleton-base);
position: relative; overflow: hidden;
}
.dm-skeleton-hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(
100deg,
transparent 20%,
var(--dm-skeleton-shine) 50%,
transparent 80%
);
animation: dm-shimmer 1.6s ease-in-out infinite;
}
.dm-skeleton-hero--sm { height: 110px; }
/* Empty states */
.dm-empty { display: flex; flex-direction: column; gap: 16px; }
.dm-empty__hero {
background: linear-gradient(135deg, var(--dm-brand) 0%, var(--dm-brand-dark) 100%);
color: #fff;
border-radius: var(--dm-r-xl);
padding: 22px 20px;
position: relative; overflow: hidden;
}
.dm-empty__hero-label {
font-size: var(--dm-fs-12); font-weight: 600; letter-spacing: .4px;
text-transform: uppercase; opacity: .82;
}
.dm-empty__hero-title {
font-size: var(--dm-fs-20); font-weight: 700; line-height: 1.2;
margin-top: 8px; letter-spacing: -0.01em;
}
.dm-empty__hero-sub {
opacity: .84; font-size: var(--dm-fs-13); margin-top: 8px; max-width: 280px;
}
.dm-empty__card {
background: var(--dm-surface);
border-radius: var(--dm-r-md);
padding: 14px 16px;
border: 1px solid var(--dm-divider);
}
.dm-empty__card-title {
font-size: var(--dm-fs-14); font-weight: 600; color: var(--dm-text);
}
.dm-empty__list {
display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.dm-empty__list-row {
display: flex; align-items: center; gap: 12px;
}
.dm-empty__list-icon {
width: 34px; height: 34px; border-radius: 10px;
background: var(--dm-brand-tint); color: var(--dm-brand-ink);
display: grid; place-items: center;
}
.dm-empty__list-text { flex: 1; min-width: 0; }
.dm-empty__list-title { font-size: var(--dm-fs-14); font-weight: 600; color: var(--dm-text); }
.dm-empty__list-sub { font-size: var(--dm-fs-12); color: var(--dm-text-3); }
.dm-empty__section-label {
font-size: var(--dm-fs-12); color: var(--dm-text-3);
padding: 0 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
/* Focus-visible fallback для всех кнопок в контексте истории */
.dm-history-page button:focus-visible {
outline: 2px solid var(--dm-focus);
outline-offset: 2px;
}
/* ════════════════════════════════════════════════════════
v194-trip-details — страница деталей одной поездки
Открывается как drawer subpage, компонент DrawerPageTripDetails
в drawer.js. Стили следуют тому же .dm-* / token-based паттерну
что и история — темы переключаются автоматом через body-классы.
════════════════════════════════════════════════════════ */
/* Структура: (1) MapTile-карточка (тот же компонент что в истории, с
mapImage + from/to + meta + "Повторить маршрут") → (2) driver-card →
(3) кнопка "Удалить из истории". Все блоки .dm-* — темы через body. */
.dm-trip-details {
padding: 4px 14px 28px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--dm-font);
color: var(--dm-text);
}
/* ── User card (driver для client-view / client для driver-view) ──
Role-aware. Для клиента — карточка водителя + опции авто. Для
водителя — карточка пассажира + кнопка "Больше не назначать"
внутри той же карточки.
Layout:
[avatar 56px] ВОДИТЕЛЬ/ПАССАЖИР ← label uppercase muted
Имя ★ 4.9 ← name + rating-pill (gold)
Toyota Camry · Т123АА ← car line (только client-view)
─────── (separator только в driver-view) ───────
[ Больше не назначать ] / [ В чёрном списке ] ← full-width red CTA
v194-trip-details-driver: .dm-trip-details__driver теперь flex-column,
внутри flex-row .dm-trip-details__driver-row (avatar+info) и опциональная
action-row .dm-trip-details__driver-action. */
.dm-trip-details__driver {
background: var(--dm-surface);
border-radius: var(--dm-r-md);
padding: 14px 16px;
border: 1px solid var(--dm-divider);
box-shadow: var(--dm-shadow-sm);
display: flex;
flex-direction: column;
}
.dm-trip-details__driver-row {
display: flex;
align-items: center;
gap: 14px;
}
.dm-trip-details__driver-avatar {
width: 56px; height: 56px; border-radius: 50%;
background: var(--dm-surface-3);
flex-shrink: 0;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.dm-trip-details__driver-avatar-img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Shimmer-состояние аватара: пока preload (new Image в useEffect) не
завершил загрузку. Как только onload/onerror — класс снимается,
реальный ![]()
рендерится. Реюзаем keyframes dm-shimmer. */
.dm-trip-details__driver-avatar--loading {
background: var(--dm-skeleton-base);
}
.dm-trip-details__driver-avatar--loading::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
100deg,
transparent 20%,
var(--dm-skeleton-shine) 50%,
transparent 80%
);
animation: dm-shimmer 1.6s ease-in-out infinite;
}
.dm-trip-details__driver-avatar-initial {
font-size: 22px; font-weight: 600; color: var(--dm-text-2);
font-family: var(--dm-font);
}
.dm-trip-details__driver-info { flex: 1; min-width: 0; }
.dm-trip-details__driver-label {
font-size: var(--dm-fs-10); font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; color: var(--dm-text-3);
margin-bottom: 4px;
}
.dm-trip-details__driver-name-row {
display: flex; align-items: center; gap: 8px;
min-width: 0;
}
.dm-trip-details__driver-name {
font-size: var(--dm-fs-15);
font-weight: 600;
color: var(--dm-text);
line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 0 1 auto; min-width: 0;
}
/* Gold pill — тот же --rating-gradient что использует .offer-rating-badge
и .ride-driver-rating из app.css. Глобальный токен, темы переключаются
через body.client-night автоматически (см. app.css:201 / app.css:864). */
.dm-trip-details__driver-rating {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 8px;
background: var(--rating-gradient);
color: var(--text-on-primary, #fff);
font-size: var(--dm-fs-11);
font-weight: 700;
font-variant-numeric: tabular-nums;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08));
white-space: nowrap;
}
.dm-trip-details__driver-car {
margin-top: 4px;
font-size: var(--dm-fs-12);
color: var(--dm-text-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* v194-passenger-modal: строка со счётчиками пассажира (N поездок | N отмен).
Только driver-view, заменяет carLine которая для driver пустая.
tabular-nums — цифры ровно выровнены. */
.dm-trip-details__driver-stats {
margin-top: 4px;
font-size: var(--dm-fs-12);
color: var(--dm-text-3);
font-variant-numeric: tabular-nums;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-trip-details__driver-stats-sep {
margin: 0 6px;
opacity: 0.5;
}
/* v194-passenger-modal: кликабельный row (avatar+info) для driver — тап
открывает стандартную модалку showPassengerProfile (ui.js). Feedback
через opacity на :active (не меняем layout, минимально инвазивно). */
.dm-trip-details__driver-row--clickable {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity var(--dm-dur-150) ease;
}
.dm-trip-details__driver-row--clickable:active {
opacity: 0.65;
}
/* ── Actions — теперь только "Удалить из истории" ─────────
"Повторить маршрут" переехал внутрь MapTile, отдельной
кнопкой тут не дублируем. */
.dm-trip-details__actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
/* Дата/время в верху body карточки map-tile — показывается когда
карта скрыта (hideMap=true у старых заказов без coords). Подменяет
визуально chip-на-карте: тот же uppercase + letter-spacing. */
.dm-map-tile__body-date {
font-size: var(--dm-fs-10); font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; color: var(--dm-text-3);
margin-bottom: 8px;
}
/* ════════════════════════════════════════════════════════
Модалка подтверждения удаления поездки.
Используем базовый shell .cancel-modal-overlay + .cm-backdrop +
.cm-card из app.css (backdrop scrim, scale+fade через .visible,
уже темизированы). Кнопки заменены на паттерн из preorder-modal:
слева text-button "Отмена" (серый без bg), справа filled pill
"Удалить" (--primary brand color, не красный).
Глобальные токены --primary / --text-on-primary / --text-muted /
--surface-sunken / --fs-* / --fw-* — переключаются автоматом
через body.client-night (и body.driver-mode в будущем).
════════════════════════════════════════════════════════ */
/* Компактный padding карточки (убираем сверху запас под warning-icon
которой у нас нет — используем только title/subtitle/actions). */
.dm-confirm-card {
padding: 22px 22px 18px !important;
}
.dm-confirm-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 18px;
}
/* Text-button "Отмена" слева — паттерн .overlay-btn.text из preorder */
.dm-confirm-btn-text {
background: transparent;
border: none;
color: var(--text-muted);
font-family: var(--dm-font);
font-size: var(--fs-14);
font-weight: var(--fw-500);
padding: 10px 14px;
border-radius: var(--dm-r-sm);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 150ms, transform 100ms ease;
}
.dm-confirm-btn-text:active {
background: var(--surface-sunken);
transform: scale(.97);
}
/* Pill-primary "Удалить" справа — паттерн .overlay-btn.primary из preorder
(padding space-4/space-7, radius 9999px, shadow, --primary bg). */
.dm-confirm-btn-primary {
background: var(--primary);
color: var(--text-on-primary);
border: none;
font-family: var(--dm-font);
font-size: var(--fs-14);
font-weight: var(--fw-600);
padding: 10px 22px;
border-radius: 9999px;
box-shadow: var(--shadow-btn-cta);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 100ms ease, filter 150ms, box-shadow 150ms;
}
.dm-confirm-btn-primary:hover { filter: brightness(1.04); }
.dm-confirm-btn-primary:active {
transform: scale(.97);
box-shadow: var(--shadow-btn-cta-active);
}
/* Pill-danger "Добавить в ЧС" — тот же паттерн что .dm-confirm-btn-primary
но filled red (--dm-danger). Для blacklist-модалки (destructive permanent
action, нужно визуально отличить от delete-модалки где blue). */
.dm-confirm-btn-danger {
background: var(--dm-danger);
color: #fff;
border: none;
font-family: var(--dm-font);
font-size: var(--fs-14);
font-weight: var(--fw-600);
padding: 10px 22px;
border-radius: 9999px;
box-shadow: var(--shadow-btn-cta);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 100ms ease, filter 150ms, box-shadow 150ms;
}
.dm-confirm-btn-danger:hover { filter: brightness(1.06); }
.dm-confirm-btn-danger:active {
transform: scale(.97);
box-shadow: var(--shadow-btn-cta-active);
filter: brightness(1.04);
}
/* Danger variant of dm-cta — outlined, красный.
Использует --dm-danger который меняется по темам (#EF4444 day / #F87171 night
client + #DC2626 / #FB7185 driver). rgba() напрямую с var не работает,
поэтому пресс-фон через hardcoded rgba (red, видно на обеих темах). */
.dm-cta--danger {
background: transparent;
color: var(--dm-danger);
border: 1px solid var(--dm-border);
box-shadow: none;
}
.dm-cta--danger:hover { filter: none; background: rgba(239, 68, 68, 0.06); }
.dm-cta--danger:active { transform: scale(.985); background: rgba(239, 68, 68, 0.14); }
body.client-night .dm-cta--danger:hover { background: rgba(248, 113, 113, 0.10); }
body.client-night .dm-cta--danger:active { background: rgba(248, 113, 113, 0.20); }
/* Danger spinner — красный вместо белого (для dm-cta--danger loading state) */
.dm-cta-spinner--danger {
border: 2.5px solid rgba(239, 68, 68, 0.28);
border-top-color: var(--dm-danger);
}
/* Secondary variant — outlined neutral. Block 9 §1.6/§1.7: «Забытые вещи»
и «Сообщить о проблеме» в TripDetails. Не destructive, нейтральный. */
.dm-cta--secondary {
background: transparent;
color: var(--dm-text);
border: 1px solid var(--dm-border);
box-shadow: none;
}
.dm-cta--secondary:hover { filter: none; background: rgba(0, 0, 0, 0.04); }
.dm-cta--secondary:active { transform: scale(.985); background: rgba(0, 0, 0, 0.08); }
body.client-night .dm-cta--secondary:hover { background: rgba(255, 255, 255, 0.05); }
body.client-night .dm-cta--secondary:active { background: rgba(255, 255, 255, 0.10); }
/* ── v194-trip-details-driver: action row внутри user-card + blacklist btn ──
Кнопка "Больше не назначать" располагается ВНУТРИ карточки пассажира
(driver-view), под строкой info, с разделителем-бордером сверху.
filled red (destructive permanent action). При активации ЧС — меняется
на "В чёрном списке" + disabled (через .is-locked). */
.dm-trip-details__driver-action {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--dm-divider);
}
.dm-cta-blacklist {
all: unset;
display: block;
text-align: center;
box-sizing: border-box;
width: 100%;
min-height: 44px; /* фикс высоты = такая же как у skeleton'а */
padding: 11px;
background: var(--dm-danger);
color: #fff;
border: 1px solid transparent; /* placeholder — чтобы при switch на --active размер не дёрнулся */
border-radius: var(--dm-r-sm);
font-family: var(--dm-font);
font-size: var(--dm-fs-14);
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--dm-dur-200) var(--dm-ease-std),
color var(--dm-dur-200) var(--dm-ease-std),
border-color var(--dm-dur-200) var(--dm-ease-std),
transform var(--dm-dur-150) var(--dm-ease-std),
filter var(--dm-dur-150);
box-shadow: var(--dm-shadow-sm);
}
.dm-cta-blacklist:hover { filter: brightness(1.06); }
.dm-cta-blacklist:active { transform: scale(.985); filter: brightness(1.04); }
.dm-cta-blacklist:focus-visible {
outline: 2px solid var(--dm-focus);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--dm-focus-ring);
}
/* "В чёрном списке" — кнопка ОСТАЁТСЯ кликабельной (tap → модалка
разблокировки), но визуально переходит в outline-state чтобы сигнализить
"это текущее applied-состояние, tap = toggle off". Не filled-red потому
что иначе не отличишь от "добавить в ЧС" действия. */
.dm-cta-blacklist--active {
background: transparent;
color: var(--dm-danger);
border: 1px solid var(--dm-danger);
box-shadow: none;
}
.dm-cta-blacklist--active:hover { filter: none; background: rgba(239, 68, 68, 0.06); }
.dm-cta-blacklist--active:active { transform: scale(.985); background: rgba(239, 68, 68, 0.14); }
body.client-night .dm-cta-blacklist--active:hover { background: rgba(248, 113, 113, 0.10); }
body.client-night .dm-cta-blacklist--active:active { background: rgba(248, 113, 113, 0.20); }
/* :disabled применяется только в момент in-flight запроса (add/remove),
пока мы ждём ответа от backend. Не permanent state. */
.dm-cta-blacklist:disabled {
opacity: 0.85;
cursor: wait;
pointer-events: none;
}
/* ========================================================
Block 9 v4.1: action-row [Больше не назначать compact] [📞] [💬]
в карточке counterparty внутри DrawerPageTripDetails.
Иконки переиспользуют существующие классы .ride-circle-btn +
.ride-circle-call/.ride-circle-chat (см. app.css:14552+) — те же
токены (--d-accept / --d-surface-card / shadows / dark-mode), что
в active-ride card. Размер 40px (vs дефолтный 48px) — через
.dm-action-row__icon size-override.
======================================================== */
.dm-action-row {
display: flex;
gap: 8px;
align-items: center;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--dm-divider);
}
.dm-action-row__blacklist {
flex: 1;
min-width: 0;
}
.dm-action-row__icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
min-width: 40px;
}
.dm-action-row__icon svg {
width: 18px;
height: 18px;
}
/* Disabled state — visual only (40% opacity), pointer-events остаются
чтобы JS-обработчик показал toast «почему недоступно». */
.dm-action-row__icon.is-disabled {
opacity: 0.4;
box-shadow: none;
}
.dm-action-row__icon.is-disabled:active {
opacity: 0.4;
box-shadow: none;
}
/* Compact-вариант кнопки blacklist — высота под круглые иконки. */
.dm-cta-blacklist--compact {
min-height: 40px;
padding: 8px 10px;
font-size: var(--dm-fs-13);
font-weight: 600;
}
/* DrawerPageChat: blocked banner — outline жёлтый pill (warning). */
.dm-chat-blocked-banner {
margin: var(--space-3) var(--space-4) 0;
padding: 10px 14px;
background: rgba(255, 184, 0, 0.10);
border: 1px solid rgba(255, 184, 0, 0.32);
border-radius: var(--dm-r-sm);
font-size: var(--dm-fs-13);
font-weight: 500;
color: var(--dm-text);
text-align: center;
}