MediaWiki:Common.css

/* CSS placed here will be applied to all skins other than mobile */

/*fonts*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Goldman:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play');

/*
* Custom variables
* Note: The linter will throw errors. See for more info:
* https://community.fandom.com/wiki/Help:Advanced_CSS_and_JS#Common_issues
*/
.theme-fandomdesktop-dark {
	--dcc-box-bg: #2C2400;
	--dcc-border-color: #dcb400;
	--dcc-table-header-color: #dcb400;
	--dcc-table-header-background-color: #595558;
	--dcc-table-default-bgc: #1A1518;
	--dcc-table-default-bgxtra: #0A0508;
	--dcc-table-even-row-bgc: #3E3A3C;
	--dcc-table-even-row-bgxtra: #2E2A2C;
	--dcc-table-text-color: #cecece;
	--dcc-table-border-color: #a16c09;
	--dcc-table-border-dark: #cecece;
	--dcc-card-max-width: 90%;
	--dcc-table-concept-max-height: 100%;
}
.theme-fandomdesktop-light {
	--dcc-box-bg: #F8F0CC;
	--dcc-border-color: #dcb400;
	--dcc-table-header-color: #A16C09;
	--dcc-table-header-background-color: #EEEEEE;
	--dcc-table-default-bgc: #FEFEFE;
	--dcc-table-default-bgxtra: #EEEEEE;
	--dcc-table-even-row-bgc: #F4F4F4;
	--dcc-table-even-row-bgxtra: #E4E4E4;
	--dcc-table-text-color: #000000;
	--dcc-table-border-color: #a16c09;
	--dcc-table-border-dark: #cecece;
	--dcc-card-max-width: 90%;
	--dcc-table-concept-max-height: 100%;
}

.dccDummyClassBecauseVariablesAreBuggyAndThisFixesThemSoLeaveItHere {
	padding: 1px;
}

/*---------------------------------------------------------------------------------------------------------------------------------------
TABLE OF CONTENTS
 1. WIKI GENERAL
 2. MAIN PAGE
 3. CATEGORY PAGES
 4. ARTICLE PAGES
 5. INFOBOXES
 6. NAVBOXES
 7. CUSTOM ADMIN EDIT COLORS
 MISC
---------------------------------------------------------------------------------------------------------------------------------------
1. WIKI GENERAL */

/* Header */
.fandom-community-header {
	background: rgba(37,30,36,.55);
	padding: 16px 12px 12px;
	margin-bottom: -12px;
}
.fandom-community-header a.fandom-community-header__community-name {
	font-family: "Bebas Neue", "Open Sans", sans-serif;
	letter-spacing: 2px;
	font-size: 32px;
	text-transform: uppercase;
}
.fandom-community-header__community-name, .wds-tabs .first-level-item {
	filter: drop-shadow(1px 2px #251e24) drop-shadow(-1px 1px 2px #251e24);
	z-index: 2;
}

/* Page backgrounds */
.page__main {
	background-color: rgba(var(--theme-page-background-color--rgb), 0.98);
}

/* Padded bullet points */
.half-space-list li {
	padding: 0.25em;
}

/* Highlight Effect */
.dcc-highlight {
	background-image: linear-gradient(to top, rgba(220,180,0,0.5) 54%, #0000 54%, #0000 100%);
	display: inline;
	letter-spacing: .5px;
	padding-left: 6px;
	padding-right: 6px;
}

/*-------------------------------------------------------------------------------------------------------------------------------------
2. MAIN PAGE */

.mainpage-box {
	border: 1px solid #e3e3e3;
	box-shadow: 2px 2px 2px 0;
	padding: 8px; margin: 8px 0;
	background-color: var;
}

/*-------------------------------------------------------------------------------------------------------------------------------------
3. CATEGORY PAGES */

/* Reduces size of "Trending Articles" section */
#content .category-page__trending-pages {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
#content .category-page__trending-page-thumbnail {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
}
#content .category-page__trending-page-title {
	font-size:80%;
}

