veza/apps/web/src/styles/fix-input-focus.css
senke 5dedc2ce4e fix: Corriger URL Swagger et finaliser implémentation DeveloperPage
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
2026-01-18 13:55:28 +01:00

122 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;
}