style: 统一滚动条外观并将投稿应用窗口改为圆角

- 滚动条:主进程对 Linux 关闭 overlay 滚动条
  (disable-features=OverlayScrollbar),使 CSS ::-webkit-scrollbar 自定义生效;
  全局统一定义亮色 #94a3b8 / 暗色 #15203b(带极淡描边),宽度 0.75rem,亮暗一致。
- 投稿页:修复滚动条贯穿整个窗口、侵入标题栏(改为 flex 分栏,
  标题栏 shrink-0,内容区单独滚动)。
- 应用管理页:移除 scrollbar-nowidth 隐藏与 scrollbar-thumb-* 覆盖色,
  改由全局规则统一,与其他页面一致。
- 圆角页面:投稿页与已安装应用页滚动容器内缩 (mr-4 mb-4),
  避免滚动条滚入圆角被裁切。
- 投稿应用窗口:独立窗口改为透明圆角窗口 (transparent + rounded-3xl + shadow-2xl),
  与弹框风格统一;挂载时 body 背景透明以露出圆角。
- 标题栏:左上角蓝色圆点替换为软件图标 spark-store.svg。
- 更新中心:搜索框对齐主页样式(左侧图标、统一圆角与配色)。
This commit is contained in:
xiyidaiwa
2026-07-22 01:19:52 +08:00
parent e857ce67b3
commit df8c2d7eaa
9 changed files with 78 additions and 9 deletions
+51
View File
@@ -22,6 +22,14 @@
@variant dark (&:where(.dark, .dark *));
@layer base {
html {
color-scheme: light;
}
html.dark {
color-scheme: dark;
}
body {
font-family: var(--font-sans);
background-color: var(--color-surface-light);
@@ -41,6 +49,40 @@
}
@layer utilities {
/* 必须先声明 ::-webkit-scrollbar 并禁用 overlay 滚动条,才能使自定义颜色生效 */
*::-webkit-scrollbar {
width: 0.75rem;
height: 0.75rem;
}
/* 亮色滚动条:与暗色保持相同几何(透明边距),确保亮/暗滚动块大小一致 */
html ::-webkit-scrollbar-thumb {
background-color: #94a3b8;
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
}
html ::-webkit-scrollbar-track {
background: transparent;
}
/* 暗色滚动条:挂在 html.dark 上(root),与主界面 surface 同色 (#0b1220),加极淡描边以便可抓取。
注意:必须用 html.dark 而非 .dark *,因为经典滚动条只作用于滚动容器自身,
.dark * 在亮色模式不命中会导致回退到原生宽度,亮/暗宽度不一致。 */
html.dark ::-webkit-scrollbar-thumb {
background-color: #15203b;
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
html.dark ::-webkit-scrollbar-track {
background: transparent;
}
/* 弱化滚动条 */
.scrollbar-muted {
scrollbar-width: thin;
scrollbar-color: #94a3b8 transparent;
@@ -59,6 +101,15 @@
border-radius: 9999px;
}
html.dark .scrollbar-muted {
scrollbar-color: #0b1220 transparent;
}
html.dark .scrollbar-muted::-webkit-scrollbar-thumb {
background-color: #0b1220;
}
/* 完全隐藏滚动条 */
.scrollbar-nowidth {
scrollbar-width: none;
}