/* * keyboard-inset.css — 全站虛擬鍵盤（軟鍵盤）避讓共用樣式 * * 搭配 js/keyboard-inset.js：後者以 window.visualViewport 於 寫入 * --visual-viewport-height：鍵盤開啟後的實際可視高度 * --keyboard-offset：估算的鍵盤高度（px） * 並於鍵盤開啟時在 加上 .keyboard-open。 * * 本檔只做「不需逐頁改」的全站共用避讓；聊天頁等結構性調整由各頁自行套用下方工具 class。 * 桌機（>= 768px）不受影響：導覽列本身隱藏、鍵盤避讓規則以 max-width:767px 限定。 */ /* ------------------------------------------------------------------ * * 1) 鍵盤開啟時，隱藏手機版固定底部導覽列，避免蓋住輸入框。 * 刻意用 !important：需覆蓋 load-mobile-nav.js scroll-hide 設在 nav 上的 inline transform * （該 inline style 無 !important，故 CSS !important 會勝出）。 * ------------------------------------------------------------------ */ @media (max-width: 767px) { html.keyboard-open #mobile-nav-container nav { transform: translateY(100%) !important; } } /* ------------------------------------------------------------------ * * 2) 標註 data-keyboard-aware 的置中彈窗（Modal / Dialog / Bottom Sheet）： * 鍵盤開啟時改為頂端對齊，並把內部捲動容器（標 data-keyboard-scroll）的高度 * 限制在可視視窗內，確保被鍵盤遮住的下半部欄位可以捲動看到。 * 只作用於「有標註」的彈窗，不影響其它不含輸入的彈窗。 * ------------------------------------------------------------------ */ @media (max-width: 767px) { html.keyboard-open [data-keyboard-aware] { align-items: flex-start !important; } html.keyboard-open [data-keyboard-aware] [data-keyboard-scroll] { max-height: var(--visual-viewport-height, 100dvh) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } } /* ------------------------------------------------------------------ * * 3) 通用工具 class（供聊天頁等結構性頁面使用，取代寫死的 100vh / h-screen / h-dvh）： * 容器高度綁定「實際可視高度」，鍵盤開啟時自動縮到鍵盤上方； * 未開啟或不支援 visualViewport 時退回 100dvh。 * ------------------------------------------------------------------ */ .h-visual-viewport { height: var(--visual-viewport-height, 100dvh); } .min-h-visual-viewport { min-height: var(--visual-viewport-height, 100dvh); } /* ------------------------------------------------------------------ * * 4) 需要固定在「可視視窗底部（鍵盤上方）」的元素工具 class： * 鍵盤開啟時上移一個鍵盤高度，避免固定送出列 / 輸入列被鍵盤壓住。 * 未開啟時 --keyboard-offset 為 0，不位移。 * ------------------------------------------------------------------ */ .pin-above-keyboard { transform: translateY(calc(-1 * var(--keyboard-offset, 0px))); transition: transform 0.2s ease-out; }