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
 
(6 intermediate revisions by the same user not shown)
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 + MOBILE FIXES
   TREEVERSE WIKI — CITIZEN DARK THEME
   ====================================================== */
   ====================================================== */




/* -----------------------------
/* ------------------------------------------------------
   Global page background
   Page background
----------------------------- */
------------------------------------------------------ */


body {
body {
  background-color: #0b0b0b;
    background-color: #0b0b0b;
}
}




/* -----------------------------
/* ------------------------------------------------------
   Main content container
   Remove ALL Citizen white containers
----------------------------- */
------------------------------------------------------ */
 
.citizen-page-container,
.citizen-page-container-inner,
.citizen-body,
.citizen-content,
.citizen-card,
.mw-body,
.mw-body-content {
 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;


.citizen-page-container {
  background: #0b0b0b;
}
}




/* -----------------------------
/* remove internal padding layers */
   Article content
 
----------------------------- */
.citizen-page-container-inner,
.citizen-body,
.citizen-content {
    padding: 0 !important;
}
 
 
/* ------------------------------------------------------
   Article panel
------------------------------------------------------ */


.mw-parser-output {
.mw-parser-output {
  background: transparent;
  color: #e6e6e6;
  max-width: 900px;
  margin: auto;
  padding: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


    background: #0f1115;
    color: #e6e6e6;


/* -----------------------------
    max-width: 950px;
  Remove light panels
----------------------------- */


.citizen-card,
    margin: auto;
.citizen-page-container-inner,
.citizen-content-container {
  background: transparent;
  border: none;
}


    padding: 24px;


/* -----------------------------
    border-radius: 16px;
  Links
----------------------------- */


a {
    word-wrap: break-word;
  color: #6ecbff;
}


a:visited {
  color: #b18cff;
}
}




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


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




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


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




/* -----------------------------
/* ------------------------------------------------------
   Responsive images
   Links
----------------------------- */
------------------------------------------------------ */
 
a {
    color: #7fd3ff;
}
 
a:visited {
    color: #c49cff;
}
 
 
/* ------------------------------------------------------
  Images
------------------------------------------------------ */


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




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


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


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


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




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


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


.infobox th {
.infobox th {
  background: #1e1e1e;
  color: #ffffff;
}


.infobox td {
    background: #1f2430;
  background: #161616;
 
}
}




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


pre,
pre,
code {
code {
  background: #111;
 
  color: #e6e6e6;
    background: #111;
  overflow-x: auto;
 
  max-width: 100%;
    color: #e6e6e6;
 
    overflow-x: auto;
 
    border-radius: 6px;
 
}
}




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


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




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


.mw-body-content {
.mw-body-content {
  overflow-x: hidden;
 
    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%;
 
}
}


Line 179: Line 266:
@media (max-width: 720px) {
@media (max-width: 720px) {


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


  /* Allow tables to scroll without squishing columns */
        padding: 16px;
  .mw-parser-output table {
 
    display: block;
        max-width: 100%;
    overflow-x: auto;
 
     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;


  /* Allow table text to wrap */
        width: 100%;
  .mw-parser-output table td,
  .mw-parser-output table th {
    white-space: normal;
  }


  /* Images inside tables scale properly */
        margin: 1em auto;
  .mw-parser-output table img {
    max-width: 100%;
    height: auto;
  }


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


}
}




/* -----------------------------
/* ======================================================
   Darken header overlay slightly
   HERO IMAGE READABILITY
----------------------------- */
  ====================================================== */


.citizen-page-header::before {
.citizen-page-header::before {
  background: rgba(0,0,0,0.35);
 
    background: rgba(0,0,0,0.35);
 
}
}
Retrieved from "https://treeverse.wiki/MediaWiki:Citizen.css"