MediaWiki:Citizen.css: Difference between revisions

Revision as of 11:32, 8 March 2026

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


/* ======================================================
   TREEVERSE WIKI — GLASS DARK PANEL THEME
   Citizen Skin
   ====================================================== */


/* ------------------------------------------------------
   Page background
------------------------------------------------------ */

body {
  background-color: #0b0b0b;
}


/* ------------------------------------------------------
   Glass outer frame
------------------------------------------------------ */

.citizen-page-container-inner {

  background: rgba(255,255,255,0.08);

  border-radius: 20px;

  padding: 10px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.12);

}


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

  border-radius: 6px;

}


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

  border-radius: 6px;

}


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

.thumbcaption {

  color: #bbbbbb;

  font-size: 0.9rem;

}


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

.mw-body-content {

  overflow-x: hidden;

}


/* ======================================================
   RESPONSIVE YOUTUBE / VIDEO EMBEDS
   ====================================================== */

.mw-parser-output iframe {

  max-width: 100%;
  width: 100%;

  border-radius: 10px;

}


/* responsive video wrapper */

.mw-parser-output .embedvideo,
.mw-parser-output .video-container {

  position: relative;

  width: 100%;

  padding-bottom: 56.25%;

  height: 0;

}

.mw-parser-output .embedvideo iframe,
.mw-parser-output .video-container iframe {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

}


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

@media (max-width: 720px) {


  .mw-parser-output {

    padding: 16px;

    max-width: 100%;

  }


  /* tables scroll horizontally */

  .mw-parser-output table {

    display: block;

    overflow-x: auto;

  }

  .mw-parser-output table td,
  .mw-parser-output table th {

    white-space: normal;

  }


  /* infobox stacks */

  .infobox {

    float: none;

    width: 100%;

    margin: 1em auto;

  }

}


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

.citizen-page-header::before {

  background: rgba(0,0,0,0.35);

}