fix(revenue): keep the poster modal download button circular

The blue download anchor rendered square while the adjacent yellow close
button stayed round. Both carry .but.cir, so the asymmetry had to come
from a rule matching only one of them.

credits.css:334 scopes .uc-content .but.jb-blue to a flat #3b82f6 skin
with border-radius:4px — that rule exists to stop the same class
flattening the top-nav publish chip and the site-wide login/submit/badge
buttons, so it stays. But the poster modal is emitted inside .uc-content,
and at (0,3,0) loading after main.css it out-ranks .poster-share
.but.cir's (0,2,0) on both counts, overriding the 5em pill with 4px on
the blue button only. jb-yellow is not in that selector, which is exactly
why its neighbour survived.

Restate the pill at matching weight, scoped to this modal. Padding comes
along because .uc-content .but.jb-blue also sets 0.45em 1em, which would
otherwise re-inflate the 36px circle. The 36x36 box and drop shadow stay
with .poster-share .but.cir in main.css.

Add a contract test for the radius restatement and the sizing it relies
on; verified it fails when the selector is renamed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed 2026-10-21 20:17:50 +08:00
1 parent 0cfd4c898b
commit ef15416ef7
2 files changed
+14

No files matched your search

@@ -200,6 +200,14 @@
.modal[data-aksrt-affiliate-poster-modal].in {
display: flex;
}
/* 海报弹窗的圆形按钮必须保持圆形。上面的 .uc-content .but.jb-blue 是
(0,3,0) 且后加载,会盖掉 main.css 的 .poster-share .but.cir(0,2,0),
把蓝色下载钮从圆角 5em 压成 4px 方角;黄色关闭钮因为不在该规则内
才幸免。这里按 (0,3,0) 同权重回位参考主题的 pill 形态。 */
.modal[data-aksrt-affiliate-poster-modal] .but.cir {
padding: 0;
border-radius: 5em;
}
.balance-charge-form .zib-widget {
clear: both;
@@ -152,6 +152,12 @@ test('poster modal shell is hidden at rest so it cannot block the whole page', (
// 静止态弹窗铺满全屏,叠加 .fade 的 opacity:0 形成隐形遮罩、拦截整页点击。
assert.match(css, /\.modal\[data-aksrt-affiliate-poster-modal\]\s*\{\s*display:\s*none;/)
assert.match(css, /\.modal\[data-aksrt-affiliate-poster-modal\]\.in\s*\{\s*display:\s*flex;/)
// 圆形按钮必须回位成 pill。credits.css 的 .uc-content .but.jb-blue 是 (0,3,0)
// 且后加载,会盖掉 main.css 的 .poster-share .but.cir,把蓝色下载钮压成方角。
assert.match(css, /\.modal\[data-aksrt-affiliate-poster-modal\] \.but\.cir\s*\{[^}]*border-radius:\s*5em/s)
// 36×36 与投影仍由 main.css 的 .poster-share .but.cir 提供。
const mainCss = read('assets', 'css', 'main.css')
assert.match(mainCss, /\.poster-share \.but\.cir\s*\{[^}]*width:\s*36px/s)
})
test('invite-code input verifies live against the public REST endpoint', () => {