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; }
|
||||
}
|
||||
|
||||
// ── 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;
|
||||
}
|
||||
}
|
||||
|
||||
// ── 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