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 */



/* -----------------------------
   Global layout fixes
----------------------------- */

.mw-parser-output {
  max-width: 900px;
  margin: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* -----------------------------
   Responsive images
----------------------------- */

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


/* -----------------------------
   Prevent media overflow
----------------------------- */

iframe,
video {
  max-width: 100%;
}


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

pre,
code {
  overflow-x: auto;
  max-width: 100%;
}


/* -----------------------------
   Prevent page overflow
----------------------------- */

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


/* -----------------------------
   Improve headings
----------------------------- */

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


/* -----------------------------
   Improve paragraph readability
----------------------------- */

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


/* -----------------------------
   Table improvements
----------------------------- */

.wikitable {
  border-radius: 6px;
  overflow: hidden;
}

.wikitable th {
  background: var(--color-surface-2);
}


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

.infobox {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.infobox th {
  background: var(--color-surface-2);
}


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

.thumbcaption {
  font-size: 0.9rem;
  opacity: 0.8;
}


/* -----------------------------
   Long links / item names
----------------------------- */

a {
  word-break: break-word;
}


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

@media (max-width: 720px) {

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

  /* Tables scroll horizontally */
  .mw-parser-output table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Infobox behaviour */
  .infobox {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 1em auto;
  }

  /* Improve mobile menu spacing */
  .citizen-drawer__menu a {
    padding: 10px 14px;
  }

  /* Slightly larger mobile menu text */
  .citizen-drawer__menu {
    font-size: 1.05rem;
  }

}