MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

/*
Satisfontory by Nate Wren
Licensed under a Creative Commons Attribution 4.0 International License.
*/
@font-face {
    font-family: 'Satisfontory_v1.5';
    src: local('Satisfontory_v1.5'), local('Satisfontory_v1.5'), url('https://commons.wiki.gg/images/9/92/Satisfontory_v1.5.ttf') format('truetype');
}

body {
	font-family: "Noto Sans", system-ui, sans-serif;
}

.responsive-image {
	max-width:100%;
	height:auto;
}

.theme-dark .invert-on-dark,
.theme-light .invert-on-light,
.theme-dark img[alt="Coffee Stain logo.png"] {
  filter:invert(100%);
}


/* For elements which only display in the mobile view */
.mobileonly {
    display: none;
}

@media screen and (max-width:720px) {
    .mobileonly {
        display: unset;
    }

    .nomobile,
    .navbox {
        display: none;
	}
}

/* Disable Printable version in sidebar */
#t-print {
	display: none;
}

/* This governs the sections on the Community portal */
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}

.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}

.feature {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.05);
    border: 1px solid rgba(var(--wiki-content-dynamic-color--rgb), 0.2);
    border-radius: 5px; padding: 10px;
}

/**************************
* [[Template:Doc]] styles *
***************************/
.documentation {
    margin: 0em auto 1em;
    background-color: rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.1);
    border: 2px solid var(--wiki-content-border-color);
    border-radius: 1em;
    padding: 1em;
}

.documentation-header {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--wiki-content-border-color);
    margin-bottom: 1ex;
}
/**************************
* End Template:Doc styles *
***************************/

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
    text-align: left;
}

.desktopcenter {
    text-align: center;
}

.desktopright {
    text-align: right;
}

/*********************
* Front page styling *
**********************/

#fp-container {
	display: grid;
	grid-template-areas: "a" "b" "c" "d";
	grid-template-columns: 100%;
}
@media screen and (min-width:990px) {
	#fp-container {
		grid-template-areas: "a b" "a d" "c c";
		grid-template-columns: 50% 50%;
	}
}
@media screen and (min-width:1350px) {
	#fp-container {
		grid-template-areas: "a b" "c c" "d d";
		grid-template-columns: auto 520px;
	}
}

.fpbox { 
	width: calc(100% - 2px);
	box-sizing: border-box;
}

.fp-section {
	display: flex;
	flex-wrap: wrap;
}

#fp-top {
	grid-area: a;
}

#fp-flex {
	grid-area: b;
}

#fp-nav {
	grid-area: c;
}

#fp-bottom {
  grid-area: d;
}

.fpbox {
    margin: 5px;
    margin-bottom:15px;
    overflow: auto;
    border-radius:20px 20px 5px 5px;
}

.fpbox.plain {
    background: transparent;
    border: none;
    box-shadow: none;
}

.fpbox .heading,
.fpbox .mainheading,
.fpbox .welcome {
    margin: 0 0 10px;
    padding: 0 0 5px;
    overflow: auto;
}

.fpbox .mainheading,
.fpbox .welcome {
    font-size: 150%;
    font-weight: bold;
}

.fpbox .heading {
    text-align: center;
    font-size: 132%;
}

.linkslabel {
    margin: 15px 5px 5px;
    padding: 0 0 5px;
}

/* Template:FP links styles */
.fplinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    text-align: center;
}

.fplink-outer {
    padding: 5px;
    flex-basis: calc(25% - 10px);
    width: calc(25% - 15px);
    min-width: 115px;
    display: inline-block;
    vertical-align: middle;
}

.fplink-wide {
    flex-basis: calc(33% - 10px);
    width: calc(33% - 15px);
}

.fplink-fullwidth {
    flex-basis: 100%;
    width: calc(100% - 15px);
    font-weight: bold;
}

.fplink {
    padding: 0.5em;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: table;
}

