- 移除话题列表项的底部边框 - 替换原有的阴影效果为更现代的多层阴影设计 - 移除卡片边框并添加渐变背景遮罩层 - 添加悬停时的变换动画和阴影过渡效果 - 优化选中状态的阴影和高亮显示 - 调整悬停和选中状态的颜色与透明度参数
This commit is contained in:
+40
-10
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user