shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(css): 移除梦幻效果并优化主题样式
Discourse Theme / ci (push) Failing after 0s
Details

Browse Source 
- 删除了全局的梦幻光晕效果和相关动画
- 移除了话题卡片的渐变背景和发光效果
- 简化了列表容器的背景样式和阴影效果
- 调整了话题卡片悬停状态的视觉效果
- 优化了分类标签的颜色配置方式
- 更新了选中状态的边框颜色和透明度设置
This commit is contained in:
shiran
2026-02-21 10:03:46 +08:00
parent 1fb6a7b5a1
commit b83d1c4de9
3 changed files with 26 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/topic-cards.scss
+18 -74
View File
@@ -4,17 +4,6 @@
--d-border-radius-small: calc(var(--d-border-radius) * 0.5);
}
@keyframes dreamy-card-shimmer {
from {
transform: translateX(-18%);
opacity: 0.35;
}
to {
transform: translateX(18%);
opacity: 0.65;
}
}
.topic-list .topic-list-item-separator {
display: none;
}
@@ -29,8 +18,8 @@
border-radius: var(--d-border-radius);
padding: 3px 6px;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include viewport.until(md) {
@@ -40,8 +29,8 @@
.badge-category__name {
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
}
}
@@ -79,15 +68,10 @@
.topic-list-body .topic-list-item {
position: relative;
background:
linear-gradient(
135deg,
rgb(var(--secondary-rgb) / 0.96) 0%,
rgb(var(--tertiary-rgb) / 0.08) 100%
);
background: linear-gradient(45deg, var(--d-sidebar-active-background), #ffffff63);
box-shadow:
0 10px 30px -18px rgb(10 18 35 / 38%),
0 6px 16px -10px var(--topic-card-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: none;
@@ -99,11 +83,8 @@
grid-gap: var(--space-3);
border-radius: var(--d-border-radius);
cursor: pointer;
overflow: hidden;
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
background-color 0.25s ease;
all 0.2s ease;
&::before {
content: "";
@@ -111,40 +92,10 @@
inset: 0;
border-radius: inherit;
padding: 1px;
background:
radial-gradient(
120% 100% at 0% 0%,
rgb(var(--tertiary-rgb) / 0.38),
transparent 56%
),
radial-gradient(
120% 90% at 100% 100%,
rgb(var(--tertiary-rgb) / 0.22),
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;
}
&::after {
content: "";
position: absolute;
inset: -35% -20%;
background: linear-gradient(
112deg,
transparent 30%,
rgb(var(--tertiary-rgb) / 0.16) 48%,
transparent 66%
);
pointer-events: none;
mix-blend-mode: screen;
animation: dreamy-card-shimmer 9s ease-in-out infinite alternate;
}
&.has-replies {
grid-template-areas:
"creator title title title status"
@@ -204,24 +155,17 @@
&:hover {
.discourse-no-touch & {
background:
linear-gradient(
135deg,
rgb(var(--secondary-rgb) / 0.99) 0%,
rgb(var(--tertiary-rgb) / 0.14) 100%
);
box-shadow:
0 16px 34px -18px rgb(10 18 35 / 45%),
0 8px 20px -10px var(--topic-card-shadow);
transform: translateY(-2px);
background: var(--d-sidebar-active-background);
box-shadow: 4px 5px 3px 1px #0003, 0 8px 20px -10px var(--topic-card-shadow);
border-left: 5px solid var(--d-button-danger-icon-color);
}
}
&.selected {
box-shadow:
0 14px 32px -14px rgb(10 18 35 / 48%),
0 0 0 2px rgb(var(--tertiary-rgb) / 0.28),
0 0 0 8px rgb(var(--tertiary-rgb) / 0.14);
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 {
@@ -303,8 +247,8 @@
}
padding: 0.25em 0.5rem;
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
@include viewport.until(md) {
@@ -319,8 +263,8 @@
.badge-category__name {
font-size: var(--font-down-1);
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
min-width: 0;
overflow: hidden;