From 6a46e3109a7d09df0731f9f95909cea06ad54163 Mon Sep 17 00:00:00 2001 From: wangjia <809946525@qq.com> Date: Tue, 7 Jul 2026 17:22:03 +0800 Subject: [PATCH] =?UTF-8?q?style(web):=20=E8=AF=AD=E8=A8=80=E4=B8=8B?= =?UTF-8?q?=E6=8B=89=E6=A1=86=E5=9C=86=E8=A7=92=E7=9F=A9=E5=BD=A2=20+=20?= =?UTF-8?q?=E6=9F=94=E5=92=8C=E5=8D=8A=E9=80=8F=E6=98=8E=E8=BE=B9=E6=A1=86?= =?UTF-8?q?(=E5=8E=9F=E7=99=BD=E8=BE=B9=E5=A4=AA=E7=94=9F=E7=A1=AC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 官网 .langsel 与用户中心 LangSeg select:border 由纯 --border 改 color-mix 半透明、 圆角 full→md 圆角矩形、加微投影;hover 柔化。纯视觉,不影响逻辑。 Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u --- web/usercenter/components/shared.tsx | 8 +++++--- web/website/src/styles/site-extra.css | 15 ++++++++++----- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/web/usercenter/components/shared.tsx b/web/usercenter/components/shared.tsx index 70ac24b..73b6e71 100644 --- a/web/usercenter/components/shared.tsx +++ b/web/usercenter/components/shared.tsx @@ -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]) => ( diff --git a/web/website/src/styles/site-extra.css b/web/website/src/styles/site-extra.css index ca0be79..64ad991 100644 --- a/web/website/src/styles/site-extra.css +++ b/web/website/src/styles/site-extra.css @@ -40,19 +40,24 @@ } .langseg a.on { background: var(--accent); color: var(--fg-on-accent); } -/* 6 语用原生下拉(横排段控会挤);沿用 langseg 的药丸视觉。 */ +/* 6 语用原生下拉(横排段控会挤)。圆角矩形 + 柔和边框(原纯 --border 太生硬)。 */ .langsel { - border: 1px solid var(--border); + border: 1px solid color-mix(in oklab, var(--border), transparent 55%); cursor: pointer; - border-radius: var(--radius-full); - padding: 5px 9px; + border-radius: var(--radius-md); + padding: 5px 10px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--fg2); background: var(--bg-subtle); + box-shadow: 0 1px 2px rgba(45, 30, 20, 0.05); + transition: border-color 140ms ease, box-shadow 140ms ease; +} +.langsel:hover { + border-color: color-mix(in oklab, var(--accent), transparent 40%); + box-shadow: 0 1px 4px rgba(45, 30, 20, 0.08); } -.langsel:hover { border-color: var(--accent); } /* 视觉隐藏(无障碍用,当前未强依赖) */ .visually-hidden {