MediaWiki:Common.css

@font-face {
	font-family: 'AMD';
	src: local('Aero Matics Display Regular'), local('Aero-Matics-Display-Regular'), url('/media/hydra/fonts/Aero Matics Display Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'AMD';
	src: local('Aero Matics Display Bold'), local('Aero-Matics-Display-Bold'), url('/media/hydra/fonts/Aero Matics Display Bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: 'AMD Light';
	src: local('Aero Matics Display Light'), local('Aero-Matics-Display-Light'), url('/media/hydra/fonts/Aero Matics Display Light.ttf') format('truetype');
}


/* Variable and Base Value setup */
/*
	0 — for fonts
	1 — for backgrounds
	2 — for borders
*/
:root {
	--color-starter-0: 		hsla(230, 10%, 50%, 1);
	--color-starter-1: 		hsla(230, 15%, 25%, 1);
	--color-starter-2: 		hsla(230, 15%, 25%, 1);

	--color-common-0:		hsla(200, 60%, 60%, 1);
	--color-common-1:		hsla(200, 60%, 40%, 1);
	--color-common-2:		hsla(200, 60%, 20%, 1);

	--color-rare-0:			hsla(230, 65%, 60%, 1);
	--color-rare-1:			hsla(230, 45%, 45%, 1);
	--color-rare-2:			hsla(230, 45%, 25%, 1);

	--color-epic-0:			hsla(260, 70%, 65%, 1);
	--color-epic-1:			hsla(260, 40%, 40%, 1);
	--color-epic-2:			hsla(260, 40%, 25%, 1);

	--color-legendary-0: 	hsla(0	, 70%, 55%, 1);
	--color-legendary-1: 	hsla(0	, 70%, 40%, 1);
	--color-legendary-2: 	hsla(0	, 70%, 20%, 1);

	--color-divine-0:		hsla(45	, 80%, 50%, 1);
	--color-divine-1:		hsla(45	, 80%, 50%, 1);
	--color-divine-2:		hsla(45	, 80%, 20%, 1);



	--color-guardian-0:		hsla(200, 80%, 40%, 1);
	--color-guardian-1:		hsla(200, 80%, 30%, 1);
	--color-guardian-2:		hsla(200, 80%, 15%, 1);


	--color-rogue-0:		hsla(260, 40%, 50%, 1);
	--color-rogue-1:		hsla(260, 40%, 40%, 1);
	--color-rogue-2:		hsla(260, 40%, 25%, 1);


	--color-commando-0:		hsla(130, 50%, 45%, 1);
	--color-commando-1:		hsla(130, 50%, 35%, 1);
	--color-commando-2:		hsla(130, 50%, 20%, 1);


	--color-specialist-0:	hsla(0	, 50%, 55%, 1);
	--color-specialist-1:	hsla(0	, 50%, 45%, 1);
	--color-specialist-2:	hsla(0	, 50%, 20%, 1);



	--color-background:				hsla(200, 15%, 15%, 1);
	--color-container-background: 	hsla(0, 0%, 0%, 0.15);

	--font-color:	white;
	--type-color-0:	var(--color-starter-0);
	--type-color-1:	var(--color-starter-1);
	--type-color-2:	var(--color-starter-2);

	--name-box-shadow: inset 0px 0px 3px hsla(0, 0%, 100%, 0.5);

	--content-border-color:		hsla(230, 9%, 18%, 1);
	--default-content-border:	1px solid var(--content-border-color);
	--default-box-shadow: 		0px 3px 20px hsla(0,0%,0%,0.50);

	tab-size: 4;
}



/* Utility */
.centered {
	text-align: center;
	justify-content: center;
}
.flex {
	display: flex;
	flex-wrap: wrap;
}
.flex p {
	flex-basis: 100%;
}

b, .bold {
	font-weight: normal;
	font-family: AMD;
	letter-spacing: 1px;
	font-size: 1.15em;
	text-transform: uppercase;
	line-height: 100%;
}

.float-right {
	float: right;
	margin-left: 18px;
}

.float-left {
	float: left;
	margin-right: 18px;
}

/* Base Color Setup */
.color-guardian {
	--type-color-0: var(--color-guardian-0);
	--type-color-1: var(--color-guardian-1);
	--type-color-2: var(--color-guardian-2);
}

.color-rogue {
	--type-color-0: var(--color-rogue-0);
	--type-color-1: var(--color-rogue-1);
	--type-color-2: var(--color-rogue-2);
}

.color-commando {
	--type-color-0: var(--color-commando-0);
	--type-color-1: var(--color-commando-1);
	--type-color-2: var(--color-commando-2);
}

.color-specialist {
	--type-color-0: var(--color-specialist-0);
	--type-color-1: var(--color-specialist-1);
	--type-color-2: var(--color-specialist-2);
}

.color-starter {
	--type-color-0: var(--color-starter-0);
	--type-color-1: var(--color-starter-1);
	--type-color-2: var(--color-starter-2);
}

.color-common {
	--type-color-0: var(--color-common-0);
	--type-color-1: var(--color-common-1);
	--type-color-2: var(--color-common-2);
}

.color-rare {
	--type-color-0: var(--color-rare-0);
	--type-color-1: var(--color-rare-1);
	--type-color-2: var(--color-rare-2);
}

.color-epic {
	--type-color-0: var(--color-epic-0);
	--type-color-1: var(--color-epic-1);
	--type-color-2: var(--color-epic-2);
}

.color-legendary {
	--type-color-0: var(--color-legendary-0);
	--type-color-1: var(--color-legendary-1);
	--type-color-2: var(--color-legendary-2);
}

.color-divine {
	--type-color-0: var(--color-divine-0);
	--type-color-1: var(--color-divine-1);
	--type-color-2: var(--color-divine-2);
	--font-color: black;
}

.colored {
	color: var(--type-color-0);
}



/* All Custom Info Boxes */
.info-box {
	box-shadow: var(--default-box-shadow);
	margin: 6px;
}

.info-box .name {
	display: flex;
	align-items: center;
	position: relative;
	color: var(--font-color);
	font: normal 1.6em/100% AMD;
	text-transform: uppercase;
	background: var(--type-color-1);
	box-shadow: inset 0px 0px 3px hsla(0, 0%, 100%, 0.5);
	padding: 6px 6px 6px 1em;

}

.info-box .name::before {
	content: "▶";
	font-size: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 6px;
}

.info-box .container, .info-box .image {
	padding: 0px 9px;
	background: hsla(200, 16%, 11%, 1);
	border: var(--default-content-border);
	text-align: left;
}

/* Weapon Infobox Tweaks */
.info-box.weapon .image {
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	pointer-events: none;
}

.info-box.weapon img {
	position: relative;
	filter: saturate(0.95) contrast(1.18) brightness(1.08) hue-rotate(-5deg) sepia(0.1) drop-shadow(0px 3px 3px #0000003b);
}

.info-box.weapon .image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, transparent 50%, var(--type-color-1) 100%);
	filter: opacity(0.3);
}



/* Info-Box Icons */
.info-box .icon {
	position: absolute;
	pointer-events: none;
	bottom: 3px;
	left: 6px;
	font: normal 1.6em AMD;
	text-transform: uppercase;
}

.info-box.icon-guardian .icon::before {
	content: "guardian";
	color: var(--color-guardian-0);
}

.info-box.icon-rogue .icon::before {
	content: "rogue";
	color: var(--color-rogue-0);
}

.info-box.icon-commando .icon::before {
	content: "commando";
	color: var(--color-commando-0);
}

.info-box.icon-specialist .icon::before {
	content: "specialist";
	color: var(--color-specialist-0);
}

.info-box.icon-dlc .icon::before {
	content: "dlc";
	color: var(--color-divine-0);
}

.info-box.icon-arena .icon::before {
	content: "arena";
	color: var(--color-divine-0);
}

.info-box.icon-riot-guard .icon::before {
	content: "riot guard";
	color: var(--color-guardian-0);
}

.info-box.icon-breacher .icon::before {
	content: "breacher";
	color: var(--color-guardian-0);
}

.info-box.icon-assassin .icon::before {
	content: "assassin";
	color: var(--color-rogue-0);
}

.info-box.icon-sniper .icon::before {
	content: "sniper";
	color: var(--color-rogue-0);
}

.info-box.icon-raider .icon::before {
	content: "raider";
	color: var(--color-commando-0);
}

.info-box.icon-heavy-gunner .icon::before {
	content: "heavy gunner";
	color: var(--color-commando-0);
}

.info-box.icon-engineer .icon::before {
	content: "engineer";
	color: var(--color-specialist-0);
}

.info-box.icon-demolisher .icon::before {
	content: "demolisher";
	color: var(--color-specialist-0);
}



/* Flash Cards */
.flashcard {
	position: relative;
}

.flashcard .container {
	border-top: none;
}

.flashcard .caption {
	color: var(--color-starter-0);
	padding: 6px 9px;
}

.flashcard .value-container .name {
	filter: saturate(0.8);
	font-size: 1.2em;
	letter-spacing: 1px;
	margin: 2px 0px;
}

.flashcard .gradient-strip {
	height: 3px;
	width: 100%;
	border-radius: 6px 6px 0px 0px;
	background: linear-gradient(to left, var(--type-color-0) 0%, transparent 110%);
}

.flashcard .gradient-background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, var(--type-color-0) 0%, transparent 100%);
	filter: opacity(0.09);
}

