/* PetaPerl Language Picker — adapted from petamem.com. Original * positions the picker fixed in the top-right corner; we mount it * into the pydata-sphinx-theme navbar slot, so we drop the fixed * positioning and let the navbar flex layout place it. * * `.unavailable` is a PetaPerl extension: locales declared in the * ISO mapping but not yet built render greyscale and inert. */ #language-picker { position: relative; display: inline-block; z-index: 10000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin-left: 0.5rem; } .language-picker-trigger { background: var(--pst-color-surface, rgba(255, 255, 255, 0.95)); border: 1px solid var(--pst-color-border, rgba(0, 0, 0, 0.15)); border-radius: 8px; padding: 4px 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: all 0.2s; } .language-picker-trigger:hover { border-color: var(--pst-color-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .language-picker-trigger .arrow { font-size: 10px; color: var(--pst-color-primary); transition: transform 0.2s; } .language-picker-trigger.open .arrow { transform: rotate(180deg); } .language-picker-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--pst-color-surface, rgba(255, 255, 255, 0.98)); border: 1px solid var(--pst-color-border, rgba(0, 0, 0, 0.15)); border-radius: 8px; padding: 12px; display: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .language-picker-dropdown.open { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-width: 500px; } .language-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; cursor: pointer; border-radius: 6px; transition: all 0.15s; background: transparent; border: 1px solid transparent; } .language-option:hover { background: var(--pst-color-surface-hover, rgba(0, 0, 0, 0.05)); border-color: var(--pst-color-primary); transform: translateY(-2px); } .language-option.active { background: var(--pst-color-primary); color: var(--pst-color-on-primary, #fff); font-weight: 600; } .language-option.active .name { color: inherit; } /* Unavailable locales: greyscale flags, muted text, no-cursor, * hover does nothing. Signals "roadmap, not yet built." */ .language-option.unavailable { cursor: not-allowed; opacity: 0.55; } .language-option.unavailable .flag { filter: grayscale(100%); } .language-option.unavailable:hover { background: transparent; border-color: transparent; transform: none; } .language-option .flag { font-size: 26px; line-height: 1; } .language-option .name { font-size: 11px; color: var(--pst-color-text-muted, #666); text-align: center; white-space: nowrap; } .language-separator { grid-column: 1 / -1; height: 1px; background: linear-gradient( to right, transparent, var(--pst-color-border, rgba(0, 0, 0, 0.15)), transparent ); margin: 4px 0; } /* Dark mode: pydata theme toggles data-theme="dark" on . The * CSS variables above already handle most of it; this bumps the * shadow so the picker stays visible against a dark navbar. */ html[data-theme="dark"] .language-picker-dropdown { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } /* Mobile: smaller grid. */ @media (max-width: 768px) and (orientation: portrait) { .language-picker-dropdown.open { grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 280px; max-height: 80vh; overflow-y: auto; } .language-option .flag { font-size: 22px; } .language-option .name { font-size: 10px; } } @media (max-width: 768px) and (orientation: landscape) { .language-picker-dropdown.open { max-height: 70vh; overflow-y: auto; } } @media (max-width: 400px) { .language-picker-dropdown.open { grid-template-columns: repeat(3, 1fr); max-width: 240px; } }