tray tooltips: tilt persists while portal is open; PRV|NXT pinned to corners — TDD
- TrayTooltip adds .tt-active to the .tray-role-card / .tray-sig-card cell while its tooltip is open & removes it on _hide. The hover-tilt selectors gain .tt-active alongside :hover, :focus so the card stays tilted while the user is hovering the portal itself rather than the cell. - #id_tooltip_portal: .fyi-prev / .fyi-next pinned to the bottom corners w. 1rem outside the panel (bottom: -1rem; left/right: -1rem) — same anchor the @stat-block-shared mixin uses for fan / sig / sea, restated here since the portal isn't covered by that mixin. - 2 new TrayTooltipSpec specs (.tt-active added on hover, removed on _hide; for both role & sig branches). Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -138,6 +138,22 @@ body.page-gameboard {
|
||||
.btn { margin: 0; }
|
||||
}
|
||||
|
||||
// Tray sig-card tooltip (Phase 2) — PRV / NXT btns pinned to the bottom
|
||||
// corners of the portal, 1rem outside the panel so the btn centres land
|
||||
// exactly on the corners. The shared @stat-block-shared mixin in
|
||||
// _card-deck.scss already does this for fan / sig / sea contexts; the
|
||||
// portal isn't covered by that mixin so we re-state the rules here.
|
||||
.fyi-prev,
|
||||
.fyi-next {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
margin: 0;
|
||||
z-index: 70;
|
||||
}
|
||||
.fyi-prev { left: -1rem; }
|
||||
.fyi-next { right: -1rem; }
|
||||
|
||||
&.active { display: block; }
|
||||
}
|
||||
|
||||
|
||||
@@ -152,9 +152,12 @@ $tray-bevel: 0.3rem; // inner bevel ring; grid must sit inside this
|
||||
}
|
||||
|
||||
// Hover/touch tilts the scrawl 7° counter-clockwise; :focus persists the
|
||||
// tilt after a click (cell receives tabindex="0" from tray.js).
|
||||
// tilt after a click (cell receives tabindex="0" from tray.js); .tt-active
|
||||
// (set by TrayTooltip while the portal is open for this cell) keeps the
|
||||
// tilt while the user is hovering the portal itself rather than the cell.
|
||||
&:hover > img,
|
||||
&:focus > img {
|
||||
&:focus > img,
|
||||
&.tt-active > img {
|
||||
rotate: -7deg;
|
||||
}
|
||||
|
||||
@@ -184,7 +187,8 @@ $tray-bevel: 0.3rem; // inner bevel ring; grid must sit inside this
|
||||
transition: rotate 0.25s ease;
|
||||
}
|
||||
&:hover > .sig-stage-card,
|
||||
&:focus > .sig-stage-card {
|
||||
&:focus > .sig-stage-card,
|
||||
&.tt-active > .sig-stage-card {
|
||||
rotate: 7deg;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user