MediaWiki:Vector.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

:root {
    --cc-site-background-colour: #000000;
    --cc-page-background-colour: #0e191a;
    --cc-page-background-secondary-colour: #323c3c;
    --cc-page-text-colour: #e6e6e6;
    --cc-code-text-colour: var(--cc-page-text-colour);
    --cc-border-colour: #444c4d;
    --cc-link-colour: #00cdd0;
    --cc-link-active-colour: var(--cc-link-colour);
    --cc-link-visited-colour: var(--cc-link-colour);
    --cc-link-external-colour: var(--cc-link-colour);
    --cc-link-external-visited-colour: var(--cc-link-colour);
    --cc-horizontal-rule-colour: var(--cc-border-colour);
    --cc-heading-colour: var(--cc-page-text-colour);
    --cc-red-link-colour: #ff1717;
    --cc-error-colour: var(--cc-red-link-colour);
    --cc-navtab-background: linear-gradient(to top, #0f1423 0, #2d343c 100%);
    --cc-navtab-selected-background: linear-gradient(to top, #262e37 0, #4b5664 100%);
    --cc-navtab-dropdown-bg-colour: var(--cc-site-background-colour);
}

/* CrossCode Theming */
.vector-menu-tabs-legacy li {
    background-image:var(--cc-navtab-background)
}
.vector-menu-tabs-legacy li.selected {
    background-image:var(--cc-navtab-selected-background)
}

/* Standard Vector (2010) Theming */
.mw-message-box {
  background-color:#eaecf0;
  color:#000000;
  border:1px solid #54595d;
}
.mw-message-box h2 {
  color:inherit;
}
.mw-message-box-error {
  background-color:#fee7e6;
  border-color:var(--cc-error-colour)
}
.mw-message-box-warning {
  background-color:#fef6e7;
  border-color:#ac6600
}
.mw-message-box-success {
  background-color:#d5fdf4;
  border-color:#096450
}

@media screen {
  :focus {
    outline-color:#3366cc
  }
  body {
    background-color: var(--cc-site-background-colour);
  }
  .mw-body, .parsoid-body {
    background-color:var(--cc-page-background-colour);
    color:var(--cc-page-text-colour);
  }
  #mw-page-base {
    background-color:var(--cc-page-background-colour);
    background-image:linear-gradient(to bottom,var(--cc-page-background-colour) 50%, var(--cc-site-background-colour) 100%);
  }
  .mw-footer li {
    color:var(--cc-page-text-colour);
  }
  nav.vector-menu-dropdown {
    background-image: var(--cc-navtab-background);
  }
  nav.vector-menu-dropdown:focus {
    background-image: var(--cc-navtab-selected-background);
  }
  .vector-menu-dropdown .vector-menu-heading {
    color:var(--cc-page-text-colour);
  }
  .vector-menu-dropdown .vector-menu-heading:hover,
  .vector-menu-dropdown .vector-menu-heading:focus {
    color:var(--cc-page-text-colour)
  }
  .vector-menu-dropdown .vector-menu-content {
    background-color: var(--cc-navtab-dropdown-bg-colour);
    border:1px solid var(--cc-border-colour);
  }
  .vector-menu-dropdown .mw-list-item a {
    color:var(--cc-link-colour);
  }
  .vector-menu-dropdown .mw-list-item.selected a,
  .vector-menu-dropdown .mw-list-item.selected a:visited {
    color:var(--cc-page-text-colour);
  }
  .vector-menu-tabs-legacy li a {
    color:var(--cc-link-colour);
  }
  .vector-menu-tabs-legacy .new a,
  .vector-menu-tabs-legacy .new a:visited {
    color:var(--cc-red-link-colour)
  }
  .vector-menu-tabs-legacy .selected a,
  .vector-menu-tabs-legacy .selected a:visited {
    color:var(--cc-page-text-colour);
  }
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
    color:var(--cc-page-text-colour);
    background-image:linear-gradient(to right,#c8ccd1 66%,rgba(200,204,209,0) 100%);
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:100% 1px
  }
  .vector-menu-dropdown .vector-menu-heading::after {
    filter: invert(1);
  }
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
    color:var(--cc-link-colour)
  }
  .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
    color:var(--cc-link-visited-colour)
  }
  .vector-search-box-input {
    background-color:rgba(255,255,255,0.5);
    color:#000000;
    border:1px solid #a2a9b1;
    border-radius:2px;
    box-shadow:inset 0 0 0 1px transparent;
  }
  .vector-search-box-inner:hover .vector-search-box-input {
    border-color:#72777d
  }
  .vector-search-box-input:focus,
  .vector-search-box-inner:hover .vector-search-box-input:focus {
    outline:0;
    border-color:#3366cc;
    box-shadow:inset 0 0 0 1px #3366cc
  }
  .vector-search-box-input::-webkit-input-placeholder {
    color:#72777d;
    opacity:1
  }
  .vector-search-box-input:-ms-input-placeholder {
    color:#72777d;
    opacity:1
  }
  .vector-search-box-input::-moz-placeholder {
    color:#72777d;
    opacity:1
  }
  .vector-search-box-input::placeholder {
    color:#72777d;
    opacity:1
  }
  .searchButton {
    background-color:transparent;
  }
  .vector-user-menu-legacy #pt-anonuserpage {
    color:#54595d
  }

  figure[typeof~='mw:File/Thumb'],
  figure[typeof~='mw:File/Frame'] {
    border:1px solid #c8ccd1;
    border-bottom:0;
    background-color:var(--cc-page-background-secondary-colour)
  }
  figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
  figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
    border:1px solid #c8ccd1;
    background:#ffffff
  }
  figure[typeof~='mw:File/Thumb'] > figcaption,
  figure[typeof~='mw:File/Frame'] > figcaption {
    border:1px solid #c8ccd1;
    border-top:0;
    background-color:var(--cc-page-background-secondary-colour);
  }

  a.new {
    color:var(--cc-red-link-colour)
  }
  a.new:visited {
    color:var(--cc-red-link-colour)
  }
  .mw-parser-output a.extiw,
  .mw-parser-output a.external {
    color:var(--cc-link-external-colour)
  }
  .mw-parser-output a.extiw:visited,
  .mw-parser-output a.external:visited {
    color:var(--cc-link-external-visited-colour)
  }
  .mw-parser-output a.extiw:active,
  .mw-parser-output a.external:active {
    color:var(--cc-link-external-colour)
  }
  .mw-body-content .error {
    color:var(--cc-error-colour)
  }
  .wikitable {
    background-color:var(--cc-page-background-colour);
    color:var(--cc-page-text-colour);
    border:1px solid #a2a9b1;
  }
  .wikitable > tr > th,
  .wikitable > tr > td,
  .wikitable > * > tr > th,
  .wikitable > * > tr > td {
    border:1px solid #a2a9b1;
  }
  .wikitable > tr > th,
  .wikitable > * > tr > th {
    background-color:var(--cc-page-background-secondary-colour);
  }
  .catlinks {
    background-color:var(--cc-page-background-secondary-colour);
    border:1px solid #a2a9b1;
  }
  #mw-content-subtitle,
  #contentSub2 {
    color:#54595d;
  }
  .usermessage {
    background-color:#fef6e7;
    border:1px solid #ac6600;
    color:#000000;
  }
  a {
    text-decoration:none;
    color:var(--cc-link-colour);
    background:none
  }
  a:visited {
    color:var(--cc-link-visited-colour)
  }
  a:active {
    color:var(--cc-link-active-colour)
  }
  hr {
    background-color:var(--cc-horizontal-rule-colour);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color:var(--cc-heading-colour);
  }
  pre,
  code,
  .mw-code {
    background-color:var(--cc-page-background-secondary-colour);
    color:var(--cc-code-text-colour);
    border:1px solid var(--cc-border-colour);
  }
  .toc,
  .toccolours {
    background-color:var(--cc-page-background-secondary-colour);
    border:1px solid var(--cc-border-colour);
  }
  .tocnumber {
    color:var(--cc-page-text-colour);
  }
  .toctogglelabel {
    color:var(--cc-link-colour);
  }
}

