:root { --bg: #0f1420; --bg-elev: #18202f; --bg-elev-2: #212c40; --border: #2a3550; --text: #e6ebf5; --text-dim: #9aa6c0; --accent: #4da3ff; --accent-soft: rgba(77, 163, 255, 0.15); --ok: #34d399; --off: #6b7280; /* Semantic tokens (overridden by the light theme below). */ --map-bg: #0b0f17; --divider: rgba(42, 53, 80, 0.5); --shadow: rgba(0, 0, 0, 0.5); --gold: #ffd166; --danger-fg: #f87171; --danger-bg: rgba(248, 113, 113, 0.16); --info-fg: #60a5fa; --info-bg: rgba(96, 165, 250, 0.16); --ok-bg: rgba(52, 211, 153, 0.16); --sidebar-w: 340px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Light theme: flip the palette. Applied via data-theme="light" on . */ :root[data-theme="light"] { --bg: #eef1f7; --bg-elev: #ffffff; --bg-elev-2: #e7ecf4; --border: #d3dae8; --text: #1a2233; --text-dim: #5c6678; --accent: #1d6fe0; --accent-soft: rgba(29, 111, 224, 0.12); --ok: #0a8f57; --off: #aab2c2; --map-bg: #e7ecf3; --divider: rgba(20, 30, 55, 0.12); --shadow: rgba(20, 30, 55, 0.18); --gold: #c98a00; --danger-fg: #d23b3b; --danger-bg: rgba(210, 59, 59, 0.12); --info-fg: #1d6fe0; --info-bg: rgba(29, 111, 224, 0.12); --ok-bg: rgba(10, 143, 87, 0.14); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); } #app { display: flex; height: 100vh; overflow: hidden; } /* --- Sidebar ------------------------------------------------------------ */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); display: flex; flex-direction: column; background: var(--bg-elev); border-right: 1px solid var(--border); min-height: 0; } .sidebar__header { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); } .sidebar__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: 0.2px; } .sidebar__status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); } .conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--off); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); } .conn-dot--on { background: var(--ok); animation: pulse 2s infinite; } .conn-dot--off { background: var(--off); } .theme-toggle { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show the icon for the theme you'd switch TO. */ .theme-toggle__moon { display: none; } :root[data-theme="light"] .theme-toggle__sun { display: none; } :root[data-theme="light"] .theme-toggle__moon { display: block; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .tabs { display: flex; padding: 10px 12px 0; gap: 6px; } .tab { flex: 1; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--text-dim); font-size: 13px; font-weight: 600; border-radius: 8px 8px 0 0; cursor: pointer; } .tab--active { background: var(--bg-elev-2); color: var(--text); } .sidebar__search { padding: 10px 12px; } .sidebar__search input { width: 100%; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; } .sidebar__search input:focus { outline: none; border-color: var(--accent); } .panel { display: none; flex: 1; min-height: 0; overflow-y: auto; } .panel--active { display: block; } .list { list-style: none; margin: 0; padding: 0 8px 8px; } .list-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; } .list-item:hover { background: var(--bg-elev-2); } .list-item--selected { background: var(--accent-soft); outline: 1px solid var(--accent); } .route-badge { flex: 0 0 auto; min-width: 34px; padding: 3px 6px; border-radius: 6px; font-weight: 700; font-size: 12px; text-align: center; color: #fff; } .list-item__text { display: flex; flex-direction: column; overflow: hidden; } .list-item__primary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-item__secondary { color: var(--text-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); } .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 0; } .empty { padding: 16px; color: var(--text-dim); font-size: 13px; } /* --- Map ---------------------------------------------------------------- */ .map { flex: 1; height: 100%; background: var(--map-bg); } /* Vehicle marker: an upright bus glyph in a circular badge, rendered via divIcon. The 34x34 container's transparent padding is fully tappable, giving a finger-friendly hit area on mobile. */ .vehicle-marker { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent; } .vehicle-marker__badge { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bus-color, var(--accent)); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: transform 0.1s ease; } .vehicle-marker__bus { width: 16px; height: 16px; fill: #fff; } .vehicle-marker--selected { z-index: 1000 !important; } .vehicle-marker--selected .vehicle-marker__badge { background: var(--gold); transform: scale(1.3); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5); } .vehicle-marker--selected .vehicle-marker__bus { fill: #3a2e00; } .stop-dot { width: 9px; height: 9px; background: #fff; border: 2px solid #2a3550; border-radius: 50%; } .leaflet-popup-content { font-size: 13px; } /* --- Vehicle details panel --------------------------------------------- */ .vpanel { position: absolute; z-index: 1000; top: 16px; right: 16px; width: 320px; max-height: calc(100% - 32px); overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px var(--shadow); padding: 14px; color: var(--text); } .vpanel__header { display: flex; align-items: flex-start; gap: 10px; } .vpanel__title { flex: 1; min-width: 0; } .vpanel__route { font-weight: 700; font-size: 14px; line-height: 1.25; } .vpanel__dest { color: var(--text-dim); font-size: 12px; margin-top: 2px; } .vpanel__close { flex: 0 0 auto; background: none; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; } .vpanel__close:hover { color: var(--text); } .vpanel__meta { margin: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; } .vpanel__row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; } .vpanel__label { color: var(--text-dim); } .vpanel__value { font-weight: 600; text-align: right; } .vpanel__op { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .vpanel__op-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; } .vpanel__op-link { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vpanel__op-link:hover { text-decoration: underline; } .vpanel__status { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } .vpanel__status--late { background: var(--danger-bg); color: var(--danger-fg); } .vpanel__status--early { background: var(--info-bg); color: var(--info-fg); } .vpanel__status--ontime { background: var(--ok-bg); color: var(--ok); } .vpanel__section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); margin-bottom: 8px; } .vpanel__stops { list-style: none; margin: 0; padding: 0; } .vpanel__stop { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--divider); } .vpanel__stop:last-child { border-bottom: none; } .vpanel__stop-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .vpanel__stop:first-child .vpanel__stop-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.2); } .vpanel__stop-name { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpanel__stop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vpanel__stop-sub { font-size: 11px; color: var(--text-dim); } .vpanel__stop-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .vpanel__stop-clock { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .vpanel__stop-sched-strike { color: var(--text-dim); text-decoration: line-through; font-weight: 400; } .vpanel__stop-status { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .vpanel__stop-status--late { background: var(--danger-bg); color: var(--danger-fg); } .vpanel__stop-status--early { background: var(--info-bg); color: var(--info-fg); } .vpanel__stop-status--ontime { background: var(--ok-bg); color: var(--ok); } .vpanel__stop-times { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; } .vpanel__stop-sched { font-size: 12px; font-weight: 600; } .vpanel__stop-eta { font-size: 11px; color: var(--ok); } .vpanel__empty { color: var(--text-dim); font-size: 13px; padding: 6px 0; } /* Departures board rows. */ .route-badge--sm { min-width: 30px; padding: 2px 5px; font-size: 11px; } .vpanel__dep { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); } .vpanel__dep:last-child { border-bottom: none; } .vpanel__dep-dest { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vpanel__dep-times { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; } .vpanel__dep-clock { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; } .vpanel__dep-eta { font-size: 11px; color: var(--text-dim); } .vpanel__dep-eta--live { color: var(--ok); font-weight: 600; } .vpanel__dep-sched { color: var(--text-dim); text-decoration: line-through; font-weight: 400; font-size: 12px; } .live-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--bg); background: var(--ok); padding: 1px 4px; border-radius: 4px; } .vpanel__note { margin-top: 10px; font-size: 11px; color: var(--text-dim); font-style: italic; } /* Mobile-only chrome: hamburger, backdrop, drawer close button. */ .sidebar-toggle, .sidebar-backdrop, .sidebar__close { display: none; } /* --- Mobile: full-screen map, sidebar as a left slide-in drawer --------- */ @media (max-width: 768px) { #app { display: block; height: 100vh; height: 100dvh; } .map { position: absolute; inset: 0; height: 100%; width: 100%; } /* Hamburger button to open the drawer (top-left over the map). */ .sidebar-toggle { display: flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: 12px; width: 42px; height: 42px; z-index: 1100; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 8px var(--shadow); cursor: pointer; } .sidebar-toggle__icon, .sidebar-toggle__icon::before, .sidebar-toggle__icon::after { content: ""; display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; } .sidebar-toggle__icon::before { position: absolute; top: -6px; } .sidebar-toggle__icon::after { position: absolute; top: 6px; } /* Dimmed backdrop behind the open drawer. */ .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1150; } /* Sidebar becomes a left drawer, hidden off-screen until opened. */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 330px); flex: none; max-height: none; height: 100%; height: 100dvh; border-right: 1px solid var(--border); box-shadow: 8px 0 24px var(--shadow); transform: translateX(-100%); transition: transform 0.25s ease; z-index: 1200; } .sidebar--open { transform: translateX(0); } .sidebar__header { display: flex; align-items: center; gap: 12px; } .sidebar__status { margin-left: auto; } /* Close button inside the drawer header. */ .sidebar__close { display: block; flex: 0 0 auto; background: none; border: none; color: var(--text-dim); font-size: 24px; line-height: 1; padding: 0 2px; cursor: pointer; } .sidebar__search input { font-size: 16px; /* >=16px stops iOS auto-zoom on focus */ } /* Detail panels dock to the bottom as full-width sheets. */ .vpanel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 72vh; max-height: 72dvh; border-left: none; border-right: none; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px var(--shadow); z-index: 1300; } }