|
|
|
|
|
|
|
MediaWiki:SB Infobox.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.SB-Infobox {
outline:2px solid #3a808063;
width:25vw;
max-width:40em;
float:right;
clear:right;
margin: 0 0.8em 0.8em 0.8em;
padding: 10px 10px;
background:#141e22; /* IE fallback. Do people still use IE? */
background:rgba(49, 68, 77, 0.15);
}
.SB-Infobox-Header {
text-align: center;
}
.SB-Infobox-Header img {
height: auto;
width: auto;
max-height: 250px;
max-width: 100%;
}
.SB-Infobox-Faction-Logo img {
max-width: 15%;
width:auto;
height:auto;
position: absolute;
bottom: 0.25em;
right: 0.25em;
opacity: 0.8;
outline:none;
background:none;
}
.SB-Infobox-Image-Wrap {
position: relative;
background: linear-gradient(transparent, #3a808045);
outline: 2px solid #305e60;
}
.SB-Infobox-Header-Caption {
display: block;
font-style: italic;
line-height: 1.5em;
}
.SB-Infobox-Name {
font-family: KenneyFuture;
font-size:1.8em;
color:#edcd50;
text-align: center;
background: #3a808063;
}
.SB-Infobox-Name .selflink {
font-weight: normal;
}
.SB-Infobox-Data-Section-Header::before {
content: " ";
display: block;
position: relative;
top: -1em;
border-top: 1px solid #394442;
}
.SB-Infobox-Construction-Section ~ .SB-Infobox-Data-Section-Header::before {
border-top:none;
}
.SB-Infobox-Data-Section-Header {
width: 100%;
text-align: center;
margin: auto;
background: #2b42488c;
font-family: kenneyfuture;
font-size: 1.2em;
margin-top: 1em;
}
.SB-Infobox-Data-Section {
text-align: center;
}
.SB-Infobox-Data-Cell {
display:flex;
text-align:left;
padding:0 0.4em;
/* font-size:1.25em */
}
.SB-Infobox-Cell-Header {
font-weight:bold;
flex:48%;
min-width:min-content;
margin-right:4%;
text-align: right;
}
.SB-Infobox-Cell-Body {
flex:50%;
margin: auto;
}
.SB-Infobox-Cell-Body ul {
margin:0 0 .2em 1em!important;
border-bottom: 1px solid #394442;
}
.SB-Infobox-Construction-Section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
column-gap: 1em;
padding: 0 0.4em;
}
.SB-Infobox-Construction-Cell-Header {
flex: 50%;
text-align: left;
display: inline-block;
}
.SB-Infobox-Construction-Cell {
display: flex;
border-bottom: 1px solid #394442;
}
/* 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) {
.SB-Infobox {
width:auto!important;
float:none;
clear:none;
font-size:1.5em;
}
}
@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) {
.SB-Infobox {
width:40%!important;
font-size:0.9em;
}
}