chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-06-16 21:03:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(styles): degrade glass blur on mobile

Browse Source
This commit is contained in:
Supra4E8C
2026-04-03 00:04:26 +08:00
Unverified
parent ab6ead7027
commit 5ad32a1892
9 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/SecondaryScreenShell.module.scss
+5 -6
View File
@@ -106,17 +106,16 @@
gap: 8px;
padding: 10px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
--glass-blur: 12px;
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
border: 1px solid var(--glass-border);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
:global([data-theme='dark']) {
.floatingActionSurface {
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
}
src/components/config/VisualConfigEditor.module.scss
+3 -2
View File
@@ -395,8 +395,9 @@
border-radius: 26px;
border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
--glass-blur: 14px;
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
-ms-overflow-style: none;
scrollbar-width: none;
src/components/providers/ProviderNav/ProviderNav.module.scss
+5 -6
View File
@@ -17,10 +17,11 @@
flex-direction: row;
gap: 6px;
padding: 10px 12px;
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
--glass-blur: 12px;
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
border: 1px solid var(--glass-border);
border-radius: 999px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
overflow-x: auto;
@@ -104,8 +105,6 @@
// 暗色主题适配
:global([data-theme='dark']) {
.navList {
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
src/pages/AuthFilesPage.module.scss
+6 -4
View File
@@ -659,8 +659,9 @@
position: relative;
overflow: hidden;
background-color: color-mix(in srgb, var(--bg-primary) 85%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
--glass-blur: 8px;
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
border-radius: 12px;
padding: 16px;
@@ -1529,8 +1530,9 @@
border-radius: $radius-lg;
border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
--glass-blur: 12px;
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
box-shadow: var(--shadow-lg);
}
src/pages/ConfigPage.module.scss
+5 -4
View File
@@ -422,10 +422,11 @@
align-items: center;
gap: 8px;
padding: 8px 10px;
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
--glass-blur: 12px;
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
border: 1px solid var(--glass-border);
border-radius: 999px;
box-shadow: var(--shadow-lg);
max-width: inherit;
src/pages/DashboardPage.module.scss
+8 -6
View File
@@ -72,14 +72,15 @@
gap: $spacing-lg;
padding: $spacing-2xl $spacing-xl;
border-radius: $radius-lg;
--glass-blur: 12px;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--bg-primary) 92%, transparent),
color-mix(in srgb, var(--bg-secondary) 80%, transparent)
);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
overflow: hidden;
animation: heroEnter 0.6s ease-out both;
@@ -212,10 +213,11 @@
gap: 6px;
padding: 5px 12px;
border-radius: $radius-full;
background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
--glass-blur: 8px;
background: var(--glass-bg-secondary);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
font-size: 12px;
}
src/pages/QuotaPage.module.scss
+2 -1
View File
@@ -469,7 +469,8 @@
rgba(255, 237, 158, 0.58) 32%,
rgba(255, 215, 91, 0) 72%
);
filter: blur(9px);
--glass-blur: 9px;
filter: var(--glass-filter);
opacity: 0.75;
pointer-events: none;
z-index: -1;
src/pages/UsagePage.module.scss
+4 -3
View File
@@ -78,9 +78,10 @@
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
--glass-blur: 6px;
background: var(--glass-bg-secondary);
backdrop-filter: var(--glass-backdrop-filter);
-webkit-backdrop-filter: var(--glass-backdrop-filter);
}
.loadingOverlayContent {
src/styles/themes.scss
+20
View File
@@ -58,6 +58,14 @@
--radius-md: 8px;
--accent-tertiary: var(--bg-tertiary);
// Glass effect (blurred surfaces)
--glass-blur: 12px;
--glass-backdrop-filter: blur(var(--glass-blur));
--glass-filter: blur(var(--glass-blur));
--glass-bg: color-mix(in srgb, var(--bg-primary) 82%, transparent);
--glass-bg-secondary: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
--glass-border: color-mix(in srgb, var(--border-color) 60%, transparent);
}
// 纯白主题
@@ -173,4 +181,16 @@
--radius-md: 8px;
--accent-tertiary: var(--bg-tertiary);
--glass-border: color-mix(in srgb, var(--border-color) 55%, transparent);
}
@media (max-width: 768px), (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
:root {
--glass-backdrop-filter: none;
--glass-filter: none;
--glass-bg: var(--bg-primary);
--glass-bg-secondary: var(--bg-secondary);
--glass-border: var(--border-color);
}
}