View source for User:Tiddlywinks/PokemonDivbox

<div class="roundy infobox" style="float: right; text-align: center; min-width: 420px; background-color: #{{{{{type1|???}}} color}}; border: 2px solid #{{{{{type2|{{{type1|???}}}}}} color dark}}; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 3px;"><!-- main container OPEN -->

<div class="roundy" style="background-color: #{{{{{type1|???}}} color light}}; padding: 2px; border-spacing: 3px; grid-column-end: span 2; display: grid; grid-template-columns: 3fr 1fr; grid-gap: 3px"><!-- uncaptioned top container OPEN : two columns (3:1): names - ndex / images -->

<div class="roundy" style="background-color: #FFF; display: flex; align-items: center; padding: 5px;"><!-- names container OPEN -->
<div style="flex: 1;"><!-- left names OPEN -->
<div style="font-size: large; font-weight: bold;">{{{name|{{{tmname|Name}}}}}}</div>
<div>{{{tmname|}}}</div>
</div><!-- left names CLOSE -->
<div style="flex: 1;"><!-- right names OPEN -->
<div style="font-weight: bold;"><span lang="ja">{{{jname|Japanese}}}</span></div>
<div style="font-style: italic;">{{{jtranslit|}}}</div>
</div><!-- right names CLOSE -->
</div><!-- names container CLOSE -->