/* item type */
.flashcard.item {
	width: 300px;
	box-shadow: unset;
	display: inline-block;
	vertical-align: top;
	margin: 9px 9px;
}

.flashcard.item .container, .flashcard.item .description {
	position: relative;
}

.flashcard.item .name {
	background: unset;
	box-shadow: unset;
	padding: 20px 0px 0px 0px;
	color: var(--type-color-0);
	font-size: 2em;
	line-height: 90%;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.flashcard.item .image {
	position: absolute;
	top: -10px;
	left: 0px;
	background: unset;
	border: unset;
	padding: 0;
	height: 80px;
	display: flex;
	align-items: center;
	z-index: 1;
}

.flashcard.item .name::before {
	content: none;
}

.flashcard.item .container {
	padding: 6px 9px 3px 9px;
	box-shadow: var(--default-box-shadow);
}

.flashcard.item .image + .container {
	padding-top: 12px;
}

.flex .flashcard.item .container {
	height: calc(100% - 1.8em - 23px);
}


/* Horizontal Flashcards */
.flashcard.horizontal {
	margin-left: 120px;
}

.flashcard.horizontal .image {
	transform: translateX(-100%);
	height: auto;
	top: 10px;
	left: -5px;
}

.flashcard.horizontal img {
	display: block;
}

.flashcard.item.horizontal .container {
	min-height: 180px;
	padding-top: 6px;
}


/* Utility Classes for Flashcards */
.flashcard.name-left .name {
	justify-content: flex-start;
}

.flashcard.name-left .gradient-strip {
	background: linear-gradient(to right,var(--type-color-0) 0%,transparent 110%);
}


/* Weapon Page Flashcards */

.flashcard .fire-mode {
	border: 2px solid white;
	border-radius: 6px;
	padding: 3px 3px 6px 3px;
	position: absolute;
	right: 3px;
	top: 1.3em;
	font-family: AMD;
	font-size: 1.8em;
	line-height: 55%;
	text-transform: uppercase;
	filter: opacity(0.95);
	transform: translateY(calc(-100% - 3px))
}

.flashcard .ammo {
	position: absolute;
	left: 6px;
	top: 100%;
	font-family: AMD;
	font-size: 1.8em;
	transform: translateY(calc(-100% + 3px));
}

.flashcard.weapon .value-container {
	display: flex;
	flex-wrap: wrap;
}

.flashcard.weapon {
	width: min-content;
	margin: 0px 0px 0px 18px;
}

.flashcard.weapon .value-container .name {
	display: inline-flex;
	width: 120px;
	text-align: left;
}

.flashcard.weapon .value-container .container {
	width: calc(100% - 120px);
	padding: 3px 12px;
}



/* Character Flashcards */
.flashcard.character {
	width: 360px;
	margin: 0px 0px 0px 36px;
}

.flashcard.character .image {
	position: absolute;
	height: 64px;
	width: 64px;
	top: -15px;
	left: -30px;
	background: none;
	border: none;
}

.flashcard.character > .name {
	padding-left: 50px;
}

.flashcard.character > .name::before {
	content: none;
}

.flashcard.character .caption::first-letter {
	padding-left: 24px;
}


/* Character Class Navigation */
.character-class-box.info-box {
	width: fit-content;
	margin: auto;
}

.character-class-box .container {
	padding: 0;
}

.character-class-box .active {
	--type-color-0: var(--color-divine-0);
	--type-color-1: var(--color-divine-1);
	--type-color-2: var(--color-divine-2);
}

.character-class-box a::before {
	content: "▶";
	font-size: 40%;
	display: inline-block;
	margin: -3px 6px 0px 0px;
	vertical-align: middle;
}

.character-class-box a, .character-class-box a:visited {
	text-transform: uppercase;
	width: 8em;
	background: var(--type-color-1);
	display: block;
	padding: 6px;
	margin: 4px 2px;
	color: white;
	font: normal 1.2em AMD;
	box-shadow: inset 0px 0px 3px hsla(0, 0%, 100%, 0.5);
}

.character-class-box a:hover {
	background: var(--color-divine-1);
	color: black;
	box-shadow: inset 0px 0px 3px 1px hsla(0, 0%, 100%, 0.5);
	text-decoration: none;
}



/* Tiles */
.tile {
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	position: relative;
	margin: 6px 3px;
}

.tile:hover {
	--type-color-0: var(--color-divine-0);
	--type-color-1: var(--color-divine-1);
	--type-color-2: var(--color-divine-2);
	--font-color: black;
}

.tile > a {
	display: none;
}

.tile .tile-link a {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.tile .name {
	font-size: 1.2em;
}

.tile.horizontal .name::before {
	display: none;
}

.tile.horizontal {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	box-shadow: none;
}

.tile.horizontal .image {
	padding: unset;
	background: unset;
	border: none;
}

/* Weapon Tiles */

.info-box.weapon {
	position: relative;
        margin-top: 5px;
        margin-bottom: 5px;
}

.info-box.weapon .image {
	position: relative;
	width: 400px;
	height: 145px;
}

.tile.weapon.pistol .image {
	width: 260px;
}

.tile.weapon.smg .image {
	width: 320px;
}

.weapon.precision .image, .weapon.machinegun .image {
	width: 450px;
}

/* Viking Riotshield fix */
.weapon.smg.icon-riot-guard .image {
	padding: 20px 12px 4px;
}




/* Class Memory Modules Flashcards */

.memory-module-container .name span {
	padding-left: 50px;
}

.memory-module-container .flashcard .name {
	justify-content: flex-start;
}

.memory-module-container .flashcard .gradient-strip {
	background: linear-gradient(to right, transparent 0%, var(--type-color-0) 25%, transparent 100%);
}

.memory-module-container .image img {
	filter: drop-shadow(0px 0px 3px var(--type-color-0)) drop-shadow(0px 0px 1px var(--type-color-0));
}

.memory-module-container .flashcard .container {
	padding-top: 3px;
}



/* Specific Page Styles */
.page-Riot_Guard, .page-Breacher {
	--type-color-1: var(--color-guardian-1);
	--type-color-2: var(--color-guardian-2);
}

.page-Sniper, .page-Assassin {
	--type-color-1: var(--color-rogue-1);
	--type-color-2: var(--color-rogue-2);
}

.page-Raider, .page-Heavy_Gunner {
	--type-color-1: var(--color-commando-1);
	--type-color-2: var(--color-commando-2);
}

.page-Engineer, .page-Demolisher {
	--type-color-1: var(--color-specialist-1);
	--type-color-2: var(--color-specialist-2);
}

/* Chest Page */
.page-Chests .flashcard {
	width: 435px;
}

/* Attachment Page */
.page-Attachments .flashcard {
	width: 380px;
}

.page-Attachments .flashcard .image {
	transform: scale(0.79);
	top: -15px;
}

/* Shrine Page */
.page-Shrines .flashcard.horizontal {
	margin-left: 200px;
}

.page-Shrines .flashcard.horizontal .image {
	transform: translateX(-90%) scale(0.8);
	pointer-events: none;
}



/* Tables */
.align-top, table.align-top td {
	vertical-align: top;
}

table.wikitable > * > tr > th, .wiki-table th {
	font: normal 1.4em AMD;
	background: var(--type-color-1);
	padding: 3px 3px 3px 3px;
	box-shadow: inset 0px 0px 3px hsla(0, 0%, 100%, 0.3);
	text-transform: uppercase;
}

table.wikitable, .wikitable {
	border: none;

}

table.wikitable > * > tr > td, .wiki-table td {
	border: solid 1px var(--type-color-2);
	background: var(--color-container-background);
	padding: 3px 12px;
}

/* tables after a flashcard info-box */
.flashcard.float-right + table {
	width: calc(100% - 400px);
}

.flashcard.float-right.weapon ~ table {
	width: calc(100% - 418px);
}









/* Layout */
#global-wrapper {background: var(--color-background);}

body, .mw-body, .parsoid-body, #mw-page-base{
	background: transparent;
	color: var(--font-color);
}

div#content {background-color: hsla(200, 15%, 13%, 1);}

.mw-body {
	border: none;
	padding: 9px;
	margin-right: 1em;
}

* {
	padding: 0;
	margin: 0;
}

#global-wrapper * {
	box-sizing: border-box;
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
	background: var(--type-color-1);
	box-shadow: var(--default-box-shadow), var(--name-box-shadow);
	color: white;
	padding: 6px;
	border: none;
	font-family: AMD;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: normal;
	position: relative;
}

