140 lines
2.6 KiB
CSS
140 lines
2.6 KiB
CSS
/* Styles personnalisés pour l'application */
|
|
|
|
/* Focus visible amélioré pour l'accessibilité */
|
|
*:focus {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Amélioration du contraste pour les textes */
|
|
.text-gray-600 {
|
|
color: #4b5563;
|
|
}
|
|
|
|
.text-gray-700 {
|
|
color: #374151;
|
|
}
|
|
|
|
/* Transitions fluides */
|
|
.transition-colors {
|
|
transition-property: color, background-color, border-color;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
/* Skip link pour l'accessibilité */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 6px;
|
|
background: #000;
|
|
color: #fff;
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 6px;
|
|
}
|
|
|
|
/* Améliorations pour les formulaires */
|
|
input:invalid,
|
|
select:invalid,
|
|
textarea:invalid {
|
|
border-color: #ef4444;
|
|
box-shadow: 0 0 0 1px #ef4444;
|
|
}
|
|
|
|
input:valid,
|
|
select:valid,
|
|
textarea:valid {
|
|
border-color: #10b981;
|
|
}
|
|
|
|
/* Amélioration des messages d'erreur */
|
|
.error-message {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.error-message::before {
|
|
content: "⚠";
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* Styles pour les boutons avec meilleur contraste */
|
|
.btn-primary {
|
|
background-color: #2563eb;
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
border: 2px solid #2563eb;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #1d4ed8;
|
|
border-color: #1d4ed8;
|
|
}
|
|
|
|
.btn-primary:focus {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #f9fafb;
|
|
color: #374151;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
border: 2px solid #d1d5db;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #f3f4f6;
|
|
border-color: #9ca3af;
|
|
}
|
|
|
|
/* Tables responsive */
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.table-responsive table {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Animation pour les messages flash */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.flash-message {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
/* Améliorations pour mobile */
|
|
@media (max-width: 640px) {
|
|
.mobile-menu-button {
|
|
display: block;
|
|
}
|
|
|
|
.desktop-menu {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.bg-gray-100 { background-color: #ffffff; }
|
|
.text-gray-600 { color: #000000; }
|
|
.border-gray-300 { border-color: #000000; }
|
|
} |