From ef15416ef7a1010537921aa0c2dcbcb9ee99296d Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 21 Oct 2026 20:17:50 +0800 Subject: [PATCH] fix(revenue): keep the poster modal download button circular MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- assets/css/routes/user-center/credits.css | 8 ++++++++ tests/widget-system/referral-qr-contract.test.cjs | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css index f6634d36..05e22565 100644 --- a/assets/css/routes/user-center/credits.css +++ b/assets/css/routes/user-center/credits.css @@ -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; diff --git a/tests/widget-system/referral-qr-contract.test.cjs b/tests/widget-system/referral-qr-contract.test.cjs index f83a4085..977fbef1 100644 --- a/tests/widget-system/referral-qr-contract.test.cjs +++ b/tests/widget-system/referral-qr-contract.test.cjs @@ -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', () => {