From 6119211ff4d8e485a6d995ed861c81e9c8e831ad Mon Sep 17 00:00:00 2001 From: shiran <2488252513@qq.com> Date: Fri, 20 Feb 2026 21:04:14 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E4=BC=98=E5=8C=96=E8=AF=9D?= =?UTF-8?q?=E9=A2=98=E5=88=97=E8=A1=A8=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为话题列表头部添加 z-index 层级控制 - 调整话题列表头部间距和内边距 - 设置话题列表数据项颜色、字体大小和粗细 - 将话题列表数据项设为大写字母并添加背景透明效果 - 为默认话题列表项添加圆角边框 - 重新定位批量选择控件位置并更新样式 - 更新批量选择按钮的圆角样式 - 新增自定义背景图片和容器样式 - 为主题卡片渐变背景替换为线性渐变效果 - 调整主题卡片悬停状态下的背景色和阴影效果 - 为主题卡片添加左侧边框高亮效果 - 移除废弃的主题卡片相关样式代码 --- scss/desktop-horizon-fixes.scss | 28 ++++++++++++++++++----- scss/self.scss | 35 +++++++++++++++++++++++++++++ scss/topic-cards.scss | 39 ++++----------------------------- 3 files changed, 62 insertions(+), 40 deletions(-) create mode 100644 scss/self.scss diff --git a/scss/desktop-horizon-fixes.scss b/scss/desktop-horizon-fixes.scss index 5172516..92d63d1 100644 --- a/scss/desktop-horizon-fixes.scss +++ b/scss/desktop-horizon-fixes.scss @@ -3,6 +3,7 @@ .topic-list-header { position: relative; top: 0; + z-index: 2; } .topic-author-avatar-data { @@ -28,18 +29,29 @@ } .topic-list-header { + position: relative; + margin-bottom: 0.35rem; + tr { border: none; } .topic-list-data { - padding: 0; + padding: 0.25rem 0; + color: var(--primary-600); + font-size: var(--font-down-2); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + background: transparent; &:not(.default) { display: none; } &.default { + border-radius: var(--d-border-radius); + .bulk-select, span:not(.bulk-select-topics, .d-button-label) { display: none; @@ -50,16 +62,22 @@ // bulk select .bulk-select-topics { position: absolute; - right: 0; - background: var(--secondary); - border-radius: 0 0 0 var(--d-border-radius); + right: 0.25rem; + top: 50%; + transform: translateY(-50%); + background: color-mix(in srgb, var(--d-content-background) 88%, white 12%); + border: 1px solid var(--primary-200); + border-radius: 999px; + box-shadow: 0 6px 18px -12px rgb(10 18 35 / 35%); display: flex; gap: 0.5rem; - margin: 0.5rem; + margin: 0; + padding: 0.25rem; button { white-space: nowrap; margin: 0; + border-radius: 999px; } } } diff --git a/scss/self.scss b/scss/self.scss new file mode 100644 index 0000000..ef37800 --- /dev/null +++ b/scss/self.scss @@ -0,0 +1,35 @@ +@use "lib/viewport"; + +#main-outlet { + @if $home_bg_image != "" { + background-image: url($home_bg_image); + background-size: cover; + background-position: center; + } +} + +.container.list-container{ + position: relative; +} + +.container.list-container::before{ + position: absolute; + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: #fff9; + border-radius: var(--d-border-radius); + backdrop-filter: blur(10px); +} + +.list-controls{ + border-radius: var(--d-border-radius); +} + +#list-area{ + background-color: unset !important; +} diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index 2232b5f..1170f0b 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -68,7 +68,7 @@ .topic-list-body .topic-list-item { position: relative; - background: var(--d-content-background); + 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); @@ -155,11 +155,10 @@ &:hover { .discourse-no-touch & { - background: var(--d-content-background); - box-shadow: - 0 16px 34px -18px rgb(10 18 35 / 52%), - 0 8px 20px -10px var(--topic-card-shadow); + background: var(--d-sidebar-active-background); + box-shadow: 4px 5px 3px 1px #0003, 0 8px 20px -10px var(--topic-card-shadow); transform: translateY(-1px); + border-left: 5px solid var(--d-button-danger-icon-color); } } @@ -764,33 +763,3 @@ body.user-messages-page { display: inline-flex; position: relative; } - -#main-outlet { - @if $home_bg_image != "" { - background-image: url($home_bg_image); - background-size: cover; - background-position: center; - } -} - -.container.list-container{ - position: relative; -} - -.container.list-container::before{ - position: absolute; - content: ""; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background-color: #fff9; - border-radius: var(--d-border-radius); - backdrop-filter: blur(10px); -} - -#list-area{ - background-color: unset !important; -}