MediaWiki:Common.css: Difference between revisions

From Red Faction Wiki
(New page: →‎CSS placed here will be applied to all skins: // ============================================================ // BEGIN collapsible tables // This script is from Wikipedia. For author ...)
 
No edit summary
 
(104 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* **************************************************************** */
// ============================================================
/* Root/Core */
// BEGIN collapsible tables
/* **************************************************************** */
// This script is from Wikipedia. For author attribution, please see http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.js&action=history
// ============================================================


/* Test if an element has a certain class **************************************
:root {
*
    --red-faction-color: rgb(226,121,11);
* Description: Uses regular expressions and caching for better performance.
    --edf-color: rgb(90,154,230);
* Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
    --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;
}


var hasClass = (function () {
/* header bar needs brighter links */
    var reCache = {};
table.fallout_navbox_box th a:link {  
    return function (element, className) {
  color: #AFA000;
        return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
}
    };
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;
}


/** Collapsible tables *********************************************************
/* headers and footer need brighter links */
*
td.fallout_navbox_header a:link,
*  Description: Allows tables to be collapsed, showing only the header. See
td.fallout_navbox_footer a:link {
*              [[Wikipedia:NavFrame]].
  color: #cfc000;
*  Maintainers: [[User:R. Koot]]
}
*/
td.fallout_navbox_header a:active ,
/* customized for Fallout wiki */
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;
  }
}


var autoCollapse = 2;
/* **************************************************************** */
var collapseCaption = "hide";
/* Vehicle Infoboxes */
var expandCaption = "show";
/* **************************************************************** */


function collapseTable( tableIndex )
#red-faction-color {
{
     filter: drop-shadow(0 0 5px var(--red-faction-color));
     var Button = document.getElementById( "collapseButton" + tableIndex );
}
    var Table = document.getElementById( "collapsibleTable" + tableIndex );


     if ( !Table || !Button ) {
#edf-color {
        return false;
     filter: drop-shadow(0 0 5px var(--edf-color));
    }
}
#marauder-color {
    filter: drop-shadow(0 0 5px var(--marauder-color));
}


     var Rows = Table.rows;
#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;
}


    if ( Button.firstChild.data == collapseCaption ) {
.vehicle-sec1 { /* Section for main vehicle image */
        for ( var i = 1; i < Rows.length; i++ ) {
  grid-area: 1 / 1 / 2 / 2;
            Rows[i].style.display = "none";
  width: 200px;
        }
  display: flex;
        Button.firstChild.data = expandCaption;
  justify-content: center;
    } else {
  align-items: center;
        for ( var i = 1; i < Rows.length; i++ ) {
            Rows[i].style.display = Rows[0].style.display;
        }
        Button.firstChild.data = collapseCaption;
    }
}
}


function createCollapseButtons()
.vehicle-sec1 img { /* Main vehicle image */
{
     border-radius: 5px;
     var tableIndex = 0;
     margin-top: 15px;
     var collapseIndex = 0;
     box-shadow: 0px 0px 10px rgba(0,0,0,.25);
     var NavigationBoxes = new Object();
     width: 175px;
     var Tables = document.getElementsByTagName( "table" );
    height: 175px;
    object-fit:cover;
}


    for ( var i = 0; i < Tables.length; i++ ) {
.vehicle-sec2 { /* Section for vehicle name, faction and internal name */
        if ( hasClass( Tables[i], "collapsible" ) ) {
  grid-area: 2 / 1 / 3 / 2;
  margin-top: 5px;
  margin-left: 10px;
  width: 200px;
}


            /* only add button and increment count if there is a header row to work with */
.vehicle-sec3 { /* Section for sectors */
            var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0];
  grid-area: 3 / 1 / 4 / 2;
            if (!HeaderRow) continue;
  text-align: center;
            var Header = HeaderRow.getElementsByTagName( "th" )[0];
  width: 200px;
            if (!Header) continue;
}
.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;
}


            NavigationBoxes[ tableIndex ] = Tables[i];
.vehicle-name {
            Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex );
    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;
}


            var Button    = document.createElement( "span" );
/* **************************************************************** */
            var ButtonLink = document.createElement( "a" );
/* Canon containers */
            var ButtonText = document.createTextNode( collapseCaption );
