style: refine acrylic workbench surfaces

This commit is contained in:
2026-07-15 17:07:32 +08:00
parent 8978f2d167
commit 16ecb69d00
41 changed files with 838 additions and 606 deletions
+207 -183
View File
@@ -4,46 +4,50 @@
:root {
color-scheme: light;
background: #eaf1f8;
--canvas-map: #eaf1f8;
background: oklch(94.5% 0.012 250);
--canvas-map: oklch(94.5% 0.012 250);
--canvas-map-grid: rgba(37, 99, 235, 0.06);
--canvas-panel: rgba(255, 255, 255, 0.94);
--canvas-panel-strong: rgba(255, 255, 255, 0.98);
--acrylic-navigation: rgba(242, 248, 252, 0.74);
--acrylic-panel: rgba(232, 241, 249, 0.58);
--acrylic-control: rgba(249, 251, 255, 0.84);
--acrylic-panel-blur: 22px;
--acrylic-control-blur: 18px;
--acrylic-backdrop-saturation: 1.2;
--acrylic-exclusion: rgba(255, 255, 255, 0.05);
--acrylic-luminosity: rgba(255, 255, 255, 0.22);
--acrylic-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.06'/%3E%3C/svg%3E");
--acrylic-border: rgba(255, 255, 255, 0.58);
--acrylic-outline: rgba(71, 85, 105, 0.18);
--acrylic-highlight: rgba(255, 255, 255, 0.82);
--acrylic-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
--surface-dock: oklch(97% 0.006 250);
--surface-control: rgba(252, 253, 255, 0.96);
--surface-well: rgba(232, 240, 248, 0.2);
--surface-reading: rgba(255, 255, 255, 0.985);
--glass-transient: rgba(248, 252, 255, 0.88);
--surface-border: oklch(86.5% 0.012 250);
--surface-divider: oklch(90.5% 0.009 250);
--surface-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
--dock-shadow: 8px 0 24px rgba(15, 23, 42, 0.07);
--radius-icon: 8px;
--radius-control: 12px;
--radius-panel: 16px;
--radius-pill: 9999px;
--action-blue: #2563eb;
--action-blue-hover: #1d4ed8;
--action-blue-soft: #dbeafe;
--ink: #0f172a;
--ink-secondary: #334155;
--ink-muted: #64748b;
--border-soft: rgba(255, 255, 255, 0.62);
--border-strong: rgba(148, 163, 184, 0.34);
--shadow-control: 0 14px 34px rgba(15, 23, 42, 0.18);
--shadow-panel: 0 24px 70px rgba(30, 64, 115, 0.2);
--shadow-focus: 0 25px 50px -12px rgba(23, 37, 84, 0.2);
--glass-air: rgba(255, 255, 255, 0.68);
--glass-navigation: rgba(255, 255, 255, 0.8);
--glass-panel: rgba(255, 255, 255, 0.84);
--glass-readable: rgba(255, 255, 255, 0.9);
--glass-control: rgba(255, 255, 255, 0.9);
--glass-menu: rgba(255, 255, 255, 0.92);
--glass-focus: rgba(255, 255, 255, 0.94);
--surface-solid: rgba(255, 255, 255, 0.98);
--glass-edge: rgba(255, 255, 255, 0.58);
--glass-edge-strong: rgba(255, 255, 255, 0.76);
--glass-divider: rgba(100, 116, 139, 0.16);
--glass-highlight: rgba(255, 255, 255, 0.46);
--glass-info: rgba(239, 246, 255, 0.78);
--glass-normal: rgba(240, 253, 250, 0.78);
--glass-warning: rgba(255, 247, 237, 0.82);
--glass-danger: rgba(254, 242, 242, 0.86);
--glass-agent: rgba(245, 243, 255, 0.82);
--border-soft: var(--surface-divider);
--border-strong: var(--surface-border);
--tone-info: oklch(95% 0.035 250);
--tone-normal: oklch(95% 0.04 175);
--tone-warning: oklch(95% 0.05 70);
--tone-danger: oklch(95% 0.045 25);
--tone-agent: oklch(95% 0.035 290);
--scrim-soft: rgba(15, 23, 42, 0.2);
--scrim-focus: rgba(15, 23, 42, 0.48);
--blur-air: 16px;
--blur-navigation: 24px;
--blur-control: 16px;
--blur-panel: 20px;
--blur-focus: 24px;
--background: 210 40% 98%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
@@ -66,6 +70,38 @@
--radius: 0.5rem;
}
[data-basemap-tone="light"] {
--acrylic-navigation: rgba(242, 248, 252, 0.68);
--acrylic-panel: rgba(232, 241, 249, 0.7);
--acrylic-control: rgba(249, 251, 255, 0.78);
--acrylic-panel-blur: 24px;
--acrylic-control-blur: 20px;
--acrylic-backdrop-saturation: 1.22;
--acrylic-exclusion: rgba(255, 255, 255, 0.04);
--acrylic-luminosity: rgba(255, 255, 255, 0.18);
--surface-control: rgba(252, 253, 255, 0.95);
--surface-well: rgba(232, 240, 248, 0.34);
--surface-reading: rgba(255, 255, 255, 0.97);
--glass-transient: rgba(238, 247, 253, 0.56);
}
[data-basemap-tone="satellite"] {
--acrylic-navigation: rgba(242, 248, 252, 0.82);
--acrylic-panel: rgba(232, 241, 249, 0.7);
--acrylic-control: rgba(250, 252, 255, 0.9);
--acrylic-panel-blur: 20px;
--acrylic-control-blur: 16px;
--acrylic-backdrop-saturation: 1.1;
--acrylic-exclusion: rgba(255, 255, 255, 0.06);
--acrylic-luminosity: rgba(255, 255, 255, 0.24);
--surface-control: rgba(252, 253, 255, 0.98);
--surface-well: rgba(232, 240, 248, 0.28);
--surface-reading: rgba(255, 255, 255, 0.99);
--glass-transient: rgba(238, 247, 253, 0.72);
--acrylic-outline: rgba(71, 85, 105, 0.24);
--acrylic-shadow: 0 14px 38px rgba(15, 23, 42, 0.2);
}
* {
box-sizing: border-box;
}
@@ -78,9 +114,11 @@ body {
body {
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Microsoft YaHei", sans-serif;
-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
"PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button,
@@ -107,208 +145,196 @@ input:focus-visible {
auto;
}
.command-panel {
background: var(--glass-panel);
box-shadow:
inset 0 1px 0 var(--glass-edge),
var(--shadow-panel);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-air,
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.glass-info,
.glass-normal,
.glass-warning,
.glass-danger,
.glass-agent {
border-color: transparent;
.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.surface-dock,
.surface-control,
.surface-well,
.surface-reading,
.glass-transient,
.material-tone-info,
.material-tone-normal,
.material-tone-warning,
.material-tone-danger,
.material-tone-agent {
border-color: var(--surface-border);
background-clip: padding-box;
}
.glass-air {
background-color: var(--glass-air);
.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.glass-transient {
border-color: var(--acrylic-border);
background-image:
linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)),
var(--acrylic-noise);
background-blend-mode: exclusion, luminosity, soft-light;
box-shadow:
inset 0 1px 0 var(--glass-edge),
0 10px 30px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(var(--blur-air));
-webkit-backdrop-filter: blur(var(--blur-air));
inset 0 1px 0 var(--acrylic-highlight),
0 0 0 1px var(--acrylic-outline),
var(--acrylic-shadow);
}
.glass-navigation {
background-color: var(--glass-navigation);
.acrylic-navigation {
background-color: var(--acrylic-navigation);
box-shadow:
inset 0 1px 0 var(--glass-edge),
0 8px 28px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(var(--blur-navigation));
-webkit-backdrop-filter: blur(var(--blur-navigation));
inset 0 1px 0 var(--acrylic-highlight),
0 1px 0 var(--acrylic-outline),
0 8px 24px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
-webkit-backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
}
.glass-panel {
background-color: var(--glass-panel);
box-shadow:
inset 0 1px 0 var(--glass-edge),
0 24px 70px rgba(30, 64, 115, 0.18);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
.acrylic-panel {
background-color: var(--acrylic-panel);
backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
-webkit-backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
}
.glass-readable {
background-color: var(--glass-readable);
.acrylic-control {
background-color: var(--acrylic-control);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
0 24px 70px rgba(30, 64, 115, 0.2);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
inset 0 1px 0 rgba(255, 255, 255, 0.86),
0 0 0 1px rgba(59, 130, 246, 0.14),
0 14px 34px rgba(15, 23, 42, 0.13);
backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
-webkit-backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
}
.glass-control {
background-color: var(--glass-control);
.surface-dock { background-color: var(--surface-dock); }
.surface-control { background-color: var(--surface-control); }
.surface-well { background-color: var(--surface-well); }
.surface-reading { background-color: var(--surface-reading); }
.glass-transient {
background-color: var(--glass-transient);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
var(--shadow-control);
backdrop-filter: blur(var(--blur-control));
-webkit-backdrop-filter: blur(var(--blur-control));
inset 0 1px 0 var(--acrylic-highlight),
0 0 0 1px var(--acrylic-outline),
0 10px 28px rgba(15, 23, 42, 0.14);
backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
-webkit-backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
}
.glass-menu {
background-color: var(--glass-menu);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
0 18px 48px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-focus {
background-color: var(--glass-focus);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
var(--shadow-focus);
backdrop-filter: blur(var(--blur-focus));
-webkit-backdrop-filter: blur(var(--blur-focus));
}
.glass-info {
background-color: var(--glass-info);
.material-tone-info {
background-color: var(--tone-info);
box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.42);
}
.glass-normal {
background-color: var(--glass-normal);
.material-tone-normal {
background-color: var(--tone-normal);
box-shadow: inset 0 1px 0 rgba(94, 234, 212, 0.4);
}
.glass-warning {
background-color: var(--glass-warning);
.material-tone-warning {
background-color: var(--tone-warning);
box-shadow: inset 0 1px 0 rgba(253, 186, 116, 0.46);
}
.glass-danger {
background-color: var(--glass-danger);
.material-tone-danger {
background-color: var(--tone-danger);
box-shadow: inset 0 1px 0 rgba(252, 165, 165, 0.48);
}
.glass-agent {
background-color: var(--glass-agent);
.material-tone-agent {
background-color: var(--tone-agent);
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.42);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-air,
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.command-panel {
background-color: rgba(255, 255, 255, 0.96);
}
.glass-info {
background-color: #eff6ff;
}
.glass-normal {
background-color: #f0fdfa;
}
.glass-warning {
background-color: #fff7ed;
}
.glass-danger {
background-color: #fef2f2;
}
.glass-agent {
background-color: #f5f3ff;
.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.glass-transient {
background-color: rgba(250, 252, 255, 0.98);
background-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@media (prefers-reduced-transparency: reduce) {
.glass-air,
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.command-panel {
background-color: var(--surface-solid);
.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.glass-transient {
background-color: rgba(250, 252, 255, 0.98);
background-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.glass-info {
.surface-well,
.surface-control,
.surface-reading {
background-color: rgba(255, 255, 255, 0.98);
background-image: none;
}
.material-tone-info {
background-color: #eff6ff;
}
.glass-normal {
.material-tone-normal {
background-color: #f0fdfa;
}
.glass-warning {
.material-tone-warning {
background-color: #fff7ed;
}
.glass-danger {
.material-tone-danger {
background-color: #fef2f2;
}
.glass-agent {
.material-tone-agent {
background-color: #f5f3ff;
}
}
@media (forced-colors: active) {
.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.glass-transient,
.surface-dock,
.surface-control,
.surface-well,
.surface-reading,
.material-tone-info,
.material-tone-normal,
.material-tone-warning,
.material-tone-danger,
.material-tone-agent {
forced-color-adjust: none;
border-color: CanvasText;
background-color: Canvas;
background-image: none;
box-shadow: none;
color: CanvasText;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.agent-panel-shell {
border-color: rgba(148, 163, 184, 0.34);
background: #f8fafc;
box-shadow:
0 24px 64px rgba(15, 23, 42, 0.18),
0 2px 8px rgba(15, 23, 42, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: var(--acrylic-border);
}
.agent-panel-band {
background: #ffffff;
background: var(--surface-control);
}
.agent-panel-conversation {
background: #f8fafc;
background: var(--surface-well);
}
.agent-panel-message {
border: 1px solid #e2e8f0;
background: #ffffff;
border: 1px solid var(--surface-divider);
background: var(--surface-reading);
}
.agent-streaming-response {
@@ -333,18 +359,18 @@ input:focus-visible {
}
.agent-panel-nested {
border: 1px solid #e2e8f0;
background: #f8fafc;
border: 1px solid var(--surface-divider);
background: var(--surface-control);
}
.agent-panel-control {
border: 1px solid #e2e8f0;
background: #ffffff;
border: 1px solid rgba(100, 116, 139, 0.16);
background: var(--surface-reading);
}
.agent-panel-icon-button {
border: 1px solid #e2e8f0;
background: #f8fafc;
border: 1px solid var(--surface-divider);
background: var(--surface-control);
box-shadow: none;
}
@@ -447,7 +473,6 @@ input:focus-visible {
scheduled-feed-shell-show 170ms cubic-bezier(0.22, 1, 0.36, 1),
agent-panel-fade 140ms ease-out;
transform-origin: top right;
will-change: opacity, transform;
}
.scheduled-feed-shell-exit {
@@ -456,12 +481,11 @@ input:focus-visible {
agent-panel-dim 140ms ease-in forwards;
pointer-events: none;
transform-origin: top right;
will-change: opacity, transform;
}
.agent-panel-confirmation {
border: 1px solid rgba(254, 215, 170, 0.92);
background: rgba(255, 247, 237, 0.96);
border: 1px solid rgba(253, 186, 116, 0.46);
background: rgba(255, 247, 237, 0.82);
}
.agent-panel-enter {
@@ -653,11 +677,11 @@ input:focus-visible {
transform: none;
}
.scheduled-feed-layout {
.scheduled-feed-panel-shell {
transition: none;
}
.scheduled-feed-panel-shell {
.scheduled-feed-layout {
transition: none;
}
@@ -678,9 +702,9 @@ input:focus-visible {
}
.maplibregl-ctrl-group {
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 14px !important;
box-shadow: 0 14px 36px rgba(30, 64, 115, 0.14) !important;
border: 1px solid var(--surface-border) !important;
border-radius: var(--radius-control) !important;
box-shadow: var(--surface-shadow) !important;
overflow: hidden;
}