/* Invert all icons (because they're all black and we want them white) */
.oo-ui-iconWidget:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-alert,
.mw-ui-icon-alert-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-alert,
.mw-ui-icon-alert-progressive:before {
  filter: invert(1)
}
.oo-ui-image-warning.oo-ui-icon-alert,
.mw-ui-icon-alert-warning:before {
  filter: invert(1)
}
.oo-ui-icon-bell,
.mw-ui-icon-bell:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-bell,
.mw-ui-icon-bell-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-bell,
.mw-ui-icon-bell-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-bellOutline,
.mw-ui-icon-bellOutline:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-bellOutline,
.mw-ui-icon-bellOutline-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-bellOutline,
.mw-ui-icon-bellOutline-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-error,
.mw-ui-icon-error:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-error,
.mw-ui-icon-error-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-error,
.mw-ui-icon-error-progressive:before {
  filter: invert(1)
}
.oo-ui-image-error.oo-ui-icon-error,
.mw-ui-icon-error-error:before {
  filter: invert(1)
}
.oo-ui-icon-message,
.mw-ui-icon-message:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-message,
.mw-ui-icon-message-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-message,
.mw-ui-icon-message-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-notice,
.mw-ui-icon-notice:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-notice,
.mw-ui-icon-notice-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-notice,
.mw-ui-icon-notice-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-speechBubble,
.mw-ui-icon-speechBubble:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-speechBubble,
.mw-ui-icon-speechBubble-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-speechBubble,
.mw-ui-icon-speechBubble-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-speechBubbleAdd,
.mw-ui-icon-speechBubbleAdd:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-speechBubbleAdd,
.mw-ui-icon-speechBubbleAdd-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-speechBubbleAdd,
.mw-ui-icon-speechBubbleAdd-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-speechBubbles,
.mw-ui-icon-speechBubbles:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-speechBubbles,
.mw-ui-icon-speechBubbles-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-speechBubbles,
.mw-ui-icon-speechBubbles-progressive:before {
  filter: invert(1)
}
.oo-ui-icon-success,
.mw-ui-icon-success:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-success,
.mw-ui-icon-success-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-success,
.mw-ui-icon-success-progressive:before {
  filter: invert(1)
}
.oo-ui-image-success.oo-ui-icon-success,
.mw-ui-icon-success-success:before {
  filter: invert(1)
}
.oo-ui-icon-tray,
.mw-ui-icon-tray:before {
  filter: invert(1)
}
.oo-ui-image-invert.oo-ui-icon-tray,
.mw-ui-icon-tray-invert:before {
  filter: invert(1)
}
.oo-ui-image-progressive.oo-ui-icon-tray,
.mw-ui-icon-tray-progressive:before {
  filter: invert(1)
}