MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
(97 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* **************************************************************** */ | /* **************************************************************** */ | ||
/* | /* Root/Core */ | ||
/* | /* **************************************************************** */ | ||
:root { | |||
--red-faction-color: rgb(226,121,11); | |||
--edf-color: rgb(90,154,230); | |||
--marauder-color: rgb(236,175,61); | |||
--ultor-color: rgb(130,130,130); | |||
} | |||
//Change h1 and h2 to sans serif | |||
.mw-headline h2, .mw-headline h1, .mw-headline h3 { | |||
font-family: sans-serif !important; | |||
font-weight: 300 !important; | |||
} | |||
#firstHeading { | |||
font-family: sans-serif !important; | |||
font-weight: 300 !important; | |||
} | |||
.column { | |||
float: left; | |||
width: 50%; | |||
} | |||
/* **************************************************************** */ | |||
/* Mainpage */ | |||
/* **************************************************************** */ | |||
.mainpage-body { | |||
display: flex; | |||
flex-flow: row wrap; | |||
} | |||
.mainpage-body h2 a { | |||
color: var(--text-color); | |||
} | |||
.mainpage-body .tile { | |||
padding-left: 1.75em; | |||
padding-right: 1.75em; | |||
max-width: 100%; | |||
} | |||
.mainpage-body .tile-row { | |||
width: 100%; | |||
margin-bottom: 0.9rem; | |||
} | |||
.mainpage-header { | |||
display: flex; | |||
font-size: 80%; | |||
margin: 2.6em 1.75em 1.5em; | |||
} | |||
.mainpage-header h1 { | |||
font-family: "Verdana"; | |||
} | |||
.mainpage-mid-sec { | |||
margin-left: 15px; | |||
} | |||
.mainpage-header .header-intro { | |||
flex: 2; | |||
} | |||
.mainpage-header .header-intro h1 { | |||
font-size: 2em; | |||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.15em; | |||
} | |||
.mainpage-header .header-intro p { | |||
font-size: 1.1em; | |||
line-height: 1.7em; | |||
} | |||
.mainpage-header .header-stats { | |||
flex: 1; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-top: -1em; | |||
} | |||
.mainpage-header .header-stats ul { | |||
list-style: none; | |||
} | |||
.game-card { | |||
font-family: 'Verdana'; | |||
display: grid; | |||
position: relative; | |||
overflow: hidden; | |||
border-radius: 5px; | |||
width: 150px; | |||
height: 230px; | |||
box-shadow: 0px 0px 10px rgb(0 0 0 / 50%); | |||
margin: 3px; | |||
grid-template-rows: 170px 0px; | |||
} | |||
.gamename a { | |||
color: white; | |||
} | |||
#card-RF1 { | |||
background: url(https://www.redfactionwiki.com/w/images/e/e7/Card-RF1.png); | |||
background-size: cover; | |||
background-position: center; | |||
} | |||
#card-RF2 { | |||
background: url(https://www.redfactionwiki.com/w/images/d/d5/Card-RF2.png); | |||
background-size: cover; | |||
background-position: center; | |||
} | |||
#card-RFG { | |||
background: url(https://www.redfactionwiki.com/w/images/1/1d/Card-RFG.png); | |||
background-size: cover; | |||
background-position: center; | |||
} | |||
#card-RFA { | |||
background: url(https://www.redfactionwiki.com/w/images/b/b7/Card-RFA.png); | |||
background-size: cover; | |||
background-position: center; | |||
} | |||
.game-card-sec1 { | |||
grid-area: 1 / 1 / 2 / 2; | |||
display: flex; | |||
justify-content: center; | |||
align-items: flex-end; | |||
} | |||
.game-card-sec2 { | |||
grid-area: 2 / 1 / 3 / 2; | |||
} | |||
.game-card-sec3 { | |||
grid-area: 3 / 1 / 4 / 2; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.gamename { | |||
font-size: 14px; | |||
font-weight: bold; | |||
line-height: 1; | |||
color: #fff; | |||
text-transform: uppercase; | |||
text-align: center; | |||
} | |||
.gamedate { | |||
font-size: 9px; | |||
color: #B6B6B6; | |||
text-align: center; | |||
} | |||
.gamebutton { | |||
font-size: 9px; | |||
margin-top: 10px; | |||
width: 70px; | |||
height: 20px; | |||
text-align: center; | |||
cursor: pointer; | |||
background: white; | |||
border-radius: 5px; | |||
box-shadow: 0px 0px 5px #ebe7e7; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.mainpage-btm-sec { | |||
margin-left: 15px; | |||
margin-top: -8px; | |||
} | |||
.mainpage-box { | |||
background: #F5F5F5; | |||
padding: 10px; | |||
margin: 3px; | |||
border-radius: 5px; | |||
box-shadow: 0px 0px 2px rgb(0 0 0 / 50%); | |||
} | |||
.mainpage-box p { | |||
line-height: 1.1; | |||
margin-top: 10px; | |||
} | |||
.mainpage-box p img { | |||
float: left; | |||
margin: 0px auto; | |||
margin-right: 5px; | |||
} | |||
.mainpage-box .box-caption { | |||
font-size: 11px; | |||
} | |||
.mainpage-box h1 { | |||
font-family: "Verdana"; | |||
font-size: 15px; | |||
font-weight: bold; | |||
border: none; | |||
margin: 0 0 0.15em; | |||
} | |||
#site-links { | |||
width: 210px !important; | |||
height: 60px !important; | |||
margin-top: 10px; | |||
margin-bottom: 10px; | |||
margin-left: 3px; | |||
padding: 5px; | |||
overflow: hidden; | |||
display: grid; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
#site-links p { | |||
margin-top: 5px; | |||
} | |||
.site-links-img { | |||
grid-area: 1 / 1 / 2 / 2; | |||
margin-right: 5px; | |||
} | |||
.site-links-desc { | |||
grid-area: 1 / 2 / 2 / 3; | |||
line-height: 1; | |||
} | |||
/* **************************************************************** */ | |||
/* Portable Infoboxes */ | |||
/* **************************************************************** */ | |||
.portable-infobox.pi-layout-default { | |||
font-size: 11px; | |||
border: 1px solid #e9e9e9 !important; | |||
border-radius: 5px !important; | |||
overflow: hidden; | |||
padding-bottom: 5px; | |||
} | |||
.portable-infobox.pi-background { | |||
background: #fafafa; | |||
} | |||
.pi-group { /* Removes border underneath the infobox image */ | |||
border: 0; | |||
} | |||
.portable-infobox .pi-data-label { | |||
text-align: right; | |||
flex-basis: 100px; | |||
border-right: 0px dotted rgb(197,197,197); | |||
padding: 3px; | |||
align-self: center; | |||
} | |||
.pi-data-label, .pi-data-value { | |||
display: table-cell; | |||
padding: 3px; | |||
} | |||
.pi-horizontal-group-item.pi-data-label, .pi-horizontal-group-item.pi-data-value { /* For horizontal group layout */ | |||
text-align: center; | |||
border-right: none; | |||
display: table-cell; | |||
} | |||
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { | |||
border-left-width: 0px; | |||
} | |||
.portable-infobox .pi-title { | |||
line-height: 1.2; | |||
padding: 5px !important; | |||
font-weight: bold; | |||
text-align: center; | |||
margin: 5px; | |||
background-color: #e9e9e9; | |||
border: 1px solid rgb(224,224,224) !important; | |||
border-radius: 5px !important; | |||
} | |||
.portable-infobox .pi-header { | |||
text-align: center; | |||
line-height: 1.9; | |||
background-color: rgb(242,242,242); | |||
font-size: 14px; | |||
border: 1px solid rgb(224,224,224) !important; | |||
border-radius: 5px; | |||
margin: 5px; | |||
line-height: 1.5; | |||
} | |||
.portable-infobox .pi-item.pi-item-spacing { | |||
padding: 0.5px; | |||
border: none; | |||
} | |||
.pi-media-collection-tabs { | |||
font-size: 12px; | |||
padding-bottom: 0px !important; | |||
padding-top: 0px !important; | |||
} | |||
.pi-section-tab, .pi-media-collection .pi-tab-link { /* Base tab */ | |||
color: #54595d; | |||
font-weight: bold; | |||
border: none; | |||
border-bottom: 2px solid transparent !important; | |||
padding-bottom: 2px; | |||
margin-top: 2px; | |||
margin-bottom: 0px; | |||
} | |||
.pi-section-navigation { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
} | |||
.pi-section-navigation .pi-section-tab { | |||
color: #000; | |||
margin-top: 0px; | |||
padding-bottom: 3px; | |||
background-color: rgb(242,242,242); | |||
border: 1px solid rgb(224,224,224) !important; | |||
border-radius: 5px; | |||
line-height: 1.2; | |||
margin: 5px 2px 5px 2px; | |||
height: 24px; | |||
} | |||
.pi-section-tab:hover, .pi-media-collection .pi-tab-link:hover { /* Hover inactive tab */ | |||
color: #437FF5; | |||
} | |||
.pi-section-tab.pi-section-active, .pi-media-collection .pi-tab-link.current { /* Active tab */ | |||
background: none; | |||
color: #36c; | |||
border-bottom: 2px solid #36c !important; | |||
} | |||
/* **************************************************************** */ | |||
/* Navboxes */ | |||
/* **************************************************************** */ | /* **************************************************************** */ | ||
Line 178: | Line 536: | ||
} | } | ||
// | /* **************************************************************** */ | ||
/* Vehicle Infoboxes */ | |||
/* **************************************************************** */ | |||
#red-faction-color { | |||
filter: drop-shadow(0 0 5px var(--red-faction-color)); | |||
} | |||
#edf-color { | |||
filter: drop-shadow(0 0 5px var(--edf-color)); | |||
} | |||
#marauder-color { | |||
filter: drop-shadow(0 0 5px var(--marauder-color)); | |||
} | |||
#ultor-color { | |||
filter: drop-shadow(0 0 5px var(--ultor-color)); | |||
} | |||
#sector-yes { | |||
background-color: rgb(198,234,178); | |||
} | |||
.vehicle-container { | |||
display: grid; | |||
background: #f5f5f5 !important; | |||
grid-template-columns: 1fr; | |||
grid-template-rows: 1fr 1.3fr 1fr 1.5fr; | |||
width: 200px; | |||
box-shadow: 0px 0px 10px rgba(0,0,0,.25); | |||
height: 360px; | |||
border: 1px solid #dddddd !important; | |||
overflow: hidden; | |||
line-height: 1; | |||
font-family: "Verdana"; | |||
margin: 10px; | |||
} | |||
.vehicle-sec1 { /* Section for main vehicle image */ | |||
grid-area: 1 / 1 / 2 / 2; | |||
width: 200px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.vehicle-sec1 img { /* Main vehicle image */ | |||
border-radius: 5px; | |||
margin-top: 15px; | |||
box-shadow: 0px 0px 10px rgba(0,0,0,.25); | |||
width: 175px; | |||
height: 175px; | |||
object-fit:cover; | |||
} | |||
. | .vehicle-sec2 { /* Section for vehicle name, faction and internal name */ | ||
width: | grid-area: 2 / 1 / 3 / 2; | ||
background-color: # | margin-top: 5px; | ||
margin-left: 10px; | |||
width: 200px; | |||
} | |||
.vehicle-sec3 { /* Section for sectors */ | |||
grid-area: 3 / 1 / 4 / 2; | |||
text-align: center; | |||
width: 200px; | |||
} | |||
.vehicle-sec3 table { /* Table containing sector boxes */ | |||
line-height: 1.8; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.vehicle-roundedbox { /* Sector boxes */ | |||
background-color: #eaeaea; | |||
padding: 1px; | |||
width: 55px; | |||
font-size: 9px; | |||
font-weight: bold; | |||
border-radius: 2.5px; | |||
} | } | ||
. | .vehicle-name { | ||
font-size: 16px; | |||
font-weight: bold; | |||
padding-bottom: 3px; | |||
} | |||
.vehicle-name-caption { | |||
font-size: 9px; | |||
} | |||
.vehicle-name-caption img { /* Changes the size of the faction logo from the team template */ | |||
width: 15px; | |||
height: auto; | |||
} | |||
.vehicle-internalname { | |||
font-size: 9px; | |||
font-family: 'Verdana'; | |||
padding-bottom: 4px; | |||
} | |||
.vehicle-stats { | |||
font-size: 10px; | |||
width: 200px; | |||
overflow: hidden; | |||
text-align: center; | text-align: center; | ||
margin: -5px -0px -5px -0px; | } | ||
.vehicle-stats td { | |||
padding: 3px; | |||
table-layout: fixed; | |||
width: 200px; | |||
} | |||
/* **************************************************************** */ | |||
/* Canon containers */ | |||
/* **************************************************************** */ | |||
.canon-container { | |||
vertical-align: super; | |||
font-size: 9px; | |||
font-family: "Verdana"; | |||
} | |||
/* **************************************************************** */ | |||
/* Explore boxes */ | |||
/* **************************************************************** */ | |||
.explorebox { | |||
background: #F5F5F5; | |||
border-radius: 5px; | |||
display: grid; | |||
grid-template-columns: 25px auto auto auto auto auto; | |||
grid-template-rows: 1fr; | |||
box-shadow: 0px 0px 2px rgb(0 0 0 / 50%); | |||
font-family: 'Verdana'; | |||
overflow: hidden; | |||
line-height: 2; | |||
font-size: 85%; | |||
margin-bottom: 15px; | |||
align-items: center; | |||
} | |||
.explorebox-titlesec { | |||
grid-area: 1 / 2 / 2 / 3; | |||
text-align: center; | |||
border-right: 1.5px solid rgb(219,219,219); | |||
margin-bottom: 10px; | |||
margin-top: 10px; | |||
} | |||
.explorebox-tab { | |||
grid-area: 1 / 1 / 2 / 2; | |||
writing-mode: vertical-lr; | |||
background-color: rgb(219,219,219); | |||
height: 100%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-weight: bold; | |||
transform: rotate(180deg); | |||
} | |||
.explorebox-sec1 { | |||
grid-area: 1 / 3 / 2 / 4; | |||
margin-left: 15px; | |||
} | |||
.explorebox-sec2 { | |||
grid-area: 1 / 4 / 2 / 5; | |||
} | |||
.explorebox-sec3 { | |||
grid-area: 1 / 5 / 2 / 6; | |||
} | |||
.explorebox-sec4 { | |||
grid-area: 1 / 6 / 2 / 7; | |||
} | |||
/* **************************************************************** */ | |||
/* Galleries */ | |||
/* **************************************************************** */ | |||
ul.gallery { | |||
margin: 0; | |||
} | |||
/* **************************************************************** */ | |||
/* Explore bubbles */ | |||
/* **************************************************************** */ | |||
.bubble-container { | |||
width: auto; | |||
overflow: hidden; | |||
border-bottom: 1px solid #a2a9b1; | |||
margin-bottom: 10px; | |||
} | |||
.bubble-container .mw-collapsible span.mw-collapsible-toggle { | |||
float:right; | |||
font-size: 12px; | |||
} | |||
.bubble-container ul { | |||
border-left: 1px dotted rgb(198,198,198); | |||
margin-left: 20px; | |||
padding-left: 10px; | |||
display: inline-block; | |||
padding-top: 4px; | |||
} | |||
.bubble { | |||
padding-right: 10px; | |||
padding-left: 10px; | |||
height: 12px; | |||
border: 1px solid #e9e9e9; | |||
padding-top: 3px; | |||
padding-bottom: 3px; | |||
width: max-content; | |||
border-radius: 4px; | |||
font-size: 11px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
overflow: hidden; | |||
background: linear-gradient(90deg, rgba(239,239,239,.6) 0%, rgba(209,209,209,0) 100%); | |||
} | |||
.bubble-image img { | |||
height: 15px; | |||
width: 15px; | |||
display: flex; | |||
margin-right: 4px; | |||
} | |||
#explore-bubble { | |||
background: none; | |||
padding-top: 3px; | |||
padding-bottom: 3px; | |||
padding-left: 0px; | |||
} | |||
#link-bubble { | |||
height: 27px; | |||
font-size: 11px; | |||
float: left; | |||
margin-right: 5px; | |||
margin-bottom: 5px; | |||
padding-top: 0px; | |||
padding-bottom: 0px; | |||
} | |||
#link-bubble img { | |||
height: 20px; | |||
width: 20px; | |||
filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); | |||
} | |||
.bubble-label { | |||
font-weight: bold; | |||
margin-right: 4px; | |||
display: none; | |||
padding-right: 0px; | |||
border-right: 0px solid #e9e9e9; | |||
} | |||
#explore-bubble .bubble-label { | |||
background: #f1f1f1; | |||
padding: 10px; | |||
display: flex; | |||
} | |||
#bubble-nodivider { | |||
border: none; | |||
margin-bottom: 0px; | |||
} | |||
/* **************************************************************** */ | |||
/* Square galleries */ | |||
/* **************************************************************** */ | |||
.gallery-square img { | |||
aspect-ratio: 1; | |||
height: 100%; | |||
width: 100%; | |||
object-fit:cover; | |||
} | |||
.gallery-square .thumb div { | |||
margin: 0px !important; | |||
} | |||
/* **************************************************************** */ | |||
/* Banners */ | |||
/* **************************************************************** */ | |||
.banner { | |||
min-width: 65%; | |||
margin: 0.5em auto; | |||
margin-bottom: 10px; | |||
box-sizing: border-box; | |||
overflow: auto; | |||
background: linear-gradient(90deg, rgba(239,239,239,.3) 0%, rgba(209,209,209,0) 100%); | |||
border: 1px solid #e9e9e9; | |||
border-left: 15px solid; | |||
border-radius: 4px; | |||
font-size: 11px; | |||
} | |||
.banner img { | |||
width: 30px; | |||
height: auto; | |||
} | } | ||
. | /* **************************************************************** */ | ||
/* Tile galleries */ | |||
/* **************************************************************** */ | |||
.tile { | |||
width: max-content; | |||
height: max-content; | |||
display: inline; | |||
overflow: hidden; | |||
text-align: center; | text-align: center; | ||
word-break: break-word; | |||
font-size: 11px; | |||
} | |||
.tile .tile-image { | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
border-radius: 5px; | |||
} | |||
.img-top { | |||
object-position: top; | |||
} | |||
.img-bottom { | |||
object-position: bottom; | |||
} | |||
.img-left { | |||
object-position: left; | |||
} | } | ||
. | .img-right { | ||
object-position: right; | |||
} | } |
Latest revision as of 03:53, 19 March 2024
/* **************************************************************** */ /* Root/Core */ /* **************************************************************** */ :root { --red-faction-color: rgb(226,121,11); --edf-color: rgb(90,154,230); --marauder-color: rgb(236,175,61); --ultor-color: rgb(130,130,130); } //Change h1 and h2 to sans serif .mw-headline h2, .mw-headline h1, .mw-headline h3 { font-family: sans-serif !important; font-weight: 300 !important; } #firstHeading { font-family: sans-serif !important; font-weight: 300 !important; } .column { float: left; width: 50%; } /* **************************************************************** */ /* Mainpage */ /* **************************************************************** */ .mainpage-body { display: flex; flex-flow: row wrap; } .mainpage-body h2 a { color: var(--text-color); } .mainpage-body .tile { padding-left: 1.75em; padding-right: 1.75em; max-width: 100%; } .mainpage-body .tile-row { width: 100%; margin-bottom: 0.9rem; } .mainpage-header { display: flex; font-size: 80%; margin: 2.6em 1.75em 1.5em; } .mainpage-header h1 { font-family: "Verdana"; } .mainpage-mid-sec { margin-left: 15px; } .mainpage-header .header-intro { flex: 2; } .mainpage-header .header-intro h1 { font-size: 2em; font-weight: bold; border: none; margin: 0 0 0.15em; } .mainpage-header .header-intro p { font-size: 1.1em; line-height: 1.7em; } .mainpage-header .header-stats { flex: 1; display: flex; justify-content: center; align-items: center; margin-top: -1em; } .mainpage-header .header-stats ul { list-style: none; } .game-card { font-family: 'Verdana'; display: grid; position: relative; overflow: hidden; border-radius: 5px; width: 150px; height: 230px; box-shadow: 0px 0px 10px rgb(0 0 0 / 50%); margin: 3px; grid-template-rows: 170px 0px; } .gamename a { color: white; } #card-RF1 { background: url(https://www.redfactionwiki.com/w/images/e/e7/Card-RF1.png); background-size: cover; background-position: center; } #card-RF2 { background: url(https://www.redfactionwiki.com/w/images/d/d5/Card-RF2.png); background-size: cover; background-position: center; } #card-RFG { background: url(https://www.redfactionwiki.com/w/images/1/1d/Card-RFG.png); background-size: cover; background-position: center; } #card-RFA { background: url(https://www.redfactionwiki.com/w/images/b/b7/Card-RFA.png); background-size: cover; background-position: center; } .game-card-sec1 { grid-area: 1 / 1 / 2 / 2; display: flex; justify-content: center; align-items: flex-end; } .game-card-sec2 { grid-area: 2 / 1 / 3 / 2; } .game-card-sec3 { grid-area: 3 / 1 / 4 / 2; display: flex; justify-content: center; align-items: center; } .gamename { font-size: 14px; font-weight: bold; line-height: 1; color: #fff; text-transform: uppercase; text-align: center; } .gamedate { font-size: 9px; color: #B6B6B6; text-align: center; } .gamebutton { font-size: 9px; margin-top: 10px; width: 70px; height: 20px; text-align: center; cursor: pointer; background: white; border-radius: 5px; box-shadow: 0px 0px 5px #ebe7e7; display: flex; justify-content: center; align-items: center; } .mainpage-btm-sec { margin-left: 15px; margin-top: -8px; } .mainpage-box { background: #F5F5F5; padding: 10px; margin: 3px; border-radius: 5px; box-shadow: 0px 0px 2px rgb(0 0 0 / 50%); } .mainpage-box p { line-height: 1.1; margin-top: 10px; } .mainpage-box p img { float: left; margin: 0px auto; margin-right: 5px; } .mainpage-box .box-caption { font-size: 11px; } .mainpage-box h1 { font-family: "Verdana"; font-size: 15px; font-weight: bold; border: none; margin: 0 0 0.15em; } #site-links { width: 210px !important; height: 60px !important; margin-top: 10px; margin-bottom: 10px; margin-left: 3px; padding: 5px; overflow: hidden; display: grid; justify-content: center; align-items: center; } #site-links p { margin-top: 5px; } .site-links-img { grid-area: 1 / 1 / 2 / 2; margin-right: 5px; } .site-links-desc { grid-area: 1 / 2 / 2 / 3; line-height: 1; } /* **************************************************************** */ /* Portable Infoboxes */ /* **************************************************************** */ .portable-infobox.pi-layout-default { font-size: 11px; border: 1px solid #e9e9e9 !important; border-radius: 5px !important; overflow: hidden; padding-bottom: 5px; } .portable-infobox.pi-background { background: #fafafa; } .pi-group { /* Removes border underneath the infobox image */ border: 0; } .portable-infobox .pi-data-label { text-align: right; flex-basis: 100px; border-right: 0px dotted rgb(197,197,197); padding: 3px; align-self: center; } .pi-data-label, .pi-data-value { display: table-cell; padding: 3px; } .pi-horizontal-group-item.pi-data-label, .pi-horizontal-group-item.pi-data-value { /* For horizontal group layout */ text-align: center; border-right: none; display: table-cell; } .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { border-left-width: 0px; } .portable-infobox .pi-title { line-height: 1.2; padding: 5px !important; font-weight: bold; text-align: center; margin: 5px; background-color: #e9e9e9; border: 1px solid rgb(224,224,224) !important; border-radius: 5px !important; } .portable-infobox .pi-header { text-align: center; line-height: 1.9; background-color: rgb(242,242,242); font-size: 14px; border: 1px solid rgb(224,224,224) !important; border-radius: 5px; margin: 5px; line-height: 1.5; } .portable-infobox .pi-item.pi-item-spacing { padding: 0.5px; border: none; } .pi-media-collection-tabs { font-size: 12px; padding-bottom: 0px !important; padding-top: 0px !important; } .pi-section-tab, .pi-media-collection .pi-tab-link { /* Base tab */ color: #54595d; font-weight: bold; border: none; border-bottom: 2px solid transparent !important; padding-bottom: 2px; margin-top: 2px; margin-bottom: 0px; } .pi-section-navigation { margin: 0 !important; padding: 0 !important; } .pi-section-navigation .pi-section-tab { color: #000; margin-top: 0px; padding-bottom: 3px; background-color: rgb(242,242,242); border: 1px solid rgb(224,224,224) !important; border-radius: 5px; line-height: 1.2; margin: 5px 2px 5px 2px; height: 24px; } .pi-section-tab:hover, .pi-media-collection .pi-tab-link:hover { /* Hover inactive tab */ color: #437FF5; } .pi-section-tab.pi-section-active, .pi-media-collection .pi-tab-link.current { /* Active tab */ background: none; color: #36c; border-bottom: 2px solid #36c !important; } /* **************************************************************** */ /* Navboxes */ /* **************************************************************** */ table.fallout_navbox_box { padding: 0px; border: 1px solid #aaa; text-align: center; border-collapse: separate; font-size: 100%; } table.nb_bottom + table.nb_bottom { border-top-style: none; border-top-style: hidden; } th.fallout_navbox_innertable_title, th.fallout_navbox_box_title { padding: 2px; font-weight: normal; color:white; font-size: 80%; } th.fallout_navbox_box_title { background: url(http://images3.wikia.nocookie.net/fallout/images//d/d1/WidgetBackground.jpg?1); background-color: #0D592F; border: 3px solid white; } th.fallout_navbox_innertable_title { background: url(http://images3.wikia.nocookie.net/fallout/images//d/d3/ConcreteBackground.jpg?1); background-color: #565B45; border-top: 0; border-bottom: 2px solid white; border-left: 3px solid white; border-right: 3px solid white; } th.fallout_navbox_box_title span.fallout_navbox_maintitle { font-weight: bold; font-size: 115%; } th.fallout_navbox_innertable_title span.fallout_navbox_maintitle { font-weight: bold; font-size: 125%; } td.fallout_navbox_cont { padding: 0px; border: 0px; } table.fallout_navbox_innertable, table.fallout_navbox { margin: 0px; padding: 0px; border-collapse:separate; empty-cells:show; } table.fallout_navbox { font-size: 85%; border-bottom: 1px solid white; } table.fallout_navbox_innertable { font-size: 100%; } td.fallout_navbox_header, td.fallout_navbox_footer, td.fallout_navbox_cell, td.fallout_navbox_groupcell, td.fallout_navbox_group, td.fallout_navbox_subgroup { border-top: 0; border-bottom: 2px solid white; border-left: 3px solid white; } td.fallout_navbox_header, td.fallout_navbox_footer, td.fallout_navbox_cell, td.fallout_navbox_groupcell { border-right: 3px solid white; } td.fallout_navbox_header, td.fallout_navbox_footer { padding: 2px; background: url(http://images3.wikia.nocookie.net/fallout/images//d/d3/ConcreteBackground.jpg?1); background-color: #565B45; color:white; text-align: center; } td.fallout_navbox_header { font-weight: bold; } td.fallout_navbox_footer { font-size: 90%; } td.fallout_navbox_subgroup, td.fallout_navbox_group { padding: 2px; text-align: center; white-space: nowrap; border-right: 0; font-weight: bold; } td.fallout_navbox_group { background: url(http://images2.wikia.nocookie.net/fallout/images/9/95/ConcreteBackgroundLight.jpg?1); background-color: #BAC29B; } td.fallout_navbox_subgroup { background-color: #DDDDDD; } td.fallout_navbox_groupcell, td.fallout_navbox_cell { padding: 2px; background-color: #DDDDDD; } td.fallout_navbox_groupcell { text-align: left; } td.fallout_navbox_cell { text-align: center; } /* do not wrap links in content fields if nowraplinks is set */ table.fallout_navbox_nowraplinks td.fallout_navbox_cell a, table.fallout_navbox_nowraplinks td.fallout_navbox_groupcell a { white-space:nowrap; } /* header bar needs brighter links */ table.fallout_navbox_box th a:link { color: #AFA000; } table.fallout_navbox_box th a:active { color: #fff; } table.fallout_navbox_box th a:visited { color: #B6A700; } table.fallout_navbox_box th a:hover { color: #fff; } table.fallout_navbox_box th a.new { color: #f11 !important; } /* headers and footer need brighter links */ td.fallout_navbox_header a:link, td.fallout_navbox_footer a:link { color: #cfc000; } td.fallout_navbox_header a:active , td.fallout_navbox_footer a:active { color: #fff; } td.fallout_navbox_header a:visited , td.fallout_navbox_footer a:visited { color: #B6A700; } td.fallout_navbox_header a:hover , td.fallout_navbox_footer a:hover { color: #fff; } @media print { table.fallout_navbox_box { display: none; } } /* **************************************************************** */ /* Vehicle Infoboxes */ /* **************************************************************** */ #red-faction-color { filter: drop-shadow(0 0 5px var(--red-faction-color)); } #edf-color { filter: drop-shadow(0 0 5px var(--edf-color)); } #marauder-color { filter: drop-shadow(0 0 5px var(--marauder-color)); } #ultor-color { filter: drop-shadow(0 0 5px var(--ultor-color)); } #sector-yes { background-color: rgb(198,234,178); } .vehicle-container { display: grid; background: #f5f5f5 !important; grid-template-columns: 1fr; grid-template-rows: 1fr 1.3fr 1fr 1.5fr; width: 200px; box-shadow: 0px 0px 10px rgba(0,0,0,.25); height: 360px; border: 1px solid #dddddd !important; overflow: hidden; line-height: 1; font-family: "Verdana"; margin: 10px; } .vehicle-sec1 { /* Section for main vehicle image */ grid-area: 1 / 1 / 2 / 2; width: 200px; display: flex; justify-content: center; align-items: center; } .vehicle-sec1 img { /* Main vehicle image */ border-radius: 5px; margin-top: 15px; box-shadow: 0px 0px 10px rgba(0,0,0,.25); width: 175px; height: 175px; object-fit:cover; } .vehicle-sec2 { /* Section for vehicle name, faction and internal name */ grid-area: 2 / 1 / 3 / 2; margin-top: 5px; margin-left: 10px; width: 200px; } .vehicle-sec3 { /* Section for sectors */ grid-area: 3 / 1 / 4 / 2; text-align: center; width: 200px; } .vehicle-sec3 table { /* Table containing sector boxes */ line-height: 1.8; display: flex; justify-content: center; align-items: center; } .vehicle-roundedbox { /* Sector boxes */ background-color: #eaeaea; padding: 1px; width: 55px; font-size: 9px; font-weight: bold; border-radius: 2.5px; } .vehicle-name { font-size: 16px; font-weight: bold; padding-bottom: 3px; } .vehicle-name-caption { font-size: 9px; } .vehicle-name-caption img { /* Changes the size of the faction logo from the team template */ width: 15px; height: auto; } .vehicle-internalname { font-size: 9px; font-family: 'Verdana'; padding-bottom: 4px; } .vehicle-stats { font-size: 10px; width: 200px; overflow: hidden; text-align: center; } .vehicle-stats td { padding: 3px; table-layout: fixed; width: 200px; } /* **************************************************************** */ /* Canon containers */ /* **************************************************************** */ .canon-container { vertical-align: super; font-size: 9px; font-family: "Verdana"; } /* **************************************************************** */ /* Explore boxes */ /* **************************************************************** */ .explorebox { background: #F5F5F5; border-radius: 5px; display: grid; grid-template-columns: 25px auto auto auto auto auto; grid-template-rows: 1fr; box-shadow: 0px 0px 2px rgb(0 0 0 / 50%); font-family: 'Verdana'; overflow: hidden; line-height: 2; font-size: 85%; margin-bottom: 15px; align-items: center; } .explorebox-titlesec { grid-area: 1 / 2 / 2 / 3; text-align: center; border-right: 1.5px solid rgb(219,219,219); margin-bottom: 10px; margin-top: 10px; } .explorebox-tab { grid-area: 1 / 1 / 2 / 2; writing-mode: vertical-lr; background-color: rgb(219,219,219); height: 100%; display: flex; align-items: center; justify-content: center; font-weight: bold; transform: rotate(180deg); } .explorebox-sec1 { grid-area: 1 / 3 / 2 / 4; margin-left: 15px; } .explorebox-sec2 { grid-area: 1 / 4 / 2 / 5; } .explorebox-sec3 { grid-area: 1 / 5 / 2 / 6; } .explorebox-sec4 { grid-area: 1 / 6 / 2 / 7; } /* **************************************************************** */ /* Galleries */ /* **************************************************************** */ ul.gallery { margin: 0; } /* **************************************************************** */ /* Explore bubbles */ /* **************************************************************** */ .bubble-container { width: auto; overflow: hidden; border-bottom: 1px solid #a2a9b1; margin-bottom: 10px; } .bubble-container .mw-collapsible span.mw-collapsible-toggle { float:right; font-size: 12px; } .bubble-container ul { border-left: 1px dotted rgb(198,198,198); margin-left: 20px; padding-left: 10px; display: inline-block; padding-top: 4px; } .bubble { padding-right: 10px; padding-left: 10px; height: 12px; border: 1px solid #e9e9e9; padding-top: 3px; padding-bottom: 3px; width: max-content; border-radius: 4px; font-size: 11px; display: flex; justify-content: center; align-items: center; overflow: hidden; background: linear-gradient(90deg, rgba(239,239,239,.6) 0%, rgba(209,209,209,0) 100%); } .bubble-image img { height: 15px; width: 15px; display: flex; margin-right: 4px; } #explore-bubble { background: none; padding-top: 3px; padding-bottom: 3px; padding-left: 0px; } #link-bubble { height: 27px; font-size: 11px; float: left; margin-right: 5px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; } #link-bubble img { height: 20px; width: 20px; filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); } .bubble-label { font-weight: bold; margin-right: 4px; display: none; padding-right: 0px; border-right: 0px solid #e9e9e9; } #explore-bubble .bubble-label { background: #f1f1f1; padding: 10px; display: flex; } #bubble-nodivider { border: none; margin-bottom: 0px; } /* **************************************************************** */ /* Square galleries */ /* **************************************************************** */ .gallery-square img { aspect-ratio: 1; height: 100%; width: 100%; object-fit:cover; } .gallery-square .thumb div { margin: 0px !important; } /* **************************************************************** */ /* Banners */ /* **************************************************************** */ .banner { min-width: 65%; margin: 0.5em auto; margin-bottom: 10px; box-sizing: border-box; overflow: auto; background: linear-gradient(90deg, rgba(239,239,239,.3) 0%, rgba(209,209,209,0) 100%); border: 1px solid #e9e9e9; border-left: 15px solid; border-radius: 4px; font-size: 11px; } .banner img { width: 30px; height: auto; } /* **************************************************************** */ /* Tile galleries */ /* **************************************************************** */ .tile { width: max-content; height: max-content; display: inline; overflow: hidden; text-align: center; word-break: break-word; font-size: 11px; } .tile .tile-image { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .img-top { object-position: top; } .img-bottom { object-position: bottom; } .img-left { object-position: left; } .img-right { object-position: right; }