summaryrefslogtreecommitdiff
path: root/frontend/src/app.css
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 /frontend/src/app.css
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;无行为变化。
Diffstat (limited to 'frontend/src/app.css')
-rw-r--r--frontend/src/app.css26
1 files changed, 21 insertions, 5 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;