/*-------------------------------------------------------------------------------------------------------------------------------------
4. ARTICLE PAGES */
.mw-page-title-main {
	font-family: "Goldman", "Rubrik", sans-serif;
	letter-spacing: 2px;
	font-size: 32px;
}
.page-header__title {
	font-family: "Goldman", "Rubrik", sans-serif;
	letter-spacing: 2px;
	font-size: 32px;
}

.mw-headline {
	font-family: "Bebas Neue", "Rubrik", sans-serif;
	letter-spacing: 3px;
}

.page-content h2 {
	font-size: 26px;
}

.page-content h3 {
	font-size: 1.3em;
}

.wds-collapsible-panel__header {
	font-family: "Goldman", "Rubrik", sans-serif;
	letter-spacing: 2px;
}

/* Smaller reference list */
.references {
  font-size: 0.8em;
}

/*-------------------------------------------------------------------------------------------------------------------------------------
5. INFOBOXES */

/*-------------------------------------------------------------------------------------------------------------------------------------
6. NAVBOXES */
table.nav {
	width:100%;
	margin-top:1em;
	border: 1px solid #cecece;
	border-radius: 5px;
	background-color: var;
	font-size: 10pt;
}
table.nav th {
	padding: 0.2em 0.2em;
	font-size: 10pt;
	text-align: center;
	background: rgba(206,206,206,0.35);
	border-bottom: 1px solid #cecece;
	font-family: "Goldman", "Open Sans", sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}
table.nav td, table.nav tr {
	border-bottom: 1px solid #cecece;
	padding:0.2em 0.2em;
}

table.nav td:nth-child(1) {
	text-align: right;
	border-right: 1px solid #cecece;
	padding: 0.2em 0.5em;
	font-family: "Goldman", "Open Sans", sans-serif;
	font-size: 9pt;
	letter-spacing: 1px;
}
table.nav tr:nth-child(even) {
	background: rgba(206,206,206,0.2);
}

/*-------------------------------------------------------------------------------------------------------------------------------------
7. ADMIN / BOT EDIT COLORS */

/* Admins */
a[href$="/wiki/User:Eekz"],
a[href$="/wiki/User:Sandboy_OC"]
a[href$="/wiki/User:ShadowsOnStars"]
a[href$="/wiki/User:Waterkangaroo73"]{
	color: #dcb400;
}

/* Bots */
a[href$="/wiki/User:Sandbot1"] {
	color: #878787;
}

/*-------------------------------------------------------------------------------------------------------------------------------------
MISC. */
/* Progression Table Format */
.dccProgTable {
	width: 100%;
	max-height: var(--dcc-table-concept-max-height);
	box-sizing: border-box;
	margin-top:1em;
	overflow: auto;
	border: 1px solid #cecece;
	border-radius: 5px;
	text-align: center;
	font-size: 0.9em;
}
.dccProgTable tr:nth-child(even):hover {
	background-color: rgba(220,180,0,0.3);
	}
.dccProgTable tr:nth-child(even) {
	background-color: rgba(206,206,206,0.18);
	}
.dccProgTable tr:nth-child(odd):hover {
	background-color: rgba(220,180,0,0.3);
	}
.dccProgTable tr:nth-child(odd) {
	background-color: var(--dcc-table-default-bgc);
	}					
.dccProgTable tr:nth-child(2).td {
	border-top: 0;
	}
.dccProgTable tr:last-child.td {
	border-bottom: 0;
	}
.dccProgTable th {
	padding: 0.1em;
	box-sizing: border-box;
	border-bottom: solid 0.2em var(--dcc-table-border-dark);
	position: sticky;
	top: 0;
	color: var(--dcc-table-header-color:);
	background-color: rgba(206,206,206,0.35);
    font-family: "Goldman", "Rubrik", sans-serif;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 2px;
	}
