MediaWiki:Fandomdesktop.css

/* FAQ

Q: how do I recognize if the theme is light or dark? A: I used light as the default, anything that should be different in dark needs to be a child of the .theme-fandomdesktop-dark class, alternatively the same goes for .theme-fandomdesktop-light

Q: how do I recognize if the page width is slim or expanded? A: slim is the default, but when expanded body gets the .is-content-expanded class, therefore anything needs to be a child thereof



/* ---

Display background image

--- */

body { background-image: var(--theme-body-background-image); } body.theme-fandomdesktop-dark { background-size: cover; background-position: top; background-repeat: no-repeat; background-attachment: fixed; }

.fandom-community-header__background        { background-image: none;} .fandom-community-header__background::before { background-image: none;}

.page__main { background-color: rgba(var(--theme-page-background-color--rgb),0.85); } .theme-fandomdesktop-dark.page__main { background-color: rgba(var(--theme-page-background-color--rgb),0.95); }

/* ---

Fonts

--- */

@font-face { font-family: 'Economica'; font-style: normal; font-weight: 700; font-display: swap; src: local('Economica Bold'), local('Economica-Bold'), url(https://fonts.gstatic.com/s/economica/v6/Qw3aZQZaHCLgIWa29ZBTjecUA3x4RHw.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Economica'; font-style: normal; font-weight: 700; font-display: swap; src: local('Economica Bold'), local('Economica-Bold'), url(https://fonts.gstatic.com/s/economica/v6/Qw3aZQZaHCLgIWa29ZBTjecUDXx4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body { font-family: sans-serif; font-size: 14px; }

/* */ .page-content p, .page-content section { line-height: 1.75; margin-bottom:0.5em; margin-left: 0.5em; }

/* spacing between paragraphs */ .page-content p + p { margin: 0.5em 0 0.5em 0.5em; }

/* ---

wikitables and article-tables

--- */

.article-table-wrapper { background: none; background-color: transparent; }

/* table body */ .article-table tr td, .wikitable tr td, table.cargoTable.noMerge tbody tr:nth-child(2n+1) { padding: 3px 7px; background-color: rgba(var(--theme-page-text-color--rgb),0.1); }

table.cargoTable td { vertical-align: top; border: 1px solid rgba(var(--theme-page-background-color--rgb),0.9); }

/* Zebra table styling */ table.zebra tbody tr:nth-child(odd), table.cargoTable.noMerge tbody tr:nth-child(2n) { background-color: rgba(var(--theme-page-text-color--rgb),0.05); }

/* headlines */ .article-table tr th, .wikitable tr th, table.cargoTable.noMerge thead tr { padding: 3px 7px; background-color: var(--theme-accent-color) !important; /* ONI Magenta*/ color: #effffe; /*white in either mode */ text-align: center; }

/* links in headlines */ .article-table tr th a, .wikitable tr th a { color: #effffe; /* retain white in either mode */ text-decoration: underline; }

.article-table > caption, .wikitable > caption { border: none; font-size: inherit; font-weight: 400; line-height: inherit; padding: 0 5px; text-align: center; }

/* right padding for sortable headers */ .client-js .sortable:not(.jquery-tablesorter) > thead > :last-of-type > th:not(.unsortable), .jquery-tablesorter th.headerSort, th.headerSort { padding-right: 21px !important; }

/* since you can't tell the whole table to be style="text-align:center" anymore, new class "centertext" */ .article-table .centertext tr td, .article-table .centertext tr th, .wikitable .centertext tr td, .wikitable .centertext tr th { text-align: center; }

/* ---

Navboxes

--- */

.navbox { width: 100%; color: var(--theme-accent-label-color); margin: 1em auto; font-size: 88%; clear: both; border: 1px solid rgba(var(--theme-page-text-color--rgb), .3); ;   padding: 1px; display: block; } /* Merges navboxes that are directly under eachother */ .navbox+.navbox { margin-top: -11px; } .navbox .navbox-title { background: var(--theme-accent-color); color: var(--theme-accent-label-color); font-weight: bold; } .navbox .navbox-vde { float: left; padding-left:5px; width: 65px; text-align: left; } .navbox .mw-collapsible-toggle { text-align: right; width: 65px; padding-right:5px; } .navbox .navbox-title-padright { padding-right: 5px; } .navbox .navbox-title-padleft { padding: 3px 0 3px 65px; } .navbox .navbox-subgroup { border-spacing: 0; /*    width: 100%; */ } .navbox .navbox-gutter { height: 2px; } .navbox .navbox-section { /*    width: 100%; */ border-spacing: 0; } .navbox .navbox-group, .navbox .navbox-header { background: rgba(var(--theme-accent-color--rgb), .85); /*    height: 100%; */ padding: 2px 4px; } .navbox-group a, .navbox-header a, .navbox-title a { color: var(--theme-accent-color--label); } .navbox .navbox-header-collapsible { padding-left: 65px; } .navbox .navbox-group { width:18%; padding: 0 .5em; } .navbox .navbox-group, .navbox .navbox-image-left { border-right: 10px solid transparent; } .navbox .navbox-list { width: 100%; height: 100%; padding: 1px; word-break: keep-all; } .navbox .navbox-list div { /*    padding: 0 2px; */ } .navbox .navbox-list.no-group { text-align: center; padding-top: 2px; padding-bottom: 2px; }

/* ---

Headlines

--- */

h1, h2, h3, h4, h5, h6 { color: var(--theme-page-dynamic-color-1); }

h1, h2 { border-bottom: 1px solid var(--theme-page-dynamic-color-1); }

/* ---

FP box styles

--- */

.fpbox { background: rgba(var(--theme-page-text-color--rgb),0.1); margin: 5px 5px 7px 5px; padding: 5px 5px 15px 5px; border: 1px solid #3C4258; overflow: hidden; }

.fpbox .embedvideowrap { width: 400px !important; }

.fpbox .heading { border-bottom: 2px solid var(--theme-page-background-color); /* heading underline as text color*/ font-variant: small-caps; font-size: 132%; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .welcome { text-transform: uppercase; font-size: 150%; }

.fpbox hr { border: none; border-bottom: 1px solid var(--theme-page-dynamic-color-2); }

.front-page-icon-container { margin:5px; display:inline-block; text-align:center; width:115px; font-family:Economica; font-size: 125%; }

/* ---

this governs the responsive 2 column main page layout

--- */

display: grid; grid-template-areas: "top" "cont" "vid" "comm" "bot"; grid-template-columns: 100%; } @media screen and (min-width:1100px) { #fp-2column.fp-container { grid-template-areas: "top  vid" "cont comm" "bot  bot"; grid-template-columns: auto 420px; } } /* Define Frontpage Box IDs to grid IDs */
 * 1) fp-2column.fp-container {
 * 1) fp-top      { grid-area: top;  }
 * 2) fp-video    { grid-area: vid;  }
 * 3) fp-content  { grid-area: cont; }
 * 4) fp-community { grid-area: comm; }
 * 5) fp-bottom   { grid-area: bot;  }

/* ---

For Template:Ambox

--- */

.ambox { background-color: rgba(var(--theme-page-text-color--rgb),0.1) !important; border-color: var(--theme-page-dynamic-color-2) !important; border-collapse: collapse; font-size: 95%; margin: 0 auto 2px auto; width: 80%; }

.ambox.ambox-tiny { font-size: 90%; margin: 2px 0; width: auto; }

.ambox-text { padding: 0.25em 0.5em; }

.ambox-image { padding: 2px 0px 2px 0.5em; text-align: center; width: 60px; }

.ambox-tiny .ambox-image { padding: 2px 0.5em; text-align: left; width: auto; }

/* Ambox colors */ .ambox-red   { border-left: 10px solid var(--theme-alert-color) !important;} .ambox-orange { border-left: 10px solid var(--theme-warning-color) !important;} .ambox-green { border-left: 10px solid var(--theme-success-color) !important;}

.ambox-blue  { border-left: 10px solid #1e90ff !important;} .ambox-yellow { border-left: 10px solid #f4c430 !important;} .ambox-purple { border-left: 10px solid #9932cc !important;} .ambox-gray  { border-left: 10px solid #bbbbaa !important;}

/* Ambox small text */ .amsmalltext { font-size: smaller; margin-left:0.8em; margin-top:0.5em; }

/* ---

For Template:Tab and Template:Schematic

--- */ .tabcontainer { background-color: var(--theme-sticky-nav-background-color); }

.tabcontainer .tab { background-color: var( --theme-page-background-color--secondary); cursor: pointer; float: left; padding: 3px; text-align: center; white-space: nowrap; }

.tabcontainer .tab.disabled { cursor: auto; opacity: 0.25; background-color: var( --theme-page-background-color--secondary); -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);}

.tabcontainer .tab:hover { background-color: var(--theme-sticky-nav-text-color--hover); }

.tabcontainer .tab.active { background-color: #EDDDDE; font-weight: bold; }

.tabcontainer .tab.OniOverlayTabDefault { background-color: transparent; }

/* ---

For Template:ThemedImage and other theme dependant images and equations

--- */

/* Template:ThemedImage */ .theme-fandomdesktop-dark .light-image { display:none; } .theme-fandomdesktop-light .dark-image { display:none; } .invert-image img { filter: invert(1); }

/* color $$equations$$ white on dark mode */ .theme-fandomdesktop-dark .mwe-math-element img { filter: invert(1); }

/* hand out black or white copyright icon depending on theme */ .copyright-icon { background-image: url("https://upload.wikimedia.org/wikipedia/commons/b/b0/Copyright.svg"); background-size: 100%; height: 32px; width: 32px; }

.theme-fandomdesktop-dark .copyright-icon { background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6e/Copyright_white.svg"); }

/* ---

Template:Buildings

--- */

/* extent page if newly loaded stuff appears */ .page-content { overflow-x: clip; }

max-width: 490px; }   list-style-type: none; list-style-image: none; display: flex; margin: 0; }
 * 1) buildingsTabber {
 * 1) uppertabber,
 * 2) lowertabber {

text-align: center; font-family: Economica; width: 12.5% }
 * 1) uppertabber li,
 * 2) lowertabber li {

color: var(--theme-body-text-color); cursor: default; text-decoration: none; transition-duration: 0.1s; }
 * 1) uppertabber li a,
 * 2) lowertabber li a {

width: 40px; height: 40px; padding: 2px 4px 0px 4px; border: 0px solid black; border-bottom: 6px solid #2a2b3d; border-radius: 2px 15px 2px 15px; background: #3f4458; box-shadow: 0px 0px 0px 3px black; opacity: 0.8; transition-duration: 0.1s; }
 * 1) uppertabber li a img,
 * 2) lowertabber li a img {

/* Text white when hovered above the list element, or when the link is assigned the class 'selected' */ color: var(--theme-body-text-color); transition-duration: 0.25s; }
 * 1) uppertabber li.navbox-section-selected a,
 * 2) uppertabber li:hover a,
 * 3) lowertabber li.navbox-section-selected a,
 * 4) lowertabber li:hover a {

/* Image full opacity when hovered above the list element, or when the link is assigned the class 'selected' */ background: #9196a7; border-bottom: 6px solid #6d7085; opacity: 1; transition-duration: 0.25s; }   background: #686d80; border-bottom: 6px solid #3f3f54; opacity: 0.8; transition-duration: 0.25s; }   padding:0.45em 0 0 0; }   list-style-type: none; list-style-image: none; margin: 0; display: inline; width: max-content; }   opacity:0.6; transition-duration: 0.1s; border: 2px solid black; border-radius: 6px; padding: 2px; background: #3f4458; box-shadow: 2px 2px rgba(0,0,0,0.6); margin: 0 2px 2px 0; }   opacity: 1; background: #686d80; }   opacity: 1; background: #9196a7; box-shadow: 0px 0px rgba(0,0,0,0.6); margin: 2px 0 0 2px; }   height: 24px; width: 140px; }
 * 1) uppertabber li.navbox-section-selected a img,
 * 2) lowertabber li.navbox-section-selected a img {
 * 1) uppertabber li:hover a img,
 * 2) lowertabber li:hover a img {
 * 1) VersionsBox {
 * 1) DLC-toogle{
 * 1) DLC-toogle li a img{
 * 1) DLC-toogle li:hover a img{
 * 1) DLC-toogle li.navbox-section-selected a img{
 * 1) DLC-toogle li[data-source="SO"] a img {

@media screen and (min-width:960px) { #buildingsTabber.tabberContainer { max-width: 900px; }   #categorytabber { max-width: none; display: flex; }   #uppertabber {width:53.33%} #lowertabber {width:46.67%}

#lowertabber li { width: 14.2857% }   #DLC-toogle { float: right; } }

/* ---

For all Template:Infobox X or Template:X Infobox

--- */

.portable-infobox { color: var(--theme-page-dynamic-color-1); background-color: transparent; border: 1px solid rgba(var(--theme-page-dynamic-color-2--rgb),0.4); padding: 0.2em; }

/* resize */ .portable-infobox { width: 400px; } .pi-data-label   { flex-basis: 140px; } .pi-data-value   { flex-basis: 260px; }

/* remove blank space*/ .portable-infobox section { margin-left: 0; }

.portable-infobox .pi-title { font-family: Economica; font-weight: bold; font-size: 160%; background-color: var(--theme-accent-color); /* dark magenta either theme */ border-radius: 5px; padding: 0.5em; text-align: center; }

.portable-infobox .pi-data { margin: 1px 0; border: none; padding: 0; }

.portable-infobox .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox .pi-header { font-weight: 500; background-color: rgba(var(--theme-page-text-color--rgb),0.1); /* medium grey in dark, and steel blue in light */ border-radius: 5px; padding: 0.5px 7px; text-align: right; } .portable-infobox .pi-data-label:not(.pi-horizontal-group-item), .portable-infobox .pi-data-label:not(.pi-horizontal-group-item) a, .portable-infobox .pi-header:not(.pi-horizontal-group-item), .portable-infobox .pi-header:not(.pi-horizontal-group-item) a { font-weight: 500; }

.portable-infobox .pi-group, .portable-infobox .pi-group .pi-horizontal-group-item { border: none }

.portable-infobox .pi-group .pi-header { background-color: var(--theme-accent-color); /* dark magenta either theme */ font-weight: bold; text-align: center; }

.portable-infobox .pi-navigation { text-align: center; }

.pi-item[data-source="uses flower pot"] .pi-data-value, .pi-item[data-source="unlocks"] .pi-data-value, .pi-item[data-source="desc"] .pi-data-value, .pi-item[data-source="description"] .pi-data-value { margin: auto; text-align: center; flex-basis: 400px; }

.pi-item[data-source="flavorText"] .pi-data-value, .pi-item[data-source="image caption"] .pi-data-value, .pi-item[data-source="caption"] .pi-data-value, .pi-item[data-source="recipe-desc "] .pi-data-value, .pi-item[data-source="tooltip"] .pi-data-value { margin: auto; text-align: center; font-style: italic; flex-basis: 400px; }

.pi-item[data-source="element-1-amount"] .pi-data-label, .pi-item[data-source="resource-1-amount"] .pi-data-label, .pi-item[data-source="element-2-amount"] .pi-data-label, .pi-item[data-source="resource-2-amount"] .pi-data-label, .pi-item[data-source="element-3-amount"] .pi-data-label, .pi-item[data-source="resource-3-amount"] .pi-data-label, .pi-item[data-source="element-4-amount"] .pi-data-label, .pi-item[data-source="resource-4-amount"] .pi-data-label, .pi-item[data-source="element-5-amount"] .pi-data-label, .pi-item[data-source="resource-5-amount"] .pi-data-label { font-weight: normal !important; background: transparent !important; }

.pi-item[data-source="element-1-amount"] .pi-data-value, .pi-item[data-source="resource-1-amount"] .pi-data-value, .pi-item[data-source="element-2-amount"] .pi-data-value, .pi-item[data-source="resource-2-amount"] .pi-data-value, .pi-item[data-source="element-3-amount"] .pi-data-value, .pi-item[data-source="resource-3-amount"] .pi-data-value, .pi-item[data-source="element-4-amount"] .pi-data-value, .pi-item[data-source="resource-4-amount"] .pi-data-value, .pi-item[data-source="element-5-amount"] .pi-data-value, .pi-item[data-source="resource-5-amount"] .pi-data-value { font-weight: bold !important; background-color: var( --theme-page-background-color--secondary) !important; border-radius: 5px !important; }

/* DLC annotations for Buildings */ .pi-item[data-source="DLC"] .pi-data-value { position: absolute; opacity: 0.7; text-align: right; width: 390px; }

/* horizontal groups */

.pi-horizontal-group .pi-data-label { padding-bottom: 0.2em; font-size:95%; }

.pi-group[data-item-name="Engine Values"] thead tr th, .pi-group[data-item-name="smallgeyser"] thead tr th { font-family: Economica; background-color: rgba(var(--theme-page-text-color--rgb),0.1); }

/* Infobox RocketModuleSO horizontal group*/ .pi-group[data-item-name="Engine Values"] { border: 1px solid var(--theme-page-background-color--secondary); padding: 1px; border-radius: 12px; }

.pi-group[data-item-name="Engine Values"] thead tr th:first-child { border-radius: 10px 0 0 0; } .pi-group[data-item-name="Engine Values"] thead tr th:last-child { border-radius: 0 10px 0 0; }

/* Infobox Geyser small horizontal group*/ .mw-parser-output .portable-infobox section.pi-group[data-item-name="smallgeyser"] { margin-bottom: -60px; margin-top: 2px; }

/* background colors for table header */ .pi-group[data-item-name="smallgeyser"] thead tr th { background-color: rgba(var(--theme-page-text-color--rgb),0.1); } .pi-group[data-item-name="smallgeyser"] thead tr th:first-child { background-color: transparent; }

/* border radii for headlines */ .pi-group[data-item-name="smallgeyser"] thead tr th:nth-child(2) { border-radius: 6px 0 0 0; } .pi-group[data-item-name="smallgeyser"] thead tr th:last-child  { border-radius: 0 6px 0 0; }

/* align image */ .pi-group[data-item-name="smallgeyser"] .pi-data-value[data-source="imageName"] { position: relative; top:-45px; vertical-align:middle; height: 150px; }

/* ---

For Template:Techtree and Template:Research

--- */

.research-box { background:white; color:black; border:white 1px solid; padding:0px; width:100%; font-size:66%; }

.research-box-header { background:#6a6966; color:white; border:black 1px solid; width: 96px; font-size: 75%; } .is-content-expanded .research-box-header { width:150px; }

.research-bar { text-align:center; color:black; border:1px solid black; width: 100%; }

.research-novice      { background:#98aae9; } /* pale blue   */ .research-intermediate { background:#994e76; } /* ONI magenta */ .research-matscience  { background:#e7d211; } /* gold        */ .research-interstellar { background:#ef8d27; } /* orange     */

.research-item { width: 30px; height: 30px; text-align: center; border: 1px solid black; margin: 1px 0; line-height: 28px; } .is-content-expanded .research-item { width: 35px; height: 35px; line-height: 33px; }

.research-item img { height: auto; width: auto; max-width: 28px; max-height: 28px; } .is-content-expanded .research-item img { max-width: 33px; max-height: 33px; }

.research-unlocks { display: grid; grid-template-areas: "A B C" "D E F" "G H I" "J K L"; grid-template-columns: 33px auto 33px; } .is-content-expanded .research-unlocks{ grid-template-areas: "A B C D" "E F G H" "I J K L"; grid-template-columns: 38px 37px 37px 38px; }

@media screen and (max-width:1300px) { .is-content-expanded .research-box-header { width:96px; }   .is-content-expanded .research-item { width: 30px; height: 30px; line-height: 28px; }   .is-content-expanded .research-item img { max-width: 28px; max-height: 28px; }   .is-content-expanded .research-unlocks { grid-template-areas: "A B C" "D E F" "G H I" "J K L"; grid-template-columns: 33px auto 33px; } }

@media screen and (min-width:1800px) { .is-content-expanded .research-box-header { width:170px; }   .is-content-expanded .research-item { width: 40px; height: 40px; line-height: 38px; }   .is-content-expanded .research-item img { max-width: 38px; max-height: 38px; }   .is-content-expanded .research-unlocks{ grid-template-columns: 43px 42px 42px 43px; } }

/* Define Research Box IDs to grid IDs */
 * 1) research-1 { grid-area: A; }
 * 2) research-2 { grid-area: B; }
 * 3) research-3 { grid-area: C; }
 * 4) research-4 { grid-area: D; }
 * 5) research-5 { grid-area: E; }
 * 6) research-6 { grid-area: F; }
 * 7) research-7 { grid-area: G; }
 * 8) research-8 { grid-area: H; }
 * 9) research-9 { grid-area: I; }
 * 10) research-10{ grid-area: J; }
 * 11) research-11{ grid-area: K; }
 * 12) research-12{ grid-area: L; }

