diff --git a/web/auth-ui.css b/web/auth-ui.css new file mode 100644 index 0000000..cfaf4d8 --- /dev/null +++ b/web/auth-ui.css @@ -0,0 +1,73 @@ +/* auth.css —— 登录 / 注册页的规范对齐层(2026-09-13) + * + * 背景:本页原来直接用 design.css,而它是一套**深色 OS-desktop 体系**(`--accent #4d7cfe`、 + * 卡片 r20、重投影、输入框 r10/14px),与 `06-工作台UI规范.md` **冲突**。 + * 规范第 4 行:「**冲突时以本文档为准**」,第 5 行:**门户页面在适用范围内**。 + * 因此这里按规范取值**就近覆盖**(§2 Token / §4.1 按钮 / §4.2 输入框 / 圆角 8px / 正文 15px)。 + * + * ⚠️ 刻意**不改 design.css** —— 它被 5 个页面共用,整站换肤超出本次范围且风险大; + * 「静态页全站对齐规范」应作为**单独一期**做(见档案 83)。 + */ + +:root { + --a-bg: #f5f6f8; /* 规范 --bg */ + --a-panel: #ffffff; /* 规范 --panel */ + --a-border: #e3e6ea; /* 规范 --border */ + --a-text: #24292f; /* 规范 --text */ + --a-dim: #6b7280; /* 规范 --dim */ + --a-primary: #2f6fed; /* 规范 --primary */ + --a-primary-hover: #2a5fd0; +} + +/* 页面底色:规范是亮色工具类后台(原为深蓝渐变) */ +.auth-bg { + background: var(--a-bg) !important; +} + +/* 卡片:规范 §3 —— r12 + `0 1px 3px rgba(0,0,0,.08)`,不用重投影 */ +.auth-card { + border: 1px solid var(--a-border); + border-radius: 12px; + box-shadow: 0 1px 3px rgba(0, 0, 0, .08); + color: var(--a-text); +} +.auth-sub { color: var(--a-dim); font-size: 14px; } + +/* 表单:§4.2 —— 输入框 `6px 10px` / r8 / 15px / 白底 / 1px 描边 */ +.field label { font-size: 14px; color: var(--a-text); } +.field input { + padding: 6px 10px; + font-size: 15px; + border: 1px solid var(--a-border); + border-radius: 8px; + background: var(--a-panel); + color: var(--a-text); +} +.field input:focus { + border-color: var(--a-primary); + box-shadow: 0 0 0 3px rgba(47, 111, 237, .15); + background: var(--a-panel); +} + +/* 密码框:右侧「显示密码」按钮(§4.1 .btn-icon 量级 `5px 9px`) */ +.pw-wrap { position: relative; } +.pw-wrap input { padding-right: 60px; } +.pw-toggle { + position: absolute; top: 50%; right: 4px; transform: translateY(-50%); + display: inline-flex; align-items: center; justify-content: center; gap: 4px; + padding: 5px 9px; border: 0; border-radius: 6px; cursor: pointer; + background: transparent; color: var(--a-dim); font-size: 13px; line-height: 1; + transition: color .15s, background .15s; +} +.pw-toggle:hover { color: var(--a-primary); background: #eaf1fe; } +.pw-toggle:focus-visible { outline: 2px solid var(--a-primary); outline-offset: 1px; } + +/* 按钮:§4.1 —— `.btn` `6px 14px` / r8 / 15px;primary `#2f6fed`;:disabled opacity .5 */ +.btn { padding: 6px 14px; border-radius: 8px; font-size: 15px; } +.btn[disabled] { opacity: .5; } +.btn.primary { background: var(--a-primary); } +.btn.primary:hover { background: var(--a-primary-hover); filter: none; } + +/* 链接 / 次级文字 */ +.auth-alt { color: var(--a-dim); font-size: 14px; } +.auth-alt a { color: var(--a-primary); } diff --git a/web/login.html b/web/login.html index 8c2a1dd..29132c6 100644 --- a/web/login.html +++ b/web/login.html @@ -6,6 +6,7 @@ 登录 +