User:Venric/vector.css: Difference between revisions

Revision as of 02:36, 18 November 2021

/* This has been updated and tested as of November 17th, 2021. */

/* Color variables */
:root {
    --bg-dark: #01302F;
    --bg-light: #004D53;
    --pso-cyan: #00FFFC;
    --pso-white: #FFFFFF;
    --pso-yellow: #FFEA00;
    --pso-invalid: #E05F20;
    --pso-valid: #75B426;
    --pso-srank: #FE3C28;
    --cb-invalid: #D85151;
    --cb-valid: #35A7B5;
    --magDEF: #6684FA;
    --magPOW: #DA000D;
    --magDEX: #F7D900;
    --magMIND: #00F713;
}

/* Links */
a {
    color: var(--pso-cyan) !important
}
/* Links to pages that do not exist */
a.new, #p-personal a.new {
    color: var(--pso-srank) !important;
}

/* Side Navbar. */
body {
    background-color: var(--bg-dark);
}
.vector-menu-portal h3 {
    font-weight: bold;
    color: var(--pso-yellow) !important;
    font-size: 1em;
    margin-left: 0.5em;
}
#p-logo {
    filter: brightness(2) hue-rotate(-33deg);
}

/* Header */
#mw-page-base {
    background-image: linear-gradient(var(--bg-light) 50%, var(--bg-dark));
}
#pt-userpage {
    color: #FF0003;
    filter: brightness(10);
}
.vector-menu-tabs li {
    background-image: none;
}
.vector-menu-tabs .selected a, .vector-menu-tabs .selected {
    background: linear-gradient(var(--bg-light) 0, var(--pso-cyan) 100%);
    /* box-shadow:inset -1px 0px 0px 0px var(--pso-cyan); */
    font-weight: bold;
    color: black !important;
}
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 {
    background-image: linear-gradient(to bottom, var(--bg-light) 0, var(--pso-cyan) 100%);
}
.vector-menu-heading {
    color: var(--pso-cyan) !important;
}
.vector-menu-dropdown h3::after {
    filter: invert(1) brightness(1);
}
.vector-menu-dropdown .vector-menu-content {
    background-color: var(--bg-light);
    border: 1px solid var(--pso-cyan);
    border-top-width: 0px;
}
#searchInput {
    background-color: var(--pso-white);
}

/* The actual body */
.mw-body {
    background-color: var(--bg-dark);
    color: var(--pso-white);
    border: 1px solid var(--pso-cyan);
}
.mw-content-ltr .tocnumber {
    color: var(--pso-white);
}
.toctogglelabel {
    color: var(--magDEF);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--pso-yellow);
    font-weight: bold;
}
.mw-body .firstHeading {
    font-family: sans-serif;
}
.mw-body-content h2 {
    font-family: sans-serif;
}
div.thumbinner {
	border: 1px solid var(--pso-cyan);
	background-color: var(--bg-light);
}
/* Seemingly only on main page? 
Styling on this element is inline, so !important is used*/
#mp-topbanner {
    background-color: var(--bg-light) !important;
    color: var(--pso-white) !important;
    border-color: var(--pso-cyan) !important;
}
#mp-topbanner > div:nth-child(1) > div:nth-child(1) {
    font-weight: bold;
}
table.wikitable {
    background-color: var(--bg-light);
    color: var(--pso-white);
    margin-left: 10px;
}
#mw-indicator-mw-helplink a {
    filter: invert(1);
    color: #FF0003 !important; /* This is an invert of --pso-cyan */
}
div.mw-number-text {
    color: var(--pso-white);
}
#bodyContent div.mw-number-text h3 {
    color: var(--pso-cyan);
}

/* Diffs */
.diffchange {
    color: #000000;
}

/* Armor elemental resists */
.EFR, .EIC, .ETH, .EDK, .ELT {
    color: #000000;
}

/* Searching modules */
.mw-search-profile-tabs {
	background-color: var(--bg-light);
	border: 1px solid var(--pso-cyan);
}
#mw-searchoptions {
	background-color: var(--bg-light);
	border: 1px solid var(--pso-cyan);
}

/* Mission info module
Also inline styling */
table tbody tr th {
    background-color: var(--bg-light) !important;
}
ul.tabbernav li a {
    background: none;
}
ul.tabbernav li a:hover {
    background: var(--bg-light);
}
ul.tabbernav li.tabberactive a {
    background-color: var(--bg-light);
    background-image: linear-gradient(var(--bg-light) 0%, var(--bg-dark));
    border-bottom: 1px solid var(--bg-dark);
}
ul.tabbernav li.tabberactive a:hover {
    background: var(--bg-light);
    border-bottom: 1px solid var(--bg-light);
}
table tbody tr th {
    color: var(--pso-white) !important;
}

