MediaWiki:Common.css: Difference between revisions

Revision as of 04:05, 19 May 2025

/* ═════════════ 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{
  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;
}