PICK SEA overlay: sea SCSS → _card-deck.scss; Sig card + qualifier display; crossing slot deferred
- sea overlay SCSS moved from _natus.scss to end of _card-deck.scss (correct file for card/overlay primitives) - Significator center slot: sig-stage-card w. .sea-cross context rule (background, border, aspect-ratio, overflow); fan-card-face name + sig-qualifier-above/below at 0.5rem w. word-wrap - _sea_overlay.html: qualifier rendered from user_polarity + arcana (MIDDLE → Leavened/Graven above; MAJOR → below); crossing slot removed from HTML + grid-template-areas (deferred re-add later) - SCSS grid trimmed to 3 rows (crown/past-center-future/root); .sea-pos-crossing class kept for later reuse Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -670,3 +670,204 @@ html:has(.sig-backdrop) {
|
|||||||
#id_room_menu { right: 2.5rem; }
|
#id_room_menu { right: 2.5rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── PICK SEA overlay ─────────────────────────────────────────────────────────
|
||||||
|
// Mirrors .natus-* structure but with columns reversed:
|
||||||
|
// left = transparent (Celtic Cross card positions)
|
||||||
|
// right = rgba(--priUser) opaque (spread select)
|
||||||
|
|
||||||
|
.sea-backdrop {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.sea-open .sea-backdrop { display: block; }
|
||||||
|
|
||||||
|
.sea-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 201;
|
||||||
|
overflow-y: auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.sea-open .sea-overlay { display: flex; }
|
||||||
|
|
||||||
|
.sea-modal-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 60rem;
|
||||||
|
max-height: 90vh;
|
||||||
|
margin: auto;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1.5rem);
|
||||||
|
transition: opacity 0.25s, transform 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.sea-open .sea-modal-wrap {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-modal {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-modal-header {
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
background: rgba(var(--priUser), 1);
|
||||||
|
|
||||||
|
h2 { font-size: 1.4rem; margin: 0; }
|
||||||
|
p { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-modal-body {
|
||||||
|
display: flex;
|
||||||
|
min-height: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Cards column (transparent / left) ────────────────────────────────────────
|
||||||
|
|
||||||
|
.sea-cards-col {
|
||||||
|
flex: 1 1 55%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-cross {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
". crown . "
|
||||||
|
"past center future "
|
||||||
|
". root . ";
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-template-rows: auto auto auto;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-cross-cell { display: flex; align-items: center; justify-content: center; }
|
||||||
|
.sea-pos-crown { grid-area: crown; }
|
||||||
|
.sea-pos-past { grid-area: past; }
|
||||||
|
.sea-pos-center { grid-area: center; }
|
||||||
|
.sea-pos-future { grid-area: future; }
|
||||||
|
.sea-pos-root { grid-area: root; }
|
||||||
|
.sea-pos-crossing { grid-area: crossing; }
|
||||||
|
|
||||||
|
$sea-card-w: 4rem;
|
||||||
|
$sea-card-h: 6.5rem;
|
||||||
|
|
||||||
|
.sea-card-slot {
|
||||||
|
width: $sea-card-w;
|
||||||
|
height: $sea-card-h;
|
||||||
|
border: 0.15rem dashed rgba(var(--terUser), 0.45);
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
color: rgba(var(--terUser), 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-card-slot--crossing {
|
||||||
|
width: $sea-card-h; // rotated — swap w/h
|
||||||
|
height: $sea-card-w;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .sig-stage-card is normally scoped inside .sig-stage — re-apply the card shell
|
||||||
|
// here so it renders correctly outside that context.
|
||||||
|
.sea-cross .sig-stage-card {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: var(--sig-card-w, #{$sea-card-w});
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 5 / 8;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background: rgba(var(--priUser), 1);
|
||||||
|
border: 0.15rem solid rgba(var(--secUser), 0.6);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.25rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.fan-card-face {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.25rem 0.15rem;
|
||||||
|
|
||||||
|
.fan-card-name,
|
||||||
|
.sig-qualifier-above,
|
||||||
|
.sig-qualifier-below { font-size: 0.5rem; font-weight: 600; white-space: normal; word-break: break-word; line-height: 1.3; margin: 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Form column (priUser / opaque / right) ────────────────────────────────────
|
||||||
|
|
||||||
|
.sea-form-col {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 16rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 1.25rem;
|
||||||
|
background: rgba(var(--priUser), 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-form-main {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-select {
|
||||||
|
background: rgba(var(--duoUser), 0.6);
|
||||||
|
border: 1px solid rgba(var(--terUser), 0.3);
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
color: inherit;
|
||||||
|
padding: 0.4rem 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
option { background: rgba(var(--priUser), 1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.sea-form-col > #id_sea_deal {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// NVM button — same positioning as .natus-modal-wrap > .btn-cancel
|
||||||
|
.sea-modal-wrap > .btn-cancel {
|
||||||
|
position: absolute;
|
||||||
|
top: -0.75rem;
|
||||||
|
right: -0.75rem;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: landscape) {
|
||||||
|
html.sea-open body .container .navbar,
|
||||||
|
html.sea-open body #id_footer {
|
||||||
|
z-index: 90;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -934,193 +934,3 @@ body.page-sky {
|
|||||||
z-index: 90;
|
z-index: 90;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── PICK SEA overlay ─────────────────────────────────────────────────────────
|
|
||||||
// Mirrors .natus-* structure but with columns reversed:
|
|
||||||
// left = transparent (Celtic Cross card positions)
|
|
||||||
// right = rgba(--priUser) opaque (spread select)
|
|
||||||
|
|
||||||
.sea-backdrop {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.75);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
z-index: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.sea-open .sea-backdrop { display: block; }
|
|
||||||
|
|
||||||
.sea-overlay {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 201;
|
|
||||||
overflow-y: auto;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.sea-open .sea-overlay { display: flex; }
|
|
||||||
|
|
||||||
.sea-modal-wrap {
|
|
||||||
position: relative;
|
|
||||||
width: 90vw;
|
|
||||||
max-width: 60rem;
|
|
||||||
max-height: 90vh;
|
|
||||||
margin: auto;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(1.5rem);
|
|
||||||
transition: opacity 0.25s, transform 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.sea-open .sea-modal-wrap {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-modal {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-modal-header {
|
|
||||||
padding: 0.75rem 1.25rem;
|
|
||||||
background: rgba(var(--priUser), 1);
|
|
||||||
|
|
||||||
h2 { font-size: 1.4rem; margin: 0; }
|
|
||||||
p { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.8; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-modal-body {
|
|
||||||
display: flex;
|
|
||||||
min-height: 20rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Cards column (transparent / left) ────────────────────────────────────────
|
|
||||||
|
|
||||||
.sea-cards-col {
|
|
||||||
flex: 1 1 55%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-cross {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas:
|
|
||||||
". crown . "
|
|
||||||
"past center future "
|
|
||||||
". root . "
|
|
||||||
". crossing . ";
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
grid-template-rows: auto auto auto auto;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-cross-cell { display: flex; align-items: center; justify-content: center; }
|
|
||||||
.sea-pos-crown { grid-area: crown; }
|
|
||||||
.sea-pos-past { grid-area: past; }
|
|
||||||
.sea-pos-center { grid-area: center; }
|
|
||||||
.sea-pos-future { grid-area: future; }
|
|
||||||
.sea-pos-root { grid-area: root; }
|
|
||||||
.sea-pos-crossing { grid-area: crossing; }
|
|
||||||
|
|
||||||
$sea-card-w: 4rem;
|
|
||||||
$sea-card-h: 6.5rem;
|
|
||||||
|
|
||||||
.sea-card-slot {
|
|
||||||
width: $sea-card-w;
|
|
||||||
height: $sea-card-h;
|
|
||||||
border: 0.15rem dashed rgba(var(--terUser), 0.45);
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.6rem;
|
|
||||||
color: rgba(var(--terUser), 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-card-slot--sig {
|
|
||||||
border-style: solid;
|
|
||||||
border-color: rgba(var(--priUser), 0.9);
|
|
||||||
background: rgba(var(--priUser), 0.15);
|
|
||||||
font-size: 0.65rem;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.25rem;
|
|
||||||
color: rgba(var(--terUser), 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-card-slot--crossing {
|
|
||||||
width: $sea-card-h; // rotated — swap w/h
|
|
||||||
height: $sea-card-w;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-sig-name {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.6rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-align: center;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Form column (priUser / opaque / right) ────────────────────────────────────
|
|
||||||
|
|
||||||
.sea-form-col {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: 16rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1.25rem;
|
|
||||||
background: rgba(var(--priUser), 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-form-main {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-field {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.35rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-select {
|
|
||||||
background: rgba(var(--duoUser), 0.6);
|
|
||||||
border: 1px solid rgba(var(--terUser), 0.3);
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
color: inherit;
|
|
||||||
padding: 0.4rem 0.5rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
option { background: rgba(var(--priUser), 1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.sea-form-col > #id_sea_deal {
|
|
||||||
margin-top: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
// NVM button — same positioning as .natus-modal-wrap > .btn-cancel
|
|
||||||
.sea-modal-wrap > .btn-cancel {
|
|
||||||
position: absolute;
|
|
||||||
top: -0.75rem;
|
|
||||||
right: -0.75rem;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (orientation: landscape) {
|
|
||||||
html.sea-open body .container .navbar,
|
|
||||||
html.sea-open body #id_footer {
|
|
||||||
z-index: 90;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<header class="sea-modal-header">
|
<header class="sea-modal-header">
|
||||||
<h2>PICK <span>SEA</span></h2>
|
<h2>PICK <span>SEA</span></h2>
|
||||||
<p>Choose your spread and draw your Celtic Cross.</p>
|
<p>Draw cards to circumscribe your character's influences and seed the Voronoi map.</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="sea-modal-body">
|
<div class="sea-modal-body">
|
||||||
@@ -29,9 +29,19 @@
|
|||||||
</div>
|
</div>
|
||||||
{# Center — Significator (already placed) #}
|
{# Center — Significator (already placed) #}
|
||||||
<div class="sea-cross-cell sea-pos-center">
|
<div class="sea-cross-cell sea-pos-center">
|
||||||
<div class="sea-card-slot sea-card-slot--sig">
|
<div class="sig-stage-card" style="--sig-card-w: 4rem">
|
||||||
{% if my_tray_sig %}
|
{% if my_tray_sig %}
|
||||||
<span class="sea-sig-name">{{ my_tray_sig.name_title }}</span>
|
<div class="fan-card-face">
|
||||||
|
{% if my_tray_sig.arcana == "MIDDLE" %}
|
||||||
|
<p class="sig-qualifier-above">{% if user_polarity == "levity" %}Leavened{% else %}Graven{% endif %}</p>
|
||||||
|
<p class="fan-card-name">{{ my_tray_sig.name_title }}</p>
|
||||||
|
{% elif my_tray_sig.arcana == "MAJOR" %}
|
||||||
|
<p class="fan-card-name">{{ my_tray_sig.name_title }}</p>
|
||||||
|
<p class="sig-qualifier-below">{% if user_polarity == "levity" %}Leavened{% else %}Graven{% endif %}</p>
|
||||||
|
{% else %}
|
||||||
|
<p class="fan-card-name">{{ my_tray_sig.name_title }}</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -43,10 +53,7 @@
|
|||||||
<div class="sea-cross-cell sea-pos-root">
|
<div class="sea-cross-cell sea-pos-root">
|
||||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||||
</div>
|
</div>
|
||||||
{# Crossing — position 2 (rotated across center) #}
|
{# Crossing — position 2 (rotated) deferred; re-add once layout is finalized #}
|
||||||
<div class="sea-cross-cell sea-pos-crossing">
|
|
||||||
<div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user