MediaWiki:Common.css

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

@font-face { font-family: 'Orbitron'; /*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 {
 * 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: 'Orbitron'; 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% 'Orbitron'; 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 'Orbitron'; 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: 'Orbitron'; 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: 'Orbitron'; 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 'Orbitron'; 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 'Orbitron'; 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 */
 * 1) 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; }

box-sizing: border-box; }
 * 1) global-wrapper * {

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

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

background: unset; box-shadow: unset; }
 * 1) toc h2 {

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


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

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

margin-top: -80px; }
 * 1) mw-head-base {

height: 100px; position: unset; width: unset; }
 * 1) p-logo {

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; }
 * 1) p-logo a {

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

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

/* 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 */
 * 1) 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 'Orbitron'; text-transform: uppercase; }

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

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

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

.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 'Orbitron'; text-transform: uppercase; padding-top: 0px; margin-top: 7%; }

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

margin-top: 0; }
 * 1) simpleSearch {

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

width: 325px; }
 * 1) welcome-box {

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

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


 * 1) class-box .tile {display: flex;}

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

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

margin: 3px 6px; }
 * 1) navigation-box .container > div {

@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; }