Sig select: caution tooltip, FLIP/FYI stat block, keyword display
- TarotCard.cautions JSONField + cautions_json property; migrations 0027–0029 seed The Schizo (number=1) with 4 rival-interaction cautions (Roman-numeral card refs: I. The Pervert / II. The Occultist, etc.) - Sig-select overlay: FLIP (stat-block toggle) + FYI (caution tooltip) buttons; nav PRV/NXT portaled outside tooltip at bottom corners (z-70); caution tooltip covers stat block (inset:0, z-60, Gaussian blur); tooltip click dismisses; FLIP/FYI fully dead while btn-disabled; nav wraps circularly (4/4 → 1/4, 1/4 → 4/4) - SCSS: btn-disabled specificity fix (!important); btn-nav-left/right classes; sig-caution-* layout; stat-face keyword lists - Jasmine suite expanded: stat block + FLIP (5 specs), caution tooltip (16 specs) including wrap-around and disabled-button behaviour - IT tests: TarotCardCautionsTest (5), SigSelectRenderingTest (8) - Role-card SVG icons added to static/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -880,6 +880,7 @@ html:has(.sig-backdrop) {
|
||||
.sig-stage {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
@@ -955,9 +956,139 @@ html:has(.sig-backdrop) {
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
|
||||
.sig-flip-btn {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
right: -1rem;
|
||||
margin: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.sig-caution-btn {
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
right: -1rem;
|
||||
margin: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
// Caution tooltip — covers the entire stat block (inset: 0), z-index above buttons.
|
||||
.sig-caution-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
background-color: rgba(var(--tooltip-bg), 0.6);
|
||||
backdrop-filter: blur(6px);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--priYl), 0.35);
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sig-caution-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.sig-caution-title {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.093);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: rgba(var(--priYl), 1);
|
||||
}
|
||||
|
||||
.sig-caution-type {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.058);
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sig-caution-shoptalk {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
opacity: 0.55;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sig-caution-effect {
|
||||
flex: 1;
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.075);
|
||||
margin: 0;
|
||||
line-height: 1.55;
|
||||
|
||||
.card-ref {
|
||||
color: rgba(var(--terUser), 1);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.sig-caution-index {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
// Nav arrows portaled out of tooltip — sit at bottom corners above tooltip (z-70)
|
||||
.sig-caution-prev,
|
||||
.sig-caution-next {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
margin: 0;
|
||||
z-index: 70;
|
||||
}
|
||||
.sig-caution-prev { left: -1rem; }
|
||||
.sig-caution-next { right: -1rem; }
|
||||
|
||||
.stat-face {
|
||||
display: none;
|
||||
padding: calc(var(--sig-card-w, 120px) * 0.37) calc(var(--sig-card-w, 120px) * 0.1) calc(var(--sig-card-w, 120px) * 0.08);
|
||||
|
||||
&--upright { display: block; }
|
||||
}
|
||||
|
||||
&.is-reversed {
|
||||
.stat-face--upright { display: none; }
|
||||
.stat-face--reversed { display: block; }
|
||||
}
|
||||
|
||||
.stat-face-label {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.09em;
|
||||
opacity: 0.4;
|
||||
margin: 0 0 calc(var(--sig-card-w, 120px) * 0.07);
|
||||
}
|
||||
|
||||
.stat-keywords {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.083);
|
||||
padding: calc(var(--sig-card-w, 120px) * 0.042) 0;
|
||||
opacity: 0.85;
|
||||
border-bottom: 0.05rem solid rgba(var(--terUser), 0.12);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sig-stage--frozen .sig-stat-block { display: block; }
|
||||
&.sig-caution-open .sig-stat-block {
|
||||
.sig-caution-tooltip { display: flex; }
|
||||
.sig-caution-prev, .sig-caution-next { display: inline-flex; }
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Mini card grid ───────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user