MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* ═════════════ 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{background:#fff;border-radius:10px;padding:2px 4px;display:inline-block;}
.type-badge{display:inline-block;padding:2px 6px 0;margin:2px;font-size:85%;font-weight:700;
            color:#fff;line-height:14px;border-radius:4px;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:4px 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{
  font-size:85%;
  font-weight:400;
  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;
}