/* * 认证类页面（登录页 / 第三方绑定页）共用的表单样式 * * 这些类此前在 login.html 与 social-bind.html 里各内联了一份： * - 两份会漂移。绑定页就曾因为漏抄 .send-code-btn，「获取验证码」退化成浏览器默认按钮。 * - 内联进 会撑大首屏字节数。Tomcat 响应缓冲区默认 8KB，一旦 把表单挤到 * 8KB 之后，渲染到 th:action 时响应已提交，惰性创建 CSRF token 就会失败并截断整个页面。 * * 页面各自特有的样式（登录页的第三方登录按钮、绑定页的身份卡片等）仍留在各自模板里。 * 注意：本文件由应用自身在 /assets/ 下提供，与 CDN 上的 login.css 是两回事，不要混淆。 */ /* ---------- 方式切换 Tab ---------- */ .login-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 2px solid #e5e7eb; } .tab-btn { flex: 1; /* 横向内边距收紧，以免「账号密码登录」这类较长文案折行 */ padding: 12px 4px; background: none; border: none; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; position: relative; white-space: nowrap; transition: color 0.2s; } .tab-btn:hover, .tab-btn.active { color: #16a34a; } .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #16a34a; border-radius: 1px; } /* ---------- 验证码输入 + 发送按钮 ---------- */ .code-wrapper { display: flex; gap: 8px; } .code-input { flex: 1; } .send-code-btn { white-space: nowrap; padding: 0 16px; min-width: 110px; background: #16a34a; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.2s; } .send-code-btn:hover:not(:disabled) { background: #15803d; } .send-code-btn:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; } /* * ---------- 键盘焦点 ---------- * 沿用 login.css 中 .form-input:focus-visible 的约定（2px 实线 --g500）。 * 用 :focus-visible 而非 :focus：鼠标点击不出现描边，键盘 Tab 导航才出现。 * 直接去掉 outline 对键盘用户等同于把光标藏起来。 */ .tab-btn:focus-visible, .send-code-btn:focus-visible { outline: 2px solid var(--g500, #22c55e); outline-offset: 2px; border-radius: 6px; } /* ---------- 表单校验 ---------- */ .form-input.input-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); } .field-error { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #dc2626; }