MediaWiki:Common.css

/***********************************************************************************************************
 * css reset for browser default rules and MediaWiki internal rules
 ***********************************************************************************************************/
* {
	outline: 0;
}

table {
	white-space: unset; /* be set to `no-wrap` in MW internal css */
}

html {
	font-size: 16px; /* reset rem */
}

pre {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	border: 0 solid transparent;
}

table {
	display: table;
	white-space: unset;
}

body {
	background: none;
}

/*** vars, for theming ***/
:root {
	--theme-hover-color: #f7dfc5;
	--theme-text-color-placeholder: #999;
	--theme-control-text-color: #681010;
	--theme-control-text-color-hover: #fff;
	/* for wide table */
	--theme-wide-table-shadow-color: #999;
	/*** text color ***/
	--theme-text-color: #681010;
	--theme-text-color-note: #c29389;
	--theme-text-color-em: #798893;
	--theme-heading-color: #854026;
	/*** link text color ***/
	--theme-link-color: #336879;
	--theme-link-color-hover: #3895d0;
	--theme-link-color-visited: #418cb9;
	--theme-link-color-redlink: #bf0017;
	/*** body background ***/
	--theme-site-background:
			#854026 url(/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
	--theme-site-background2:
			#854026 url(/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
	--theme-site-background3:
			#854026 url(/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
	/*** top site logo ***/
	--theme-site-logo-image: url(/images/e/e6/Site-logo.png);
	--theme-site-logo-width: 400px;
	--theme-site-logo-height: 170px;
	/* sidebar/content common */
	--theme-box-border-width: 4px;
	--theme-box-border-color: #671f12;
	--theme-box-background: #fff;
	/* common */
	--theme-border-color:#671f12;
	--theme-highlight-background: #f3dccc;
	--theme-button-background: #f3dccc;
	--theme-button-border-color: #f19f5e;
	--theme-button-background-active: rgb(245,188,143);
	--theme-button-border-color-active: rgb(245,188,143);
	/*** sidebar ***/
	--theme-sidebar-box-background: #fff;
	--theme-sidebar-box-border-style: var(--theme-box-border-style);
	--theme-sidebar-box-border-width: var(--theme-box-border-width);
	--theme-sidebar-box-border-color: var(--theme-box-border-color);
	--theme-sidebar-box-shadow: var(--theme-box-shadow);
	--theme-sidebar-heading-text-color: var(--theme-heading-color);
	--theme-sidebar-heading-arrow-color: var(--theme-text-color);
	--theme-sidebar-heading-arrow-color-hover: var(--theme-heading-color);
	--theme-sidebar-heading-background: none;
	--theme-sidebar-heading-background-hover: var(--theme-sidebar-heading-background);
	/* following 3 values will affect the space between the heading and the list */
	--theme-sidebar-heading-border-bottom: 0;
	--theme-sidebar-list-border-top: 2px solid transparent; /* will be hidden when collapsed */
	--theme-sidebar-list-padding-top: 0px;
	--theme-sidebar-list-item-background: none;
	--theme-sidebar-list-item-hover-mask: var(--theme-highlight-background);
	--theme-sidebar-list-item-text-color: var(--theme-text-color);
	--theme-sidebar-list-item-text-color-hover: var(--theme-text-color);
	/* responsive */
	--theme-sidebar-box-background-2: var(--theme-box-background);
	--theme-sidebar-box-border-width-2: var(--theme-box-border-width);
	--theme-sidebar-box-border-style-2: var(--theme-box-border-style);
	--theme-sidebar-box-border-color-2: var(--theme-box-border-color);
	--theme-sidebar-dropdown-background: #fff;
	--theme-sidebar-dropdown-border: 1px solid #888989;
	/*** navbar ***/
	--theme-navbar-border-width: 0 0 1px;
	--theme-navbar-border-style: solid;
	--theme-navbar-border-color: #671f12;
	--theme-navbar-tab-background: none;
	--theme-navbar-tab-box-shadow: none;
	--theme-navbar-tab-text-color: var(--theme-text-color);
	--theme-navbar-tab-icon-color: var(--theme-navbar-tab-text-color);
	--theme-navbar-tab-text-color-hover: var(--theme-navbar-tab-text-color);
	--theme-navbar-tab-icon-color-hover: var(--theme-navbar-tab-icon-color);
	--theme-navbar-tab-text-color-redlink: var(--theme-link-color-redlink);
	--theme-navbar-tab-icon-color-redlink: var(--theme-link-color-redlink);
	--theme-navbar-tab-border-color: #671f12;
	--theme-navbar-tab-background-hover: #fff;
	--theme-navbar-tab-border-color-hover: var(--theme-navbar-tab-border-color);
	--theme-navbar-tab-selected-background: #fff;
	--theme-navbar-tab-selected-border-color: var(--theme-navbar-tab-border-color);
	--theme-navbar-tab-selected-border-bottom-corner-color: var(--theme-navbar-tab-border-color);
	--theme-navbar-tab-dropdown-arrow-color: var(--theme-text-color);
	--theme-navbar-tab-dropdown-arrow-color-hover: var(--theme-heading-color);
	--theme-navbar-tab-dropdown-background: #fff;
	--theme-navbar-tab-dropdown-border-color: var(--theme-border-color);
	--theme-navbar-tab-dropdown-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	--theme-navbar-tab-dropdown-hover-mask: var(--theme-highlight-background);
	--theme-navbar-search-box-shadow: none;
	--theme-navbar-search-input-background: rgba(255,255,255);
	--theme-navbar-search-input-border-color: var(--theme-border-color);
	--theme-navbar-search-input-text-color: inherit;
	--theme-navbar-search-button-background: #f3dccc;
	--theme-navbar-search-botton-border-color: var(--theme-border-color);
	--theme-navbar-search-botton-text-color: var(--theme-text-color);
	--theme-navbar-search-button-background-active: #c4db9c;
	--theme-navbar-search-botton-border-color-active: var(--theme-navbar-search-botton-border-color);
	--theme-navbar-search-botton-text-color-active: var(--theme-navbar-search-botton-text-color);
	--theme-navbar-search-suggestions-background: #fff;
	--theme-navbar-search-suggestions-border-color: var(--theme-border-color);
	--theme-navbar-search-suggestions-text-color: var(--theme-text-color);
	--theme-navbar-search-suggestions-text-color-hover: var(--theme-text-color-em);
	--theme-navbar-search-suggestions-hover-mask: var(--theme-highlight-background);
	--theme-navbar-search-suggestions-results-border-bottom-color: var(--theme-border-color);
	--theme-navbar-search-suggestions-special-offset-top: -1px; /* margin-top offset, normally is -1px */
	--theme-navbar-search-suggestions-special-border-top-color: var(--theme-border-color);
	--theme-navbar-search-suggestions-special-label-text-color: var(--theme-text-color);
	--theme-navbar-search-suggestions-special-label-text-color-hover: var(--theme-text-color);
	/* responsive */
	--theme-navbar-search-background: #fff;
	/*** content box ***/
	--theme-content-background: none;
	--theme-content-border-width: 0px var(--theme-box-border-width);
	--theme-content-border-style: var(--theme-box-border-style);
	--theme-content-border-color: var(--theme-box-border-color);
	--theme-content-subpage-icon-color: rgba(0,0,0, 0.3); /* color for "<" */
	--theme-content-heading-rule-border-top: 0; /* border */
	--theme-content-heading-rule-border-bottom: 0;
	/** category: box **/
	--theme-content-category-background: none;
	--theme-content-category-border-style: solid;
	--theme-content-category-border-width: 1px;
	--theme-content-category-border-radius: 0;
	--theme-content-category-border-color: var(--theme-border-color);
	/*** #footer ***/
	--theme-footer-text-color: #573736;
	--theme-footer-background: #faecdd;
	--theme-footer-link-color: #336879;
	--theme-footer-link-color-hover: #6393ed;
	--theme-footer-border-radius: 0 0 6px 6px;
	/** notification **/
	--theme-notice-red-text-color: #bf0017;
	--theme-notice-orange-text-color: #cf721c;
	/******* "real" wiki content ********/
	--theme-widget-toc-arrow-color: var(--theme-text-color);
	--theme-widget-toc-arrow-color-hover: var(--theme-hover-color);
	--theme-widget-toc-item-hover-background: var(--theme-highlight-background);
	--theme-collapsible-toggle-icon-color: var(--theme-text-color);
	--theme-collapsible-toggle-icon-color-hover: var(--theme-hover-color);
}

