/** * 登入頁面手機版樣式 * 檔案: static/css/login-mobile.css * 日期: 2025-10-20 * 說明: 登入頁面手機版優化樣式（Bootstrap 4.4.1 框架） * * ⚠️ 顏色規範：請使用 theme-tokens.css 定義的 CSS 變數，避免硬編碼顏色值 * 例外：品牌色 var(--primary, #00A0E8) 及登入背景相關顏色維持原樣 */ /* ============================================ 手機版樣式 (≤767px) ============================================ */ @media(max-width:767px) { /* ============================================ 頁面容器優化 ============================================ */ /* 登入頁面容器 */ .sign-in-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 0; } .sign-in-page-bg { margin-top: 0 !important; padding: 0 !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } /* 移除桌面版的青綠色背景漸層 */ .sign-in-page .sign-in-page-bg::after { display: none !important; } /* ============================================ 左側區域（Logo + 標語）手機版處理 ============================================ */ /* 隱藏左側整個區域，手機版只顯示表單 */ .sign-in-page .col-md-6.text-center { display: none !important; } /* 如果需要顯示 Logo，可以放在表單上方 */ .sign-in-page .col-md-6.position-relative { flex: 0 0 100%; max-width: 100%; padding: 0 !important; } /* ============================================ 登入表單優化 ============================================ */ /* 表單容器 */ .sign-in-from { position: static !important; padding: 30px 20px !important; border-radius: 20px !important; background: var(--surface-base) !important; min-height: auto !important; } /* 表單標題 */ .sign-in-from h1 { font-size: 28px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: var(--primary, #00A0E8) !important; text-align: center; } .sign-in-from p { font-size: 14px !important; color: var(--text-tertiary) !important; margin-bottom: 30px !important; text-align: center; } /* ============================================ 表單輸入欄位優化 ============================================ */ /* 標籤樣式 */ .sign-in-from label { font-size: 14px !important; font-weight: 500 !important; color: var(--text-secondary) !important; margin-bottom: 8px !important; } /* 輸入框樣式 */ .sign-in-from .form-control { height: 48px !important; /* Material Design 觸控標準 */ font-size: 16px !important; /* 防止 iOS 自動縮放 */ padding: 12px 16px !important; border: 1px solid var(--border-default) !important; border-radius: 8px !important; transition: all 0.2s ease !important; } .sign-in-from .form-control:focus { border-color: var(--primary, #00A0E8) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb, 0, 160, 232), 0.25) !important; } .sign-in-from .form-control::placeholder { color: var(--text-placeholder, #9ca3af) !important; font-size: 14px !important; } /* 表單群組間距 */ .sign-in-from .form-group { margin-bottom: 20px !important; } /* ============================================ Checkbox 區域優化 ============================================ */ /* Checkbox 容器 */ .sign-in-from .d-inline-block.w-100 { padding: 20px 0 !important; } /* login-options：手機版改垂直排列，避免 checkbox + 按鈕擠在一列 */ .sign-in-from .login-options { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 8px 0 0 !important; } .sign-in-from .login-options > .d-flex { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .sign-in-from .login-options .form-check { white-space: nowrap; } .sign-in-from .login-options .form-check-label { font-size: 14px !important; line-height: 1.4 !important; padding-left: 4px !important; white-space: nowrap; } /* Checkbox 垂直排列 */ .sign-in-from .custom-control { display: block !important; margin-bottom: 12px !important; margin-left: 0 !important; } /* Checkbox 標籤樣式 */ .sign-in-from .custom-control-label { font-size: 14px !important; padding-left: 8px !important; cursor: pointer; } /* Checkbox 輸入框大小 */ .sign-in-from .custom-control-input { width: 20px !important; height: 20px !important; } /* ============================================ 登入按鈕優化 ============================================ */ /* 按鈕樣式 */ .sign-in-from button[type="submit"], .sign-in-from #login-button { width: 100% !important; height: 48px !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important; background: var(--primary, #00A0E8) !important; border: none !important; color: #fff !important; margin-top: 10px !important; float: none !important; /* 移除 float-right */ transition: all 0.2s ease !important; touch-action: manipulation; /* 防止雙擊縮放 */ } .sign-in-from button[type="submit"]:hover, .sign-in-from #login-button:hover { background: var(--primary-dark, #0092d4) !important; box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0, 160, 232), 0.30) !important; } .sign-in-from button[type="submit"]:active, .sign-in-from #login-button:active { transform: scale(0.98); transition: transform 0.1s ease; } /* ============================================ 其他元素優化 ============================================ */ /* 隱藏桌面版的 sign-info */ .sign-in-from .sign-info { display: none !important; } /* Loading 動畫 */ #loading { background: rgba(255, 255, 255, 0.95); } /* ============================================ 響應式調整 ============================================ */ /* 超小螢幕 (≤575px) */ @media(max-width:575px) { .sign-in-page { padding: 10px 0; } .sign-in-from { padding: 25px 15px !important; border-radius: 15px !important; } .sign-in-from h1 { font-size: 24px !important; } .sign-in-from .custom-control-label { font-size: 13px !important; } } /* ============================================ 焦點可見性優化（無障礙） ============================================ */ *:focus-visible { outline: 2px solid var(--primary, #00A0E8) !important; outline-offset: 2px !important; } /* ============================================ 平滑滾動 ============================================ */ html { scroll-behavior: smooth; } }