Template:StatTable/styles.css: Difference between revisions

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 */
}