/*# sourceMappingURL=content.css.map */



/* Portable infoboxes */
.portable-infobox {
	background-color: #fbefe6;
	border: .3rem solid #74372e;
	border-radius: 1rem;
	color: #74372e;
	margin-top: 2rem;
	padding: .3rem;
}
.portable-infobox .pi-title {
	background-color: #faac84;
	border: .25rem solid #74372e;
	border-radius: 2rem;
	color: #74372e;
	font-weight: 800;
	margin-bottom: 5px;
	margin-top: -2rem;
	text-align: center;
}
.portable-infobox .pi-image + .pi-image {
	margin-top: 5px;
}
.pi-image[data-source="map"] img {
	width: 150px;
}
.portable-infobox .pi-data {
	border: none;
	padding: .1rem 0;
}
.portable-infobox .pi-data-label {
	align-items: center;
	background-color: #fafbec;
	border: 3px solid #74372e;
	border-radius: .5rem;
	display: flex;
	padding: .1rem .3rem;
}
.portable-infobox .pi-data-value {
	align-items: center;
	display: flex;
}

/* [[Template:SimpleNavbox]] */
.simplenavbox {
	--theme-link-color: #b74a12;
	--theme-link-color-hover: #b74a12;
	--theme-link-color-visited: #b74a12;
	background-color: #fbefe6;
	border: .3rem solid #74372e;
	border-radius: 1rem;
	clear: both;
	margin-bottom: .3rem;
	padding: .3rem;
	width: 100%;
}
.simplenavbox .simplenavbox-top {
	--theme-link-color: #74372e;
	--theme-link-color-hover: #74372e;
	--theme-link-color-visited: #74372e;
	background-color: #faac84;
	border: 4px solid #74372e;
	border-radius: .5rem;
	color: #74372e;
	padding: 0 .3rem;
}
.simplenavbox .simplenavbox-top .mw-collapsible-toggle {
	font-size: small
}