#content .mw-category-generated h3 {
	padding: 0px;
	background: unset;
	box-shadow: unset;
}

#toc h2 {
	background: unset;
	box-shadow: unset;
}


a, a:visited {
	color: var(--color-guardian-0);
	font-weight: bold;
}

#mw-panel .portal .body li a {color: var(--color-guardian-0);}
#mw-panel .portal .body li a:visited {color: var(--color-guardian-0);}


/* Logo and Navigation */
div#mw-panel {
	top: 0;
}

#mw-head-base {
	margin-top: -80px;
}

#p-logo {
	height: 100px;
	position: unset;
	width: unset;
}

#p-logo a {
	background: url(https://static.wikia.nocookie.net/synthetik_gamepedia_en/images/b/b7/Wiki-logo-small.png/revision/latest?cb=20190119101936);
	width: 300px;
	height: 90px;
	position: absolute;
	top: 15px;
}

#left-navigation, #right-navigation {
	margin: 0px;
}

#mw-head {
	left: 325px;
	top: 15px;
	width: unset;
	height: 42px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* lets strip a thousand backgrouns, shall we? */
div.vectorTabs, div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs li.selected, div.vectorTabs span, div#mw-head div.vectorMenu h3, div.vectorTabs li a {
	background: none;
	height: unset;
	display: block;
}

