Toggle search
Toggle menu
5
333
45
1.5K
Treeverse
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
More actions
← Older edit
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 2: Line 2:


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




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




/* Main content area */
/* ------------------------------------------------------
.mw-parser-output {
  Remove ALL Citizen white containers
  background-color: #111;
------------------------------------------------------ */
  color: #e6e6e6;
 
  max-width: 900px;
.citizen-page-container,
  margin: auto;
.citizen-page-container-inner,
  padding: 10px;
.citizen-body,
.citizen-content,
.citizen-card,
.mw-body,
.mw-body-content {
 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
 
}
}




/* Links */
/* remove internal padding layers */
a {
 
  color: #6ecbff;
.citizen-page-container-inner,
.citizen-body,
.citizen-content {
    padding: 0 !important;
}
}


a:visited {
 
  color: #b18cff;
/* ------------------------------------------------------
  Article panel
------------------------------------------------------ */
 
.mw-parser-output {
 
    background: #0f1115;
 
    color: #e6e6e6;
 
    max-width: 950px;
 
    margin: auto;
 
    padding: 24px;
 
    border-radius: 16px;
 
    word-wrap: break-word;
 
}
}




/* Headings */
/* ------------------------------------------------------
  Headings
------------------------------------------------------ */
 
.mw-parser-output h1,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h3,
.mw-parser-output h4 {
.mw-parser-output h4 {
  color: #ffffff;
 
    color: #ffffff;
 
    margin-top: 1.6em;
    margin-bottom: 0.6em;
 
}
 
 
/* ------------------------------------------------------
  Paragraph readability
------------------------------------------------------ */
 
.mw-parser-output p {
 
    font-size: 1.05rem;
 
    line-height: 1.6;
 
}
}




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


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


.infobox td {
 
  background-color: #161616;
/* ------------------------------------------------------
  Images
------------------------------------------------------ */
 
.mw-parser-output img {
 
    max-width: 100%;
    height: auto;
 
    border-radius: 6px;
 
}
}




/* Tables */
/* ------------------------------------------------------
  Tables
------------------------------------------------------ */
 
.wikitable {
.wikitable {
  background-color: #161616;
 
  border: 1px solid #333;
    background: #161a22;
 
    border: 1px solid #2a2f38;
 
    border-radius: 10px;
 
    overflow: hidden;
 
}
}


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


.wikitable td {
.wikitable td {
  background-color: #161616;
 
  color: #e6e6e6;
    background: #161a22;
 
}
 
 
/* ------------------------------------------------------
  Infobox
------------------------------------------------------ */
 
.infobox {
 
    background: #161a22;
 
    border: 1px solid #2a2f38;
 
    border-radius: 10px;
 
}
}


.infobox th {
    background: #1f2430;


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




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




/* Caption styling */
/* ------------------------------------------------------
  Caption styling
------------------------------------------------------ */
 
.thumbcaption {
.thumbcaption {
  color: #bbbbbb;
 
    color: #bbbbbb;
 
    font-size: 0.9rem;
 
}
 
 
/* ------------------------------------------------------
  Prevent layout overflow
------------------------------------------------------ */
 
.mw-body-content {
 
    overflow-x: hidden;
 
}
}




/* Prevent long text overflow */
/* ======================================================
.mw-parser-output {
  RESPONSIVE YOUTUBE / VIDEO EMBEDS
  word-wrap: break-word;
  ====================================================== */
  overflow-wrap: break-word;
 
.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 layout fixes
   MOBILE FIXES
   ========================= */
   ====================================================== */


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


  .mw-parser-output {
    .mw-parser-output {
     padding-left: 8px;
 
     padding-right: 8px;
        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 nicely */
 
    .infobox {
 
        float: none;
 
        width: 100%;
 
        margin: 1em auto;
 
    }
 
}
 
 
/* ======================================================
  HERO IMAGE READABILITY
  ====================================================== */


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


  .infobox {
     background: rgba(0,0,0,0.35);
     float: none;
    width: 100%;
    margin: 1em auto;
  }


}
}
Retrieved from "https://treeverse.wiki/MediaWiki:Citizen.css"