Template:StatTable/styles.css: Difference between revisions

From I-Pixelmon
Jump to navigation Jump to search
(Created page with "→‎=== overall frame ===: table.stat-chart { width: 420px; →‎static width; tweak to suit your wiki: border: 3px solid #666; border-radius: 8px; background: #d6d6e6; →‎pale lavender overall: font-size: 90%; line-height: 1.2em; color: #000; border-collapse: collapse; } →‎header/label cells: table.stat-chart th.lbl, table.stat-chart .total { text-align: left; padding: 4px 6px; font-weight: 700; }...")
 
No edit summary
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* === overall frame === */
/* ── frame ─────────────────────────────────────────── */
table.stat-chart {
.statbox table{
    width: 420px;               /* static width; tweak to suit your wiki */
  border:3px solid #444;     /* colour is overridden inline in the template */
    border: 3px solid #666;
  border-radius:10px;
    border-radius: 8px;
  background:#d7d8e8;
    background: #d6d6e6;       /* pale lavender overall */
  border-collapse:separate;
    font-size: 90%;
  margin-top: 10px;
    line-height: 1.2em;
  max-width:620px;
    color: #000;
  font-family:inherit;
    border-collapse: collapse;
}
}


/* header/label cells */
.statnumber{
table.stat-chart th.lbl,
  display:inline-block;      /* reserve space even for 2-digit # */
table.stat-chart .total {
  width:3ch;                  /* enough for 000-255              */
    text-align: left;
  text-align:right;           /* flush against the right edge     */
     padding: 4px 6px;
    font-weight: 700;
}
}


/* numeric value cells */
/* ── first column: label + value ───────────────────── */
table.stat-chart td.num {
.lab{
    width: 40px;
  display:flex;
    text-align: right;
  justify-content:space-between;
    padding-right: 6px;
  align-items:center;
    font-weight: 700;
  font-weight:700;
  font-size:110%;
  white-space:nowrap;
  min-width: 100px;
  padding:0 4px;              /* tiny gap left/right              */
}
}


/* cell holding the coloured bar */
/* ── second column: bar background ─────────────────── */
table.stat-chart td.bar-cell {
td.bar{padding:0}
    width: 255px;               /* max bar length + 1-px border */
.fill{
    padding: 0;
  height:20px;
  border:1px solid rgba(0,0,0,.25);
  background:#777;           /* replaced inline per-row */
}
}


/* coloured span – gets inline width from template */
.statbox td.bar {
table.stat-chart .bar {
  width: 255px;
    display: inline-block;
    height: 24px;
    border: 1px solid rgba(0,0,0,.3);
}
}


/* === stat colours (light row + dark bar) === */
/* row colours + bar colours */
table.stat-chart tr:nth-child(1) { background:#ffb6b6 } /* HP light */
.row-hp  {background:#9EE865} .row-hp .fill{background:#69DC12}
.bar.hp  { background:#ff6363 }
.row-atk {background:#F5DE69} .row-atk .fill{background:#EFCC18}
.row-def {background:#F09A65} .row-def .fill{background:#E86412}
.row-spa {background:#66D8F6} .row-spa .fill{background:#14C3F1}
.row-spd {background:#899EEA} .row-spd .fill{background:#4A6ADF}
.row-spe {background:#E46CCA} .row-spe .fill{background:#D51DAD}


table.stat-chart tr:nth-child(2)  { background:#f7c79c } /* Attack light */
/* total row */
.bar.atk { background:#e9944a }
.total  {background:#d7d8e8}
.total .lab{padding:6px;font-weight:700}
.total .bar{background:none}


table.stat-chart tr:nth-child(3)  { background:#fbe79c } /* Defense light */
/* centre the two “Range” cells */
.bar.def { background:#f4d249 }
.statbox td.range{
 
  text-align:center;    /* horizontal */
table.stat-chart tr:nth-child(4)  { background:#b7c5f9 } /* Sp.Atk light */
  vertical-align:middle; /* vertical  */
.bar.spa { background:#6a8bf6 }
}
 
table.stat-chart tr:nth-child(5)  { background:#c2e3b7 } /* Sp.Def light */
.bar.spd { background:#71ba6a }


table.stat-chart tr:nth-child(6)  { background:#f7b6d1 } /* Speed light */
/* make the small sub-headers a bit smaller */
.bar.spe { background:#ef6aa7 }
.statbox th.hdr-sub{
 
  font-size:85%;
/* total row */
  font-weight:600;       /* keep them bold-ish */
table.stat-chart td.total-val {
    text-align: right;
    padding: 4px 8px;
    font-weight: 700;
}
}

Latest revision as of 05:28, 2 June 2025

/* ── frame ─────────────────────────────────────────── */
.statbox table{
  border:3px solid #444;      /* colour is overridden inline in the template */
  border-radius:10px;
  background:#d7d8e8;
  border-collapse:separate;
  margin-top: 10px;
  max-width:620px;
  font-family:inherit;
}

.statnumber{
  display:inline-block;       /* reserve space even for 2-digit # */
  width:3ch;                  /* enough for 000-255               */
  text-align:right;           /* flush against the right edge     */
}

/* ── first column: label + value ───────────────────── */
.lab{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:110%;
  white-space:nowrap;
  min-width: 100px;
  padding:0 4px;              /* tiny gap left/right              */
}

/* ── second column: bar background ─────────────────── */
td.bar{padding:0}
.fill{
  height:20px;
  border:1px solid rgba(0,0,0,.25);
  background:#777;            /* replaced inline per-row */
}

.statbox td.bar {
  width: 255px;
}

/* row colours + bar colours */
.row-hp  {background:#9EE865} .row-hp  .fill{background:#69DC12}
.row-atk {background:#F5DE69} .row-atk .fill{background:#EFCC18}
.row-def {background:#F09A65} .row-def .fill{background:#E86412}
.row-spa {background:#66D8F6} .row-spa .fill{background:#14C3F1}
.row-spd {background:#899EEA} .row-spd .fill{background:#4A6ADF}
.row-spe {background:#E46CCA} .row-spe .fill{background:#D51DAD}

/* total row */
.total   {background:#d7d8e8}
.total .lab{padding:6px;font-weight:700}
.total .bar{background:none}

/* centre the two “Range” cells */
.statbox td.range{
  text-align:center;     /* horizontal */
  vertical-align:middle; /* vertical   */
}

/* make the small sub-headers a bit smaller */
.statbox th.hdr-sub{
  font-size:85%;
  font-weight:600;       /* keep them bold-ish */
}
Retrieved from "http://pixelmonwiki.snowbirdmv.com/index.php?title=Template:StatTable/styles.css&oldid=40154"