tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-10-05 17:46:37 +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/App.tsx
+19 -2
View File
@@ -95,11 +95,28 @@ function App() {
const updateBg = () => {
const customBg = siteConfig.app_bg_image;
if (customBg) {
document.documentElement.style.setProperty("--custom-bg-image", `url(${customBg})`);
document.documentElement.classList.add("has-custom-bg");
if (customBg === "theme") {
document.documentElement.style.removeProperty("--custom-bg-image");
document.documentElement.style.removeProperty("--custom-bg-color");
document.documentElement.classList.add("has-theme-bg");
document.documentElement.classList.remove("has-custom-bg");
} else if (customBg.startsWith("http") || customBg.startsWith("data:") || customBg.startsWith("/") || customBg.startsWith("blob:")) {
document.documentElement.style.setProperty("--custom-bg-image", `url(${customBg})`);
document.documentElement.style.setProperty("--custom-bg-color", "transparent");
document.documentElement.classList.add("has-custom-bg");
document.documentElement.classList.remove("has-theme-bg");
} else {
// Assume solid color like "#ffffff", "white", etc.
document.documentElement.style.setProperty("--custom-bg-image", "none");
document.documentElement.style.setProperty("--custom-bg-color", customBg);
document.documentElement.classList.add("has-custom-bg");
document.documentElement.classList.remove("has-theme-bg");
}
} else {
document.documentElement.style.removeProperty("--custom-bg-image");
document.documentElement.style.removeProperty("--custom-bg-color");
document.documentElement.classList.remove("has-custom-bg");
document.documentElement.classList.remove("has-theme-bg");
}
};
updateBg();