Sb forum speech.png DiscordLink.png FacebookLink.png RedditLink.png SteamLink.png TwitterLink.png YoutubeLink.png

Difference between revisions of "User:DustyFB/Sandbox/Templates/Template:SpaceshipInfobox"

From Starbase wiki
Jump to navigation Jump to search
Line 55: Line 55:


{{#css:
{{#css:
.Spaceship-Infobox {
.Spaceship-Infobox {
   border:2px solid #304344;
   border:2px solid #304344;
Line 66: Line 65:
   background:rgba(49, 68, 77, 0.15);
   background:rgba(49, 68, 77, 0.15);
}
}
.Device-Info-Header {
.Spaceship-Info-Header {
   text-align: center;
   text-align: center;
   margin-bottom: 0.25em;
   margin-bottom: 0.25em;
}
}
.Device-Info-Header img {
.Spaceship-Info-Header img {
   max-width:100%;
   max-width:100%;
   max-height:250px;
   max-height:250px;
Line 76: Line 75:
   width: auto;
   width: auto;
   background: linear-gradient(transparent, #3a806e1f);
   background: linear-gradient(transparent, #3a806e1f);
  display: block;
  outline: 2px solid #305e60;
}
}
.Device-Info-Header-Caption {
.Spaceship-Info-Header-Caption {
   display: block;
   display: block;
   font-style: italic;
   font-style: italic;
   margin-top: 0.25em;
   margin-top: 0.25em;
}
}
.Device-Info-Name {
.Spaceship-Info-Name {
   font-family: KenneyFuture;
   font-family: KenneyFuture;
   font-size:1.8em;
   font-size:2em;
   color:#edcd50;
   color:#edcd50;
   text-align: center;
   text-align: center;
   background: #38586082;
   background: #38586082;
}
}
.Device-Info-Data-Section-Header {
.Spaceship-Info-Data-Section-Header {
   width: 100%;
   width: 100%;
   text-align: center;
   text-align: center;
   margin: auto;
   margin: auto;
   background: #2b42488c;
   background: #2b42488c;
   font-family: KenneyFuture;
   font-family: kenney future narrow;
   font-size: 1.4em;
   font-size: 1.4em;
   margin-top: 1em;
   margin-top: 1em;
}
}
 
.Spaceship-Info-Data-Section {
/* Traditional table styling */
  border-bottom: 1px solid #394442;
.Device-Info-Data-Cell {
  text-align: center;
}
.Spaceship-Info-Data-Cell {
  font-size:1.25em;
}
.Spaceship-Info-Data-Cell-Header {
  font-weight:bold;
}
.Spaceship-Info-Data-Cell {
   display:flex;
   display:flex;
   text-align:left;
   text-align:left;
   padding:0 0.4em;
   padding:0 0.4em;
}
}
.Device-Info-Data-Cell-Header {
.Spaceship-Info-Data-Cell-Header {
   flex:48%;
   flex:48%;
   min-width:min-content;
   min-width:min-content;
   margin-right:4%;
   margin-right:4%;
}
}
.Device-Info-Data-Cell-Body {
.Spaceship-Info-Faction-Logo {
    background: url({{{factionLogo}}}) center no-repeat;
        background-size: contain;
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.8;
}
.Spaceship-Info-Image-Wrap {
  position: relative;
}
.Spaceship-Info-Data-Cell-Body {
   flex:50%;
   flex:50%;
   white-space:pre;
   white-space:pre;
   margin: auto;
   margin: auto;
}
}
.Construction-Info-Data-Cell-Header {
    flex: 50%;
    text-align: left;
    display: inline-block;
}
.Construction-Info-Data-Cell {
    display: flex;
}
/* Side-by-side/grid formatting
.Device-Info-Data-Section {
  display: grid;
  grid-template-columns: 50% 50%;
}
.Construction-Info-Data-Cell-Header, .Construction-Info-Data-Cell-Body, .Device-Info-Data-Cell-Header, .Device-Info-Data-Cell-Body {
  display:block;
}*/
/* General styling */
.Device-Info-Data-Section {
  border-bottom: 1px solid #394442;
  text-align: center;
}
.Device-Info-Data-Cell, .Construction-Info-Data-Cell {
  font-size:1.25em;
}
.Device-Info-Data-Cell-Header, .Construction-Info-Data-Cell-Header {
  font-weight:bold;
}
.Device-Info-Data-Cell-Body {
}
.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;
}
/* Gallery specific support */
.Device-Info .mw-gallery-slideshow-buttons, .oo-ui-layout oo-ui-panelLayout {
  padding: 0 !important;
  margin: 0 auto !important;
  width:100%;
  position: absolute!important;
  bottom: 0!important;
}
.Device-Info .mw-gallery-slideshow-caption {
  line-height: 1em!important;
  margin-bottom: 3em!important;
}
.Device-Info .mw-gallery-slideshow {
  margin:0!important;
}
/* Supporting mobile mode without flexbox = :'( */
/* Portrait orientation. Also, low-res viewports */
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (  min--moz-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (    -o-min-device-pixel-ratio: 2/1) and (orientation: portrait),
only screen and (        min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (                min-resolution: 192dpi) and (orientation: portrait),
only screen and (                min-resolution: 2dppx) and (orientation: portrait),
only screen and (max-width: 800px) and (orientation: portrait) {
 
  .Device-Info {
    width:auto;
    float:none;
    clear:none;
    font-size:1.5em;
  }
}
/* Landscape orientation. Also, low-res viewports */
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (  min--moz-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (    -o-min-device-pixel-ratio: 2/1) and (orientation: landscape),
only screen and (        min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (                min-resolution: 192dpi) and (orientation: landscape),
only screen and (                min-resolution: 2dppx) and (orientation: landscape)
{
  .Device-Info {
width:40%;
font-size:0.9em;
}
}
/* Possibly trash
.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell {
  width: 45%;
  display:inline-flex;
  padding: 0 2%;
  margin:0;
}
.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell:nth-child(odd) {
  border-right: 1px solid #424242;
}
.Device-Info-Data-Construction ~ .Device-Info-Data-Section .Device-Info-Data-Cell .Device-Info-Data-Cell-Body {
  flex:0;
}*/
}}
}}
</includeonly>
</includeonly>

Revision as of 07:20, 14 May 2021

Gallery mode can be utilized in the image field with: 

|image=<gallery mode="slideshow">
Image:Memory_relay.png|"Caption"
Image:Logo_of_empire.png|"Caption"
</gallery>


Retrieved from "https://wiki.starbasegame.com/index.php?title=User:DustyFB/Sandbox/Templates/Template:SpaceshipInfobox&oldid=21081"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.