/* **************************************************************** */


            Button.style.styleFloat = "right";
.canon-container {
            Button.style.cssFloat = "right";
    vertical-align: super;
            Button.style.fontWeight = "normal";
    font-size: 9px;
            Button.style.textAlign = "right";
    font-family: "Verdana";
            Button.style.width = "6em";
}
            Button.className = "t_show_hide";


            ButtonLink.style.color = Header.style.color;
/* **************************************************************** */
            ButtonLink.setAttribute( "id", "collapseButton" + tableIndex );
/* Explore boxes */
            ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" );
/* **************************************************************** */
            ButtonLink.appendChild( ButtonText );


            Button.appendChild( document.createTextNode( "[" ) );
.explorebox {
            Button.appendChild( ButtonLink );
background: #F5F5F5;
            Button.appendChild( document.createTextNode( "]" ) );
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;
}


            Header.insertBefore( Button, Header.childNodes[0] );
.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;
}


            if ( !hasClass( Tables[i], "nocount" ) ) {
.explorebox-tab {
collapseIndex++;
    grid-area: 1 / 1 / 2 / 2;
    }
    writing-mode: vertical-lr;
            tableIndex++;
    background-color: rgb(219,219,219);
        }
    height: 100%;
     }
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
     transform: rotate(180deg);
}


    for ( var i = 0;  i < tableIndex; i++ ) {
.explorebox-sec1 {
        if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( collapseIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) {
  grid-area: 1 / 3 / 2 / 4;
            collapseTable( i );
  margin-left: 15px;
        }
        else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) {
            var element = NavigationBoxes[i];
            while (element = element.parentNode) {
                if ( hasClass( element, "outercollapse" ) ) {
                    collapseTable ( i );
                    break;
                }
            }
        }
    }
}
}


addOnloadHook( createCollapseButtons );
.explorebox-sec2 {
  grid-area: 1 / 4 / 2 / 5;
}


// ============================================================
.explorebox-sec3 {
// END collapsible tables
  grid-area: 1 / 5 / 2 / 6;
// This script is from Wikipedia. For author attribution, please see http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.js&action=history
}
// ============================================================


.explorebox-sec4 {
  grid-area: 1 / 6 / 2 / 7;
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////
/* **************************************************************** */
/* Galleries */
/* **************************************************************** */


// ADVANCED AJAX AUTO-REFRESHING ARTICLES
ul.gallery {
// Code courtesy of "pcj" of WoWWiki.
    margin: 0;
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////
/* **************************************************************** */
/* Explore bubbles */
/* **************************************************************** */


ajaxPages = new Array("Special:RecentChanges", "Special:Watchlist", "Special:Log");
.bubble-container {
    width: auto;
    overflow: hidden;
    border-bottom: 1px solid #a2a9b1;
    margin-bottom: 10px;
}


function setCookie(c_name,value,expiredays) {
.bubble-container .mw-collapsible span.mw-collapsible-toggle {
var exdate=new Date()
    float:right;
exdate.setDate(exdate.getDate()+expiredays)
    font-size: 12px;
document.cookie=c_name+ "=" +escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
.bubble-container ul {
    border-left: 1px dotted rgb(198,198,198);
    margin-left: 20px;
    padding-left: 10px;
    display: inline-block;
    padding-top: 4px;
}
}


function getCookie(c_name) {
.bubble {
if (document.cookie.length>0) {
    padding-right: 10px;
c_start=document.cookie.indexOf(c_name + "=")
    padding-left: 10px;
if (c_start!=-1) {
    height: 12px;
c_start=c_start + c_name.length+1
    border: 1px solid #e9e9e9;
c_end=document.cookie.indexOf(";",c_start)
    padding-top: 3px;
if (c_end==-1) c_end=document.cookie.length
    padding-bottom: 3px;
return unescape(document.cookie.substring(c_start,c_end))
    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%);
}
}
return ""
 
.bubble-image img {
    height: 15px;
    width: 15px;
    display: flex;
    margin-right: 4px;
}
}


function getXmlHttpRequestObject() {
#explore-bubble {
if (window.XMLHttpRequest) {
    background: none;
return new XMLHttpRequest(); //Not Internet Explorer
    padding-top: 3px;
} else if(window.ActiveXObject) {
    padding-bottom: 3px;
return new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
    padding-left: 0px;
} else {
//fail silently
}
}
#link-bubble {
    height: 27px;
    font-size: 11px;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}
}
getRCDataRO = getXmlHttpRequestObject();
 
var cr = new RegExp("\r", "gm");
#link-bubble img {
var lf = new RegExp("\n", "gm");
    height: 20px;
var endText = new RegExp('</div>[\t\s]*?<!-- end content -->[\t\s]*?<div class="visualClear">', "mi");
    width: 20px;
var rcTimer;
    filter: drop-shadow(0 0 1px rgba(0,0,0,.5));
var rcRefresh = 60000;
function preloadAJAXRC() {
if (skin == "monaco") {
s = 1;
} else {
s = 0;
}
}
ajaxRCCookie = (getCookie("ajaxload-"+wgPageName)=="on") ? true:false;
 
document.getElementsByTagName("h1")[0].innerHTML += ' <span style="font-size: xx-small; border-bottom: 1px dotted; cursor:help;" title="Enable auto-refreshing page loads">AJAX:</span><input type="checkbox" id="ajaxRCtoggle" onClick="toggleRC();">';
.bubble-label {
document.getElementById("ajaxRCtoggle").checked = ajaxRCCookie;
    font-weight: bold;
if (getCookie("ajaxload-"+wgPageName)=="on") loadRCData();
    margin-right: 4px;
    display: none;
    padding-right: 0px;
    border-right: 0px solid #e9e9e9;  
}
}


