discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1452de1a769cb22b528fcb2316a27b253bf518f3
python-tdd/src/static_src/scss/rootvars.scss
Disco DeDisco 559bdc2de7 My Sign picker: stage visible on load, FYI panel, SPIN/FLIP split w. perspective-flip animation — Sprint 4a-cont 
User-driven polish on the Sprint 4a picker so it's usable parity-w-room-sig-select (per the Schizo-screenshot reference). My initial pass collapsed SPIN + FLIP into one button — user clarified the correct architecture: **SPIN** stays in the `.sig-stat-block` (room pattern, btn-reverse, toggles orientation 180° + reveals reversal_qualifier), while **FLIP** lives at the bottom-left of the stage card as a `.btn-reveal` (game-kit fan carousel pattern, toggles polarity gravity↔levity w. a horizontal-perspective Y-axis rotation animation). Gravity is the default upright polarity per user — significator_reversed=False → gravity, True → levity ; **template changes** (my_sign.html): (a) `.sig-stage-card` no longer carries inline `display:none` — stage frame visible on page load, before any card click; (b) `.sig-stage` carries `.sig-stage--frozen` modifier from the start so the stat-block shows alongside the stage card (room CSS gates `.sig-stat-block { display: block }` behind this class); (c) stat-block btn relabeled "FLIP" → "SPIN" + restored to btn-reverse / orientation-toggle semantics; (d) new `<button class="btn btn-reveal my-sign-flip-btn">FLIP</button>` outside the stat-block at .sig-stage scope, positioned absolute via new SCSS (bottom-left of stage card, mirroring game_kit.html's #id_fan_flip placement); (e) FYI btn + `_sig_fyi_panel.html` partial included alongside SPIN in stat-block — pinned w. id_my_sign_fyi_panel; (f) all 18 card data-* attrs filled (data-levity-qualifier / data-gravity-qualifier / data-levity-emanation / data-gravity-emanation / data-levity-reversal / data-gravity-reversal / data-energies / data-operations / data-italic-word / data-correspondence) so StageCard.populateCard has everything it needs to render qualifiers + reversal-face text per polarity; (g) data-polarity on .my-sign-stage drives populator polarity arg + (future) polarity-themed styling, initialised from `current_significator_reversed` (False=gravity, True=levity) ; **JS changes** (inline script in my_sign.html, includes apps/epic/stage-card.js): (a) on card click → StageCard.fromDataset → populateCard(stageCard, card, _polarity()) + populateKeywords on stat-block + buildInfoData/renderFyi on FYI panel + sig-focused class on grid cell; (b) FYI btn click toggles `.fyi-open` on stat-block (room pattern — CSS reveals the .sig-info panel + PRV/NXT); (c) PRV/NXT cycle thru _fyiData; (d) SPIN click toggles `.stage-card--reversed` + `.is-reversed` on stat-block (orientation, preview-only — not persisted); (e) FLIP click runs `_flipPolarityAnimated()` — 500ms Y-axis rotateY(90deg) midpoint animation lifted from game-kit.js's `_flipActive`, swaps polarity at offset 0.5 so the new face shows through the 2nd half-rotation, preserves SPIN orientation by including ' rotate(180deg)' in both keyframes when stage-card--reversed is on, in-flight `dataset.flipping` flag prevents re-triggering mid-animation; (f) on-load: if user has a saved sig (`.my-sign-page[data-current-card-id]`), find that grid card + auto-select it so stage shows the persisted choice ; **SCSS** (_card-deck.scss): new `.my-sign-flip-btn` rule positioning the btn absolute z-index:25 bottom:0.4rem left:calc(1.5rem + 0.4rem) — accounts for .sig-stage's padding-left:1.5rem so the btn lands at the visual bottom-left of the stage card; .btn-reveal styling (magenta/cyan) inherited from existing _button-pad.scss; no animation SCSS (the 500ms rotateY is in JS via element.animate()) ; **deferred**: `.sig-overlay[data-polarity="levity"]` / `[data-polarity="gravity"]` themed color overrides at _card-deck.scss:805-885 are scoped to `.sig-overlay` and won't apply to `.my-sign-stage[data-polarity]` until those selectors are extended (or duplicated under a .my-sign-stage sibling). User flagged the visual delta but the picker is functionally complete w.o the polarity-themed colors — followup sub-sprint ; **regression**: 7 FTs in test_bill_my_sign green in 57s; no IT/UT changes needed (only template + SCSS). User-pre-staged rootvars.scss tweak picked up

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 23:58:39 -04:00

