Template:StatTable/styles.css: Difference between revisions

From I-Pixelmon
Jump to navigation Jump to search
(Created page with "→‎=== overall frame ===: table.stat-chart { width: 420px; →‎static width; tweak to suit your wiki: border: 3px solid #666; border-radius: 8px; background: #d6d6e6; →‎pale lavender overall: font-size: 90%; line-height: 1.2em; color: #000; border-collapse: collapse; } →‎header/label cells: table.stat-chart th.lbl, table.stat-chart .total { text-align: left; padding: 4px 6px; font-weight: 700; }...")
 
No edit summary
Line 1: Line 1:
/* === overall frame === */
/* one logical row */
table.stat-chart {
.stat-row {
    width: 420px;               /* static width; tweak to suit your wiki */
  display: grid;
    border: 3px solid #666;
  grid-template-columns: 8.5em auto 3.5em;   /* label · bar · value */
    border-radius: 8px;
  font-weight: 700;
    background: #d6d6e6;       /* pale lavender overall */
    font-size: 90%;
    line-height: 1.2em;
    color: #000;
    border-collapse: collapse;
}
}


/* header/label cells */
/* label cell (scope=row) */
table.stat-chart th.lbl,
.stat-lbl {
table.stat-chart .total {
  padding: 2px 4px;
    text-align: left;
  text-align: right;
    padding: 4px 6px;
    font-weight: 700;
}
}


/* numeric value cells */
/* numerical value at the far right */
table.stat-chart td.num {
.stat-val {
    width: 40px;
  padding: 2px 4px;
    text-align: right;
  text-align: right;
    padding-right: 6px;
  background: #dcdce9;           /* same slate-grey as Bulbapedia */
    font-weight: 700;
}
}


/* cell holding the coloured bar */
/* bar container (light tint)  */
table.stat-chart td.bar-cell {
.stat-bar {
    width: 255px;               /* max bar length + 1-px border */
  position: relative;
    padding: 0;
  height: 18px;
}
}


/* coloured span – gets inline width from template */
/* coloured inner bar (darker tint) */
table.stat-chart .bar {
.stat-fill {
    display: inline-block;
  position: absolute;
    height: 24px;
  top: 0; left: 0;
    border: 1px solid rgba(0,0,0,.3);
  height: 100%;
}
}


/* === stat colours (light row + dark bar) === */
/* tints ----------------------------------------------------------- */
table.stat-chart tr:nth-child(1)  { background:#ffb6b6 } /* HP light */
.hp  { background:#ffb1b1; } .hp  .stat-fill{background:#ff6b6b;}
.bar.hp  { background:#ff6363 }
.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;}


table.stat-chart tr:nth-child(2)  { background:#f7c79c } /* Attack light */
/* total row ------------------------------------------------------- */
.bar.atk { background:#e9944a }
.total-row {
 
  background:#dcdce9;
table.stat-chart tr:nth-child(3)  { background:#fbe79c } /* Defense light */
  text-align:center;
.bar.def { background:#f4d249 }
  padding:4px;
 
  font-weight:700;
table.stat-chart tr:nth-child(4)  { background:#b7c5f9 } /* Sp.Atk light */
  border-top:2px solid #555;
.bar.spa { background:#6a8bf6 }
 
table.stat-chart tr:nth-child(5)  { background:#c2e3b7 } /* Sp.Def light */
.bar.spd { background:#71ba6a }
 
table.stat-chart tr:nth-child(6)  { background:#f7b6d1 } /* Speed light */
.bar.spe { background:#ef6aa7 }
 
/* total row */
table.stat-chart td.total-val {
    text-align: right;
    padding: 4px 8px;
    font-weight: 700;
}
}

Revision as of 03:46, 19 May 2025

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