.simplenavbox table {
	margin-left: -4px;
	margin-right: -2px
}

.simplenavbox table:first-child {
	margin-top: -2px
}

.simplenavbox table:last-child {
	margin-bottom: -2px
}
.simplenavbox th:not(.simplenavbox-top) {
	background-color: #fafbec;
	border: 3px solid #74372e;
	border-radius: .5rem;
	color: #74372e;
	font-size: 12px;
	font-weight: 700;
	padding: .1rem .3rem;
	vertical-align: middle;
	white-space: nowrap;
}
.simplenavbox td {
	font-size: 14px;
	font-weight: 300;
	padding-left: 2px;
	width: 100%;
}

/* Horizontal list */
.simplenavbox td ul {
	display: inline;
	margin-left: 0;
	padding: 0;
	white-space: normal;
}
.simplenavbox td li {
	display: inline;
	white-space: nowrap;
}
.simplenavbox td li:not(:last-child) {
	padding-right: 0.286rem;
}
.simplenavbox td li:not(:last-child)::after {
	background-color: currentColor;
	bottom: 0.214rem;
	content: '';
	display: inline-block;
	height: 3px;
	left: 0.286rem;
	position: relative;
	width: 3px;
}
.simplenavbox td li li:first-child::before {
	content: '(';
	font-weight: normal;
}
.simplenavbox td li li:last-child::after {
	content: ')';
	font-weight: normal;
}
.simplenavbox td li li li {
	font-size: x-small;
}

