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

fix(ui): improve background handling and PWA update prompts

Browse Source 
- Add adaptive solid color background support for dark/light themes.
- Replace mesh gradient with semi-transparent blurred background images.
- Fix background scrolling issue on mobile browsers.
- Remove borders from specific cards for consistent UI styling.
- Prevent caching of PWA service worker files in Nginx.
- Introduce interactive toast prompt for PWA updates instead of silent refresh.
This commit is contained in:
sagitchu
2026-04-05 20:53:25 +08:00
parent 25dc03c894
commit cd4238274a
8 changed files with 146 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/styles/globals.css
+43 -11
View File
@@ -227,24 +227,56 @@ body {
}
.bg-mesh-gradient {
background: radial-gradient(at 0% 0%, #ff9a9e 0%, transparent 50%),
radial-gradient(at 100% 0%, #fecfef 0%, transparent 50%),
radial-gradient(at 100% 100%, #c2e9fb 0%, transparent 50%),
radial-gradient(at 0% 100%, #a1c4fd 0%, transparent 50%);
background-color: #f2f2f7;
position: relative;
z-index: 0;
}
.dark .bg-mesh-gradient {
background: radial-gradient(at 0% 0%, #4a2b30 0%, transparent 50%),
radial-gradient(at 100% 0%, #493b45 0%, transparent 50%),
radial-gradient(at 100% 100%, #354756 0%, transparent 50%),
radial-gradient(at 0% 100%, #2f394f 0%, transparent 50%);
background-color: #1c1c1e;
.bg-mesh-gradient::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop') no-repeat center center;
background-size: cover;
}
:root.dark .bg-mesh-gradient {
background-color: #0b1020;
}
.dark .bg-mesh-gradient::before {
background: url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2564&auto=format&fit=crop') no-repeat center center;
background-size: cover;
}
:root.has-theme-bg .bg-mesh-gradient {
background-image: none !important;
background-color: #f6f7fb !important;
}
:root.dark.has-theme-bg .bg-mesh-gradient {
background-color: #0b1020 !important;
}
:root.has-theme-bg .bg-mesh-gradient::before {
background-image: none !important;
}
:root.has-custom-bg .bg-mesh-gradient {
background: var(--custom-bg-image) no-repeat center center fixed !important;
background-image: none !important;
background-color: var(--custom-bg-color, transparent) !important;
}
:root.has-custom-bg .bg-mesh-gradient::before {
background-image: var(--custom-bg-image, none) !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
@layer utilities {