614 lines
19 KiB
SCSS
614 lines
19 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), 0.92); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
|
|
.nw-sign-icon-bg--stone { fill: rgba(var(--priYl), 0.92); stroke: rgba(var(--priLm), 1); stroke-width: 1px; }
|
|
.nw-sign-icon-bg--air { fill: rgba(var(--terGn), 0.92); stroke: rgba(var(--priTk), 1); stroke-width: 1px; }
|
|
.nw-sign-icon-bg--water { fill: rgba(var(--priCy), 0.92); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
|
|
|
|
// Inline SVG path icons — per-element colors
|
|
.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
|
.nw-sign-icon--stone { fill: rgba(var(--terLm), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
|
.nw-sign-icon--air { fill: rgba(var(--priTk), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
|
|
.nw-sign-icon--water { fill: rgba(var(--terBl), 1); text-shadow: 2px 2px 2px rgba(0, 0, 0, 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); }
|
|
|
|
// Hover glow (--ninUser) — shared by planet groups and element slice groups
|
|
.nw-planet--hover,
|
|
.nw-element--hover {
|
|
filter: drop-shadow(0 0 5px rgba(var(--ninUser), 0.9));
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Aspects
|
|
.nw-aspects { opacity: 0.8; }
|
|
|
|
// Element pie — deasil order: Fire → Stone → Time → Space → Air → Water
|
|
.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--time { fill: rgba(var(--priYl, 192, 160, 48), 0.92); stroke: rgba(var(--quaUser), 1); stroke-width: 0.5px; }
|
|
.nw-element--space { fill: rgba(var(--priGn, 64, 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; }
|
|
|
|
// ── Planet hover tooltip — uses .tt base styles; overrides position + z ───────
|
|
|
|
#id_natus_tooltip {
|
|
position: fixed;
|
|
z-index: 200;
|
|
pointer-events: none;
|
|
padding: 0.75rem 1.5rem;
|
|
|
|
.tt-title { font-size: 1rem; font-weight: 700; }
|
|
.tt-description { font-size: 0.75rem; }
|
|
|
|
// Planet title colors — senary (brightest) tier on dark palettes
|
|
.tt-title--au { color: rgba(var(--sixAu), 1); } // Sun
|
|
.tt-title--ag { color: rgba(var(--sixAg), 1); } // Moon
|
|
.tt-title--hg { color: rgba(var(--sixHg), 1); } // Mercury
|
|
.tt-title--cu { color: rgba(var(--sixCu), 1); } // Venus
|
|
.tt-title--fe { color: rgba(var(--sixFe), 1); } // Mars
|
|
.tt-title--sn { color: rgba(var(--sixSn), 1); } // Jupiter
|
|
.tt-title--pb { color: rgba(var(--sixPb), 1); } // Saturn
|
|
.tt-title--u { color: rgba(var(--sixU), 1); } // Uranus
|
|
.tt-title--np { color: rgba(var(--sixNp), 1); } // Neptune
|
|
.tt-title--pu { color: rgba(var(--sixPu), 1); } // Pluto
|
|
}
|
|
|
|
// Element title colors — primary tier on dark palettes
|
|
#id_natus_tooltip {
|
|
.tt-title--el-fire { color: rgba(var(--priRd), 1); }
|
|
.tt-title--el-stone { color: rgba(var(--priFs), 1); }
|
|
.tt-title--el-time { color: rgba(var(--priYl), 1); }
|
|
.tt-title--el-space { color: rgba(var(--priGn), 1); }
|
|
.tt-title--el-air { color: rgba(var(--priCy), 1); }
|
|
.tt-title--el-water { color: rgba(var(--priId), 1); }
|
|
}
|
|
|
|
// On light palettes — switch to tertiary tier for legibility
|
|
body[class*="-light"] #id_natus_tooltip {
|
|
.tt-title--el-fire { color: rgba(var(--terRd), 1); }
|
|
.tt-title--el-stone { color: rgba(var(--terFs), 1); }
|
|
.tt-title--el-time { color: rgba(var(--terYl), 1); }
|
|
.tt-title--el-space { color: rgba(var(--terGn), 1); }
|
|
.tt-title--el-air { color: rgba(var(--terCy), 1); }
|
|
.tt-title--el-water { color: rgba(var(--terId), 1); }
|
|
}
|
|
|
|
// On light palettes — switch to primary (darkest) tier for legibility
|
|
body[class*="-light"] #id_natus_tooltip {
|
|
.tt-title--au { color: rgba(var(--priAu), 1); }
|
|
.tt-title--ag { color: rgba(var(--priAg), 1); }
|
|
.tt-title--hg { color: rgba(var(--priHg), 1); }
|
|
.tt-title--cu { color: rgba(var(--priCu), 1); }
|
|
.tt-title--fe { color: rgba(var(--priFe), 1); }
|
|
.tt-title--sn { color: rgba(var(--priSn), 1); }
|
|
.tt-title--pb { color: rgba(var(--priPb), 1); }
|
|
.tt-title--u { color: rgba(var(--priU), 1); }
|
|
.tt-title--np { color: rgba(var(--priNp), 1); }
|
|
.tt-title--pu { color: rgba(var(--priPu), 1); }
|
|
}
|
|
|
|
// ── My Sky dashboard applet ───────────────────────────────────────────────────
|
|
|
|
#id_applet_my_sky {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
h2 { flex-shrink: 0; }
|
|
|
|
.natus-svg {
|
|
flex: 1;
|
|
min-height: 0;
|
|
max-width: none;
|
|
max-height: none;
|
|
align-self: center;
|
|
}
|
|
|
|
#id_applet_sky_form_wrap {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 0.5rem 0.25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
#id_natus_confirm {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Sky full page (aperture + column layout) ──────────────────────────────────
|
|
|
|
html:has(body.page-sky) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.page-sky {
|
|
overflow: hidden;
|
|
|
|
.container {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.row {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
// Sky page fills the aperture; its content can scroll past the bottom edge
|
|
.sky-page {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
// Stack wheel above form; allow body to grow past viewport (page scrolls, not body)
|
|
.sky-page .natus-modal-body {
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Wheel takes its natural square size from its width — never shrinks for the form
|
|
.sky-page .natus-wheel-col {
|
|
order: -1;
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 480px;
|
|
max-height: 480px;
|
|
align-self: center;
|
|
}
|
|
|
|
// Form col runs horizontally below the wheel (same compact pattern as narrow-portrait modal)
|
|
.sky-page .natus-form-col {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
border-right: none;
|
|
border-top: 0.1rem solid rgba(var(--terUser), 0.12);
|
|
}
|
|
|
|
.sky-page .natus-form-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
// ── 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;
|
|
}
|
|
}
|