/* * Indicateur de focus : les champs de formulaire et le lien de retour en haut. * * WHY cette feuille alors qu Avada porte le reglage : le theme expose bien * « form_focus_border_color », renseigne a la couleur de la charte, mais ne * genere aucune regle qui l applique au focus. Les seules regles produites * visent le survol. Le reglage est donc renseigne et sans effet, ce qui se * relit comme une configuration correcte. * * WHY la chaine de selecteurs complete : le theme pose « outline: 0 » sur les * champs par « .fusion-form-form-wrapper .fusion-form-field .fusion-form-input », * soit trois classes. Une regle plus courte perd la cascade en silence, et l on * croit la feuille sans effet alors qu elle est simplement moins specifique. * * WHY la priorite explicite : un indicateur de focus qui disparait a la * prochaine montee du theme est exactement le defaut qu on corrige ici. Il ne * s agit pas d imposer un style mais de garantir qu un chemin au clavier reste * praticable, ce qui ne doit pas dependre de l ordre de chargement. * * WHY :focus-visible et non :focus : un champ recoit le focus au clic comme au * clavier. Poser l anneau sur :focus le ferait apparaitre a chaque clic de * souris, ou personne ne l attend. La regle :focus qui suit ne sert que les * navigateurs qui ignorent :focus-visible, et la regle de neutralisation la * retire la ou il est reconnu. * * WHY l encre et non le bleu pour le lien de retour en haut : ce lien est une * pastille bleue. Un anneau bleu sur fond bleu se mesure a 1,5 pour 1, sous le * minimum de 3 pour 1. L encre de la charte donne 5,5 pour 1 contre la pastille * et 17,9 pour 1 contre la page, donc l anneau se voit sur les deux fonds qu il * traverse. Le bleu, lui, donne 3,3 pour 1 contre un champ blanc, ce qui passe. * * WHY les proprietes detaillees et non la forme abregee : une abreviation qui * contient une variable ne s etend pas a l analyse, ses composantes restent * vides, et la declaration se resout tard, apres que d autres regles ont deja * pose leur largeur. Mesure : la forme abregee laissait un anneau d un pixel * la ou trois etaient demandes. Les proprietes detaillees se comparent une a * une et l emportent chacune pour son compte. * * WHY tout est branche sur les variables du theme : une valeur figee ici * cesserait de suivre la charte au premier changement de palette, et le mode * sombre redefinit ces memes variables. */ /* -- Champs de formulaire -------------------------------------------------- */ .fusion-form-form-wrapper .fusion-form-field .fusion-form-input:focus-visible, .fusion-form-form-wrapper .fusion-form-field input:focus-visible, .fusion-form-form-wrapper .fusion-form-field textarea:focus-visible, .fusion-form-form-wrapper .fusion-form-field select:focus-visible, .fusion-form-field .fusion-form-input:focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--awb-color5) !important; outline-offset: 2px !important; border-color: var(--awb-color5); } /* Repli pour les navigateurs qui ne connaissent pas :focus-visible. */ .fusion-form-form-wrapper .fusion-form-field .fusion-form-input:focus, .fusion-form-form-wrapper .fusion-form-field input:focus, .fusion-form-form-wrapper .fusion-form-field textarea:focus, .fusion-form-form-wrapper .fusion-form-field select:focus, .fusion-form-field .fusion-form-input:focus { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--awb-color5) !important; outline-offset: 2px !important; border-color: var(--awb-color5); } .fusion-form-form-wrapper .fusion-form-field .fusion-form-input:focus:not(:focus-visible), .fusion-form-form-wrapper .fusion-form-field input:focus:not(:focus-visible), .fusion-form-form-wrapper .fusion-form-field textarea:focus:not(:focus-visible), .fusion-form-form-wrapper .fusion-form-field select:focus:not(:focus-visible), .fusion-form-field .fusion-form-input:focus:not(:focus-visible) { outline-style: none !important; } /* -- Lien de retour en haut de page ---------------------------------------- */ a.fusion-top-top-link:focus-visible, .fusion-top-top-link:focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--awb-color7) !important; outline-offset: 3px !important; } a.fusion-top-top-link:focus, .fusion-top-top-link:focus { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--awb-color7) !important; outline-offset: 3px !important; } a.fusion-top-top-link:focus:not(:focus-visible), .fusion-top-top-link:focus:not(:focus-visible) { outline-style: none !important; } /* -- Bouton d ouverture du menu, en dessous de la rupture ------------------- */ /* * WHY une regle pour ce bouton en particulier : mesure au clavier sur le rendu * servi, a 360 et 768 pixels, dans les deux modes et sur les deux sites, il est * le seul arret de tabulation visible qui ne recoit aucun indicateur. C est le * premier controle qu une personne au clavier rencontre sur telephone, et sans * lui elle ne sait pas ou elle se trouve. * * WHY l encre claire de la charte plutot que le bleu : le bandeau est sombre * dans les deux modes, mesure, et l encre y donne environ seize pour un contre * quatre pour le bleu. Les deux passent le seuil, l ecart de lisibilite non. * * WHY des proprietes detaillees : une abreviation qui contient une variable ne * s etend pas a l analyse, ses composantes restent vides, et la declaration se * resout apres celles que le theme a deja posees. * * WHY un decalage negatif : le bouton touche le bord du bandeau, et un anneau * pose a l exterieur y serait rogne. */ .fusion-header .awb-menu__m-toggle:focus-visible, .fusion-header-wrapper .awb-menu__m-toggle:focus-visible, .awb-menu .awb-menu__m-toggle:focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--awb-color7) !important; outline-offset: -3px !important; } .fusion-header .awb-menu__m-toggle:focus, .fusion-header-wrapper .awb-menu__m-toggle:focus, .awb-menu .awb-menu__m-toggle:focus { outline-width: 3px !important; outline-style: solid !important; outline-color: var(--awb-color7) !important; outline-offset: -3px !important; } .fusion-header .awb-menu__m-toggle:focus:not(:focus-visible), .fusion-header-wrapper .awb-menu__m-toggle:focus:not(:focus-visible), .awb-menu .awb-menu__m-toggle:focus:not(:focus-visible) { outline-style: none !important; }