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:
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', () => {
|
||||
|
||||
Reference in new issue
Block a user