/** * ccc.css — design tokens + component styles for the CCC ops dashboard. * Light by default, with a dark "ops center" theme available via * `` (toggled in the header, persisted in * localStorage — see app.js `$store.app.toggleTheme`). Tailwind (Play CDN) * still handles static template layout; anything built as a JS-generated * HTML string (Leaflet divIcons, cluster icons, virtual-list rows) is * styled from here instead, since the Play CDN only scans classes present * in the DOM at parse time. * * Status palette (fixed roles, never reused for anything else): * moving -> --status-good idle -> --status-warning * offline/no-fix -> --ink-muted (neutral, not a severity) * alarm/SOS -> --status-critical (reserved exclusively for SOS) * The severity hues themselves don't change between themes; only the * lighter/darker text variants used on tinted chips do (--accent-*-text). */ :root { color-scheme: light; /* surfaces */ --surface-0: #f2f3f0; /* page plane */ --surface-1: #ffffff; /* cards, panels */ --surface-2: #eceee8; /* raised: rows, tiles */ --surface-3: #dfe2da; /* hover/active */ /* ink */ --ink-primary: #16171a; --ink-secondary: #4c4e48; --ink-muted: #75766f; --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.20); /* brand — Avis red */ --brand: #c8102e; --brand-hover: #a10d25; --brand-dim: #f9dade; /* status (fixed, do not theme) */ --status-good: #0ca30c; --status-warning: #c98200; --status-critical: #d03b3b; /* accent text: readable tints of the status colors on tinted chips — light tints on dark surfaces, darker shades on light surfaces */ --accent-good-text: #0d7a0d; --accent-warning-text: #8a5a00; --accent-critical-text: #b23030; --accent-critical-text-soft: #a12323; /* radii / motion */ --r-sm: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --ease: cubic-bezier(0.2, 0.7, 0.4, 1); /* wallboard-aware scale: clamps up on very wide/short-DPI screens (typical TV-in-a-room) while staying normal at desktop widths */ --scale: clamp(1, 0.85 + 0.4vw, 1.35); } :root[data-theme="dark"] { color-scheme: dark; --surface-0: #0d0d0d; --surface-1: #1a1a19; --surface-2: #232322; --surface-3: #2c2c2a; --ink-primary: #ffffff; --ink-secondary: #c3c2b7; --ink-muted: #898781; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --brand-hover: #e0334f; --brand-dim: #5c1620; --status-warning: #fab219; --accent-good-text: #bfe7bf; --accent-warning-text: #ffdf9e; --accent-critical-text: #ffb3b3; --accent-critical-text-soft: #ffdada; } * { box-sizing: border-box; } body { background: var(--surface-0); color: var(--ink-primary); font-variant-numeric: proportional-nums; } [x-cloak] { display: none !important; } /* ---------------------------------------------------------------- buttons */ .btn-primary, .btn-secondary, .btn-danger, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; border-radius: var(--r-sm); transition: background-color 0.15s, border-color 0.15s, opacity 0.15s; white-space: nowrap; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: var(--surface-2); color: var(--ink-primary); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-3); } .btn-danger { background: var(--status-critical); color: #fff; } .btn-danger:hover { background: #b53232; } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--ink-secondary); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); color: var(--ink-primary); } .btn-ghost.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } .card { background: var(--surface-1); border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } /* ---------------------------------------------------------------- header */ .ccc-header { background: var(--surface-1); border-bottom: 1px solid var(--border); padding: 0.6rem 1rem; } .pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-secondary); } .pill-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .pill--live { color: var(--accent-good-text); } .pill--live .pill-dot { background: var(--status-good); box-shadow: 0 0 0 2px rgba(12,163,12,0.25); } .pill--reconnecting { color: var(--accent-warning-text); } .pill--reconnecting .pill-dot { background: var(--status-warning); animation: ccc-blink 1s step-start infinite; } .pill--down { color: var(--accent-critical-text); } .pill--down .pill-dot { background: var(--status-critical); animation: ccc-blink 0.6s step-start infinite; } .pill--armed { color: var(--accent-good-text); } .pill--armed .pill-dot { background: var(--status-good); } .pill--not-armed { color: var(--ink-muted); cursor: pointer; } .pill--not-armed .pill-dot { background: var(--ink-muted); } .pill--suspended { color: #fff; background: var(--status-critical); border-color: var(--status-critical); animation: ccc-blink 0.6s step-start infinite; } @keyframes ccc-blink { 50% { opacity: 0.35; } } .ccc-clock { font-variant-numeric: tabular-nums; color: var(--ink-secondary); font-size: 0.8rem; } /* ---------------------------------------------------------------- stat tiles */ .stat-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; } @media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.7rem 0.9rem; text-align: left; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.1s; border-left: 3px solid transparent; } .stat-tile:hover { background: var(--surface-2); } .stat-tile:active { transform: scale(0.98); } .stat-tile.is-active { border-color: var(--border-strong); background: var(--surface-2); } .stat-tile__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 700; margin-bottom: 0.15rem; } .stat-tile__value { font-size: calc(1.6rem * var(--scale)); font-weight: 700; line-height: 1; color: var(--ink-primary); } .stat-tile--total { border-left-color: var(--brand); } .stat-tile--moving { border-left-color: var(--status-good); } .stat-tile--moving .stat-tile__value { color: var(--accent-good-text); } .stat-tile--idle { border-left-color: var(--status-warning); } .stat-tile--idle .stat-tile__value { color: var(--accent-warning-text); } .stat-tile--offline { border-left-color: var(--ink-muted); } .stat-tile--sos { border-left-color: var(--status-critical); background: rgba(208,59,59,0.10); } .stat-tile--sos .stat-tile__value { color: var(--accent-critical-text); } .stat-tile--sos.has-alarms { animation: ccc-tile-pulse 1.6s var(--ease) infinite; } @keyframes ccc-tile-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208,59,59,0.0); } 50% { box-shadow: 0 0 0 4px rgba(208,59,59,0.25); } } /* ---------------------------------------------------------------- sidebar */ .sidebar { display: flex; flex-direction: column; min-height: 0; } .siren-arm-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.6rem; border-radius: var(--r-md); background: var(--brand); color: #fff; font-weight: 700; font-size: 0.85rem; } .sos-panel { position: sticky; top: 0; z-index: 5; background: var(--surface-1); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .sos-panel__title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--status-critical); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .sos-card { background: rgba(208,59,59,0.10); border: 1px solid rgba(208,59,59,0.45); border-radius: var(--r-md); padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; animation: ccc-card-pulse 1.6s var(--ease) infinite; } @keyframes ccc-card-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(208,59,59,0.0); transform: scale(1); } 50% { box-shadow: 0 0 0 3px rgba(208,59,59,0.18); transform: scale(1.005); } } @media (prefers-reduced-motion: reduce) { .sos-card { animation: none; } } .sos-card__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .sos-card__name { font-weight: 700; font-size: 0.85rem; color: var(--accent-critical-text-soft); } .sos-card__meta { font-size: 0.7rem; color: var(--accent-critical-text); margin-top: 0.2rem; } .sos-card__timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-primary); } .sos-card__actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; } .sos-card__actions .btn-danger, .sos-card__actions .btn-secondary { flex: 1; padding: 0.35rem 0.5rem; font-size: 0.72rem; } .sos-card--aging { border-color: rgba(208,59,59,0.75); } .sos-card--stale { border-width: 2px; } .vfilters { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem 0 0.4rem; } .vsearch { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.4rem 0.6rem; font-size: 0.78rem; color: var(--ink-primary); } .vsearch::placeholder { color: var(--ink-muted); } .vsearch:focus { outline: none; border-color: var(--brand); } .vchips { display: flex; gap: 0.3rem; flex-wrap: wrap; } .vchip { padding: 0.25rem 0.55rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-secondary); cursor: pointer; } .vchip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; } .vsort { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.3rem 0.5rem; font-size: 0.72rem; color: var(--ink-secondary); } /* ---------------------------------------------------------- virtual list */ .vlist-viewport { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; will-change: scroll-position; position: relative; } .vlist-sizer { position: relative; } .vlist-window { position: absolute; top: 0; left: 0; right: 0; } :root { --vlist-row-h: 58px; } .vrow { height: var(--vlist-row-h); box-sizing: border-box; overflow: hidden; padding: 0.45rem 0.6rem; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; } .vrow:hover { background: var(--surface-2); } .vrow.is-selected { background: var(--brand-dim); border-color: var(--brand); } .vrow__top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .vrow__id { font-weight: 600; font-size: 0.8rem; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vrow__speed { font-size: 0.7rem; color: var(--ink-muted); flex: none; } .vrow__meta { font-size: 0.68rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } .status-dot--moving { background: var(--status-good); } .status-dot--idle { background: var(--status-warning); } .status-dot--offline, .status-dot--stale, .status-dot--nofix, .status-dot--unknown { background: var(--ink-muted); } .status-dot--alarm { background: var(--status-critical); box-shadow: 0 0 0 2px rgba(208,59,59,0.35); } .vlist-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.2rem 0.1rem; font-size: 0.68rem; color: var(--ink-muted); } /* ------------------------------------------------------------------ map */ .map-shell { position: relative; overflow: hidden; } #map { position: absolute; inset: 0; background: var(--surface-1); } /* In dark theme, desaturate the light Mappls raster basemap so it recedes behind the dark chrome; in light theme the raster tiles already match the page, so no filter is applied. Markers/overlay panes are siblings, not children, so unaffected either way. Satellite imagery is never filtered. */ :root[data-theme="dark"] .leaflet-tile-pane { filter: grayscale(0.45) brightness(0.72) contrast(1.08) saturate(0.7); } :root[data-theme="dark"] body.ccc-basemap-satellite .leaflet-tile-pane { filter: none; } .leaflet-container { background: var(--surface-1); font-family: inherit; } .leaflet-control-zoom a { background: var(--surface-2) !important; color: var(--ink-primary) !important; border-color: var(--border) !important; } .leaflet-control-zoom a:hover { background: var(--surface-3) !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--ink-primary); } .leaflet-popup-content { font-size: 0.78rem; } .map-controls { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 500; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; } .map-controls .btn-secondary, .map-controls .btn-ghost { background: var(--surface-1); } .map-legend { display: flex; gap: 0.6rem; flex-wrap: wrap; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.4rem 0.6rem; font-size: 0.68rem; color: var(--ink-secondary); } .map-legend__item { display: flex; align-items: center; gap: 0.3rem; } .basemap-fail-banner { position: absolute; top: 0; left: 0; right: 0; z-index: 600; background: var(--status-critical); color: #fff; font-size: 0.78rem; padding: 0.5rem 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } /* -- vehicle marker (divIcon) -- rotate only .vm__rot, never the icon root */ .vm { position: relative; width: 26px; height: 26px; } .vm__ring { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid var(--status-critical); transform: scale(0.6); opacity: 0.9; pointer-events: none; animation: ccc-radar 1.6s var(--ease) infinite; } .vm__ring--2 { animation-delay: 0.8s; } @keyframes ccc-radar { 0% { transform: scale(0.55); opacity: 0.95; border-width: 3px; } 70% { opacity: 0.25; } 100% { transform: scale(3.4); opacity: 0; border-width: 1px; } } @media (prefers-reduced-motion: reduce) { .vm__ring { animation-duration: 3.2s; } } .vm__rot { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; } .vm__car { width: 100%; height: 100%; overflow: visible; } .vm__car-body { fill: var(--status-good); stroke: var(--surface-0); stroke-width: 1; } .vm__car-glass, .vm__car-wheel { fill: var(--surface-0); } .vm--idle .vm__car-body { fill: var(--status-warning); } .vm--offline .vm__car-body, .vm--stale .vm__car-body, .vm--nofix .vm__car-body, .vm--unknown .vm__car-body { fill: var(--ink-muted); } .vm--alarm .vm__car-body { fill: var(--status-critical); } .vm--alarm .vm__car { animation: ccc-throb 0.8s ease-in-out infinite alternate; } @keyframes ccc-throb { to { transform: scale(1.2); } } .vm--selected .vm__rot { filter: drop-shadow(0 0 4px rgba(200,16,46,0.9)); } .vm__label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-size: 10px; font-weight: 700; white-space: nowrap; color: var(--ink-primary); background: rgba(13,13,13,0.75); padding: 0 4px; border-radius: 3px; pointer-events: none; } /* -- cluster icons -- */ .vcluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.78rem; border: 2px solid var(--surface-0); background: var(--brand); } .vcluster--has-alarm { background: var(--status-critical); } /* --------------------------------------------------------------- detail card */ .detail-card { position: absolute; bottom: 0.6rem; right: 0.6rem; z-index: 500; width: 260px; max-height: calc(100% - 1.2rem); overflow-y: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.75rem 0.85rem; font-size: 0.76rem; } .detail-card__title { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; } .detail-card__row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.18rem 0; border-bottom: 1px dashed var(--border); } .detail-card__row:last-child { border-bottom: none; } .detail-card__k { color: var(--ink-muted); } .detail-card__v { color: var(--ink-primary); font-weight: 600; text-align: right; } /* -------------------------------------------------------------------- modal */ .modal-backdrop { background: rgba(0,0,0,0.6); } .modal-panel { background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-primary); } .modal-panel textarea, .modal-panel input { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-primary); } .modal-panel textarea::placeholder { color: var(--ink-muted); } /* ------------------------------------------------------------------- toast */ .ccc-toast { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }