23da4ba4c7
Primary #304998 (bleu Malio), base #FBFAFA (gris), accent #ED8521 (orange), secondary #A5ACD0 (lavande). Focus ring updated to match. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
356 lines
6.6 KiB
CSS
356 lines
6.6 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 */
|
|
|
|
/* #FBFAFA — gris clair */
|
|
--color-base-100: oklch(98% 0.003 0);
|
|
--color-base-200: oklch(94% 0.01 262);
|
|
--color-base-300: oklch(90% 0.02 262);
|
|
--color-base-content: oklch(20% 0.03 262);
|
|
/* #304998 — bleu Malio */
|
|
--color-primary: oklch(37% 0.15 262);
|
|
--color-primary-content: oklch(98% 0.005 262);
|
|
/* #A5ACD0 — lavande */
|
|
--color-secondary: oklch(75% 0.055 270);
|
|
--color-secondary-content: oklch(20% 0.03 270);
|
|
/* #ED8521 — orange */
|
|
--color-accent: oklch(71% 0.17 58);
|
|
--color-accent-content: oklch(98% 0.005 58);
|
|
/* neutral dérivé du bleu Malio */
|
|
--color-neutral: oklch(37% 0.08 262);
|
|
--color-neutral-content: oklch(98% 0.005 262);
|
|
--color-info: oklch(55% 0.12 262);
|
|
--color-info-content: oklch(98% 0.005 262);
|
|
--color-success: oklch(65% 0.2 145);
|
|
--color-success-content: oklch(98% 0.005 145);
|
|
--color-warning: oklch(78% 0.15 70);
|
|
--color-warning-content: oklch(20% 0.05 70);
|
|
--color-error: oklch(60% 0.25 25);
|
|
--color-error-content: oklch(98% 0.005 25);
|
|
|
|
/* 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 #304998;
|
|
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);
|
|
}
|
|
|
|
@layer components {
|
|
.form-control .label {
|
|
@apply mb-2;
|
|
padding-bottom: 0;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.form-control .label + * {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
label + input,
|
|
label + select,
|
|
label + textarea,
|
|
label + .input,
|
|
label + .select,
|
|
label + .textarea {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
}
|