|
|
|
|
|
|
|
Difference between revisions of "User:DustyFB/Sandbox/Templates/Template:SpaceshipInfobox"
Jump to navigation
Jump to search
| Line 8: | Line 8: | ||
<includeonly> | <includeonly> | ||
{{#css: | |||
.Spaceship-Infobox { | |||
border:2px solid #304344; | |||
width:25vw; | |||
max-width:40em; | |||
float:right; | |||
clear:right; | |||
margin: 10px 10px; | |||
padding: 10px 10px; | |||
background:rgba(49, 68, 77, 0.15); | |||
} | |||
.Spaceship-Info-Header { | |||
text-align: center; | |||
margin-bottom: 0.25em; | |||
} | |||
.Spaceship-Info-Header img { | |||
max-width:100%; | |||
max-height:250px; | |||
height: auto; | |||
width: auto; | |||
background: linear-gradient(transparent, #3a806e1f); | |||
display: block; | |||
outline: 2px solid #305e60; | |||
} | |||
.Spaceship-Info-Header-Caption { | |||
display: block; | |||
font-style: italic; | |||
margin-top: 0.25em; | |||
} | |||
.Spaceship-Info-Name { | |||
font-family: KenneyFuture; | |||
font-size:2em; | |||
color:#edcd50; | |||
text-align: center; | |||
background: #38586082; | |||
} | |||
.Spaceship-Info-Data-Section-Header { | |||
width: 100%; | |||
text-align: center; | |||
margin: auto; | |||
background: #2b42488c; | |||
font-family: kenney future narrow; | |||
font-size: 1.4em; | |||
margin-top: 1em; | |||
} | |||
.Spaceship-Info-Data-Section { | |||
border-bottom: 1px solid #394442; | |||
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; | |||
text-align:left; | |||
padding:0 0.4em; | |||
} | |||
.Spaceship-Info-Data-Cell-Header { | |||
flex:48%; | |||
min-width:min-content; | |||
margin-right:4%; | |||
} | |||
.Spaceship-Info-Faction-Logo { | |||
background: url('https://wiki.starbasegame.com/images/2/26/Logo_of_empire.png') 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%; | |||
white-space:pre; | |||
margin: auto; | |||
} | |||
/* 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:14, 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>