style(web): 语言下拉框圆角矩形 + 柔和半透明边框(原白边太生硬)

官网 .langsel 与用户中心 LangSeg select:border 由纯 --border 改 color-mix 半透明、
圆角 full→md 圆角矩形、加微投影;hover 柔化。纯视觉,不影响逻辑。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u
This commit is contained in:
wangjia
2026-07-07 17:22:03 +08:00
parent c723bdd53e
commit 6a46e3109a
2 changed files with 15 additions and 8 deletions
+5 -3
View File
@@ -34,15 +34,17 @@ export function LangSeg({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => v
onChange={(e) => setLang(e.target.value as Lang)}
aria-label="Language"
style={{
border: '1px solid var(--border)',
// 圆角矩形 + 柔和边框(原纯 --border 太生硬)。
border: '1px solid color-mix(in oklab, var(--border), transparent 55%)',
cursor: 'pointer',
borderRadius: 999,
padding: '5px 9px',
borderRadius: 10,
padding: '5px 10px',
fontFamily: 'var(--font-sans)',
fontSize: 12.5,
fontWeight: 700,
background: 'var(--bg-subtle)',
color: 'var(--fg2)',
boxShadow: '0 1px 2px rgba(45, 30, 20, 0.05)',
}}
>
{langs.map(([v, l]) => (