/* Knowledge base language switcher — markup in partials/kb-lang-switcher.html. * * Loaded by the three templates that render the knowledge base without the site * header: the article hero, the hub, and the hub sections. Scoped entirely under * .kb-lang so it cannot reach the header's own switcher. * * Built on
/ so it opens with no JavaScript, which the hub * pages need — they do not load main.js. */ .kb-lang { position: relative; display: inline-block; font-size: 14px; line-height: 1; } /* The default triangle marker is removed in both engines: WebKit needs the pseudo-element rule, everything else honours list-style. The caret in the markup replaces it, so it can sit after the label instead of before it. */ .kb-lang > summary { list-style: none; cursor: pointer; } .kb-lang > summary::-webkit-details-marker { display: none; } .kb-lang > summary::marker { content: ""; } .kb-lang__current { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; /* Both hero variants sit on the violet band. The one light surface, the section pages' back-nav bar, overrides this below. The globe and caret are currentColor, so they follow. */ color: #fff; background: rgba(255, 255, 255, 0.12); transition: background 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .kb-lang__current:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.55); } .kb-lang__current:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .kb-lang__globe, .kb-lang__caret { flex: 0 0 auto; } .kb-lang__caret { transition: transform 0.15s ease; } .kb-lang[open] .kb-lang__caret { transform: rotate(180deg); } .kb-lang__menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 10px; box-shadow: 0 12px 28px rgba(17, 17, 17, 0.16); } .kb-lang__menu li { margin: 0; padding: 0; list-style: none; } .kb-lang__item { display: block; padding: 8px 12px; border-radius: 6px; color: #1c1c1c; text-decoration: none; white-space: nowrap; } a.kb-lang__item:hover, a.kb-lang__item:focus-visible { background: #f2f0fb; color: #1c1c1c; text-decoration: none; } .kb-lang__item--active { font-weight: 600; color: #6d5ae0; cursor: default; } @media (max-width: 600px) { /* The menu is anchored right on phones: on the article and section pages the switcher sits at the right edge, so a left-anchored menu would open off screen. */ .kb-lang__menu { left: auto; right: 0; } /* Globe only. The back link opposite it can be long ("Back to Performance & Recharge") and so can the language name ("Português"); at 375px the two collide. The name is still announced — the summary carries an aria-label — and it is repeated as the first, marked entry once the menu opens. */ .kb-lang__name { display: none; } .kb-lang__current { gap: 4px; padding: 9px 10px; } } /* Embed mode — the app's docs drawer. The drawer's language follows the app, so a reader switching only the docs would end up with instructions describing a differently-localized UI than the one in front of them. kb-embed-links.html sets this class in , before first paint, so nothing flashes. */ :root.embed-mode .kb-lang { display: none !important; } /* --------------------------------------------------------------------------- * Per-surface placement. The switcher is one component but lands in three * different bars, each with its own colour and layout. * ------------------------------------------------------------------------- */ /* Article hero: the top row, opposite the "Back to ..." link. Only one of the two back links renders visibly (CSS picks by ?from=), so space-between puts the visible one left and the switcher hard right. */ .hd-kbhero__topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* Hub hero: its own row at the top of the violet band, right-aligned with the content column. Nothing else lives up there, and putting it under the search bar instead read as part of the search. */ .kh-hero__topbar { display: flex; justify-content: flex-end; margin-bottom: 20px; } /* The row takes over the space the hero's top padding was providing, so the centred title stays where it was. A browser without :has() keeps the full padding and the hero is ~40px taller — no breakage, just looser. */ .kh-hero:has(.kh-hero__topbar) { padding-top: 20px; } @media (max-width: 768px) { .kh-hero:has(.kh-hero__topbar) { padding-top: 16px; } .kh-hero__topbar { margin-bottom: 14px; } } /* Section pages: the back-link bar. Light background there, so the pale translucent border of the hero variant would be invisible. */ .khs-nav .khs-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .khs-nav .kb-lang__current { border-color: rgba(17, 17, 17, 0.15); background: #fff; color: #1c1c1c; } .khs-nav .kb-lang__current:hover { background: #f7f6fd; border-color: rgba(17, 17, 17, 0.3); }