discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TOOLTIPS: extract .tt base to _tooltips.scss + natus element/planet title colours
All checks were successful
ci/woodpecker/push/pyswiss Pipeline was successful
Details
ci/woodpecker/push/main Pipeline was successful
Details

Browse Source 
- New _tooltips.scss: .token-tooltip/.tt base block extracted from _wallet-tokens.scss
- core.scss: import order …billboard → tooltips → game-kit → wallet-tokens
- _natus.scss: .tt-title--au/ag/…/pu (--six* dark, --pri* light) + .tt-title--el-* for element ring (--pri* dark, --ter* light) via body[class*="-light"] selector
- natus-wheel.js: element tooltip title switched from inline style to .tt-title--el-{key} CSS class; PLANET_ELEMENTS map drives .tt-title--{el} class on planet titles
- _game-kit.scss: kit bag .tt child font-size rules added (1rem title, 0.75rem desc/shoptalk/expiry)
- CLAUDE.md: SCSS import order updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-16 02:36:24 -04:00
parent 2910012b67
commit 127f4a092d
7 changed files with 168 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/static_src/scss/_natus.scss
View File

@@ -431,8 +431,9 @@ 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); }
// Planet hover glow (--ninUser)
.nw-planet--hover {
// 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;
}
@@ -440,22 +441,70 @@ html.natus-open .natus-modal-wrap {
// Aspects
.nw-aspects { opacity: 0.8; }
// Element pie
// 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; }
// 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); }
// ── 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); }
}
// ── Sidebar z-index sink (landscape sidebars must go below backdrop) ───────────