natus wheel: ASC/MC angles — tooltips, aspect lines, section headers, tooltip polish
- ASC/MC clickable w. DON/DOFF aspect lines (fixed: open w.o. lines; DON/DOFF both work; angles ring handled in _toggleAspects; lines origin at R.planetR) - btn-disabled click-through fix: pointer-events:auto on DON/DOFF; bounding-rect workaround removed - planet tooltip: applying ⇥ left, separating ↦ right; sign shown for angle partners - sign tooltip: Planets + Cusps section headers; ordinal house + domain; em-dash fallback - house tooltip: Planets header; Angular/Succedent/Cadent + phase labels; em-dash fallback - element tooltips: Planets header for Fire/Stone/Air/Water; Stellium/Parade as section-header labels; compact single-stellium Tempo; Parade sign : planets format - tt-ord: no negative margin in .tt-angle-house context Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -373,33 +373,33 @@ html.natus-open .natus-modal-wrap {
|
||||
.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
|
||||
// Sign ring — uniform --priYl bg at half opacity
|
||||
.nw-sign--fire,
|
||||
.nw-sign--stone,
|
||||
.nw-sign--air,
|
||||
.nw-sign--water {
|
||||
fill: rgba(var(--priMe), 0.25);
|
||||
fill: rgba(var(--priYl), 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; }
|
||||
.nw-sign-icon-bg--fire { fill: rgba(var(--quaRd), 0.92); stroke: rgba(var(--priOr), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--stone { fill: rgba(var(--quaFs), 0.92); stroke: rgba(var(--priMe), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--air { fill: rgba(var(--quiCy), 0.92); stroke: rgba(var(--priBl), 1); stroke-width: 1px; }
|
||||
.nw-sign-icon-bg--water { fill: rgba(var(--sixId), 0.92); stroke: rgba(var(--priVt), 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); }
|
||||
.nw-sign-icon--fire { fill: rgba(var(--priOr), 1); }
|
||||
.nw-sign-icon--stone { fill: rgba(var(--priMe), 1); }
|
||||
.nw-sign-icon--air { fill: rgba(var(--priBl), 1); }
|
||||
.nw-sign-icon--water { fill: rgba(var(--priVt), 1); }
|
||||
|
||||
// House ring — uniform --priFs bg
|
||||
// House ring — uniform --priGn 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; }
|
||||
.nw-house-fill--even { fill: rgba(var(--secGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
||||
.nw-house-fill--odd { fill: rgba(var(--quiGn), 0.25); stroke: rgba(var(--terUser), 1); stroke-width: 0.75px; }
|
||||
|
||||
// Planets — base geometry
|
||||
.nw-planet-circle,
|
||||
@@ -431,17 +431,34 @@ html.natus-open .natus-modal-wrap {
|
||||
.nw-planet-label--pu { fill: rgba(var(--sixPu), 1); stroke: rgba(var(--sixPu), 0.6); }
|
||||
.nw-rx { fill: rgba(var(--terUser), 1); }
|
||||
|
||||
// Hover and active-lock glow — planet groups and element slice groups
|
||||
// Hover and active-lock glow — planet, element, sign, house groups
|
||||
.nw-planet-group,
|
||||
.nw-element-group { cursor: pointer; }
|
||||
.nw-element-group,
|
||||
.nw-sign-group,
|
||||
.nw-house-group { cursor: pointer; }
|
||||
|
||||
.nw-planet-group:hover,
|
||||
.nw-planet-group.nw-planet--active,
|
||||
.nw-planet-group.nw-planet--asp-active,
|
||||
.nw-element-group:hover,
|
||||
.nw-element-group.nw-element--active {
|
||||
.nw-element-group.nw-element--active,
|
||||
.nw-sign-group:hover,
|
||||
.nw-sign-group.nw-sign--active,
|
||||
.nw-house-group:hover,
|
||||
.nw-house-group.nw-house--active {
|
||||
filter: drop-shadow(0 0 5px rgba(var(--ninUser), 0.9));
|
||||
}
|
||||
|
||||
// Zodiac icon circles — muted by default, full opacity on hover/active
|
||||
.nw-sign-icon-bg { opacity: 0.5; }
|
||||
.nw-sign-group:hover .nw-sign-icon-bg,
|
||||
.nw-sign-group.nw-sign--active .nw-sign-icon-bg { opacity: 1; }
|
||||
|
||||
// House numbers — muted by default, full opacity on hover/active
|
||||
.nw-house-num { opacity: 0.75; }
|
||||
.nw-house-group:hover .nw-house-num,
|
||||
.nw-house-group.nw-house--active .nw-house-num { opacity: 1; }
|
||||
|
||||
// ── Planet tick lines — hidden until parent group is active ──────────────────
|
||||
.nw-planet-tick {
|
||||
fill: none;
|
||||
@@ -521,6 +538,14 @@ body[class*="-light"] {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.tt-angle-sym {
|
||||
font-variant-caps: all-small-caps;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.tt-angle-house .tt-ord {
|
||||
margin-left: 0;
|
||||
}
|
||||
.tt-planet-loc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -560,6 +585,19 @@ body[class*="-light"] {
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.tt-sign-section-header {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.55;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
.tt-sign-cusps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
// House tooltip — "House of X" | number; planets in house
|
||||
.tt-house-header {
|
||||
@@ -581,12 +619,24 @@ body[class*="-light"] {
|
||||
opacity: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tt-house-type {
|
||||
display: block;
|
||||
font-size: 0.6em;
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
.tt-house-planets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.tt-house-planet-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
// DON|DOFF aspect line toggle — stacked at top-left outside the tooltip box,
|
||||
// matching the PRV/NXT pattern at the bottom corners.
|
||||
@@ -595,6 +645,7 @@ body[class*="-light"] {
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
margin: 0;
|
||||
pointer-events: auto; // override btn-disabled; click must land here, not pass through to SVG
|
||||
}
|
||||
.nw-asp-don { top: -1rem; }
|
||||
.nw-asp-doff { top: 1.2rem; }
|
||||
@@ -627,12 +678,30 @@ body[class*="-light"] {
|
||||
|
||||
.tt-asp-line { flex-shrink: 0; vertical-align: middle; }
|
||||
|
||||
.tt-asp-orb,
|
||||
.tt-asp-orb {
|
||||
margin-left: auto;
|
||||
opacity: 0.6;
|
||||
font-size: 0.65rem;
|
||||
padding-left: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tt-asp-in {
|
||||
opacity: 0.6;
|
||||
font-size: 0.65rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.tt-dim {
|
||||
opacity: 0.6;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.tt-ord {
|
||||
font-size: 0.6rem;
|
||||
vertical-align: 0.25rem;
|
||||
line-height: 0;
|
||||
opacity: 1;
|
||||
margin-left: -0.25rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
// Element tooltip — title + square badge
|
||||
.tt-el-header {
|
||||
@@ -672,9 +741,14 @@ body[class*="-light"] {
|
||||
|
||||
.tt-el-formation-header {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
margin-top: 0.35rem;
|
||||
.tt-el-formation-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
opacity: 0.55;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
|
||||
.tt-el-formation {
|
||||
@@ -708,6 +782,24 @@ body[class*="-light"] {
|
||||
.tt-title--el-water { color: rgba(var(--priId), 1); }
|
||||
}
|
||||
|
||||
// Sign tooltip title + sign icon SVG — element border colors (Stone/Air/Fire/Water schema)
|
||||
#id_natus_tooltip,
|
||||
#id_natus_tooltip_2 {
|
||||
.tt-title--sign-fire { color: rgba(var(--priOr), 1); }
|
||||
.tt-title--sign-stone { color: rgba(var(--priMe), 1); }
|
||||
.tt-title--sign-air { color: rgba(var(--priBl), 1); }
|
||||
.tt-title--sign-water { color: rgba(var(--priVt), 1); }
|
||||
|
||||
.tt-sign-icon-wrap--fire .tt-sign-icon,
|
||||
.tt-planet-sign-icon--fire .tt-sign-icon { fill: rgba(var(--priOr), 1); }
|
||||
.tt-sign-icon-wrap--stone .tt-sign-icon,
|
||||
.tt-planet-sign-icon--stone .tt-sign-icon { fill: rgba(var(--priMe), 1); }
|
||||
.tt-sign-icon-wrap--air .tt-sign-icon,
|
||||
.tt-planet-sign-icon--air .tt-sign-icon { fill: rgba(var(--priBl), 1); }
|
||||
.tt-sign-icon-wrap--water .tt-sign-icon,
|
||||
.tt-planet-sign-icon--water .tt-sign-icon { fill: rgba(var(--priVt), 1); }
|
||||
}
|
||||
|
||||
// On light palettes — switch to tertiary tier for legibility
|
||||
body[class*="-light"] #id_natus_tooltip,
|
||||
body[class*="-light"] #id_natus_tooltip_2 {
|
||||
|
||||
Reference in New Issue
Block a user