.fplink-plain {
    background: transparent;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.fplink-inner {
    display: table-row;
}

.fplink a {
    display: table-cell;
    vertical-align: middle;
}

.fplink img {
    max-width: 150px;
    width: 100%;
    height: auto;
}
/* Auto-resize front page video to fit smaller columns */
.fpbox .embedvideowrap {
    width: 100%!important;
    max-width: 480px;
    margin: 0 auto;
}

.fpbox .embedvideowrap iframe {
    width: 100%!important;
}

/* this CSS governs the responsive 2 column main page layout */
.fpmaybecols {
    overflow: hidden;
    margin: -5px 0;
}

.fpmaybecols + .fpmaybecols {
    margin: 0 0 -5px;
}

.fpbox .heading .smalllink {
    color: #e0e0e0;
    font-size: 75%;
    font-weight: bold;
}

.fpbox hr {
    border: none;
    border-bottom: 2px solid #505050;
}

div.fplink:not(.fplink-plain) {
  background-color:var(--wiki-content-dynamic-color--secondary--inverted);
  background: radial-gradient(var(--wiki-content-dynamic-color--secondary--inverted), var(--wiki-content-dynamic-color--inverted));
  box-shadow:inset 0 0 2px #000;
  border: 3px double var(--wiki-content-dynamic-color--inverted);
  border-radius: 10px / 20px;
}

div.fplink:hover {
  background:var(--wiki-content-dynamic-color--inverted);
}

.fpbox {
  background: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
  box-shadow: 0 2px 5px rgba(var(--wiki-content-dynamic-color--rgb), 0.05);
}

.fpvideo {
	overflow: hidden;
}

.linkslabel {
  border-bottom: 2px solid rgba(var(--wiki-content-dynamic-color--rgb), 0.25);
}
/*****************
* end FP styling *
******************/

/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
    background-color: var(--wiki-content-background-color--secondary);
    border: 2px solid var(--wiki-content-border-color);
    box-shadow: var(--wiki-element-box-shadow);
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox + .ambox {
     margin-top: -2px;
}

.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-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}

.copyright-logo {
  filter:var(--wiki-icon-general-filter);
}
/*********************
* End Template:Ambox *
**********************/

/****************************
* [[Template:Navbox]] style *
*****************************/
table.navbox {
  border: 1px solid var(--wiki-content-border-color);
  background:var(--wiki-content-background-color--secondary);
  clear: both;
  font-size: 95%;
  margin: auto;
  padding: 1px;
  text-align: center;
  width: 100%;
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
}

.navbox-list {
    border-color: transparent;
}

/* Level 1 color */
.navbox-title,
table.navbox th {
  background: var(--wiki-content-background-color--secondary);
  color:var(--wiki-content-text-color);
}

/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.1);
}

/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: rgba(0, 0, 0, 0.05);
}

/* Even row striping */
.navbox-even {
    background: rgba(var(--wiki-content-dynamic-color--rgb), 0.05);
}

/* Odd row striping */
.navbox-odd {
    background: transparent;
}

.navbar {
    font-size: 88%;
    font-weight: normal;
}

.navbox-list.hlist ul {
  margin:0;
}

.navbox-list.hlist li {
  display:inline-block;
}

.navbox-list.hlist li:not(:first-child)::before {
  content:'\2022\0020';
  margin:0 0.2em;
}

/*********************
* End Navbox styling *
**********************/