.dccProgTable th:nth-child(1), .dccProgTable td:nth-child(1) {
	text-align: right;
	font-weight: 700;
	width: 20%;
	background-color: rgba(206,206,206,0.3);
	border-right: 0.1em double (--dcc-table-border-dark);
	}
.dccProgTable td {
	color: var(--dcc-table-text-color);
	padding: 0.2em;
	box-sizing: border-box;
	border-bottom: solid 0.05em #cecece;
	border-left: solid 0.05em #cecece;
	/*white-space: nowrap;*/
	}

/* General Table Left-Aligned */
.dccTable {
	width: 100%;
	margin-top:1em;
	border: 1px solid #cecece;
	border-radius: 5px;
	text-align: left;
	font-size: 0.95em;
}
.dccTable tr:nth-child(even):hover {
	background-color: rgba(220,180,0,0.3);
	}
.dccTable tr:nth-child(even) {
	background-color: rgba(206,206,206,0.18);
	}
.dccTable tr:nth-child(odd):hover {
	background-color: rgba(220,180,0,0.3);
	}
.dccTable tr:nth-child(odd) {
	background-color: var(--dcc-table-default-bgc);
	}					
.dccTable tr:nth-child(2).td {
	border-top: 0;
	}
.dccTable tr:last-child.td {
	border-bottom: 0;
	}
.dccTable th {
	padding: 0.1em;
	border-bottom: solid 0.2em var(--dcc-table-border-dark);
	position: sticky;
	top: 0;
	color: var(--dcc-table-header-color:);
	background-color: rgba(206,206,206,0.35);
	font-family: "Goldman", "Rubrik", sans-serif;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 2px;
	text-align: center;
	}
.dccTable th:nth-child(1), .dccTable td:nth-child(1) {
	text-align: right;
	font-weight: 700;
	max-width: 20%;
	background-color: rgba(206,206,206,0.3);
	border-right: 0.1em double (--dcc-table-border-dark);
	}
.dccTable td {
	color: var(--dcc-table-text-color);
	padding: 0.2em;
	box-sizing: border-box;
	border-bottom: solid 0.05em #cecece;
	border-left: solid 0.05em #cecece;
	word-wrap: break-word;
	}

/* Beyond this point there be dragons */


/* Funky Table Experiment */
.dccFunkyTable {
	min-width: 60%;
    max-width: var(--dcc-card-max-width);
	max-height: var(--dcc-table-concept-max-height);
    display: inline flex;
    flex-direction: column;
    margin-top:1em;
    font-size: 1em;
    text-align: left;
    border: 0.2em solid var(--dcc-table-border-dark);
    border-radius: 0.5em;
	border-collapse: collapse;
	overflow: auto;
	background-color: var(--dcc-table-default-bgc);
}

.dccFunkyTable tr:nth-child(even):hover {
	background-color: var(--dcc-table-even-row-bgxtra);
	}
				
.dccFunkyTable tr:nth-child(even) {
	background-color: var(--dcc-table-even-row-bgc);
	}		

.dccFunkyTable tr:nth-child(odd):hover {
	background-color: var(--dcc-table-default-bgxtra);
	}
				
.dccFunkyTable tr:nth-child(odd) {
	background-color: var(--dcc-table-default-bgc);
	}					
			
.dccFunkyTable tr:nth-child(2).td {
	border-top: 0;
	}
				
.dccFunkyTable tr:last-child.td {
	border-bottom: 0;
	}

.dccFunkyTable th {
	font-family: "Goldman", "Rubrik", sans-serif;
	padding: 0.5em;
	box-sizing: border-box;
	color: var(--dcc-table-header-color);
	font-weight: normal;
	background-color: var(--dcc-table-header-background-color);
	border-bottom: solid 0.2em var(--dcc-table-border-dark);
	position: sticky;
	top: 0;
	}
			
