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 WIKI — CITIZEN DARK PANEL THEME
   ====================================================== */


/* ------------------------------------------------------
   Background
------------------------------------------------------ */

body {
  background-color: #0b0b0b;
}


/* ------------------------------------------------------
   Outer frame around article
------------------------------------------------------ */

.citizen-page-container-inner {
  background: rgba(230,230,230,0.92);
  border-radius: 18px;
  padding: 8px;
  backdrop-filter: blur(6px);
}


/* ------------------------------------------------------
   Article content panel
------------------------------------------------------ */

.mw-parser-output {
  background: #0f1115;
  color: #e6e6e6;

  max-width: 950px;
  margin: auto;
  padding: 24px;

  border-radius: 14px;

  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* ------------------------------------------------------
   Headings
------------------------------------------------------ */

.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
  color: #ffffff;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}


/* ------------------------------------------------------
   Paragraph readability
------------------------------------------------------ */

.mw-parser-output p {
  font-size: 1.05rem;
  line-height: 1.6;
}


/* ------------------------------------------------------
   Links
------------------------------------------------------ */

a {
  color: #7fd3ff;
}

a:visited {
  color: #c49cff;
}


/* ------------------------------------------------------
   Images
------------------------------------------------------ */

.mw-parser-output img {
  max-width: 100%;
  height: auto;
}


/* ------------------------------------------------------
   Tables
------------------------------------------------------ */

.wikitable {
  background: #161a22;
  border: 1px solid #2a2f38;
  border-radius: 10px;
  overflow: hidden;
}

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

.wikitable td {
  background: #161a22;
}


/* ------------------------------------------------------
   Infobox
------------------------------------------------------ */

.infobox {
  background: #161a22;
  border: 1px solid #2a2f38;
  border-radius: 10px;
}

.infobox th {
  background: #1f2430;
}


/* ------------------------------------------------------
   Code blocks
------------------------------------------------------ */

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


/* ------------------------------------------------------
   Caption styling
------------------------------------------------------ */

.thumbcaption {
  color: #bbbbbb;
  font-size: 0.9rem;
}


/* ------------------------------------------------------
   Prevent layout overflow
------------------------------------------------------ */

.mw-body-content {
  overflow-x: hidden;
}


/* ======================================================
   MOBILE FIXES
   ====================================================== */

@media (max-width: 720px) {

  .mw-parser-output {
    padding: 16px;
  }

  /* Tables scroll on mobile */
  .mw-parser-output table {
    display: block;
    overflow-x: auto;
  }

  .mw-parser-output table td,
  .mw-parser-output table th {
    white-space: normal;
  }

  /* Infobox stacks nicely */
  .infobox {
    float: none;
    width: 100%;
    margin: 1em auto;
  }

}


/* ======================================================
   HEADER IMPROVEMENT
   ====================================================== */

/* subtle dark overlay on hero image */

.citizen-page-header::before {
  background: rgba(0,0,0,0.35);
}