MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 16:17, 8 March 2026

/* All CSS here will be loaded for users of the Citizen skin */

/* ======================================================
   TREEVERSE WIKI — CITIZEN DARK THEME
   ====================================================== */


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

body {
    background-color: #0b0b0b;
}


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

}


/* remove internal padding layers */

.citizen-page-container-inner,
.citizen-body,
.citizen-content {
    padding: 0 !important;
}


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

.mw-parser-output {

    background: #0f1115;

    color: #e6e6e6;

    max-width: 950px;

    margin: auto;

    padding: 24px;

    border-radius: 16px;

    word-wrap: break-word;

}


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

.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {

    color: #ffffff;

    margin-top: 1.6em;
    margin-bottom: 0.6em;

}


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

.mw-parser-output p {

    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;

}


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

.wikitable {

    background: #161a22;

    border: 1px solid #2a2f38;

    border-radius: 10px;

    overflow: hidden;

}

.wikitable th {

    background: #1f2430;

    color: #ffffff;

}

.wikitable td {

    background: #161a22;

}


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

.infobox {

    background: #161a22;

    border: 1px solid #2a2f38;

    border-radius: 10px;

}

.infobox th {

    background: #1f2430;

}


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

pre,
code {

    background: #111;

    color: #e6e6e6;

    overflow-x: auto;

    border-radius: 6px;

}


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

.thumbcaption {

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

.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 FIXES
   ====================================================== */

@media (max-width: 720px) {

    .mw-parser-output {

        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
   ====================================================== */

.citizen-page-header::before {

    background: rgba(0,0,0,0.35);

}