Template:CryptoResultTest: Difference between revisions

m
no edit summary
No edit summary
mNo edit summary
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<!-- WIP. trying to emulate the in-game character creation screen. css:
<!-- WIP. trying to emulate the in-game character creation screen. css:
summary:hover {
cursor:pointer;
}


.build-container {
.build-side-header {
display:grid;
  position: relative;
align-items:flex-start;
  width: auto;
grid-template-areas:
  height: 1.8em;
"header header header"
  border: none;
"attr img exts"
  text-align: center;
"attr stuff exts"
  padding:0em;
"skills skills skills";
grid-template-columns:30% 30% 30%;
}
}


#build-header {
.build-side-header::before,
grid-area:header;
.build-side-header::after {
  position: absolute;
  width: 1px;
  height: 1.2em;
  content: "";
}
}


#build-attr {
.build-side-header::before {
grid-area:attr;
  left: 0;
}
  top: 0.6em;
  border-left: 2px solid #4A757E;
}
 
.build-side-header::after {
  right: 0;
  bottom: 0em;
  border-right: 2px solid #4A757E;
}
 
--><includeonly><div style="display:block;line-height:1.5em; font-family:Source Code Pro, Lucida Console, Consolas; font-size:medium; color:#b1c9c3; overflow:hidden;border:1px solid #053230;border-radius:2px;"><div style="background:#053230;height:1.5em;"></div><div style="padding:1em;">
<div id="build-header" style="line-height:1em;text-align:center;"><div class="pixel-image">[[File:headerlogo.png]]</div><h3 style="color:#cfc041;font-size:1.3rem;font-family:Source Code Pro;letter-spacing:0.1rem;font-weight:normal;">{{{buildname}}}</h3><div style="color:#77bfcf;">:by {{{author}}}:</div></div>
<div class="build-container" style="padding:0em 1em;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-evenly;">
<div id="build-attr" class="build-side" style="flex: 1 1 0;width:0;"><div class="build-side-header">
{{#tag:htmltag|<htmltag tagname="legend">Attributes</htmltag>
|tagname=fieldset
|style="border-top:2px solid #4A757E; border-bottom:none;border-left:none;border-right:none;margin:0px 0px -0.5em 0px;padding:0px;"
}}</div><!--
 
Attributes
 
--><div style="padding:1em;">Strength: <span style="float:right;">{{{strength}}}</span></br>Agility:<span style="float:right;">{{{agility}}}</span></br>Toughness:<span style="float:right;">{{{toughness}}}</span></br>Intelligence:<span style="float:right;">{{{intelligence}}}</span></br>Willpower:<span style="float:right;">{{{willpower}}}</span></br>Ego:<span style="float:right;">{{{ego}}}</span></div></div>
<div style="padding:0em 1em;flex: 1 1 0;width:0;"><div id="build-img" style="text-align:center;padding:1em;" class="pixel-image">[[File:subtype_{{lc:{{{class|apostle}}}}}.png|64px]]</div><div id="build-stuff" style="padding:0em 1em;grid-area:d">{{{class}}}</br>{{{genotype}}}</div>
</div><!--


#build-img{
Cybernetics/Mutations
grid-area:img;
}


#build-ext {
--><div id="build-ext" class="build-side" style="flex: 1 1 0;width:0;"><div class="build-side-header">{{#tag:htmltag
grid-area:exts;
|<htmltag tagname="legend">{{{extname}}}</htmltag>
}
|tagname=fieldset
|style="border-top:2px solid #4A757E; border-bottom:none;border-left:none;border-right:none;margin:0px 0em -1em 0em;"}}</div><div style="padding:1em;">{{{exts}}}</div></div></div><!--


#build-stuff {
Skills, other bonuses that aren't displayed in the original character sheet
grid-area:stuff;
}
#skills {
grid-area:skills;
}


.build-side-header::before {
--><div style="padding:0.5em 1em;">Starting skills: {{{skills}}}</div>
width:100px;
<div style="padding:0.5em 1em;">{{{extra}}}</div></div><div class="pixel-image" style="text-align:center;">[[File:build dots.png]]</div><!--
left:-100px;
}
.build-side-header::before, .qud-box-header::after {
    content: "";
    position: absolute;
    height: 1px;
    background: #77bfcf;
    top: 0.5em;
}
.build-side-header {
    position: relative;
text-align:center;
    top: -1em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    font-weight: bold;
    display: inline-block;
}


--><includeonly><div style="overflow:wrap;"><!--<summary><details>Code</details>
Build Code collapsible
<div>{{{code|}}}</div></summary>
</div>--><div class="build-container" style="line-height:1.5em; font-family:Source Code Pro, Lucida Console, Consolas; font-size:medium; color:#b1c9c3; border:4px solid #b1c9c3;padding:1em;">
<div id="build-header" style="text-align:center;"><div style="color:#cfc041;font-size:1.2rem;font-weight:bold;">Build Title</div><div style="color:#77bfcf;>:asddfs:</div></div>
<div id="build-attr"><div class="build-side" style="padding:10px;"><div class="build-side-header">Attributes</div><div>Strength: {{{strength}}}</br>Agility: {{{agility}}}</br>Toughness: {{{toughness}}}</br>Intelligence: {{{intelligence}}}</br>Willpower: {{{willpower}}}</br>Ego: {{{ego}}}</br></div></div></div>
<div id="build-img">[[File:subtype_{{lc:{{{class|apostle}}}}}.png|64px]]</div>
<div id="build-ext">{{{exts|}}}</div>
<div id="build-stuff">{{{class}}}</br>{{{genotype}}}</div>
<div id="skills">Skills: {{{skills}}}</div>
</div>
<div>{{{notes}}}</div>


-->
<div style="background:#053230;padding:4px;">{{#tag:htmltag|<htmltag tagname="summary" style="font-weight:bold;text-decoration:underline;">Click to reveal full code</htmltag>{{{code|}}}
|tagname=details
|style="word-break:break-all;"
}}
</div></includeonly><noinclude>{{#invoke:Sandbox/User:Teamtoto/LuaModule|test}}[[Category:Query Format Templates]]</noinclude>
</div></includeonly><noinclude>{{#invoke:Sandbox/User:Teamtoto/LuaModule|test}}[[Category:Query Format Templates]]</noinclude>