48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
|
# Fix CSS Direct Appliqué
|
||
|
|
|
||
|
|
## ✅ Solution Immédiate
|
||
|
|
|
||
|
|
Un fix CSS direct a été ajouté dans `apps/web/src/styles/global-effects.css` qui **override directement** les classes problématiques du design-system.
|
||
|
|
|
||
|
|
### Ce que fait ce fix
|
||
|
|
|
||
|
|
1. **Désactive complètement `focus:` sur les inputs**
|
||
|
|
- `focus:border-kodo-cyan` → désactivé
|
||
|
|
- `focus:ring-1 focus:ring-kodo-cyan` → désactivé
|
||
|
|
- Border reste `border-kodo-steel` par défaut
|
||
|
|
|
||
|
|
2. **Active `focus-visible:` seulement au clavier**
|
||
|
|
- `focus-visible:border-kodo-cyan/60` → activé (60% opacité)
|
||
|
|
- Visible seulement lors de la navigation Tab
|
||
|
|
- Invisible au clic souris
|
||
|
|
|
||
|
|
3. **Supprime tous les rings**
|
||
|
|
- `--tw-ring-width: 0` sur tous les inputs
|
||
|
|
- Pas de double indication
|
||
|
|
|
||
|
|
### Avantages
|
||
|
|
|
||
|
|
- ✅ **Immédiat** : Pas besoin de rebuild le design-system
|
||
|
|
- ✅ **Définitif** : Override les classes même si le design-system n'est pas rebuildé
|
||
|
|
- ✅ **Pas de régression** : N'affecte que les inputs, pas les autres éléments
|
||
|
|
|
||
|
|
### Vérification
|
||
|
|
|
||
|
|
Après rechargement de la page (Ctrl+Shift+R) :
|
||
|
|
|
||
|
|
1. **Au chargement** : Aucun input n'a de contour cyan ✅
|
||
|
|
2. **Au clic souris** : Pas de contour cyan ✅
|
||
|
|
3. **Navigation Tab** : Contour cyan discret visible (60% opacité) ✅
|
||
|
|
4. **Après clic ailleurs** : Le contour disparaît ✅
|
||
|
|
|
||
|
|
### Si le problème persiste
|
||
|
|
|
||
|
|
1. Vider complètement le cache du navigateur
|
||
|
|
2. Vérifier dans DevTools que les styles CSS sont bien appliqués
|
||
|
|
3. Vérifier que `global-effects.css` est bien chargé
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Date**: 2025-01-27
|
||
|
|
**Statut**: ✅ Fix CSS direct appliqué - Solution immédiate et définitive
|