style(webui): clarify surface hierarchy (#5029)

This commit is contained in:
chengyongru
2026-07-22 14:33:58 +08:00
committed by GitHub
parent 63bc6e98a7
commit 96abb4d2c4
10 changed files with 58 additions and 47 deletions
+19 -24
View File
@@ -22,47 +22,47 @@
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--border: 40 8% 90.5%;
--input: 40 8% 90.5%;
--ring: 0 0% 3.9%;
--inline-token-highlight: 221 70% 50%;
--radius: 0.4375rem;
--sidebar: 0 0% 98.5%;
--sidebar: 40 8% 96.8%;
--sidebar-foreground: 0 0% 3.9%;
--sidebar-accent: 0 0% 95.8%;
--sidebar-accent-foreground: 0 0% 9%;
--sidebar-border: 0 0% 89.8%;
--sidebar-border: 40 8% 90.5%;
--scrollbar-thumb: hsl(var(--muted-foreground) / 0.26);
--scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.42);
}
.dark {
color-scheme: dark;
--background: 0 0% 10%;
--background: 0 0% 12%;
--foreground: 240 4% 96%;
--card: 0 0% 12%;
--card: 0 0% 14%;
--card-foreground: 240 4% 96%;
--popover: 0 0% 12%;
--popover: 0 0% 14%;
--popover-foreground: 240 4% 96%;
--primary: 240 5% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 12%;
--secondary: 0 0% 14%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 13%;
--muted-foreground: 0 0% 60%;
--accent: 0 0% 15%;
--muted: 0 0% 16%;
--muted-foreground: 0 0% 65%;
--accent: 0 0% 18%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 18%;
--input: 0 0% 18%;
--border: 0 0% 22%;
--input: 0 0% 22%;
--ring: 0 0% 83.1%;
--inline-token-highlight: 217 92% 72%;
--sidebar: 0 0% 11.5%;
--sidebar: 0 0% 10.5%;
--sidebar-foreground: 0 0% 98%;
--sidebar-accent: 0 0% 15.5%;
--sidebar-accent: 0 0% 15%;
--sidebar-accent-foreground: 0 0% 98%;
--sidebar-border: 0 0% 18%;
--sidebar-border: 0 0% 20%;
--scrollbar-thumb: hsl(var(--muted-foreground) / 0.28);
--scrollbar-thumb-hover: hsl(var(--muted-foreground) / 0.44);
}
@@ -81,6 +81,7 @@
body {
@apply bg-background text-foreground font-sans antialiased;
overflow: hidden;
}
* {
@@ -159,10 +160,7 @@
background: hsl(var(--sidebar) / 0.94);
-webkit-backdrop-filter: saturate(145%) blur(18px);
backdrop-filter: saturate(145%) blur(18px);
box-shadow:
inset -1px 0 0 hsl(var(--border) / 0.32),
inset 1px 0 0 hsl(var(--background) / 0.52),
14px 0 32px -30px rgb(0 0 0 / 0.22);
box-shadow: 14px 0 32px -30px rgb(0 0 0 / 0.12);
}
.dark .host-window-shell,
@@ -174,10 +172,7 @@
.dark .host-sidebar-glass {
background: hsl(var(--sidebar) / 0.96);
box-shadow:
inset -1px 0 0 hsl(var(--border) / 0.42),
inset 1px 0 0 hsl(var(--foreground) / 0.05),
14px 0 34px -30px rgb(0 0 0 / 0.62);
box-shadow: 14px 0 34px -30px rgb(0 0 0 / 0.34);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {