feat: refine card styles and interactions across the dashboard; adjust glassmorphism effects, enhance texture for statistic cards, and improve layout for account filter component
This commit is contained in:
Julien Froidefond
@@ -10,9 +10,9 @@
|
||||
--foreground: oklch(0.1 0.015 280);
|
||||
|
||||
/* Cards avec glassmorphism très prononcé */
|
||||
--card: oklch(1 0 0 / 0.6);
|
||||
--card: oklch(1 0 0 / 0.5);
|
||||
--card-foreground: oklch(0.1 0.015 280);
|
||||
--card-hover: oklch(1 0 0 / 0.75);
|
||||
--card-hover: oklch(1 0 0 / 0.65);
|
||||
|
||||
/* Popover avec backdrop blur très fort */
|
||||
--popover: oklch(1 0 0 / 0.95);
|
||||
@@ -82,9 +82,9 @@
|
||||
--foreground: oklch(0.97 0.005 280);
|
||||
|
||||
/* Cards avec effet glassmorphism sombre très prononcé */
|
||||
--card: oklch(0.15 0.015 280 / 0.6);
|
||||
--card: oklch(0.15 0.015 280 / 0.5);
|
||||
--card-foreground: oklch(0.97 0.005 280);
|
||||
--card-hover: oklch(0.18 0.015 280 / 0.75);
|
||||
--card-hover: oklch(0.18 0.015 280 / 0.65);
|
||||
|
||||
/* Popover avec backdrop blur très fort */
|
||||
--popover: oklch(0.15 0.015 280 / 0.95);
|
||||
@@ -459,18 +459,19 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Fintech card styles avec design moderne et élégant */
|
||||
/* Fintech card styles avec effet glassmorphism prononcé */
|
||||
.fintech-card {
|
||||
background: var(--card);
|
||||
backdrop-filter: blur(40px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
||||
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--card) 70%, transparent);
|
||||
backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
|
||||
border: none;
|
||||
border-radius: calc(var(--radius) + 0.25rem);
|
||||
box-shadow:
|
||||
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);
|
||||
0 2px 8px 0 color-mix(in srgb, var(--foreground) 6%, transparent),
|
||||
0 8px 24px -4px color-mix(in srgb, var(--primary) 8%, transparent),
|
||||
0 16px 48px -8px color-mix(in srgb, var(--foreground) 3%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent),
|
||||
inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 2%, transparent);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -494,13 +495,47 @@
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* Texture plus prononcée pour les cards de statistiques */
|
||||
.stat-card-textured::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--foreground) 3%, transparent) 1px, transparent 0),
|
||||
radial-gradient(circle at 11px 11px, color-mix(in srgb, var(--foreground) 1.5%, transparent) 1px, transparent 0);
|
||||
background-size: 16px 16px, 24px 24px;
|
||||
opacity: 0.2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dark .stat-card-textured::before {
|
||||
background-image:
|
||||
radial-gradient(circle at 1px 1px, color-mix(in srgb, white 4%, transparent) 1px, transparent 0),
|
||||
radial-gradient(circle at 11px 11px, color-mix(in srgb, white 2%, transparent) 1px, transparent 0);
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
/* Effet glass renforcé pour les cards de contenu */
|
||||
.fintech-card.card-hover {
|
||||
background: color-mix(in srgb, var(--card) 60%, transparent);
|
||||
backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
|
||||
-webkit-backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
|
||||
}
|
||||
|
||||
.dark .fintech-card.card-hover {
|
||||
background: color-mix(in srgb, var(--card) 55%, transparent);
|
||||
backdrop-filter: blur(80px) saturate(220%) brightness(0.92);
|
||||
-webkit-backdrop-filter: blur(80px) saturate(220%) brightness(0.92);
|
||||
}
|
||||
|
||||
.dark .fintech-card {
|
||||
border-color: color-mix(in srgb, var(--border) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--card) 65%, transparent);
|
||||
backdrop-filter: blur(60px) saturate(200%) brightness(0.95);
|
||||
-webkit-backdrop-filter: blur(60px) saturate(200%) brightness(0.95);
|
||||
border: none;
|
||||
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);
|
||||
0 2px 8px 0 color-mix(in srgb, var(--foreground) 12%, transparent),
|
||||
0 8px 24px -4px color-mix(in srgb, var(--primary) 12%, transparent),
|
||||
0 16px 48px -8px color-mix(in srgb, black 50%, transparent),
|
||||
inset 0 1px 0 0 color-mix(in srgb, white 12%, transparent),
|
||||
inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
}
|
||||
|
||||
.fintech-card::after {
|
||||
@@ -509,19 +544,29 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
color-mix(in srgb, white 50%, transparent) 50%,
|
||||
color-mix(in srgb, white 60%, transparent) 20%,
|
||||
color-mix(in srgb, white 80%, transparent) 50%,
|
||||
color-mix(in srgb, white 60%, transparent) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0.6;
|
||||
opacity: 0.7;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dark .fintech-card::after {
|
||||
opacity: 0.2;
|
||||
opacity: 0.25;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
color-mix(in srgb, white 30%, transparent) 20%,
|
||||
color-mix(in srgb, white 40%, transparent) 50%,
|
||||
color-mix(in srgb, white 30%, transparent) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Gradient backgrounds for stat cards - design moderne et subtil */
|
||||
|
||||
Reference in New Issue
Block a user