|
|
| Line 1: |
Line 1: |
| /* ═════════════ Pokémon infobox core ═════════════ */
| |
| table.pkmn-infobox{
| |
| border:4px solid var(--pkmn-border,#4CAF50);
| |
| border-radius:12px;
| |
| background:#fefefe;
| |
| border-collapse:separate;
| |
| width:280px;
| |
| }
| |
| table.pkmn-infobox th.header-main{
| |
| background:var(--pkmn-border,#4CAF50);color:#fff;
| |
| font-size:150%;text-align:center;padding:6px 0;
| |
| }
| |
| table.pkmn-infobox th.subhead{
| |
| background:#d8d8d8;text-align:center;font-size:110%;padding:4px 0;
| |
| }
| |
| table.pkmn-infobox th[scope=row]{background:#f0f0f0;width:120px;text-align:left;padding:4px 6px;}
| |
| table.pkmn-infobox td{padding:4px 6px;}
| |
|
| |
| /* ── type badge pill ────────────────────────────── */
| |
| .type-box{
| |
| padding:0 4px; /* was 2 px top/bottom → now none */
| |
| }
| |
|
| |
| .type-badge{
| |
| display:inline-block;
| |
| /* ↑ a bit taller & wider but same proportions */
| |
| padding:4px 10px 1px; /* top-bottom-left-right */
| |
| margin:0 3px; /* no vertical gap, only tiny side gap */
| |
| font-size:115%; /* was 85 % → ~1.35× text size */
| |
| line-height:18px; /* keeps text vertically centred */
| |
| border-radius:6px; /* scales radius with larger badge */
| |
|
| |
| font-weight:700;
| |
| color:#fff;
| |
| text-shadow:0 1px 1px rgba(0,0,0,.4);
| |
| }
| |
| .type-Bug {background:#A8B820}.type-Dark {background:#705848}.type-Dragon{background:#7038F8}
| |
| .type-Electric {background:#F8D030}.type-Fairy{background:#EE99EE}.type-Fighting{background:#C03028}
| |
| .type-Fire {background:#F08030}.type-Flying{background:#A890F0}.type-Ghost {background:#705898}
| |
| .type-Grass {background:#78C850}.type-Ground{background:#E0C068}.type-Ice {background:#98D8D8}
| |
| .type-Normal {background:#A8A878}.type-Poison{background:#A040A0}.type-Psychic{background:#F85888}
| |
| .type-Rock {background:#B8A038}.type-Steel{background:#B8B8D0}.type-Water {background:#6890F0}
| |
|
| |
| /* ── abilities two-col grid ─────────────────────── */
| |
| .abil-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
| |
| .abil-grid .abil{padding:4px 2px;font-weight:700;text-align:center;}
| |
| .hidden-small{font-size:85%;line-height:14px;font-weight:400;}
| |
|
| |
| /* ── breeding two-col grid ──────────────────────── */
| |
| .breed-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
| |
| .breed-grid .breed-cell{padding:6px 4px;font-weight:700;text-align:center;font-size:90%;}
| |
|
| |
| /* ── EV yield row (fixed 1-line grid) ───────────── */
| |
| .ev-wrapper{text-align:center;}
| |
| .ev-wrapper .ttl{font-weight:700;margin:2px 0;}
| |
| .ev-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:4px;}
| |
| .ev-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
| |
| min-height:36px;border-radius:10px;font-weight:700;font-size:90%;color:#000;}
| |
| .ev-HP {background:#A7DB8D}.ev-Atk {background:#F5AC78}.ev-Def {background:#FAE078}
| |
| .ev-SpAtk{background:#9DB7F5}.ev-SpDef{background:#C6C1E5}.ev-Speed{background:#FA92B2}
| |
| .ev-box .value{font-size:110%;padding-top:4px;}
| |
| .ev-box .label{font-size:80%;}
| |
|
| |
| /* ── Abilities two-column layout ─────────────────────────────────── */
| |
| .abil-grid{
| |
| display:flex; /* 1 or 2 cells share the row */
| |
| gap:6px;
| |
| }
| |
|
| |
| .abil-box{
| |
| flex:1 1 0;
| |
| background:#fafafa;
| |
| border:1px solid #e0e0e0;
| |
| border-radius:10px;
| |
| padding:6px 4px; /* ↓ smaller padding → shorter cell */
| |
| text-align:center;
| |
| display:flex;
| |
| flex-direction:column;
| |
| justify-content:center;
| |
| line-height:1.25em; /* tighter lines */
| |
| }
| |
|
| |
| .abil-name{font-weight:700;}
| |
|
| |
| .hidden-small{ | | .hidden-small{ |
| font-size:85%; | | font-size:85%; |
| font-weight:400; | | font-weight:400; |
| margin-top:2px; /* small gap under ability name */ | | margin-top:2px; /* small gap under ability name */ |
| }
| |
|
| |
| /* when there is only one abil-box, make it fill the row cleanly */
| |
| .abil-grid .abil-box:only-child{
| |
| margin:auto; /* keep it centred */
| |
| max-width:60%; /* optional – stop it looking too wide */
| |
| }
| |
|
| |
| /* --- breeding boxes, same look as ability boxes ------------------- */
| |
| .breed-box{
| |
| background:#fafafa;
| |
| border:1px solid #e0e0e0;
| |
| border-radius:10px;
| |
| padding:10px 4px;
| |
| font-weight:700;
| |
| text-align:center;
| |
|
| |
| display:flex;
| |
| flex-direction:column;
| |
| justify-content:center; /* vertical-centre text */
| |
| }
| |
|
| |
| /* reuse existing 2-column grid */
| |
| .breed-grid{
| |
| display:grid;
| |
| grid-template-columns:1fr 1fr;
| |
| gap:6px;
| |
| } | | } |
|
| |
|