Skip to content

Commit 8055ff9

Browse files
Rain1601claude
andcommitted
style: 调整表格样式使用系统主题色
- 移除斑马纹效果,保持统一背景 - 使用系统CSS变量配色(--card, --muted, --accent等) - 表头使用muted背景色,更符合系统风格 - 悬停效果使用accent色,与系统交互一致 - 移除蓝色系配色,完全适配亮/暗主题 🤖 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ea74610 commit 8055ff9

1 file changed

Lines changed: 20 additions & 35 deletions

File tree

frontend/components/NotionEditor.module.css

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,25 @@
1010
border-spacing: 0;
1111
width: 100%;
1212
margin: 2rem 0;
13-
background: hsl(var(--background));
14-
border: 1px solid hsl(var(--border) / 0.5);
15-
border-radius: 12px;
13+
background: hsl(var(--card));
14+
border: 1px solid hsl(var(--border));
15+
border-radius: 8px;
1616
overflow: hidden;
17-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
1817
}
1918

2019
/* 暗色模式下的表格容器 */
2120
:global(.dark) .notionEditor table {
22-
background: hsl(var(--background) / 0.5);
23-
border: 1px solid hsl(var(--border) / 0.3);
24-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
21+
background: hsl(var(--card));
22+
border: 1px solid hsl(var(--border));
2523
}
2624

2725
.notionEditor table th,
2826
.notionEditor table td {
29-
padding: 14px 20px;
27+
padding: 12px 16px;
3028
text-align: left;
3129
vertical-align: middle;
32-
border-right: 1px solid hsl(var(--border) / 0.3);
33-
border-bottom: 1px solid hsl(var(--border) / 0.3);
30+
border-right: 1px solid hsl(var(--border));
31+
border-bottom: 1px solid hsl(var(--border));
3432
transition: background-color 0.2s ease;
3533
}
3634

@@ -45,56 +43,43 @@
4543
border-bottom: none;
4644
}
4745

48-
/* 表头样式 */
46+
/* 表头样式 - 使用系统颜色 */
4947
.notionEditor table th {
50-
background: linear-gradient(to bottom,
51-
hsl(var(--muted) / 0.3),
52-
hsl(var(--muted) / 0.2));
48+
background: hsl(var(--muted));
5349
font-weight: 600;
5450
font-size: 0.875rem;
5551
text-transform: uppercase;
56-
letter-spacing: 0.05em;
57-
color: hsl(var(--foreground) / 0.9);
58-
border-bottom: 2px solid hsl(var(--border) / 0.5);
52+
letter-spacing: 0.02em;
53+
color: hsl(var(--muted-foreground));
54+
border-bottom: 1px solid hsl(var(--border));
5955
}
6056

6157
/* 暗色模式下的表头 */
6258
:global(.dark) .notionEditor table th {
63-
background: linear-gradient(to bottom,
64-
hsl(var(--muted) / 0.5),
65-
hsl(var(--muted) / 0.4));
66-
color: hsl(var(--foreground) / 0.95);
67-
border-bottom: 2px solid hsl(var(--primary) / 0.3);
59+
background: hsl(var(--muted));
60+
color: hsl(var(--muted-foreground));
61+
border-bottom: 1px solid hsl(var(--border));
6862
}
6963

7064
/* 表格内容单元格 */
7165
.notionEditor table td {
7266
background-color: transparent;
7367
font-size: 0.95rem;
7468
line-height: 1.6;
69+
color: hsl(var(--foreground));
7570
}
7671

77-
/* 斑马纹效果 - 更柔和 */
78-
.notionEditor table tbody tr:nth-child(even) {
79-
background-color: hsl(var(--muted) / 0.08);
80-
}
81-
82-
/* 暗色模式斑马纹 */
83-
:global(.dark) .notionEditor table tbody tr:nth-child(even) {
84-
background-color: hsl(var(--muted) / 0.15);
85-
}
86-
87-
/* 悬停效果 */
72+
/* 悬停效果 - 使用系统颜色 */
8873
.notionEditor table tbody tr {
8974
transition: background-color 0.15s ease;
9075
}
9176

9277
.notionEditor table tbody tr:hover {
93-
background-color: hsl(var(--primary) / 0.05);
78+
background-color: hsl(var(--accent));
9479
}
9580

9681
:global(.dark) .notionEditor table tbody tr:hover {
97-
background-color: hsl(var(--primary) / 0.08);
82+
background-color: hsl(var(--accent));
9883
}
9984

10085
/* 第一列特殊样式(如果需要) */

0 commit comments

Comments
 (0)