MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
/* Infoboxes */
:root {
	--pi-background: var(--wiki-infobox-background-color);
	--pi-border-color: #BCA26C;
	--pi-flavor-color: #9F5C08;
	--pi-secondary-background:var(--wiki-accent-color);
	
	--pi-top-background: #BCA26C;
}

.portable-infobox {
	border: 2px solid var(--pi-top-background);
	color: #3a3a3a;
	background: var(--pi-top-background);
}

.portable-infobox h3 {
	color: #332E28 !important;
}

.portable-infobox .pi-border-color {
    border-color: var(--wiki-content-border-color);
}

.portable-infobox .pi-group .pi-border-color {
    border-color: var(--wiki-content-border-color--secondary);
}

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

.portable-infobox .pi-title {
	border-image-source: var(--wiki-infobox-title-background-image);
    border-image-slice: 5 fill;
    border-image-width: auto;
    border-image-outset: 6px 4px;
    border-image-repeat: stretch;
    background: 0 0;
    padding: 0;
    margin-bottom: 5px;
	display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.portable-infobox .pi-title a {
	display: flex;
	align-items: center;
}

.portable-infobox .pi-header {
	border-image-source: var(--wiki-infobox-title-background-image);
    border-image-slice: 4 fill;
    border-image-width: auto;
    border-image-outset: 3px 4px;
    border-image-repeat: stretch;
    background: none;
    position: relative;
    z-index: 1;
}

.portable-infobox .pi-media-collection-tabs {
	background-color: var(--pi-top-background);
    border: none;
    margin: 0;
}

.portable-infobox div#pi-tab-1,
.portable-infobox div#pi-tab-2{
    position: relative;
}

.portable-infobox div#pi-tab-1::before,
.portable-infobox div#pi-tab-2::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(/images/d/de/Wiki_Infobox_Frame.svg);
    background-size: 100% 100%;
}

.pi-tab-link.current {
	color: white;
}

.portable-infobox .pi-image[data-source="icon"] {
	margin: 15px 0;
}

.portable-infobox .pi-image[data-source="icon"] img {
	border-image-source: var(--wiki-navigation-border-image);
    border-image-slice: 10 13 fill;
    border-image-width: 10px;
    border-image-outset: 6px 4px;
    border-image-repeat: stretch;
    background: 0;
}

.portable-infobox .pi-data[data-source="flavor"],
.portable-infobox .pi-data[data-source="flavor2"],
.portable-infobox .pi-data[data-source="flavor"] a,
.portable-infobox .pi-data[data-source="category"] a,
.portable-infobox ul a{
	color: var(--pi-flavor-color);
}

.portable-infobox .pi-data-value[data-source="flavor"] {
	margin-left: auto;
}

.portable-infobox .pi-group {
	color: var(--wiki-content-text-color);
	background: var(--pi-background);
}

.portable-infobox .pi-group h3 {
	color: var(--wiki-heading-color) !important;
}

/* End infoboxes */

/** Collapsible Button **/
.mw-collapsible-text { 
	color: white !important; 
	font-size: 13px;
}

.mw-collapsible-text:hover { 
	color: white !important; 
	text-decoration: none !important; 
	transition: none !important; 
} 

