Skip to content

fix(ui): define the orphan .mono class and restore the .nb nowrap span #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
argszero merged 1 commit into from
Sep 11, 2026
Merged

fix(ui): define the orphan .mono class and restore the .nb nowrap span #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions ui/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,19 @@ h1, h2, h3 { text-wrap: balance; }
的元素一直由下方 `.table .num` 规则兜住，故此前未被发现。 */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 标识符等宽（共享管理「Key」列）。
该格自 UI 原型 commit d70e032 起就写着 class="mono"，但**任何提交里都不存在
.mono 规则**，因此一直是无样式孤儿类 —— 实测 computed font-family 为
-apple-system、font-variant-numeric 为 normal，同排 .num 兄弟却是等宽 + 表格数字。
这里补上定义；对齐保持左对齐（原型对该格直接复用 .num 会连带右对齐，
本次不改变既有排版，只修复失效的等宽）。 */
.mono { font-family: var(--mono); }

/* 短语不换行（原型 .nb，用于登录页品牌标题里的 "token plan"）。
原型 markup 是 <span class="nb">token plan</span>，迁移时 span 与规则一并丢失：
实测同视口下原型 token/plan 同行（149==149），实现被拆成两行（149/203）。 */
.nb { white-space: nowrap; }

/* 小标签 / 图标按钮（原型 .eyebrow / .icon-btn，PR2 起供登录页与侧边栏使用） */
.eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
Expand Down
12 changes: 6 additions & 6 deletions ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AITokenPool</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234ecdc4'/%3E%3Cstop offset='1' stop-color='%232a9d8f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Ctext x='32' y='43' font-family='-apple-system,Segoe UI,Arial,sans-serif' font-size='30' font-weight='800' text-anchor='middle' fill='%23062021'%3EAT%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="css/style.css?v=20260911-5">
<link rel="stylesheet" href="css/style.css?v=20260911-6">
</head>
<body>

Expand All @@ -20,7 +20,7 @@
<section class="login-brand">
<div class="lb-top"><span class="logo-tile">AT</span> AITokenPool</div>
<p class="eyebrow" data-i18n="login.brand.eyebrow">AI TOKEN 共享池 · 多模型网关</p>
<h1 class="lb-headline" data-i18n="login.brand.headline">不要让 token plan 白白浪费。</h1>
<h1 class="lb-headline" data-i18n="login.brand.headline">不要让 <span class="nb">token plan</span> 白白浪费。</h1>
<p class="lb-sub" data-i18n="login.brand.sub">把闲置额度共享出去赚点数，需要时也能用别人的。三种 API 类型各一个统一端点，每类端点都能调用全部厂商模型。</p>
<ul class="lb-points">
<li data-i18n="login.brand.p1">多协议网关互转</li>
Expand Down Expand Up @@ -842,9 +842,9 @@ <h3 id="chat-title">使用模型</h3>
</div>
</div>

<script src="js/api.js?v=20260911-5"></script>
<script src="js/data.js?v=20260911-5"></script>
<script src="js/i18n.js?v=20260911-5"></script>
<script src="js/app.js?v=20260911-5"></script>
<script src="js/api.js?v=20260911-6"></script>
<script src="js/data.js?v=20260911-6"></script>
<script src="js/i18n.js?v=20260911-6"></script>
<script src="js/app.js?v=20260911-6"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions ui/js/i18n.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"login.tab.login": "登录",
"login.tab.register": "注册",
"login.brand.eyebrow": "AI TOKEN 共享池 · 多模型网关",
"login.brand.headline": "不要让 token plan 白白浪费。",
"login.brand.headline": "不要让 <span class=\"nb\">token plan</span> 白白浪费。",
"login.brand.sub": "把闲置额度共享出去赚点数，需要时也能用别人的。三种 API 类型各一个统一端点，每类端点都能调用全部厂商模型。",
"login.brand.p1": "多协议网关互转",
"login.brand.p2": "输入 / 缓存 / 输出 三档透明计费",
Expand Down Expand Up @@ -833,7 +833,7 @@
"login.tab.login": "Sign in",
"login.tab.register": "Register",
"login.brand.eyebrow": "AI TOKEN SHARING POOL · MULTI-MODEL GATEWAY",
"login.brand.headline": "Don't let your token plan go to waste.",
"login.brand.headline": "Don't let your <span class=\"nb\">token plan</span> go to waste.",
"login.brand.sub": "Share idle quota to earn points, and use others' when you need them. One unified endpoint per API type — every endpoint can call every vendor's models.",
"login.brand.p1": "Multi-protocol gateway translation",
"login.brand.p2": "Transparent billing on input / cached / output",
Expand Down
Loading