feat: 优化顶部栏背景和阴影效果

Author: quantal

web/src/index.css

@@ -345,22 +345,28 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .ag-topbar {
-  background:
-    linear-gradient(180deg, color-mix(in oklab, white 12%, transparent), transparent 58%),
-    linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 5%, transparent), transparent),
-    color-mix(in oklab, var(--background) 88%, transparent);
+  background: color-mix(in oklab, var(--background) 78%, transparent);
   border-bottom: 1px solid color-mix(in oklab, var(--border) 28%, transparent);
-  box-shadow: 0 1px 0 color-mix(in oklab, white 12%, transparent) inset;
+  box-shadow:
+    0 1px 0 color-mix(in oklab, white 16%, transparent) inset,
+    0 4px 16px color-mix(in oklab, var(--background) 10%, transparent);
+  -webkit-backdrop-filter: saturate(160%) blur(16px);
+  backdrop-filter: saturate(160%) blur(16px);
 }
 
 [data-theme="dark"] .ag-topbar,
 .dark .ag-topbar {
-  background:
-    linear-gradient(180deg, color-mix(in oklab, white 5%, transparent), transparent 58%),
-    linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 6%, transparent), transparent),
-    color-mix(in oklab, var(--background) 90%, transparent);
+  background: color-mix(in oklab, var(--background) 82%, transparent);
   border-bottom-color: color-mix(in oklab, var(--border) 34%, transparent);
-  box-shadow: 0 1px 0 color-mix(in oklab, white 4%, transparent) inset;
+  box-shadow:
+    0 1px 0 color-mix(in oklab, white 4%, transparent) inset,
+    0 4px 16px color-mix(in oklab, black 10%, transparent);
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .ag-topbar {
+    background: color-mix(in oklab, var(--surface) 92%, transparent);
+  }
 }
 
 .ag-page-toolbar {