feat: enhance UI with new background gradients and responsive design adjustments across various components

This commit is contained in:
Julien Froidefond
2025-12-07 17:23:53 +01:00
parent b704cc5a84
commit d4db94d156
10 changed files with 399 additions and 191 deletions

View File

@@ -122,4 +122,80 @@
body {
@apply bg-background text-foreground;
}
/* Background avec beau dégradé */
.page-background {
position: relative;
background: var(--background);
}
.page-background::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 50% at 50% -20%,
color-mix(in srgb, var(--chart-1) 25%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at -10% 50%,
color-mix(in srgb, var(--chart-2) 20%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at 110% 50%,
color-mix(in srgb, var(--chart-3) 20%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 80% 50% at 50% 120%,
color-mix(in srgb, var(--chart-4) 25%, transparent) 0%,
transparent 50%
),
linear-gradient(
135deg,
color-mix(in srgb, var(--chart-1) 8%, transparent) 0%,
transparent 25%,
transparent 75%,
color-mix(in srgb, var(--chart-2) 8%, transparent) 100%
);
background-size: 100% 100%;
pointer-events: none;
opacity: 1;
}
.dark .page-background::before {
background:
radial-gradient(ellipse 80% 50% at 50% -20%,
color-mix(in srgb, var(--chart-1) 35%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at -10% 50%,
color-mix(in srgb, var(--chart-2) 30%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 60% 80% at 110% 50%,
color-mix(in srgb, var(--chart-3) 30%, transparent) 0%,
transparent 50%
),
radial-gradient(ellipse 80% 50% at 50% 120%,
color-mix(in srgb, var(--chart-4) 35%, transparent) 0%,
transparent 50%
),
linear-gradient(
135deg,
color-mix(in srgb, var(--chart-1) 12%, transparent) 0%,
transparent 25%,
transparent 75%,
color-mix(in srgb, var(--chart-2) 12%, transparent) 100%
);
opacity: 1;
}
.page-content {
position: relative;
z-index: 1;
}
}