Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the Citizen skin */
/* 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;
}


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


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




/* -----------------------------
/* Links */
  Responsive images
a {
----------------------------- */
   color: #6ecbff;
 
.mw-parser-output img {
   max-width: 100%;
  height: auto;
}
}


 
a:visited {
/* -----------------------------
   color: #b18cff;
  Prevent media overflow
----------------------------- */
 
iframe,
video {
   max-width: 100%;
}
}




/* -----------------------------
/* Headings */
  Code blocks
.mw-parser-output h1,
----------------------------- */
.mw-parser-output h2,
 
.mw-parser-output h3,
pre,
.mw-parser-output h4 {
code {
   color: #ffffff;
   overflow-x: auto;
  max-width: 100%;
}
}




/* -----------------------------
/* Infobox styling */
  Prevent page overflow
.infobox {
----------------------------- */
  background-color: #161616;
 
  border: 1px solid #333;
.mw-body-content {
   border-radius: 6px;
   overflow-x: hidden;
}
}


 
.infobox th {
/* -----------------------------
   background-color: #1e1e1e;
  Improve headings
   color: #ffffff;
----------------------------- */
 
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3 {
   margin-top: 1.6em;
   margin-bottom: 0.6em;
}
}


 
.infobox td {
/* -----------------------------
   background-color: #161616;
  Improve paragraph readability
----------------------------- */
 
.mw-parser-output p {
   font-size: 1.05rem;
  line-height: 1.6;
}
}




/* -----------------------------
/* Tables */
  Table improvements
----------------------------- */
 
.wikitable {
.wikitable {
   border-radius: 6px;
   background-color: #161616;
   overflow: hidden;
   border: 1px solid #333;
}
}


.wikitable th {
.wikitable th {
   background: var(--color-surface-2);
   background-color: #1e1e1e;
  color: #ffffff;
}
}


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


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


.infobox {
/* Images stay responsive */
   border-radius: 8px;
.mw-parser-output img {
  overflow: hidden;
   max-width: 100%;
   border: 1px solid var(--border-color);
   height: auto;
}
}


.infobox th {
 
   background: var(--color-surface-2);
/* Code blocks */
pre,
code {
   background-color: #111;
  color: #e6e6e6;
  overflow-x: auto;
}
}




/* -----------------------------
/* Caption styling */
  Caption styling
----------------------------- */
 
.thumbcaption {
.thumbcaption {
   font-size: 0.9rem;
   color: #bbbbbb;
  opacity: 0.8;
}
}




/* -----------------------------
/* Prevent long text overflow */
  Long links / item names
.mw-parser-output {
----------------------------- */
   word-wrap: break-word;
 
  overflow-wrap: break-word;
a {
   word-break: break-word;
}
}




/* ======================================================
/* =========================
   MOBILE FIXES
   Mobile layout fixes
   ====================================================== */
   ========================= */


@media (max-width: 720px) {
@media (max-width: 720px) {


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


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


  /* Infobox behaviour */
   .infobox {
   .infobox {
     float: none;
     float: none;
     width: 100%;
     width: 100%;
    max-width: 100%;
     margin: 1em auto;
     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;
   }
   }


}
}

Revision as of 10:32, 8 March 2026

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

}