/* ============================================================================= * tl-forms.css — TrueLink 全站表單 UX 標準（樣式層） * Issue #851 · 建立 2026-05-31 by Claude * * 配 tl-forms.js（inline 驗證）+ tl-tokens.css（#841 的 --tl-* token）。 * 規範：visible label（非只 placeholder）、必填標示、錯誤就近、focus 可見、 * 手機 input ≥16px（防 iOS 放大）、tap target ≥44px、提交 loading→成功/錯誤。 * * 依賴 tl-tokens.css；但每個 var() 都有 fallback，未載 token 也能用（降級為合理預設）。 * 採用：頁面 先 link tl-tokens.css 再 link 本檔；markup 用 .tl-field 模式（見 docs/FORM_UX_STANDARD.md）。 * ============================================================================= */ .tl-form { display: grid; gap: var(--tl-space-5, 1.25rem); } /* --- Field（label + control + hint + error 的最小單位） --- */ .tl-field { display: grid; gap: var(--tl-space-2, 0.5rem); } .tl-label { font-size: var(--tl-text-sm, 0.875rem); font-weight: var(--tl-weight-medium, 600); color: var(--tl-text, #f8fafc); line-height: var(--tl-leading-snug, 1.35); } /* 必填標示：紅星 + 螢幕報讀「必填」 */ .tl-req { color: var(--tl-danger, #ef4444); margin-left: 2px; font-weight: 700; } .tl-optional { color: var(--tl-text-muted, #94a3b8); font-weight: 400; font-size: var(--tl-text-xs, 0.75rem); margin-left: 6px; } /* --- Controls --- */ .tl-input, .tl-select, .tl-textarea { width: 100%; min-height: var(--tl-input-min-h, 44px); background: var(--tl-input-bg, #020617); color: var(--tl-input-fg, #f8fafc); border: 1px solid var(--tl-input-border, #334155); border-radius: var(--tl-input-radius, 8px); padding: var(--tl-input-pad-y, 0.5rem) var(--tl-input-pad-x, 0.75rem); font-family: inherit; font-size: var(--tl-input-font-size, 1rem); /* ≥16px：防 iOS 聚焦放大 */ line-height: var(--tl-leading-normal, 1.5); transition: border-color var(--tl-duration-fast, 150ms) var(--tl-ease-standard, ease), box-shadow var(--tl-duration-fast, 150ms) var(--tl-ease-standard, ease); } .tl-textarea { min-height: calc(var(--tl-input-min-h, 44px) * 2); resize: vertical; } .tl-input::placeholder, .tl-textarea::placeholder { color: var(--tl-text-subtle, #64748b); } .tl-input:focus, .tl-select:focus, .tl-textarea:focus { outline: none; border-color: var(--tl-input-focus-ring, #38bdf8); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); } /* 鍵盤使用者：確保 focus 永遠可見（即使瀏覽器預設被蓋） */ .tl-input:focus-visible, .tl-select:focus-visible, .tl-textarea:focus-visible { outline: var(--tl-ring-width, 2px) solid transparent; /* box-shadow 已提供視覺，這裡保留 outline 槽避免被移除 */ } /* --- 驗證狀態（由 tl-forms.js 加 class 於 .tl-field） --- */ .tl-field.is-invalid .tl-input, .tl-field.is-invalid .tl-select, .tl-field.is-invalid .tl-textarea { border-color: var(--tl-danger, #ef4444); } .tl-field.is-invalid .tl-input:focus, .tl-field.is-invalid .tl-select:focus, .tl-field.is-invalid .tl-textarea:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); } .tl-field.is-valid .tl-input, .tl-field.is-valid .tl-select, .tl-field.is-valid .tl-textarea { border-color: var(--tl-success, #10b981); } /* --- Hint（說明）+ Error（就近顯示） --- */ .tl-hint { margin: 0; font-size: var(--tl-text-xs, 0.75rem); color: var(--tl-text-muted, #94a3b8); line-height: var(--tl-leading-snug, 1.35); } .tl-error { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: var(--tl-text-xs, 0.75rem); color: var(--tl-danger, #ef4444); font-weight: var(--tl-weight-medium, 600); line-height: var(--tl-leading-snug, 1.35); } .tl-error::before { content: "⚠"; line-height: 1; } .tl-error[hidden] { display: none; } /* --- Submit + loading 狀態 --- */ .tl-submit { min-height: var(--tl-btn-min-h, 44px); padding: var(--tl-btn-pad-y, 0.5rem) var(--tl-btn-pad-x, 1rem); background: var(--tl-btn-bg, #38bdf8); color: var(--tl-btn-fg, #020617); border: 0; border-radius: var(--tl-btn-radius, 8px); font: inherit; font-weight: var(--tl-btn-weight, 800); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color var(--tl-duration-normal, 200ms) var(--tl-ease-standard, ease), opacity var(--tl-duration-normal, 200ms); } .tl-submit:hover:not([disabled]) { background: var(--tl-btn-hover-bg, #7dd3fc); } .tl-submit:focus-visible { outline: var(--tl-ring-width, 2px) solid var(--tl-ring, #38bdf8); outline-offset: var(--tl-ring-offset, 2px); } .tl-submit[disabled] { opacity: 0.65; cursor: not-allowed; } .tl-spinner { width: 16px; height: 16px; flex: none; border: 2px solid rgba(2, 6, 23, 0.35); border-top-color: currentColor; border-radius: 50%; animation: tlFormSpin 0.7s linear infinite; } .tl-submit:not([data-loading]) .tl-spinner { display: none; } @keyframes tlFormSpin { to { transform: rotate(360deg); } } /* --- 提交後 form-level 狀態（成功 / 失敗 banner） --- */ .tl-form-status { margin: 0; padding: var(--tl-space-3, 0.75rem) var(--tl-space-4, 1rem); border-radius: var(--tl-radius-md, 8px); font-size: var(--tl-text-sm, 0.875rem); font-weight: var(--tl-weight-medium, 600); border: 1px solid transparent; } .tl-form-status.is-ok { color: var(--tl-success, #10b981); border-color: var(--tl-success, #10b981); background: rgba(16, 185, 129, 0.08); } .tl-form-status.is-err { color: var(--tl-danger, #ef4444); border-color: var(--tl-danger, #ef4444); background: rgba(239, 68, 68, 0.08); } .tl-form-status[hidden] { display: none; } /* 尊重「減少動態」：停掉 spinner 旋轉（loading 仍以 disabled + 文案表達） */ @media (prefers-reduced-motion: reduce) { .tl-spinner { animation: none; } }