MediaWiki:Citizen.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.

/* All CSS here will be loaded for users of the Citizen skin */

/* ======================================================
   TREEVERSE DARK THEME
   Forces dark backgrounds for better readability
   ====================================================== */


/* Page background */
body {
  background-color: #0b0b0b;
}


/* Main content area */
.mw-parser-output {
  background-color: #111;
  color: #e6e6e6;
  max-width: 900px;
  margin: auto;
  padding: 10px;
}


/* Links */
a {
  color: #6ecbff;
}

a:visited {
  color: #b18cff;
}


/* Headings */
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
  color: #ffffff;
}


/* Infobox styling */
.infobox {
  background-color: #161616;
  border: 1px solid #333;
  border-radius: 6px;
}

.infobox th {
  background-color: #1e1e1e;
  color: #ffffff;
}

.infobox td {
  background-color: #161616;
}


/* Tables */
.wikitable {
  background-color: #161616;
  border: 1px solid #333;
}

.wikitable th {
  background-color: #1e1e1e;
  color: #ffffff;
}

.wikitable td {
  background-color: #161616;
  color: #e6e6e6;
}


/* Images stay responsive */
.mw-parser-output img {
  max-width: 100%;
  height: auto;
}


/* Code blocks */
pre,
code {
  background-color: #111;
  color: #e6e6e6;
  overflow-x: auto;
}


/* Caption styling */
.thumbcaption {
  color: #bbbbbb;
}


/* Prevent long text overflow */
.mw-parser-output {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* =========================
   Mobile layout fixes
   ========================= */

@media (max-width: 720px) {

  .mw-parser-output {
    padding-left: 8px;
    padding-right: 8px;
  }

  .mw-parser-output table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .infobox {
    float: none;
    width: 100%;
    margin: 1em auto;
  }

}