/* * Hangar mini-apps — shared i18n switcher styling. * Theme-agnostic: every color/position is a CSS custom property with a neutral * default, so the same file reads on paper-light and neon-dark apps. An app can * override any --i18n-switch-* var in its own stylesheet (e.g. match its accent). */ /* First-paint FOUC: hide until the active locale dict is ready. */ html[data-i18n-pending] body { visibility: hidden; } .i18n-switch { --is-bg: var(--i18n-switch-bg, rgba(0, 0, 0, 0.04)); --is-border: var(--i18n-switch-border, rgba(0, 0, 0, 0.10)); --is-fg: var(--i18n-switch-fg, var(--ink, var(--muted, inherit))); --is-active-bg: var(--i18n-switch-active-bg, rgba(0, 0, 0, 0.12)); --is-active-fg: var(--i18n-switch-active-fg, var(--is-fg)); --is-menu-bg: var(--i18n-switch-menu-bg, #ffffff); --is-menu-border: var(--i18n-switch-menu-border, rgba(0, 0, 0, 0.12)); --is-shadow: var(--i18n-switch-shadow, 0 8px 24px rgba(0, 0, 0, 0.18)); --is-radius: var(--i18n-switch-radius, 10px); --is-font: var(--i18n-switch-font, inherit); position: relative; display: inline-flex; font-family: var(--is-font); font-size: var(--i18n-switch-size, 12px); font-weight: 600; line-height: 1; z-index: var(--i18n-switch-z, 9999); isolation: isolate; } /* Floating (auto-injected) variant: fixed top-right of the viewport. */ .i18n-switch--floating { position: fixed; top: var(--i18n-switch-top, 10px); right: var(--i18n-switch-right, 12px); } .i18n-switch__toggle { appearance: none; border: 1px solid var(--is-border); background: var(--is-bg); color: var(--is-fg); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s, border-color 0.15s; } .i18n-switch__toggle:hover { background: var(--is-active-bg); } .i18n-switch__toggle:focus-visible { outline: 2px solid var(--i18n-switch-focus, currentColor); outline-offset: 2px; } .i18n-globe { font-size: 1.15em; line-height: 1; } .i18n-switch__menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 168px; max-height: min(46vh, 360px); overflow: auto; background: var(--is-menu-bg); border: 1px solid var(--is-menu-border); border-radius: var(--is-radius); box-shadow: var(--is-shadow); padding: 4px; display: none; flex-direction: column; } .i18n-switch.open .i18n-switch__menu { display: flex; } .i18n-switch__opt { appearance: none; border: 0; background: transparent; color: var(--is-fg); font: inherit; font-weight: 500; text-align: start; padding: 8px 10px; border-radius: calc(var(--is-radius) - 4px); cursor: pointer; } .i18n-switch__opt:hover { background: var(--is-bg); } .i18n-switch__opt.is-active { background: var(--is-active-bg); color: var(--is-active-fg); } /* Auto dark: apps without an explicit theme follow the OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .i18n-switch, [data-theme="dark"] .i18n-switch { --is-bg: rgba(255, 255, 255, 0.07); --is-border: rgba(255, 255, 255, 0.16); --is-fg: rgba(255, 255, 255, 0.92); --is-active-bg: rgba(255, 255, 255, 0.16); --is-menu-bg: #1c1c1f; --is-menu-border: rgba(255, 255, 255, 0.14); } } @media (prefers-reduced-motion: reduce) { .i18n-switch__toggle { transition: none; } }