- 删除了全局的梦幻光晕效果和相关动画 - 移除了话题卡片的渐变背景和发光效果 - 简化了列表容器的背景样式和阴影效果 - 调整了话题卡片悬停状态的视觉效果 - 优化了分类标签的颜色配置方式 - 更新了选中状态的边框颜色和透明度设置
This commit is contained in:
@@ -2,8 +2,6 @@
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 0.5em;
|
||||
--dream-glow-a: rgb(var(--tertiary-rgb) / 0.24);
|
||||
--dream-glow-b: rgb(var(--tertiary-rgb) / 0.18);
|
||||
}
|
||||
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
@@ -16,72 +14,12 @@ html:not(:has(.has-full-page-chat)) {
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
position: relative;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard)::before,
|
||||
body:not(.has-full-page-chat, .wizard)::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
width: min(42vw, 32rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border-radius: 999px;
|
||||
filter: blur(56px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard)::before {
|
||||
top: 5rem;
|
||||
left: -8rem;
|
||||
background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 62%);
|
||||
animation: dreamy-float-a 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard)::after {
|
||||
right: -6rem;
|
||||
bottom: 2rem;
|
||||
background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 58%);
|
||||
animation: dreamy-float-b 22s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.d-header-wrap,
|
||||
#main-outlet-wrapper,
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes dreamy-float-a {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(3rem, -1.5rem, 0) scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dreamy-float-b {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(-2.5rem, 2rem, 0) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body:not(.has-full-page-chat, .wizard)::before,
|
||||
body:not(.has-full-page-chat, .wizard)::after {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
|
||||
+8
-25
@@ -11,7 +11,6 @@
|
||||
|
||||
.container.list-container{
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.container.list-container::before{
|
||||
@@ -23,26 +22,14 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(var(--secondary-rgb) / 0.46) 0%,
|
||||
rgb(var(--secondary-rgb) / 0.34) 100%
|
||||
);
|
||||
background-color: #fff9;
|
||||
border-radius: var(--d-border-radius);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: rgb(0 0 0 / 28%) 0 10px 26px -16px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container.list-container > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: #00000077 0 0 19px 0;
|
||||
}
|
||||
|
||||
.topic-list-header{
|
||||
background-color: transparent;
|
||||
background-color: unset;
|
||||
}
|
||||
.list-controls, .search-container{
|
||||
border-radius: var(--d-border-radius);
|
||||
@@ -54,17 +41,13 @@
|
||||
}
|
||||
|
||||
#list-area{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#main-outlet-wrapper{
|
||||
z-index: 0;
|
||||
background-color: unset !important;
|
||||
}
|
||||
|
||||
.regular.ember-view{
|
||||
background-color: rgb(var(--secondary-rgb) / 0.58);
|
||||
background-color: #ffffffa8 !important;
|
||||
border-radius: var(--d-border-radius);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: rgb(0 0 0 / 24%) 0 10px 24px -14px;
|
||||
backdrop-filter: blur(16px);
|
||||
box-shadow: #00000077 0 0 19px 0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
+18
-74
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user