/* Only used on tables to show where high-level techs drop */
.techBestDrop {
    background-color: var(--cb-valid) !important;
}

/* Weapon info module */
.classCannotUse {
    color: var(--pso-white);
    mix-blend-mode: normal;
    background-color: var(--cb-invalid);
}
.classCanUse {
    color: var(--pso-white);
    mix-blend-mode: normal;
    background-color: var(--cb-valid);
}

/* Weapon class equip chart
Inline styling, so we need to override with !important */
.notEquippable {
    background-color: var(--cb-invalid) !important;
}
.equippable {
    background-color: var(--cb-valid) !important;
}

/* Tool rare state */
.toolIsRare {
    background-color: var(--cb-valid) !important;
}
.toolIsNotRare {
    background-color: var(--cb-invalid) !important;
}

ul {
    list-style-image: none;
}

/* Mag stat colors
Need to override inline stlying */
.magDEF {
    color: var(--magDEF) !important;
}
.magPOW {
    color: var(--magPOW) !important;
}
.magDEX {
    color: var(--magDEX) !important;
}
.magMIND {
    color: var(--magMIND) !important;
}

/* Table of Contents */
#toc, .toc {
    background-color: var(--bg-light);
    border-color: var(--pso-cyan)
}

/* Bottom navbox */
table.navbox th {
    background-color: var(--bg-light) !important;
    color: var(--pso-white);
    width: 10%;
}

/* Category links */
.catlinks {
    background-color: var(--bg-light);
}

div#footer ul li {
    color: var(--pso-white)
}

#pagehistory li.selected {
    background-color: var(--bg-light);
}

/* Mag tables */
.magFeedPositive {
    background-color: var(--cb-valid) !important;
}
.magFeedNegative {
    background-color: var(--cb-invalid) !important;
}

/* Special Pages, which are different for some reason. */
.client-js #preferences {
	border: solid 1px var(--pso-cyan);
    background-color: var(--bg-dark);
}
.client-js #preftoc li, .client-js #preftoc {
    background-image: none;
    padding: 0;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: var(--pso-cyan);
}
.client-js #preftoc li:first-child {
    margin-left: -1px;
}
.client-js #preftoc li.selected a {
    background-image: linear-gradient(var(--bg-light) 0%, var(--bg-dark));
}
.client-js #preferences legend {
    color: var(--pso-yellow);
}
.htmlform-tip {
    color: var(--pso-invalid)
}
.mw-email-not-authenticated .mw-input, .mw-email-none .mw-input {
	border: 1px solid var(--pso-cyan);
	background-color: var(--bg-light);
	color: var(--pso-white);
}

/* Edit */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, span.oo-ui-flaggedElement-primary:nth-child(2) > a:nth-child(1) {
    background-color: var(--pso-white) !important;
    color: black !important;
}
span.tab:nth-child(1) > a:nth-child(1), span.tab:nth-child(2) > a:nth-child(1), span.tab:nth-child(3) > a:nth-child(1) {
    color: #0645ad !important;
}
.editOptions {
    background-color: var(--bg-light);
    border: 1px solid var(--pso-cyan);
    color: var(--pso-white)
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: var(--pso-cyan);
    border-color: var(--pso-cyan);
    border-radius: 0px;
}

/* History */
.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed {
    background-color: var(--bg-light);
    border-color: var(--pso-cyan);
    border-radius: 0px;
}
span.oo-ui-widget:nth-child(4), .oo-ui-icon-expand, .mw-ui-icon-expand::before {
    filter: invert(1);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    background-color: var(--pso-cyan);
    border-color: var(--pso-cyan);
    border-radius: 0px;
    color: var(--bg-dark)
}
.mw-ui-button {
    background-color: var(--pso-cyan);
    border-color: var(--pso-cyan);
    border-radius: 0px;
    color: var(--bg-dark)
}
.mw-ui-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
    background-color: var(--pso-white);
    border-color: var(--pso-white);
    border-radius: 0px;
    color: var(--bg-dark)
}
#pagehistory li.selected {
    color: var(--pso-white);
}
.mw-plusminus-pos {
    color: var(--magMIND);
}