.dccFunkyTable th:nth-child(1) {
	text-align: right;
	max-width: 20%;
	border-right: 0.2em solid var(--dcc-table-border-dark);
	}
	
.dccFunkyTable td {
	color: var(--dcc-table-text-color);
	padding: 0.5em;
	box-sizing: border-box;
	border: solid 0.05em var(--dcc-table-border-color);
	border-left: 0;
	white-space: nowrap;
	}

.dccFunkyTable td:nth-child(1) {
	font-family: "Goldman", "Rubrik", sans-serif;
	width: 20%;
	text-align: right;
	border-right: 0.2em solid var(--dcc-table-border-dark);
	color: var(--dcc-table-header-color);
	}
	
	
/* THIS TEMPLATE DOES NOT WORK ON MOBILE, AND IS NOT CURRENTLY IN  USE ON OUR WIKI. */
/** Template:Navbox
* Note: The linter will throw errors. See for more info:
* https://community.fandom.com/wiki/Help:Advanced_CSS_and_JS#Common_issues
.navbox {
	--navbox-bg-color: var(--theme-page-background-color);
	--navbox-text-color: var(--theme-page-text-color);
	--navbox-alt-color: rgba(var(--theme-accent-color--rgb, rgb(85,85,85)),.1);
}
.navbox {
	width: calc(100% - 10px);
	background: var(--navbox-bg-color, #FFF);
	color: var(--navbox-text-color, #000);
	margin: 1em auto;
	font-size: 90%;
	clear: both;
	padding: 3px;
	border-spacing: 0;
	border: 2px solid var(--dcc-border-color);
	border-radius: 5px;
}*/
/* Merges navboxes that are directly under eachother */
/*.navbox + .navbox {
	margin-top: -11px;
}
.navbox .navbox-title {
	background: var(--dcc-box-bg);
	color: var(--navbox-text-color, #000);
	font-weight: bold;
}
.navbox-title th {
	padding: 3px 0;
	font-size: 10pt;
}
.navbox .navbox-vde {
	float:left;
	width:65px;
}
.navbox .navbox-title-padright {
	padding-right: 65px;
}
.navbox .navbox-title-padleft {
	padding-left: 65px;
}
.navbox .navbox-subgroup {
	border-spacing: 0;
	width: 100%;
}
.navbox .navbox-gutter {
	height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
	background: var(--navbox-bg-color, #FFF);
}
.navbox .navbox-section-row > td {
	padding: 0;
	height: 100%;
}
.navbox .navbox-section {
	width: 100%;
	border-spacing: 0;
}
.navbox .navbox-above,
.navbox .navbox-below {
	background: var(--dcc-box-bg);
	text-align: center;
}
.navbox .navbox-image {
	background: var(--navbox-bg-color, #FFF);
	text-align: center;
}
.navbox .navbox-group,
.navbox .navbox-header {
	background: var(--dcc-box-bg);
	color: var(--navbox-text-color, #000);
	font-weight: bold;
	height: 100%;
	padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
	padding-left: 65px;
	float: right;
}
.navbox .navbox-group {
	text-align: right;
	padding-right: 1em;
	min-width: 150px;
}
.navbox .navbox-group,
.navbox .navbox-image-left {
	border-right: 2px solid var(--navbox-bg-color, #FFF);
}
.navbox-image-right {
	border-left: 2px solid var(--navbox-bg-color, #FFF);
}
.navbox .navbox-list {
	background: var(--navbox-bg-color, #FFF);
	color: var(--navbox-text-color, #000);
	width: 100%;
	height: 100%;
	padding: 0;
}
.navbox .alt > .navbox-list {
	background: var(--navbox-alt-color, #F7F7F7);
}
.navbox .navbox-list div {
	padding: 0 4px;
}
.navbox .navbox-list.no-group {
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
.navbox .mw-collapsible-toggle {
	width: 65px;
	float: right;
}*/