/* ========================================================================= TransitLive Web — Buses & Streetcars New CSS for the Buses tab only. Everything that already exists in shell.css / components.css (.glass, .glass-fab, .grabber, .empty-state, .arrival-row, .time-chip, .line-badge, .filter-chip, .skeleton) is reused and NOT redefined here. Ports SurfaceMapTab's PanelSheet (persistent bottom sheet with peek / medium / large detents), its route + nearby-stop rows, and the vehicle / stop markers from SurfaceMapView. Every colour, size, radius and duration resolves through tokens.css. The six declarations in the block below are the only values with no --ds-* equivalent; they are agency brand colours (data, like --ds-go-* already is) plus the one on-saturated-fill ink, declared once so no rule further down hardcodes anything. buses.js reads them back with getComputedStyle because MapLibre GL paint properties cannot take var(). ========================================================================= */ :root { /* Agency / route-class brand colours. Ported verbatim from the iOS app's Color.surfaceRouteColor(for:). TTC subway line tags (1/2/4/5/6) and GO resolve to the existing --ds-ttc-* / --ds-go-ki tokens instead. */ --bus-route-yrt: #002C6C; --bus-route-bt: #ED7000; --bus-route-night: #1E3A8A; /* TTC 300–399 night bus */ --bus-route-streetcar: #DA251D; /* TTC 500–599 streetcar */ --bus-route-express: #0D9488; /* TTC 900–999 express bus */ --bus-route-default: #2563EB; /* Fixed white ink for glyphs and labels sitting on a saturated route fill. tokens.css only carries --ds-ink-on-light (dark ink for the yellow/orange fills); components.css uses a bare #fff in exactly this situation (.sev-tile, .shuttle-line__glyph). Named once here so the rules below stay token-only. buses.js picks between this and --ds-ink-on-light per route by luminance, so Line 1 yellow gets dark ink rather than unreadable white. */ --bus-ink-on-color: #FFFFFF; /* Vertical space the floating tab bar occupies at the panel's bottom edge: 56px bar + 12px lift + 12px breathing room. */ --bus-tabbar-clear: calc(var(--ds-safe-bottom) + 80px); /* Peek detent: grabber block + search row. Mirrors PeekDetent's 132pt. */ --bus-peek-h: 132px; } /* ========================================================================= PANE + MAP ========================================================================= */ .pane--buses { background: var(--ds-bg-map); overflow: hidden; } /* Two-class selector on purpose. maplibre-gl.css is injected into at runtime, so it lands AFTER this file and its `.maplibregl-map { position: relative }` would otherwise win the tie and collapse the container to zero height. The explicit width/height are belt and braces for the same reason. */ .pane--buses .bus-map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ds-bg-map); } /* MapLibre paints its own canvas; these only re-skin the chrome it injects so the attribution reads correctly against both basemaps. Three classes deep on purpose — maplibre-gl.css arrives after this file, so a two-class selector merely ties with its own rules and loses on order. */ .pane--buses .bus-map .maplibregl-ctrl-bottom-right, .pane--buses .bus-map .maplibregl-ctrl-bottom-left { /* Lift clear of the peeking panel. */ bottom: calc(var(--bus-peek-h) + var(--ds-space-4)); } .pane--buses .bus-map .maplibregl-ctrl-attrib { margin: 0; padding: var(--ds-space-2) var(--ds-space-8); background: var(--ds-glass-fill-material); -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur); color: var(--ds-label-secondary); font-family: var(--ds-font-sans); font-size: var(--ds-fs-10); line-height: 1.7; border-radius: var(--ds-radius-pill) 0 0 0; } .pane--buses .bus-map .maplibregl-ctrl-attrib a { color: var(--ds-label-secondary); text-decoration: none; } .pane--buses .bus-map .maplibregl-ctrl-attrib a:hover { text-decoration: underline; } /* Floating map controls — the SurfaceMapTab recenter button. .glass-fab is a shell class; only its placement lives here. */ .bus-fabs { position: absolute; right: var(--ds-gutter-page); bottom: calc(var(--bus-peek-h) + var(--ds-space-20)); z-index: 5; display: flex; flex-direction: column; gap: var(--ds-space-10); transition: transform var(--ds-dur-settle) var(--ds-ease-spring-soft); } .bus-fabs .glass-fab.is-on { color: var(--ds-text-blue); } /* ========================================================================= PANEL (PanelSheet) The panel is always full height and slides DOWN by --bus-panel-offset to expose less of itself. Transform-only, so a drag never relayouts the list underneath it — which is what keeps the drag at display refresh rate. ========================================================================= */ .bus-panel { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 86%; display: flex; flex-direction: column; border-radius: var(--ds-radius-44) var(--ds-radius-44) 0 0; border-bottom: 0; overflow: hidden; touch-action: none; transform: translateY(var(--bus-panel-offset, 0px)); transition: transform var(--ds-dur-settle) var(--ds-ease-spring-soft); } .bus-panel.is-dragging { transition: none; } /* shell.js reparents the floating tab bar INTO this panel, in normal flow between the search row and the list (shell.css .tab-bar.is-docked). It used to be absolutely positioned against the peek band, which held up while the panel was collapsed and dropped the bar straight onto the search field and route chips as soon as it was dragged open. Nothing to override here now. */ .bus-panel .grabber { margin: var(--ds-space-8) auto var(--ds-space-10); cursor: grab; } .bus-panel.is-dragging .grabber { cursor: grabbing; } /* --- Search row -------------------------------------------------------- */ .bus-panel__search { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ds-space-8); height: 40px; margin: 0 var(--ds-space-20) var(--ds-space-12); padding: 0 var(--ds-space-12); border-radius: var(--ds-radius-pill); background: rgba(255, 255, 255, var(--ds-tint-chip-neutral)); color: var(--ds-label-tertiary); } body.light-mode .bus-panel__search { background: rgba(0, 0, 0, var(--ds-tint-chip-neutral)); } .bus-panel__search input { flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-family: inherit; font-size: var(--ds-fs-16); color: var(--ds-label-primary); outline: none; } .bus-panel__search input::placeholder { color: var(--ds-label-tertiary); } .bus-panel__search input::-webkit-search-cancel-button { display: none; } .bus-clear { flex: 0 0 auto; appearance: none; -webkit-appearance: none; border: 0; padding: 0; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50%; background: transparent; color: var(--ds-label-tertiary); cursor: pointer; } .bus-clear.is-on { display: grid; } .bus-clear .icon { width: 15px; height: 15px; } /* --- Scrolling body ---------------------------------------------------- */ .bus-panel__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-width: none; /* The tab bar is now a flow sibling above this element, so only the panel's own downward translation is unreachable. buses.js keeps --bus-panel-offset in sync with the transform above. */ padding-bottom: calc(var(--ds-space-16) + var(--bus-panel-offset, 0px)); transition: opacity var(--ds-dur-fast) var(--ds-ease-smooth); } .bus-panel__body::-webkit-scrollbar { display: none; } /* At peek the visible band is exactly the grabber + search row, with the floating tab bar sitting over the rest — same as PeekDetent's 132pt, which budgets no room for list content. Without this the list bleeds through behind the tab bar. It fades straight back in as soon as a drag starts. */ .bus-panel[data-detent="peek"] .bus-panel__body { opacity: 0; pointer-events: none; } /* ========================================================================= ACTIVE-ROUTE HEADER (PanelSheet.routeHeader) ========================================================================= */ /* Sits in the panel chrome between the search row and the scroller. No sticky positioning and no backing fill: it is ON the glass, and stacking another surface on glass is exactly what the Liquid Glass rules forbid. */ .bus-route-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ds-space-10); padding: 0 var(--ds-space-20) var(--ds-space-12); } /* No route selected → no pill. At peek the pill takes the search field's place, mirroring PanelSheet's header swap; at medium/large both show. */ .bus-panel:not(.has-route) .bus-route-head { display: none; } .bus-panel.has-route[data-detent="peek"] .bus-panel__search { display: none; } .bus-route-head__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--route-color, var(--ds-label-tertiary)); } .bus-route-head__text { display: block; flex: 1 1 auto; min-width: 0; } .bus-route-head__title { display: block; font-size: var(--ds-fs-15); font-weight: var(--ds-fw-semibold); color: var(--ds-label-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bus-route-head__meta { display: flex; align-items: center; gap: var(--ds-space-6); font-size: var(--ds-fs-12); color: var(--ds-label-tertiary); font-variant-numeric: var(--ds-numeric); } .bus-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-system-green); box-shadow: var(--ds-glow-live); animation: bus-live-pulse var(--ds-dur-pulse-hint) var(--ds-ease-in-out) infinite alternate; } @keyframes bus-live-pulse { from { opacity: 1; } to { opacity: 0.35; } } /* ========================================================================= SECTIONS + ROWS (PanelSectionHeader / RouteRow / NearbyStopRow) ========================================================================= */ .bus-section__head { padding: var(--ds-space-14) var(--ds-space-20) var(--ds-space-8); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-heavy); letter-spacing: var(--ds-tracking-caps-tight); text-transform: uppercase; color: var(--ds-label-secondary); } .bus-row { position: relative; display: flex; align-items: center; gap: var(--ds-space-12); width: 100%; padding: var(--ds-space-10) var(--ds-space-20); appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-family: inherit; text-align: left; color: inherit; cursor: pointer; transition: background var(--ds-dur-micro) var(--ds-ease-smooth); } .bus-row:active { background: rgba(255, 255, 255, var(--ds-tint-chip-inert)); } body.light-mode .bus-row:active { background: rgba(0, 0, 0, var(--ds-tint-chip-inert)); } /* PanelHairline — inset past the badge column. */ .bus-row + .bus-row::before { content: ""; position: absolute; top: 0; left: 68px; right: 0; height: var(--ds-stroke-hairline); background: var(--ds-hairline); } .bus-row__badge { flex: 0 0 auto; min-width: 44px; min-height: 26px; padding: 0 var(--ds-space-8); display: grid; place-items: center; border-radius: var(--ds-radius-6); background: var(--route-color, var(--ds-label-tertiary)); color: var(--route-ink, var(--bus-ink-on-color)); font-family: var(--ds-font-rounded); font-size: var(--ds-fs-13); font-weight: var(--ds-fw-heavy); font-variant-numeric: var(--ds-numeric); } .bus-row__pin { flex: 0 0 auto; width: 44px; display: grid; place-items: center; color: var(--ds-label-tertiary); } .bus-row__pin .icon { width: 26px; height: 26px; } .bus-row__text { display: block; flex: 1 1 auto; min-width: 0; } .bus-row__title { display: block; font-size: var(--ds-fs-15); font-weight: var(--ds-fw-semibold); color: var(--ds-label-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bus-row__sub { display: block; font-size: var(--ds-fs-12); color: var(--ds-label-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bus-row__chev { flex: 0 0 auto; color: var(--ds-label-quaternary); } .bus-row__chev .icon { width: 13px; height: 13px; } /* --- Streetcar chip rail ----------------------------------------------- */ .bus-chips { display: flex; gap: var(--ds-space-10); padding: 0 var(--ds-space-20) var(--ds-space-6); overflow-x: auto; scrollbar-width: none; touch-action: pan-x; } .bus-chips::-webkit-scrollbar { display: none; } .bus-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-5); appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; font-family: inherit; cursor: pointer; } .bus-chip__tag { width: 50px; height: 34px; display: grid; place-items: center; border-radius: var(--ds-radius-8); background: var(--route-color, var(--ds-label-tertiary)); color: var(--route-ink, var(--bus-ink-on-color)); font-family: var(--ds-font-rounded); font-size: var(--ds-fs-15); font-weight: var(--ds-fw-heavy); font-variant-numeric: var(--ds-numeric); } .bus-chip__name { display: block; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-medium); color: var(--ds-label-secondary); } /* --- Notes / show-more -------------------------------------------------- */ .bus-note { padding: var(--ds-space-24) var(--ds-space-20) var(--ds-space-8); font-size: var(--ds-fs-15); color: var(--ds-label-secondary); } .bus-more { display: block; width: calc(100% - var(--ds-space-40)); margin: var(--ds-space-14) var(--ds-space-20) var(--ds-space-8); padding: var(--ds-space-12); appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--ds-radius-12); background: rgba(255, 255, 255, var(--ds-tint-chip-neutral)); color: var(--ds-label-primary); font-family: inherit; font-size: var(--ds-fs-15); font-weight: var(--ds-fw-semibold); cursor: pointer; } body.light-mode .bus-more { background: rgba(0, 0, 0, var(--ds-tint-chip-neutral)); } .bus-skel { height: 56px; margin: var(--ds-space-8) var(--ds-space-20); border-radius: var(--ds-radius-12); } /* ========================================================================= STOP SHEET BODY (StopDetailView) Rows reuse .arrival-row / .time-chip / .line-badge from components.css. ========================================================================= */ .bus-stop-meta { padding: 0 0 var(--ds-space-8); font-size: var(--ds-fs-13); color: var(--ds-label-secondary); font-variant-numeric: var(--ds-numeric); } /* Stop-detail arrival rows are defined at the end of this file, in the STOP DETAIL SHEET block — the port of StopDetailView. */ /* ========================================================================= MAP MARKERS (VehicleAnnotationView / StopAnnotationView) Stops and the route line are GPU layers inside MapLibre; only the vehicle marker is DOM, because it needs a rotating heading arrow and the sprite glyph. ========================================================================= */ .veh { position: relative; width: 30px; height: 30px; cursor: pointer; /* secsSinceReport >= 60 → half opacity, same rule as the app. */ transition: opacity var(--ds-dur-fast) var(--ds-ease-smooth); } .veh.is-stale { opacity: 0.5; } /* MapLibre writes the marker element's own transform every frame, so the zoom scale (SurfaceMapView.markerScale) rides an inner wrapper instead. --veh-scale is set once on the map container and inherits down. */ .veh__inner { position: absolute; inset: 0; transform: scale(var(--veh-scale, 1)); transform-origin: 50% 50%; } /* The disc is the marker's knockout ring, so it has to read against BOTH basemaps: --bus-ink-on-color is fixed white and disappears on positron. --ds-map-label is the token that inverts with the theme, and is already what buses.js feeds MapLibre for the route-stop stroke (Palette.mapInk). */ .veh__disc { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ds-map-label); box-shadow: 0 1.5px 6px rgba(0, 0, 0, 0.35); } .veh__disc::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--veh-color, var(--bus-route-default)); } .veh__glyph { position: relative; width: 16px; height: 16px; color: var(--veh-ink, var(--bus-ink-on-color)); } /* Off-route (detour / deadheading / undrawn branch): grey + dashed ring. */ .veh.is-off-route .veh__disc::before { background: var(--ds-ttc-6); } .veh__ring { position: absolute; inset: -3px; border-radius: 50%; border: var(--ds-stroke-ring) dashed var(--ds-label-tertiary); display: none; } .veh.is-off-route .veh__ring { display: block; } /* The DirectionArrow: orbits the marker centre by rotating its wrapper. */ .veh__arrowwrap { position: absolute; inset: 0; pointer-events: none; display: none; } .veh.has-heading .veh__arrowwrap { display: block; } .veh.is-inferred .veh__arrowwrap { opacity: 0.7; } .veh__arrow { position: absolute; left: 50%; top: -5px; width: 9px; height: 8px; margin-left: -4.5px; } .veh__arrow path { fill: var(--veh-color, var(--bus-route-default)); stroke: var(--ds-map-label); stroke-width: 1; } .veh.is-off-route .veh__arrow path { fill: var(--ds-ttc-6); } /* Selected-stop pin dropped by the stop sheet. */ .bus-pin { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-system-blue); color: var(--bus-ink-on-color); border: var(--ds-stroke-knockout) solid var(--ds-map-label); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .bus-pin .icon { width: 14px; height: 14px; } /* ========================================================================= ADAPTIVE DESKTOP The tab bar moves bottom-LEFT at this breakpoint (shell.css), so the panel docks bottom-right as a card and stops needing tab-bar clearance. ========================================================================= */ @media (min-width: 900px) { :root { --bus-tabbar-clear: var(--ds-space-24); --bus-peek-h: 116px; } /* Desktop is a fixed floating card, NOT a draggable bottom sheet. Panel.applyDetent still writes --bus-panel-offset for the phone model, and on a card that is already anchored to the bottom that transform slides it straight off its own box — which is why only the search row and the tab bar were visible. Neutralise the sheet mechanics here and let the body scroll inside the card instead. */ .bus-panel { left: auto; right: var(--ds-space-24); bottom: var(--ds-space-24); width: min(420px, 34vw); height: min(680px, calc(100% - 128px)); border-radius: var(--ds-radius-28-sq); box-shadow: var(--ds-shadow-peek); transform: none; transition: none; touch-action: auto; } /* No drag affordance when there is nothing to drag. */ .bus-panel .grabber { display: none; } /* The body's bottom padding compensates for the sheet's translation on phones; there is no translation here. */ .bus-panel__body { padding-bottom: var(--ds-space-16); } /* The peek fade is a phone-sheet concept — the card always shows its content, whatever detent the JS happens to think it is in. */ .bus-panel[data-detent="peek"] .bus-panel__body { opacity: 1; } .bus-panel.has-route[data-detent="peek"] .bus-panel__search { display: flex; } .bus-fabs { bottom: calc(var(--bus-peek-h) + var(--ds-space-40)); } .bus-map .maplibregl-ctrl-bottom-right { bottom: var(--ds-space-4); } } /* ========================================================================= STOP DETAIL SHEET (port of StopDetailView, SurfaceMapTab.swift:924) Grouped-inset list: a stop-id caption, a section header, then one card of arrival rows. The times are a single "5, 8, 12 min" label rather than a chip each — three fixed-width chips take the whole row on a phone and squeeze the route name down to one word per line. ========================================================================= */ .bus-stop-meta { margin: 0 0 var(--ds-space-16); padding: 0 var(--ds-space-4); font-size: var(--ds-fs-13); color: var(--ds-label-secondary); font-variant-numeric: var(--ds-numeric); } .bus-stop-section { margin: 0 0 var(--ds-space-8); padding: 0 var(--ds-space-4); font-size: var(--ds-fs-13); font-weight: var(--ds-fw-bold); letter-spacing: var(--ds-tracking-caps-tight); text-transform: uppercase; color: var(--ds-label-secondary); } .bus-stop-card { background: var(--ds-fill-subtle); border-radius: var(--ds-radius-14-sq); overflow: hidden; } .bus-stop-empty { margin: 0; padding: var(--ds-space-16); font-size: var(--ds-fs-14); color: var(--ds-label-secondary); } /* --- Arrival row ------------------------------------------------------- */ .bus-pred-row { display: flex; align-items: flex-start; gap: var(--ds-space-12); padding: var(--ds-space-12) var(--ds-space-14); cursor: pointer; position: relative; } .bus-pred-row + .bus-pred-row::before { content: ""; position: absolute; top: 0; left: var(--ds-space-14); right: 0; height: var(--ds-stroke-hairline); background: var(--ds-hairline); } .bus-pred-row:active { background: var(--ds-fill-neutral); } /* Small route capsule — 12pt heavy, 7/3 padding, exactly as the app draws it. Deliberately NOT .line-badge: that is the big subway-line pill and it dominates a row this dense. */ .bus-pred-row__tag { flex: 0 0 auto; display: inline-block; padding: 3px 7px; border-radius: var(--ds-radius-pill); font-family: var(--ds-font-rounded); font-size: var(--ds-fs-12); font-weight: var(--ds-fw-heavy); font-variant-numeric: var(--ds-numeric); line-height: 1.35; } /* The app sets lineLimit(nil) and gets away with it on a 402pt phone. In a browser at 375px the same string ("North - 100b Flemingdon Park towards Don Valley Station via Linkwood") runs to five lines and the row stops being scannable, so both lines are capped at two. */ .bus-pred-row__text { flex: 1 1 auto; min-width: 0; display: block; } .bus-pred-row__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--ds-fs-14); font-weight: var(--ds-fw-semibold); color: var(--ds-label-primary); line-height: 1.3; } .bus-pred-row__dir { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 2px; font-size: var(--ds-fs-12); color: var(--ds-label-secondary); line-height: 1.35; } .bus-pred-row__mins { flex: 0 0 auto; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-semibold); font-variant-numeric: var(--ds-numeric); color: var(--ds-label-primary); white-space: nowrap; padding-top: 1px; } .bus-pred-row__go { flex: 0 0 auto; display: block; width: 15px; height: 15px; padding-top: 2px; } .bus-pred-row__go .icon { width: 15px; height: 15px; }