|
|
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly><templatestyles src="Template:StatTable/styles.css"/> |
| <!-- ============================================================ | |
| Template:StatTable – standalone Bulbapedia-style base-stat bars
| |
| Parameters (all required)
| |
| |HP |Attack |Defense |SpAtk |SpDef |Speed
| |
| Optional
| |
| |frame = #hex (border / frame colour, default #444)
| |
| ================================================================ -->
| |
| <div class="statbox"> | | <div class="statbox"> |
| | <table style="--frame:{{{frame|#444}}}"> |
|
| |
|
| <style> | | <!-- helper to avoid repetition --> |
| /* ▨▨▨ frame & layout ▨▨▨ */
| | {{#vardefine:Row |
| .statbox table{
| | |<tr class="row-{{{1}}}"> |
| border:3px solid var(--frame,#444); /* overridable via |frame */
| | | <th>{{{2}}}:</th> |
| border-radius:10px;
| | | <td class="val">{{{3}}}</td> |
| background:#d7d8e8; /* light lavender */
| | | <td class="bar"><div class="fill" style="width:{{#expr: round({{{3}}} * 100 / 255 ,0)}}%"></div></td> |
| border-collapse:separate;
| | |</tr> |
| margin:auto; max-width:620px; width:100%;
| | }} |
| font-family:inherit;
| |
| } | |
| .statbox th{
| |
| width:110px; padding:6px 4px; text-align:left;
| |
| font-weight:700; font-size:110%;
| |
| }
| |
| .statbox td.val{
| |
| width:48px; text-align:right; padding-right:6px; font-weight:700;
| |
| } | |
| .statbox td.bar{
| |
| width:255px; padding:0;
| |
| } | |
| .statbox td.bar::before{ /* coloured bar */
| |
| content:''; display:block; height:20px;
| |
| background:var(--bar,#777);
| |
| border:1px solid rgba(0,0,0,.25);
| |
| width:calc( var(--percent,0) * 1% );
| |
| } | |
|
| |
|
| /* ▨▨▨ row backgrounds + bar colours ▨▨▨ */
| | <!-- six stats --> |
| .row-hp {background:#ff9a9a} .row-hp td.bar::before{--bar:#ff5757}
| | {{#var:Row|hp |HP |{{{HP}}} }} |
| .row-atk{background:#f6c19e} .row-atk td.bar::before{--bar:#e48a39}
| | {{#var:Row|atk|Attack |{{{Attack}}}}} |
| .row-def{background:#fff2b3} .row-def td.bar::before{--bar:#f2cf45}
| | {{#var:Row|def|Defense |{{{Defense}}}}} |
| .row-spa{background:#bcd0ff} .row-spa td.bar::before{--bar:#6d93ff}
| | {{#var:Row|spa|Sp. Atk|{{{SpAtk}}} }} |
| .row-spd{background:#cfe8c4} .row-spd td.bar::before{--bar:#62b455}
| | {{#var:Row|spd|Sp. Def|{{{SpDef}}} }} |
| .row-spe{background:#f8bfd8} .row-spe td.bar::before{--bar:#f27ab0}
| | {{#var:Row|spe|Speed |{{{Speed}}} }} |
|
| |
|
| /* total */
| | <!-- total row --> |
| .statbox .total-lab{padding:6px;font-weight:700;background:#d7d8e8}
| |
| .statbox .total-val{padding:6px;text-align:right;background:#ffffff;font-weight:700}
| |
| </style>
| |
| | |
| <table style="--frame:{{{frame|#444}}}">
| |
| <!-- HP --> | |
| <tr class="row-hp">
| |
| <th>HP:</th>
| |
| <td class="val">{{{HP}}}</td>
| |
| <td class="bar" style="--percent:{{#expr: round({{{HP}}}*100/255,0) }}"></td>
| |
| </tr>
| |
| <!-- Attack -->
| |
| <tr class="row-atk">
| |
| <th>Attack:</th>
| |
| <td class="val">{{{Attack}}}</td>
| |
| <td class="bar" style="--percent:{{#expr: round({{{Attack}}}*100/255,0) }}"></td>
| |
| </tr>
| |
| <!-- Defense -->
| |
| <tr class="row-def">
| |
| <th>Defense:</th>
| |
| <td class="val">{{{Defense}}}</td>
| |
| <td class="bar" style="--percent:{{#expr: round({{{Defense}}}*100/255,0) }}"></td>
| |
| </tr>
| |
| <!-- Sp. Atk -->
| |
| <tr class="row-spa">
| |
| <th>Sp. Atk:</th>
| |
| <td class="val">{{{SpAtk}}}</td>
| |
| <td class="bar" style="--percent:{{#expr: round({{{SpAtk}}}*100/255,0) }}"></td>
| |
| </tr>
| |
| <!-- Sp. Def -->
| |
| <tr class="row-spd">
| |
| <th>Sp. Def:</th>
| |
| <td class="val">{{{SpDef}}}</td>
| |
| <td class="bar" style="--percent:{{#expr: round({{{SpDef}}}*100/255,0) }}"></td>
| |
| </tr>
| |
| <!-- Speed -->
| |
| <tr class="row-spe">
| |
| <th>Speed:</th>
| |
| <td class="val">{{{Speed}}}</td>
| |
| <td class="bar" style="--percent:{{#expr: round({{{Speed}}}*100/255,0) }}"></td>
| |
| </tr>
| |
| <!-- Total -->
| |
| <tr> | | <tr> |
| <th class="total-lab">Total:</th> | | <th class="total-lab">Total:</th> |
| <td colspan="2" class="total-val">{{#expr:{{{HP}}}+{{{Attack}}}+{{{Defense}}}+{{{SpAtk}}}+{{{SpDef}}}+{{{Speed}}}}}</td> | | <td colspan="2" class="total-val"> |
| | {{#expr: {{{HP}}}+{{{Attack}}}+{{{Defense}}}+{{{SpAtk}}}+{{{SpDef}}}+{{{Speed}}} }} |
| | </td> |
| </tr> | | </tr> |
| | |
| </table> | | </table> |
| </div> | | </div></includeonly><noinclude> |
| </includeonly><noinclude> | |
| ==Usage== | | ==Usage== |
| <nowiki>{{StatTable
| | <pre>{{StatTable |
| |HP=80 |Attack=82 |Defense=83 |SpAtk=100 |SpDef=100 |Speed=80 | | |HP=80 |Attack=82 |Defense=83 |SpAtk=100 |SpDef=100 |Speed=80 |
| |frame=#78C850 <!-- optional border colour --> | | |frame=#78C850 <!-- optional border colour --> |
| }}</nowiki> | | }}</pre> |
| [[Category:Template documentation]] | | [[Category:Template documentation]] |
| </noinclude> | | </noinclude> |