/* 哥布林商人 — 行動裝置共用強化樣式 * =================================================================== * 為什麼需要這一份： * panel_v2.html（主控制台）已經有一套調得不錯的手機版 CSS（iOS 輸入框 * 縮放修正、表格轉卡片、底部導覽列…），但那些規則全部寫死在那一個檔案裡。 * 其他頁面完全沒享受到 —— 實測各頁面的 @media 數量： * * ticket_config_v2.html 1492 行 @media = 0 * members_v2.html 285 行 @media = 0 * wallet.html 391 行 @media = 0 * track_order.html 325 行 @media = 0 * analytics_v2.html 744 行 @media = 1 * tickets_v2.html 1300 行 @media = 2（表格沒有橫向捲動容器） * orders_v2.html 910 行 @media = 3（表格沒有橫向捲動容器） * * 商家在手機上最常開的就是這幾頁（查訂單、看票單、改票單設定）。 * * 設計原則： * 1. 幾乎全部用 :where() 包起來 —— 特異性 0，頁面自己的 CSS 永遠贏得過 * 這裡，所以加進既有頁面不會把原本調好的版面弄壞。 * 2. 只有「不用 !important 就一定會被 Tailwind 蓋掉、而且不修就是 bug」 * 的規則才用 !important（目前只有 iOS 輸入框縮放那一條）。 * 3. 所有規則都包在 @media 裡，桌面版完全不受影響。 * =================================================================== */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* 手機瀏覽器網址列會伸縮，100vh 會導致底部被切掉；dvh 才是真正的可視高度 */ --app-vh: 100vh; } @supports (height: 100dvh) { :root { --app-vh: 100dvh; } } @media (max-width: 1023px) { /* ── 1. iOS 輸入框自動放大 ────────────────────────────────────── iOS Safari 在聚焦「字級小於 16px」的輸入框時會自動放大整個頁面，而且放大後不會縮回去 —— 使用者打完一個欄位，整個版面就歪掉了，要手動雙指縮小。這是手機後台最惱人的問題之一。 Tailwind 的 .text-xs/.text-sm 特異性贏過 :where()，所以這條必須用 !important（panel_v2.html 原本也是這樣處理，這裡把它推廣到所有頁面）。*/ input[type=text], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=password], input[type=date], input[type=datetime-local], input[type=time], select, textarea { font-size: 16px !important; } /* ── 2. 觸控目標大小 ──────────────────────────────────────────── 後台大量使用 text-xs + px-2 py-1 的小按鈕，實際高度只有 24~28px。指尖的接觸面積約 44px，太小的按鈕會按不準、按到隔壁。這裡給一個保底高度，但用 :where() —— 頁面若自己指定了尺寸就照頁面的。*/ :where(button, [role="button"], a.btn, .btn, input[type=submit], input[type=button]) { min-height: 40px; /* 點擊時 Android Chrome 的灰色方框很醜，關掉改用自己的 :active 效果 */ -webkit-tap-highlight-color: transparent; } /* 圖示按鈕（只有一個 icon）不強制撐寬，但要夠高 */ :where(button, [role="button"]) { touch-action: manipulation; } /* 核取方塊/單選鈕在手機上預設太小，很難點中 */ :where(input[type=checkbox], input[type=radio]) { min-width: 18px; min-height: 18px; } /* ── 3. 表格橫向捲動 ──────────────────────────────────────────── orders_v2 / tickets_v2 的沒有任何捲動容器，欄位一多就把整個頁面撐寬，變成整頁左右晃、而且操作按鈕被推出畫面外。這裡讓表格能在自己的容器內橫向捲動，頁面本身不會被撐開。*/ :where(.table-scroll, .overflow-x-auto, .table-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; } :where(table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: nowrap; } /* 被 .overflow-x-auto 之類的容器包住的表格維持正常 table 行為，捲動交給外層容器負責（版面比較漂亮） */ :where(.overflow-x-auto, .table-scroll, .table-wrap) > :where(table) { display: table; white-space: normal; } /* ── 4. 不要讓整頁被撐出橫向捲軸 ──────────────────────────────── 手機上最常見的版面 bug：某個元素（長網址、寬表格、絕對定位的裝飾）超出畫面寬度，整頁就能左右晃，看起來像壞掉。*/ /* 用 clip 不要用 hidden：overflow-x:hidden 會讓變成捲動容器，底下所有 position:sticky 的元素（面板的固定頁首、表格標題列）會直接失效——那是比橫向捲動更難發現、也更嚴重的災情。overflow:clip 一樣把溢出的東西切掉，但不會建立捲動容器，sticky 照常運作。舊瀏覽器不支援 clip 就維持原樣（頂多能左右滑一點，不會壞掉）。*/ html, body { max-width: 100%; } @supports (overflow: clip) { html, body { overflow-x: clip; } } /* 長字串（訂單編號、Discord ID、網址）強制斷行，不要撐爆容器 */ :where(td, th, p, span, div, a, h1, h2, h3, h4) { overflow-wrap: anywhere; } /* 但表格欄位不要因為斷行變得太窄 */ :where(.overflow-x-auto, .table-scroll) :where(td, th) { overflow-wrap: normal; } /* ── 5. 瀏海/圓角螢幕的安全區 ─────────────────────────────────── iPhone 的瀏海與底部 Home 指示條會蓋住內容。需要頁面有 viewport-fit=cover（本次一併補上）才會生效。*/ :where(body) { padding-left: var(--safe-left); padding-right: var(--safe-right); } /* 固定在底部的元素（工具列、送出按鈕）要避開 Home 指示條 */ :where(.fixed.bottom-0, .sticky.bottom-0) { padding-bottom: calc(0.5rem + var(--safe-bottom)); } /* 固定在頂部的元素要避開瀏海 */ :where(.fixed.top-0, .sticky.top-0) { padding-top: calc(0.25rem + var(--safe-top)); } /* ── 6. 彈窗/對話框 ───────────────────────────────────────────── 桌面版的置中小視窗在手機上常常超出畫面、或內容被鍵盤蓋住。*/ :where(.modal, .modal-content, [role="dialog"]) { max-height: calc(var(--app-vh) - 2rem); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── 7. 捲動慣性 ──────────────────────────────────────────────── iOS 上沒有這個屬性的容器捲起來是「頓」的，沒有慣性滑動。*/ :where(.overflow-y-auto, .overflow-auto, .overflow-scroll) { -webkit-overflow-scrolling: touch; } /* ── 8. 圖片不要撐爆版面 ───────────────────────────────────────*/ :where(img, video, canvas, svg) { max-width: 100%; height: auto; } } /* ── 手機直立（窄螢幕）額外處理 ─────────────────────────────────── */ @media (max-width: 640px) { /* 桌面版常見的多欄網格在 375px 寬的螢幕上每欄只剩 80px，內容全部擠成一團。這裡讓 3 欄以上的網格退成 2 欄 —— 一樣用 :where()，頁面自己有指定手機版欄數的話不會被影響。*/ :where(.grid.grid-cols-3, .grid.grid-cols-4, .grid.grid-cols-5, .grid.grid-cols-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 一整排按鈕在窄螢幕會被壓扁，改成可以換行 */ :where(.flex.items-center.justify-between) { flex-wrap: wrap; gap: 0.5rem; } /* 表單的左右並排標籤改成上下排列 */ :where(.flex.items-center.gap-4 > label) { width: 100%; } } /* ── 減少動態效果（系統設定 / 省電）─────────────────────────────── 使用者在系統開了「減少動態效果」就不要再播動畫，對暈眩敏感的人是無障礙需求，順便省電。*/ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }