/* 文档站语言切换下拉 ────────────────────────────────────────────────────────────────────── 文档站自带的 .language-link 是「单击直切」按钮，却带了 ⌄ 箭头，读起来像是可展开的菜单。这里把它变成真正的下拉。菜单元素挂在下、用 fixed 定位，不进 header 内部 —— header 由 Vue 接管重绘（实测改它的 HTML 会被 hydration 覆盖），挂进去会被抹掉。配色取文档站自己的 CSS 变量，保证跟随其明暗与主色。 ────────────────────────────────────────────────────────────────────── */ .hn-lang-menu { position: fixed; z-index: 9999; min-width: 168px; padding: 6px; border: 1px solid var(--border, #dce6e3); border-radius: 10px; background: var(--page, #fff); box-shadow: 0 12px 32px rgba(19, 47, 41, .13), 0 2px 6px rgba(19, 47, 41, .06); font-family: var(--font, system-ui, sans-serif); font-size: 13px; opacity: 0; transform: translateY(-4px); transition: opacity .13s ease, transform .13s ease; pointer-events: none; } .hn-lang-menu[data-open="1"] { opacity: 1; transform: none; pointer-events: auto; } .hn-lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--body, #16312b); text-decoration: none; white-space: nowrap; } .hn-lang-menu a:hover, .hn-lang-menu a:focus-visible { background: var(--navigation, #f8faf9); outline: none; } .hn-lang-menu a:focus-visible { box-shadow: inset 0 0 0 2px var(--focus, #077f6c); } .hn-lang-menu a[aria-current="true"] { color: var(--primary, #077f6c); font-weight: 600; background: var(--selected, #e1f4ef); } /* 勾选标记占位，保证选中与未选中的文字左边界对齐 */ .hn-lang-menu i { flex: 0 0 14px; font-style: normal; line-height: 1; text-align: center; } /* 展开时给触发按钮一点按下反馈，并把箭头转过来 */ .language-link[aria-expanded="true"] { color: var(--primary, #077f6c); } .language-link[aria-expanded="true"] svg:last-of-type { transform: rotate(180deg); } .language-link svg:last-of-type { transition: transform .15s ease; } @media (prefers-reduced-motion: reduce) { .hn-lang-menu, .language-link svg:last-of-type { transition: none; } }