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
+10 -5
View File
@@ -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 {