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.

/* ------------------
--- General Style ---
------------------ */

/* ------------------
--- Dark Theme ---
------------------ */

:root {
  color-scheme: dark !important;

  /* Text */
  --color-base: #eeeeee;
  --color-base-fixed: #eeeeee;
  --color-base--hover: #ffffff;
  --color-emphasized: #ffffff;
  --color-subtle: #b8bec7;
  --color-placeholder: #8c949e;
  --color-disabled: #69717c;
  --color-disabled-emphasized: #69717c;

  /* Inverted text */
  --color-inverted: #20252b;
  --color-inverted-fixed: #20252b;

  /* Links */
  --color-progressive: #6ea8fe;
  --color-progressive--hover: #8bb9ff;
  --color-progressive--active: #4d8df7;
  --color-progressive--focus: #6ea8fe;

  /* Visited links */
  --color-visited: #a78bfa;
  --color-visited--hover: #b9a3ff;
  --color-visited--active: #8b6fe8;

  /* Backgrounds */
  --background-color-base: #222831;
  --background-color-base-fixed: #222831;

  --background-color-neutral: #393e46;
  --background-color-neutral-subtle: #2d333b;

  --background-color-interactive: #393e46;
  --background-color-interactive--hover: #454b55;
  --background-color-interactive--active: #505762;

  --background-color-interactive-subtle: #2d333b;
  --background-color-interactive-subtle--hover: #393e46;
  --background-color-interactive-subtle--active: #454b55;

  --background-color-disabled: #454b55;
  --background-color-disabled-subtle: #393e46;

  --background-color-inverted: #eeeeee;

  /* Progressive UI */
  --background-color-progressive: #4d7fe8;
  --background-color-progressive--hover: #6090f2;
  --background-color-progressive--active: #3c6fd4;
  --background-color-progressive--focus: #6ea8fe;

  /* Progressive subtle backgrounds */
  --background-color-progressive-subtle: #293653;
  --background-color-progressive-subtle--hover: #334467;
  --background-color-progressive-subtle--active: #3b5078;

  /* Borders */
  --border-color-base: #59616d;
  --border-color-subtle: #454b55;
  --border-color-muted: #393e46;

  --border-color-interactive: #8c949e;
  --border-color-interactive--hover: #b8bec7;
  --border-color-interactive--active: #eeeeee;

  --border-color-disabled: #454b55;

  --border-color-inverted: #20252b;
  --border-color-inverted-fixed: #20252b;

  /* Progressive borders */
  --border-color-progressive: #6ea8fe;
  --border-color-progressive--hover: #8bb9ff;
  --border-color-progressive--active: #4d8df7;
  --border-color-progressive--focus: #6ea8fe;

  /* Dividers */
  --border-color-divider: #59616d;

  /* Shadows */
  --box-shadow-color-base: #11151a;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.35);

  /* Backdrops */
  --background-color-backdrop-light: rgba(34, 40, 49, 0.65);
  --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
}
:root, .skin-invert, .no-theme {

}

/* -----------------
--- Infoboxes ---
----------------- */

.infobox {
  border: 1px solid #a2a9b1;
  color: #000;
  padding: .2em;
  font-size: .9em;
  line-height: 1.5em;
  border-spacing: 3px;
}

.infobox th,
.infobox td {
  padding: .2em .5em;
  text-align: left;
  vertical-align: top;
}

.infobox .infobox-above,
.infobox .infobox-title {
  font-size: 1.25em;
  font-weight: bold;
  text-align: center !important;
}

.infobox .infobox-caption {
  font-weight: normal !important;
  text-align: center !important;
}

.infobox .infobox-header {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center !important;
}

.infobox .infobox-label {
  font-weight: bold;
}

/* Fixes weird stretching bug with the Vector skin */
.infobox img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .infobox {
    width: 100%;
    float: none;
    clear: both;
    margin: 0 0 1em 0;
    table-layout: fixed;
  }
  
  .infobox .nowrap {
    white-space: normal;
  }
}

@media (min-width: 640px) {
  .infobox {
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    width: 22em;
  }
}