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
 
(4 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 PANEL THEME
   TREEVERSE WIKI — CITIZEN DARK THEME
   ====================================================== */
   ====================================================== */




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


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




/* ------------------------------------------------------
/* ------------------------------------------------------
   Outer frame around article
   Remove ALL Citizen white containers
------------------------------------------------------ */
------------------------------------------------------ */


.citizen-page-container-inner {
.citizen-page-container,
  background: rgba(230,230,230,0.92);
.citizen-page-container-inner,
  border-radius: 18px;
.citizen-body,
  padding: 8px;
.citizen-content,
  backdrop-filter: blur(6px);
.citizen-card,
.mw-body,
.mw-body-content {
 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
 
}
 
 
/* remove internal padding layers */
 
.citizen-page-container-inner,
.citizen-body,
.citizen-content {
    padding: 0 !important;
}
}




/* ------------------------------------------------------
/* ------------------------------------------------------
   Article content panel
   Article panel
------------------------------------------------------ */
------------------------------------------------------ */


.mw-parser-output {
.mw-parser-output {
  background: #0f1115;
  color: #e6e6e6;


  max-width: 950px;
    background: #0f1115;
  margin: auto;
 
  padding: 24px;
    color: #e6e6e6;
 
    max-width: 950px;
 
    margin: auto;
 
    padding: 24px;
 
    border-radius: 16px;


  border-radius: 14px;
    word-wrap: break-word;


  word-wrap: break-word;
  overflow-wrap: break-word;
}
}


Line 55: 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;
 
}
}


Line 66: Line 88:


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


Line 76: Line 101:


a {
a {
  color: #7fd3ff;
    color: #7fd3ff;
}
}


a:visited {
a:visited {
  color: #c49cff;
    color: #c49cff;
}
}


Line 89: Line 114:


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


Line 99: Line 128:


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


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


.wikitable td {
.wikitable td {
  background: #161a22;
 
    background: #161a22;
 
}
}


Line 120: Line 159:


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


.infobox th {
.infobox th {
  background: #1f2430;
 
    background: #1f2430;
 
}
}


Line 136: Line 181:
pre,
pre,
code {
code {
  background: #111;
 
  color: #e6e6e6;
    background: #111;
  overflow-x: auto;
 
    color: #e6e6e6;
 
    overflow-x: auto;
 
    border-radius: 6px;
 
}
}


Line 147: Line 198:


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


Line 157: Line 211:


.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 167: Line 266:
@media (max-width: 720px) {
@media (max-width: 720px) {


  .mw-parser-output {
    .mw-parser-output {
    padding: 16px;
 
  }
        padding: 16px;
 
        max-width: 100%;
 
    }
 
    /* tables scroll horizontally */
 
    .mw-parser-output table {
 
        display: block;


  /* Tables scroll on mobile */
        overflow-x: auto;
  .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%;


  .mw-parser-output table td,
        margin: 1em auto;
  .mw-parser-output table th {
    white-space: normal;
  }


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


}
}
Line 193: Line 307:


/* ======================================================
/* ======================================================
   HEADER IMPROVEMENT
   HERO IMAGE READABILITY
   ====================================================== */
   ====================================================== */


/* subtle dark overlay on hero image */
.citizen-page-header::before {
 
    background: rgba(0,0,0,0.35);


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