Template:StatTable/styles.css

From I-Pixelmon
Jump to navigation Jump to search
/* one logical row */
.stat-row {
  display: grid;
  grid-template-columns: 8.5em auto 3.5em;   /* label · bar · value */
  font-weight: 700;
}

/* label cell (scope=row) */
.stat-lbl {
  padding: 2px 4px;
  text-align: right;
}

/* numerical value at the far right */
.stat-val {
  padding: 2px 4px;
  text-align: right;
  background: #dcdce9;           /* same slate-grey as Bulbapedia */
}

/* bar container (light tint)  */
.stat-bar {
  position: relative;
  height: 18px;
}

/* coloured inner bar (darker tint) */
.stat-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
}

/* tints ----------------------------------------------------------- */
.hp  { background:#ffb1b1; } .hp  .stat-fill{background:#ff6b6b;}
.atk { background:#f3c29e; } .atk .stat-fill{background:#f0a15b;}
.def { background:#f8eba3; } .def .stat-fill{background:#f3d659;}
.spa { background:#b9c8f5; } .spa .stat-fill{background:#81a0f3;}
.spd { background:#c6e4b6; } .spd .stat-fill{background:#9cd478;}
.spe { background:#f7bdd5; } .spe .stat-fill{background:#f593bd;}

/* total row ------------------------------------------------------- */
.total-row {
  background:#dcdce9;
  text-align:center;
  padding:4px;
  font-weight:700;
  border-top:2px solid #555;
}