74 lines
3.0 KiB
CSS
74 lines
3.0 KiB
CSS
/* 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); }
|