/**************************
* Used by Template:Header *
***************************/
.fpHeader {
  position:relative;
  background: url(/images/8/8e/Bolt.png) no-repeat bottom left border-box,
    url(/images/8/8e/Bolt.png) no-repeat bottom right border-box,
    url(/images/5/50/Middle.png) repeat-x center left border-box, /*[[File:Middle.png]]*/
    linear-gradient(to bottom, #465461, #4F4136);
  font-size:1.7em;
  letter-spacing: .025em;
  padding:0 1em;
  box-shadow: inset 0 0 20px 0 rgba(0,0,0,0.25);
  background-size: 0.6em, 0.6em, 1px 0.3em, auto;
  border-radius:0.7em 20px 0 0;
}

.fpHeader::before {
  position:absolute;
  width:100%;
  height:100%;
  top: -0.13em;
  left: -0.13em;
  content:"";
  background:url(/images/c/c9/Corner_top_left.png) no-repeat top left border-box; /*[[File:Corner top left.png]]*/
  background-size: 0.9em;
  z-index:3;
  pointer-events:none;
}

.fpHeader::after {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  content:"";
  border-radius:30px 30px 1px 1px;
  background:url(/images/a/a8/Texture.png) repeat; /*[[File:Texture.png]]*/
  opacity:0.05;
  z-index:1;
  pointer-events:none;
}

.fpHeaderText {
  position:relative;
  font-family: 'Satisfontory_v1.5', "Noto Sans", system-ui, sans-serif;
  color: #f2f2f2;
  background: -webkit-linear-gradient(bottom, #ADC8DD, #FEFFFE, #E2E9EF);
  background-clip: border-box;
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index:2;
}
/**********************
* end Template:Header *
***********************/

/************
* Infoboxes *
*************/

/* portable infoboxes */
:root {
	--pi-width: 300px;
	--pi-background: var(--wiki-content-background-color--secondary);
	--pi-border-color:rgba(var(--wiki-accent-color--rgb), 0.5);
	--pi-secondary-background:var(--wiki-accent-color);
	--pi-secondary-background-label:var(--wiki-accent-label-color);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align:center;
	background:var(--pi-secondary-background);
	color:var(--pi-secondary-background-label);
}

.portable-infobox {
	border-bottom: var(--pi-border-color) solid 2px;
}

.pi-image {
	padding: 15px;
}

.pi-image-thumbnail {
    width: 100%;
}

.pi-data-value {
	hyphens: none;
	text-align: center;
}

.pi-data-value li {
	text-align: left;
}

@media (max-width: 720px)
{
	div#mw-head
	{
		left: 0 ;
	}
}

#mw-content-text code,
.pi-data-value code {
    line-break: anywhere;
}

#mw-content-text code.as-inline-block {
	display: inline-block ;
}

#mw-content-text ul,
#mw-content-text ol
{
	list-style-position: inside ;
}

.mw-content-ltr ul,
.mw-content-ltr ol,
.mw-content-rtl ul,
.mw-content-rtl ol
{
	margin: 0.3em 0 0 0 ;
}

.mw-content-ltr li ul,
.mw-content-ltr li ol
{
	margin-left: 1.6em ;
}

.mw-content-rtl li ul,
.mw-content-rtl li ol
{
	margin-right: 1.6em ;
}

/* begin: single-column image floats */

@media (max-width: 550px)
{
	div.tleft,
	div.tright
	{
		float: none ;
		clear: both ;
		display: inline-block ;
		margin: 0 auto ;
		max-width: 100% ;
	}
}

/* end: single-column image floats */

.pi-data, .pi-media {
	justify-content: center;
    border-left-width: 2px;
    border-left-style: solid;
    border-right-width: 2px;
    border-right-style: solid;
    border-color: var(--pi-border-color);
}

.portable-infobox .pi-data-label, .pi-font {
	font-size: 13px;
}

.portable-infobox .pi-data-label {
	font-weight: bold;
}

/**/

/* Template infoboxes */
.infobox {
  float: right;
  width: 23em;
  max-width:100%;
  margin-left: 1em;
  margin-bottom: 0.5em;
  padding: 4px;
  border:2px solid var(--wiki-content-border-color);
  background-color:var(--wiki-content-background-color);
}

.infobox-table {
  width: 100%;
  padding: 0;
  background-color:transparent;
  border: 0;
}

.infobox-header,
.infobox-section {
  background-color: var(--wiki-content-background-color--secondary);
  border:1px solid var(--wiki-content-border-color);
  font-weight:bold;
  text-align:center;
}

.infobox-header {
  font-size: 150%;
  padding:0.4em;
}

.infobox-section {
  padding:0.05em 0.5em;
}

.infobox-centered {
  text-align: center;
}

.infobox-centered img {
  max-width:100%;
  height:auto;
}

.infobox-row {
  vertical-align: top;
}

.infobox-row-name {
  text-align: left;
  vertical-align:middle;
  padding:0.1em;
  font-size:89%;
}

.infobox-spacer {
  height: 0.5em;
}

.ingredient-cost-container {
    margin: 0;
    padding: 0;
    border: none;
    display: grid;
    /* the code editor says the grid properties below aren't real, but they are */
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    grid-auto-rows: 75px;
}

.ingredient-cost-wrapper {
    background: #eeeeee;
    border-radius: 5px;
    padding: 5px;
    position: relative;
}

.ingredient-cost {
    width: 65px;
    height: 65px;
    background-position: center;
    background-size: cover;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ingredient-cost > a,
.ingredient-cost > a > img {
	display: block ;
	width: 100% ;
	height: 100% ;
}

.ingredient-cost-counter {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #666666;
    border-radius: 5px;
    color: #ffffff;
    padding: 3px 5px;
}

.infobox-group {
  display:flex;
  flex-wrap:wrap;
}
/**/
/****************
* End infoboxes *
*****************/

/* Selected templates in 'Category:Description templates' use common styling */
.descriptionbox {
	float: left;
	border: 2px solid var(--wiki-content-border-color);
	border-radius: 2px;
	box-shadow: var(--wiki-element-box-shadow);
	background: var(--wiki-content-background-color--secondary);
	margin: 1px auto 2px auto;
	padding: 4px;
}

/* Infobox tabber styling */
.infobox-tabber {
  float:right;
  margin:0 1em;
  width: var(--pi-width);
}

@media screen and (max-width:720px) {
	.infobox-tabber {
		float: none ;
		width: auto;
		margin: 0;
	}
}

.infobox-tabber .tabbernav {
  text-align:center;
}

.infobox-tabber .infobox {
  margin:0;
  margin-left:-2px;
  margin-right:-2px;
}

.infobox-tabber .tabbertab {
  padding:0;
  padding-top:5px;
  border-bottom:0;
  border-width:2px;
  height:20px;
}

.infobox-tabber .tabbertab > p:first-child {
  margin:0;
}

/* Recipe tables */
.recipetable td {
    text-align: center;
}

.recipe-items {
    width: 100%;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.recipe-items[data-items-count="1"]
{
	display: block ;
}

.recipe-item:only-child {
    grid-column: span 2;
}

.recipe-item {
    display: inline-grid;
    grid-template:
        'a b'
        'c c'
        'd d';
    padding: 5px;
    overflow: clip;
    min-width: min-content;
}

.recipe-item .item-amount {
    grid-area: a;
    text-align: right;
    margin: auto 0 auto auto;
    font-size: 120%;
}

.recipe-item .item-amount + a {
    grid-area: b;
}

.recipe-item .item-name {
    grid-area: c;
    font-size: 75%;
}

.recipe-item .item-minute {
    grid-area: d;
    font-weight: bold;
}

.recipe-item img {
    float: left;
    margin-left: 2px;
}

.recipe-building {
    margin: 10px 2px;
}

.recipe-building a {
    font-size: 120%;
}

.recipe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-size: 75%;
    text-transform: uppercase;
}

.recipe-badge img {
    margin-right: 4px;
}

.recipe-alternate {
    border: 1px solid var(--wiki-accent-color);
    background: rgba(var(--wiki-accent-color--rgb), 0.05);
    box-shadow: rgba(var(--wiki-accent-color--rgb), 0.35) 0px 3px 10px;
}

.recipe-byproduct {
    border: 1px solid var(--wiki-info-color);
    background: rgba(var(--wiki-info-color--rgb), 0.1);
    box-shadow: rgba(var(--wiki-info-color--rgb), 0.35) 0px 3px 10px;
}

.recipe-stable {
    color: black;
    background-color: #33CC66;
    box-shadow: rgba(51, 204, 102, 0.35) 0px 3px 10px;
}

.recipe-experimental {
    color: white;
    background-color: #9932CC;
    box-shadow: rgba(153, 50, 204, 0.35) 0px 3px 10px;
}

.recipe-season-ficsmas {
	box-shadow: rgba(255, 0, 0, 0.35) 0 3px 10px, 0 0 0 1px red;
	outline: dashed 1px white;
}

.recipetable span[title], .portable-infobox span[title] {
	cursor: help;
}

.key {
    padding: 0.1em 0.3em;
    border-radius: 0.2em;
    background-color: rgba(127,127,127,0.3);
    box-shadow: 0 0.2em 0 rgba(0,0,0,0.4), inset 0 0.2em 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}

.mw-category-group {
	break-inside: avoid-column ;
}

.mw-category-columns:has(.mw-category-group:first-child + .mw-category-group:last-child) {
	column-count: auto ;
	-webkit-column-count: auto ;
	-moz-column-count: auto ;
	display: grid ;
	grid-auto-columns: 1fr 2fr ;
	grid-template-areas: 'a b' ;
}
.mw-category-columns:has(.mw-category-group:first-child + .mw-category-group:last-child) > .mw-category-group:first-child + .mw-category-group:last-child > ul {
	column-count: 2 ;
	-webkit-column-count: 2 ;
	-moz-column-count: 2 ;
	break-inside: avoid-column ;
}

.fpbox > .body .twitter-timeline {
	width: 100% !important ;
}

/** gallery **/

@media (max-width: 340px)
{
	li.gallerybox,
	li.gallerybox > div,
	li.gallerybox .thumb
	{
		width: 100% !important ;
	}
	
	li.gallerybox .thumb > div
	{
		margin: 0 !important ;
	}
	
	li.gallerybox .thumb a
	{
		display: block ;
		padding: 1em ;
	}
	
	li.gallerybox div.thumb img
	{
		width: 100% ;
		height: auto ;
	}
}

div.table-of-contents--right
{
	float:right;
	margin-bottom:.5em;
	padding:.5em 0 .8em 1.4em;
	background:transparent;
	max-width:30em;
}

@media (max-width: 550px)
{
	div.table-of-contents--right
	{
		float: none ;
	}
}