/* [[Template:Ambox]] */
.ambox {
	align-items: center;
	background-color: #fbefe6;
	border: 2px solid #74372e;
	border-radius: 0.3rem;
	color: #74372e;
	display: flex;
	margin-bottom: 0.3rem;
	padding: 0.5rem 0 0.5rem 1rem;
	position: relative;
}
.ambox::before {
	content: '';
	background-color: #faac84;
	border-radius: .2rem 0 0 .2rem;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: .5rem;
}
.ambox img {
	height: 24px;
	object-fit: contain;
	width: 24px;
}
.ambox .ambox-text {
	flex-grow: 1;
	font-size: 13px;
	line-height: 1em;
	padding: 0 0.5rem;
}
.ambox .ambox-title {
	margin-bottom: 2px;
}
.ambox + .ambox {
	margin-top: 2px;
}


/* Main page */
.fp-main {
	grid-template-areas:
		"a"
		"b"
		"c"
		"d"
		"e"
		"f";
	display: grid;
	grid-gap: 10px;
}
@media screen and (min-width:1290px) {
	.fp-main {
		grid-template-areas:
		"a a d"
		"b b d"
		"e c f";
		grid-template-columns: 1fr 1fr 35%;
	}
}
.fp-box {
	--theme-link-color: #b74a12;
	--theme-link-color-hover: #b74a12;
	--theme-link-color-visited: #b74a12;
	background-color: #fbefe6;
	border: .3rem solid #74372e;
	margin-top: 20px;
	border-radius: 1rem;
}
.fp-box > .fp-header {
	background: #faac84;
	border: 4px solid #74372e;
	border-radius: 2rem;
	color: #74372e;
	font-size: 132%;
	font-weight: 700;
	margin: -25px auto 0 auto;
	text-align: center;
	width: max-content;
	padding: 5px 10px;
}
.fp-box > .fp-content {
	padding: .3rem .6rem .3rem .6rem;
}
.fp-box > .fp-content > p {
	margin: 0;
}
.fp-link {
	text-align: center;
}
body .fp-link > ul {
	margin: 0;
}
.fp-link li {
	display: inline;
}
.fp-link a,
.mw-parser-output .fp-link a.external {
	background-color: #fafbec;
	border: 3px solid #74372e;
	border-radius: .5rem;
	display: inline-block;
	margin: 0.2em 0.1em;
	min-width: 140px;
	padding: .3rem .5rem;
	white-space: nowrap;
}
.fp-link #MPtwitter::before,
.fp-link #MPdiscord::before,
.fp-link #MPtiktok::before,
.fp-link #MPtwitch::before {
	background-repeat: no-repeat;
	content: '';
	display: inline-block;
	height: 24px;
	margin-right: 2px;
	vertical-align: bottom;
	width: 24px;
}
.fp-link #MPtwitter::before { /* [[File:Twitter.png]] */
	background-image: url('https://mailtime.wiki.gg/images/thumb/f/f7/Twitter.png/24px-Twitter.png');
}
.fp-link #MPdiscord::before { /* [[File:Discord.png]] */
	background-image: url('https://mailtime.wiki.gg/images/thumb/d/dd/Discord.png/24px-Discord.png');
}
.fp-link #MPtiktok::before { /* [[File:TikTok.png]] */
	background-image: url('https://mailtime.wiki.gg/images/thumb/f/ff/TikTok.png/24px-TikTok.png');
}
.fp-link #MPtwitch::before { /* [[File:Twitch.png]] */
	background-image: url('https://mailtime.wiki.gg/images/thumb/4/40/Twitch.png/24px-Twitch.png');
}