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

5
src/static_src/scss/_game-kit.scss
View File

@@ -113,6 +113,11 @@
.tt {
z-index: 9999;
.tt-title { font-size: 1rem; }
.tt-description { padding: 0.125rem; font-size: 0.75rem; }
.tt-shoptalk { font-size: 0.75rem; opacity: 0.75; }
.tt-expiry { font-size: 1rem; color: rgba(var(--priRd), 1); }
// Buttons positioned on left edge of the fixed inline tooltip
.tt-equip-btns {
position: absolute;

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) ───────────

61
src/static_src/scss/_tooltips.scss Normal file
View File

@@ -0,0 +1,61 @@
// ── Tooltip base styles ───────────────────────────────────────────────────────
// Shared by wallet tokens, game-kit kit bag, and natus wheel tooltips.
// Portal tooltips (#id_tooltip_portal, #id_natus_tooltip) are position:fixed
// and override z-index; inline .tt cards use position:absolute within their
// parent token container.
.token-tooltip,
.tt {
display: none;
width: 16rem;
max-width: 16rem;
white-space: normal;
background-color: rgba(var(--tooltip-bg), 0.75);
backdrop-filter: blur(6px);
border: 0.1rem solid rgba(var(--secUser), 0.5);
color: rgba(var(--secUser), 1);
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
z-index: 10;
font-size: 0.875rem;
h4 {
font-size: 0.95rem;
margin: 0 0 0.3rem 0;
color: rgba(var(--terUser), 1);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
.token-count {
font-size: 0.75rem;
opacity: 0.65;
font-weight: normal;
flex-shrink: 0;
}
}
p {
margin: 0 0 0.2rem 0;
&.expiry {
color: rgba(var(--priRd), 1);
}
&.availability {
color: rgba(var(--priRd), 1);
}
&.stock-version {
font-weight: 700;
color: rgba(var(--terUser), 1);
}
}
small {
display: block;
font-size: 0.6rem;
opacity: 0.6;
}
}

56
src/static_src/scss/_wallet-tokens.scss
View File

@@ -1,59 +1,3 @@
.token-tooltip,
.tt {
display: none;
width: 16rem;
max-width: 16rem;
white-space: normal;
background-color: rgba(var(--tooltip-bg), 0.5);
backdrop-filter: blur(6px);
border: 0.1rem solid rgba(var(--secUser), 0.5);
color: rgba(var(--secUser), 1);
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
z-index: 10;
font-size: 0.875rem;
h4 {
font-size: 0.95rem;
margin: 0 0 0.3rem 0;
color: rgba(var(--terUser), 1);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
.token-count {
font-size: 0.75rem;
opacity: 0.65;
font-weight: normal;
flex-shrink: 0;
}
}
p {
margin: 0 0 0.2rem 0;
&.expiry {
color: rgba(var(--priRd), 1);
}
&.availability {
color: rgba(var(--priRd), 1);
}
&.stock-version {
font-weight: 700;
color: rgba(var(--terUser), 1);
}
}
small {
display: block;
font-size: 0.6rem;
opacity: 0.6;
}
}
.token {
position: relative;
display: inline-block;

1
src/static_src/scss/core.scss
View File

@@ -10,6 +10,7 @@
@import 'natus';
@import 'tray';
@import 'billboard';
@import 'tooltips';
@import 'game-kit';
@import 'wallet-tokens';