607 lines
16 KiB
SCSS
Raw Blame History

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
:root {
/* rgb Variable Index */
/* Precious Metal Hues */
// nickel
--priNi: 141, 142, 140;
--secNi: 118, 120, 118;
--terNi: 93, 95, 94;
--terNi: 0, 0, 0;
--quaNi: 0, 0, 0;
--quiNi: 0, 0, 0;
--sixNi: 0, 0, 0;
// palladium
--priPd: 188, 193, 165;
--secPd: 155, 160, 138;
--terPd: 124, 129, 111;
--quaPd: 0, 0, 0;
--quiPd: 0, 0, 0;
--sixPd: 0, 0, 0;
// platinum
--priPt: 229, 228, 226;
--secPt: 189, 190, 189;
--terPt: 152, 153, 153;
--quaPt: 0, 0, 0;
--quiPt: 0, 0, 0;
--sixPt: 0, 0, 0;
// titanium
--priTi: 38, 57, 69;
--secTi: 57, 79, 94;
--terTi: 75, 101, 119;
--quaTi: 91, 121, 142;
--quiTi: 124, 166, 191;
--sixTi: 159, 200, 224;
// gold (Sun)
--priAu: 61, 48, 2;
--secAu: 99, 80, 8;
--terAu: 148, 121, 24;
--quaAu: 181, 154, 54;
--quiAu: 214, 186, 84;
--sixAu: 237, 214, 130;
// silver (Moon)
--priAg: 30, 30, 30;
--secAg: 60, 60, 60;
--terAg: 100, 100, 100;
--quaAg: 133, 133, 133;
--quiAg: 175, 175, 175;
--sixAg: 240, 240, 240;
/* Cosmic Metal Hues */
// mercury (Mercury)
--priHg: 23, 31, 51;
--secHg: 51, 62, 87;
--terHg: 87, 98, 128;
--quaHg: 139, 148, 176;
--quiHg: 176, 186, 209;
--sixHg: 206, 214, 237;
// copper (Venus)
--priCu: 46, 24, 5;
--secCu: 84, 48, 17;
--terCu: 133, 81, 36;
--quaCu: 171, 112, 60;
--quiCu: 207, 173, 143;
--sixCu: 242, 216, 191;
// iron (Mars) ***n.b.!—ancient 'iron' was actually meteoric iron, an iron-nickel alloy like kamacite (weaponry) or taenite (decor)
--priFe: 51, 47, 26;
--secFe: 74, 72, 45;
--terFe: 105, 103, 74;
--quaFe: 148, 144, 115;
--quiFe: 184, 178, 154;
--sixFe: 224, 219, 202;
// tin (Jupiter)
--priSn: 36, 36, 19;
--secSn: 68, 72, 42;
--terSn: 100, 102, 66;
--quaSn: 148, 150, 110;
--quiSn: 207, 209, 180;
--sixSn: 243, 245, 223;
// lead (Saturn)
--priPb: 33, 40, 46;
--secPb: 48, 59, 64;
--terPb: 87, 102, 107;
--quaPb: 126, 142, 148;
--quiPb: 163, 180, 184;
--sixPb: 213, 228, 232;
// uranium (Uranus)
--priU: 21, 39, 18;
--secU: 32, 59, 41;
--terU: 85, 129, 69;
--quaU: 114, 156, 100;
--quiU: 167, 196, 149;
--sixU: 209, 240, 192;
// neptunium (Neptune)
--priNp: 16, 59, 49;
--secNp: 37, 84, 76;
--terNp: 85, 135, 129;
--quaNp: 107, 156, 148;
--quiNp: 139, 181, 175;
--sixNp: 197, 227, 224;
// plutonium (Pluto)
--priPu: 29, 18, 38;
--secPu: 59, 44, 71;
--terPu: 89, 76, 102;
--quaPu: 129, 118, 148;
--quiPu: 189, 175, 214;
--sixPu: 235, 211, 217;
/* Chroma Hues */
// red (A-Fire)
--priRd: 233, 53, 37;
--secRd: 193, 43, 28;
--terRd: 155, 31, 15;
--quaRd: 119, 20, 4;
--quiRd: 85, 11, 0;
--sixRd: 54, 4, 0;
// orange (B-Fire)
--priOr: 225, 133, 40;
--secOr: 187, 111, 30;
--terOr: 150, 88, 17;
--quaOr: 115, 67, 6;
--quiOr: 82, 47, 0;
--sixOr: 51, 29, 0;
// yellow (A-Time)
--priYl: 255, 207, 52;
--secYl: 211, 172, 44;
--terYl: 168, 138, 33;
--quaYl: 128, 106, 24;
--quiYl: 91, 76, 15;
--sixYl: 57, 49, 7;
// lime (B-Time)
--priLm: 151, 174, 60;
--secLm: 124, 145, 48;
--terLm: 97, 117, 36;
--quaLm: 71, 90, 25;
--quiLm: 47, 64, 15;
--sixLm: 25, 40, 6;
// green (A-Space)
--priGn: 0, 160, 75;
--secGn: 0, 135, 62;
--terGn: 0, 109, 48;
--quaGn: 0, 85, 35;
--quiGn: 0, 62, 23;
--sixGn: 0, 40, 12;
// teal (B-Space)
--priTk: 0, 184, 162;
--secTk: 0, 154, 136;
--terTk: 0, 125, 110;
--quaTk: 0, 97, 85;
--quiTk: 0, 70, 61;
--sixTk: 0, 45, 39;
// cyan (A-Air)
--priCy: 13, 179, 200;
--secCy: 12, 150, 168;
--terCy: 0, 121, 136;
--quaCy: 0, 93, 106;
--quiCy: 0, 67, 78;
--sixCy: 0, 43, 52;
// blue (B-Air)
--priBl: 20, 141, 205;
--secBl: 18, 119, 173;
--terBl: 8, 95, 140;
--quaBl: 3, 73, 109;
--quiBl: 0, 52, 79;
--sixBl: 0, 33, 51;
// indigo (A-Water)
--priId: 79, 102, 212;
--secId: 66, 88, 184;
--terId: 53, 74, 156;
--quaId: 44, 60, 131;
--quiId: 32, 44, 106;
--sixId: 21, 29, 71;
// violet (B-Water)
--priVt: 120, 72, 183;
--secVt: 108, 65, 165;
--terVt: 96, 58, 147;
--quaVt: 80, 45, 124;
--quiVt: 64, 30, 100;
--sixVt: 43, 20, 66;
// fuschia (A-Stone)
--priFs: 178, 71, 170;
--secFs: 138, 52, 131;
--terFs: 107, 31, 101;
--quaFs: 83, 17, 78;
--quiFs: 61, 5, 56;
--sixFs: 41, 0, 36;
// magenta (B-Stone)
--priMe: 237, 30, 129;
--secMe: 196, 18, 108;
--terMe: 158, 1, 86;
--quaMe: 122, 0, 66;
--quiMe: 89, 0, 48;
--sixMe: 59, 0, 32;
/* Earthman Hues */
// bark
--priBrk: 162, 103, 98;
--secBrk: 117, 78, 68;
--terBrk: 72, 53, 38;
// khaki
--priKhk: 195, 176, 145;
--secKhk: 145, 126, 95;
--terKhk: 95, 76, 45;
// cotton
--priCtn: 255, 251, 246;
--secCtn: 205, 201, 196;
--terCtn: 155, 151, 146;
// maize
--priMze: 242, 200, 63;
--secMze: 192, 151, 42;
--terMze: 142, 101, 21;
// cornflower
--priCfw: 100, 149, 237;
--secCfw: 67, 99, 187;
--terCfw: 33, 49, 137;
// purple mountain's majesty
--priPmm: 189, 170, 209;
--secPmm: 150, 120, 182;
--terPmm: 112, 79, 146;
// forest
--priFor: 114, 146, 79;
--secFor: 94, 124, 61;
--terFor: 74, 102, 43;
/* Technoman Hue */
// carbon steel
// stainless steel
// maraging steel
// silicon semiconductor
// wrought iron
// carbon fiber
// glass (optic)
/* Other H. sapiens variants */
// glass (frosted)
// glass (borosilicate)
// quartz
// iron (meteoric)
/* Component tokens */
--tooltip-bg: 0, 0, 0;
--title-shadow-offset: -0.125rem;
/* Inferno Hues (4 per) */
// mist (Elpis's Lethe)
--priMst: 168, 202, 172;
--secMst: 103, 145, 105;
--terMst: 90, 129, 198;
--quaMst: 13, 71, 47;
// tears (Ananke's Acheron)
--priTrs: 212, 221, 190;
--secTrs: 161, 208, 202;
--terTrs: 81, 153, 139;
--quaTrs: 47, 89, 85;
--quiTrs: 27, 66, 63;
--sixTrs: 18, 44, 41;
// swamp (Eros's Styx)
--priSwp: 221, 206, 149;
--secSwp: 148, 150, 103;
--terSwp: 50, 51, 33;
--quaSwp: 33, 56, 27;
// blood (Tyche's Phlegethon)
--priBld: 200, 79, 50;
--secBld: 177, 63, 52;
--terBld: 120, 37, 33;
--quaBld: 77, 23, 13;
// ice (Daimon's Cocytus)
--priIce: 165, 190, 187;
--secIce: 121, 150, 156;
--terIce: 74, 119, 125;
--quaIce: 35, 65, 75;
/* Terrestre Hues (6 per) */
// crumbling perse (Contrition)
--priPer: 34, 30, 77;
--secPer: 52, 45, 99;
--terPer: 88, 77, 145;
--quaPer: 127, 116, 194;
--quiPer: 164, 160, 222;
--sixPer: 206, 201, 242;
// polished marble (Confession)
--priMrb: 231, 233, 234;
--secMrb: 115, 116, 117;
// flaming porphyry (Satisfaction)
--priPhy: 200, 55, 66;
--secPhy: 75, 31, 48;
// threshold of adamant (Absolution)
--priAdm: 35, 40, 43;
--secAdm: 75, 81, 84;
--terAdm: 119, 131, 135;
--quaAdm: 164, 180, 186;
--quiAdm: 197, 213, 228;
--sixAdm: 226, 244, 253;
/* Emanation Hues */
// Plant Bundle
// • beige-pink (streetlamps)
--priBpk: 223, 159, 140;
// • pale-yellow (poisonous)
--priBpk: 255, 235, 169;
// • bright violet (medicinal)
--priBpk: 223, 64, 196;
// • white, murky (power)
--priBpk: 196, 180, 193;
// • white, brilliant (power)
--sixBpk: 250, 246, 249;
// Insect Bundle
// • buff peach (neon lights)
--priBfp: 255, 92, 43;
// Animal Bundle
// • amber (clear honey)
--priClh: 238, 160, 70;
--secClh: 255, 216, 171;
// • pink (common)
--terClh: 238, 70, 148;
--quaClh: 96, 5, 57;
// • pale green (common)
--quiClh: 120, 203, 53;
--sixClh: 220, 255, 125;
// • blue (unusual)
--sepClh: 56, 84, 173;
--octClh: 26, 51, 105;
// • pure (rare)
--ninClh: 192, 77, 1;
--decClh: 255, 174, 0;
/* Lord Baltimore Hues */
// yellow
--priBlt: 235, 191, 0;
--secBlt: 187, 147, 52;
// white
--terBlt: 255, 255, 255;
// --quaBlt: ;
// black
--quiBlt: 0, 0, 0;
--sixBlt: 162, 170, 173;
// purple
--sepBlt: 50, 30, 95;
--octBlt: 157, 34, 53;
// orange
--ninBlt: 221, 73, 38;
// --decBlt: ;
// Felt values
--undUser: var(--priFor);
--duoUser: var(--terFor);
}
/* Default Earthman Palette */
.palette-default {
--priUser: var(--terBrk);
--secUser: var(--priKhk);
--terUser: var(--priMze);
--quaUser: var(--priPmm);
--quiUser: var(--terPmm);
--sixUser: var(--priFor);
--sepUser: var(--terFor);
--octUser: var(--priCfw);
--ninUser: var(--priCtn);
--decUser: var(--terCtn);
}
/* Grave Sheol Palette */
.palette-sheol {
--priUser: var(--priPu);
--secUser: var(--quiPu);
--terUser: var(--priFs);
--quaUser: var(--priCfw);
--quiUser: var(--terCfw);
--sixUser: var(--terId);
--sepUser: var(--secId);
--octUser: var(--terFs);
--ninUser: var(--sixPu);
--decUser: var(--terPu);
}
/* Bardo Palette */
.palette-bardo {
--priUser: var(--sixTrs);
--secUser: var(--sixU);
--terUser: var(--priCfw);
--quaUser: var(--quiAu);
--quiUser: var(--secCu);
--sixUser: var(--terKhk);
--sepUser: var(--priKhk);
--octUser: var(--priPer);
--ninUser: var(--sixCu);
--decUser: var(--terU);
}
/* Disco Inferno Palette */
.palette-inferno {
--priUser: var(--terSwp);
--secUser: var(--priSwp);
--terUser: var(--secBld);
--quaUser: var(--priIce);
--quiUser: var(--quaIce);
--sixUser: var(--priTrs);
--sepUser: var(--terTrs);
--octUser: var(--terBld);
--ninUser: var(--priMst);
--decUser: var(--terMst);
}
/* Torre Terrestre Palette */
.palette-terrestre {
--priUser: var(--priAdm);
--secUser: var(--quaAdm);
--terUser: var(--sixAdm);
--quaUser: var(--priPhy);
--quiUser: var(--secPhy);
--sixUser: var(--priMrb);
--sepUser: var(--terPer);
--octUser: var(--quaAdm);
--ninUser: var(--sixPer);
--decUser: var(--terMrb);
}
/* Fantastia Celestia Palette */
.palette-celestia {
--priUser: var(--octClh);
--secUser: var(--sixClh);
--terUser: var(--terClh);
--quaUser: var(--decClh);
--quiUser: var(--ninClh);
--sixUser: var(--sepClh);
--sepUser: var(--priClh);
--octUser: var(--quaClh);
--ninUser: var(--secClh);
--decUser: var(--quiClh);
}
/* Obon Palette */
/* Nebula Palette */
/* Baltimore Palette */
.palette-baltimore {
--priUser: var(--sepBlt);
--secUser: var(--sixBlt);
--terUser: var(--ninBlt);
--quaUser: var(--priBlt);
--quiUser: var(--terMze);
--sixUser: var(--quiBlt);
--sepUser: var(--quiBlt);
--octUser: var(--quiBlt);
--ninUser: var(--terBlt);
--decUser: var(--quiBlt);
}
/* Maryland Palette */
.palette-maryland {
--priUser: var(--quiBlt);
--secUser: var(--sixBlt);
--terUser: var(--secBlt);
--quaUser: var(--priYl);
--quiUser: var(--octBlt);
--sixUser: var(--quiBlt);
--sepUser: var(--quiBlt);
--octUser: var(--quiBlt);
--ninUser: var(--priRd);
--decUser: var(--quiBlt);
}
/* Monochrome Dark Palette */
.palette-monochrome-dark {
--priUser: var(--priAg); /* 30,30,30 — near-black bg */
--secUser: var(--quiAg); /* 175,175,175 — light gray text/border */
--terUser: var(--sixAg); /* 240,240,240 — bright white accent */
--quaUser: var(--sixAg); /* 240,240,240 — active/interactive */
--quiUser: var(--secAg); /* 133,133,133 — secondary action */
--sixUser: var(--quaAg); /* 100,100,100 — subtle mid */
--sepUser: var(--priPt); /* 60,60,60 — deep subtle */
--octUser: var(--quiPt); /* 189,190,189 — links (cooler silver) */
--ninUser: var(--sixAg); /* 240,240,240 — glow highlight */
--decUser: var(--terAg); /* 100,100,100 — mid tone */
}
/* Monochrome Light Palette */
.palette-oblivion-light {
--priUser: var(--sixAdm); /* 240,240,240 — light gray bg */
--secUser: var(--terPer); /* 100,100,100 — mid-dark text/border */
--terUser: var(--priPer); /* 60,60,60 — dark accent */
--quaUser: var(--priAg); /* 30,30,30 — near-black active */
--quiUser: var(--priMst); /* 133,133,133 — mid-gray action */
--sixUser: var(--quiAg); /* 175,175,175 — subtle */
--sepUser: var(--sixAg); /* 240,240,240 — secondary subtle */
--octUser: var(--priNi); /* 93,95,94 — links */
--ninUser: var(--terNi); /* 255,251,246 — warm bright highlight */
--decUser: var(--terPt); /* 189,190,189 — light mid */
}
/* Cedar Palette */
.palette-cedar {
--priUser: var(--priCu); /* 46,24,5 — very dark warm brown bg */
--secUser: var(--quiCu); /* 207,173,143 — warm beige text/border */
--terUser: var(--priBpk); /* 214,186,84 — amber gold accent */
--quaUser: var(--quiAg); /* 195,176,145 — warm tan interactive */
--quiUser: var(--quaSwp); /* 95,76,45 — deep khaki */
--sixUser: var(--quaCu); /* 171,112,60 — copper mid */
--sepUser: var(--terCu); /* 133,81,36 — deep copper */
--octUser: var(--quaAu); /* 181,154,54 — golden links */
--ninUser: var(--sixAg); /* 242,216,191 — warm cream highlight */
--decUser: var(--secKhk); /* 145,126,95 — warm mid-tone */
}
/* Light palette overrides */
body[class*="-light"] {
--tooltip-bg: 255, 255, 255;
--title-shadow-offset: -0.06125rem;
}
/* Palette Classes */
.priUser {
color: rgba(var(--priUser), 1);
}
.priUser-bg {
background-color: rgba(var(--priUser), 1);
}
.priUser-bd {
border-color: rgba(var(--priUser), 1);
}
.secUser {
color: rgba(var(--secUser), 1);
}
.secUser-bg {
background-color: rgba(var(--secUser), 1);
}
.secUser-bd {
border-color: rgba(var(--secUser), 1);
}
.terUser {
color: rgba(var(--terUser), 1);
}
.terUser-bg {
background-color: rgba(var(--terUser), 1);
}
.terUser-bd {
border-color: rgba(var(--terUser), 1);
}
.quaUser {
color: rgba(var(--quaUser), 1);
}
.quaUser-bg {
background-color: rgba(var(--quaUser), 1);
}
.quaUser-bd {
border-color: rgba(var(--secUser), 1);
}
.quiUser {
color: rgba(var(--quiUser), 1);
}
.quiUser-bg {
background-color: rgba(var(--quiUser), 1);
}
.quiUser-bd {
border-color: rgba(var(--quiUser), 1);
}
.sixUser {
color: rgba(var(--sixUser), 1);
}
.sixUser-bg {
background-color: rgba(var(--sixUser), 1);
}
.sixUser-bd {
border-color: rgba(var(--sixUser), 1);
}
.sepUser {
color: rgba(var(--sepUser), 1);
}
.sepUser-bg {
background-color: rgba(var(--sepUser), 1);
}
.sepUser-bd {
border-color: rgba(var(--sepUser), 1);
}
.octUser {
color: rgba(var(--octUser), 1);
}
.octUser-bg {
background-color: rgba(var(--octUser), 1);
}
.octUser-bd {
border-color: rgba(var(--octUser), 1);
}
.ninUser {
color: rgba(var(--ninUser), 1);
}
.ninUser-bg {
background-color: rgba(var(--ninUser), 1);
}
.ninUser-bd {
border-color: rgba(var(--ninUser), 1);
}
.decUser {
color: rgba(var(--decUser), 1);
}
.decUser-bg {
background-color: rgba(var(--decUser), 1);
}
.decUser-bd {
border-color: rgba(var(--decUser), 1);
}
Reference in New Issue View Git Blame Copy Permalink