refactor: remove transition effects from various components for improved performance and consistency

This commit is contained in:
Julien Froidefond
2025-12-20 11:02:11 +01:00
parent 4445a38380
commit dff2a9061f
16 changed files with 44 additions and 101 deletions

View File

@@ -273,13 +273,9 @@
scroll-behavior: smooth;
}
/* Amélioration des transitions globales avec easing fintech */
/* Transitions globales désactivées */
* {
transition-property:
color, background-color, border-color, text-decoration-color, fill,
stroke, opacity, box-shadow, transform, filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
transition: none !important;
}
/* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
@@ -358,42 +354,13 @@
font-weight: 700;
}
/* Card hover effect avec élévation */
/* Card hover effect désactivé */
.card-hover {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.card-hover::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 30%, transparent) 0%,
color-mix(in srgb, var(--chart-2) 20%, transparent) 100%
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
}
.card-hover:hover {
transform: translateY(-4px) scale(1.01);
box-shadow:
0 20px 40px -12px color-mix(in srgb, var(--primary) 20%, transparent),
0 8px 16px -8px color-mix(in srgb, var(--foreground) 10%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 30%, transparent);
}
.card-hover:hover::before {
opacity: 1;
display: none;
}
/* Background fintech moderne avec dégradés animés et formes abstraites */
@@ -446,8 +413,6 @@
background-size: 200% 200%;
pointer-events: none;
opacity: 1;
transition: opacity 0.5s ease;
animation: gradient-shift 25s ease infinite;
}
.dark .page-background {
@@ -505,7 +470,6 @@
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);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
@@ -526,15 +490,6 @@
opacity: 0.5;
}
.fintech-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow:
0 24px 48px -12px color-mix(in srgb, var(--primary) 25%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--foreground) 8%, transparent),
inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent);
border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
/* Gradient backgrounds for stat cards très vibrants */
.stat-card-gradient-1 {
background: linear-gradient(
@@ -560,7 +515,6 @@
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-2 {
@@ -587,7 +541,6 @@
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-3 {
@@ -614,7 +567,6 @@
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
.stat-card-gradient-4 {
@@ -641,6 +593,5 @@
transparent 70%
);
opacity: 0.3;
animation: gradient-shift 8s ease infinite;
}
}