.mw-collapsible-toggle-default, 
.wikia-menu-button, .wikia-button, 
.button { 
	padding: 0 5px 0 5px; 
	cursor: pointer; 
	background: linear-gradient(#4c4c4c, #252525); 
	display: inline-block; 
	margin: 2px; 
	line-height: 20px; 
	color: white; 
	font-size: 13px; 
	border-radius: 3px;
} 

/* TODO: Can this rule be implemented without !important? */
.mw-collapsible-toggle-default:hover, 
.wikia-menu-button:hover, 
.wikia-button:hover, 
.button:hover { 
	color: white; 
	text-decoration: none !important; 
} 

.mw-collapsible-toggle-default:active, 
.wikia-menu-button:active, 
.wikia-button:active, 
.button:active { 
	color: white; 
	background: linear-gradient(#252525, #4c4c4c); 
} 

/* TODO: Can this rule be implemented without !important? */
.mw-collapsible-toggle-default:focus, 
.wikia-menu-button:focus, 
.wikia-button:focus, 
.button:focus { 
	color: white; 
	outline: 0 !important;
}

.plainlinks a.external::after {
	display: none;
}


table.mw-collapsible caption,
table.mw-collapsible th,
table.mw-collapsible td {
	position: relative;
}

/** Navbox template **/

.navbox {
    background-color: var(--theme-page-background-color--secondary);
    border-radius: 0px;
    border: 1px solid #CCCCCC;
    box-shadow: none;
    margin-bottom: 10px;
    padding: 0px;
    text-align: center;
    font-size: 14px;
    width: 100%;
    /*background-image: url("https://images.wikia.nocookie.net/__cb20140911231247/warframe/images/0/08/Navboxflower6.png");
    background-position: center bottom;
    background-repeat: no-repeat;*/
}

.navbox ul {
	display: inline;
	margin: 0;
	padding: 0;
}

.navbox li {
	display: inline;
}

.navbox li:not(:last-child)::after {
	content: " • ";
	word-spacing: 0.3em;
}

.navboxhead {
    background-color: var(--theme-accent-color);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin: 0 auto;
    padding: 2px 0;
    text-align: center;
    border: 1px solid var(--theme-accent-color);
}

.navboxhead a {
    color: var(--theme-sticky-nav-text-color);
}

.navboxhead a:active,
.navboxhead a:focus,
.navboxhead a:hover {
	color:var(--theme-sticky-nav-text-color--hover);
}

th.navboxgroup {
    background-color: var(--theme-border-color);
    color: var(--theme-page-text-color);
    font-size: 14px;
    margin: 0 auto;
    padding: 0 3px;
    text-align: center;
    font-weight: bold;
}

table.navbox tr:nth-child(even) td:not(.navboxgroup):not(.navboxhead):not(.navboxfooter) {
    background-color: rgba(var(--theme-page-background-color--rgb), 0.7);
}
table.navbox tr:nth-child(odd) td:not(.navboxgroup):not(.navboxhead):not(.navboxfooter) {
    background-color: rgba(var(--theme-page-background-color--secondary--rgb), 0.5);
}

.infoicon {
	display: inline-block;
	width: 24px;
	height: 24px;
	text-align: center;
	vertical-align: bottom;
	background: var(--wiki-infoicon-background-color);
    border-radius: 6px;
}

.infoicon[src="/images/thumb/e/eb/Folktails_icon.png/24px-Folktails_icon.png"],
.infoicon[src="/images/thumb/2/21/Iron_Teeth_icon.png/24px-Iron_Teeth_icon.png"] {
	background: none;
	border: none;
}

/**********************
* Main page layout    *
* [[Timberborn Wiki]] *
***********************/

/* Main Page Responsive Layout */

#mp-container {
	display: block;
	gap:5px;
}

.mp-infocontainer {
	display: block;
	gap: 10px;
}

@media screen and (min-width:990px) {
	#mp-container {
		display: grid;
		grid-template-areas:
		"welcome welcome" 
		"about links"
		"latest updates"
		"contribute updates"
		"info info"
		"buildings buildings";
		grid-template-columns: 50% 50%;
	}
	
	.mp-infocontainer {
		display: grid;
		grid-template-areas: "a b c";
		grid-template-columns: repeat(3,minmax(0,1fr));
	}
}

@media screen and (min-width:1350px) {
	#mp-container {
		display: grid;
		grid-template-areas:
		"welcome welcome links"
		"about updates latest"
		"about updates contribute"
		"info info info"
		"buildings buildings buildings";
		grid-template-columns: repeat(3,minmax(0,1fr));
	}
	
	.mp-infocontainer {
		display: grid;
		grid-template-areas: "a b c";
		grid-template-columns: repeat(3,minmax(0,1fr));
	}
}

