wangjia
6a46e3109a
官网 .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
74 lines
2.3 KiB
CSS
74 lines
2.3 KiB
CSS
/* site-extra.css — 仅承载「替换原型内联 style= 属性」的工具类。
|
||
原型 index.html 里有少量 inline style；严格 CSP（style-src 'self'，不含 'unsafe-inline'）
|
||
会拦截内联样式，故逐一搬到这里为等价 class，website.css 保持逐字不动。 */
|
||
|
||
/* hero <h1 style="white-space:pre-line"> */
|
||
.h1-preline { white-space: pre-line; }
|
||
|
||
/* hero orb 速率单位 <span style="font-size:10px;color:var(--fg3)"> */
|
||
.orb-unit { font-size: 10px; color: var(--fg3); }
|
||
|
||
/* orb-node <i ... style="width:18px;height:18px;color:var(--fg3)"> */
|
||
.orb-node-chev { width: 18px; height: 18px; color: var(--fg3); }
|
||
|
||
/* orb-node 中部 <div style="flex:1"> */
|
||
.orb-node-grow { flex: 1; }
|
||
|
||
/* 功能对比标题 <h3 style="font-family:var(--font-display);font-weight:700;font-size:22px;margin:46px 0 0;text-align:center"> */
|
||
.cmp-h {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
margin: 46px 0 0;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 语言切换由原型 <button> 改为路由 <a>（zh=/ , en=/en/）；复刻 .langseg button 视觉。 */
|
||
.langseg a {
|
||
border: none;
|
||
cursor: pointer;
|
||
border-radius: var(--radius-full);
|
||
padding: 5px 11px;
|
||
font-family: var(--font-sans);
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
background: transparent;
|
||
color: var(--fg3);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
text-decoration: none;
|
||
}
|
||
.langseg a.on { background: var(--accent); color: var(--fg-on-accent); }
|
||
|
||
/* 6 语用原生下拉（横排段控会挤）。圆角矩形 + 柔和边框（原纯 --border 太生硬）。 */
|
||
.langsel {
|
||
border: 1px solid color-mix(in oklab, var(--border), transparent 55%);
|
||
cursor: pointer;
|
||
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);
|
||
}
|
||
|
||
/* 视觉隐藏（无障碍用，当前未强依赖） */
|
||
.visually-hidden {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|