93c15f7cae
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas - Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement - Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles - Tous les onglets de DeveloperPage sont maintenant implémentés
129 lines
2.6 KiB
CSS
129 lines
2.6 KiB
CSS
/* === PREMIUM UTILITY CLASSES === */
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-glow-pulse {
|
|
animation: glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slide-in-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-rotate-in {
|
|
animation: rotate-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
/* Hover Effects */
|
|
.hover-lift-subtle {
|
|
transition:
|
|
transform 0.2s ease,
|
|
box-shadow 0.2s ease;
|
|
}
|
|
|
|
.hover-lift-subtle:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.hover-glow {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
box-shadow:
|
|
0 0 20px rgba(var(--kodo-cyan), 0.4),
|
|
0 0 40px rgba(var(--kodo-cyan), 0.2);
|
|
}
|
|
|
|
.hover-scale-105 {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.hover-scale-105:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Enhanced Glassmorphism */
|
|
.glass-premium {
|
|
background: rgba(var(--kodo-void), 0.6);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.light .glass-premium {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Gradient Text */
|
|
.text-gradient-premium {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgb(var(--kodo-cyan)),
|
|
rgb(var(--kodo-magenta))
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Smooth Scroll */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
/* FIX: Scrollbar styles moved to global-effects.css to avoid conflicts */
|
|
/* These styles are now defined in global-effects.css with reduced visibility */
|
|
|
|
/* Selection */
|
|
::selection {
|
|
background: rgba(var(--kodo-cyan), 0.3);
|
|
color: rgb(var(--kodo-text-main));
|
|
}
|
|
|
|
/* Page Transitions */
|
|
.page-enter {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
.page-enter-active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition:
|
|
opacity 0.3s ease,
|
|
transform 0.3s ease;
|
|
}
|
|
|
|
/* Focus Styles */
|
|
*:focus-visible {
|
|
outline: 2px solid rgb(var(--kodo-cyan));
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Light Mode Glass Adjustments */
|
|
.light .glass-hud {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.light .glass-hud-active {
|
|
background: rgba(var(--kodo-cyan), 0.08);
|
|
border-color: rgba(var(--kodo-cyan), 0.3);
|
|
}
|