/** * bt-app-shell.css * BT-OPS-PWA-001 — App-like shell（純 CSS、不破壞既有 layout） * * 設計原則： * 1. 瀏覽器一般訪問：完全看不出差異（既有頁面布局完全保留） * 2. PWA standalone 模式（用戶「加入主畫面」後從 icon 開啟）： * - body 加 safe-area inset（讓內容避開瀏海 / 底部手勢區） * - 頂部加一條 56px 高的 status bar（「銀行通」字樣） * 3. 不依賴 JS、不改 DOM * * 用法：每頁 加 * 頁面不需任何額外 markup（status bar 由 ::before 偽元素產生） */ /* ─── 通用：safe-area inset（避開瀏海 / 底部手勢區）─────────── */ :root { --bt-safe-top: env(safe-area-inset-top, 0px); --bt-safe-bottom: env(safe-area-inset-bottom, 0px); --bt-safe-left: env(safe-area-inset-left, 0px); --bt-safe-right: env(safe-area-inset-right, 0px); } /* ─── 只在 PWA standalone 模式生效（瀏覽器看不到變化）────────── */ @media all and (display-mode: standalone), all and (display-mode: fullscreen) { /* 1. body 加 safe-area padding */ body { padding-top: calc(56px + var(--bt-safe-top)); padding-bottom: var(--bt-safe-bottom); padding-left: var(--bt-safe-left); padding-right: var(--bt-safe-right); } /* 2. 頂部固定 status bar（用 body::before 不需改 HTML） */ body::before { content: "銀行通"; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; height: calc(56px + var(--bt-safe-top)); padding-top: var(--bt-safe-top); background: #111; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; z-index: 9999; box-shadow: 0 1px 4px rgba(0,0,0,0.15); /* 鎖死，不會被頁面內容覆蓋 */ } } /* ─── iOS Safari standalone (display-mode 媒體查詢不準) fallback ── */ /* iOS 13+ 用 navigator.standalone (JS) 才能精確判斷 — 此處用 CSS 兜底 */ /* 若加 .pwa-mode class 由 JS 提供，可手動觸發 standalone 樣式 */ body.pwa-mode { padding-top: calc(56px + var(--bt-safe-top)); padding-bottom: var(--bt-safe-bottom); padding-left: var(--bt-safe-left); padding-right: var(--bt-safe-right); } body.pwa-mode::before { content: "銀行通"; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; height: calc(56px + var(--bt-safe-top)); padding-top: var(--bt-safe-top); background: #111; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; z-index: 9999; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }