style: 重新设计语言切换按钮 — SVG 地球图标 + CN/EN 双标签
All checks were successful
continuous-integration/drone/push Build is passing

- emoji 🌐 替换为精致 SVG 线条地球图标
- 按钮改为圆角胶囊样式,透明底 + 细边框
- 显示 CN/EN 双标签(当前语言高亮,另一个淡显)
- hover 时整体变蓝色主题色
This commit is contained in:
yiqiu
2026-03-18 19:02:02 +08:00
parent f453907ead
commit 2b31442085
3 changed files with 56 additions and 20 deletions

View File

@@ -133,32 +133,62 @@
.lang-switch {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
margin-left: 12px;
border-radius: 6px;
gap: 6px;
padding: 5px 14px;
margin-left: 16px;
border-radius: 20px;
cursor: pointer;
color: rgba(220, 228, 240, 0.85);
font-size: 13px;
color: rgba(203, 213, 225, 0.7);
font-size: 12px;
font-weight: 500;
transition: background 0.15s ease, color 0.15s ease;
letter-spacing: 0.5px;
transition: all 0.25s ease;
user-select: none;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.15);
}
.lang-switch:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.3);
color: #38BDF8;
}
.lang-switch .lang-icon {
font-size: 15px;
line-height: 1;
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.25s ease;
}
.lang-switch:hover .lang-icon {
opacity: 1;
}
.lang-switch .lang-text {
font-weight: 600;
color: rgba(226, 232, 240, 0.95);
transition: color 0.25s ease;
}
.lang-switch:hover .lang-text {
color: #38BDF8;
}
.lang-switch .lang-sep {
color: rgba(148, 163, 184, 0.3);
font-weight: 300;
}
.lang-switch .lang-alt {
color: rgba(148, 163, 184, 0.45);
font-weight: 400;
transition: color 0.25s ease;
}
.lang-switch:hover .lang-alt {
color: rgba(56, 189, 248, 0.6);
}
.breadcrumb {