/* * onsite-auth.css — 登入相關頁（驗證碼頁、舊驗證連結停用頁；之後的登入／註冊／忘記密碼頁共用） * 專用的手寫樣式。onsite.css 是 mockup 轉換產物不手改，所以頁面新增的樣式放這支，由 * resources/views/app/auth/layouts/member.blade.php 在 onsite.css／onsite-browse.css 之後引入。 * * BL-098 第 2 段 2b：樣式內容照 email-verify-code/proposal-v2.src.html「頁面新增樣式 NEW」區塊 * （第 61–95 行）搬過來，只做兩處改動： * (1) 驚嘆號對齊（.srf-notice-mark）不搬——那條改在 onsite.css 共用規則（2c），提案這條只是暫代。 * (2) .srf-form-control.srf-is-focus 不搬——那是示意格「模擬游標在框內」用的 class； * 正式頁靠 onsite.css 既有的 .srf-form-control:focus，效果相同（框線青色＋淡青光暈）。 * 所有 .pp-*（提案頁自己的示意外框、頁首頁尾、iPhone 鍵盤示意）都不搬。 */ /* 照首購補填頁：iPhone 輸入框小於 16px 會自動放大 */ .srf-root .srf-auth .srf-form-control { font-size: 16px; } /* 驗證碼輸入框：大字、等寬數字、字距拉開（text-indent 補回字距，讓 6 碼視覺置中） */ .srf-root .srf-code-input { height: 56px; font-size: 24px !important; font-weight: 600; color: var(--cu-ink); letter-spacing: .42em; text-indent: .42em; text-align: center; font-variant-numeric: tabular-nums; } .srf-root .srf-code-input.srf-is-error { border-color: var(--gray-600); } /* 說明文字＋次要動作（重新寄送）置中排列 */ .srf-root .srf-auth-more { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 18px; } .srf-root .srf-auth-more .srf-hint-text { margin-bottom: 4px; } .srf-root .srf-auth-row { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px; } /* * 內容欄位置（登入相關頁用的 .srf-root.srf-focus，見 member.blade.php）。 * onsite-browse.css 是為「官網標題＋.srf-root 內容」的會員頁寫的：給 .srf-root 左右各 18px、上緣 28.5px， * 並把 .srf-app-body 的左右／上內距歸零。登入相關頁的結構照提案（標題列在 .srf-root 裡面， * 標題列自己有 20px 左右內距、.srf-app-body 自己有 18px 內距），所以這幾條要還原： * - 左右內距還給標題列與 .srf-app-body，不在 .srf-root 上重複疊一層 * - 上緣＝官網頁首高度，讓標題列緊貼頁首下緣（官網頁首是 position:fixed，不佔位置； * ≤750px 高度 13.333vw、>750px 高度 80px，量過 390／1280 實際值 52／80） * - width:100%：這個 .srf-root 是 .siteWrapper（官網殼，display:flex 直排）的直接子節點， * 不像會員頁包在 block 的 .container 裡；flex 子節點遇到 margin:auto（桌面置中用）會縮成內容 * 寬度，不寫寬度桌面版會被擠成一條窄欄。 * 桌面限寬置中（≥560px 430px、≥860px 600px）沿用 onsite-browse.css，不重複寫。 */ .srf-root.srf-focus:not(.srf-overlay-host) { width: 100%; padding-left: 0; padding-right: 0; padding-top: 13.3333vw; } @media (min-width: 751px) { .srf-root.srf-focus:not(.srf-overlay-host) { padding-top: 80px; } } .srf-root.srf-focus .srf-app-body { padding-left: 18px; padding-right: 18px; padding-top: 18px; } /* * 內容不滿一屏時，官網灰色頁尾貼在視窗最底、上面藍底填滿；內容超過一屏時頁尾自然跟在內容後面 * （同 onsite.layouts.focus 殼 .srf-cu-shell{min-height:100dvh;display:flex;flex-direction:column} 的做法）。 * .siteWrapper 是官網殼，會員頁也用；這裡用 :has() 只鎖「直接子節點含登入相關頁內容欄」的那一個， * 會員 4 頁沒有 .srf-auth-page，完全不受影響（member.blade.php 的內容欄 root 帶 srf-auth-page）。 * .siteWrapper 本來就是 flex 直排，內容欄吃掉剩餘高度，頁尾就被推到最底。 */ .siteWrapper:has(> .srf-auth-page) { min-height: 100vh; min-height: 100dvh; } .srf-root.srf-auth-page:not(.srf-overlay-host) { flex: 1 0 auto; } /* * ===== BL-098 第 3 段：登入或註冊（入口／密碼步驟／第三方帳號步驟／建立帳號）===== * 照 email-verify-code/proposal-v2.src.html「頁面新增樣式 NEW」區塊（第 61–95 行）中第二段用到的那幾條 * （.srf-oauth、.srf-btn-line／-google／-flat、.srf-or、.srf-email-row、.srf-step-title），原樣搬過來。 * 提案裡的按鈕是