MediaWiki:Common.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

html {
  /* color, text */
  --color-base: #202122;
  --color-base-fixed: #202122;
  --color-placeholder:#72777d;
  --color-subtle:#54595d;
  --color-emphasized:#101418;
  --color-error: #bf3c2c;
  --color-link: #0645ad;
  --color-link-visited: #0b0080;
  --color-link-active: #faa700;
  --color-link-nonexistent: #ba0000;
  --color-link-nonexistent-visited: #a55858;

  /* color, borders */
  --border-color-base: #a2a9b1;
  --border-color-subtle: #c8ccd1;
  --border-color-warning:#ab7f2a;
  --border-color-muted: #dadde3;
  --border-color-body: #a7d7f9;

  /* color, backgrounds */
  --background-color-base: #fff;
  --background-color-base-fixed: #fff;
  --background-color-neutral:#eaecf0;
  --background-color-neutral-subtle:#f8f9fa;
  --background-color-warning-subtle:#fdf2d5;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-body: #f6f6f6;
  --background-color-error-subtle: #ffe9e5;

  /* color, outline/shadow/focus */
  --outline-color-progressive--focus:#36c;
  --box-shadow-color-transparent:transparent;
  --box-shadow-color-progressive--focus:#36c;
  --border-color-progressive--focus:#36c;
  --border-color-error:#f54739;

  /* opacity */
  --opacity-icon-base: 0.87;

  /* sizes */
  --font-size-small:0.875rem;
  --font-size-medium: 1rem;

  /* other */
  --filter-invert-icon: 0;
}

html.view-dark {
  /* color, text */
  --color-base: #d6dadade;
  --color-base-fixed: #202122;
  --color-placeholder:#72777d;
  --color-subtle:#b5bec5;
  --color-emphasized:#ecfffa;
  --color-error: #bf3c2c;
  --color-link: #4ebdff;
  --color-link-visited: #749cfb;
  --color-link-active: #00eefa;
  --color-link-nonexistent: #e95656;
  --color-link-nonexistent-visited: #b86969;

  /* color, borders */
  --border-color-base:#5f464bbd;
  --border-color-subtle:#c8ccd1;
  --border-color-warning:#ab7f2a;
  --border-color-muted:#6c6e73;
  --border-color-error:#f53965a1;
  --border-color-body: #3f2f50;

  /* color, backgrounds */
  --background-color-base:#1e1717;
  --background-color-base-fixed:#fff;
  --background-color-neutral:#271111;
  --background-color-neutral-subtle:#4a1c5f1a;
  --background-color-warning-subtle:#fdf2d5;
  --background-color-interactive-subtle:#f8f9fa21;
  --background-color-error-subtle:#4e0000a3;

  /* color, outline/shadow/focus */
  --outline-color-progressive--focus:#36c;
  --box-shadow-color-transparent:transparent;
  --box-shadow-color-progressive--focus:#36c;
  --border-color-progressive--focus:#3f2f50;

  /* opacity */
  --opacity-icon-base: 0.87;

  /* sizes */
  --font-size-small:0.875rem;
  --font-size-medium: 1rem;

  /* other */
  --filter-invert-icon: 0;
  --background-color-body: #180108;
}

/* Color overrides for elements */
body {
  background-color: var(--background-color-body);
}

#mw-page-base {
  background-color:var(--background-color-body);
  background-image:linear-gradient(to bottom,var(--background-color-base) 50%,var(--background-color-body) 100%);
  background-position:bottom left;
  height:5em
}

html.view-dark #mw-page-base {
  background-image: none;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
  color:var(--color-link);
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
  color:var(--color-link-visited);
}
.vector-menu-tabs-legacy li {
  background-image:linear-gradient(to top,var(--border-color-body) 0,var(--background-color-body) 1px,var(--background-color-base) 100%);
}
.vector-menu-tabs-legacy li a {
  color:var(--color-link);
}
.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .new a:visited {
  color:var(--color-link-visited);
}
.vector-menu-tabs-legacy .selected {
  background:var(--background-color-base);
}

a,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
  color:var(--color-link)
}

a:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited {
  color:var(--color-link-visited)
}
a:active
.mw-parser-output a.extiw:active,
.mw-parser-output a.external:active {
  color:var(--color-link-active)
}
a.new {
  color: var(--color-link-nonexistent);
}
a.new:visited {
  color: var(--color-link-nonexistent-visited);
}

.toctogglelabel {
  color:var(--color-link);
}

.vector-menu-dropdown .mw-list-item a {
  color:var(--color-link)
}
.vector-menu-dropdown .mw-list-item.selected a,
.vector-menu-dropdown .mw-list-item.selected a:visited {
  color:var(--color-link-visited);
}

.vector-search-box-input {
  background-color:var(--background-color-interactive-subtle);
}
.mw-editform,
.wikiEditor-ui,
.wikiEditor-ui-text textarea,
.mw-editform .editOptions,
.mw-editform textarea {
  background: var(--background-color-body);
  color:var(--color-base);
}
.ext-WikiEditor-ResizingDragBar {
  background: var(--background-color-base);
}

html.view-dark span.oo-ui-iconElement-icon,
html.view-dark span.oo-ui-indicatorElement-indicator {
  filter:invert() opacity(.8)
}
html.view-dark ul {
  list-style-image: initial
}

#contentSub #mw-content-subtitle:empty,
#contentSub2:empty {
  margin: 0;
  padding: 0;
  display: none;
}

.mw-body {
  border-color: var(--border-color-body);
}

.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,var(--border-color-body) 100%);
}

html.view-dark .vector-menu-tabs-legacy li {
  background-image: linear-gradient(to top, var(--border-color-body) 1px, var(--background-color-body) 2px);
  background-color: var(--background-color-body);
}

html.view-dark .vector-menu-tabs-legacy .selected {
  background-image: linear-gradient(to top, var(--background-color-base) 0,var(--background-color-body) 100%)
}

html.view-dark #footer-poweredbyico {
  background: #a0a0a0;
  margin-bottom: 16px;
}

html.view-dark #footer-poweredbyico a {
  background: transparent;
}

.mw-parser-output p {
  max-width: 100%;
  display: flow-root;
}