/* auth.css — 登录 / 注册 / 修改密码 共享样式 风格参照「璀璨宝石对局录制工具」参考图: - 居中白色卡片 + 柔和阴影 + 大圆角 - 顶部 3D 多色钻石 logo + 主副标题 - 输入框带左侧图标 + 主按钮青绿色 - 底部双链接布局 仅覆盖三个认证页面,不动 app.css 的全局视觉系统。 */ /* ---- 主题变量 ---- */ :root { --auth-bg: #f5f7f9; /* 页面背景 */ --auth-card-bg: #ffffff; --auth-card-shadow: 0 8px 32px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04); --auth-radius: 16px; --auth-border: #e5e7eb; --auth-fg: #1f2937; --auth-fg-muted: #9ca3af; --auth-fg-subtle: #6b7280; --auth-primary: #1d4ed8; /* 统一应用蓝,与 app.css --primary 一致 */ --auth-primary-hover: #1e40af; --auth-primary-soft: #eff6ff; --auth-danger: #dc2626; --auth-icon: #9ca3af; --auth-icon-focus: #1d4ed8; --auth-input-bg: #ffffff; --auth-divider: #f1f5f9; } /* 暗色模式:沿用系统主题,与 app.css 的 dark 变量协调 */ @media (prefers-color-scheme: dark) { :root { --auth-bg: #0f172a; --auth-card-bg: #1e293b; --auth-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); --auth-border: #334155; --auth-fg: #f1f5f9; --auth-fg-muted: #64748b; --auth-fg-subtle: #94a3b8; --auth-primary: #3b82f6; --auth-primary-hover: #60a5fa; --auth-primary-soft: #1e3a8a; --auth-danger: #f87171; --auth-icon: #64748b; --auth-icon-focus: #3b82f6; --auth-input-bg: #0f172a; --auth-divider: #1e293b; } } /* 暗色模式:与应用手动主题切换 (data-theme="dark" 设在 ) 协调, 与 app.css 的 :root[data-theme="dark"] 一致 */ :root[data-theme="dark"] { --auth-bg: #0f172a; --auth-card-bg: #1e293b; --auth-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2); --auth-border: #334155; --auth-fg: #f1f5f9; --auth-fg-muted: #64748b; --auth-fg-subtle: #94a3b8; --auth-primary: #3b82f6; --auth-primary-hover: #60a5fa; --auth-primary-soft: #1e3a8a; --auth-danger: #f87171; --auth-icon: #64748b; --auth-icon-focus: #3b82f6; --auth-input-bg: #0f172a; --auth-divider: #1e293b; } /* ---- 页面布局 ---- */ html, body { height: 100%; } body { margin: 0; background: var(--auth-bg); display: flex; align-items: center; justify-content: center; padding: 24px 16px; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: var(--auth-fg); min-height: 100vh; } /* ---- 卡片 ---- */ .auth-card { width: 100%; max-width: 400px; background: var(--auth-card-bg); border-radius: var(--auth-radius); box-shadow: var(--auth-card-shadow); padding: 36px 32px 28px; } /* ---- 顶部品牌区(logo + 标题 + 副标题) ---- */ .auth-brand { text-align: center; margin-bottom: 24px; } .auth-logo { width: 64px; height: 64px; margin: 0 auto 16px; display: block; filter: drop-shadow(0 4px 10px rgba(29, 78, 216, 0.18)); } .auth-title { font-size: 22px; font-weight: 700; color: var(--auth-fg); margin: 0 0 6px; letter-spacing: 0.02em; } .auth-subtitle { font-size: 13px; color: var(--auth-fg-muted); margin: 0; letter-spacing: 0.04em; } /* ---- 表单 ---- */ .auth-form { display: flex; flex-direction: column; gap: 14px; } /* 输入字段容器:相对定位,用于图标绝对定位 */ .auth-field { position: relative; } .auth-field input { width: 100%; height: 44px; padding: 0 44px 0 40px; /* 左 40 让出图标,右 44 让出可能的小图标 */ font-size: 14px; font-family: inherit; color: var(--auth-fg); background: var(--auth-input-bg); border: 1px solid var(--auth-border); border-radius: 10px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .auth-field input::placeholder { color: var(--auth-fg-muted); } .auth-field input:hover { border-color: #cbd5e1; } .auth-field input:focus { border-color: var(--auth-primary); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12); } /* 字段级错误状态:与 aria-invalid 配合使用 */ .auth-field input[aria-invalid="true"] { border-color: var(--auth-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } /* 输入框左侧图标 */ .auth-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--auth-icon); pointer-events: none; } .auth-field input:focus ~ .auth-icon, .auth-field input:focus + .auth-icon { color: var(--auth-icon-focus); } /* 密码右侧的「显示 / 隐藏」按钮 */ .auth-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; color: var(--auth-icon); border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; } .auth-toggle:hover { color: var(--auth-primary); background: var(--auth-primary-soft); } .auth-toggle svg { width: 16px; height: 16px; } /* P2-8 (2026-08-31): 移动端把 .auth-toggle 触控区扩到 40px (iOS HIG 推荐 ≥44px, * 桌面端保持 28px 不影响布局)。input 右侧 padding 同步增加以容纳扩大的按钮。 */ @media (max-width: 639px) { .auth-toggle { width: 40px; height: 40px; } .auth-field input { padding-right: 56px; } } /* ---- 错误提示 ---- */ .auth-error { min-height: 18px; font-size: 12px; color: var(--auth-fg-muted); padding: 2px 2px 0; } .auth-error.is-error { color: var(--auth-danger); } /* ---- 提交按钮(青绿色全宽) ---- */ .auth-submit { margin-top: 4px; width: 100%; height: 44px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; color: #ffffff; background: var(--auth-primary); border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .auth-submit:hover:not(:disabled) { background: var(--auth-primary-hover); } .auth-submit:active:not(:disabled) { transform: translateY(1px); } .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* ---- 底部链接区 ---- */ .auth-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--auth-divider); font-size: 13px; } .auth-foot a { color: var(--auth-fg-subtle); text-decoration: none; transition: color 0.15s ease; } .auth-foot a:hover { color: var(--auth-primary); } /* 底部辅助说明文字:用于"忘记密码? 请联系管理员重置"这类次级提示 */ .auth-remark { font-size: 12px; color: var(--auth-fg-muted); } /* 修改密码页面顶部说明文字 */ .auth-hint { margin: 0 0 18px; padding: 10px 14px; font-size: 13px; color: var(--auth-fg-subtle); background: var(--auth-primary-soft); border-radius: 8px; line-height: 1.5; } /* ---- 全局盒模型重置 (放在文件末尾,覆盖 :root 之外的所有默认样式) ---- */ *, *::before, *::after { box-sizing: border-box; } /* 临时密码 banner:管理员 reset 密码后用户首次登录必须改密 */ .auth-temp-banner { margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; background: #fff8e1; color: #6b4e0b; border: 1px solid #f5d97a; font-size: 13px; line-height: 1.5; } .auth-temp-banner strong { display: block; margin-bottom: 4px; color: #8a5a06; } .auth-temp-banner em { font-style: normal; font-weight: 600; background: #f5d97a; padding: 0 4px; border-radius: 3px; }