MediaWiki:Common.css

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

/** TOC
 1. Theme variables
 2. Main page
 3. Template:SimpleNavbox
 4. Template:Copyrightbox
 5. Playable Characters
 6. Pixelated image rendering
 7. Weapons and Spells
 8. article-table
**/

/* Theme variables */
html {
	/* Background */
	--theme-background-image: url(https://darkdeity.wiki.gg/images/b/b0/Site-background-light.png);
	--theme-content-background: rgba(255, 255, 255, 0.8);
	--theme-background-color--secondary: #d9ecf2;

	/* Link color */
	--theme-link-color: #2c56a0;
	--theme-link-color--hover: #152a4f;
	--theme-alert-color: #ba1231;
	--theme-alert-color--hover: #59000a;

	/* Text color */
	--theme-text-color: #3a3a3a;
	--theme-text-color--rgb: 58,58,58;

	/* Border */
	--theme-border-color: #cecece;
	--theme-title-border: #e2c496;

	/* Gradients */
	--theme-border-gradient: linear-gradient(#d8a658 0%,#b18546 40%,#b18546 60%,#d8a658 100%);
	--theme-background-gradient: linear-gradient(#d8a658 0%, #b18546 10%, #b18546 90%, #d8a658 100%);

	/* Other */
	--theme-alert-color: #ba1231;
	--theme-success-color: #0c742f;
	--theme-hover-background: 0, 0, 0;
	--theme-hover-transparency: 0.04;

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

	/* Main page */
	--theme-mainpage-background: #fff;

	/* Weapon and Spell colors */
	--clr-power: #820E19;
	--clr-finesse: #50B0D0;
	--clr-focus: #4fac39;
	--clr-balance: #B3B34F;

	/* article-table */
	--custom-dynamic-color: 0, 0, 0;
}
.theme-dark {
	/* Background */
	--theme-background-image: url(https://darkdeity.wiki.gg/images/9/9a/Site-background-dark.png);
	--theme-background-color: #2c1a61;
	--theme-content-background: rgba(71, 70, 70, 0.8);
	--theme-background-color--secondary: #323c3c;
	
	/* Link color */
	--theme-link-color: #cca5ff;
	--theme-link-color--hover: #ffffff;
	--theme-alert-color: #f1748b;
	--theme-alert-color--hover: #ff3048;
	
	/* Text color */
	--theme-text-color: #e6e6e6;
	--theme-text-color--rgb: 230,230,230;
	
	/* Border */
	--theme-border-color: #6f6e6e;
	--theme-title-border: #4a5c69;
	
	/* Gradients */
	--theme-border-gradient: linear-gradient(#36454F 0%,#212b31 50%, #36454F 100%);
	--theme-background-gradient: linear-gradient(#36454F 25%,#212b31 75%);
	
	/* Other */
	--theme-alert-color: #c90018;
	--theme-hover-background: 255, 255, 255;
	--theme-hover-transparency: 0.17;
	
	/* Wikitable */
	--theme-table-background: #131313;
	--theme-table-header: #363636;
	
	/* Main page */
	--theme-mainpage-background: #000;

	/* Weapon and Spell colors */
	--clr-power: #B65955;
	--clr-finesse: #50B0D0;
	--clr-focus: #6EC759;
	--clr-balance: #C4C658;
	
	/* article-table */
	--custom-dynamic-color: 255, 255, 255;
}

/* Main page */
.fp-main {
	display: grid;
	gap: 10px;
	grid-template-areas: "a" "b" "c" "d" "e";
	grid-template-columns: 100%;
}
@media screen and (min-width:1290px) {
	.fp-main {
		grid-template-areas: "a d" "b b" "c e";
		grid-template-columns: 69% 30%;
	}
}
.FP-links {
	text-align: center;
}
.FP-links a.external {
	background-image: none;
}
.theme-dark .FP-links img {
	filter: invert(1);
}
.FP-links img[alt=Kickstarter] {
	height: auto;
	width: 40px;
}
.FP-links .external {
	background-image: none;
	padding-right: 0;
}
.fp-title {
	font-size: 1.2rem;
	clip-path: polygon(
		1em 0%,
		calc(100% - 1em) 0%,
		100% 50%,
		calc(100% - 1em) 100%,
		1em 100%,
		0% 50%
	);
	height: 2em;
	position: absolute;
	top: -1.2em;
	left: 20%;
	isolation: isolate;
	padding: 2px;
	right: 20%;
	line-height: 2em;
}
.fp-title::before {
	z-index: -2;
	background-color: var(--theme-title-border);
}
.fp-title::after, .fp-title::before {
	content: '';
	position: absolute;
	inset: 0;
}
.fp-title::after {
	clip-path: polygon(
		calc(1em + 1px) 2px,
		calc(100% - 1em - 1px) 2px,calc(100% - 3px) 50%,
		calc(100% - 1em - 1px) calc(100% - 2px),
		calc(1em + 1px) calc(100% - 2px),
		3px 50%
	);
	z-index: -1;
	background: var(--theme-mainpage-background);
}
.fp-section {
	background: var(--theme-mainpage-background);
	font-weight: 600;
	margin-top: 1.5em;
	border-radius: 10px;
	padding: 1.5em 5px 5px 5px;
	text-align: center;
	position: relative;
	background-clip: padding-box;
	border: solid 2px transparent;
}
.fp-section::before,
.simplenavbox::before {
	content: '';
	background: var(--theme-background-gradient);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
	margin: -2px;
	border-radius: inherit;
}

/* [[Template:SimpleNavbox]] */
.simplenavbox {
	background: var(--theme-mainpage-background);
	border-radius: 0.3rem;
	clear: both;
	margin-bottom: 0.3rem;
	padding: 0.3rem;
	position: relative;
	width: 100%;
}
.simplenavbox .simplenavbox-top {
	background: var(--theme-border-gradient);
	border-radius: 0.125rem;
	padding: 0 0.3rem;
}
.simplenavbox .simplenavbox-top .mw-collapsible-toggle {
	font-size: small;
}
.simplenavbox .simplenavbox-top,
.content-body .simplenavbox .simplenavbox-top a,
.content-body .simplenavbox .simplenavbox-top a.external {
	color: #fff;
}
.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: rgba(var(--theme-text-color--rgb),.15);
	border-radius: 0.125rem;
	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 */
.mw-body .hlist ul,
#bodyContent .hlist ul,
.simplenavbox td ul {
	display: inline;
	margin-left: 0;
	padding: 0;
	white-space: normal;
}
.mw-body .hlist li,
#bodyContent .hlist li,
.simplenavbox td li {
	display: inline;
	white-space: nowrap;
}
.mw-body .hlist li:not(:last-child),
#bodyContent .hlist li:not(:last-child),
.simplenavbox td li:not(:last-child) {
	padding-right: 0.286rem;
}
.mw-body .hlist li:not(:last-child)::after,
#bodyContent .hlist li:not(:last-child)::after,
.simplenavbox td li:not(:last-child)::after {
	background-color: var(--theme-text-color);
	bottom: 0.214rem;
	content: '';
	display: inline-block;
	height: 3px;
	left: 0.286rem;
	position: relative;
	width: 3px;
}
.mw-body .hlist li li:first-child::before,
#bodyContent .hlist li li:first-child::before,
.simplenavbox td li li:first-child::before {
	content: '(';
	font-weight: normal;
}
.mw-body .hlist li li:last-child::after,
#bodyContent .hlist li li:last-child::after,
.simplenavbox td li li:last-child::after {
	content: ')';
	font-weight: normal;
}
.mw-body .hlist li li li,
#bodyContent .hlist li li li,
.simplenavbox td li li li {
	font-size: x-small;
}
.simplenavbox .simplenavbox-navbar {
	float: left;
	font-size: 80%;
}

/* [[Template:Copyrightbox]] */
.copyrightbox {
	background: var(--theme-mainpage-background);
	border-radius: 0.3rem;
	font-size: 80%;
	padding: 0.3rem;
}

/* [[Playable Characters]] */
.character {
	background-color: var(--theme-background-color--secondary);
	border-radius: 1rem;
	display: inline-block;
	margin: .2rem;
	text-align: center;
}

/* Pixelated image rendering */
.pixel-image {
	image-rendering: pixelated;
}

/* [[Weapons and Spells]] */
.article-table > * > tr > .item-power {
	color: var(--clr-power);
	font-weight: bold;
}
.article-table > * > tr > .item-finesse {
	color: var(--clr-finesse);
	font-weight: bold;
}
.article-table > * > tr > .item-focus {
	color: var(--clr-focus);
	font-weight: bold;
}
.article-table > * > tr > .item-balance {
	color: var(--clr-balance);
	font-weight: bold;
}

/* article-table */
.article-table {
	background: rgba(var(--custom-dynamic-color),.02);
	border: 0 var(--theme-border-color);
	border-collapse: collapse;
	margin: 1em 1em 1em 0;
}
.article-table th {
	background: rgba(var(--custom-dynamic-color),.05);
	text-align: left;
}
.article-table td,
.article-table th {
	border-bottom: 1px solid var(--theme-border-color);
	padding: 6px 12px;
}
.article-table caption {
	font-weight: 700;
}