Template:StatTable/styles.css: Difference between revisions

From I-Pixelmon
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
Tags: Manual revert Reverted
Line 1: Line 1:
/* ── Frame & Layout ───────────────────────────────── */
/* ── frame ─────────────────────────────────────────── */
.statbox table {
.statbox table{
   border: 3px solid #444;           /* overridden by inline |frame= */
   border:3px solid #444;     /* colour is overridden inline in the template */
   border-radius: 10px;
   border-radius:10px;
   background: #d7d8e8;
   background:#d7d8e8;
   border-collapse: separate;
   border-collapse:separate;
   margin: auto;
   margin:auto;
   max-width: 620px;
   max-width:620px;
  width: auto;                      /* shrink-to-fit */
   font-family:inherit;
   font-family: inherit;
}
}


/* ── First column (stat name/value) & Bar column ───────────────── */
/* ── first column: label + value ───────────────────── */
.statbox td.bar {
.lab{
  padding: 0;
   display:flex;
  width: 255px;                    /* fixed bar cell width */
   justify-content:space-between;
}
   align-items:center;
.statbox .lab {
   font-weight:700;
   display: flex;
   font-size:110%;
   justify-content: space-between;
   white-space:nowrap;
   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 ─────────────────────────────────── */
/* ── second column: bar background ─────────────────── */
.statbox td.range,
td.bar{padding:0}
.statbox th.hdr-sub {
.fill{
  text-align: center;
   height:20px;
  width: 100px;                    /* adjust as needed */
   border:1px solid rgba(0,0,0,.25);
}
   background:#777;           /* replaced inline per-row */
.statbox td.range {
   padding: 3px 6px;
   vertical-align: middle;
}
.statbox td.range small {
   display: block;
  font-size: 90%;
}
}


/* ── Header styling ────────────────────────────────── */
.statbox td.bar {
.statbox thead th {
   width: 255px;
  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 ───────────────────────── */
/* row colours + bar colours */
.statbox tr.row-hp  { background: #9EE865; }
.row-hp  {background:#9EE865} .row-hp  .fill{background:#69DC12}
.statbox tr.row-hp  .fill { background: #69DC12; }
.row-atk {background:#F5DE69} .row-atk .fill{background:#EFCC18}
.statbox tr.row-atk { background: #F5DE69; }
.row-def {background:#F09A65} .row-def .fill{background:#E86412}
.statbox tr.row-atk .fill { background: #EFCC18; }
.row-spa {background:#66D8F6} .row-spa .fill{background:#14C3F1}
.statbox tr.row-def { background: #F09A65; }
.row-spd {background:#899EEA} .row-spd .fill{background:#4A6ADF}
.statbox tr.row-def .fill { background: #E86412; }
.row-spe {background:#E46CCA} .row-spe .fill{background:#D51DAD}
.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 ────────────────────────────────────── */
/* total row */
.statbox tr.total {
.total   {background:#d7d8e8}
  background: #d7d8e8;
.total .lab{padding:6px;font-weight:700}
}
.total .bar{background:none}
.statbox tr.total .lab {
  padding: 6px;
  font-weight: 700;
}
.statbox tr.total .bar {
  background: none;
}

Revision as of 06:15, 19 May 2025

/* ── frame ─────────────────────────────────────────── */
.statbox table{
  border:3px solid #444;      /* colour is overridden inline in the template */
  border-radius:10px;
  background:#d7d8e8;
  border-collapse:separate;
  margin:auto;
  max-width:620px;
  font-family:inherit;
}

/* ── first column: label + value ───────────────────── */
.lab{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  font-size:110%;
  white-space:nowrap;
}

/* ── 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}
Retrieved from "http://pixelmonwiki.snowbirdmv.com/index.php?title=Template:StatTable/styles.css&oldid=631"