tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-06 10:06:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: improve glassmorphism UI for background adaptability

Browse Source 
- Increase backdrop blur and lower white/black background opacity on inner elements (tables, charts, tabs)
- Apply higher blur to admin layout sidebar and H5 layout navigation bar
- Remove solid backgrounds inside nested cards to inherit background themes
This commit is contained in:
sagitchu
2026-04-06 10:21:06 +08:00
parent 26013f8dfa
commit 7c1f5ca660
7 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/layouts/admin.tsx
+7 -8
View File
@@ -373,16 +373,15 @@ export default function AdminLayout({
{/* 左侧菜单栏 */}
<aside
className={`
${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"}
${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"}
${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"}
bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl
shadow-[0_10px_30px_rgba(0,0,0,0.1)]
${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"}
bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl
shadow-[0_10px_30px_rgba(0,0,0,0.1)]
border border-white/80 dark:border-white/10
z-50
z-50
transition-all duration-300 ease-in-out
flex flex-col flex-shrink-0
`}
flex flex-col flex-shrink-0 `}
>
{/* Logo 区域 */}
<div className="px-6 py-8 flex items-center overflow-hidden whitespace-nowrap box-border">
@@ -531,7 +530,7 @@ export default function AdminLayout({
{isMobile && (
<Button
isIconOnly
className="absolute top-4 left-4 z-40 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
className="absolute top-4 left-4 z-40 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
variant="flat"
onPress={toggleMobileMenu}
>
vite-frontend/src/layouts/h5-simple.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export default function H5SimpleLayout({
return (
<div className="flex flex-col min-h-screen bg-mesh-gradient">
{/* 顶部导航栏 */}
<header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
<header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
<div className="flex items-center gap-2">
<Button isIconOnly size="sm" variant="light" onPress={handleBack}>
<BackIcon className="w-5 h-5" />
vite-frontend/src/layouts/h5.tsx
+2 -2
View File
@@ -168,7 +168,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex flex-col min-h-screen bg-mesh-gradient">
{/* 顶部导航栏 */}
<header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
<header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
<div className="flex items-center gap-2">
<BrandLogo size={20} />
<h1 className="text-sm font-bold text-foreground">
@@ -186,7 +186,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
<div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" />
{/* 底部Tabbar */}
<nav className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
<nav className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
{filteredTabItems.map((item) => {
const isActive = location.pathname === item.path;
const isMonitor = item.path === "/monitor";