MediaWiki:Common.css: Difference between revisions

Revision as of 15:19, 6 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 #b4b4b4 !important;
    border-radius: 4px !important;
}

.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;
    padding-right: 10px;
    align-self: center;
}

.pi-data-label, .pi-data-value {
    display: table-cell;
    padding: 3px;
}

.pi-data-value {
    border-left: 1px dotted rgb(197,197,197);
}

.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;
}

.portable-infobox .pi-title {
    line-height: inherit;
    padding: 5px !important;
    background-color: rgb(221,221,221);
    border-radius: 3px 3px 0 0 !important;
    font-weight: bold;
    text-align: center;
}

.portable-infobox .pi-header {
    text-align: center;
    line-height: 1.9;
    background-color: #ededed;
    font-size: 14px;
}

.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 !important;
    border-bottom: 2px solid transparent !important;
    padding-bottom: 2px;
    margin-top: 2px;
    margin-bottom: 0px;
}

.pi-section-navigation {
    background-color: #ededed;
    margin: 0 !important;
    padding: 0 !important;
}

.pi-section-navigation .pi-section-tab {
    color: #000;
    margin-top: 0px;
    padding-bottom: 3px;
}

.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 !important;
    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;
}