#mp-about {grid-area:about;}
#mp-updates {grid-area:updates;}
#mp-contribution {grid-area:contribute;}
#mp-links {grid-area:links;}
#mp-last {grid-area:latest;}
#mp-info {grid-area:info;}
#mp-buildings {grid-area:buildings;}

#mp-updates .mw-parser-output p:last-of-type {
	display: none;
}

#mp-buildingsbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#mp-buildingsbox div {
	flex: 1;
	white-space: nowrap;
}

/* Main Page Formatting */

.mp-subheader {
	position: relative;
	border-right: 3em solid transparent;
	display: flex;
	align-items: center;
	font-size: 15px;
	background: var(--wiki-navigation-background-color);
	border: 1px solid var(--wiki-content-link-color);
    border-radius: 5px;
    margin: 5px 5px 5px 0;
}

.mp-subheader:not(:first-of-type) {
    margin-top: 15px;
}

.mp-buildingsheader {
	position: relative;
	border-right: 3em solid transparent;
	display: flex;
	align-items: center;
	font-size: 18px;
	background: var(--wiki-navigation-background-color);
	border-radius: 5px;
	margin-bottom: 5px;
	min-width: 220px;
}

.mp-tabletitle {
	display: inline-block;
	padding: 0 44px 0 0.5em;
	color: white;
}

.mp-tableicon {
	position: absolute;
	right: -0.4em;
	display: flex;
	z-index: 1;
}

.mp-tableicon img {
	border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 4px;
    background-repeat: no-repeat;
    background-image: url(https://cdn.discordapp.com/attachments/853287448524488704/1164265694930685963/bg-circle-big-1-hover.png?ex=654295ec&is=653020ec&hm=14dd2b2f7feb2fd51cb8d69a456b7998a5b21fe3fcd48f9754b145b5b980ce8e&);
    background-size: 100%;
    background-position: center;
    background-clip: padding-box;
}

.mp-tablecontent {
	margin-bottom: 10px;
}

.mp-tablecontent ul {
	list-style: none;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
}

.mp-tablecontent li {
	margin: 1px 5px;
	min-width: 170px;
}

.mp-tablefaction {
	font-size: 15px;
    background: var(--wiki-content-background-color--secondary);
    border-radius: 5px;
    margin: 5px 3px;
}

#mp-info ul {
	display: inline-flex;
}

#mp-info li {
	display: inline-flex;
	max-width: 33%;
}

#mp-patchlist ul {
	list-style: none;
	margin: 0;
	text-align:center;
}

.mp-box { 
	width: calc(100% - 2px);
	box-sizing: border-box;
	background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
	border:1px solid var(--wiki-content-border-color);
	padding:5px;
	margin: 5px 0;
}

.mp-box#mp-welcome {
	text-align:center;
	justify-content: space-around;
}

.mp-box > div:not(.mp-header):not(.mp-subheader) {
	margin: 0 5px;
}

.mp-welcome-img {
	height:2em;
	width:auto;
}

.mp-header {
	border-bottom: 1px solid var(--wiki-content-border-color);
	text-align:center;
	font-size: 24px;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

#mp-welcome .mp-header {
	border-bottom: 1px solid var(--wiki-content-border-color);
	font-size: x-large;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
}

.mp-section {
	display: flex;
	flex-wrap: wrap;
	overflow:hidden;
}

#mp-welcome {
	grid-area:welcome;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background-image: url(/images/3/34/Folktails.png), url(/images/2/24/Iron_Teeth.png);
    background-repeat: no-repeat;
    background-size: auto 165px;
    background-position: 5%, 95%;
}

@media screen and (max-width:720px) {
	#mp-welcome {
		background-image: none;
	}
}

#mp-welcometext {
	text-align: center;
	padding: 8px 5px 8px 0;
	max-width: calc(100% - 280px);
	flex: 1 1 650px;
}

.mp-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1;
}

.mp-icon-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 7px 6px 0;
}

