/* ============================================================ 愉景灣巴士總站 - 候車顯示板 (直式 15 路線，固定 2160 x 3840) ============================================================ 注意：本畫面為固定解析度 (2160 寬 x 3840 高) 直式看板，寬度遠小於高度。 凡是「水平方向排列、需要在固定寬度內完整顯示、不換行」的文字 (標題、欄位標題、路線代號、終點站名、時間數字)，字級一律採用 vw (相對畫面寬度 2160px) 而非 vh，否則在此類窄長畫面上， 以 vh 計算出的字級會遠大於實際可用寬度而造成文字重疊/裁切。 純粹垂直方向的間距 (padding-top/bottom、列高) 才使用 vh。 ============================================================ */ /* ============================================================ 主題系統 Theme System 透過網址參數 ?mode=dark / ?mode=light 選擇主題 (由 index.tsx 於 伺服器端讀取 query string 後，於 標記主題)。 預設 (未帶參數或無效值) 主題為 dark，向下相容舊有網址。 淺色主題 (light) 參考 MTR 式候車顯示板：白底、藍色系文字。 ============================================================ */ :root, [data-theme="dark"] { --bg: #05070d; --panel: #0b1120; --panel-alt: #10182c; --accent: #ffd400; --accent-soft: #ffe98a; --external: #ff7a1a; --live: #1fdb6e; --text-main: #f5f7fb; --text-sub: #93a0bd; --divider: #1e2942; --blink-red: #ff3b30; --header-grad-start: #131c33; --header-grad-end: #0b1120; --header-border: var(--accent); --footer-bg: #090d17; --external-wash: rgba(255, 122, 26, 0.08); --live-wash: rgba(31, 219, 110, 0.08); --external-tint: rgba(255, 122, 26, 0.12); --live-tint: rgba(31, 219, 110, 0.12); /* 路線代號實心色塊 (Solid Pill) 對比文字色：亮色底 (黃/橙/綠) 搭配深色文字，確保遠距離最高可讀性 */ --pill-text: #05070d; --route-normal-bg: var(--accent); /* 本班 (NEXT) 時間卡強調底色：與淺色主題使用完全相同的品牌深藍色 (#0b3d91)， 確保深色/淺色主題下 NEXT 的視覺識別一致；與下一班 (FOLLOWING) 的中性底色 形成清楚的兩色分級。 */ --next-bg: #0b3d91; --next-bg-2: #14509e; --next-text: #ffffff; /* 欄位寬度：Header 與每一列 route-row 共用同一組 grid-template-columns， 確保「路線」「終點」「本班」「下一班」欄位在所有列中完全對齊、等寬。 路線欄縮減 (不再需容納標籤文字)，釋出空間給終點欄與本班/下一班欄， 並縮小欄間距，消除終點欄與本班欄之間的死空間。 */ --col-route-w: 11.5vw; --col-next-w: 14.5vw; --col-following-w: 13.5vw; --grid-cols: var(--col-route-w) 1fr var(--col-next-w) var(--col-following-w); --grid-gap: 1vw; /* Part B #4：LIVE_ETA 高對比訊號圖示配色 (深色主題：亮neon 螢光色， 於深色背景上達到最高可視對比與辨識度)。 */ --live-icon-color: #00ff66; --live-icon-glow: rgba(0, 255, 102, 0.85); /* Part B #3：暫停顯示 (Case A) / 暫停服務 (Case B) 合併提示容器配色 */ --suspend-display-bg: #2a3450; --suspend-display-text: #c3cbe0; --suspend-service-bg: #7a1414; --suspend-service-bg-2: #b91c1c; --suspend-service-text: #ffffff; } /* 淺色主題 (MTR 式白底藍字看板) */ [data-theme="light"] { --bg: #ffffff; --panel: #eef2f9; --panel-alt: #e4eaf5; --accent: #0b3d91; --accent-soft: #2f5fc4; --external: #c2410c; --live: #0f8a45; --text-main: #0d2757; --text-sub: #5b6b8c; --divider: #d7dfec; --blink-red: #d5271e; --header-grad-start: #ffffff; --header-grad-end: #f2f5fb; --header-border: #0d2757; --footer-bg: #f4f6fb; --external-wash: rgba(194, 65, 12, 0.06); --live-wash: rgba(21, 128, 61, 0.06); --external-tint: rgba(194, 65, 12, 0.1); --live-tint: rgba(21, 128, 61, 0.1); /* 路線代號實心色塊：淺色主題底色皆為飽和深色，故文字採白色以取得最高對比 一般路線改用石板藍紫色，與「本班」強調色 (深藍) 明確區隔，避免視覺混淆 */ --pill-text: #ffffff; --route-normal-bg: #3b4a6b; /* 本班 (NEXT) 強調底色：品牌深藍，與下一班的淺灰底形成清楚分級 (與深色主題使用相同色碼) */ --next-bg: #0b3d91; --next-bg-2: #14509e; --next-text: #ffffff; /* Part B #4：LIVE_ETA 高對比訊號圖示配色 (淺色主題：高飽和信號綠， 於白/淺色背景上維持最高可視對比)。 */ --live-icon-color: #008000; --live-icon-glow: rgba(0, 168, 84, 0.55); /* Part B #3：暫停顯示 (Case A) / 暫停服務 (Case B) 合併提示容器配色 */ --suspend-display-bg: #e4eaf5; --suspend-display-text: #5b6b8c; --suspend-service-bg: #d5271e; --suspend-service-bg-2: #b91c1c; --suspend-service-text: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: var(--bg); color: var(--text-main); /* 現代幾何無視體 (Geometric Sans-Serif)：Poppins 負責拉丁字母/數字，Noto Sans TC 負責中文， 兩者字重與標點的視覺重量相近，組合後中英文視覺一致，符合現代運輸看板設計標準 */ font-family: 'Poppins', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; overflow: hidden; } .board-root { display: flex; flex-direction: column; width: 100vw; height: 100vh; } /* ---------------- Header ---------------- 3 欄 x 2 列 CSS Grid 版面： 欄 1 (左)：現時氣溫標籤 / 警告圖示+氣溫數值 欄 2 (中)：總站英文名稱 / 總站中文名稱 欄 3 (右)：日期 / 時間 採用單一 CSS Grid (而非巢狀 flex 分區)，確保三欄的 Row1 彼此對齊、 Row2 彼此對齊 (同列字級/字重層級一致)，且欄 2 相對於整個標題列精確置中。 */ .board-header { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 1.5vw; row-gap: 0.4vh; padding: 1.2vh 2.2vw; background: linear-gradient(180deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%); border-bottom: 3px solid var(--header-border); flex: 0 0 auto; } /* 共用格：所有標題列儲存格皆套用，確保不換行、不溢出 */ .hcell { min-width: 0; white-space: nowrap; overflow: hidden; } /* Row1 (第一列)：氣溫標籤 / 總站英文名稱 / 日期，三者字級/字重一致， 作為次要資訊列，顏色統一使用 --text-sub */ .hcell-row1 { font-size: 2.5vw; font-weight: 700; color: var(--text-sub); letter-spacing: 0.02em; } /* Row2 (第二列)：警告圖示+氣溫數值 / 總站中文名稱 / 時間，三者字級/字重一致， 作為主要視覺焦點列 */ .hcell-row2 { font-size: 3.6vw; font-weight: 800; color: var(--text-main); line-height: 1.1; } .hcell-left { text-align: left; justify-self: start; } .hcell-center { text-align: center; justify-self: center; } .hcell-right { text-align: right; justify-self: end; } /* 欄 2：總站英文名稱 (Row1)，維持大寫、次要色 */ .title-en { text-transform: uppercase; } /* 欄 2：總站中文名稱 (Row2)，作為視覺焦點，字級略大於一般 Row2 儲存格 */ .title-zh { font-size: 3.9vw; color: var(--accent); } /* 欄 1 Row1：現時氣溫標籤 */ .weather-label { /* 繼承 .hcell-row1 樣式即可 */ } /* 欄 1 Row2：警告圖示 + 氣溫數值，水平排列 */ .weather-value-wrap { display: flex; align-items: center; gap: 0.6vw; } .weather-icon { color: var(--accent); font-size: 3.2vw; flex: 0 0 auto; } .weather-value { font-size: 5.4vw; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1; white-space: nowrap; } /* 欄 3 Row1：日期 */ .clock-date { font-variant-numeric: tabular-nums; } /* 欄 3 Row2：時間 (HH:MM:SS) - 字體與欄 1 氣溫數值 (.weather-value) 嚴格一致， 統一採用本站標準字體堆疊 (Poppins / Noto Sans TC 等)，不再使用等寬字體； 秒數跳動時的版面抖動 (jitter) 改以 font-variant-numeric: tabular-nums (等寬數字特性) 解決，此屬性在非等寬字體下同樣能讓每個數字佔用相同寬度。 */ .clock-time { font-size: 5.4vw; font-weight: 800; font-variant-numeric: tabular-nums; font-family: 'Poppins', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; color: var(--accent); line-height: 1; } /* ---------------- Column Headers ---------------- */ .route-col-header { flex: 0 0 auto; display: grid; grid-template-columns: var(--grid-cols); gap: var(--grid-gap); padding: 0.25vh 2.2vw 0.2vh; background: var(--panel); border-bottom: 2px solid var(--divider); } .route-col-header > div { display: flex; /* 明確指定 row 方向：.col-dest / .col-next / .col-following 這幾個 class 同時被下方「資料列」規則 (.col-dest 等) 設為 flex-direction: column (用於資料列中中英文/上下堆疊)，若標題列不覆寫此屬性，會直接繼承 column 方向，導致 align-items: center 作用在「水平軸」而非「垂直軸」， 造成標題文字被水平置中而非靠左 —— 這正是「終點 DESTINATION」等標題 看起來偏移/置中的根本原因。此處強制設回 row，確保 justify-content 控制的是水平對齊。 */ flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; white-space: nowrap; overflow: hidden; min-width: 0; } /* 欄位標題：中英文合併為單行顯示 (例如「路線 ROUTE」)；字級略縮小並容許縮放， 確保最長的「下一班 FOLLOWING」也能完整容納於欄寬內，不被裁切。 text-align: left 確保文字本身亦明確靠左，與下方對應資料欄位的起始位置精確對齊。 */ .col-label { text-align: left; font-size: 1.3vw; font-weight: 800; color: var(--text-sub); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ---------------- Route List ---------------- */ .route-list { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 2.2vw; overflow: hidden; } .route-row { flex: 1 1 0; display: grid; grid-template-columns: var(--grid-cols); gap: var(--grid-gap); /* stretch (not center) 讓每個欄位的容器實際佔滿列高，內部元件再以固定高度 (height: calc(100% - 留白)) 置中，避免色塊/時間卡的實際內容高度超出 列高而與上下分隔線重疊/裁切 */ align-items: stretch; border-bottom: 1px solid var(--divider); padding: 0.3vh 0; min-height: 0; overflow: hidden; } .route-row:last-child { border-bottom: none; } .route-row.external { background: linear-gradient(90deg, var(--external-wash) 0%, rgba(255, 122, 26, 0) 60%); } .route-row.live { background: linear-gradient(90deg, var(--live-wash) 0%, rgba(31, 219, 110, 0) 60%); } /* 淺色主題：所有資料列一律採用純白底 (#FFFFFF)，不使用漸層色底/交錯底色， 維持乾淨一致的白底外觀 (對外/即時路線改以路線色塊本身的顏色作區別即可)。 */ [data-theme="light"] .route-row, [data-theme="light"] .route-row.external, [data-theme="light"] .route-row.live { background: #ffffff; } /* ---------------- 路線欄 (代號實心色塊) ---------------- 設計改為 Solid Color Pill：不再使用細邊框+深色中心，改用高飽和度實心底色 搭配高對比文字，參考港鐵 (MTR) 等全球運輸系統標準，大幅提升遠距離辨識度。 已移除「對外」/「即時」文字標籤，僅保留不同色彩的實心色塊作為視覺區別。 */ .col-route { display: flex; align-items: stretch; justify-content: center; min-width: 0; height: 100%; /* 上下留白，確保色塊本身高度不會頂到列與列之間的分隔線 */ padding: 0.5vh 0; box-sizing: border-box; } .route-no-badge { flex: 1 1 auto; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* 高度改以列高的百分比控制 (透過父層 padding 留白)，而非固定 vh padding， 確保無論每列實際像素高度為何，色塊都恰好嵌合在列內、不與格線重疊 */ font-size: 2.6vw; font-weight: 900; padding: 0 0.3vw; border-radius: 0.7vw; background: var(--panel-alt); color: var(--text-main); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; box-sizing: border-box; box-shadow: 0 0.2vh 0 rgba(0, 0, 0, 0.18); } .route-row.external .route-no-badge { background: var(--external); color: var(--pill-text); } .route-row.live .route-no-badge { background: var(--live); color: var(--pill-text); } .route-row:not(.external):not(.live) .route-no-badge { background: var(--route-normal-bg); color: var(--pill-text); } /* ---------------- 終點欄 ---------------- */ .col-dest { display: flex; flex-direction: column; min-width: 0; justify-content: center; gap: 0.5vh; padding-left: 0.3vw; } .dest-zh, .dest-en { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* 主要中文字級放大，次要英文字級同步放大以填滿水平可用空間，中英文視覺重量更平均 */ .dest-zh { font-size: 3vw; font-weight: 800; color: var(--text-main); letter-spacing: 0.01em; } .dest-en { font-size: 2.5vw; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.005em; } /* ---------------- 本班 / 下一班欄 ---------------- */ .col-next, .col-following { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 100%; /* 上下留白，確保時間卡本身高度不會頂到列與列之間的分隔線 (同 .col-route 做法) */ padding: 0.5vh 0; box-sizing: border-box; } .slot-value { font-size: 3.3vw; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-main); display: flex; align-items: center; justify-content: center; padding: 0 0.3vw; border-radius: 0.5vw; background: var(--panel-alt); width: 100%; height: 100%; text-align: center; white-space: nowrap; box-sizing: border-box; position: relative; } /* 即時 ETA 來源指示圖示 (中途站路線用)：以實心圓形徽章 (badge) 呈現， 不論所在時間卡底色為何 (NEXT 強調色 / FOLLOWING 中性色、深色或淺色主題)， 徽章底色一律使用高對比訊號色、圖示本身為白色，確保任何情況下皆清晰銳利可辨識； 靜態時間表來源則不附加任何圖示/標籤。 */ .source-live-icon { position: absolute; top: 0.35vh; right: 0.45vw; width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center; font-size: 1.3vw; color: #ffffff; background: var(--live-icon-color); border-radius: 50%; box-shadow: 0 0 0.6vh var(--live-icon-glow), 0 0 1.4vh var(--live-icon-glow), 0 0.1vh 0.3vh rgba(0, 0, 0, 0.35); animation: live-pulse 1.6s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* 本班 (NEXT) 時間卡：以實心品牌深藍色填色強調 (深色/淺色主題使用相同色碼 #0b3d91)， 與下一班 (FOLLOWING) 的中性底色形成清楚的兩色視覺分級，讓乘客一眼辨識 「即將搭乘」的班次時間。 */ .col-next .slot-value { background: linear-gradient(135deg, var(--next-bg) 0%, var(--next-bg-2) 100%); color: var(--next-text); font-weight: 900; box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.25); } .slot-value.empty { color: var(--text-sub); font-weight: 500; background: var(--panel-alt); } /* ---------------- Part B #3：暫停顯示 / 暫停服務 合併提示容器 ---------------- 取代 NEXT/FOLLOWING 兩個時間格，橫跨這兩欄的網格空間，置中顯示雙語提示文字。 Case A (暫停顯示) 採中性/資訊語氣；Case B (暫停服務) 採醒目警示語氣 (紅底/脈動)。 */ .col-suspended { grid-column: 3 / 5; display: flex; align-items: stretch; justify-content: center; min-width: 0; height: 100%; padding: 0.5vh 0; box-sizing: border-box; } /* 圖示置於文字左側，橫向排列，讓 Case A / Case B 版面結構一致 (皆有圖示)， 僅顏色/圖示種類不同以區分嚴重程度。 */ .suspended-box { width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.9vw; border-radius: 0.5vw; padding: 0 1vw; box-sizing: border-box; position: relative; } .suspended-text { display: flex; flex-direction: column; gap: 0.3vh; min-width: 0; } .suspended-zh { font-size: 2vw; font-weight: 800; line-height: 1.15; } .suspended-en { font-size: 1.3vw; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; } /* Case A：暫停顯示 (資料/系統問題，服務仍正常行駛) — 中性資訊語氣 */ .col-suspended-display .suspended-box { background: var(--suspend-display-bg); color: var(--suspend-display-text); } /* Case B：暫停服務 (路線實際停駛) — 醒目警示語氣，紅底 + 緩慢脈動提醒 */ .col-suspended-service .suspended-box { background: linear-gradient(135deg, var(--suspend-service-bg) 0%, var(--suspend-service-bg-2) 100%); color: var(--suspend-service-text); box-shadow: 0 0 1vh rgba(220, 38, 38, 0.55); animation: suspend-service-pulse 2s ease-in-out infinite; } /* 圖示放大並置於文字左側，兩種狀態共用同一尺寸，確保版面對齊一致 */ .suspended-icon { font-size: 2.6vw; flex: 0 0 auto; line-height: 1; } @keyframes suspend-service-pulse { 0%, 100% { box-shadow: 0 0 0.6vh rgba(220, 38, 38, 0.45); } 50% { box-shadow: 0 0 1.6vh rgba(220, 38, 38, 0.85); } } /* 整列淡淡的暫停狀態背景暈染，與 external/live 一致的視覺語言 */ .route-row.suspend-display { background: linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0) 60%); } .route-row.suspend-service { background: linear-gradient(90deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0) 60%); } [data-theme="light"] .route-row.suspend-display, [data-theme="light"] .route-row.suspend-service { background: #ffffff; } /* 中途站 (route-row.live) 路線暫停時，維持中途站底色 (--live-wash) 不被暫停底色 覆蓋掉，讓乘客仍可從整列底色辨識這是一條中途站路線 (即使目前暫停中)。 選擇器層級 (.route-row.live.suspend-*，3 個 class) 高於上方單純的 .route-row.suspend-*（2 個 class），故無論原始碼順序皆會正確覆蓋。 */ .route-row.live.suspend-display { background: var(--live-wash); } .route-row.live.suspend-service { background: linear-gradient(90deg, var(--live-wash) 0%, rgba(220, 38, 38, 0.1) 100%); } [data-theme="light"] .route-row.live.suspend-display, [data-theme="light"] .route-row.live.suspend-service { background: var(--live-wash); } .col-next .slot-value.empty { background: var(--panel-alt); color: var(--text-sub); box-shadow: none; } /* 3 分鐘內 -> 閃爍紅色提示（本班/下一班皆適用，優先於一般底色） */ .slot-value.imminent { color: #fff; background: var(--blink-red); animation: blink-time 1s steps(1) infinite; } @keyframes blink-time { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } } /* ---------------- Footer ---------------- */ .board-footer { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 1.6vh 2.2vw; background: var(--footer-bg); border-top: 1px solid var(--divider); font-size: 1.9vw; font-weight: 600; color: var(--text-sub); } .footer-blink-note { display: flex; align-items: center; gap: 0.5vw; white-space: nowrap; } .blink-dot { color: var(--blink-red); animation: blink-time 1s steps(1) infinite; font-size: 1.4vw; } .footer-version { font-size: 1.3vw; font-weight: 500; opacity: 0.55; white-space: nowrap; letter-spacing: 0.02em; }