qing
577386bff2
- 新增 auth.css：表单页共享美化（点阵背景、品牌渐变顶条卡片、eyebrow 标题、 渐变提交按钮、入场动画），register/forgot 各加一行 link 与 eyebrow - 新增 dnfs.css：笔记页美化（顶部底纹暖光、卡片逐张入场、编辑卡聚焦光环）； 顺带修复节点编辑卡裸 <button> 无主题底色的问题 - 动效均遵循 prefers-reduced-motion，颜色全部消费 theme.css 变量
126 lines
3.6 KiB
CSS
126 lines
3.6 KiB
CSS
/* auth.css — 注册/重置密码页专属美化（在 theme.css 之后加载，视觉语言与首页 index.css 对齐） */
|
|
|
|
::selection {
|
|
background: var(--accent-glow);
|
|
color: var(--fg);
|
|
}
|
|
|
|
/* ===== 页面背景：点阵底纹 + 暖色环境光（固定，不随滚动） ===== */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
|
|
background-size: 26px 26px;
|
|
-webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 18%, transparent 72%);
|
|
mask-image: radial-gradient(ellipse 78% 68% at 50% 38%, #000 18%, transparent 72%);
|
|
pointer-events: none;
|
|
}
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 32%;
|
|
width: 560px;
|
|
height: 560px;
|
|
transform: translate(-50%, -50%);
|
|
z-index: -1;
|
|
background: radial-gradient(circle, var(--accent-glow), transparent 62%);
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== 卡片：顶部品牌渐变条 + 加深阴影 ===== */
|
|
.card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(74, 55, 40, 0.1);
|
|
}
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
|
|
}
|
|
|
|
/* ===== 品牌 eyebrow + 居中标题（渐变短杠，对齐首页章节标题） ===== */
|
|
.auth-eyebrow {
|
|
text-align: center;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.26em;
|
|
text-indent: 0.26em; /* 视觉居中补偿字距 */
|
|
color: var(--accent);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.card h2 {
|
|
text-align: center;
|
|
}
|
|
.card h2::after {
|
|
content: "";
|
|
display: block;
|
|
width: 40px;
|
|
height: 3px;
|
|
margin: 0.55rem auto 0;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* ===== 按钮：主按钮品牌渐变 + 上浮；次按钮描边反馈 ===== */
|
|
.card input[type="submit"] {
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
|
|
color: #fff;
|
|
box-shadow: 0 2px 10px rgba(232, 133, 58, 0.32);
|
|
transition: transform 0.18s, box-shadow 0.22s, opacity 0.15s;
|
|
}
|
|
.card input[type="submit"]:not(:disabled):hover {
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 18px rgba(232, 133, 58, 0.4);
|
|
}
|
|
.card input[type="submit"]:not(:disabled):active { transform: scale(0.96); }
|
|
|
|
.card input[type="button"] {
|
|
border: 1px solid var(--accent-glow);
|
|
transition: transform 0.18s, border-color 0.18s, opacity 0.15s;
|
|
}
|
|
.card input[type="button"]:not(:disabled):hover {
|
|
opacity: 1;
|
|
transform: translateY(-1px);
|
|
border-color: var(--accent);
|
|
}
|
|
.card input[type="button"]:not(:disabled):active { transform: scale(0.96); }
|
|
|
|
.card input[type="reset"] { transition: transform 0.18s, color 0.18s, border-color 0.18s, opacity 0.15s; }
|
|
.card input[type="reset"]:hover {
|
|
opacity: 1;
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* ===== 图形验证码：hover 描边 + 阴影 ===== */
|
|
.code-box .captcha-img {
|
|
transition: border-color 0.18s, box-shadow 0.18s;
|
|
}
|
|
.code-box .captcha-img:hover {
|
|
border-color: var(--accent);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ===== 入场动画 ===== */
|
|
@keyframes auth-in {
|
|
from { opacity: 0; transform: translateY(14px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.card { animation: auth-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
|
|
}
|