Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* Fonts, icons etc */
/* Multi-font import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,600;1,600&family=Source+Code+Pro:wght@500&display=block');
/* FontAwesome brand icons from Fandom. Prefer to strip this down to only required later if it impacts performance */
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FontAwesome.css&only=styles";
/* Actual page styling from here on */
/* Semi-auto switch for light/dark theme (ie targetted images auto-invert) */
body.theme-fandomdesktop-light .autotheme, body.mainpage.theme-fandomdesktop-light #gallery-0 img,
body.theme-fandomdesktop-light .autotheme img {
filter: invert(1);
}
#mw-content-text > div.mw-parser-output {
font-family: 'Open Sans', sans-serif;
color: var(--theme-page-text-color);
}
/* Global variables */
body.theme-fandomdesktop {
--in-game-font: 'Bebas Neue';
}
/* Global colour variables */
/* Disabled until variables installed
body.theme-fandomdesktop {
--custom-highlight-yellow: #FFBF0B;
--custom-highlight-green: #49A141;
--custom-highlight-red: #CC2F2F;
}
*/
/*
#mw-content-text > div.mw-parser-output .theme-fandomdesktop-light {
font-family: 'Open Sans', sans-serif;
color: #000;
}*/
/* Merged font-family / font-weight for headers as they were duplicated. Individual font-size still applied separately */
.WikiaArticle h2,
.WikiaArticle h3,
.WikiaArticle h4,
.WikiaArticle h5 {
font-family: 'Bebas Neue';
font-weight: normal;
}
/* Matching collapsible toggle font size to section headers */
.WikiaArticle h2,
.mw-collapsible.h2 .mw-collapsible-toggle,
.mw-collapsible h2 .mw-headline {
font-size: 40px;
}
.WikiaArticle h3,
.mw-collapsible.h3 .mw-collapsible-toggle,
.mw-collapsible h3 .mw-headline {
font-size: 30px;
}
.WikiaArticle h4,
.mw-collapsible.h4 .mw-collapsible-toggle,
.mw-collapsible h4 .mw-headline {
font-size: 24px;
}
.WikiaArticle h5,
.mw-collapsible.h5 .mw-collapsible-toggle,
.mw-collapsible h5 .mw-headline {
font-size: 20px;
}
/* Move the collapse / expand toggle to the right */
/* globally overrode every individual element as they were individually injected into the HEAD style */
.page-content .mw-content-ltr .mw-parser-output .mw-collapsible-toggle, /* Main pages */
.mw-parser-output.page-content .mw-content-ltr .mw-collapsible-toggle /* Preview panes */
{
font-family: 'Bebas Neue';
float: right;
}
/* Consolidated primary 'title' and 'nav' type styles as it was just font */
.page-header__title,
.fandom-community-header__community-name,
.wds-community-header .wds-tabs__tab-label a {
font-family: 'Bebas Neue';
}
.theme-fandomdesktop-light .page__main {
background-color: #fff;
}
.theme-fandomdesktop-dark .page__main {
background-color: #000; /*fallback color */
background-color: rgba(0, 0, 0, 0.75);
}
/* For article title */
h1 {
font-family: 'Bebas Neue';
}
.mw-headline {
font-family: 'Bebas Neue';
font-size: 25px;
}
/* Table re-styling to replicate game font / colour begins
Does not require any special input by the user */
.theme-fandomdesktop-light table.fandom-table {
background-color: #fefefe;
}
.theme-fandomdesktop-dark table.fandom-table {
background-color: #000; /*fallback color */
background-color: rgba(0, 0, 0, 0);
}
.theme-fandomdesktop-dark table.fandom-table tr td.tablerowname,
table.fandom-table caption,
table.fandom-table tr th,
table.fandom-table thead tr th,
table.fandom-table tbody tr td.tabletiername,
table.fandom-table.jquery-tablesorter th.headerSort {
font-family: 'Bebas Neue', cursive;
font-weight: normal;
text-align: center;
color: #FFBF0B;
font-size: 24px;
}
.theme-fandomdesktop-dark table.fandom-table tr td.tablerowname {
word-spacing: 100vw;
line-height: 1.25;
}
.theme-fandomdesktop-dark table.fandom-table tr td.tablerowmaterials {
white-space: nowrap;
}
.theme-fandomdesktop-dark,
table.fandom-table caption,
table.fandom-table thead tr th,
table.fandom-table tbody tr td.tabletiername {
background-color: #333;
}
/*
table.fandom-table caption {
font-size: 24px !important;
}
table.fandom-table tbody tr th {
font-size: 24px !important;
}
*/
table.fandom-table tbody tr td.tablerowname {
font-size: 20px !important;
}
table.fandom-table tbody tr td.tabletiername {
font-size: 22px !important;
}
table.fandom-table.trait-table tbody tr td.tabletraitname {
font: italic 20px 'Open Sans';
color: #FFBF0B;
text-align: center;
}
table.fandom-table tbody tr td.description {
color: var(--theme-page-text-color);
font: italic 16px 'Open Sans';
}
/* Keep link text fonts for materials lists */
.theme-fandomdesktop-dark table.fandom-table tr td.tablerowmaterials a {
font-family: 'Bebas Neue';
font-weight: normal;
font-size: 16px;
}
/* Disabled in-text links turning to Bebas Neue
table.fandom-table tbody tr td a {
font-family: 'Bebas Neue';
font-weight: normal;
}
*/
/*
table.fandom-table tbody tr td:not(.tabletiername):not(.tablerowname) {
color: var(--theme-page-text-color);
font-style: italic;
font-weight: 500;
}
*/
/* Data Tables styling (defaults to forced light theme) */
/* Entire table styling */
/* Override every individual element specified in datatables css */
.page-content .dataTables_wrapper .dataTables_length,
.page-content .dataTables_wrapper .dataTables_filter,
.page-content .dataTables_wrapper .dataTables_info,
.page-content .dataTables_wrapper .dataTables_processing,
.page-content .dataTables_wrapper .dataTables_paginate {
color: var(--theme-page-text-color);
}
/* Table sections styling */
/* Header / Footer fixing */
.page-content table.dataTable thead th,
.page-content table.dataTable tfoot th {
font-weight: normal;
}
/* Data table body rows, defaults to white background */
.theme-fandomdesktop-dark table.dataTable tbody tr {
background-color: #000; /*fallback color */
background-color: rgba(0, 0, 0, 0);
}
/* Show x entries per page */
.page-content .dataTables_wrapper .dataTables_length select {
border: 1px solid var(--theme-border-color);
border-radius: 3px;
background-color: var(--theme-body-background-color);
padding: 4px;
color: var(--theme-page-text-color);
}
/* Table search input field */
.page-content .dataTables_wrapper .dataTables_filter input {
color: var(--theme-page-text-color);
border: 1px solid var(--theme-border-color);
border-radius: 3px;
background-color: var(--theme-body-background-color);
}
/* showing x entries info */
.page-content .dataTables_wrapper .dataTables_info {
padding: .3em;
}
/* page buttons */
.page-content .dataTables_wrapper .dataTables_paginate .paginate_button {
color: var(--theme-page-text-color) !important;
background-color: var(--theme-body-background-color);
padding: 0em 1em;
}
/* currently selected page and hover highlights */
.page-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: var(--theme-page-text-color) !important;
border: 1px solid var(--theme-border-color);
background-color: var(--theme-body-background-color);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--theme-body-background-color)), color-stop(100%, var(--theme-border-color)));
background: -webkit-linear-gradient(top, var(--theme-body-background-color) 0%, var(--theme-border-color) 100%);
background: -moz-linear-gradient(top, var(--theme-body-background-color) 0%, var(--theme-border-color) 100%);
background: -ms-linear-gradient(top, var(--theme-body-background-color) 0%, var(--theme-border-color) 100%);
background: -o-linear-gradient(top, var(--theme-body-background-color) 0%, var(--theme-border-color) 100%);
background: linear-gradient(to bottom, var(--theme-body-background-color) 0%, var(--theme-border-color) 100%);
}
/* Data Tables specific styling ends */
/* Table icon formatting to fill cell */
table.fandom-table tbody tr td.icon {
padding: 0 0 0 0;
text-align: center;
}
table tbody.fandom-table tr td.icon img {
margin: auto auto auto auto;
}
/* Table icon formatting end */
/* Table re-styling to replicate game font / colour ends */
/* FontAwesome brand icon default styling */
.fab {
font-size: 1.5em;
text-align: center;
vertical-align: middle;
}
/* Custom styling for portable infobox */
.page-content .portable-infobox .pi-title {
font-size: 18px;
/* text-transform: uppercase; */
}
.page-content .portable-infobox .pi-header {
font-size: 16px;
}
.page-content .portable-infobox .pi-data-label {
font-size: 16px;
display: inline-flex;
align-items: center;
}
.page-content .portable-infobox .pi-data-value {
font-size: 14px;
hyphens: manual;
}
.page-content .portable-infobox .pi-caption {
font-size: 16px;
}
.page-content .portable-infobox section.pi-item {
border-width: 0 0 0 0;
}
.page-content .portable-infobox section.pi-panel{
border-top-width: 3px;
border-top-style: solid;
}
.page-content .portable-infobox section.pi-smart-group-body {
border-top-width: 1px;
border-top-style: solid;
}
.portable-infobox.type-Faction .pi-data[data-source=HomeBiome],
.portable-infobox.type-Seed .pi-data[data-source=GrowLocation],
.portable-infobox.type-Seed .pi-data[data-source=GrowTempMin],
.portable-infobox.type-Seed .pi-data[data-source=GrowTempMax] {
padding-left: 25px;
padding-right: 25px;
}
/* Multi-line horizontal data values get concatenated with inline-flex */
.portable-infobox.type-Seed .pi-data[data-source=GrowLocation] > .pi-data-value {
display: block;
}
.portable-infobox.type-Faction .pi-data[data-source=HomeBiome] > .pi-data-label,
.portable-infobox.type-Faction .pi-data[data-source=HomeBiome] > .pi-data-value,
.portable-infobox.type-Seed .pi-data[data-source=GrowLocation] > .pi-data-label,
.portable-infobox.type-Seed .pi-data[data-source=GrowTempMin] > .pi-data-value,
.portable-infobox.type-Seed .pi-data[data-source=GrowTempMax] > .pi-data-value {
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Style function section instead of using {{Highlight}} */
.portable-infobox .pi-group[data-item-name=Text-Group] .pi-data[data-source=Function] {
color: #FFBF0B;
}
.page-content .portable-infobox.type-Faction .pi-caption {
font-size: 18px;
}
/* Item & Object infoboxes */
.page-content .portable-infobox .pi-title[data-item-name=Styled-Title] {
font: 24px 'Bebas Neue';
}
/* Tabbed section specific styling */
/* Expand tab label spacing */
.page-content .portable-infobox section.pi-panel[data-item-name=Quality-Panel] .wds-tabs__wrapper li.wds-tabs__tab,
.page-content .portable-infobox section.pi-panel.wds-tabber[data-item-name=Data-Panel] li.wds-tabs__tab,
.page-content .portable-infobox section.pi-panel[data-item-name=Upgrade-Panel] .wds-tabs__wrapper li.wds-tabs__tab,
.page-content .portable-infobox section.pi-panel[data-item-name=Tier-Panel] .wds-tabs__wrapper li.wds-tabs__tab{
text-align: center;
text-transform: uppercase;
flex-grow: 1;
}
/* Quality panels should always have 3 tabs(??) setting flex-basis because otherwise they don't evenly fill with flex-grow */
.page-content .portable-infobox section.pi-panel[data-item-name=Quality-Panel] .wds-tabs__wrapper li.wds-tabs__tab {
flex-basis: 33%;
}
/* Test replacement with flex-grow
.page-content .portable-infobox section.pi-panel[data-item-name=Quality-Panel] .wds-tabs__wrapper li.wds-tabs__tab,
.page-content .portable-infobox section.pi-panel[data-item-name=Upgrade-Panel] .wds-tabs__wrapper li.wds-tabs__tab {
flex-grow: 1;
}
.page-content .portable-infobox section.pi-panel[data-item-name=Upgrade-Tier-Panel] .wds-tabs__wrapper li.wds-tabs__tab {
flex-basis: 25%;
}
.page-content .portable-infobox section.pi-panel.wds-tabber[data-item-name=Data-Panel] li.wds-tabs__tab {
flex-basis: 50%;
}
*/
.page-content .portable-infobox .wds-tabs__tab-label {
font-size: 16px;
}
.page-content .portable-infobox section.pi-panel .wds-tabs__tab.wds-is-current {
box-shadow: inset 0 -4px 0 0 #ffbf0b;
}
.page-content .portable-infobox section {
border-bottom-width: 1px;
border-bottom-style: solid;
}
/* Item Infoboxes only */
/* Support global infobox style of 'Quality-Panel' */
/* Default style for all Quality-Panel tab labels */
.page-content .portable-infobox section.pi-panel[data-item-name=Quality-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab .wds-tabs__tab-label,
.page-content .portable-infobox section.pi-panel[data-item-name=Tier-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab .wds-tabs__tab-label,
.page-content .portable-infobox section.pi-panel[data-item-name=Upgrade-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab .wds-tabs__tab-label {
font-size: 20px;
color: #FFBF0B;
}
/* Grey out 'unselected' panel tabs */
.page-content .portable-infobox section.pi-panel[data-item-name=Tier-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab:not(.wds-is-current) .wds-tabs__tab-label,
.page-content .portable-infobox section.pi-panel[data-item-name=Data-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab:not(.wds-is-current) .wds-tabs__tab-label,
.page-content .portable-infobox section.pi-panel[data-item-name=Upgrade-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab:not(.wds-is-current) .wds-tabs__tab-label {
color: #e6e6e6bf;
color: rgba(230, 230, 230, 0.75);
}
/* Hollow unselected tab labels to 'gray them out' */
.page-content .portable-infobox section.pi-panel[data-item-name=Quality-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab:not(.wds-is-current) .wds-tabs__tab-label {
font-size: 20px;
color: #000;
-webkit-text-stroke-width: .025em;
-webkit-text-stroke-color: #FFBF0B;
}
/* Default infobox tab style for all 'Data-Panel' items */
.page-content .portable-infobox section.pi-panel[data-item-name=Data-Panel] > div.wds-tabs__wrapper li.wds-tabs__tab .wds-tabs__tab-label {
color: #FFBF0B;
}
/* Add better framing / spacing for 'Ingredients' sections of infoboxes */
.page-content .portable-infobox section.pi-group[data-item-name=Padded-Group] .pi-data-value {
padding-left: 25px;
padding-right: 25px;
}
.page-content .portable-infobox section.pi-group[data-item-name=Padded-Group] .pi-header,
.page-content .portable-infobox section.pi-group[data-item-name=Text-Group] .pi-header {
color: #FFBF0B;
text-transform: uppercase;
font-weight: 500;
box-shadow: inset 0 -4px 0 0 #ffbf0b;
background-color: unset;
letter-spacing: 0.5px;
}
.page-content .portable-infobox section.pi-group[data-item-name=Text-Group] .pi-data-value {
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.page-content .portable-infobox section.pi-group[data-item-name=Centered-Group] .pi-data-value {
text-align: center;
}
.page-content .portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value {
font-family: 'Bebas Neue';
font-weight: normal;
font-size: 20px;
color: #FFBF0B;
text-align: center;
}
/* Force Tier data content to not highlight links, broken or not */
.page-content .portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value a.new,
.page-content .portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value a {
color: #FFBF0B;
}
.page-content .portable-infobox section.pi-group[data-item-name=Stats] .pi-data-value {
font-size: 18px;
}
/* Consider increasing font size of only the first numeric info panel containing weight, value, and possibly fuel with icons. */
/* Portable infobox styling ends */