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
Created page with "→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 ove..."
 
No edit summary
 
(9 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 WIKI — CITIZEN DARK THEME
  ====================================================== */




/* -----------------------------
/* ------------------------------------------------------
   Global layout fixes
   Page background
----------------------------- */
------------------------------------------------------ */


.mw-parser-output {
body {
  max-width: 900px;
    background-color: #0b0b0b;
  margin: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
}




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


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




/* -----------------------------
/* remove internal padding layers */
  Prevent media overflow
----------------------------- */


iframe,
.citizen-page-container-inner,
video {
.citizen-body,
  max-width: 100%;
.citizen-content {
    padding: 0 !important;
}
}




/* -----------------------------
/* ------------------------------------------------------
   Code blocks
   Article panel
----------------------------- */
------------------------------------------------------ */
 
.mw-parser-output {
 
    background: #0f1115;
 
    color: #e6e6e6;
 
    max-width: 950px;
 
    margin: auto;


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


    border-radius: 16px;


/* -----------------------------
    word-wrap: break-word;
  Prevent page overflow
----------------------------- */


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




/* -----------------------------
/* ------------------------------------------------------
   Improve 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,
  margin-top: 1.6em;
.mw-parser-output h4 {
  margin-bottom: 0.6em;
 
    color: #ffffff;
 
    margin-top: 1.6em;
    margin-bottom: 0.6em;
 
}
}




/* -----------------------------
/* ------------------------------------------------------
   Improve 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;
 
}
 
 
/* ------------------------------------------------------
  Links
------------------------------------------------------ */
 
a {
    color: #7fd3ff;
}
 
a:visited {
    color: #c49cff;
}
 
 
/* ------------------------------------------------------
  Images
------------------------------------------------------ */
 
.mw-parser-output img {
 
    max-width: 100%;
    height: auto;
 
    border-radius: 6px;
 
}
}




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


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


.wikitable th {
.wikitable th {
  background: var(--color-surface-2);
 
    background: #1f2430;
 
    color: #ffffff;
 
}
 
.wikitable td {
 
    background: #161a22;
 
}
}




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


.infobox {
.infobox {
  border-radius: 8px;
 
  overflow: hidden;
    background: #161a22;
  border: 1px solid var(--border-color);
 
    border: 1px solid #2a2f38;
 
    border-radius: 10px;
 
}
}


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




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


.thumbcaption {
.thumbcaption {
  font-size: 0.9rem;
 
  opacity: 0.8;
    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 */
  Long links / item names
 
----------------------------- */
.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%;


a {
  word-break: break-word;
}
}


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


  /* Content padding */
    .mw-parser-output {
  .mw-parser-output {
 
    padding-left: 8px;
        padding: 16px;
    padding-right: 8px;
 
  }
        max-width: 100%;
 
    }
 
    /* tables scroll horizontally */


  /* Tables scroll horizontally */
    .mw-parser-output table {
  .mw-parser-output table {
 
    display: block;
        display: block;
    overflow-x: auto;
 
     white-space: nowrap;
        overflow-x: auto;
     max-width: 100%;
 
  }
     }
 
    .mw-parser-output table td,
    .mw-parser-output table th {
 
        white-space: normal;
 
    }
 
    /* infobox stacks nicely */
 
     .infobox {
 
        float: none;


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


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


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


}
}
Line 167: Line 307:


/* ======================================================
/* ======================================================
   ACCENT COLOUR
   HERO IMAGE READABILITY
   ====================================================== */
   ====================================================== */


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