feat: update fintech card styles with modern design enhancements; add subtle texture effects and adjust gradient backgrounds for improved visual appeal in overview and statistics cards
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m52s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m52s
This commit is contained in:
Julien Froidefond
281
app/globals.css
281
app/globals.css
@@ -459,21 +459,50 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Fintech card styles avec glassmorphism très prononcé */
|
||||
/* Fintech card styles avec design moderne et élégant */
|
||||
.fintech-card {
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(50px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(50px) saturate(200%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
backdrop-filter: blur(40px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
||||
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
|
||||
border-radius: calc(var(--radius) + 0.25rem);
|
||||
box-shadow:
|
||||
0 8px 32px -8px color-mix(in srgb, var(--primary) 8%, transparent),
|
||||
0 2px 8px -2px color-mix(in srgb, var(--foreground) 3%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 25%, transparent);
|
||||
0 1px 3px 0 color-mix(in srgb, var(--foreground) 4%, transparent),
|
||||
0 4px 12px -2px color-mix(in srgb, var(--primary) 6%, transparent),
|
||||
0 8px 24px -4px color-mix(in srgb, var(--foreground) 2%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Texture subtile avec grain/noise */
|
||||
.fintech-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 2%, transparent) 1px, transparent 0);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dark .fintech-card::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 1px 1px, color-mix(in srgb, white 3%, transparent) 1px, transparent 0);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.dark .fintech-card {
|
||||
border-color: color-mix(in srgb, var(--border) 40%, transparent);
|
||||
box-shadow:
|
||||
0 1px 3px 0 color-mix(in srgb, var(--foreground) 8%, transparent),
|
||||
0 4px 12px -2px color-mix(in srgb, var(--primary) 8%, transparent),
|
||||
0 8px 24px -4px color-mix(in srgb, black 40%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 8%, transparent);
|
||||
}
|
||||
|
||||
.fintech-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -484,140 +513,220 @@
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
color-mix(in srgb, white 40%, transparent) 50%,
|
||||
color-mix(in srgb, white 50%, transparent) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0.5;
|
||||
opacity: 0.6;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Gradient backgrounds for stat cards très vibrants */
|
||||
.dark .fintech-card::after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* Gradient backgrounds for stat cards - design moderne et subtil */
|
||||
.stat-card-gradient-1 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--primary) 8%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--primary-light) 5%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--primary) 4%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--primary) 15%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark .stat-card-gradient-1 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--primary) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--primary-light) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--primary) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--primary) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
.dark .stat-card-gradient-1::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.stat-card-gradient-2 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--success) 8%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--success) 5%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--success) 4%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--success) 20%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--success) 15%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark .stat-card-gradient-2 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--success) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--success) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--success) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--success) 30%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--success) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
.dark .stat-card-gradient-2::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.stat-card-gradient-3 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--destructive) 8%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--destructive) 5%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--destructive) 4%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--destructive) 20%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-3::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--destructive) 15%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark .stat-card-gradient-3 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--destructive) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--destructive) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--destructive) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-3::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--destructive) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
.dark .stat-card-gradient-3::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.stat-card-gradient-4 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--chart-4) 8%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--chart-4) 5%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--chart-4) 4%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--chart-4) 20%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--chart-4) 15%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark .stat-card-gradient-4 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--chart-4) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--chart-4) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--chart-4) 30%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-4::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--chart-4) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
.dark .stat-card-gradient-4::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.stat-card-gradient-5 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--chart-5) 8%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--chart-5) 5%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--chart-5) 4%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--chart-5) 20%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-5::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
right: -20%;
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--chart-5) 15%, transparent) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark .stat-card-gradient-5 {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--chart-5) 12%, var(--card)) 0%,
|
||||
color-mix(in srgb, var(--chart-5) 8%, var(--card)) 50%,
|
||||
color-mix(in srgb, var(--chart-5) 6%, var(--card)) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: color-mix(in srgb, var(--chart-5) 30%, var(--border));
|
||||
}
|
||||
|
||||
.stat-card-gradient-5::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
color-mix(in srgb, var(--chart-5) 20%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
opacity: 0.3;
|
||||
.dark .stat-card-gradient-5::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user