/* screw sharing */
#p-sharing {display: none;}

div.vectorTabs li > span > a, div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {
	color: var(--font-color);
	padding: 3px 6px 3px 6px;
	font: normal 1.2em AMD;
	text-transform: uppercase;
}

div.vectorTabs ul li {
	margin: 3px;
}

div.vectorTabs li.selected {
	background: var(--color-divine-0);
	--font-color: black;
}

#ca-unwatch, #ca-watch {
	background: none;
	box-shadow: unset;
}

.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a  {
	padding: 0;
	height: 26px;
	color: transparent;
}

div.vectorMenu h3 span {
	color: var(--font-color);
	font: normal 1.2em AMD;
	text-transform: uppercase;
	padding-top: 0px;
	margin-top: 7%;
}

div.vectorMenu h3 span::after {
	top: calc(50% - 0.3em)
}

#simpleSearch {
	margin-top: 0;
}



/* Main Page */
#main-page {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

#welcome-box {
	width: 325px;
}

#main-page > .info-box:first-child {
	margin-left: 0;
}

#main-page > .info-box:last-child {
	margin-right: 0;
}

#class-box .tile {display: flex;}

#class-box .tile .name {
	min-width: 155px;
	padding-left: 45px;
	margin-left: -45px;
	position: initial;
}

#class-box .container, #navigation-box .container {
	display: flex;
	flex-wrap: wrap;
}

#navigation-box .container > div {
	margin: 3px 6px;
}

@media (max-width: 1530px) {
	#class-box {
		width: 400px;
	}
}

div#navigation-box .tile {
	display: block;
	width: 150px;
}

div#navigation-box .tile:first-child {
	width: 165px;
}

div#navigation-box .tile:nth-child(1n + 2) {
	margin-left: 18px;
}






















/* 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;
    flex-grow: 1;
}

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

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

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