|
|
| Line 1: |
Line 1: |
| /* This has been updated and tested (in Firefox only) 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);
| |
| }
| |
|
| |
| .mw-footer li {
| |
| color: var(--cb-valid);
| |
| }
| |
