style(topic-cards): 更新话题卡片样式以增强视觉效果
Discourse Theme / ci (push) Failing after 1s

- 移除话题列表项的底部边框
- 替换原有的阴影效果为更现代的多层阴影设计
- 移除卡片边框并添加渐变背景遮罩层
- 添加悬停时的变换动画和阴影过渡效果
- 优化选中状态的阴影和高亮显示
- 调整悬停和选中状态的颜色与透明度参数
This commit is contained in:
2026-02-20 09:36:53 +08:00
parent f9130b87b5
commit 9e9ec24d56
+40 -10
View File
@@ -9,11 +9,7 @@
} }
.topic-list > .topic-list-body > .topic-list-item.last-visit { .topic-list > .topic-list-body > .topic-list-item.last-visit {
border-bottom: 1px solid var(--primary-300); border-bottom: none;
&:hover {
border-color: var(--accent-color);
}
} }
.topic-list, .topic-list,
@@ -73,10 +69,12 @@
.topic-list-body .topic-list-item { .topic-list-body .topic-list-item {
position: relative; position: relative;
background: var(--d-content-background); background: var(--d-content-background);
box-shadow: 0 0 12px 1px var(--topic-card-shadow); box-shadow:
0 10px 30px -18px rgb(10 18 35 / 38%),
0 6px 16px -10px var(--topic-card-shadow);
text-overflow: ellipsis; text-overflow: ellipsis;
padding: var(--space-3); padding: var(--space-3);
border: 1px solid var(--primary-300); border: none;
display: grid; display: grid;
grid-template-columns: min-content min-content min-content auto min-content; grid-template-columns: min-content min-content min-content auto min-content;
grid-template-areas: grid-template-areas:
@@ -85,6 +83,34 @@
grid-gap: var(--space-3); grid-gap: var(--space-3);
border-radius: var(--d-border-radius); border-radius: var(--d-border-radius);
cursor: pointer; cursor: pointer;
transition:
box-shadow 0.2s ease,
transform 0.2s ease;
&::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background:
radial-gradient(
120% 90% at 0% 0%,
oklch(from var(--accent-color) calc(l * 1.12) calc(c * 0.55) h / 0.5),
transparent 55%
),
radial-gradient(
120% 90% at 100% 100%,
oklch(from var(--accent-color) calc(l * 1.05) calc(c * 0.45) h / 0.35),
transparent 58%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
&.has-replies { &.has-replies {
grid-template-areas: grid-template-areas:
@@ -145,15 +171,19 @@
&:hover { &:hover {
.discourse-no-touch & { .discourse-no-touch & {
border-color: var(--accent-color);
background: var(--d-content-background); background: var(--d-content-background);
box-shadow:
0 16px 34px -18px rgb(10 18 35 / 52%),
0 8px 20px -10px var(--topic-card-shadow);
transform: translateY(-1px);
} }
} }
&.selected { &.selected {
box-shadow: box-shadow:
0 0 0 2px var(--accent-color), 0 14px 32px -14px rgb(10 18 35 / 48%),
0 0 12px 1px var(--topic-card-shadow); 0 0 0 2px oklch(from var(--accent-color) l calc(c * 0.45) h / 0.28),
0 0 0 8px oklch(from var(--accent-color) l calc(c * 0.2) h / 0.14);
} }
&.excerpt-expanded { &.excerpt-expanded {