diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/src/app.css | 26 | ||||
| -rw-r--r-- | frontend/src/pages/AuthPages.svelte | 10 |
2 files changed, 29 insertions, 7 deletions
diff --git a/frontend/src/app.css b/frontend/src/app.css index a3e02bd..11a8e4b 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -63,6 +63,22 @@ * { box-sizing: border-box; } +/* round2 质感：150ms 全局过渡（背景/边框/阴影/位移/文字色） */ +a, button, input, select, textarea, table.data th, table.data td, +.card, [data-slot='card'], .badge, .navlink, .metric-card { + transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, + box-shadow 150ms ease, transform 150ms ease; +} + +/* 桌面端卡片 hover 轻微上浮阴影；触屏（hover none）不做位移避免黏连 */ +@media (hover: hover) and (min-width: 768px) { + .card:hover, + [data-slot='card']:hover { + box-shadow: 0 4px 14px rgba(16, 42, 49, 0.08); + transform: translateY(-1px); + } +} + html, body { margin: 0; padding: 0; @@ -75,9 +91,11 @@ html, body { } h1, h2, h3, h4 { font-weight: 600; margin: 0; } -h1 { font-size: 1.35rem; } -h2 { font-size: 1.1rem; } -h3 { font-size: 1rem; } +/* round2 字阶：拉开 h1/h2/正文/次要说明的区分 */ +h1 { font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.25; } +h2 { font-size: 1.18rem; letter-spacing: -0.01em; } +h3 { font-size: 1.02rem; } +.hint { color: var(--text-3); font-size: 0.82rem; line-height: 1.45; } a { color: var(--teal-strong); text-decoration: none; } a:hover { text-decoration: underline; } p { margin: 0.4rem 0; } @@ -137,8 +155,6 @@ input[type='checkbox'], input[type='radio'] { width: auto; } } .card + .card { margin-top: 0.9rem; } -.hint { color: var(--text-3); font-size: 0.83rem; } - table.data { width: 100%; border-collapse: collapse; diff --git a/frontend/src/pages/AuthPages.svelte b/frontend/src/pages/AuthPages.svelte index 6221368..7495d62 100644 --- a/frontend/src/pages/AuthPages.svelte +++ b/frontend/src/pages/AuthPages.svelte @@ -178,8 +178,14 @@ radial-gradient(700px 350px at 85% -60px, rgba(13, 148, 136, 0.08), transparent), var(--bg); } - .auth-card { width: min(400px, 100%); padding: 1.6rem; } - .auth-brand { margin-bottom: 1.1rem; } + .auth-card { width: min(400px, 100%); padding: 2rem 1.75rem 1.8rem; } + /* round2 登录页留白重排：标题区与表单拉开，卡片下缘留呼吸感 */ + @media (min-width: 768px) { + .auth-card { padding: 2.4rem 2.2rem 2.1rem; } + } + .auth-brand { margin-bottom: 1.35rem; } + .auth-brand h1 { margin-bottom: 0.3rem; } + .auth-brand p { max-width: 26em; } .mark { display: inline-block; width: 34px; |