summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSomhairle H. Marisol <[email protected]>2026-09-18 09:51:16 +0800
committerSomhairle H. Marisol <[email protected]>2026-09-18 09:51:16 +0800
commit4462473fcc185611b6de209f39b3077fed007b75 (patch)
treecf21375f11560349e2c8c00fa4269af6d3dba7a2
parentac55af50d93427b91db9f52415c3e7a749943420 (diff)
downloadstrategy-lab-4462473fcc185611b6de209f39b3077fed007b75.tar.gz
feat(frontend): 质感打磨——微过渡、卡片悬停、登录页留白与字阶
[变更性质] 视觉打磨,前端重设计第二轮之四。 [新增功能] 全局 150ms transition 层;hover:hover 且 768px+ 卡片 hover 上浮;登录/注册页留白重排(2rem/2.4rem 按宽度断点);h1/h2/h3 字阶统一(1.55/1.18/1.02)。 [实现方案] 单层 app.css 聚合,动效仅在支持 hover 的桌面指针设备生效,避免移动端粘滞态;清理 .hint 重复规则。 [影响范围] app.css、AuthPages.svelte;无行为变化。
-rw-r--r--frontend/src/app.css26
-rw-r--r--frontend/src/pages/AuthPages.svelte10
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;