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