<div class="roundy" style="background-color: #FFF; display: flex;"><!-- NDex container OPEN -->
<div class="blacklinks" style="align-self: center; flex: 1; font-size: large; font-weight: bold;">[[List of Pokémon by National Pokédex number|#{{{ndex|???}}}]]</div><!-- NDex -->
</div><!-- NDex container CLOSE -->

<div class="roundy" style="background-color: #FFF; grid-column-end: span 2;"><!-- images container OPEN -->
<!-- tbd: form images/switches? -->
<div style="max-width: 420px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;"><!-- form selector OPEN -->
{{#if: {{{forms|}}}|<div class="roundy clicktoggle clicktoggle-active" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form1" style="border: 1px solid white; {{roundy|15px}}" data-active-style="border: 1px outset black;">[[File:{{{image|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|link=|70px|{{{form1|{{{name|{{{tmname|}}}}}}}}}]]</div>
{{#if: {{{form2|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form2" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image2|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form2|}}}.png}}}|link=|70px|{{{form2|{{{name|{{{tmname|}}}}}}}}}]]</div>
{{#if: {{{form3|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form3" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image3|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form3|}}}.png}}}|link=|70px|{{{form3|{{{name|{{{tmname|}}}}}}}}}]]</div>
{{#if: {{{form4|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form4" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image4|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form4|}}}.png}}}|link=|70px|{{{form4|{{{name|{{{tmname|}}}}}}}}}]]</div>
{{#if: {{{form5|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form5" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image5|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form5|}}}.png}}}|link=|70px|{{{form5|{{{name|{{{tmname|}}}}}}}}}]]</div>
{{#if: {{{form6|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form6" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image6|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form6|}}}.png}}}|link=|70px|{{{form6|{{{name|{{{tmname|}}}}}}}}}]]</div>}}}}}}}}}}}}
</div><!-- form selector CLOSE -->
<div><!-- big image container OPEN -->
<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form1"><!-- form1 OPEN -->
<div>[[File:{{{image|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form1|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
<div style="font-size: smaller;">{{{form1|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
</div><!-- form1 CLOSE -->
{{#if: {{{form2|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form2" style="display: none;"><!-- form2 OPEN -->
<div>[[File:{{{image2|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form2|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
<div style="font-size: smaller;">{{{form2|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
</div><!-- form2 CLOSE -->
{{#if: {{{form3|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form3" style="display: none;"><!-- form3 OPEN -->
<div>[[File:{{{image3|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form3|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
<div style="font-size: smaller;">{{{form3|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
</div><!-- form3 CLOSE -->
{{#if: {{{form4|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form4" style="display: none;"><!-- form4 OPEN -->
<div>[[File:{{{image4|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form4|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
<div style="font-size: smaller;">{{{form4|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
</div><!-- form4 CLOSE -->
{{#if: {{{form5|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form5" style="display: none;"><!-- form5 OPEN -->
<div>[[File:{{{image5|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form5|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
<div style="font-size: smaller;">{{{form5|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
</div><!-- form5 CLOSE -->
{{#if: {{{form6|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form6" style="display: none;"><!-- form6 OPEN -->
<div>[[File:{{{image6|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form6|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
<div style="font-size: smaller;">{{{form6|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
</div><!-- form6 CLOSE -->}}}}}}}}}}
</div><!-- big image container CLOSE -->
<div>[[a:Category:{{{name|{{{tmname|Bulbasaur}}}}}}|Images on the Bulbagarden Archives]]</div><!-- Archives link -->
</div><!-- images container CLOSE -->

</div><!-- uncaptioned top container CLOSE -->

<div class="roundy" style="background-color: #{{{{{type1|???}}} color light}}; display: flex; flex-direction: column;"><!-- captioned cell: types OPEN -->
<div class="blacklinks">'''[[Type]]s'''</div><!-- cell caption -->
<div class="roundy" style="background-color: #FFF; padding: 3px; flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px;"><!-- data space: types OPEN -->
<div class="roundy whitelinks" style="width: 70px; font-size: 85%; background: #{{{{{type1|???}}} color}}; {{roundy|5px}}">'''[[{{{type1|???}}} (type)|{{{type1|???}}}]]'''</div><!-- type 1 -->
{{#if: {{{type2|}}}|<div class="roundy whitelinks" style="width: 70px; font-size: 85%; background: #{{{{{type2|???}}} color}}; {{roundy|5px}}">'''[[{{{type2|???}}} (type)|{{{type2|???}}}]]'''</div>}}<!-- type 2 -->
</div><!-- data space: types CLOSE -->
</div><!-- captioned cell: types CLOSE -->

<div class="roundy" style="background-color: #{{{{{type1|???}}} color light}}; display: flex; flex-direction: column;"><!-- captioned cell: category OPEN -->
<div class="blacklinks">'''[[Pokémon category|Category]]'''</div><!-- cell caption -->
<div class="roundy" style="background-color: #FFF; padding: 3px; flex: 1;"><!-- data space: category OPEN -->
<div>{{{category|Unknown}}} Pokémon</div><!-- category -->
</div><!-- data space: category CLOSE -->
</div><!-- captioned cell: category CLOSE -->

<div class="roundy blacklinks" style="background-color: #{{{{{type1|???}}} color light}}; display: flex; flex-direction: column; grid-column-end: span 2;"><!-- captioned cell: Abilities OPEN -->
<div>'''[[Ability|Abilities]]'''</div><!-- cell caption -->
<div class="roundy" style="background-color: #FFF; padding: 3px; flex: 1; display: flex; align-items: center;"><!-- data space: Abilities OPEN -->
<div style="flex: 1;"><!-- standard Abilities OPEN -->
<div>[[{{{ability1|Cacophony}}} (Ability)|{{{ability1|Cacophony}}}]]</div><!-- Ability 1 -->
{{#if: {{{ability2|}}}|<div>or [[{{{ability2|Cacophony}}} (Ability)|{{{ability2|Cacophony}}}]]</div>}}<!-- Ability 2 -->
</div><!-- standard Abilities CLOSE -->
{{#if: {{{abilityd|}}}|<div style="flex: 1;"><!-- Hidden Ability OPEN -->
<div>[[{{{abilityd|Cacophony}}} (Ability)|{{{abilityd|Cacophony}}}]]</div><!-- Hidden Ability -->
<div style="font-size: smaller;">[[Hidden Ability]]</div><!-- caption -->
</div><!-- Hidden Ability CLOSE -->
}}
</div><!-- data space: Abilities CLOSE -->
</div><!-- captioned cell: Abilities CLOSE -->

<div class="roundy" style="background-color: #{{{{{type1|???}}} color light}}; display: flex; flex-direction: column;"><!-- captioned cell: gender OPEN -->
<div class="blacklinks">'''[[List of Pokémon by gender ratio|Gender ratio]]'''</div><!-- cell caption -->
<div class="roundy" style="background-color: #FFF; padding: 3px; flex: 1;"><!-- data space: gender OPEN -->
{{#ifeq: {{{malerate|unknown}}}|unknown||<div class="statbar" style="height: 10px; {{roundy|15px}}; background-image: linear-gradient(90deg, #3355FF 0% {{{malerate|87.5}}}%, #FF77DD 0%); border: 1px solid black;"></div><!-- gender ratio bar -->
}}
<div>{{#switch: {{{malerate|unknown}}}
|0=[[:Category:Female-only Pokémon|<span style="color:#FF6060;">100% female</span>]]
|12.5=[[:Category:Pokémon with a gender ratio of one male to seven females|<span style="color:#0000FF;">12.5% male</span><span style="color:#000;">,</span> <span style="color:#FF6060;">87.5% female</span>]]
|25=[[:Category:Pokémon with a gender ratio of one male to three females|<span style="color:#0000FF;">25% male</span><span style="color:#000;">,</span> <span style="color:#FF6060;">75% female</span>]]
|50=[[:Category:Pokémon with a gender ratio of one male to one female|<span style="color:#0000FF;">50% male</span><span style="color:#000;">,</span> <span style="color:#FF6060;">50% female</span>]]
|75=[[:Category:Pokémon with a gender ratio of three males to one female|<span style="color:#0000FF;">75% male</span><span style="color:#000;">,</span> <span style="color:#FF6060;">25% female</span>]]
|87.5=[[:Category:Pokémon with a gender ratio of seven males to one female|<span style="color:#0000FF;">87.5% male</span><span style="color:#000;">,</span> <span style="color:#FF6060;">12.5% female</span>]]
|100=[[:Category:Male-only Pokémon|<span style="color:#0000FF;">100% male</span>]]
|[[Gender unknown|<span style="color:#000;">Gender unknown</span>]]
}}</div><!-- description/category -->
</div><!-- data space: gender CLOSE -->
</div><!-- captioned cell: gender CLOSE -->

<div class="roundy" style="background-color: #{{{{{type1|???}}} color light}}; display: flex; flex-direction: column;"><!-- captioned cell: exp group OPEN -->
<div class="blacklinks">'''[[Experience|Leveling rate]]'''</div><!-- cell caption -->
<div class="roundy" style="background-color: #FFF; padding: 3px; flex: 1; display: flex; justify-content: center; align-items: center;"><!-- data space: exp group OPEN -->
<div>{{#switch: {{{lv100exp|Unknown}}}
|600,000|600000=Erratic
|800,000|800000=Fast
|1,000,000|1000000=Medium Fast
|1,059,860|1059860=Medium Slow
|1,250,000|1250000=Slow
|1,640,000|1640000=Fluctuating
|Unknown
}}</div><!-- exp group -->
</div><!-- data space: exp group CLOSE -->
</div><!-- captioned cell: exp group CLOSE -->

</div><!-- main container CLOSE --><noinclude>


{{Documentation}}

<!--
[[Category:Infobox templates]]
-->
</noinclude>