style: 重新设计语言切换按钮 — SVG 地球图标 + CN/EN 双标签
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- emoji 🌐 替换为精致 SVG 线条地球图标
- 按钮改为圆角胶囊样式,透明底 + 细边框
- 显示 CN/EN 双标签(当前语言高亮,另一个淡显)
- hover 时整体变蓝色主题色
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user