From d10ef94161a9fac3edf37dc1021c365d44700518 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Mon, 25 May 2026 19:52:51 -0400 Subject: [PATCH] =?UTF-8?q?A.7.5-polish-6-fix=20applet=20FLIP-btn=20hover-?= =?UTF-8?q?reveal=20=E2=80=94=20drop=20leftover=20`=5Fbillboard.scss`=20ru?= =?UTF-8?q?le=20whose=20ID-context=20cascaded=20above=20the=20hover-reveal?= =?UTF-8?q?.=20User-reported=202026-05-25=20PM=20after=20polish-6=20(b3081?= =?UTF-8?q?15):=20"still=20not=20seeing=20it=20on=20My=20Sign=20applet,=20?= =?UTF-8?q?but=20looks=20good=20everywhere=20else".=20DOM=20inspection=20c?= =?UTF-8?q?onfirmed=20the=20btn=20was=20present=20+=20opacity:0=20at=20res?= =?UTF-8?q?t=20as=20expected,=20but=20real-hover=20never=20flipped=20it=20?= =?UTF-8?q?to=20opacity:1.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: polish-5 (1e2041e) refactored the applet FLIP-btn position rule to `@include flip-btn-base` but LEFT IT NESTED inside the `#id_applet_my_sign { ... }` outer block of `_billboard.scss`. So the rule resolved to `#id_applet_my_sign .my-sign-applet-card .my-sign-applet-flip-btn` (specificity 0,1,2,0 — 1 ID + 2 classes) — and OUT-CASCADED the hover-reveal rule `.my-sign-applet-card:hover .my-sign-applet-flip-btn` (specificity 0,0,3,0 — 3 classes incl. pseudo, no ID) on the ID axis. Result: opacity:0 from the leftover rule stuck even on real `:hover`, the polish-6 unified positioning rule in `_card-deck.scss` was a redundant 0,0,1,0 also-ran, and the user couldn't see the btn. Fix: drop the leftover position + mid-flip rules from `_billboard.scss` entirely. The polish-5/6 unified rules in `_card-deck.scss` (`.my-sign-flip-btn, .my-sign-applet-flip-btn, .sea-stage-flip-btn { @include flip-btn-base; z-index: 25; bottom: 0.6rem; left: 0.6rem }` + `.sig-stage-card[data-flipping] .my-sign-flip-btn, .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn, .sea-stage-card[data-flipping] .sea-stage-flip-btn, ...` + hover-reveal trio) now cover the applet too at clean 0,0,1,0 / 0,0,3,0 / 0,0,2,1 specificities — hover-reveal wins by class count, no ID-context contamination. Lesson: when refactoring CSS to a shared mixin/placeholder, also LIFT THE SELECTOR OUT of any ID-scoped outer block. Leaving the rule inside `#id_*` inflates its specificity in ways that can shadow other shared rules (esp. hover/state rules that lack an ID). The leftover comment block in `_billboard.scss` now documents the lift-out for future-me / future-DRY-passes. Tests: 1314/1314 IT+UT total green (74s; pure SCSS rule deletion, no test surface). Visual verify pending user confirmation — the cascade is now clean (hover-reveal wins; transition: opacity 0.3s applies; btn fades in on real card hover + fades out on un-hover). Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_billboard.scss | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss index 6416f73..b777f63 100644 --- a/src/static_src/scss/_billboard.scss +++ b/src/static_src/scss/_billboard.scss @@ -581,23 +581,17 @@ body.page-billposts { } } - // Sprint A.6 — FLIP btn for non-polarized image-equipped decks in the - // applet. Nested INSIDE .my-sign-applet-card.--image (which has - // position: relative) so absolute positioning anchors to the card. - // Polish-5: shares `@include flip-btn-base` + `%flip-btn-mid-flip` w. - // the other 2 surfaces (my_sign main + game-kit fan) via `_card-deck.scss`. - .my-sign-applet-card .my-sign-applet-flip-btn { - @include flip-btn-base; - z-index: 10; - bottom: 0.6rem; - left: 0.6rem; - } - // Btn is nested INSIDE the card, so the [data-flipping] hook is a direct - // ancestor — no `:has()` needed (unlike the my_sign + fan surfaces where - // the btn is a sibling of the flipping card under a common parent). - .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn { - @extend %flip-btn-mid-flip; - } + // Polish-6-fix — FLIP-btn position + mid-flip-hide rules DROPPED here. + // Both lived inside `#id_applet_my_sign { ... }` so they resolved to + // `#id_applet_my_sign .my-sign-applet-card .my-sign-applet-flip-btn` + // (specificity 0,1,2,0 — ID + 2 classes) which OUT-CASCADED the + // hover-reveal rule `.my-sign-applet-card:hover .my-sign-applet-flip-btn` + // (specificity 0,0,3,0 — no ID) on the ID axis. Result: opacity:0 stuck + // even on hover; user-reported "still not seeing it on My Sign applet". + // The unified positioning + mid-flip rules in `_card-deck.scss`'s + // polish-5/6 FLIP-btn block now cover the applet w/o ID-context — the + // applet btn picks them up by class alone, hover-reveal wins as + // intended. // Stat block — mirrors the stage card's footprint (same 5:8 aspect + // height) so the pair reads as a balanced 2-tile composition centred