Template:StatTable/styles.css: Difference between revisions

Revision as of 06:14, 19 May 2025

/* ── Frame & Layout ───────────────────────────────── */
.statbox table {
  border: 3px solid #444;           /* overridden by inline |frame= */
  border-radius: 10px;
  background: #d7d8e8;
  border-collapse: separate;
  margin: auto;
  max-width: 620px;
  width: auto;                      /* shrink-to-fit */
  font-family: inherit;
}

/* ── First column (stat name/value) & Bar column ───────────────── */
.statbox td.bar {
  padding: 0;
  width: 255px;                     /* fixed bar cell width */
}
.statbox .lab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 110%;
  white-space: nowrap;
}
.statbox .fill {
  height: 20px;
  border: 1px solid rgba(0,0,0,0.25);
  background: #777;                 /* overridden per-row */
}

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

/* ── Header styling ────────────────────────────────── */
.statbox thead th {
  background: #e0e1eb;
  font-weight: 700;
  padding: 4px 8px;
  white-space: nowrap;
  border-bottom: 2px solid rgba(0,0,0,0.2);
}
/* Round top corners of the header row to match the table */
.statbox thead tr:first-child th.hdr-stat {
  border-top-left-radius: 10px;
}
.statbox thead tr:first-child th.hdr-range {
  border-top-right-radius: 10px;
}

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

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