PICK SEA: modal w. Celtic Cross layout + spread select; PICK SKY swaps to PICK SEA after sky save — TDD
- _role_select_context: at SKY_SELECT, compute sky_confirmed (confirmed Character exists for seat) + user_polarity - room.html: PICK SEA btn + _sea_overlay.html when sky_confirmed; PICK SKY + natus overlay otherwise - _sea_overlay.html: transparent cards col (6-position cross, Sig at center) left; priUser form col (spread select) right; NVM cancel; JS open/close via html.sea-open - _natus.scss: .sea-* rules mirror natus layout w. reversed columns; crossing slot rotated; dotted empty slots; sig slot solid; width/max-width replaces min() to avoid rem+vw unit mix - select defaults: "Celtic Cross, Waite-Smith" for levity (PC/NC/SC); "Celtic Cross, Escape Velocity" for gravity (EC/AC/BC) 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
@@ -934,3 +934,193 @@ body.page-sky {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user