function toggleRC() {
#explore-bubble .bubble-label {
if (document.getElementById("ajaxRCtoggle").checked == true) {
    background: #f1f1f1;
setCookie("ajaxload-"+wgPageName, "on", 30);
    padding: 10px;
loadRCData();
    display: flex;
} else {
setCookie("ajaxload-"+wgPageName, "off", 30);
clearTimeout(rcTimer);
}
}
#bubble-nodivider {
    border: none;
    margin-bottom: 0px;
}
}


function loadRCData() {
/* **************************************************************** */
if (getRCDataRO.readyState == 4 || getRCDataRO.readyState == 0) {
/* Square galleries */
if (location.href.indexOf("/wiki/")) {
/* **************************************************************** */
rcURL = "http://" + location.hostname + "/wiki/" + wgPageName + location.search;
 
} else {
.gallery-square img {
rcURL = "http://" + location.hostname + "/" + wgPageName + location.search;
    aspect-ratio: 1;
    height: 100%;
    width: 100%;
    object-fit:cover;
   
}
}
getRCDataRO.open("GET", rcURL, true);
 
getRCDataRO.onreadystatechange = parseRCdata;
.gallery-square .thumb div {
getRCDataRO.send(null);
    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;
}
}


function parseRCdata() {
.banner img {
if (getRCDataRO.readyState == 4) {
    width: 30px;
textFilter = new RegExp('<div id="bodyContent">.*?</div>[\t\s]*?<!-- end content -->[\t\s]*?<div class="visualClear">', "i");
    height: auto;
rawRCdata = getRCDataRO.responseText.replace(cr, "").replace(lf, "");
filteredRCdata = textFilter.exec(rawRCdata);
updatedText = filteredRCdata[0].replace('<div id="bodyContent">', "").replace(endText, "");
document.getElementById("bodyContent").innerHTML = updatedText;
rcTimer = setTimeout("loadRCData();", rcRefresh);
}
}
/* **************************************************************** */
/* Tile galleries */
/* **************************************************************** */
.tile {
    width: max-content;
    height: max-content;
    display: inline;
    overflow: hidden;
    text-align: center;
    word-break: break-word;
    font-size: 11px;
}
}


for (x in ajaxPages) {
.tile .tile-image {
if (wgPageName == ajaxPages[x]) addOnloadHook(preloadAJAXRC);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
}


.img-top {
  object-position: top;
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////
.img-bottom {
  object-position: bottom;
}


// END OF AJAX AUTO-REFRESH
.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;
}
Retrieved from "https://www.redfactionwiki.com/w/index.php?title=MediaWiki:Common.css&oldid=14400"