MediaWiki:Common.css

From UnderMine Wiki
Jump to navigation Jump to search

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

/** TOC
 1. theme variables
 2. Template:Ambox
 3. Template:Dialog
 4. Template:Doc
 5. Template:History
 6. Module:Infobox
 7. Template:Key
 8. Template:SimpleNavbox
 9. Template:Shortcut
 10. Template:Table choice
 11. Community Portal
 12. Discord
 13. JS Link
 14. TOC
 15. Main page
 16. Other
**/

@import url("/index.php?title=MediaWiki:Themes.css&action=raw&ctype=text/css"); /* Infobox-Themes */

@font-face {
	font-family: 'Volter';
	src: local('Volter'), local('Volter'), url('https://undermine.fandom.com/media/hydra/fonts/volter.ttf') format('truetype');
}

/* theme variables */
html {
	scroll-padding-top: 35px;

	/* Link color */
	--theme-link-color: #a45e00;
	--theme-link-color--hover: #191309;
	--theme-link-new: #bf0017;
	--theme-link-new--hover: #59000a;

	/* Article background color */
	--theme-background-color: #e4f8ff;
	--theme-background-color--secondary: #d9ecf2;

	/* Text color */
	--theme-text-color: #000;
	--theme-text-color--rgb: 0,0,0;

	/* Border */
	--theme-border-color: #bac9ce;

	/* Wikitable */
	--theme-table-background: #f8f9fa;
	--theme-table-header: #eaecf0;

	/* Other */
	--theme-alert-color: #ba1231;
	--theme-list-icon: url(https://undermine.wiki.gg/images/a/a5/Bullet_black.svg); /* [[File:Bullet black.svg]] */
	--theme-hover-background: 0, 0, 0;
	--theme-hover-transparency: 0.04;
	--theme-success-color: #0c742f;
	--theme-warning-label: #000;
	--theme-alert-label: #fff;
	--theme-success-label: #fff;
	--theme-warning-color: #cf721c;
	
	/* new theme */
	--undermine-background: rgba(238, 232, 224, 0.9);
	--undermine-border: #795e4d;
	--undermine-text: #795e4d;
	--undermine-accent: 0,0,0;
	--undermine-infobox: #b99a6d;
}
.theme-dark {
	/* Link color */
	--theme-link-color: #f58120;
	--theme-link-color--hover: #f9b881;
	--theme-link-new: #ce0018;
	--theme-link-new--hover: #fe344c;

	/* Article background color */
	--theme-background-color: #0e191a;
	--theme-background-color--secondary: #323c3c;

	/* Text color */
	--theme-text-color: #e6e6e6;
	--theme-text-color--rgb: 230,230,230;

	/* Border */
	--theme-border-color: #444c4d;

	/* Wikitable */
	--theme-table-background: #131313;
	--theme-table-header: #363636;
	
	/* Other */
	--theme-alert-color: #c90018;
	--theme-list-icon: url(https://undermine.wiki.gg/images/2/2d/Bullet_white.svg); /* [[File:Bullet white.svg]] */
	--theme-hover-background: 255, 255, 255;
	--theme-hover-transparency: 0.17;
	
	/* new theme */
	--undermine-background: rgba(44, 44, 44, 0.9);
	--undermine-border: #795e4d;
	--undermine-text: #e6e6e6;
	--undermine-accent: 255,255,255;
	--undermine-infobox: #242424;
}

/* [[Template:Ambox]] */
.ambox {
	align-items: center;
	background-color: rgb(127, 127, 127);
	background-color: rgba(127, 127, 127, 0.3);
	border-left: 0.3rem solid currentColor;
	border-radius: 0.3rem;
	display: flex;
	margin-bottom: 0.3rem;
	padding: 0.5rem 0 0.5rem 0.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;
}

/* [[Template:Dialog]] */
/* [[File:Dialog name.png]] */
/* [[File:Button regular.png]] */
.dialog {
	background-color: #bc9a5f;
	border: 4px solid #9c703b;
	border-radius: 8px;
	box-sizing: content-box;
	color: #453022;
	font-family: cursive;
	font-size: 75%;
	font-weight: bold;
	line-height: normal;
	margin: 23px 0 0 16px;
	min-height: 59px;
	padding: 9px 19px 5px 75px;
	position: relative;
	width: 270px;
}
.dialog.dialog-button {
	padding-bottom: 10px;
}
.dialog-button + .dialog {
	margin-top: 35px;
}
.dialog p {
	font-size: 100%;
	font-weight: bold;
}
.dialog .dialog-portrait {
	position: absolute;
	left: -20px;
	top: -26px;
}
.dialog .dialog-name {
	background: url(https://undermine.wiki.gg/images/2/21/Dialog_name.png) center no-repeat;
	background-size: 100%;
	color: #fff;
	font-size: 130%;
	font-weight: bold;
	height: 24px;
	left: 70px;
	padding: 5px 0 0 8px;
	position: absolute;
	text-shadow: 1px 1px black;
	top: -26px;
	width: 246px;
}
.dialog .dialog-button-yes,
.dialog .dialog-button-no {
	background: url(https://undermine.wiki.gg/images/d/df/Button_regular.png) center no-repeat;
	color: white;
	font-size: 100%;
	height: 24px;
	padding-top: 5px;
	position: absolute;
	text-align: center;
	top: calc(100% - 10px);
	width: 100px;
}
.dialog .dialog-button-yes {
	left: 110px;
}
.dialog .dialog-button-no {
	left: 220px;
}

/* [[Template:Doc]] */
.doc {
	margin: 0 auto 1rem;
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px solid #795e4d;
	border-radius: 1rem;
	padding: 1rem;
}
.doc-header {
	border-bottom: 1px solid #795e4d;
	margin-bottom: 5px;
	padding-bottom: 5px;
}
.doc-footer {
	margin: 0;
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px solid #795e4d;
	border-radius: 1rem;
	padding: 1rem;
}
.doc-title {
	display: block;
	font-size: 132%;
	font-weight: bold;
	line-height: normal;
	margin: 0 auto 5px;
	width: max-content;
}
.doc .doc-links {
	display: block;
	margin: 0 auto;
	width: max-content;
}

/* [[Template:FPbox]] */
.fp-header .fp-text-header {
	font-size: 132%;
	font-weight: 700;
}

/* [[Template:History]] */
.history ul {
	list-style-image: none;
	list-style-type: none;
	margin: 0;
}
.history li:not(:first-of-type) {
	padding-top: 2px;
}
.history li:not(:last-of-type) {
	padding-bottom: 2px;
}
html.theme-light .history ul li + li {
	border-top: 1px solid rgb(186, 201, 206);
}
html.theme-dark .history ul li + li {
	border-top: 1px solid rgb(68, 76, 77);
}

/* [[Module:Infobox]] */
.infobox {
	background-color: #b99a6d;
	border: 3px solid #1f3042;
	border-radius: 0.25rem;
	clear: right;
	font-size: .85em;
	float: right;
	margin: 0 0 15px 15px;
	padding: 0.5rem;
	width: 270px;

}
html.theme-dark .infobox {
	background-color: #242424;
	border-color: var(--undermine-border);
}
.infobox .infobox-image {
	text-align: center;
	padding: 5px;
	max-width: 100%;
}
.infobox .infobox-image img {
	max-width: 100%;
	height: auto;
}
.infobox-bestiary .infobox-image img,
.infobox-familiar .infobox-image img,
.infobox-item .infobox-image img {
	background: url(https://undermine.wiki.gg/images/4/49/Item_Background.png) center no-repeat;
}
.infobox .infobox-title {
	background-color: #365857;
	border: 2px solid #23130c;
	border-radius: 0.25rem;
	box-shadow: inset 0 0 0 2px #b49a6d;
	color: #fff;
	font-family: inherit;
	font-size: 1.75em;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 4px;
	padding: 5px 10px;
	text-align: center;
}
.infobox .infobox-rows {
	width: 100%;
}
.infobox-rows > tbody > tr > th {
	font-weight: bold;
	text-align: left;
}
#mw-content-text .infobox-rows p {
	margin: 0;
}
.infobox-rows > tbody > tr > td > ul {
	list-style: none none;
	margin: 0;
}
.infobox .infobox-footer {
	text-align: center;
}

/* Currency icons */
/* [[File:Minor Curse.png]] */
.infobox td.minor-curse > p { color: #C785E6 }
.infobox td.minor-curse > p::before { background-image: url(https://undermine.wiki.gg/images/2/2c/Minor_Curse.png) }

/* [[File:Major Curse.png]] */
.infobox td.major-curse > p { color: #C785E6 }
.infobox td.major-curse > p::before { background-image: url(https://undermine.wiki.gg/images/e/e9/Major_Curse.png) }

/* [[File:Blessing.png]] */
.infobox td.blessing > p { color: #EBC68D }
.infobox td.blessing > p::before { background-image: url(https://undermine.wiki.gg/images/c/cb/Blessing.png) }

/* [[File:Heart.png]] */
.infobox td.health > p { color: #991D1E }
.infobox td.health > p::before { background-image: url(https://undermine.wiki.gg/images/d/d9/Heart.png) }

.infobox td.nether { color: #AEECE1 }

/* [[File:Thorium1.png]] */
.infobox td.craft-cost > p { color: #C785E6 }
.infobox td.craft-cost > p::before { background-image: url(https://undermine.wiki.gg/images/6/67/Thorium1.png) }

/* [[File:Gold10.png]] */
.infobox td.shop-cost > p { color: #FFB400 }
.infobox td.shop-cost > p::before { background-image: url(https://undermine.wiki.gg/images/8/83/Gold10.png) }

.infobox td.health > p::before,
.infobox td.blessing > p::before,
.infobox td.major-curse > p::before,
.infobox td.minor-curse > p::before,
.infobox td.shop-cost > p::before,
.infobox td.craft-cost > p::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 16px;
	vertical-align: middle;
	width: 16px;
}
.infobox td.health,
.infobox td.blessing,
.infobox td.major-curse,
.infobox td.minor-curse,
.infobox td.shop-cost,
.infobox td.craft-cost {
	font-weight: bold;
	text-shadow: 0 0 5px #000;
}

/* Item rarity */
.infobox .rarity-legendary {
	color: #CD0E20;
	font-weight: bold;
}
.infobox .rarity-rare {
	color: #CD770E;
	font-weight: bold;
}

/* Item types (m_slot) */
.infobox .type-curse, /* Curse */
.infobox .type-minor-curse { /* Minor Curse */
	color: #E087B9;
}
.infobox .type-hex { /* Hex */
	color: #B495F3;
}
.infobox .type-blessing { /* Blessing */
	color: #DABC7C;
}
.infobox .type-bomb, /* Unique Bomb Relic */
.infobox .type-boots, /* Unique Boots Relic */
.infobox .type-gloves, /* Unique Throw Relic */
.infobox .type-hat, /* Hat */
.infobox .type-weapon { /* Unique Swing Relic */
	color: #DF4949;
}
.infobox .type-artifact, /* Artifact */
.infobox .type-food, /* Food */
.infobox .type-item, /* Basic Item */
.infobox .type-potion, /* Potion */
.infobox .type-prayer, /* Prayer */
.infobox .type-relic, /* Relic */
.infobox .type-upgrade { /* Upgrade */
	color: #A38662;
}

/* [[Template:Key]] */
.key {
	background-color: rgb(221, 221, 221);
	background-color: rgba(221, 221, 221, 0.2);
	font-size: 80%;
	font-family: inherit;
	font-weight: bold;
	border: 1px solid rgb(85, 85, 85);
	border: 1px solid rgba(85, 85, 85, 0.4);
	border-radius: 0.13rem;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(221, 221, 221, 0.13) inset;
	padding: 0.1rem 0.4rem;
	text-shadow: 0 1px 0 rgba(221, 221, 221, 0.2);
	text-align: center;
}

/* [[Template:SimpleNavbox]] */
/* [[File:Border-normal.png]] */
.simplenavbox {
	background-color: #b99a6d;
	border: 3px solid #1f3042;
	border-radius: 0.3rem;
	clear: both;
	margin-bottom: 0.3rem;
	padding: 0.3rem;
	width: 100%;
}
html.theme-light .simplenavbox {
	--theme-link-color: #000;
	--theme-link-color--hover: #000;
}
html.theme-dark .simplenavbox {
	background-color: #242424;
	border-color: var(--undermine-border);
}
.simplenavbox .simplenavbox-top {
	--theme-link-color: #f58120;
	--theme-link-color--hover: #f9b881;
	background-color: #365857;
	border: 2px solid #23130c;
	border-radius: 0.125rem;
	box-shadow: inset 0 0 0 2px #b49a6d;
	color: #fff;
	padding: 0 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) {
	--border-image: url(https://undermine.wiki.gg/images/2/2a/Border-normal.png);
	background-color: #3a2f22;
	border: 3px solid transparent;
	border-image: var(--border-image) 45%/3/0 stretch;
	border-radius: 5px;
	color: white;
	font-size: 12px;
	font-weight: 700;
	padding: 0 10px;
	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:Shortcut]] */
.shortcut {
	border: 2px solid #795e4d;
	clear: right;
	float: right;
	margin: 0 0 1rem 1rem;
	max-width: 25rem;
	min-width: 4rem;
	padding: 0.2rem 0.4rem;
}

/* [[Template:Table choice]] */
.tc-yes { background: #c6efce; }
html.theme-dark .tc-yes { background: #29542c; }

.tc-always { background: #5dcc5d; }
html.theme-dark .tc-always { background: #3b533c; }

.tc-no { background: #ffc7ce; }
html.theme-dark .tc-no { background: #592c2c; }

.tc-never { background: #ff8787; }
html.theme-dark .tc-never { background: #533b3b; }

.tc-rarely { background: #fdce5e; }
html.theme-dark .tc-rarely { background: #594f1e; }

.tc-neutral { background: #ffeb9c; }
html.theme-dark .tc-neutral { background: #5b573f; }

.tc-partial { background: #ffffdd; }
html.theme-dark .tc-partial { background: #3e3d31; }

.tc-planned { background: #dfdfff; }
html.theme-dark .tc-planned { background: #242f2e; }

.tc-unknown { background: #ccc; }
html.theme-dark .tc-unknown { background: #364148; }

.tc-default { background: #fff; color: inherit; }
html.theme-dark .tc-default { background: #373737; color: inherit; }

.tc-hyphen { background: #ffc7ce; }
html.theme-dark .tc-hyphen { background: #352929; }

/* [[Project:Community portal]] */
.cpbox {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap
}

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

.cpbox #help {
	box-sizing: border-box;
	flex-grow: 1;
	margin: 5px;
	width: calc(67% - 10px)
}
html.theme-light .feature {
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	padding: 10px;
}
html.theme-dark .feature {
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	padding: 10px;
}

/* Discord */
div.discordbutton a[href="https://discord.gg/undermine"] {
	background: url(https://discordapp.com/api/guilds/486603349588836354/widget.png?style=banner2) no-repeat;
	color: transparent !important;
	display: inline-block;
	height: 76px;
	width: 90%;
	margin-top: 10px;
	background-size: contain;
	background-position: center;
}

div.discordbutton {
	text-align:center;
}

/* JS Link */
.jslink {
	color: var(--theme-link-color);
}
.jslink:hover {
	color: var(--theme-link-color--hover);
	cursor: pointer;
	text-decoration: underline;
}

/* invert images */
html.theme-light .invert-light,
html.theme-dark .invert-dark {
	filter: invert(1);
}
.theme-dark img.mwe-math-fallback-image-inline,
.theme-dark img:is([src*="Chat.svg"],[src*="Icon-warning-red.svg"]) {
	filter: invert(1);
}
.theme-light .fp-section .fp-platform img,
.theme-light table .os-icon,
.theme-light img[src*="Discord_logo.svg"] {
	filter: invert(0.7);
}

/* Main page */
.fp-main {
	display: grid;
	grid-gap: 10px;
	grid-template-areas: "a"
						 "b"
						 "c"
						 "d"
						 "e"
						 "f"
						 "g"
						 "h";
	grid-template-columns: 1fr;
}
@media screen and (min-width:1290px) {
	.fp-main {
		grid-template-areas: "a a c"
							 "b b c"
							 "d e g"
							 "d e h"
							 "f f h";
		grid-template-columns: 1fr 1fr 25%;
	}
}
@media screen and (min-width:1887px) {
	.fp-main {
		grid-template-areas: "a a c"
							 "b b g"
							 "d e h"
							 "f f f";
	}
}
@media screen and (min-width:2100px) {
	.fp-main {
		grid-template-areas: "a a c"
							 "b b g"
							 "d e h"
							 "f f h";
	}
}
@media screen and (max-width:1069px) {
	#fp-file {
		display: none;
	}
}
.fp-main .fp-header {
	display: grid;
	grid-template-areas: "aa" "ab";
	grid-template-columns: 1fr;
	height: 100%;
}
.fp-main .fp-header #fp-file {
	grid-area: aa;
	margin-bottom: auto;
	margin-top: auto;
}
.fp-main .fp-header #fp-file img {
	height: auto;
	max-width: 200px;
}
@media screen and (min-width:1070px) {
	.fp-main .fp-header {
		grid-template-areas: "aa ab";
		grid-template-columns: 1fr 3fr;
	}
	.fp-main .fp-header #fp-file img {
		max-width: 100%;
		height: auto;
	}
}
.fp-main .fp-header #fp-text {
	grid-area: ab;
	margin: auto 0;
	text-align: center;
}

/* Main page sections */
/* [[File:Border-menu.png]] */
.fp-main .border-menu {
	background-color: #bc995e;
	border: 5px solid #9c703b;
	border-image: url("https://undermine.wiki.gg/images/e/ef/Border-menu.png") 49% / 2 / 0 stretch;
	border-radius: 13px;
	color: #453022;
	image-rendering: pixelated;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 20px;
	padding: 20px 5px 5px 5px;
	position: relative;
	text-align: center;
}
.fp-main .border-menu a,
.fp-main .border-menu a:visited,
.fp-main .border-menu a.external,
.fp-main .border-menu a.external:visited {
	color: #1d0f00;
	font-weight: 600;
	text-shadow: none;
}
.fp-main .border-menu a:hover {
	color: #744818;
}

/* Main page section title */
/* [[File:Dialog name.png]] */
.fp-main .menu-title {
	background-image: url("https://undermine.wiki.gg/images/2/21/Dialog_name.png");
	background-repeat: no-repeat;
	background-size: 100%;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 800;
	height: 35px;
	left: -10px;
	line-height: 1.9;
	padding-left: 10px;
	position: absolute;
	text-align: left;
	text-shadow: 1px 1px #000;
	top: -20px;
	width: 295px;
}

/* Main page buttons */
/* [[File:Button regular.png]] */
/* [[File:Button gold.png]] */
.fp-main .menu-button li {
	background-image: url("https://undermine.wiki.gg/images/d/df/Button_regular.png");
	background-repeat: no-repeat;
	display: inline-block;
	height: 46px;
	margin: 3px 0;
	min-width: 178px;
}
.fp-main .menu-button a,
.fp-main .menu-button a:visited,
.fp-main .menu-button a.external,
.fp-main .menu-button a.external:visited {
	border-radius: 8px 5px 25px 8px;
	color: #fff;
	display: inline-block;
	font-size: 1rem;
	line-height: 2.9;
	min-width: 178px;
	text-shadow: 1px 1px #000;
}
.fp-main .menu-button a:hover {
	background-image: url("https://undermine.wiki.gg/images/b/bb/Button_gold.png");
	background-repeat: no-repeat;
	color: #fff;
	text-decoration: none;
}

/* Other */
.mobileonly {
	display: none;
}

.filehistory,
.pixel-image,
.infobox .infobox-image img,
.sg_image {
	image-rendering: pixelated;
}

/* Test */
.border {
	font-family: 'Volter';
	border: 5px solid transparent;
	border-image: var(--border-image) 45% / 4 / 0 stretch;
	image-rendering: pixelated;
	padding: 5px;
	background-color: #241714;
	border-radius: 20px;
}
.border-normal {
	--border-image: url("https://undermine.wiki.gg/images/2/2a/Border-normal.png");
	color: #9e7b55;
	text-shadow: 1px 1px #120e0b;
}
.border-gold {
	--border-image: url("https://undermine.wiki.gg/images/c/c7/Border-gold.png");
	color: #e1ac2f;
	text-shadow: 1px 1px #20140e;
}
.border-red {
	--border-image: url("https://undermine.wiki.gg/images/2/2a/Border-red.png");
	color: #cf4242;
	text-shadow: 1px 1px #100c09;
}
Retrieved from "https://undermine.wiki.gg/index.php?title=MediaWiki:Common.css&oldid=41618"