feat: enhance UI with new background gradients and responsive design adjustments across various components
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user