mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-11 06:44:01 +08:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user