diff --git a/README.md b/README.md index f4260ab..d4b0c83 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,21 @@ python3 scripts/gen_device_reference.py --src .plugins-src --docs docs \ --lang fr --locales fr,de,en --check ``` +### Le sélecteur de langue + +Material affiche son icône `translate` — l'idéogramme 文 collé à un A. Elle dit +« traduire », pas « vous êtes en français », et à la taille du bandeau on y voit un +symbole asiatique plutôt qu'une langue. Depuis le 2026-10-15, `stylesheets/extra.css` +la masque et affiche à la place **le drapeau de la langue courante plus son code**, +comme sur etm-powersync.fr. La langue courante est aussi mise en évidence dans la +liste déroulante, où les trois lignes étaient jusque-là identiques. + +Le drapeau se choisit sur `html[lang]`, que `mkdocs-static-i18n` pose déjà par locale. +**Aucun gabarit du thème n'est surchargé** — rien à reprendre à chaque mise à jour de +Material. Les drapeaux sont des SVG en `data:` (les emojis drapeaux ne se rendent pas +sous Windows) et le `aria-label` du bouton est inchangé : c'est lui qui porte le sens +pour les lecteurs d'écran, le code « FR » du `::after` restant décoratif. + ⚠️ `mkdocs build --strict` **échoue sur un simple avertissement**. C'est pour cela que `navigation.instant` est retiré de `theme.features` : il est incompatible avec le lien contextuel du sélecteur de langue de `mkdocs-static-i18n`. Le commentaire est dans diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 5798bf7..fed057c 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -108,7 +108,62 @@ .md-select__link[hreflang="de"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23DD0000'/%3E%3Crect width='5' height='1' fill='%23000000'/%3E%3C/svg%3E")} .md-select__link[hreflang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23FFFFFF' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")} -/* le bouton du sélecteur : l'icône « traduction » de Material ne dit pas dans - quelle langue on est. On le laisse tel quel (c'est le gabarit du thème), mais - on lui donne de l'air pour qu'il ne colle pas à la recherche. */ +/* ────────────────────────────────────────────────────────────────────────── + LE BOUTON DU SÉLECTEUR — drapeau de la langue courante (2026-10-15) + + Material affiche son icône `translate` : un idéogramme 文 collé à un A. Elle + dit « traduire », pas « vous êtes en français », et à la taille du bandeau on + ne la lit pas — on y voit un symbole asiatique. Remplacée par le drapeau de la + langue courante plus son code, exactement comme sur etm-powersync.fr. + + Le drapeau se choisit sur `html[lang]`, que mkdocs-static-i18n pose déjà par + locale (`fr` à la racine, `de` sous /de/, `en` sous /en/) : aucun gabarit du + thème n'est surchargé, rien à maintenir à chaque mise à jour de Material. + + Le `aria-label` du bouton (« Sélectionner la langue ») est inchangé et porte + seul le sens pour les lecteurs d'écran : il l'emporte sur le contenu, donc le + « FR » décoratif du ::after n'est pas annoncé deux fois. + ────────────────────────────────────────────────────────────────────────── */ .md-header__option{margin-right:.2rem} + +.md-header__option .md-select>.md-header__button{ + display:flex;align-items:center;gap:.34rem; + width:auto;padding:.28rem .42rem;margin:.1rem; + border-radius:.15rem;opacity:1; + transition:background-color .2s; +} +.md-header__option .md-select>.md-header__button:hover{background:rgba(255,255,255,.1)} +/* l'icône `translate` du thème : on la masque, on ne la supprime pas */ +.md-header__option .md-select>.md-header__button>svg{display:none} + +.md-header__option .md-select>.md-header__button::before{ + content:"";flex:none;width:1.3rem;height:.92rem;border-radius:2px; + background-size:cover;background-position:center; + /* liseré : sans lui, la bande blanche du drapeau français se perd dans le + bandeau clair, et le noir du drapeau allemand dans le bandeau sombre */ + box-shadow:0 0 0 1px rgba(255,255,255,.45); +} +.md-header__option .md-select>.md-header__button::after{ + font-family:var(--md-code-font-family,monospace); + font-size:.62rem;font-weight:700;letter-spacing:.08em;line-height:1; +} + +html[lang="fr"] .md-header__option .md-select>.md-header__button::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23ED2939'/%3E%3Crect width='2' height='2' fill='%23FFFFFF'/%3E%3Crect width='1' height='2' fill='%23002395'/%3E%3C/svg%3E")} +html[lang="de"] .md-header__option .md-select>.md-header__button::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23FFCE00'/%3E%3Crect width='5' height='2' fill='%23DD0000'/%3E%3Crect width='5' height='1' fill='%23000000'/%3E%3C/svg%3E")} +html[lang="en"] .md-header__option .md-select>.md-header__button::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23FFFFFF' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23FFFFFF' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")} +html[lang="fr"] .md-header__option .md-select>.md-header__button::after{content:"FR"} +html[lang="de"] .md-header__option .md-select>.md-header__button::after{content:"DE"} +html[lang="en"] .md-header__option .md-select>.md-header__button::after{content:"EN"} + +/* dans la liste déroulante, la langue courante se distingue des deux autres : + sinon les trois lignes sont identiques et on ne sait pas d'où l'on part */ +html[lang="fr"] .md-select__link[hreflang="fr"], +html[lang="de"] .md-select__link[hreflang="de"], +html[lang="en"] .md-select__link[hreflang="en"]{font-weight:700;color:var(--md-accent-fg-color)} +/* les deux langues non courantes : drapeau légèrement en retrait, il reprend + ses couleurs au survol — même convention que sur le site */ +.md-select__link[hreflang]::before{opacity:.65;transition:opacity .2s} +.md-select__link[hreflang]:hover::before, +html[lang="fr"] .md-select__link[hreflang="fr"]::before, +html[lang="de"] .md-select__link[hreflang="de"]::before, +html[lang="en"] .md-select__link[hreflang="en"]::before{opacity:1}