b085828350
## Nouvelles fonctionnalités visuelles ### Checkboxes personnalisées élégantes - Création d'un fichier CSS dédié avec design moderne - Dégradé bleu et coins arrondis pour un look contemporain - Animations fluides sur hover, focus et sélection - Coche vectorielle animée avec transition élégante ### Expérience utilisateur améliorée - Effet hover avec scale et glow subtil - État indéterminé avec barre orange pour sélection partielle - Mise en surbrillance des lignes sélectionnées - Support optimisé pour les écrans tactiles ### Intégration complète - Remplacement des classes Tailwind par classes personnalisées - Mise à jour cohérente côté serveur et client - Inclusion du CSS dans le template HTML - Maintien de toutes les fonctionnalités existantes ## Améliorations techniques - CSS moderne avec animations CSS3 - Performance optimisée avec transitions fluides - Design responsive et accessible - Code CSS modulaire et maintenable
141 lines
2.8 KiB
CSS
141 lines
2.8 KiB
CSS
/* Checkboxes personnalisées modernes */
|
|
|
|
/* Style de base pour toutes les checkboxes */
|
|
.checkbox-custom {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid #4b5563;
|
|
border-radius: 4px;
|
|
background: #1f2937;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
outline: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* État hover */
|
|
.checkbox-custom:hover {
|
|
border-color: #6b7280;
|
|
background: #374151;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* État focus */
|
|
.checkbox-custom:focus {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* État checked */
|
|
.checkbox-custom:checked {
|
|
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
border-color: #3b82f6;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Icône de validation */
|
|
.checkbox-custom:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 6px;
|
|
border: 2px solid white;
|
|
border-top: none;
|
|
border-right: none;
|
|
transform: rotate(-45deg);
|
|
top: 3px;
|
|
left: 3px;
|
|
animation: checkmark 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Animation de la coche */
|
|
@keyframes checkmark {
|
|
0% {
|
|
transform: rotate(-45deg) scale(0);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: rotate(-45deg) scale(1.2);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: rotate(-45deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* État indéterminé pour "Tout sélectionner" */
|
|
.checkbox-custom:indeterminate {
|
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
|
border-color: #f59e0b;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
|
|
}
|
|
|
|
.checkbox-custom:indeterminate::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 2px;
|
|
background: white;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 1px;
|
|
animation: indeterminate 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Animation de l'état indéterminé */
|
|
@keyframes indeterminate {
|
|
0% {
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
width: 8px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Effet de selection pour les lignes avec checkbox cochée */
|
|
tr:has(.checkbox-custom:checked) {
|
|
background-color: rgba(59, 130, 246, 0.05) !important;
|
|
border-left: 3px solid #3b82f6;
|
|
}
|
|
|
|
/* Animation d'apparition lors du chargement */
|
|
.checkbox-custom {
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Amélioration pour les écrans tactiles */
|
|
@media (hover: none) {
|
|
.checkbox-custom:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.checkbox-custom:active {
|
|
transform: scale(0.95);
|
|
}
|
|
} |