User:Dt192/vector.css

Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* Quick test of custom css */

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");

:root {
  /* base theme (grey) */
  --canvas-bg-color: #22272e;
  --accent-color: #e0c799cf;
  --page-width: 1200px;
  --corner-rounding: 5px;
  --font-name: Roboto Slab;

  --page-bg-color: #ffffff07;
  --page-border-color: #ffffff0b;
  --page-panels-bg-color: #ffffff07;
  --page-panels-border-color: #ffffff1c;
  --page-inner-panels-bg-color: #ffffff0a;
  --text-color: #fffb;
  --link-color: #e0c799cf;
  --search-box-bg-color: #0005;

  /* Red Theme
  --canvas-bg-color: #5b2020;
   */
}
html {
  font-size: 105%;
}
@media screen {
  * {
    color: var(--text-color) !important;
    font-family: var(--font-name) !important;
  }
  body {
    max-width: var(--page-width);
    position: relative;
    margin: auto;
    background-color: var(--canvas-bg-color);
  }
  a {
    color: var(--link-color) !important;
  }
  .mw-body,
  .parsoid-body {
    background-color: var(--page-bg-color);
  }
  #mw-page-base {
    background: unset;
  }
  .mw-body {
    border-color: var(--page-border-color);
    border-width: 0px 1px 1px 1px;
    margin-top: 0;
    border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
  }
  #mp-topbanner,
  .mw-pt-languages,
  .mw-highlight pre,
  .warningbox {
    background: var(--page-panels-bg-color) !important;
    border-color: var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  .MainPageBG,
  #mp-left {
    background: unset !important;
  }
  .MainPageBG {
    border-color: var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  #mp-tfa-h2 {
    background: var(--page-inner-panels-bg-color) !important;
    border: unset !important;
    border-radius: var(--corner-rounding);
  }
  .mw-pt-languages-label {
    background-color: unset;
  }
  .mw-pt-translate-header {
    border-bottom: unset;
  }
  .toc,
  .mw-warning,
  .toccolours {
    background: var(--page-inner-panels-bg-color) !important;
    border-color: var(--page-panels-border-color) !important;
    border-radius: var(--corner-rounding);
  }
  .vector-menu-tabs .selected {
    background: var(--page-bg-color);
  }
  .vector-menu-tabs,
  .vector-menu-tabs a,
  #mw-head .vector-menu-dropdown h3 {
    background-image: linear-gradient(transparent, var(--page-border-color));
  }
  .vector-menu-tabs li {
    background-image: linear-gradient(to top, #0001, transparent);
  }
  #searchInput {
    background-color: var(--search-box-bg-color);
    border: unset;
    border-radius: var(--corner-rounding);
    color: fff0 !important;
  }
  #editform textarea,
  #editform .editOptions * {
    color: #000e !important;
  }
}

User:Dt192/vector.css

Navigation menu

Search