/* ---

For Template:Planetoid_Clusters

--- */

.planetoid_clusters { background-image: url("https://static.wikia.nocookie.net/oxygennotincluded_gamepedia_en/images/1/1f/Background.jpg"); background-size: cover; border-radius: 15px; border: 1px solid gray; color: #abbbba; /* Lay all your love on me*/ text-align: center; }

table.planetoid_clusters tbody tr { border-bottom: 1px solid gray; }

.planetoid_clusters a { color: #effffe; /* retain white in either mode */ text-decoration: underline; }

/* ---                    ______    ____    _      _   ______  _____    ______  _____    _    ____                       / _____|  / __ \  |  \  /  | |  ___| |  __ \  |  ___| |  __ \  | |  / __ \                     | /  ___  | |__| | |   \/   | | |__   | |__| | | |__   | |  \ | | | | |__| |                   | | |_  | |  __  | | |\  /| | |  __|  |  ___/  |  __|  | |  | | | | |  __  |                    | \__/  | | |  | | | | \/ | | | |___  | |      | |___  | |__/ | | | | |  | |                    \___/|_| |_|  |_| |_|    |_| |_____| |_|      |_____| |_____/  |_| |_|  |_|

--- */

/* Larger Gamepedia badge */ .gp-wiki-badge { height: auto; width: 30px; } /* represent! */

/* ---

File header Table of Contents

--- */

/* File header Table of Contents */ .mw_metadata td { background-color: var(--theme-accent-color); border: transparent; padding-left: 1em; }
 * 1) filetoc,

/* proper link colors */ .mw_metadata td a, .WikiaBarWrapper .tools-menu > li > a { color: #effffe; text-decoration: none; }
 * 1) filetoc a,

/* underlines links when hovered */ .mw_metadata td a:hover, .WikiaBarWrapper .tools-menu > li > a:hover { color: #effffe; text-decoration: underline; }
 * 1) filetoc a:hover,

/* ---

small stuff

--- */

/* Warning boxes*/ div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon, div.titleblacklist-warning, div.locked-warning { background-color: rgba(var(--theme-page-text-color--rgb),0.1); border-color: var(--theme-page-dynamic-color-2); }

/* don't show mobile versions */ .mobileonly { display:none; }

/* stops the text cursor from turning black, why is that a thing? */ .theme-fandomdesktop-dark .CodeMirror-cursor { border-left-color: var(--theme-page-text-color); }