From baf01610e45cca598f911b9621d7e5e69c089d7e Mon Sep 17 00:00:00 2001 From: shiran <2488252513@qq.com> Date: Fri, 20 Feb 2026 21:54:43 +0800 Subject: [PATCH] =?UTF-8?q?style(theme):=20=E6=9B=B4=E6=96=B0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=E5=92=8C=E8=A7=86=E8=A7=89=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 替换梦幻光效变量为基于三级颜色的新配色方案 - 调整模糊滤镜强度从48px增加到56px - 修改径向渐变透明度值以优化视觉层次 - 在列表容器中添加隔离层以改善渲染性能 - 更新话题卡片背景渐变使用RGB颜色变量 - 调整阴影效果和透明度以增强深度感 - 优化选中状态边框颜色使用三级颜色变量 - 添加悬停状态变换效果提升交互体验 --- scss/main.scss | 11 +++++------ scss/self.scss | 29 +++++++++++++++++++++-------- scss/topic-cards.scss | 27 +++++++++++++++++---------- 3 files changed, 43 insertions(+), 24 deletions(-) diff --git a/scss/main.scss b/scss/main.scss index cf80bec..5a21448 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -2,9 +2,8 @@ :root { --main-grid-gap: 0.5em; - --dream-glow-a: oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.45) h / 0.18); - --dream-glow-b: oklch(from var(--accent-color) calc(l * 1.2) calc(c * 0.35) calc(h + 26deg) / 0.14); - --dream-glow-c: oklch(from var(--accent-color) calc(l * 0.95) calc(c * 0.4) calc(h - 20deg) / 0.12); + --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)) { @@ -31,7 +30,7 @@ body:not(.has-full-page-chat, .wizard)::after { width: min(42vw, 32rem); aspect-ratio: 1 / 1; border-radius: 999px; - filter: blur(48px); + filter: blur(56px); pointer-events: none; z-index: 0; } @@ -39,14 +38,14 @@ body:not(.has-full-page-chat, .wizard)::after { body:not(.has-full-page-chat, .wizard)::before { top: 5rem; left: -8rem; - background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 65%); + 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 62%); + background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 58%); animation: dreamy-float-b 22s ease-in-out infinite alternate; } diff --git a/scss/self.scss b/scss/self.scss index a2de10e..01311c9 100644 --- a/scss/self.scss +++ b/scss/self.scss @@ -11,6 +11,7 @@ .container.list-container{ position: relative; + isolation: isolate; } .container.list-container::before{ @@ -22,14 +23,26 @@ bottom: 0; width: 100%; height: 100%; - background-color: #fff9; + background: + linear-gradient( + 180deg, + rgb(var(--secondary-rgb) / 0.46) 0%, + rgb(var(--secondary-rgb) / 0.34) 100% + ); border-radius: var(--d-border-radius); - backdrop-filter: blur(10px); - box-shadow: #00000077 0 0 19px 0; + 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; } .topic-list-header{ - background-color: unset; + background-color: transparent; } .list-controls, .search-container{ border-radius: var(--d-border-radius); @@ -41,13 +54,13 @@ } #list-area{ - background-color: unset !important; + background-color: transparent; } .regular.ember-view{ - background-color: #ffffffa8 !important; + background-color: rgb(var(--secondary-rgb) / 0.58); border-radius: var(--d-border-radius); - backdrop-filter: blur(16px); - box-shadow: #00000077 0 0 19px 0; + backdrop-filter: blur(10px); + box-shadow: rgb(0 0 0 / 24%) 0 10px 24px -14px; padding: 24px; } diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index 1846560..8541556 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -82,8 +82,8 @@ background: linear-gradient( 135deg, - oklch(from var(--d-content-background) calc(l * 0.995) c h) 0%, - oklch(from var(--d-content-background) calc(l * 1.02) calc(c * 0.65) h) 100% + rgb(var(--secondary-rgb) / 0.96) 0%, + rgb(var(--tertiary-rgb) / 0.08) 100% ); box-shadow: 0 10px 30px -18px rgb(10 18 35 / 38%), @@ -114,12 +114,12 @@ background: radial-gradient( 120% 100% at 0% 0%, - oklch(from var(--accent-color) calc(l * 1.15) calc(c * 0.5) h / 0.42), + rgb(var(--tertiary-rgb) / 0.38), transparent 56% ), radial-gradient( 120% 90% at 100% 100%, - oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.42) calc(h + 18deg) / 0.28), + rgb(var(--tertiary-rgb) / 0.22), transparent 58% ); -webkit-mask: @@ -137,7 +137,7 @@ background: linear-gradient( 112deg, transparent 30%, - oklch(from var(--accent-color) calc(l * 1.16) calc(c * 0.28) h / 0.1) 48%, + rgb(var(--tertiary-rgb) / 0.16) 48%, transparent 66% ); pointer-events: none; @@ -204,17 +204,24 @@ &:hover { .discourse-no-touch & { - background: var(--active_color); - box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, .2), 0 8px 20px -10px var(--topic-card-shadow); - border-left: 5px solid #0007; + 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); } } &.selected { box-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); + 0 0 0 2px rgb(var(--tertiary-rgb) / 0.28), + 0 0 0 8px rgb(var(--tertiary-rgb) / 0.14); } &.excerpt-expanded {