Template:StatTable/styles.css: Difference between revisions

Revision as of 06:11, 19 May 2025

/* ── overall table ───────────────────────────────── */
.statbox table {
  border:3px solid #444;
  border-radius:10px;
  background:#d7d8e8;
  border-collapse:separate;
  margin:auto;
  max-width:620px;
  width:auto;              /* shrink-to-fit */
  font-family:inherit;
  /* default table-layout:auto is fine */
}

/* ── first column (auto) & bar column ───────────────── */
.statbox td.bar {
  padding:0;
  width:255px;             /* fix the bar cell */
}
.lab {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:110%;
  white-space:nowrap;
}
.fill {
  height:20px;
  border:1px solid rgba(0,0,0,.25);
  background:#777;
}

/* ── range columns ───────────────────────────────── */
.statbox td.range,
.statbox th.hdr-sub {
  text-align:center;
  width:100px;             /* choose a suitable width */
}
.statbox td.range {
  padding:3px 6px;
  vertical-align:middle;
}
.statbox td.range small {
  display:block;
  font-size:90%;
}

/* ── header rows ─────────────────────────────────── */
.statbox thead th {
  background:#e0e1eb;
  font-weight:700;
  padding:4px 8px;
  white-space:nowrap;
  border-bottom:2px solid rgba(0,0,0,0.2);
}
.statbox th.hdr-stat {
  /* your left-top corner styling if you like */
}
.statbox th.hdr-range {
  /* your right-top corner styling if you like */
}

/* ── row colours (keep yours) ─────────────────────── */
.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   {background:#d7d8e8}
.total .lab { padding:6px; font-weight:700 }
.total .bar { background:none }