36b7ce93ec
- app.vue : Layout principal avec navbar et navigation - ToastContainer.vue : Système de notifications toast - app.css : Styles globaux avec DaisyUI et accessibilité - Configuration des paramètres d'affichage (zoom, densité, contraste) - Navigation responsive avec menu déroulant - Bouton 'Nouveau' avec actions rapides
297 lines
6.1 KiB
CSS
297 lines
6.1 KiB
CSS
@import "tailwindcss";
|
|
@plugin "daisyui";
|
|
@plugin "daisyui/theme" {
|
|
name: "mytheme";
|
|
default: true; /* set as default */
|
|
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
|
|
color-scheme: light; /* color of browser-provided UI */
|
|
|
|
--color-base-100: oklch(98% 0.02 240);
|
|
--color-base-200: oklch(95% 0.03 240);
|
|
--color-base-300: oklch(92% 0.04 240);
|
|
--color-base-content: oklch(20% 0.05 240);
|
|
--color-primary: oklch(55% 0.3 240);
|
|
--color-primary-content: oklch(98% 0.01 240);
|
|
--color-secondary: oklch(70% 0.25 200);
|
|
--color-secondary-content: oklch(98% 0.01 200);
|
|
--color-accent: oklch(65% 0.25 160);
|
|
--color-accent-content: oklch(98% 0.01 160);
|
|
--color-neutral: oklch(50% 0.05 240);
|
|
--color-neutral-content: oklch(98% 0.01 240);
|
|
--color-info: oklch(70% 0.2 220);
|
|
--color-info-content: oklch(98% 0.01 220);
|
|
--color-success: oklch(65% 0.25 140);
|
|
--color-success-content: oklch(98% 0.01 140);
|
|
--color-warning: oklch(80% 0.25 80);
|
|
--color-warning-content: oklch(20% 0.05 80);
|
|
--color-error: oklch(65% 0.3 30);
|
|
--color-error-content: oklch(98% 0.01 30);
|
|
|
|
/* border radius */
|
|
--radius-selector: 1rem;
|
|
--radius-field: 0.25rem;
|
|
--radius-box: 0.5rem;
|
|
|
|
/* base sizes */
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
|
|
/* border size */
|
|
--border: 1px;
|
|
|
|
/* effects */
|
|
--depth: 1;
|
|
--noise: 0;
|
|
}
|
|
|
|
/* Styles pour l'accessibilité et les paramètres d'affichage */
|
|
:root {
|
|
--spacing-xs: 0.5rem;
|
|
--spacing-sm: 0.75rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
}
|
|
|
|
/* Densité compacte */
|
|
.density-compact {
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 0.75rem;
|
|
--spacing-lg: 1rem;
|
|
--spacing-xl: 1.25rem;
|
|
}
|
|
|
|
/* Densité confortable (défaut) */
|
|
.density-comfortable {
|
|
--spacing-xs: 0.5rem;
|
|
--spacing-sm: 0.75rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
}
|
|
|
|
/* Densité espacée */
|
|
.density-spacious {
|
|
--spacing-xs: 0.75rem;
|
|
--spacing-sm: 1rem;
|
|
--spacing-md: 1.5rem;
|
|
--spacing-lg: 2rem;
|
|
--spacing-xl: 3rem;
|
|
}
|
|
|
|
/* Contraste élevé avec DaisyUI */
|
|
.contrast-high .btn {
|
|
@apply border-2;
|
|
}
|
|
|
|
.contrast-high .input {
|
|
@apply border-2;
|
|
}
|
|
|
|
.contrast-high .select {
|
|
@apply border-2;
|
|
}
|
|
|
|
.contrast-high .textarea {
|
|
@apply border-2;
|
|
}
|
|
|
|
.contrast-high .modal-box {
|
|
@apply border-2 border-base-content;
|
|
}
|
|
|
|
/* Amélioration de l'accessibilité */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Focus visible pour l'accessibilité */
|
|
*:focus-visible {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Styles pour les boutons de paramètres */
|
|
.btn-circle {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.btn-circle:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-circle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Animation pour le modal */
|
|
.modal {
|
|
transition: opacity 0.3s ease-in-out;
|
|
font-size: 100% !important; /* Force la taille normale pour le modal */
|
|
transform: none !important; /* Empêche les transformations */
|
|
scale: 1 !important; /* Force l'échelle à 1 */
|
|
}
|
|
|
|
.modal.modal-open {
|
|
animation: modalFadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
/* S'assurer que le contenu du modal garde une taille normale */
|
|
.modal-box {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
scale: 1 !important;
|
|
width: auto !important;
|
|
max-width: 500px !important;
|
|
}
|
|
|
|
.modal .form-control {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .btn {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
padding: 0.5rem 1rem !important;
|
|
height: auto !important;
|
|
min-height: 2.5rem !important;
|
|
}
|
|
|
|
.modal .input {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
height: auto !important;
|
|
min-height: 2.5rem !important;
|
|
}
|
|
|
|
.modal .select {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
height: auto !important;
|
|
min-height: 2.5rem !important;
|
|
}
|
|
|
|
.modal .textarea {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
min-height: 4rem !important;
|
|
}
|
|
|
|
.modal .range {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
height: auto !important;
|
|
min-height: 1.5rem !important;
|
|
}
|
|
|
|
.modal .label {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .label-text {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .label-text-alt {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .checkbox {
|
|
font-size: 100% !important;
|
|
transform: none !important;
|
|
width: 1rem !important;
|
|
height: 1rem !important;
|
|
}
|
|
|
|
.modal .text-xs {
|
|
font-size: 0.75rem !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .text-sm {
|
|
font-size: 0.875rem !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .text-lg {
|
|
font-size: 1.125rem !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .font-bold {
|
|
font-weight: 700 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.modal .font-medium {
|
|
font-weight: 500 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Empêcher les héritages de taille */
|
|
.modal * {
|
|
font-size: inherit !important;
|
|
transform: none !important;
|
|
scale: 1 !important;
|
|
}
|
|
|
|
@keyframes modalFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Styles pour les contrôles de zoom */
|
|
.range {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.range::-webkit-slider-thumb {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.range::-webkit-slider-thumb:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Amélioration de la lisibilité */
|
|
.text-sm {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.text-xs {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Espacement adaptatif */
|
|
.p-1 { padding: var(--spacing-xs); }
|
|
.p-2 { padding: var(--spacing-sm); }
|
|
.p-3 { padding: var(--spacing-md); }
|
|
.p-4 { padding: var(--spacing-lg); }
|
|
.p-5 { padding: var(--spacing-xl); }
|
|
|
|
.m-1 { margin: var(--spacing-xs); }
|
|
.m-2 { margin: var(--spacing-sm); }
|
|
.m-3 { margin: var(--spacing-md); }
|
|
.m-4 { margin: var(--spacing-lg); }
|
|
.m-5 { margin: var(--spacing-xl); }
|
|
|
|
.gap-1 { gap: var(--spacing-xs); }
|
|
.gap-2 { gap: var(--spacing-sm); }
|
|
.gap-3 { gap: var(--spacing-md); }
|
|
.gap-4 { gap: var(--spacing-lg); }
|
|
.gap-5 { gap: var(--spacing-xl); } |