From be0cbcf42db21fa4d9f9888e71cc5a4770bd4e3f Mon Sep 17 00:00:00 2001 From: Patrick Schurig Date: Tue, 13 Oct 2026 08:19:53 +0200 Subject: [PATCH] =?UTF-8?q?fix(i18n):=20drapeaux=20dans=20le=20s=C3=A9lect?= =?UTF-8?q?eur=20de=20langue=20de=20la=20doc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Material rend son sélecteur en liste déroulante, chaque entrée portant un `hreflang` : on l'habille donc en CSS pure, sans toucher au gabarit du thème ni surcharger de template. Vérifié sur le HTML produit : les trois entrées ont bien `hreflang="fr|de|en"` et la classe `md-select__link`. Mêmes choix que sur le site vitrine, et pour les mêmes raisons : SVG inline en data-URI plutôt qu'emoji (🇫🇷 ne s'affiche pas sous Windows), et le NOM de la langue conservé à côté du drapeau (un drapeau désigne un pays, pas une langue — et l'anglais sert ici les deux marchés plus la communauté). Co-Authored-By: Claude Opus 5 (1M context) --- docs/stylesheets/extra.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index ac8d429..e786a99 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -42,3 +42,27 @@ .badge.perm-configure {color:#fb923c;background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.3)} .badge.perm-admin {color:#ef4444;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)} .badge.perm-unknown {color:#94a3b8;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.3)} + +/* ══════════════════════════════════════════════════════════════════════════ + SÉLECTEUR DE LANGUE — drapeaux (2026-10-13) + + Material rend son sélecteur en liste déroulante, chaque entrée portant un + `hreflang` : on l'habille en CSS, sans toucher au gabarit du thème. + + Drapeaux en SVG inline (data-URI) et NON en emoji : 🇫🇷 ne s'affiche pas sous + Windows, où Chrome rend « FR » dans un carré faute de police de drapeaux. + Le NOM de la langue reste affiché à côté — un drapeau désigne un pays, pas + une langue, et l'anglais ici sert les deux marchés plus la communauté. + ══════════════════════════════════════════════════════════════════════════ */ +.md-select__link[hreflang]{display:flex;align-items:center;gap:.6rem} +.md-select__link[hreflang]::before{content:"";width:1.25em;height:.9em;flex:none; + background-size:cover;background-position:center;border-radius:1px; + box-shadow:0 0 0 1px rgba(255,255,255,.22)} +.md-select__link[hreflang="fr"]::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")} +.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. */ +.md-header__option{margin-right:.2rem}