/* ============================================================ filex365.css 菲力365 — 全站共用樣式表（App + ERP） ============================================================ 適用範圍：菲力365 全部頁面（App 手機端、ERP 桌面端）。 兩端共用同一份設計系統，在共用層（品牌色、字體棧、卡片圓角）之上， 允許刻意的產品專屬層差異（墨色 --ink、卡片陰影 --card-shadow）， 兩者依容器 scope（.app／.auth-shell＝App；.layout-wrapper＝ERP）解析成不同值。 本檔案分成以下段落： 1. Design Token（:root，共用層＋各自的產品專屬 token） 2. 全域重置（App／ERP 共用）＋ 產品專屬層 scoped 覆寫（--ink／--card-shadow） 3. App：共用外殼版面（登入頁／身份選擇頁） 4. App：共用外殼版面（一般內容頁，.app／.appbar；子頁已驗證，根頁待驗證） 5. App：共用小型工具類別 6. App：登入頁專屬元件 7. App：身份選擇頁專屬元件 8. App：響應式斷點 9. ERP：版面骨架（含全域橫線 .global-divider） 10. ERP：左側選單 11. ERP：頂部列 12. ERP：內容區元件（卡片、統計、活動列表…） 13. ERP：字級／版面／選單度量等 token 已收在 :root，元件段落內僅引用 數值來源標記（沿用 ERP 檔案既有慣例）： [模板] = 由 core.css 直接讀出，已由 rem 換算為 px [公式] = 沿用模板的 color-mix 公式，代入菲力色票後解析為字面值 [菲力] = 菲力規格既定值 [待定] = 模板未涵蓋或與資訊公司現行衝突，尚未定案 ============================================================ */ :root{ /* ================= 共用層／產品專屬層（App/ERP 各自定義，短語意名稱不加前綴） ================= */ --brand: #EE4D75; /* [菲力] 玫瑰粉 主色，共用層 */ --brand-dark: #C93A5E; /* ERP 專屬：品牌色深階，用於問候卡漸層 */ --secondary: #3CA9E6; /* [菲力] 清亮藍，共用層 */ --accent: #FDD100; /* [菲力] 暖黃，共用層 */ --ink-soft: #6B6F80; --ink-faint: #9A9DB0; --page: #F7F7F9; /* [模板] --bs-body-bg */ --surface: #FFFFFF; /* [模板] --bs-paper-bg */ /* 由模板公式代入菲力墨色解析而得 */ --tint-05: #EDEEF1; /* [公式] mix(ink 5%, page) */ --tint-08: #E8E8EC; /* [公式] mix(ink 8%, page) */ --tint-12: #E7E8EB; /* [公式] mix(ink 12%, white) */ --rose-tint: #FCE3E9; /* [公式] mix(white 84%, rose) */ --blue-tint: #E0F1FB; /* [公式] mix(white 84%, blue) */ --amber-tint: #FFF8D6; /* [公式] mix(white 84%, amber) */ /* ================= 用途層 ================= */ --divider: var(--tint-12); --row-hover: var(--tint-05); --row-press: var(--tint-08); /* ================= 陰影 ================= */ --elev-xs: 0 2px 6px 0 rgba(38,43,67,.14); /* [模板] --bs-box-shadow-xs */ --elev-1: 0 4px 14px 0 rgba(38,43,67,.16); /* [模板] --bs-box-shadow（.card 用） */ --elev-3: 0 0 10px var(--tint-12); /* [模板] --bs-menu-box-shadow */ /* ================= 字體 ================= 單一字體堆疊即可分流：Inter 只含拉丁字母／數字／標點，不含漢字， 瀏覽器遇到中文字時會自動往後找到 Noto Sans TC。 → 英文與數字 = Inter；中文 = Noto Sans TC。 順序不可對調：Noto Sans TC 也有拉丁字母，放前面會把英文一起吃掉。 */ --font-sans: "Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,sans-serif; /* ================= 字級 ================= */ --md-type-display: 24px; /* [模板] h4 @≥1200px = 1.5rem */ --md-type-title: 18px; /* [模板] h5 = 1.125rem */ --md-type-cardname: 18px; /* [模板] .card-title 走 h5 */ --md-type-body: 15px; /* [模板] --bs-body-font-size = .9375rem */ --md-type-nav: 15px; /* [模板] .menu-vertical .menu-link = .9375rem */ --md-type-subtitle: 15px; --md-type-caption: 13px; --md-type-chip: 12px; --md-type-navbar-title: 26px; /* [菲力] navbar-context（麵包屑／頁面標題）專用，現場試驗 36→32→28→26px 定案 */ /* 行高：模板 1.375 為純英文值。單行 UI 沿用，多行中文另訂 1.6 */ --lh-ui: 1.375; /* [模板] --bs-body-line-height */ --lh-cjk: 1.6; /* [菲力] 中文多行段落 */ --ls-nav: .15px; /* [模板] .menu-vertical .menu-link letter-spacing */ /* ================= 版面 ================= */ --menu-w: 260px; /* [模板] --bs-menu-width = 16.25rem */ --menu-w-collapsed: 70px; /* [模板] --bs-menu-collapsed-width = 4.375rem */ --navbar-h: 64px; /* [模板] .layout-navbar block-size = 4rem */ --container-max: 1440px; /* [模板] .container-xxl @≥1400px */ --container-pad-x: 24px; /* [模板] .container-xxl padding-inline @≥992px = 1.5rem */ --container-pad-y: 24px; /* [模板] .container-p-y = 1.5rem */ --grid-gap: 24px; /* [模板] .g-6 = 1.5rem，全頁唯一間距值 */ /* 選單第一行上緣距瀏覽器頂端；主內容第一張卡片要對齊這條線。 寫成推導式而非寫死，任何一項改動時對齊會自動維持。 */ --menu-first-row-top: calc(var(--brandbar-h) + var(--menu-inner-pad-t) + var(--menu-item-spacer)); --content-pad-top: calc(var(--menu-first-row-top) - var(--navbar-h)); /* ================= 選單度量（全數來自 core.css） ================= */ --menu-item-spacer: 4px; /* [模板] --bs-menu-item-spacer = .25rem */ --menu-inner-pad-t: 12px; /* 20260906 更正：原 4px（[模板] .menu-inner.py-1 = .25rem）算出選單第一列頂端 只有 72px，但右側內容區有一條「至少 16px」的保底值（見 .container-xxl padding-block 的 max()），實際套用的是 80px，兩邊對不齊、選單第一列偏高。 改成 12px 後 --menu-first-row-top 算出 80px，跟右側保底值算出的 80px一致， 兩邊真正對齊，不是巧合湊數字——這個 token 只影響選單第一列的起始位置， 不影響其後每一項之間的間距（那是 --menu-item-spacer 的職責）。 */ --menu-link-py: 7px; /* [模板] --bs-menu-vertical-link-padding-y = .4375rem */ --menu-link-px: 12px; /* [模板] --bs-menu-vertical-link-padding-x = .75rem */ --menu-link-mx: 12px; /* [模板] .menu-vertical .menu-inner>.menu-item .menu-link margin-inline = .75rem */ --menu-link-radius: 8px; /* [模板] border-radius = .5rem */ --menu-link-min-h: 38px; /* [模板] min-block-size */ --menu-icon-size: 22px; /* [模板] .menu-vertical .menu-icon = 1.375rem */ --menu-icon-gap: 8px; /* [模板] .menu-icon margin-inline-end = .5rem */ --menu-arrow-size: 22px; /* [模板] .menu-toggle::after = 1.375rem */ --menu-arrow-inset: 8.8px; /* [模板] calc(.75rem - .2rem) */ /* 三層階梯：文字起點 54 / 74 / 94px，每階 +20px。 模板的 40.8 / 49.6px 是為「L2、L3 都只有圓點」設計的； 我們 L2 有圖示、L3 只有圓點，結構不同，故重新推導。 */ --menu-indent-l2: 32px; /* 第二層圖示起點（絕對 44px） */ --menu-indent-l3: 82px; /* 第三層文字起點（絕對 94px） */ --menu-dot-inset-l3: 66px; /* 第三層圓點位置（絕對 78px） */ --menu-dot-size: 6px; /* [調整] 模板為 8px；配 15px 中文過重，減為 6px */ --menu-anim: .3s; /* [模板] .menu-vertical transition inline-size .3s */ --brandbar-h: 64px; /* [模板] demo.css .menu .app-brand.demo height */ --brand-logo-h: 48px; /* [菲力] 展開時 logo 高度 → 寬 180px；64px 品牌列上下各餘 8px */ --brand-logo-h-min: 48px; /* 20260906 更正：原 34px 太小不易辨識，改 48px；原圖 837×762 比例下 48px 高換算約 53px 寬，收合列(70px)原本的內距塞不下，已同步調整 收合狀態的 .app-brand 內距（見下方「收合狀態」與「平板」兩處規則）。 */ /* 選單語意色 */ --menu-bg: var(--page); /* [模板] --bs-menu-bg = --bs-body-bg（側欄與頁面同色） */ --menu-color: var(--ink); /* [模板] #3b4055 → 代入菲力墨色 */ --menu-hover-bg: var(--row-hover); /* [公式] */ --menu-sub-active-bg: var(--row-press); /* [公式] */ --menu-active-bg: var(--brand); /* [模板] --bs-menu-active-bg = --bs-primary */ --menu-active-color: #FFFFFF; /* [模板] --bs-menu-active-color = primary-contrast */ /* ================= 卡片 ================= */ --card-radius: 12px; /* [菲力] 與 App 端同值，App/ERP 共用同一份設計系統的統一定案 */ --card-pad: 20px; /* [模板] --bs-card-spacer = 1.25rem */ --avatar-size: 40px; /* [模板] --bs-avatar-size = 2.5rem（卡片圖磚用） */ --avatar-nav: 40px; /* [菲力] 頂部列頭像 */ /* ================= App 專屬層（App StyleGuide v7 規範） ================= */ --ink-feat: #52576B; --chev: #6B6F80; /* App 子頁：箭頭圖示色 */ --divider-hair:#E2E2E8; --divider-block:#B7BAC9; --radius-sm: 8px; --radius-pill:999px; --card-pad-v: 36px; /* 登入模組個案寬鬆值，非 App 樣式表 card--p 規範(20/18) */ --card-pad-h: 28px; --panel-neutral:#E3E4EB; --success: #4CAF50; /* 身份選擇頁：家長角色徽章 */ --b-blue-bg: #D8EDFB; --b-blue-fg:#1E6E9F; /* 手機號碼欄位 */ --green-bg: #D9EFD9; --green-fg:#1F7A3D; /* Email 欄位 */ --amber-bg: #FDF3C4; --amber-fg:#856900; /* 驗證碼欄位（兩條路徑共用） */ --nav-pill: #FBE0E8; --pill-meta:#C4587A; /* 次要按鈕 */ --nav-inactive:#83879E; /* 20260906：Tab Bar 未選態，沿用 App StyleGuide v7 定案值（3.31:1） */ --av-bg: #FBD0DC; --av-fg:#C2375C; /* 身份選擇頁：頭像色塊 */ --danger-bg: #FDE8E8; --danger-fg:#C2373A; /* 錯誤訊息 */ } /* ========================================================================== 全域重置（App／ERP 共用，不含任何產品專屬字級/色彩值） ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ /* 20260903：關閉 Android Chrome「系統字體放大」對網頁 px 字級的自動加成。 全站字級系統（Title 24/500、Body 17/400…）是針對固定 px 比例調校過的， 不希望瀏覽器在使用者調大系統字體時，用它自己的邏輯把這些數值等比放大、 打亂原本的比例關係（尤其是 56px 高的 .appbar 這類固定高度容器，文字被 瀏覽器放大後有裁切風險）。iOS Safari 的「輔助使用/放大文字」本來就不影響 一般網頁 px 字級，這條規則主要是擋 Android Chrome。 使用者仍可用雙指縮放／瀏覽器頁面縮放放大整頁，不受此設定影響—— 這條只關掉「文字單獨被瀏覽器放大、版面沒跟著等比例放大」的半吊子縮放， 不影響使用者主動整頁縮放的能力。 */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ min-height:100vh; background:var(--page); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } .msr{ font-family:'Material Symbols Rounded'; font-weight:normal; line-height:1; font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; } .material-icons{ font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; /* FILL 走變數，作用中項目才填實（Material Design 3 導覽列慣例）。 整串 font-variation-settings 只寫這一次，要改填實只動 --icon-fill。 */ font-variation-settings:'FILL' var(--icon-fill,0),'wght' 300,'GRAD' 0,'opsz' 24; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; user-select:none; } /* ========================================================================== 產品專屬層：--ink 與 --card-shadow 依容器 scope 這是 App 與 ERP 唯一真正衝突的兩個 token（其餘共用層數值本來就相同）。 20260831 兩邊合併為單一檔案時在此定案：不硬選一個值，改用兩邊本來就有的 根容器分域，同一個變數名在不同容器下解析成不同值，不需要另外發明變數名。 20260902 拆分：.app 過去身兼兩職——(1) 手機畫布容器（寬度封頂/置中/底色）， (2) 觸發本段 token 的 scope 機制——兩者衝突時（例如嵌進 ERP 桌面殼）只能靠 頁面層級 override 硬解。現在拆成兩個獨立 class： .app-scope＝純粹觸發 token（本段），不含任何版面規則 .app ＝.app-scope 的效果＋手機畫布版面（見下方「一般內容頁」段落） 既有頁面只要用了 .app，效果不變，不需要改標記； ERP／桌面頁若只需要 App 視覺 token（不要 390px 畫布），改用 .app-scope， 不要再借用 .app 然後另外寫 .layout-wrapper .app{...} 之類的局部覆寫解結構衝突。 ========================================================================== */ .app-scope, .app, .auth-shell{ --ink:#131313; --card-shadow:0 2px 8px rgba(40,43,67,.10); font-family:'Inter','Noto Sans TC',system-ui,sans-serif; letter-spacing:-0.03em; color:var(--ink); } .app-scope input, .app-scope button, .app input, .app button, .auth-shell input, .auth-shell button{ font-family:'Inter','Noto Sans TC',system-ui,sans-serif; letter-spacing:-0.03em; } /* ========================================================================== App：共用外殼版面（登入頁／身份選擇頁共用同一套殼） ========================================================================== */ .auth-shell{ min-height:100vh; display:flex; flex-direction:column; line-height:normal; } /* 左側插畫（僅桌面 ≥1180 顯示），兩頁文案與色塊完全相同 */ .illus-panel{ display:none; position:relative; flex:1 1 58%; overflow:hidden; background: radial-gradient(circle at 20% 25%, rgba(238,77,117,.85), transparent 55%), radial-gradient(circle at 75% 15%, rgba(60,169,230,.75), transparent 50%), radial-gradient(circle at 60% 80%, rgba(253,209,0,.55), transparent 55%), #1F2233; } .illus-panel .shape{ position:absolute; border-radius:50%; opacity:.5; filter:blur(2px); } .illus-panel .shape.s1{ width:260px;height:260px; background:var(--brand); top:8%; left:6%; } .illus-panel .shape.s2{ width:180px;height:180px; background:var(--secondary); bottom:14%; left:20%; opacity:.6; } .illus-panel .shape.s3{ width:340px;height:340px; background:var(--accent); bottom:-8%; right:-6%; opacity:.35; } .illus-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding:56px; color:#fff; } .illus-brandmark{ font-weight:700; font-size:20px; flex:0 0 auto; } .illus-spacer-a{ flex:2 1 auto; } .illus-spacer-b{ flex:1 1 auto; min-height:40px; } .illus-tagline{ flex:0 0 auto; max-width:440px; margin-top:200px; } .illus-tagline h2{ font-size:28px; line-height:1.4; margin:0 0 14px; font-weight:700; } .illus-tagline p{ font-size:17px; line-height:1.7; margin:0; opacity:.85; font-weight:400; } .illus-values{ font-weight:500 !important; margin-top:10px; opacity:.95 !important; } .illus-version-tag{ font-size:12px; opacity:.5; flex:0 0 auto; } /* 右側表單／內容面板 */ .form-panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 20px; min-height:100vh; } .form-card{ width:100%; max-width:400px; background:var(--surface); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:var(--card-pad-v) var(--card-pad-h); } .brand-logo-top{ display:block; margin:4px auto 28px; max-width:196px; width:100%; height:auto; } .brand-logo-bottom{ display:block; margin:16px auto 0; width:80%; height:auto; opacity:.92; } /* 僅登入頁使用 */ /* ========================================================================== App：共用外殼版面（一般內容頁，例如首頁、學校訊息、成長紀錄等） 與上方登入模組的 .auth-shell 是兩套不同的殼，互不相關。 ========================================================================== */ .app{ /* token/scope 規則見上方「產品專屬層」段落（.app-scope, .app, .auth-shell）； 這裡只疊加手機畫布版面本身，不要在此重複寫 --ink / --card-shadow。 */ width:100%; max-width:390px; /* 非寫死 width，避免 <390px 實機（如 360px Android）橫向溢出裁切 */ margin:0 auto; background:var(--page); /* 承載底色，防止預覽器/宿主環境覆寫 html/body 背景時整頁跑色 */ min-height:100vh; } /* 子頁頁首（根頁的頁首另有一套，見下方「根頁頁首＋Tab Bar」，兩者互斥不混用）*/ .appbar{ position:sticky; top:0; z-index:20; height:56px; padding:0 20px; background:var(--page); display:flex; align-items:center; gap:8px; } .appbar .back{ font-size:24px; color:var(--brand); cursor:pointer; } .appbar .ttl{ font-size:24px; font-weight:500; color:var(--brand); line-height:1; } /* ========================================================================== 根頁頁首＋Tab Bar（App，20260906 新增） 根頁＝底部有 Tab Bar 的頁面（例如家校首頁）；子頁＝上方 .appbar 返回鍵型式 （例如學校訊息）。兩態互斥：根頁不出現 .appbar，子頁不出現 .tabbar。 家長版 Tab Bar 第一層 5 項已定案：家校／校曆／收藏／社群／設定。 ========================================================================== */ .app-roothead{ position:sticky; top:0; z-index:20; height:64px; padding:0 20px; background:var(--surface); display:flex; align-items:center; justify-content:space-between; } .app-roothead .brandmark{ font-size:20px; font-weight:700; color:var(--brand); letter-spacing:-0.02em; } .app-roothead .user-mini{ display:flex; align-items:center; gap:8px; } .app-roothead .user-mini .name{ font-size:17px; font-weight:500; color:var(--ink); } .app-roothead .user-mini .avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--panel-neutral); } .tabbar{ position:sticky; bottom:0; z-index:20; display:flex; justify-content:center; gap:14px; padding:6px 24px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--page); } .tabbar-item{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:56px; text-decoration:none; cursor:pointer; background:none; border:none; } .tabbar-ic{ display:flex; align-items:center; justify-content:center; width:56px; height:30px; border-radius:999px; } .tabbar-item.active .tabbar-ic{ background:var(--nav-pill); } .tabbar-item .msr{ font-size:25px; color:var(--nav-inactive); } .tabbar-item.active .msr{ color:var(--brand); font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24; } .tabbar-lbl{ font-size:13px; font-weight:500; color:var(--nav-inactive); } .tabbar-item.active .tabbar-lbl{ color:var(--brand); } /* ---------- 通用列表列（icon＋文字＋chevron，卡片內使用；20260906 新增） ---------- */ .list-card{ background:var(--surface); border-radius:var(--card-radius); box-shadow:var(--card-shadow); overflow:hidden; } .list-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; text-decoration:none; color:inherit; cursor:pointer; } .list-row + .list-row{ border-top:1px solid var(--divider-hair); } .list-row .list-ic{ font-size:24px; color:var(--ink-soft); flex:0 0 auto; } .list-row .list-lbl{ flex:1 1 auto; font-size:17px; font-weight:400; color:var(--ink); } .list-row .list-chevron{ font-size:22px; color:var(--chev); flex:0 0 auto; } /* ========================================================================== Bottom Sheet（20260906 新增；「社群」共用此元件，之後其他需要跳出選單的 地方也能沿用）。全平台統一同一套：桌面／平板／手機一律從畫面下方滑出， 不因裝置另開分支，跟本專案既有的「單一自適應邏輯貫穿斷點」原則一致。 ========================================================================== */ .sheet-backdrop{ position:fixed; inset:0; z-index:1200; background:rgba(20,22,40,.45); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; } .sheet-backdrop.open{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s linear; } .sheet{ position:fixed; left:50%; bottom:0; z-index:1201; width:100%; max-width:480px; transform:translate(-50%, 100%); transition:transform .3s cubic-bezier(.32,.72,0,1); background:var(--surface); border-radius:20px 20px 0 0; box-shadow:0 -8px 30px rgba(20,22,40,.20); padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px)); } .sheet-backdrop.open .sheet{ transform:translate(-50%, 0); } .sheet-handle{ width:36px; height:4px; border-radius:999px; background:var(--divider-block); margin:0 auto 12px; } .sheet-list{ display:flex; flex-direction:column; } .sheet-item{ display:flex; align-items:center; gap:14px; padding:12px 20px; text-decoration:none; color:inherit; cursor:pointer; transition:background .15s; } .sheet-item:hover{ background:var(--row-hover); } .sheet-item img{ width:32px; height:32px; border-radius:8px; flex:0 0 auto; object-fit:cover; } .sheet-item span{ font-size:17px; font-weight:400; color:var(--ink); } /* ---------- App：共用小型工具類別 ---------- */ .hidden{ display:none !important; } /* 分隔線：登入頁需要上下都留白，身份選擇頁下方緊接列表、 不需要下邊距，用.tight修飾——這是刻意差異，不是漏改 */ .divider-line{ height:1px; background:var(--divider-hair); margin:16px 0; } .divider-line.tight{ margin:16px 0 0; } .footer-note{ text-align:center; font-size:12px; font-weight:400; color:var(--ink-soft); line-height:1.6; margin-top:24px; } /* 僅登入頁使用 */ /* ---------- App：登入頁專屬元件 ---------- */ .field{ position:relative; margin-bottom:14px; } .icon-chip{ position:absolute; left:6px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; pointer-events:none; } .icon-chip .msr{ font-size:16px; } .field input{ width:100%; padding:13px 14px 13px 40px; border-radius:var(--radius-sm); border:1px solid var(--panel-neutral); background:var(--page); font-size:17px; font-weight:400; color:var(--ink); outline:none; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .field input::placeholder{ color:#9A9DAC; } .field input:focus{ border-color:var(--secondary); box-shadow:0 0 0 3px rgba(60,169,230,.15); background:var(--surface); } .field input:disabled{ color:var(--ink-soft); background:var(--panel-neutral); cursor:not-allowed; } .code-input{ text-align:left; font-size:18px; font-weight:500; } .btn-primary{ width:100%; padding:14px; border-radius:var(--card-radius); background:var(--brand); color:#fff; font-weight:700; font-size:16px; border:none; cursor:pointer; transition:filter .15s ease; } .btn-primary:hover{ filter:brightness(.94); } .btn-primary:active{ filter:brightness(.88); } .btn-secondary{ width:100%; padding:13px; border-radius:var(--card-radius); background:var(--nav-pill); color:var(--pill-meta); font-weight:700; font-size:15px; border:none; cursor:pointer; margin-top:8px; } .link-alt{ color:var(--brand); font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; background:none; border:none; padding:0; } .link-alt:hover{ text-decoration:underline; } .link-alt[disabled]{ color:#C7C9D4; cursor:default; pointer-events:none; } .row-end{ display:flex; justify-content:flex-end; margin:10px 0 4px; } .error-msg{ font-size:13px; font-weight:500; color:var(--danger-fg); background:var(--danger-bg); border-radius:var(--radius-sm); padding:10px 12px; margin:2px 0 14px; } .resend-note{ font-size:13px; color:var(--ink-soft); margin-top:8px; display:flex; justify-content:space-between; } .firebase-note{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; } .mode-badge{ display:inline-block; font-size:11px; font-weight:500; padding:4px 10px; border-radius:var(--radius-pill); margin-bottom:14px; } /* ---------- App：身份選擇頁專屬元件 ---------- */ .id-title{ font-size:24px; font-weight:700; color:var(--ink); text-align:center; margin:0 0 8px; } .id-subtitle{ font-size:14px; font-weight:400; color:var(--ink-soft); text-align:center; margin:0; } .identity-row{ display:flex; align-items:center; gap:14px; padding:16px 4px; cursor:pointer; border-top:1px solid var(--divider-hair); transition:background .15s ease; } .identity-row:first-of-type{ border-top:none; } .identity-row:hover{ background:var(--page); } .identity-row.selected{ background:var(--page); } .id-avatar{ width:52px; height:52px; border-radius:50%; background:var(--av-bg); color:var(--av-fg); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:500; flex:0 0 auto; } .id-info{ flex:1 1 auto; min-width:0; } .id-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .id-name{ font-size:19px; font-weight:500; color:var(--ink); } .badge{ font-size:12px; font-weight:500; border-radius:999px; padding:4px 12px; line-height:1.6; color:#fff; flex:0 0 auto; } .id-sub{ margin-top:4px; font-size:14px; font-weight:400; color:var(--ink-soft); } .id-chevron{ font-size:22px; color:var(--chev); flex:0 0 auto; } /* ========================================================================== App：響應式斷點（登入頁／身份選擇頁共用） ========================================================================== */ @media (min-width:768px) and (max-width:1179px){ .form-card{ max-width:440px; } } @media (min-width:1180px){ .auth-shell{ flex-direction:row; } .illus-panel{ display:flex; } .illus-content{ padding:64px; } .illus-tagline{ max-width:600px; } .illus-desc-line{ white-space:nowrap; } .form-panel{ flex:0 0 42%; background:var(--surface); padding:0 64px; } .form-card{ max-width:392px; background:transparent; box-shadow:none; border-radius:0; padding:0; } } @media (max-width:767px){ .brand-logo-top{ max-width:172px; } } /* ========================================================================== 版面骨架 .layout-menu 為 fixed；.layout-page 以 padding-inline-start 讓位（模板做法） ========================================================================== */ .layout-wrapper{ --ink:#393E55; --card-shadow:0 4px 14px rgba(38,43,67,.16); display:flex; align-items:stretch; min-height:100vh; font-family:var(--font-sans); font-size:var(--md-type-body); font-weight:400; line-height:var(--lh-ui); color:var(--ink-soft); /* [模板] --bs-body-color #676a7b ≒ 菲力 --ink-soft */ } .layout-wrapper ul{ margin:0; padding:0; list-style:none; } .layout-wrapper a{ text-decoration:none; color:inherit; } .layout-wrapper button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } .layout-wrapper h1, .layout-wrapper h2, .layout-wrapper h3, .layout-wrapper h4, .layout-wrapper h5{ margin:0; color:var(--ink); font-weight:500; line-height:1.2; } /* 全域橫線：貫穿整個頁面寬度（含側邊選單下方），標記頂部列與其下內容的分界。 須為 body 的頂層兄弟元素（不可嵌在 .layout-page 裡），否則因 .layout-page 有 padding-inline-start 讓位給選單，線只會出現在選單右側，蓋不到選單下方。 HTML:
…
*/ .global-divider{ display:none; /* 20260902：手機優先預設隱藏，≥1180 見下方 RWD 斷點區塊還原 */ position:fixed; inset-block-start:var(--navbar-h); /* 64px，對齊 navbar 底緣，也對齊側邊選單品牌列(--brandbar-h 同樣 64px)底緣—— 兩個高度目前剛好相同才有這條貫穿線，日後若調整任一邊高度需重新核對 */ inset-inline:0; block-size:1px; background:var(--divider); z-index:1090; /* 須高於 .layout-menu 的 1080，才能蓋在側邊選單背景之上顯示 */ pointer-events:none; } .layout-page{ flex:1 1 auto; min-width:0; padding-inline-start:0; /* 20260902：手機優先預設無側邊選單讓位，≥1180 見下方 RWD 斷點區塊還原 */ transition:padding-inline-start var(--menu-anim) ease; } /* ========================================================================== 左側選單 ========================================================================== */ .layout-menu{ display:none; /* 20260902：手機優先預設隱藏，≥1180 見下方 RWD 斷點區塊還原 */ position:fixed; inset-block:0; inset-inline-start:0; z-index:1080; /* [模板] layout-content-navbar 固定選單 */ flex-direction:column; overflow:hidden; inline-size:var(--menu-w); background:var(--menu-bg); transition:inline-size var(--menu-anim); } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu{ inline-size:var(--menu-w-collapsed); } .layout-menu-collapsed.layout-menu-hover .layout-menu{ inline-size:var(--menu-w); box-shadow:var(--elev-3); } /* ---------- 品牌列（app-brand） ---------- */ .app-brand{ display:flex; flex:0 0 auto; align-items:center; block-size:var(--brandbar-h); line-height:1; /* [模板] padding-inline: calc(px*2 - .125rem) calc(px*2 - .5rem) = 22px 16px */ padding-inline:22px 16px; transition:padding var(--menu-anim) ease-in-out; } .app-brand-link{ display:flex; align-items:center; min-width:0; } /* 展開／收合各用一張圖，切換方式沿用模板的 .app-brand-img / .app-brand-img-collapsed */ .app-brand-img{ display:block; block-size:var(--brand-logo-h); inline-size:auto; } .app-brand-img-collapsed{ display:none; block-size:var(--brand-logo-h-min); inline-size:auto; } .layout-menu-toggle{ margin-inline-start:auto; inline-size:30px; block-size:30px; display:grid; place-items:center; border-radius:6px; color:var(--ink-soft); transition:background .15s,color .15s; } .layout-menu-toggle:hover{ background:var(--menu-hover-bg); color:var(--ink); } /* 圖示要隨狀態轉向：釘住＝指向左（按下收起）／收合＝指向右（按下釘住） 模板同樣是 rotate(180deg)，見 .layout-menu-hover.layout-menu-collapsed ... svg */ .layout-menu-toggle .material-icons{ font-size:22px; transition:transform var(--menu-anim); } .layout-menu-collapsed .layout-menu-toggle .material-icons{ transform:rotate(180deg); } /* ---------- 捲動區 ---------- */ .layout-wrapper .menu-inner{ /* 20260906：選擇器從 .menu-inner 改成 .layout-wrapper .menu-inner。 原因：.layout-wrapper ul{padding:0;...}（見上方「版面骨架」段落）優先權 (0,1,1) 比原本 .menu-inner 單一 class 的優先權 (0,1,0) 高，一直把這裡的 padding-block 蓋成 0——這是本次對齊問題的真正根因，不是 --menu-inner-pad-t 這個 token 數值本身的問題（不論設 4px 或 12px 都會被蓋掉，從未真的生效過）。 改成兩層 class 選擇器 (0,2,0) 後才能真正贏過那條重置規則。 */ display:flex; flex:1 1 auto; flex-direction:column; overflow-y:auto; overflow-x:hidden; padding-block:var(--menu-inner-pad-t) 16px; scrollbar-width:thin; scrollbar-color:rgba(57,62,85,.3) transparent; } .menu-inner::-webkit-scrollbar{ width:2px; } /* [模板] .ps__thumb-y = .125rem */ .menu-inner::-webkit-scrollbar-thumb{ background:rgba(57,62,85,.3); } .menu-inner::-webkit-scrollbar-track{ background:transparent; } /* ---------- 項目 ---------- */ .menu-item{ flex:0 0 auto; flex-direction:column; inline-size:var(--menu-w); margin-block-start:var(--menu-item-spacer); } .menu-sub .menu-item{ inline-size:auto; } .menu-link{ position:relative; display:flex; flex:0 1 auto; align-items:center; min-block-size:var(--menu-link-min-h); margin-inline:var(--menu-link-mx); padding-block:var(--menu-link-py); padding-inline:var(--menu-link-px); border-radius:var(--menu-link-radius); font-size:var(--md-type-nav); font-weight:400; line-height:var(--lh-ui); letter-spacing:var(--ls-nav); color:var(--menu-color); transition:background .15s,color .15s; } .menu-icon{ flex:0 0 auto; inline-size:var(--menu-icon-size); block-size:var(--menu-icon-size); font-size:var(--menu-icon-size); margin-inline-end:var(--menu-icon-gap); text-align:center; transition:margin-inline-end var(--menu-anim) ease; } .menu-link > .menu-text{ flex:0 1 auto; overflow:hidden; opacity:1; text-overflow:ellipsis; white-space:nowrap; } /* 有子選單者：右側箭頭 */ .menu-toggle{ padding-inline-end:calc(var(--menu-link-px) + 1.679975em); } /* [模板] */ .menu-toggle::after{ position:absolute; display:block; content:""; inset-block-start:50%; inset-inline-end:var(--menu-arrow-inset); inline-size:var(--menu-arrow-size); block-size:var(--menu-arrow-size); background-color:var(--menu-color); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z'/%3E%3C/svg%3E"); mask-repeat:no-repeat; mask-size:100% 100%; transform:translateY(-50%); transition:transform var(--menu-anim); } .menu-item.open > .menu-toggle::after{ transform:translateY(-50%) rotate(90deg); } /* 狀態 —— 依模板：hover 淺灰；作用中分支的父項淺灰；作用中葉節點實心主色 */ .menu-item:not(.active):not(.open) > .menu-link:hover{ background:var(--menu-hover-bg); } /* 展開中的父項＝灰底。 只綁 .open，不綁 .active —— 模板原本是 .menu-item.active > .menu-toggle， 但 .active 只在點選葉節點時才變動，展開／收合不會動它， 導致切換主選單時灰底留在舊項目上。這裡改綁 .open，灰底才會跟著展開狀態轉移。 */ .menu-item.open > .menu-link.menu-toggle{ background:var(--menu-sub-active-bg); } .menu-item.active > .menu-link:not(.menu-toggle){ background:var(--menu-active-bg); color:var(--menu-active-color); box-shadow:var(--elev-xs); } /* ---------- 子選單 ---------- */ .menu-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--menu-anim) ease-in-out; } .menu-item.open > .menu-sub{ grid-template-rows:1fr; } .menu-sub-inner{ display:flex; flex-direction:column; overflow:hidden; } /* 第二層：有圖示 */ .menu-sub .menu-link{ padding-inline-start:var(--menu-indent-l2); } /* 第三層：不用圖示，改回模板原本的圓點。 理由：L3 項目會持續增加，逐一指派圖示必然重複 （2.0 原始版 person_search 就用在四個地方、print 用在兩個地方）。 */ .menu-sub .menu-sub .menu-link{ padding-inline-start:var(--menu-indent-l3); } .menu-sub .menu-sub .menu-link::before{ content:""; position:absolute; inset-inline-start:var(--menu-dot-inset-l3); inset-block-start:50%; inline-size:var(--menu-dot-size); block-size:var(--menu-dot-size); border-radius:50%; background:var(--ink-faint); transform:translateY(-50%); transition:background .15s; } .menu-sub .menu-sub .menu-item.active > .menu-link::before{ background:#fff; } /* 作用中項目的圖示填實；展開但未選取維持線條（展開 ≠ 選取） */ .menu-item.active > .menu-link .menu-icon{ --icon-fill:1; } /* ---------- 收合狀態 ---------- */ .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-item{ inline-size:var(--menu-w-collapsed); } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-text{ overflow:hidden; opacity:0; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand-img{ display:none; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand-img-collapsed{ display:block; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-sub, .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-item.open > .menu-sub{ grid-template-rows:0fr; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-toggle::after{ display:none; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-link{ padding-inline:8px; /* 20260906 更正：原只加右側內距(給展開箭頭預留空間)，但方案B之後 選單全是葉節點、沒有箭頭，那條不對稱內距只是把圖示往左推、 讓選中態的方框看起來沒置中。改左右對稱內距＋下面的置中對齊。 */ justify-content:center; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .menu-icon{ margin-inline-end:0; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu{ --menu-icon-size:32px; } /* 20260906：收合窄列圖示放大，僅此狀態，展開態維持 22px */ .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .app-brand{ padding-inline:4px; /* 20260906：原 16px 塞不下放大後的 logo(約53px寬)，縮小內距並置中 */ justify-content:center; } .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu .layout-menu-toggle{ display:none; } /* ========================================================================== 頂部列（navbar-detached） ========================================================================== */ .layout-navbar{ display:none; /* 20260902：手機優先預設隱藏，≥1180 見下方 RWD 斷點區塊還原 */ position:sticky; inset-block-start:0; z-index:900; flex:0 0 auto; align-items:center; block-size:var(--navbar-h); inline-size:100%; max-inline-size:var(--container-max); /* [菲力] 拆懸浮後：與 .container-xxl 用同一個封頂值，兩者永遠同步縮放置中 */ margin-inline:auto; padding-inline:var(--container-pad-x); background:var(--page); /* 20260902：原本 var(--surface) 白色，業主截圖指出應改與頁面底色一致 */ color:var(--ink-soft); } /* 全域橫線：貫穿整個頁面寬度（含側邊選單下方），標記頂部列與其下內容的分界。 本體宣告見「版面骨架」區塊的 .global-divider（採 position:fixed，必須是 body 的頂層兄弟元素）。 */ /* 左側「目前處理中的項目」（麵包屑／頁面標題） */ .navbar-context{ display:flex; align-items:center; min-width:0; font-size:var(--md-type-navbar-title); font-weight:500; color:var(--brand); position:relative; inset-block-start:6px; /* [菲力] 目測微調值，若日後調整 navbar 高度或內部排版，需重新核對 */ } .navbar-spacer{ flex:1 1 auto; } /* ---------- 使用者資訊（頭像／姓名／單位／權限徽章／下拉） ---------- */ /* 資訊本身不是按鈕、沒有外框；只有最右邊那顆箭頭可按 */ .navbar-user{ position:relative; display:flex; align-items:center; gap:10px; } .navbar-user-info{ display:flex; align-items:center; gap:8px; } .avatar{ flex:0 0 auto; inline-size:var(--avatar-nav); block-size:var(--avatar-nav); border-radius:50%; object-fit:cover; display:block; } .navbar-user-name{ font-size:var(--md-type-body); font-weight:500; color:var(--ink); white-space:nowrap; } .navbar-user-dept{ font-size:var(--md-type-body); color:var(--ink-faint); white-space:nowrap; } .navbar-user-badge{ padding:3px 10px; border-radius:6px; background:var(--ink); color:#fff; font-size:var(--md-type-caption); /* 13px；姓名／單位維持 15px */ font-weight:500; white-space:nowrap; } .navbar-user-caret{ flex:0 0 auto; inline-size:28px; block-size:28px; display:grid; place-items:center; border-radius:6px; color:var(--ink-soft); transition:background .15s, color .15s; } .navbar-user-caret:hover{ background:var(--row-hover); color:var(--ink); } .navbar-user-caret .material-icons{ font-size:20px; transition:transform var(--menu-anim); } .navbar-user.open .navbar-user-caret .material-icons{ transform:rotate(180deg); } .user-dropdown{ position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:1000; min-inline-size:200px; padding-block:6px; border-radius:var(--card-radius); background:var(--surface); box-shadow:var(--elev-1); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s; } .navbar-user.open .user-dropdown{ opacity:1; visibility:visible; transform:none; } .user-dropdown-item{ display:flex; align-items:center; gap:12px; min-block-size:42px; padding-inline:16px; font-size:var(--md-type-body); color:var(--ink); white-space:nowrap; transition:background .15s; } .user-dropdown-item:hover{ background:var(--row-hover); } .user-dropdown-item .material-icons{ font-size:20px; color:var(--secondary); } .user-dropdown-item.danger, .user-dropdown-item.danger .material-icons{ color:var(--brand); } /* ========================================================================== 內容區 — 固定最大寬 1440px，不隨螢幕拉滿 ========================================================================== */ .content-wrapper{ display:flex; flex-direction:column; flex:1 1 auto; } .container-xxl{ inline-size:100%; max-inline-size:var(--container-max); margin-inline:auto; padding-inline:20px; /* 20260902：手機優先預設值，對齊 App 端標準左右內距（見 StyleGuide），≥768 見下方還原 24px */ padding-block:12px 40px; /* 20260902：手機優先預設值，對齊 App 端 .feed 原本的上下內距，≥768 見下方還原 */ } /* ========================================================================== ERP：RWD 斷點（20260902 新增，全站共用；20260902 second pass 改三段式） 此前 ERP 版面骨架（.layout-wrapper／.layout-menu／.layout-page／ .layout-navbar／.global-divider／.container-xxl）完全沒有響應式，純桌面 寫死。這次「學校訊息」頁需要真 RWD，發現這件事本來就該在共用檔案處理一次， 不該每個頁面各自在自己的