/* ============================================================================ * i18n.css —— 多语言下拉（国旗 + 语言名）+ 自绘语言菜单 + 轻提示 * ---------------------------------------------------------------------------- * 控件由 i18n.js 注入： * .i18n-switch 折叠态按钮 = 国旗 + 语言名（2 个汉字）+ 箭头 * .i18n-menu 展开态菜单，**挂在上**（position:fixed），因为顶栏自己形成 * 层叠上下文，挂在顶栏里的弹层会被 hero 盖住（实测踩过） * .i18n-flag 国旗容器；里面的 SVG 由 i18n.js 内联生成（不用 emoji —— Windows 不渲染） * * 宽度预算（折叠态固定 2 汉字 → 宽度与所选语种无关，顶栏宽度完全可预测）： * 桌面 7 + 18 + 4 + 26 + 4 + 9 + 7 = 75px （双段按钮版实测 88px） * ≤640 6 + 15 + 3 + 24 + 3 + 8 + 6 = 65px （双段按钮版 73px） * ≤360 5 + 0 + 2 + 23 + 2 + 7 + 5 = 44px （隐藏国旗；双段按钮版 59px，该档只剩约 1px 余量） * 三档都**小于**双段按钮版，所以顶栏（尤其 320px 档）只会更宽松，不会更挤。 * * 窄屏的细化值放在 mobile-v5.css / mobile-drawer.css 里，用 .header-right 提权 —— * 因为本文件在它们**之后**加载，同权重会把它们盖掉（这是原方案就踩过的坑）。 * ==========================================================================*/ .i18n-switch { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 7px; flex: none; border: 1px solid var(--c-line-2, #e6d8cf); border-radius: 8px; background: #fff; color: var(--c-ink-soft, #6b5b52); font: inherit; cursor: pointer; transition: border-color 0.15s, color 0.15s, opacity 0.15s; -webkit-tap-highlight-color: transparent; } .i18n-switch:hover, .i18n-switch:focus-visible, .i18n-switch[aria-expanded='true'] { border-color: var(--c-primary, #c93628); color: var(--c-primary, #c93628); outline: none; } /* 翻译中 / 加载中 */ .i18n-switch.is-busy { opacity: 0.6; cursor: progress; } /* 国旗：内联 SVG，18×12（3:2）。白底旗（日/韩/印尼）靠 SVG 自带的淡描边区分 */ .i18n-flag { display: inline-flex; width: 18px; height: 12px; flex: none; border-radius: 2px; overflow: hidden; } .i18n-flag-svg { display: block; width: 100%; height: 100%; } .i18n-cur { font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap; } .i18n-caret { width: 9px; height: 9px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transition: transform 0.15s; } .i18n-switch[aria-expanded='true'] .i18n-caret { transform: rotate(180deg); } /* ============================================================================ * 语言菜单（挂在上，position:fixed） * ---------------------------------------------------------------------------- * 为什么不用原生