Template:BaseStats: Difference between revisions

From PokéFarm Q Official Wiki
Jump to navigation Jump to search
No edit summary
m (Another size adjustment.)
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div class="base-stats-table" style="max-width: 500px; display: inline-block;"><!--
<noinclude>{{Note|This template does not display properly with undefined variables. As such, it uses [[Lunupine]]'s information for this example.}}{{BaseStats|63|73|50|94|62|120}}</noinclude><includeonly><div class="base-stats-table" style="width: 50%; min-width: 262px; display: inline-block; vertical-align: top; margin: 4px 0;"><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_hp.png|HP]]</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: calc({{{1}}} / 255 * 100%);">{{{1}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_Health.png|HP]]</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #c0c0c0; background-color: #f0f0f0; width: {{#expr: ({{{1}}} / 255)^(0.5) * 100}}%;">{{{1}}}</b></div><!--
    --></div><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_atk.png|Attack]]</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; border-top: none; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: calc({{{2}}} / 255 * 100%);">{{{2}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_Attack.png|Attack]]</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; border-top: none; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #c0c0c0; background-color: #f0f0f0; width: {{#expr: ({{{2}}} / 255)^(0.5) * 100}}%;">{{{2}}}</b></div><!--
    --></div><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_def.png|Defence]]</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; border-top: none; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: calc({{{3}}} / 255 * 100%);">{{{3}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_Defence.png|Defence]]</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; border-top: none; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #c0c0c0; background-color: #f0f0f0; width: {{#expr: ({{{3}}} / 255)^(0.5) * 100}}%;">{{{3}}}</b></div><!--
    --></div><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_sat.png|Special Attack]]</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; border-top: none; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: calc({{{4}}} / 255 * 100%);">{{{4}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_Special_Attack.png|Special Attack]]</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; border-top: none; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #c0c0c0; background-color: #f0f0f0; width: {{#expr: ({{{4}}} / 255)^(0.5) * 100}}%;">{{{4}}}</b></div><!--
    --></div><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_sdf.png|Special Defence]]</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; border-top: none; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: calc({{{5}}} / 255 * 100%);">{{{5}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_Special_Defence.png|Special Defence]]</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; border-top: none; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #c0c0c0; background-color: #f0f0f0; width: {{#expr: ({{{5}}} / 255)^(0.5) * 100}}%;">{{{5}}}</b></div><!--
    --></div><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_spd.png|Speed]]</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; border-top: none; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: calc({{{6}}} / 255 * 100%);">{{{6}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">[[File:Stat_Speed.png|Speed]]</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; border-top: none; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #c0c0c0; background-color: #f0f0f0; width: {{#expr: ({{{6}}} / 255)^(0.5) * 100}}%;">{{{6}}}</b></div><!--
    --></div><!--


     --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box;">Total</div><!--
     --><div style="display: flex; align-items: center;"><!--
    --><div class="stat" style="border: 1px solid #c0c0c0; border-top: none; display: inline-block; width: calc(100% - 36px); box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box;  border-right: 1px solid #f2f2f2; background-color: #f0f0f0; width: 100%;">{{#expr:{{{1}}} + {{{2}}} + {{{3}}} + {{{4}}} + {{{5}}} + {{{6}}}}}</b></div><!--
        --><div class="stat" style="padding-right: 4px; width: 36px; display: inline-block; box-sizing: border-box; text-align: center;">Total</div><!--
        --><div class="expbar" style="border: 1px solid #c0c0c0; border-top: none; display: block; flex-grow: 1; box-sizing: border-box;"><b class="bar" style="padding-right: 4px; display: inline-block; text-align: right; box-sizing: border-box; background-color: #f0f0f0; width: 100%;">{{#expr:{{{1}}} + {{{2}}} + {{{3}}} + {{{4}}} + {{{5}}} + {{{6}}}}}</b></div><!--
    --></div><!--


--></div>
--></div></includeonly>

Latest revision as of 19:58, 17 December 2017

Note: This template does not display properly with undefined variables. As such, it uses Lunupine's information for this example.
HP
63
Attack
73
Defence
50
Special Attack
94
Special Defence
62
Speed
120
Total
462