71ef3dcb7f
- Replace Unicode glyph text elements with inline SVG <path> icons loaded from icons/zodiac-signs/*.svg files - NatusWheel.preload() fetches + caches all 12 zodiac SVG paths before first draw; auto-detects static base URL from <script src> - Per-element (fire/stone/air/water) colored circles behind zodiac icons; icon fill colors use element palette vars - PLANET_ELEMENTS map (au/ag/hg/cu/fe/sn/pb/u/np/pu) drives per-planet circle + label CSS modifier classes - Planet circles: ternary fill + senary stroke per alchemical metal palette; labels: senary fill + stroke halo - Zodiac icon scale = 85% of circle diameter (15% inset so icons breathe inside circles) - Zodiac + house segment bg opacity 0.5; all ring/segment borders --terUser Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
455 lines
14 KiB
SCSS
455 lines
14 KiB
SCSS
// ─── Natus (Pick Sky) overlay ────────────────────────────────────────────────
|
|
// Gaussian backdrop + centred modal, matching the gate/sig overlay pattern.
|
|
// Open state: html.natus-open (added by JS on PICK SKY click).
|
|
//
|
|
// Layout: header / two-column body (form | wheel) / footer
|
|
// Collapses to stacked single-column below 600 px.
|
|
|
|
// ── Scroll-lock ───────────────────────────────────────────────────────────────
|
|
|
|
html.natus-open {
|
|
overflow: hidden;
|
|
|
|
#id_aperture_fill { opacity: 1; }
|
|
}
|
|
|
|
// ── Backdrop ──────────────────────────────────────────────────────────────────
|
|
|
|
.natus-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
backdrop-filter: blur(5px);
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
|
|
// Hidden until html.natus-open
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
html.natus-open .natus-backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
// ── Overlay shell (positions + scrolls the modal) ─────────────────────────────
|
|
|
|
.natus-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 120;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
pointer-events: none;
|
|
|
|
// Hidden until html.natus-open
|
|
visibility: hidden;
|
|
|
|
@media (orientation: landscape) {
|
|
$sidebar-w: 4rem;
|
|
left: $sidebar-w;
|
|
right: $sidebar-w;
|
|
}
|
|
}
|
|
|
|
html.natus-open .natus-overlay {
|
|
visibility: visible;
|
|
pointer-events: none; // modal itself is pointer-events: auto
|
|
}
|
|
|
|
// ── Modal panel ───────────────────────────────────────────────────────────────
|
|
|
|
// Thin wrapper: position:relative so the NVM circle can sit on the corner
|
|
// without being clipped by the modal's overflow:hidden.
|
|
.natus-modal-wrap {
|
|
position: relative;
|
|
pointer-events: none; // overlay handles pointer-events; children re-enable
|
|
width: 92vw;
|
|
max-width: 920px;
|
|
|
|
// Fade + slide in — wraps modal AND NVM btn so both animate together
|
|
opacity: 0;
|
|
transform: translateY(1rem);
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
html.natus-open .natus-modal-wrap {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.natus-modal {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%; // fills .natus-modal-wrap
|
|
max-height: 96vh;
|
|
border: 0.1rem solid rgba(var(--terUser), 0.25);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// ── Header ────────────────────────────────────────────────────────────────────
|
|
|
|
.natus-modal-header {
|
|
flex-shrink: 0;
|
|
padding: 0.6rem 1rem;
|
|
background: rgba(var(--priUser), 1);
|
|
border-bottom: 0.1rem solid rgba(var(--terUser), 0.15);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
gap: 0.75rem;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 0.06em;
|
|
|
|
span { color: rgba(var(--secUser), 1); }
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: 0.7rem;
|
|
opacity: 0.55;
|
|
}
|
|
}
|
|
|
|
// ── Body: two columns ─────────────────────────────────────────────────────────
|
|
|
|
.natus-modal-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Form column — fixed width; form-main scrolls, confirm btn pinned at bottom
|
|
.natus-form-col {
|
|
flex: 0 0 240px;
|
|
overflow: hidden;
|
|
padding: 0.9rem 1rem;
|
|
background: rgba(var(--priUser), 1);
|
|
border-right: 0.1rem solid rgba(var(--terUser), 0.12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
// Scrollable inner container (form fields + status)
|
|
.natus-form-main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
// Confirm btn inside form-col — full width, pinned at column bottom
|
|
.natus-form-col > #id_natus_confirm {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Wheel column — fills remaining space
|
|
.natus-wheel-col {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.75rem;
|
|
// background: rgba(var(--duoUser), 1);
|
|
position: relative;
|
|
}
|
|
|
|
.natus-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 480px;
|
|
max-height: 480px;
|
|
}
|
|
|
|
// ── Form fields ───────────────────────────────────────────────────────────────
|
|
|
|
.natus-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
|
|
label {
|
|
font-size: 0.6rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: rgba(var(--quaUser), 0.8);
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
// inherits global input styles
|
|
}
|
|
|
|
small {
|
|
font-size: 0.58rem;
|
|
opacity: 0.45;
|
|
line-height: 1.3;
|
|
}
|
|
}
|
|
|
|
// Place search field wrapper: text input + geo button inline
|
|
.natus-place-field { position: relative; }
|
|
|
|
.natus-place-wrap {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
|
|
input { flex: 1; min-width: 0; }
|
|
.btn-sm { flex-shrink: 0; }
|
|
}
|
|
|
|
// Nominatim suggestion dropdown
|
|
.natus-suggestions {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: calc(100% + 2px);
|
|
z-index: 10;
|
|
background: rgba(var(--priUser), 1);
|
|
border: 0.1rem solid rgba(var(--terUser), 0.3);
|
|
border-radius: 0.3rem;
|
|
overflow-y: auto;
|
|
max-height: 10rem;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.natus-suggestion-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.4rem 0.6rem;
|
|
text-align: left;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 0.05rem solid rgba(var(--terUser), 0.1);
|
|
font-size: 0.65rem;
|
|
color: rgba(var(--ninUser), 0.85);
|
|
cursor: pointer;
|
|
line-height: 1.35;
|
|
|
|
&:last-child { border-bottom: none; }
|
|
|
|
&:hover, &:focus {
|
|
background: rgba(var(--terUser), 0.12);
|
|
color: rgba(var(--ninUser), 1);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
// Coords row: lat | lon (read-only, populated by place selection)
|
|
.natus-coords {
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
gap: 0.4rem;
|
|
|
|
> div {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
|
|
label {
|
|
font-size: 0.6rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: rgba(var(--quaUser), 0.8);
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Status line ───────────────────────────────────────────────────────────────
|
|
|
|
.natus-status {
|
|
font-size: 0.65rem;
|
|
opacity: 0.6;
|
|
min-height: 1rem;
|
|
text-align: center;
|
|
|
|
&--error {
|
|
opacity: 1;
|
|
color: rgba(var(--priRd), 1);
|
|
}
|
|
}
|
|
|
|
// ── NVM corner btn ────────────────────────────────────────────────────────────
|
|
// Absolutely pinned to top-right corner of .natus-modal-wrap.
|
|
// transform: translate(50%,-50%) centres the circle on the corner point.
|
|
// Lives outside .natus-modal so overflow:hidden doesn't clip it.
|
|
|
|
#id_natus_cancel {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
transform: translate(50%, -50%);
|
|
z-index: 10;
|
|
margin: 0;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
// ── Narrow / portrait ─────────────────────────────────────────────────────────
|
|
|
|
@media (max-width: 600px) {
|
|
.natus-modal-wrap {
|
|
width: 92vw;
|
|
}
|
|
|
|
.natus-modal {
|
|
max-height: 96vh;
|
|
}
|
|
|
|
.natus-modal-body {
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Form col stacks above wheel; internally becomes a flex-row so
|
|
// form-main gets most of the width and confirm btn sits to its right.
|
|
.natus-form-col {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
border-right: none;
|
|
border-bottom: 0.1rem solid rgba(var(--terUser), 0.12);
|
|
overflow: visible; // form-main handles its own scroll
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.natus-form-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-y: auto;
|
|
max-height: 40vh;
|
|
}
|
|
|
|
.natus-form-col > #id_natus_confirm {
|
|
flex-shrink: 0;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.natus-wheel-col {
|
|
flex: 0 0 280px;
|
|
}
|
|
}
|
|
|
|
// ── SVG wheel element styles ──────────────────────────────────────────────────
|
|
// Colors and opacity live here; geometry (cx/cy/r/font-size) stays in JS.
|
|
|
|
.nw-outer-ring {
|
|
fill: none;
|
|
stroke: rgba(var(--terUser), 1);
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.nw-inner-disc {
|
|
fill: rgba(var(--quaUser), 0.6);
|
|
stroke: rgba(var(--terUser), 1);
|
|
stroke-width: 0.75px;
|
|
}
|
|
|
|
// Axes (ASC / DSC / MC / IC)
|
|
.nw-axis-line { stroke: rgba(var(--secUser), 1); stroke-width: 1.5px; }
|
|
.nw-axis-label { fill: rgba(var(--secUser), 1); }
|
|
|
|
// Sign ring — uniform --priMe bg at half opacity
|
|
.nw-sign--fire,
|
|
.nw-sign--stone,
|
|
.nw-sign--air,
|
|
.nw-sign--water {
|
|
fill: rgba(var(--priMe), 0.25);
|
|
stroke: rgba(var(--terUser), 1);
|
|
stroke-width: 0.75px;
|
|
}
|
|
|
|
// Icon bg circles — element fill + matching border
|
|
.nw-sign-icon-bg--fire { fill: rgba(var(--terRd), 1); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
|
|
.nw-sign-icon-bg--stone { fill: rgba(var(--priYl), 1); stroke: rgba(var(--priLm), 1); stroke-width: 1px; }
|
|
.nw-sign-icon-bg--air { fill: rgba(var(--terGn), 1); stroke: rgba(var(--priTk), 1); stroke-width: 1px; }
|
|
.nw-sign-icon-bg--water { fill: rgba(var(--priCy), 1); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
|
|
|
|
// Inline SVG path icons — per-element colors
|
|
.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); }
|
|
.nw-sign-icon--stone { fill: rgba(var(--terLm), 1); }
|
|
.nw-sign-icon--air { fill: rgba(var(--priTk), 1); }
|
|
.nw-sign-icon--water { fill: rgba(var(--terBl), 1); }
|
|
|
|
// House ring — uniform --priFs bg
|
|
.nw-house-cusp { stroke: rgba(var(--terUser), 1); stroke-width: 1.2px; }
|
|
.nw-house-num { fill: rgba(var(--ninUser), 1); }
|
|
.nw-house-fill--even { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
|
.nw-house-fill--odd { fill: rgba(var(--priFs), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
|
|
|
// Planets — base geometry
|
|
.nw-planet-circle,
|
|
.nw-planet-circle--rx { stroke-width: 1px; }
|
|
.nw-planet-label { stroke-width: 0.4px; paint-order: stroke fill; }
|
|
|
|
// Per-planet circle: fill = ternary, border = senary
|
|
.nw-planet--au { fill: rgba(var(--terAu), 1); stroke: rgba(var(--sixAu), 1); } // Sun
|
|
.nw-planet--ag { fill: rgba(var(--terAg), 1); stroke: rgba(var(--sixAg), 1); } // Moon
|
|
.nw-planet--hg { fill: rgba(var(--terHg), 1); stroke: rgba(var(--sixHg), 1); } // Mercury
|
|
.nw-planet--cu { fill: rgba(var(--terCu), 1); stroke: rgba(var(--sixCu), 1); } // Venus
|
|
.nw-planet--fe { fill: rgba(var(--terFe), 1); stroke: rgba(var(--sixFe), 1); } // Mars
|
|
.nw-planet--sn { fill: rgba(var(--terSn), 1); stroke: rgba(var(--sixSn), 1); } // Jupiter
|
|
.nw-planet--pb { fill: rgba(var(--terPb), 1); stroke: rgba(var(--sixPb), 1); } // Saturn
|
|
.nw-planet--u { fill: rgba(var(--terU), 1); stroke: rgba(var(--sixU), 1); } // Uranus
|
|
.nw-planet--np { fill: rgba(var(--terNp), 1); stroke: rgba(var(--sixNp), 1); } // Neptune
|
|
.nw-planet--pu { fill: rgba(var(--terPu), 1); stroke: rgba(var(--sixPu), 1); } // Pluto
|
|
|
|
// Per-planet label: fill + stroke halo = senary
|
|
.nw-planet-label--au { fill: rgba(var(--sixAu), 1); stroke: rgba(var(--sixAu), 0.6); }
|
|
.nw-planet-label--ag { fill: rgba(var(--sixAg), 1); stroke: rgba(var(--sixAg), 0.6); }
|
|
.nw-planet-label--hg { fill: rgba(var(--sixHg), 1); stroke: rgba(var(--sixHg), 0.6); }
|
|
.nw-planet-label--cu { fill: rgba(var(--sixCu), 1); stroke: rgba(var(--sixCu), 0.6); }
|
|
.nw-planet-label--fe { fill: rgba(var(--sixFe), 1); stroke: rgba(var(--sixFe), 0.6); }
|
|
.nw-planet-label--sn { fill: rgba(var(--sixSn), 1); stroke: rgba(var(--sixSn), 0.6); }
|
|
.nw-planet-label--pb { fill: rgba(var(--sixPb), 1); stroke: rgba(var(--sixPb), 0.6); }
|
|
.nw-planet-label--u { fill: rgba(var(--sixU), 1); stroke: rgba(var(--sixU), 0.6); }
|
|
.nw-planet-label--np { fill: rgba(var(--sixNp), 1); stroke: rgba(var(--sixNp), 0.6); }
|
|
.nw-planet-label--pu { fill: rgba(var(--sixPu), 1); stroke: rgba(var(--sixPu), 0.6); }
|
|
.nw-rx { fill: rgba(var(--terUser), 1); }
|
|
|
|
// Aspects
|
|
.nw-aspects { opacity: 0.8; }
|
|
|
|
// Element pie
|
|
.nw-element--fire { fill: rgba(var(--priRd, 192, 64, 64), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
|
|
.nw-element--stone { fill: rgba(var(--priFs, 122, 96, 64), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
|
|
.nw-element--air { fill: rgba(var(--priCy, 64, 144, 176), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
|
|
.nw-element--water { fill: rgba(var(--priId, 80, 80, 160), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
|
|
|
|
// Time / Space emergent labels
|
|
.nw-element-label--time { fill: rgba(var(--priYl, 192, 160, 48), 1); }
|
|
.nw-element-label--space { fill: rgba(var(--priGn, 64, 96, 64), 1); }
|
|
|
|
// ── Sidebar z-index sink (landscape sidebars must go below backdrop) ───────────
|
|
|
|
@media (orientation: landscape) {
|
|
html.natus-open body .container .navbar,
|
|
html.natus-open body #id_footer {
|
|
z-index: 90;
|
|
}
|
|
}
|