Template:StatTable/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* frame | /* ── frame ─────────────────────────────────────────── */ | ||
.statbox table{ | .statbox table{ | ||
border:3px solid; | 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:100%; | ||
font-family:inherit; | font-family:inherit; | ||
} | } | ||
. | |||
/* ── first column: label + value ───────────────────── */ | |||
.lab{ | |||
display:flex; | |||
justify-content:space-between; | |||
align-items:center; | |||
padding:6px 8px; | |||
font-weight:700; | font-weight:700; | ||
font-size:110%; | font-size:110%; | ||
white-space:nowrap; | |||
} | } | ||
/* ── second column: bar background ─────────────────── */ | |||
td.bar{padding:0} | |||
.fill{ | .fill{ | ||
height:20px; | height:20px; | ||
border:1px solid rgba(0,0,0,.25); | border:1px solid rgba(0,0,0,.25); | ||
background:#777; /* replaced inline per-row */ | |||
} | } | ||
. | /* row colours + bar colours */ | ||
. | .row-hp {background:#ff9a9a} .row-hp .fill{background:#ff5757} | ||
.row-atk {background:#f6c19e} .row-atk .fill{background:#e48a39} | |||
.row-def {background:#fff2b3} .row-def .fill{background:#f2cf45} | |||
.row-spa {background:#bcd0ff} .row-spa .fill{background:#6d93ff} | |||
.row-spd {background:#cfe8c4} .row-spd .fill{background:#62b455} | |||
.row-spe {background:#f8bfd8} .row-spe .fill{background:#f27ab0} | |||
/* total row */ | |||
.total {background:#d7d8e8} | |||
.total .lab{padding:6px;font-weight:700} | |||
.total .bar{background:none} | |||
Revision as of 04:07, 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; width:100%;
font-family:inherit;
}
/* ── first column: label + value ───────────────────── */
.lab{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 8px;
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 */
}
/* row colours + bar colours */
.row-hp {background:#ff9a9a} .row-hp .fill{background:#ff5757}
.row-atk {background:#f6c19e} .row-atk .fill{background:#e48a39}
.row-def {background:#fff2b3} .row-def .fill{background:#f2cf45}
.row-spa {background:#bcd0ff} .row-spa .fill{background:#6d93ff}
.row-spd {background:#cfe8c4} .row-spd .fill{background:#62b455}
.row-spe {background:#f8bfd8} .row-spe .fill{background:#f27ab0}
/* total row */
.total {background:#d7d8e8}
.total .lab{padding:6px;font-weight:700}
.total .bar{background:none}