View source for User:DustyFB/Sandbox/Templates/Template:DeviceInfobox

<noinclude>
hello
</noinclude>

<includeonly>{{{image}}}
<div class="Device-Info" style="top: -35px;position: relative;">
   <div class="Device-Info-Header"><gallery mode="slideshow">
file:{{{image}}}
</gallery><span class="Device-Info-Header-Caption"> {{#if:{{{caption|}}}|{{{caption}}}|}} </span></div>
   <div class="Device-Info-Name">{{#if:{{{name|}}}|{{{name}}}|Name not submitted.}}</div>
   <div class="Device-Info-Data-Wrap">
      <div class="Device-Info-Data-Section">
        {{#if:{{{type|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Type</span> <span class="Device-Info-Data-Cell-Body">{{{type}}}</span></div>}}
        {{#if:{{{function|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Function</span> <span class="Device-Info-Data-Cell-Body">{{{function}}}</span></div>}}
        {{#if:{{{availability|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Availability</span> <span class="Device-Info-Data-Cell-Body">{{{availability}}}</span></div>}}
        {{#if:{{{size|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Size</span> <span class="Device-Info-Data-Cell-Body">{{{size}}}</span></div>}}
      </div>
      <div class="Device-Info-Data-Section-Header">Input / Output</div>
      <div class="Device-Info-Data-Section">
        {{#if:{{{electricity|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Electricity</span> <span class="Device-Info-Data-Cell-Body">{{{electricity}}}</span></div>}}
        {{#if:{{{propellant|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Propellant</span> <span class="Device-Info-Data-Cell-Body">{{{propellant}}}</span></div>}}
        {{#if:{{{sockets|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">Cable Sockets</span> <span class="Device-Info-Data-Cell-Body">{{{sockets}}}</span></div>}}
        {{#if:{{{socketsYOLOL|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">YOLOL Sockets</span> <span class="Device-Info-Data-Cell-Body">{{{socketsYOLOL}}}</span></div>}}
      </div>
      <div class="Device-Info-Data-Section-Header">Construction</div><div class="Device-Info-Data-Construction>{{#if:{{{weight|}}}|<span><b>Weight</b>: {{{weight}}}</span>}}{{#if:{{{volume|}}}|<span><b>Volume</b>: {{{volume}}}</span>}}{{#if:{{{corrosionResistance|}}}|<span><b>CRSV Resist</b>: {{{corrosionResistance}}}</span>}}</div>
      <div class="Device-Info-Data-Section" style="grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));">
      {{#if:{{{aegisium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Aegisium]]</span> <span class="Device-Info-Data-Cell-Body">{{{aegisium}}}</span></div>}}{{#if:{{{ajatite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ajatite]]</span> <span class="Device-Info-Data-Cell-Body">{{{ajatite}}}</span></div>}}{{#if:{{{arkanium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Arkanium]]</span> <span class="Device-Info-Data-Cell-Body">{{{arkanium}}}</span></div>}}{{#if:{{{bastium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Bastium]]</span> <span class="Device-Info-Data-Cell-Body">{{{bastium}}}</span></div>}}{{#if:{{{charodium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Charodium]]</span> <span class="Device-Info-Data-Cell-Body">{{{charodium}}}</span></div>}}{{#if:{{{corazium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Corazium]]</span> <span class="Device-Info-Data-Cell-Body">{{{corazium}}}</span></div>}}{{#if:{{{exorium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Exorium]]</span> <span class="Device-Info-Data-Cell-Body">{{{exorium}}}</span></div>}}{{#if:{{{haderite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Haderite]]</span> <span class="Device-Info-Data-Cell-Body">{{{haderite}}}</span></div>}}{{#if:{{{ice|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ice]]</span> <span class="Device-Info-Data-Cell-Body">{{{ice}}}</span></div>}}{{#if:{{{ilmatrium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ilmatrium]]</span> <span class="Device-Info-Data-Cell-Body">{{{ilmatrium}}}</span></div>}}{{#if:{{{karnite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Karnite]]</span> <span class="Device-Info-Data-Cell-Body">{{{karnite}}}</span></div>}}{{#if:{{{kutonium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Kutonium]]</span> <span class="Device-Info-Data-Cell-Body">{{{kutonium}}}</span></div>}}{{#if:{{{lukium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Lukium]]</span> <span class="Device-Info-Data-Cell-Body">{{{lukium}}}</span></div>}}{{#if:{{{merkerium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Merkerium]]</span> <span class="Device-Info-Data-Cell-Body">{{{merkerium}}}</span></div>}}{{#if:{{{nhurgite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Nhurgite]]</span> <span class="Device-Info-Data-Cell-Body">{{{nhurgite}}}</span></div>}}{{#if:{{{oninum|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Oninum]]</span> <span class="Device-Info-Data-Cell-Body">{{{oninum}}}</span></div>}}{{#if:{{{surtrite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Surtrite]]</span> <span class="Device-Info-Data-Cell-Body">{{{surtrite}}}</span></div>}}{{#if:{{{tengium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Tengium]]</span> <span class="Device-Info-Data-Cell-Body">{{{tengium}}}</span></div>}}{{#if:{{{ukonium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Ukonium]]</span> <span class="Device-Info-Data-Cell-Body">{{{ukonium}}}</span></div>}}{{#if:{{{valkite|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Valkite]]</span> <span class="Device-Info-Data-Cell-Body">{{{valkite}}}</span></div>}}{{#if:{{{vokarium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Vokarium]]</span> <span class="Device-Info-Data-Cell-Body">{{{vokarium}}}</span></div>}}{{#if:{{{xhalium|}}}| <div class="Device-Info-Data-Cell"><span class="Device-Info-Data-Cell-Header">[[Xhalium]]</span> <span class="Device-Info-Data-Cell-Body">{{{xhalium}}}</span></div>}}
      </div>
   </div>
</div>
{{#css:

.Device-Info {
  border:2px solid #304344;
  width:25%;
  float:right;
  margin: 10px 10px;
  padding: 10px 10px;
  background:rgba(49, 68, 77, 0.33);
}
.Device-Info-Header {
  text-align: center;
  margin: 1em 0;
}
.Device-Info-Header img {
  max-width:100%;
  height:auto;
}
.Device-Info-Header-Caption {
  display: block;
  font-style: italic;
  margin-top: .25em;
}
.Device-Info-Header img:before {
  border:1px solid red;
  display: block;
}
.Device-Info-Name {
  font-family: Kenney Future Narrow;
  font-size:1.8em;
  color:#edcd50;
  text-align: center;
  background: #38586082;
  font-variant: ;
}
.Device-Info-Data-Section-Header {
  width: 100%;
  text-align: center;
  margin: auto;
  background: #2b42488c;
  font-family: kenney future narrow;
  font-size: 16px;
  margin-top: 1em;
  /*! font-weight: 200; */
}
.Device-Info-Data-Section {
  /*! padding: 1.8em 0; */
  display: grid;
  grid-template-columns: 50% 50%;
  border-bottom: 1px solid #394442;
  text-align: center;
}
.Device-Info-Data-Construction {
    grid-template-columns: auto auto auto;
    grid-gap: 2%;
    display: grid;
    text-align: center;
    padding: 4px 2px;
    border-bottom: 1px solid #394442;
}
.Device-Info-Data-Cell {
  /*! display:grid; */
  margin:1em;
}
.Device-Info-Data-Cell-Header, .Device-Info-Data-Cell-Body {
  display:block;
}
.Device-Info-Data-Cell-Header {
  font-size:1.25em;
  font-weight:bold;
}
.Device-Info-Data-Cell-Body {
  font-size:1.25em;
}
}}
</includeonly>