Difference between revisions of "Template:LHPersonTemplate"

From All The Fallen Stories
Jump to navigation Jump to search
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="flex-basis: 200px; display: flex; flex-direction: column; padding: .5em;">
<div style="flex: 0 0 auto; width: 400px; display: flex; flex-direction: row; padding: .5em; background-color: black; border: .2em solid white; border-radius: 1em; margin-right: .5em;">


<div style="width: 100%; text-align: center; background-color: black; color: white;">'''{{{name}}}'''</div>
<div style="flex: 0 0 200px; width: 200px; display: flex; flex-direction: column;">
 
<div style="width: calc(100%-.2em); text-align: center; background-color: black; color: white;">'''{{{name}}}'''</div>
<div style="width: 100%; text-align: center; background-color: black; color: white;">'''{{{relation}}}'''</div>
<div style="width: calc(100%-.2em); text-align: center; background-color: black; color: white;">'''{{{relation}}}'''</div>
 
<div style="flex: 1 1; display: flex; flex-direction: column; background-color: white; border: .2em solid black; border-radius: 1em; overflow: hidden;"><div style="flex: 1 1;"></div><div>[[File:Life Hacks_{{{pic|NoPic}}}.png|200px]]</div></div>
<div style="flex: 1 1; background-color: white; border: .2em solid black; overflow: hidden;">{{{pic}}}</div>
</div>


<div style="flex: 0 0 200px; width: 200px; display: flex; flex-direction: column;">
<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: 2em; height: 1.5em; background-color: black; color: lawngreen; text-align: center;">
<div style="width: 2em; height: 1.5em; background-color: black; color: lawngreen; text-align: center;">
<div style="font-size: 150%; margin-top: -.45em;">☺</div>
<div style="font-size: 150%; margin-top: -.45em;">☺</div>
</div>
</div>
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: gray;">
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: dimgray;">
<div style="position: absolute; top: 0; left: 0; width: {{{friend|0}}}%; height: 1.5em; background-color: lawngreen;"></div>
<div style="position: absolute; top: 0; left: 0; width: {{{friend|0}}}%; height: 1.5em; background-color: lawngreen;"></div>
<div style="position: absolute; top: 0; right: 0; width: {{{enemy|0}}}%; height: 1.5em; background-color: red;"></div>
<div style="position: absolute; top: 0; right: 0; width: {{{enemy|0}}}%; height: 1.5em; background-color: red; opacity: .8;"></div>
</div>
</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: red; text-align: center;">☹</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: red; text-align: center;">☹</div>
Line 20: Line 21:
<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: 2em; height: 1.5em; background-color: black; color: dodgerblue; text-align: center;">♚</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: dodgerblue; text-align: center;">♚</div>
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: gray;">
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: dimgray;">
<div style="position: absolute; top: 0; left: 0; width: {{{dom|0}}}%; height: 1.5em; background-color: dodgerblue;"></div>
<div style="position: absolute; top: 0; right: 0; width: {{{sub|0}}}%; height: 1.5em; background-color: mediumpurple;"></div>
<div style="position: absolute; top: 0; right: 0; width: {{{sub|0}}}%; height: 1.5em; background-color: yellow;"></div>
<div style="position: absolute; top: 0; left: 0; width: {{{dom|0}}}%; height: 1.5em; background-color: dodgerblue; opacity: .8;"></div>
</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: mediumpurple; text-align: center;">♟</div>
</div>
 
<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: 2em; height: 1.5em; background-color: black; color: silver; text-align: center;">✋</div>
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: dimgray;">
<div style="position: absolute; top: 0; left: 0; width: {{{trust|0}}}%; height: 1.5em; background-color: silver;"></div>
<div style="position: absolute; top: 0; right: 0; width: {{{fear|0}}}%; height: 1.5em; background-color: yellow; opacity: .8;"></div>
</div>
</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: yellow; text-align: center;"></div>
<div style="width: 2em; height: 1.5em; background-color: black; color: yellow; text-align: center;"></div>
</div>
</div>


<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: calc(100%-.2em); height: 1.5em; text-align: center; display: flex; border: .2em solid black;">
<div style="width: 2em; height: 1.5em; background-color: black; color: white; text-align: center;">❤</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: white; text-align: center;">❤</div>
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: gray;">
<div style="position: relative; flex: 1 1; height: 1.5em; background-color: dimgray;">
<div style="position: absolute; top: 0; left: 0; width: {{{fam|0}}}%; height: 1.5em; background-color: white;"></div>
<div style="position: absolute; top: 0; left: 0; width: {{{fam|0}}}%; height: 1.5em; background-color: white;"></div>
<div style="position: absolute; top: 0; left: 0; width: {{{love|0}}}%; height: 1.5em; background-color: pink;"></div>
<div style="position: absolute; top: 0; right: 0; width: {{{love|0}}}%; height: 1.5em; background-color: hotpink; opacity: .8;"></div>
</div>
</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: pink; text-align: center;">❤</div>
<div style="width: 2em; height: 1.5em; background-color: black; color: hotpink; text-align: center;">❤</div>
</div>
</div>


<div style="flex 1 1 auto; width: calc(100%-.4em); text-align: left; background-color: white; color: black; border: .2em solid black; border-radius: 1em; padding: .5em;">
Notes: ''{{{notes|none}}}''
</div>
</div>
</div>
</div>


<noinclude>[[Category:Life Hacks| ]]  [[Category: Templates|LHPersonTemplate]]</noinclude>
<noinclude>[[Category:Life Hacks/Templates|LHPersonTemplate]]  [[Category: Templates|LHPersonTemplate]]</noinclude>

Latest revision as of 17:56, 25 February 2017

{{{name}}}
{{{relation}}}

Notes: none