MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

:root {
	--TwoWorldsWiki-primary-color: #D9C790;
	--TwoWorldsWiki-secondary-color: #6C96A8;
	--TwoWorldsWiki-tertiary-color: #406A72;
	--TwoWorldsWiki-border-color: #6C97A8;
}

.TwoWorldsWiki,
.templateTheme {
	border: 3px solid var(--TwoWorldsWiki-border-color);
	background-color: var(--TwoWorldsWiki-tertiary-color);
}

.TwoWorldsWiki th,
.templatePrimary {
	background-color: var(--TwoWorldsWiki-secondary-color);
}

.TwoWorldsWiki td,
.templateSecondary {
	background-color: var(--TwoWorldsWiki-primary-color);
}

/* Site sub / Tagline settings */
#siteSub {
	display: block;
	text-align: center;
	font-size: calc(1em * 0.9);
}

body.page-Two_Worlds_Wiki.action-view #siteSub,
body.page-Two_Worlds_Wiki.action-submit #siteSub {
	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;
}

/* This governs the page/section title placement */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-align: center
}

/* Template documentation styles
If modifying these styles, be sure to update the mobile skin! */
.doc {
	margin: 0 auto 1em;
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px solid #A78558;
	padding: 1em;
}

.doc-header {
	padding-bottom: 3px;
	border-bottom: 1px solid #A78558;
	margin-bottom: 1ex;
}

.doc-footer {
	margin: 0;
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px solid #A78558;
	padding: 1em;
}

/* 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;
}

/* This CSS governs the responsive 2 column main page layout */
#fp-container {
	display: grid;
	grid-template-areas: "a" "b" "c";
	grid-template-columns: 100%;
}

#fp-container main .columns .leftcol,
#fp-container .columns .rightcol {
	width: 100%;
	margin: 0;
	padding: 0;
}

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

#fp-top {
	grid-template-areas: a;
}

#fp-flex {
	grid-template-areas: b;
}

#fp-bottom {
	grid-template-areas: c;
}

/* Misc */

/* Main page */
.mainPageHeader {
	color: black;
	font-size: 160%;
	text-shadow: 0.3rem 0.3rem 0.3rem #0000004D;
}

.mainPageBody {
	background-color: var(--TwoWorldsWiki-secondary-color);
}

.mainPageFooter {
	font-size: 80%;
	padding: 0.5rem 0.4rem;
}

.mainPageFlex {
	display: flex;
}

.mainPageDiv {
	padding: 0.25rem;
	border: 5px solid var(--TwoWorldsWiki-border-color);
	background-color: var(--TwoWorldsWiki-primary-color);
	margin: 0.5rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 1);
}

.mainPageContent {
	font-weight: bold;
	text-align: center;
	color: black;
	background-color: var(--TwoWorldsWiki-secondary-color);
	font-size: 120%;
	border: 2px solid var(--TwoWorldsWiki-border-color);
	padding: 0.5rem 0.4rem;
	margin-bottom: 0.5rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.mainPageContent > a,
.mainPageFooter > a,
.versiondiv > div > a {
	color: black;
	text-decoration: underline;
}

.versiondiv {
	background-color: var(--TwoWorldsWiki-secondary-color);
	border: solid 2px var(--TwoWorldsWiki-border-color);
	padding: 0.5rem;
	font-weight: normal;
	font-size: 80%;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
}

/* End Main page */

.explain {
	text-decoration: underline dotted;
}

/* If you want the tabs to be centered rather than left-justified with respect to the tab content */
ul.tabbernav {
    text-align:center;
}

/* External links logos */
#content a[href^="https://www.youtube.com/"].external
{
	background: url("https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

#content a[href^="https://twitter.com/"].external
{
	background: url("https://upload.wikimedia.org/wikipedia/commons/c/ce/X_logo_2023.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

#content a[href^="https://www.reddit.com/"].external
{
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/14/Ionicons_logo-reddit.svg") center right no-repeat;
	background-size: 16px;
	padding-right: 18px;
}

/* hide potentially sensitive data on file pages */
#mw_metadata .exif-gpslatitude,
#mw_metadata .exif-gpslongitude,
#mw_metadata .exif-artist {
  display: none;
}

/* Sidebar Separator */
#n- {
	background: #a2a9b1;
	font-size: 2px;
	margin: 2.2em 0;
}

/* Sidebar Discord embed */
div#mw-panel nav.portal li a[https://discord.gg/JGxt3jwuhQ"] {
    display: inline-block;
    position: relative;
    height: 20px;
    width: 119px;
    margin-top: 10px;
}
div#mw-panel nav.portal li a[href="https://discord.gg/JGxt3jwuhQ]::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: "";
    background: url(https://discord.com/api/guilds/824318577380950046/embed.png) no-repeat;
}

@media screen and (max-width: 550px) {
	.mainPageFlex {
		flex-flow: row wrap;
	}
	
	.mainPageDiv,
	.niwa {
		width: -webkit-fill-available!important;
	}
}

@media screen and (min-width: 650px) {
	#fp-container .columns .leftcol {
		float: left;
		width: 50%;
	}

	#fp-container .columns .rightcol {
		float: right;
		width: 50%;
	}
}

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

@media screen and (max-width: 1023px) {
	.mainPageAbout {
		max-height: 100vh;
		overflow-y: scroll;
	}
}

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

@media screen and (max-width: 1439px) {
	.mainPageDiv {
		padding: 0.5rem;
	}
}

/* Classes from Gamepedia Help Wiki's Common.css */

.ambox {
    background-color: rgba(120,120,120,0.2);
    border-bottom-color: #383838;
    border-right-color: #383838;
    border-top-color: #383838;
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

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

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

.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-wiki {
     border-left: 10px solid #454340;
}

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

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