Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
Force sidebar always visible on desktop
 
Dark theme + modern styling for Vector-2022
Line 1: Line 1:
/* Force Citizen sidebar drawer to always be visible on desktop */
/* Prosperity SMP Wiki — dark theme for Vector-2022 */
@media (min-width: 1200px) {
    /* Make the header wider to accommodate the always-open drawer */
    .citizen-header {
        width: 280px !important;
    }


    /* Force the drawer to always be visible */
/* Dark background */
    .citizen-drawer {
body, .mw-page-container {
        display: block !important;
    background-color: #0f0f1a !important;
        visibility: visible !important;
    color: #e0e0e0 !important;
        opacity: 1 !important;
}
        position: static !important;
        transform: none !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }


    .citizen-drawer .citizen-dropdown__content {
.vector-header-container,
        display: block !important;
.mw-header {
        visibility: visible !important;
    background-color: #0f0f1a !important;
        opacity: 1 !important;
    border-bottom: 1px solid rgba(226, 183, 20, 0.15);
        position: static !important;
}
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }


    .citizen-drawer__card {
/* Content area */
        display: block !important;
.mw-body, .mw-body-content, .vector-body {
        visibility: visible !important;
    background-color: #141425 !important;
    }
    color: #e0e0e0 !important;
}


    /* Push page content to the right to make room */
.mw-parser-output {
    .citizen-body {
    color: #e0e0e0 !important;
        margin-left: 280px !important;
}
    }


    /* Hide the hamburger toggle since drawer is always open */
/* Sidebar */
    .citizen-drawer > .citizen-dropdown__trigger {
.vector-column-start .vector-main-menu,
        display: none !important;
.vector-sidebar,
    }
.mw-sidebar-container,
nav.vector-main-menu-container {
    background-color: #0f0f1a !important;
}


    /* Style the always-visible sidebar */
.vector-main-menu .vector-menu-heading,
    .citizen-drawer .citizen-menu__heading {
.sidebar-heading,
        font-weight: 600;
.vector-menu-heading {
        text-transform: uppercase;
    color: #e2b714 !important;
        font-size: 0.75rem;
    font-weight: 600;
        letter-spacing: 0.05em;
    text-transform: uppercase;
        opacity: 0.7;
    font-size: 0.8rem;
        margin-top: 1rem;
    letter-spacing: 0.04em;
    }
}


     .citizen-drawer .citizen-menu__content a {
/* Sidebar links */
        padding: 4px 0;
.mw-sidebar a, .vector-main-menu a,
        display: block;
nav.vector-main-menu-container a,
     }
.vector-column-start a {
    color: #b0b0c0 !important;
}
 
.mw-sidebar a:hover, .vector-main-menu a:hover,
nav.vector-main-menu-container a:hover,
.vector-column-start a:hover {
    color: #e2b714 !important;
}
 
/* Links */
.mw-body a, .mw-body-content a {
    color: #6ba4e8 !important;
}
 
.mw-body a:hover {
    color: #e2b714 !important;
}
 
/* Headings */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4 {
    color: #ffffff !important;
    border-bottom-color: rgba(226, 183, 20, 0.2) !important;
}
 
.mw-page-title-main, #firstHeading {
    color: #e2b714 !important;
}
 
/* Tables */
.wikitable, .wikitable th, .wikitable td {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
    border-color: #2a2a4a !important;
}
 
.wikitable th {
    background-color: #1e1e36 !important;
    color: #e2b714 !important;
}
 
/* Code blocks */
code, pre, .mw-code {
    background-color: #1a1a2e !important;
    color: #e8c547 !important;
    border-color: #2a2a4a !important;
}
 
/* Search */
.vector-search-box input,
.cdx-text-input__input {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
    border-color: #2a2a4a !important;
}
 
/* Footer */
.mw-footer, footer {
    background-color: #0a0a14 !important;
    color: #808090 !important;
    border-top-color: rgba(226, 183, 20, 0.1) !important;
}
 
/* Tabs */
.vector-tabs .mw-list-item a,
.vector-menu-tabs .mw-list-item a {
     color: #b0b0c0 !important;
}
 
.vector-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a {
    color: #e2b714 !important;
}
 
