123 lines
5.8 KiB
CSS
123 lines
5.8 KiB
CSS
|
/* ═══════════════════════════════════════════════════════════════════════════
|
||
|
|
FIX URGENT : Override des classes focus: problématiques
|
||
|
|
Ce fichier est chargé en dernier pour garantir la priorité maximale
|
||
|
|
Utilise des sélecteurs avec spécificité maximale pour override Tailwind
|
||
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
/* FIX: Désactiver complètement les styles focus: sur TOUS les inputs */
|
||
|
|
/* Utilisation de sélecteurs avec spécificité maximale pour override Tailwind */
|
||
|
|
html body input:focus:not(:focus-visible),
|
||
|
|
html body textarea:focus:not(:focus-visible),
|
||
|
|
html body select:focus:not(:focus-visible),
|
||
|
|
html body input[type="email"]:focus:not(:focus-visible),
|
||
|
|
html body input[type="password"]:focus:not(:focus-visible),
|
||
|
|
html body input[type="text"]:focus:not(:focus-visible),
|
||
|
|
html body form input:focus:not(:focus-visible),
|
||
|
|
html body form textarea:focus:not(:focus-visible),
|
||
|
|
html body form select:focus:not(:focus-visible) {
|
||
|
|
outline: none !important;
|
||
|
|
border-color: rgb(59, 69, 84) !important; /* border-kodo-steel */
|
||
|
|
border-top-color: rgb(59, 69, 84) !important;
|
||
|
|
border-right-color: rgb(59, 69, 84) !important;
|
||
|
|
border-bottom-color: rgb(59, 69, 84) !important;
|
||
|
|
border-left-color: rgb(59, 69, 84) !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
--tw-ring-width: 0px !important;
|
||
|
|
--tw-ring-offset-width: 0px !important;
|
||
|
|
--tw-ring-color: transparent !important;
|
||
|
|
--tw-ring-offset-color: transparent !important;
|
||
|
|
/* Supprimer tous les effets de ring */
|
||
|
|
--tw-ring-opacity: 0 !important;
|
||
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FIX: Activer les styles focus-visible: seulement au clavier */
|
||
|
|
html body input:focus-visible,
|
||
|
|
html body textarea:focus-visible,
|
||
|
|
html body select:focus-visible,
|
||
|
|
html body input[type="email"]:focus-visible,
|
||
|
|
html body input[type="password"]:focus-visible,
|
||
|
|
html body input[type="text"]:focus-visible,
|
||
|
|
html body form input:focus-visible,
|
||
|
|
html body form textarea:focus-visible,
|
||
|
|
html body form select:focus-visible {
|
||
|
|
outline: none !important;
|
||
|
|
border-color: rgba(102, 252, 241, 0.6) !important; /* border-kodo-cyan/60 */
|
||
|
|
border-top-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
border-right-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
border-bottom-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
border-left-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
--tw-ring-width: 0px !important;
|
||
|
|
--tw-ring-offset-width: 0px !important;
|
||
|
|
--tw-ring-color: transparent !important;
|
||
|
|
--tw-ring-offset-color: transparent !important;
|
||
|
|
--tw-ring-opacity: 0 !important;
|
||
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FIX: Override spécifique pour toutes les classes Tailwind focus:* */
|
||
|
|
/* Ce sélecteur cible tous les inputs avec des classes contenant "focus" */
|
||
|
|
html body input[class*="focus"]:focus:not(:focus-visible),
|
||
|
|
html body textarea[class*="focus"]:focus:not(:focus-visible),
|
||
|
|
html body select[class*="focus"]:focus:not(:focus-visible),
|
||
|
|
html body form input[class*="focus"]:focus:not(:focus-visible),
|
||
|
|
html body form textarea[class*="focus"]:focus:not(:focus-visible),
|
||
|
|
html body form select[class*="focus"]:focus:not(:focus-visible) {
|
||
|
|
border-color: rgb(59, 69, 84) !important; /* border-kodo-steel */
|
||
|
|
border-top-color: rgb(59, 69, 84) !important;
|
||
|
|
border-right-color: rgb(59, 69, 84) !important;
|
||
|
|
border-bottom-color: rgb(59, 69, 84) !important;
|
||
|
|
border-left-color: rgb(59, 69, 84) !important;
|
||
|
|
--tw-ring-width: 0px !important;
|
||
|
|
--tw-ring-offset-width: 0px !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
--tw-ring-opacity: 0 !important;
|
||
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
html body input[class*="focus"]:focus-visible,
|
||
|
|
html body textarea[class*="focus"]:focus-visible,
|
||
|
|
html body select[class*="focus"]:focus-visible,
|
||
|
|
html body form input[class*="focus"]:focus-visible,
|
||
|
|
html body form textarea[class*="focus"]:focus-visible,
|
||
|
|
html body form select[class*="focus"]:focus-visible {
|
||
|
|
border-color: rgba(102, 252, 241, 0.6) !important; /* border-kodo-cyan/60 */
|
||
|
|
border-top-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
border-right-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
border-bottom-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
border-left-color: rgba(102, 252, 241, 0.6) !important;
|
||
|
|
--tw-ring-width: 0px !important;
|
||
|
|
--tw-ring-offset-width: 0px !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
--tw-ring-opacity: 0 !important;
|
||
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
||
|
|
FIX: Largeur des inputs dans les formulaires
|
||
|
|
Garantit que les inputs prennent toute la largeur disponible
|
||
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
|
|
||
|
|
/* Force la largeur à 100% pour tous les conteneurs d'inputs dans les formulaires */
|
||
|
|
html body form > div,
|
||
|
|
html body form div[class*="w-full"] {
|
||
|
|
width: 100% !important;
|
||
|
|
min-width: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Force la largeur à 100% pour les inputs eux-mêmes */
|
||
|
|
html body form input[type="email"],
|
||
|
|
html body form input[type="password"],
|
||
|
|
html body form input[type="text"] {
|
||
|
|
width: 100% !important;
|
||
|
|
min-width: 0 !important;
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Force la largeur à 100% pour les divs relatifs qui contiennent les inputs */
|
||
|
|
html body form div.relative {
|
||
|
|
width: 100% !important;
|
||
|
|
min-width: 0 !important;
|
||
|
|
}
|