MediaWiki:Vector.css: Difference between revisions

Revision as of 15:10, 14 September 2026

/* =========================================================
   DARK NAVY THEME — VECTOR LEGACY 2010
   ========================================================= */


/* =========================================================
   MAIN PAGE
   ========================================================= */

body {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
}


/* Main content */

#content {
    background-color: #0d1b2a;
    color: #ffffff;
}


/* =========================================================
   HEADER / TOP AREA
   ========================================================= */

#mw-head {
    background-color: #081522 !important;
    color: #ffffff !important;
}

#mw-head a {
    color: #ffffff;
}

#mw-head a:hover {
    color: #66b3ff;
}


/* =========================================================
   LOGO — LEGACY VECTOR
   ========================================================= */

/*
   Your original image is:

   882 × 718 px

   Legacy Vector uses #p-logo rather than
   .mw-logo-icon / .mw-logo-container.
*/

#p-logo {
    height: 135px !important;
    width: 160px !important;
    margin-bottom: 0 !important;
}

#p-logo a {
    width: 160px !important;
    height: 135px !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;

    /*
       Keep the original aspect ratio.
       The image will fit inside the logo area
       without being stretched or cropped.
    */
    background-size: contain !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

#mw-panel {
    background-color: #091725 !important;
    color: #ffffff !important;
}

#mw-panel .portal {
    background-color: #091725 !important;
}

#mw-panel .portal h3 {
    color: #ffffff !important;
}

#mw-panel .portal a {
    color: #ffffff !important;
}

#mw-panel .portal a:hover {
    color: #66b3ff !important;
}


/* =========================================================
   PERSONAL MENU
   ========================================================= */

#p-personal {
    background-color: #081522 !important;
}

#p-personal a {
    color: #ffffff !important;
}

#p-personal a:hover {
    color: #66b3ff !important;
}


/* =========================================================
   PAGE TABS
   ========================================================= */

#p-cactions {
    background-color: #081522 !important;
}

#p-cactions li a {
    color: #ffffff !important;
}

#p-cactions li a:hover {
    color: #66b3ff !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

#p-search {
    background-color: #081522 !important;
}

#searchInput {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
    border: 1px solid #285477 !important;
}

#searchInput:focus {
    background-color: #081522 !important;
    border-color: #66b3ff !important;
    outline: none !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
}

h1,
h2 {
    border-bottom-color: #1d3a56 !important;
}


/* =========================================================
   NORMAL LINKS
   ========================================================= */

a,
.mw-body a {
    color: #66b3ff;
}

a:hover,
.mw-body a:hover {
    color: #9ed3ff;
}


/* =========================================================
   TABLES
   ========================================================= */

.wikitable {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
    background-color: #12263a !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}


/* =========================================================
   INFOBOXES
   ========================================================= */

.infobox {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}

.infobox th {
    background-color: #12263a !important;
    color: #ffffff !important;
}

.infobox td {
    color: #ffffff !important;
}


/* =========================================================
   CATEGORIES
   ========================================================= */

#catlinks {
    background-color: #0b1826 !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}


/* =========================================================
   CODE BLOCKS
   ========================================================= */

pre,
.mw-code {
    background-color: #050d16 !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}


/* Inline code */

code {
    background-color: #07111f !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: #12304a !important;
    color: #ffffff !important;
    border-color: #285477 !important;
}

.mw-ui-button:hover,
.oo-ui-buttonElement-button:hover {
    background-color: #194568 !important;
    color: #ffffff !important;
}


/* =========================================================
   INPUT BOXES
   ========================================================= */

input,
textarea,
select {
    background-color: #081522 !important;
    color: #ffffff !important;
    border: 1px solid #285477 !important;
}

input:focus,
textarea:focus,
select:focus {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
    border-color: #66b3ff !important;
    outline: none !important;
}


/* =========================================================
   NOTICES
   ========================================================= */

.mw-message-box {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
    border-color: #1d3a56 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

#footer {
    background-color: #07111f !important;
    color: #ffffff !important;
    border-top: 1px solid #1d3a56 !important;
}

#footer a {
    color: #66b3ff !important;
}


/* =========================================================
   HORIZONTAL LINES
   ========================================================= */

hr {
    border: 0 !important;
    border-top: 1px solid #1d3a56 !important;
}


/* =========================================================
   HIDE ELEMENTS FROM YOUR VECTOR 2022 THEME
   ========================================================= */

/*
   These were Vector 2022-specific.
   Legacy Vector doesn't use them.
*/

.vector-column-end {
    display: none !important;
}


/* =========================================================
   LOGO / LEFT SIDEBAR CLEANUP
   ========================================================= */

/*
   Keep the Legacy Vector logo visible.
   Do NOT use .mw-logo-icon here — that belongs
   to the newer Vector logo structure.
*/


/* =========================================================
   EXTRA UI
   ========================================================= */

/* Hide footer icons */

#footer-icons {
    display: none !important;
}


/* Last modified text */

#footer-info-lastmod {
    color: #ffffff !important;
}


/* =========================================================
   VECTOR LEGACY PORTLETS
   ========================================================= */

.portal {
    color: #ffffff;
}

.portal .body {
    background-color: #091725 !important;
}

.portal .body a {
    color: #ffffff !important;
}

.portal .body a:hover {
    color: #66b3ff !important;
}


/* =========================================================
   MENU ICON
   ========================================================= */

/*
   Keep compatibility with the icon styling you already had.
*/

.mw-ui-icon-menu {
    color: #66b3ff !important;
}