julienfroidefond/stripstream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unify and enrich default app background styling
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 3m56s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2026-02-28 22:07:29 +01:00
parent dc9f90f78f
commit 8e7c46de23
2 changed files with 8 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/home/HomeClientWrapper.tsx
View File

@@ -5,7 +5,6 @@ import { useRouter } from "next/navigation";
import { RefreshButton } from "@/components/library/RefreshButton";
import { PullToRefreshIndicator } from "@/components/common/PullToRefreshIndicator";
import { usePullToRefresh } from "@/hooks/usePullToRefresh";
import { usePreferences } from "@/contexts/PreferencesContext";
interface HomeClientWrapperProps {
children: ReactNode;
@@ -14,12 +13,6 @@ interface HomeClientWrapperProps {
export function HomeClientWrapper({ children }: HomeClientWrapperProps) {
const router = useRouter();
const [isRefreshing, setIsRefreshing] = useState(false);
const { preferences } = usePreferences();
const hasCustomBackground =
(preferences.background.type === "gradient" && Boolean(preferences.background.gradient)) ||
(preferences.background.type === "image" && Boolean(preferences.background.imageUrl)) ||
preferences.background.type === "komga-random";
const handleRefresh = async () => {
try {
@@ -51,13 +44,6 @@ export function HomeClientWrapper({ children }: HomeClientWrapperProps) {
isHiding={pullToRefresh.isHiding}
/>
<main className="relative isolate overflow-hidden">
{!hasCustomBackground && (
<>
<div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(180deg,hsl(var(--background)/0.99)_0%,hsl(var(--background)/0.95)_28%,hsl(var(--background))_100%)]" />
<div className="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(128deg,hsl(var(--primary)/0.14)_0%,transparent_36%),linear-gradient(235deg,hsl(185_82%_54%/0.1)_4%,transparent_34%),linear-gradient(320deg,hsl(332_82%_63%/0.08)_8%,transparent_32%)]" />
</>
)}
<div className="container mx-auto space-y-12 px-4 py-8">
<div className="flex justify-end">
<RefreshButton libraryId="home" refreshLibrary={handleRefresh} />

9
src/components/layout/ClientLayout.tsx
View File

@@ -151,8 +151,15 @@ export default function ClientLayout({
<ServiceWorkerProvider>
{/* Background fixe pour les images et gradients */}
{hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
{!hasCustomBackground && (
<>
<div className="pointer-events-none fixed inset-0 -z-10 bg-[linear-gradient(180deg,hsl(var(--background)/0.99)_0%,hsl(var(--background)/0.94)_42%,hsl(var(--background))_100%)]" />
<div className="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(70%_45%_at_12%_0%,hsl(var(--primary)/0.16),transparent_62%),radial-gradient(58%_38%_at_88%_8%,hsl(190_86%_56%/0.14),transparent_65%),radial-gradient(50%_34%_at_50%_100%,hsl(334_72%_62%/0.1),transparent_70%)]" />
<div className="pointer-events-none fixed inset-0 -z-10 bg-[repeating-linear-gradient(0deg,hsl(var(--foreground)/0.02)_0_1px,transparent_1px_24px),repeating-linear-gradient(90deg,hsl(var(--foreground)/0.015)_0_1px,transparent_1px_30px)]" />
</>
)}
<div
className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
className="relative min-h-screen"
style={
hasCustomBackground
? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }