No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
+ | @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap'); |
||
+ | /* |
||
@font-face { |
@font-face { |
||
font-family: 'AMD'; |
font-family: 'AMD'; |
||
Line 14: | Line 16: | ||
src: local('Aero Matics Display Light'), local('Aero-Matics-Display-Light'), url('/media/hydra/fonts/Aero Matics Display Light.ttf') format('truetype'); |
src: local('Aero Matics Display Light'), local('Aero-Matics-Display-Light'), url('/media/hydra/fonts/Aero Matics Display Light.ttf') format('truetype'); |
||
} |
} |
||
+ | */ |
||
Revision as of 20:03, 3 December 2020
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
/*
@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;
}