Template:StatTable/styles.css

From I-Pixelmon
Jump to navigation Jump to search
/* ── column widths ───────────────────────────────── */
.statbox col.col-bar   { width: 255px; }
.statbox col.col-range { width: 100px; } /* adjust to taste */

/* ── header styling ───────────────────────────────── */
.statbox thead th {
  background: #e0e1eb;    /* light header background */
  text-align: center;
  font-weight: 700;
  font-size:   90%;
  padding:     4px 8px;
  white-space: nowrap;
  border-bottom: 2px solid rgba(0,0,0,0.2);
}

/* merge the rounded corners if you like */
.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; }

/* ── range cells ────────────────────────────────── */
.statbox td.range {
  text-align: center;
  padding: 3px 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.statbox td.range small {
  display: block;
  font-size: 90%;
}

/* ── tweak your existing rules as before ───────── */
.statbox table {
  border:3px solid #444;
  border-radius:10px;
  background:#d7d8e8;
  border-collapse:separate;
  margin:auto;
  max-width:620px;
  font-family:inherit;
  width:auto;              /* let it shrink-to-fit */
}
.lab{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:110%;
  white-space:nowrap;
}
td.bar { padding:0 }
.fill{
  height:20px;
  border:1px solid rgba(0,0,0,.25);
  background:#777;
}
/* your row-colour rules stay the same */