/* ══════════════════════════════════════════════════════════════════════════ * 底部導覽列 Theme Skin（v0.60.990） * ══════════════════════════════════════════════════════════════════════════ * ★只有視覺層★：六個功能 icon、六個中文字、nav 幾何、route、click target 全部不動。 * 所有主題共用【同一組規則】，差異只靠 JS 寫進 #nav 的 CSS 變數 —— * 所以換主題不會累積任何 style 節點或 layer，改變數就是即時生效。 * * iPhone safe-area：★沿用 App Shell 既有的 ownership★ * .nav 本來就有 padding-bottom:calc(6px + env(safe-area-inset-bottom)) * 與 min-height:calc(var(--nav-h) + env(safe-area-inset-bottom))。 * 主題只做兩件事：① background-color 給主題平色 ⇒ Home Indicator 區自然延伸、不露白 * ② background-image 用 cover 鋪滿整個含安全區的盒子 ⇒ 不會多出一塊不同色矩形。 * ★沒有 62px magic number、沒有 synthetic spacer、沒有新的 viewport hack★。 * ══════════════════════════════════════════════════════════════════════════ */ /* 沒有主題時整段不生效，版面與 v0.60.989 逐字相同 */ .nav[data-nav-theme] { /* 素材原比例（1720:304）在目前 nav 高度下的實際顯示寬度 —— 從素材與 --nav-h 推出來， 不是量出來的 magic number。桌機用它算出板子的左右邊界。 */ --nav-plate-w: calc(var(--nav-h) * 1720 / 304); --nav-plate-fade: 96px; /* 膠囊素材是照 430 版面的單格（69px）畫的；桌機單格會寬到 210px， 所以桌機把膠囊固定回這個設計寬度，維持正常單格視覺尺寸。 */ --nav-sel-w: calc(var(--nav-h) * 69 / 76); /* v0.60.991｜把 --nav-skin-pad 放進 .nav 自己的下緣 padding。 ★為什麼是 padding 而不是讓按鈕撐高★：.nav 是 flex + align-items:stretch， 若靠 min-height 撐高，.nav-btn 會一起變高，選中膠囊的 inset:-16px 0 -16px 就會跟著縱向拉長 ⇒ 破壞已驗收凍結的 V4 膠囊幾何。 改成 padding 之後：按鈕盒高度一個像素都沒變（膠囊、icon、文字位置全部不動）， 多出來的空間全部落在【文字下方的底板】，正是店長要的那一段。 safe-area 仍沿用 App Shell 既有 ownership，只是接在留白之後 —— ★安全區是背景延伸空間，不吃 label 的可讀空間★。 */ padding-bottom: calc(6px + var(--nav-skin-pad) + env(safe-area-inset-bottom, 0px)); /* ★按鈕不得被撐高★：.nav 預設 align-items:stretch，只要 min-height 比內容高， .nav-btn 就會一起長高，選中膠囊（inset:-16px 0 -16px）會跟著縱向拉長， 六個中文字也會往下飄到素材的另一段 —— 實測 label 對比會從 6.34 掉到 3.85。 改成 flex-start：按鈕維持它自己的內容高度（63px，與 v0.60.990 逐字相同）， 多出來的空間一律落在【文字下方】。icon／文字／膠囊位置一個像素都沒動。 */ align-items: flex-start; /* ★v0.60.992★：底色改用 --nav-skin-hem（素材最下緣的真實顏色，量出來的）， 不再用 --nav-skin-fill（那是配給文字對比用的，與素材下緣差很多）。 ⇒ label 下方那一段 ＋ safe-area 區與素材下緣★同一個顏色★， 玩家看到的是同一塊底板繼續往下，而不是「底板結束後又接了一條別的色塊」。 */ background-color: var(--nav-skin-hem, var(--nav-skin-fill, #fff)); background-image: var(--nav-skin-bg, none); /* ★v0.60.991 關鍵★：多出來的 --nav-skin-pad 由【主題平色】承接，素材不跟著放大。 若讓素材繼續 cover 整個變高的盒子，六個中文字會落到素材上不同的位置 —— 實測 weekly-champion 的 label 對比會從 6.34 掉到 3.85（低於 4.5 門檻）。 ⇒ 圖只鋪「原本的高度」並貼齊上緣，下面那條留白露出的是 --nav-skin-fill（它本來就是從素材下緣平色帶取平均色算出來的）⇒ 接不出縫。 ★仍然是等比（auto 寬），沒有任何 non-uniform stretch★。 */ background-size: auto calc(100% - var(--nav-skin-pad)); background-position: center top; background-repeat: no-repeat; /* 🪡 v0.61.0｜★盤子自己擁有它的上緣那一列★ .nav 本體有 border-top:1px。背景的 origin 預設是 padding-box ⇒ 主題盤子是從 border 【下面】才開始畫，那一列露出的是「底色＋16% 白」的 border 顏色， 在深色主題上就是店長看到的那條整條寬度的淺色橫線（實測 mid-autumn ＝ rgb(87,115,161)，正好是 hem rgb(55,88,143) 與 16% 白的合成值）。 ⇒ origin 改成 border-box（盤子畫到 border 那一列）＋ border 透明（不再另外畫線）。 ★按鈕盒、icon、文字、safe-area、nav 高度一個像素都沒動★：padding box 沒變， 盤子的下緣位置也沒變（起點上移 1px、高度同時加 1px，底邊剛好抵銷）。 */ background-origin: border-box; border-top-color: transparent; } /* 上緣外掛裝飾：掛在 nav 上方、不吃點擊、不改 nav 高度 ★不隨 safe-area 拉伸★：高度固定，錨在 bottom:100%（nav 的上緣），與底部安全區無關 */ .nav[data-nav-theme]::before { content: ''; position: absolute; left: 0; right: 0; /* 🪡 v0.61.0｜★上緣裝飾與導覽列之間 0 漏縫★ 每一張 overhang 素材（1720×160）的最下面都有一段幾乎全透明的空白列。 bottom:100% 讓盒子底邊貼在 .nav 的 padding-box 上緣，畫布鋪滿盒子 ⇒ 那段空白列就落在導覽列正上方，整條寬度沒有人畫 ⇒ 場景透出來（實測 mid-autumn ＝ 1.5px、透出率 0.87～0.95）。 ⇒ 把盒子往下沉【素材自己量出來的】空白比例 × 裝飾高度，裝飾的實體下緣就正好 落在 nav 上緣，空白那一段改成疊在盤子上（透明疊不透明，看不出來）。 ★這不是 magic number★：--nav-skin-over-empty 由 tools/gen-nav-overhang-seal.py 從素材真實 alpha 推導，每套主題各自一個值，新增第 14 套會自己算。 ★這也不是 -1px 硬貼★：兩層共用【同一個座標】（padding-box 上緣）， 不同 DPR 下四捨五入到同一個裝置像素邊界，不會因為縮放又裂開。 */ bottom: calc(100% - var(--nav-skin-over-h, 40px) * var(--nav-skin-over-empty, 0)); height: var(--nav-skin-over-h, 40px); background: var(--nav-skin-over, none) center bottom / 100% 100% no-repeat; pointer-events: none; } .nav[data-nav-theme="default"]::before { content: none; } /* 未選中文字：每套自己的 token，不共用同一組灰 */ .nav[data-nav-theme] .nav-btn { color: var(--nav-theme-text, #A48F70); text-shadow: var(--nav-theme-text-shadow, none); position: relative; isolation: isolate; } /* 選中：capsule 是整格的 selected background，包住 icon ＋ 中文字 ★render box 與可見體積分開處理★（v0.60.990 實測）：素材外圍有大片透明留白， box 62×95 時可見膠囊才落在 60–62 × 57.5–63 ＝ 與 Default 選中底同一個視覺體積。 ★不放大素材★（不用 background-size 126% 那種做法，那會連外框與光暈一起脹大）。 ★不隨 safe-area 拉長★：inset 只吃按鈕自己的盒子。 */ .nav[data-nav-theme] .nav-btn.active { color: var(--nav-theme-text-active, var(--marigold-deep)); background: var(--nav-skin-active-bg, transparent); font-weight: 800; text-shadow: var(--nav-theme-text-active-shadow, none); } .nav[data-nav-theme] .nav-btn.active::before { content: ''; position: absolute; inset: -16px 0px -16px; background: var(--nav-skin-sel, none) center / 100% 100% no-repeat; z-index: -1; pointer-events: none; } .nav[data-nav-theme="default"] .nav-btn.active::before { content: none; } /* 桌機：★不套用手機專用的假 safe-area★（env() 在桌機本來就是 0，這裡只處理背景比例）。 1280 寬的 nav 比例是 16.8:1，把 430:76 的圖橫拉 2.98 倍一定爛（＝非等比拉伸，禁止） ⇒ 維持素材原比例置中，兩側用主題平色補滿。 v0.60.991 修兩個桌機缺陷（實測 1280）： ① 板子只有 430px 寬置中，它自己的【左右角落金屬收邊】會出現在畫面中段， 看起來像畫面中間插了一塊有框的小板子。 ⇒ 疊一層主題平色的水平漸層，在板子左右邊界往內 --nav-plate-fade 的範圍把邊緣化開， 讓板子自然溶進兩側平色。只加一個 background layer，不動圖片比例、不拉伸。 ★不是 v0.60.963 那個被移除的 .nav::after 視窗延伸遮罩★：這層完全在 nav 盒子內， 不吃點擊、不延伸到 nav 之外。 ② 選中膠囊的 ::before 預設吃滿整格，桌機單格 210px ⇒ 膠囊被橫拉成超寬 badge。 ⇒ 桌機改成置中固定 --nav-sel-w（＝素材設計的 430 版面單格寬）， 維持正常單格視覺尺寸。只改視覺盒，按鈕本身的 click target 完全不動。 */ @media (min-width: 700px) { /* ★桌機用【由同一張素材派生的延展層】★（tools/nav-desktop-extend.py 產生）： 中央仍是原圖原比例，左右是同一張圖鏡射接合後逐段融入主題平色的低密度材質。 上緣金線 rail 與下緣平色帶因鏡射而貫穿整條 nav ⇒ 左→中→右 是同一張 Desktop Skin， 不會再出現「手機裝飾放在超長列中間、兩側大片純色」。 ★仍然是 auto 100%（等比），沒有任何 non-uniform stretch★。 延展層覆蓋到 2150 CSS px；更寬的螢幕由主題平色接手，而素材最外端本來就已經 收到接近平色，所以接不出縫。缺 -wide 檔時自動退回原本的置中做法。 */ .nav[data-nav-theme] { background-image: var(--nav-skin-bg-wide, var(--nav-skin-bg, none)); background-size: auto calc(100% - var(--nav-skin-pad)); /* 與手機同一條規則 */ background-position: center top; background-repeat: no-repeat; } /* overhang 同樣換成延展層，回到整條寬度；不再需要置中＋mask 的臨時做法 */ .nav[data-nav-theme]::before { left: 0; right: 0; width: auto; transform: none; /* 桌機用的是 -wide 素材，它自己的空白下緣比例不一樣（實測 0.0125～0.2812）⇒ 各用各的 */ bottom: calc(100% - var(--nav-skin-over-h, 40px) * var(--nav-skin-over-empty-wide, var(--nav-skin-over-empty, 0))); background-image: var(--nav-skin-over-wide, var(--nav-skin-over, none)); background-size: auto 100%; background-position: center bottom; -webkit-mask-image: none; mask-image: none; } /* selected：桌機單格 210px，預設 ::before 吃滿整格會變成超寬 badge ⇒ 固定回素材設計的 430 版面單格寬並置中。只改視覺盒，click target 不動。 */ .nav[data-nav-theme] .nav-btn.active::before { left: 50%; right: auto; width: var(--nav-sel-w); transform: translateX(-50%); } } /* 降低動態需求時不做任何額外動畫（沿用專案既有慣例） */ @media (prefers-reduced-motion: reduce) { .nav[data-nav-theme] .nav-btn, .nav[data-nav-theme] .nav-btn.active { transition: none; } }