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 {
border-bottom: 1px solid var(--primary-300);
&:hover {
border-color: var(--accent-color);
}
border-bottom: none;
}
.topic-list,
@@ -73,10 +69,12 @@
.topic-list-body .topic-list-item {
position: relative;
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;
padding: var(--space-3);
border: 1px solid var(--primary-300);
border: none;
display: grid;
grid-template-columns: min-content min-content min-content auto min-content;
grid-template-areas:
@@ -85,6 +83,34 @@
grid-gap: var(--space-3);
border-radius: var(--d-border-radius);
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 {
grid-template-areas:
@@ -145,15 +171,19 @@
&:hover {
.discourse-no-touch & {
border-color: var(--accent-color);
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 {
box-shadow:
0 0 0 2px var(--accent-color),
0 0 12px 1px var(--topic-card-shadow);
0 14px 32px -14px rgb(10 18 35 / 48%),
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 {