diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index d331469..6c2a1f3 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -615,11 +615,16 @@ html:has(.sig-backdrop) { } } -// ─── My Sign picker — FLIP btn (polarity toggle) ────────────────────────────── -// Bottom-left corner of the stage card, mirroring game_kit.html's -// `.fan-flip-btn` placement convention (per [[sprint-my-sign-picker-may18h]]). -// SPIN (orientation 180° rotation) stays in `.sig-stat-block` — the FLIP btn -// here toggles polarity (data-polarity attr + persisted significator_reversed). +// ─── My Sign picker — sizing + state-gated reveal ──────────────────────────── +// Bigger preview card than the room (no shared overlay width budget) — clamp +// scales w. viewport for portrait/landscape both. FLIP btn + stat block hidden +// at rest; revealed by `.sig-stage--frozen` (added by JS on click, cleared by +// NVM). SPIN (orientation 180°) stays in `.sig-stat-block`; FLIP toggles +// polarity (data-polarity attr on .my-sign-page). +.my-sign-page { + --sig-card-w: clamp(140px, 36vw, 220px); +} + .my-sign-flip-btn { position: absolute; z-index: 25; @@ -629,6 +634,13 @@ html:has(.sig-backdrop) { // flex-start, anchored to the stage's left padding). left: calc(1.5rem + 0.4rem); margin: 0; + display: none; +} + +// FLIP btn appears only when the stage is frozen (post-click). Hover-only +// previews don't reveal the polarity toggle — the user hasn't committed yet. +.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { + display: inline-flex; } // ─── Mini card grid ─────────────────────────────────────────────────────────── @@ -818,7 +830,12 @@ html:has(.sig-backdrop) { // Levity (Leavened): --secUser bg / --priUser text — inverted, lighter feel. // Both mini-cards and the stage preview card follow the same rule. -.sig-overlay[data-polarity="levity"] { +// `.my-sign-page[data-polarity]` parallels `.sig-overlay[data-polarity]` — +// same polarity-themed colour rules apply to the standalone Game Sign picker. +// data-polarity lives on the page wrapper (not on .my-sign-stage) so descendant +// `.sig-card` (in the grid, sibling to the stage) inherits the rules. +.sig-overlay[data-polarity="levity"], +.my-sign-page[data-polarity="levity"] { // Mini card: inverted palette. game-kit sets explicit colours on .fan-card-name // and .fan-card-corner that out-specifc the parent color, so re-target them here. .sig-card { @@ -871,7 +888,8 @@ html:has(.sig-backdrop) { .sig-info-effect .card-ref { color: rgba(var(--quiUser), 1); } // Cursor colours live in .sig-cursor-float[data-role] rules (portal elements) } -.sig-overlay[data-polarity="gravity"] { +.sig-overlay[data-polarity="gravity"], +.my-sign-page[data-polarity="gravity"] { // Stat block: invert priUser/secUser so gravity gets the same stark contrast as leavened cards .sig-stat-block { background: rgba(var(--secUser), 0.75); diff --git a/src/templates/apps/billboard/my_sign.html b/src/templates/apps/billboard/my_sign.html index 17248bb..f866e05 100644 --- a/src/templates/apps/billboard/my_sign.html +++ b/src/templates/apps/billboard/my_sign.html @@ -14,17 +14,16 @@
+ data-current-reversed="{{ current_significator_reversed|yesno:'true,false' }}" + data-polarity="{% if current_significator_reversed %}levity{% else %}gravity{% endif %}"> - {# data-polarity drives both the populator's qualifier lookup #} - {# (levity_qualifier vs gravity_qualifier) and any polarity-themed #} - {# styling that mirrors the room sig-select's .sig-overlay rules. #} - {# FLIP toggles between levity + gravity. Initial value reflects #} - {# the persisted `significator_reversed` flag — False=levity, #} - {# True=gravity (the binary "one or the other" polarity choice). #} -
-
+ {# Stage frame always visible; stage card + stat block + FLIP btn #} + {# gated by hover (preview) + click (lock). `.sig-stage--frozen` is #} + {# added on click + cleared by NVM. data-polarity moved to the page #} + {# wrapper so descendant .sig-card / .sig-stage-card both get the #} + {# polarity-themed CSS rules. #} +
+