be0cbcf42d
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) <noreply@anthropic.com>
69 lines
5.4 KiB
CSS
69 lines
5.4 KiB
CSS
/* ETM PowerSync — surcharge couleurs de marque sur Material (scheme slate) */
|
|
[data-md-color-scheme="slate"] {
|
|
--md-primary-fg-color: #31a3dd; /* cyan ETM */
|
|
--md-primary-fg-color--light: #5cb8e6;
|
|
--md-primary-fg-color--dark: #2589bd;
|
|
--md-accent-fg-color: #fec113; /* ambre ETM */
|
|
--md-default-bg-color: #0a1f2b;
|
|
--md-default-bg-color--light: #0d2b3b;
|
|
--md-code-bg-color: #06151d;
|
|
--md-footer-bg-color: #0d2b3b;
|
|
}
|
|
[data-md-color-scheme="slate"] .md-typeset a { color: var(--md-primary-fg-color); }
|
|
|
|
/* badges — 3 familles : canal APT · stabilité plugin · maturité fonctionnalité */
|
|
.badge{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.06em;
|
|
text-transform:uppercase;padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap;
|
|
display:inline-block;vertical-align:middle;line-height:1.4}
|
|
|
|
/* canal APT */
|
|
.badge.stable {color:#3fd18a;background:rgba(63,209,138,.12);border:1px solid rgba(63,209,138,.3)}
|
|
.badge.testing {color:#fec113;background:rgba(254,193,19,.1);border:1px solid rgba(254,193,19,.3)}
|
|
.badge.nightly {color:#8fa9b5;background:rgba(143,169,181,.1);border:1px solid rgba(143,169,181,.3)}
|
|
|
|
/* stabilité plugin (meta.json) */
|
|
.badge.consumer {color:#31a3dd;background:rgba(49,163,221,.1);border:1px solid rgba(49,163,221,.3)}
|
|
.badge.community {color:#a78bfa;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.3)}
|
|
.badge.experimental {color:#fb923c;background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.3)}
|
|
|
|
/* origine plugin (PORTING_STATUS.repo ou champ origin:) */
|
|
.badge.origin-nymea {color:#94a3b8;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.3)}
|
|
.badge.origin-etm {color:#4ade80;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.3)}
|
|
.badge.origin-tiers {color:#fb923c;background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.3)}
|
|
|
|
/* maturité fonctionnalités (à la main) */
|
|
.badge.ok {color:#3fd18a;background:rgba(63,209,138,.12);border:1px solid rgba(63,209,138,.3)}
|
|
.badge.part {color:#fec113;background:rgba(254,193,19,.1);border:1px solid rgba(254,193,19,.3)}
|
|
.badge.road {color:#8fa9b5;background:rgba(143,169,181,.1);border:1px solid rgba(143,169,181,.3)}
|
|
|
|
/* permission scope badges (API JsonRPC) */
|
|
.badge.perm-none {color:#3fd18a;background:rgba(63,209,138,.12);border:1px solid rgba(63,209,138,.3)}
|
|
.badge.perm-control {color:#fec113;background:rgba(254,193,19,.1);border:1px solid rgba(254,193,19,.3)}
|
|
.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}
|