OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): refine glass surfaces

Browse Source
This commit is contained in:
jiang
2026-07-15 11:41:51 +08:00
parent 2b768c2c06
commit 8978f2d167
11 changed files with 271 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+51 -49
View File
@@ -19,13 +19,13 @@
--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 30px 90px rgba(15, 23, 42, 0.26);
--glass-air: rgba(255, 255, 255, 0.84);
--glass-navigation: rgba(255, 255, 255, 0.9);
--glass-panel: rgba(255, 255, 255, 0.9);
--glass-readable: rgba(255, 255, 255, 0.94);
--glass-control: rgba(255, 255, 255, 0.92);
--glass-menu: rgba(255, 255, 255, 0.94);
--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);
@@ -112,10 +112,11 @@ input:focus-visible {
box-shadow:
inset 0 1px 0 var(--glass-edge),
var(--shadow-panel);
backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-air,
.glass-navigation,
.glass-panel,
.glass-readable,
@@ -131,13 +132,22 @@ input:focus-visible {
background-clip: padding-box;
}
.glass-air {
background-color: var(--glass-air);
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));
}
.glass-navigation {
background-color: var(--glass-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)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-navigation)) saturate(1.08);
backdrop-filter: blur(var(--blur-navigation));
-webkit-backdrop-filter: blur(var(--blur-navigation));
}
.glass-panel {
@@ -145,8 +155,8 @@ input:focus-visible {
box-shadow:
inset 0 1px 0 var(--glass-edge),
0 24px 70px rgba(30, 64, 115, 0.18);
backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-readable {
@@ -154,8 +164,8 @@ input:focus-visible {
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)) saturate(1.06);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.06);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-control {
@@ -163,8 +173,8 @@ input:focus-visible {
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
var(--shadow-control);
backdrop-filter: blur(var(--blur-control)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.08);
backdrop-filter: blur(var(--blur-control));
-webkit-backdrop-filter: blur(var(--blur-control));
}
.glass-menu {
@@ -172,8 +182,8 @@ input:focus-visible {
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)) saturate(1.04);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.04);
backdrop-filter: blur(var(--blur-panel));
-webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-focus {
@@ -181,8 +191,8 @@ input:focus-visible {
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
var(--shadow-focus);
backdrop-filter: blur(var(--blur-focus)) saturate(1.06);
-webkit-backdrop-filter: blur(var(--blur-focus)) saturate(1.06);
backdrop-filter: blur(var(--blur-focus));
-webkit-backdrop-filter: blur(var(--blur-focus));
}
.glass-info {
@@ -211,6 +221,7 @@ input:focus-visible {
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-air,
.glass-navigation,
.glass-panel,
.glass-readable,
@@ -243,6 +254,7 @@ input:focus-visible {
}
@media (prefers-reduced-transparency: reduce) {
.glass-air,
.glass-navigation,
.glass-panel,
.glass-readable,
@@ -276,37 +288,27 @@ input:focus-visible {
}
}
@media (pointer: coarse) {
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.command-panel {
background-color: rgba(255, 255, 255, 0.96);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.glass-control,
.glass-menu,
.glass-focus {
background-color: var(--surface-solid);
}
.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;
}
.agent-panel-band {
background: var(--glass-menu);
background: #ffffff;
}
.agent-panel-conversation {
background: rgba(255, 255, 255, 0.34);
background: #f8fafc;
}
.agent-panel-message {
border: 1px solid rgba(226, 232, 240, 0.72);
background: rgba(255, 255, 255, 0.94);
border: 1px solid #e2e8f0;
background: #ffffff;
}
.agent-streaming-response {
@@ -331,18 +333,18 @@ input:focus-visible {
}
.agent-panel-nested {
border: 1px solid rgba(203, 213, 225, 0.72);
background: rgba(248, 250, 252, 0.9);
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.agent-panel-control {
border: 1px solid rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.96);
border: 1px solid #e2e8f0;
background: #ffffff;
}
.agent-panel-icon-button {
border: 1px solid rgba(203, 213, 225, 0.72);
background: rgba(255, 255, 255, 0.92);
border: 1px solid #e2e8f0;
background: #f8fafc;
box-shadow: none;
}