MediaWiki:Common.css: Difference between revisions

From Pixelrus
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* --- Bulbapedia-style infobox tweaks ---------------------------------- */
/* ═════════════ Pokémon infobox core ═════════════ */
table.pkmn-infobox {
table.pkmn-infobox{
    border: 4px solid var(--pkmn-border, #4CAF50); /* default green */
  border:4px solid var(--pkmn-border,#4CAF50);
    border-radius: 12px;
  border-radius:12px;
    background: #fefefe;
  background:#fefefe;
  border-collapse:separate;
  width:280px;
}
}
table.pkmn-infobox th.header-main {
table.pkmn-infobox th.header-main{
    background: var(--pkmn-border, #4CAF50);
  background:var(--pkmn-border,#4CAF50);color:#fff;
    color:#fff;
  font-size:150%;text-align:center;padding:6px 0;
    font-size: 150%;
    text-align: center;
    padding:6px 0;
}
}
table.pkmn-infobox th.subhead {
table.pkmn-infobox th.subhead{
    background:#d8d8d8;
  background:#d8d8d8;text-align:center;font-size:110%;padding:4px 0;
    text-align:center;
    font-size:110%;
    padding:4px 0;
}
}
table.pkmn-infobox th[scope=row] {
table.pkmn-infobox th[scope=row]{background:#f0f0f0;width:120px;text-align:left;padding:4px 6px;}
    background:#f0f0f0;
table.pkmn-infobox td{padding:4px 6px;}
    width:120px;
    text-align:left;
    padding:4px 6px;
}
table.pkmn-infobox td {
    padding:4px 6px;
}
/* ───── Type badge ───────────────────────────────── */
.type-badge{
  display:inline-block;
  padding:2px 6px 0;
  margin:2px 2px 0;
  font-size:85%; font-weight:bold; 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}


/* ───── 2-column info rows (Abilities & Breeding) ── */
/* ── type badge pill ────────────────────────────── */
.dual-col{
.type-box{background:#fff;border-radius:10px;padding:2px 4px;display:inline-block;}
  display:grid;
.type-badge{display:inline-block;padding:2px 6px 0;margin:2px;font-size:85%;font-weight:700;
  grid-template-columns:1fr 1fr;
            color:#fff;line-height:14px;border-radius:4px;text-shadow:0 1px 1px rgba(0,0,0,.4);}
  gap:6px;
.type-Bug      {background:#A8B820}.type-Dark {background:#705848}.type-Dragon{background:#7038F8}
}
.type-Electric {background:#F8D030}.type-Fairy{background:#EE99EE}.type-Fighting{background:#C03028}
.dual-col .cell{
.type-Fire    {background:#F08030}.type-Flying{background:#A890F0}.type-Ghost {background:#705898}
  background:#fff;
.type-Grass    {background:#78C850}.type-Ground{background:#E0C068}.type-Ice  {background:#98D8D8}
  border-radius:10px;
.type-Normal   {background:#A8A878}.type-Poison{background:#A040A0}.type-Psychic{background:#F85888}
   padding:6px 4px;
.type-Rock    {background:#B8A038}.type-Steel{background:#B8B8D0}.type-Water {background:#6890F0}
  text-align:center;
  font-weight:bold;
}
.dual-col.smalltxt .cell{font-size:90%}


/* tighten TD padding so nested tables fit nicely */
/* ── abilities two-col grid ─────────────────────── */
table.pkmn-infobox td{padding:4px 6px}
.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 bar -------------------------------------------- */
/* ── EV yield row (fixed 1-line grid) ───────────── */
.evbar {                    /* wrapper <td> */
.ev-wrapper{text-align:center;}
    display:flex;
.ev-wrapper .ttl{font-weight:700;margin:4px 0;}
    justify-content:center;
.ev-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:4px;}
    align-items:center;
.ev-box{display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex-wrap:nowrap;        /* keep one row */
        min-height:36px;border-radius:10px;font-weight:700;font-size:90%;color:#000;}
    gap:4px;
.ev-HP   {background:#A7DB8D}.ev-Atk {background:#F5AC78}.ev-Def {background:#FAE078}
    padding:6px 0;
.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%;}
span.ev-box {
    display:inline-block;
    width:46px;              /* 46×6 + gaps ≈ fits 280 px table */
    min-height:46px;
    border-radius:12px;
    font-weight:bold;
    text-align:center;
    line-height:18px;
    color:#000;
    background:#ddd;        /* default */
}
span.ev-box .value { display:block; font-size:110%; padding-top:4px; }
span.ev-box .label { display:block; font-size:80%; }
 
/* pastel colours per stat (matches Bulbapedia) */
span.ev-HP      { background:#A7DB8D; }
span.ev-Atk    { background:#F5AC78; }
span.ev-Def    { background:#FAE078; }
span.ev-SpAtk  { background:#9DB7F5; }
span.ev-SpDef  { background:#AFAFDC; }
span.ev-Speed  { background:#FA92B2; }
 
/* ───── Bulbapedia-style EV yield row ──────────────────────────────── */
.ev-wrapper     { text-align:center; }
.ev-wrapper .ttl { font-weight:bold; margin:4px 0; }
 
/* --- EV flex row  →  now Grid with six equal columns ---------------- */
.ev-row{
    display:grid;
    grid-template-columns:repeat(6,1fr); /* exactly 6 boxes per row  */
    gap:4px;                             /* spacing between boxes    */
    margin-top:4px;                     /* little space under Total  */
}
 
/* the boxes no longer need fixed width; let them fill the grid cell  */
span.ev-box{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:36px;                     /* keep the height you like  */
    border-radius:10px;
    font-weight:bold;
    line-height:18px;
    color:#000;
    font-size:90%;
    box-sizing:border-box;
    width:100%;                          /* stretch to cell            */
}
 
 
/* pastel colours close to Bulbapedia */
.ev-HP     { background:#A7DB8D; } /* light green  */
.ev-Atk     { background:#F5AC78; } /* peach        */
.ev-Def     { background:#FAE078; } /* light yellow  */
.ev-SpAtk   { background:#9DB7F5; } /* sky blue      */
.ev-SpDef   { background:#C6C1E5; } /* periwinkle    */
.ev-Speed   { background:#FA92B2; } /* pink          */
 
/* tighten white panel that holds the type badges */
.type-box{
  background:#fff;
  border-radius:10px;
  padding:2px 4px;  /* ↓ from 12-ish */
  display:inline-block;
}
 
/* Abilities two-col grid */
.abil-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.abil-grid .abil{
  padding:4px 2px;
  font-weight:700;
}
.abil-grid .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;
}

Revision as of 19:09, 17 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{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%;}
Retrieved from "https://wiki.pixelrus.net/index.php?title=MediaWiki:Common.css&oldid=446"