/*#mp-links {
	flex: 1 1;
	max-width: max-content;
	padding-right: 1em;
	flex-basis: 300px;
}*/

.mp-table {
	width: 100%;
}

/***********************
* End main page layout *
************************/

/*******************************************
* Mbox styling                             *
* [[Template:MessageBox]], [[Module:Mbox]] *
********************************************/

.mbox {
    display: flex;
    position: relative;
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    border-left-width: 8px;
    border-radius: 3px;
    margin-bottom: 5px;
    min-height: 32px;
}

.mbox__content {
    display: table;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 15px;
}

.mbox__content__image {
    display: table-cell;
    width: 40px;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding-right: 15px;
}

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

.mbox__content__header {
    display: block;
    font-weight: bold;
}

.mbox__content__text {
    display: block;
}

.mbox__content__text__comment {
    font-size: small;
}

.mbox__content__aside {
    display: table-cell;
    width: 100px;
    vertical-align: middle;
    text-align: center;
    padding-left: 15px;
    border-left: 1px solid var(--wiki-content-border-color);
}

.mbox__close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 2px 7px;
    font-weight: bold;
    font-size: 16px;
    color: var(--wiki-content-text-mix-color);
    cursor: pointer;
    transition: all .15s ease-in;
}

/*******************
* End Mbox styling *
********************/

/**************************
* [[Template:LicenseBox]] *
***************************/
.license-box {
  display: flex;
  background-color: var(--wiki-content-background-color--secondary);
  border:1px solid var(--wiki-content-border-color);
  border-left-width: 8px;
  border-collapse: collapse;
  border-radius: 3px;
  min-height: 32px;
  margin: 0 auto 5px auto;
  padding: 0.25em 0.5em;
}
/**************************
* End Template:LicenseBox *
***************************/

/**********************
* Navbox template     *
* [[Template:Navbox]] *
***********************/
.navbox {
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    box-shadow: none;
    margin-bottom: 10px;
    padding: 0px;
    text-align: center;
    font-size: 0.875rem;
    width: 100%;
}

.navbox ul {
    display: inline;
    margin: 0;
    padding: 0;
}

.navbox li {
    display: inline;
}

.navbox li:not(:last-child)::after {
    content: " • ";
    word-spacing: 0.3em;
}

.navboxhead {
    background-color: var(--wiki-accent-color);
    color: var(--wiki-accent-label-color);
    font-weight: bold;
    margin: 0 auto;
    padding: 2px 0;
    text-align: center;
    border: 1px solid var(--wiki-accent-color);
}

.navboxhead a,
.navboxhead a:active,
.navboxhead a:focus,
.navboxhead a:hover {
    color: var(--wiki-accent-label-color);
}

th.navboxgroup {
    background-color:var(--wiki-content-background-color);
    margin: 0 auto;
    padding: 0 3px;
    text-align: center;
    font-weight: bold;
}
/**********************
* End navbox template *
***********************/

/****************
* Tabber styles *
*****************/
.tabber__tabs {
    padding: 0.3rem;
}

@media screen and (max-width:720px) {
	.tabber__tabs {
		flex-wrap: wrap;
		justify-content: center;
		background: radial-gradient(circle, var(--wiki-content-background-color--secondary) 0%, rgba(0,0,0,0) 100%);
	}
	
}

.tabber__tab {
	padding: 0.4rem 0.8rem;
    margin: 0.1rem;
    border-image-source: var(--wiki-navigation-border-image);
    border-image-slice: 15 fill;
    border-image-width: 10px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    background: none;
    font-weight: normal;
}

.tabber__tab,
.tabber__tab:visited,
.tabber__tab[aria-selected='true'],
.tabber__tab[aria-selected='true']:visited {
	color: var(--wiki-navigation-text-color);
}

.tabber__tab[aria-selected="true"] {
	border-image-source: var(--wiki-navigation-border-image-selected);
}

.tabber__indicator {
	all: unset;
}

/********************
* End Tabber styles *
*********************/