/* Notices / admonitions */
.mw-message-box {
    background-color: #1a1a2e !important;
    border-color: #e2b714 !important;
    color: #e0e0e0 !important;
}
 
/* TOC */
.toc, .toccolours {
    background-color: #1a1a2e !important;
    border-color: #2a2a4a !important;
}
 
/* Category links */
.catlinks {
    background-color: #1a1a2e !important;
    border-color: #2a2a4a !important;
    color: #b0b0c0 !important;
}
 
/* Blockquote */
blockquote {
    background-color: #1a1a2e;
    border-left: 3px solid #e2b714;
    padding: 0.5em 1em;
    margin: 1em 0;
}
 
/* User menu / personal tools */
.vector-user-links, .vector-menu-content {
     background-color: #0f0f1a !important;
}
}

Revision as of 17:46, 27 May 2026

/* Prosperity SMP Wiki — dark theme for Vector-2022 */

/* Dark background */
body, .mw-page-container {
    background-color: #0f0f1a !important;
    color: #e0e0e0 !important;
}

.vector-header-container,
.mw-header {
    background-color: #0f0f1a !important;
    border-bottom: 1px solid rgba(226, 183, 20, 0.15);
}

/* Content area */
.mw-body, .mw-body-content, .vector-body {
    background-color: #141425 !important;
    color: #e0e0e0 !important;
}

.mw-parser-output {
    color: #e0e0e0 !important;
}

/* Sidebar */
.vector-column-start .vector-main-menu,
.vector-sidebar,
.mw-sidebar-container,
nav.vector-main-menu-container {
    background-color: #0f0f1a !important;
}

.vector-main-menu .vector-menu-heading,
.sidebar-heading,
.vector-menu-heading {
    color: #e2b714 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* Sidebar links */
.mw-sidebar a, .vector-main-menu a,
nav.vector-main-menu-container a,
.vector-column-start a {
    color: #b0b0c0 !important;
}

.mw-sidebar a:hover, .vector-main-menu a:hover,
nav.vector-main-menu-container a:hover,
.vector-column-start a:hover {
    color: #e2b714 !important;
}

/* Links */
.mw-body a, .mw-body-content a {
    color: #6ba4e8 !important;
}

.mw-body a:hover {
    color: #e2b714 !important;
}

/* Headings */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4 {
    color: #ffffff !important;
    border-bottom-color: rgba(226, 183, 20, 0.2) !important;
}

.mw-page-title-main, #firstHeading {
    color: #e2b714 !important;
}

/* Tables */
.wikitable, .wikitable th, .wikitable td {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
    border-color: #2a2a4a !important;
}

.wikitable th {
    background-color: #1e1e36 !important;
    color: #e2b714 !important;
}

/* Code blocks */
code, pre, .mw-code {
    background-color: #1a1a2e !important;
    color: #e8c547 !important;
    border-color: #2a2a4a !important;
}

/* Search */
.vector-search-box input,
.cdx-text-input__input {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
    border-color: #2a2a4a !important;
}

/* Footer */
.mw-footer, footer {
    background-color: #0a0a14 !important;
    color: #808090 !important;
    border-top-color: rgba(226, 183, 20, 0.1) !important;
}

/* Tabs */
.vector-tabs .mw-list-item a,
.vector-menu-tabs .mw-list-item a {
    color: #b0b0c0 !important;
}

.vector-tabs .mw-list-item.selected a,
.vector-menu-tabs .mw-list-item.selected a {
    color: #e2b714 !important;
}

/* Notices / admonitions */
.mw-message-box {
    background-color: #1a1a2e !important;
    border-color: #e2b714 !important;
    color: #e0e0e0 !important;
}

/* TOC */
.toc, .toccolours {
    background-color: #1a1a2e !important;
    border-color: #2a2a4a !important;
}

/* Category links */
.catlinks {
    background-color: #1a1a2e !important;
    border-color: #2a2a4a !important;
    color: #b0b0c0 !important;
}

/* Blockquote */
blockquote {
    background-color: #1a1a2e;
    border-left: 3px solid #e2b714;
    padding: 0.5em 1em;
    margin: 1em 0;
}

/* User menu / personal tools */
.vector-user-links, .vector-menu-content {
    background-color: #0f0f1a !important;
}