World of Warcraft: Forever is currently in beta. This wiki is being updated regularly as new information becomes available, and details may change before launch. You can help by submitting edits and corrections as you discover them in-game.

MediaWiki:Vector.css: Difference between revisions

From WowForever Wiki
Jump to navigation Jump to search
← Older editNewer edit →

Dan (talk | contribs)

3 user groups
104 edits
No edit summary
No edit summary
Line 906: Line 906:
     background-color: #0d1b2a !important;
     background-color: #0d1b2a !important;
     color: #66b3ff !important;
     color: #66b3ff !important;
     padding: 7px 12px !important;
     padding: 12px !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}

Revision as of 20:33, 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;
}

.page-Main_Page .firstHeading {
    display: none;
}

/* =========================================================
   NAVIGATION MENUS / PORTLETS — DARK NAVY
   ========================================================= */

/* Main sidebar navigation area */

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


/* Individual navigation boxes */

#mw-panel .portal {
    background-color: #0d1b2a !important;
    border: 1px solid #1d3a56 !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* Navigation box headings */

#mw-panel .portal h3 {
    background-color: #12263a !important;
    color: #ffffff !important;

    border-bottom: 1px solid #1d3a56 !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    font-weight: bold !important;
}


/* Navigation box contents */

#mw-panel .portal .body {
    background-color: #0d1b2a !important;
    padding: 7px 10px !important;
}


/* Navigation links */

#mw-panel .portal .body li {
    margin: 0 !important;
    padding: 0 !important;
}


/* Navigation links themselves */

#mw-panel .portal .body a {
    display: block !important;

    color: #66b3ff !important;

    padding: 5px 6px !important;

    border-radius: 3px !important;

    text-decoration: none !important;

    transition:
        background-color 0.15s ease,
        color 0.15s ease !important;
}


/* Navigation hover */

#mw-panel .portal .body a:hover {
    background-color: #12304a !important;
    color: #9ed3ff !important;
    text-decoration: none !important;
}


/* =========================================================
   LEFT SIDEBAR — COMMON PORTLETS
   ========================================================= */

/* Navigation */

#p-navigation {
    background-color: #0d1b2a !important;
}


/* Toolbox */

#p-tb {
    background-color: #0d1b2a !important;
}


/* Other sidebar portlets */

#p-lang,
#p-wikibase-otherprojects,
#p-coll-print_export,
#p-wikibase-otherprojects,
#p-variants {
    background-color: #0d1b2a !important;
}


/* Portal headings for all standard Vector menus */

#p-navigation h3,
#p-tb h3,
#p-lang h3,
#p-wikibase-otherprojects h3,
#p-coll-print_export h3,
#p-variants h3 {
    color: #ffffff !important;
}


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

#p-personal {
    background-color: #081522 !important;
    border: 1px solid #1d3a56 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}


/* Personal menu links */

#p-personal li a {
    color: #66b3ff !important;
    text-decoration: none !important;
}


/* Personal menu hover */

#p-personal li a:hover {
    color: #9ed3ff !important;
    text-decoration: none !important;
}


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

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


/* Individual tabs */

#p-cactions li {
    background-color: #0d1b2a !important;

    border: 1px solid #1d3a56 !important;
    border-bottom: none !important;

    margin-right: 2px !important;

    border-radius: 4px 4px 0 0 !important;
}


/* Tab links */

#p-cactions li a {
    background-color: transparent !important;
    color: #66b3ff !important;

    padding: 6px 10px !important;

    text-decoration: none !important;
}


/* Tab hover */

#p-cactions li a:hover {
    background-color: #12304a !important;
    color: #9ed3ff !important;
}


/* Active tab */

#p-cactions li.selected {
    background-color: #12263a !important;
    border-color: #285477 !important;
}


/* Active tab link */

#p-cactions li.selected a {
    color: #ffffff !important;
    font-weight: bold !important;
}


/* =========================================================
   ACTION / DROPDOWN MENUS
   ========================================================= */

/* Dropdown menus */

#p-cactions ul,
#p-personal ul {
    background-color: #0d1b2a !important;
    border-color: #1d3a56 !important;
}


/* Dropdown menu items */

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


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

#p-search {
    background-color: #081522 !important;
    border: 1px solid #1d3a56 !important;
    border-radius: 4px !important;
    padding: 5px !important;
}


/* Search input */

#p-search #searchInput {
    background-color: #0d1b2a !important;
    color: #ffffff !important;

    border: 1px solid #285477 !important;
    border-radius: 3px !important;
}


/* Search input placeholder */

#p-search #searchInput::placeholder {
    color: #9aaec1 !important;
}


/* Search focus */

#p-search #searchInput:focus {
    background-color: #081522 !important;
    border-color: #66b3ff !important;
    box-shadow: 0 0 0 1px #66b3ff !important;
}


/* =========================================================
   MORE / DROPDOWN ARROWS
   ========================================================= */

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


/* =========================================================
   NAVIGATION SEPARATORS
   ========================================================= */

#mw-panel .portal + .portal {
    margin-top: 10px !important;
}


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

#mw-panel .portal .body ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}


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


/* =========================================================
   SPECIAL PAGE / CONTENT NAVIGATION BOXES
   ========================================================= */

/* Navigation boxes created with navbox templates */

.navbox {
    background-color: #0d1b2a !important;
    color: #ffffff !important;

    border: 1px solid #1d3a56 !important;
}


/* Navbox headings */

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

    border-color: #1d3a56 !important;
}


/* Navbox cells */

.navbox td {
    background-color: #0d1b2a !important;
    color: #ffffff !important;

    border-color: #1d3a56 !important;
}


/* Navbox links */

.navbox a {
    color: #66b3ff !important;
}


.navbox a:hover {
    color: #9ed3ff !important;
}


/* =========================================================
   INFOBOX / NAVBOX CONSISTENCY
   ========================================================= */

.infobox,
.navbox {
    border-radius: 4px !important;
}


/* =========================================================
   CONTENT TOC
   ========================================================= */

#toc,
.toc {
    background-color: #0d1b2a !important;
    color: #ffffff !important;

    border: 1px solid #1d3a56 !important;
    border-radius: 4px !important;
}


/* TOC title */

#toc .toctitle,
.toc .toctitle {
    background-color: #12263a !important;
    color: #ffffff !important;

    border-bottom: 1px solid #1d3a56 !important;

    padding: 6px 8px !important;
}


/* TOC links */

#toc a,
.toc a {
    color: #66b3ff !important;
}


#toc a:hover,
.toc a:hover {
    color: #9ed3ff !important;
}


/* =========================================================
   PAGE NAVIGATION / CATEGORY BOXES
   ========================================================= */

#catlinks {
    background-color: #0b1826 !important;
    border: 1px solid #1d3a56 !important;
    border-radius: 4px !important;
    padding: 6px !important;
}


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


#catlinks a:hover {
    color: #9ed3ff !important;
}


/* =========================================================
   HORIZONTAL NAVIGATION BOXES
   ========================================================= */

.mw-parser-output .navbox {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}


/* =========================================================
   MOBILE / COLLAPSED NAVIGATION
   ========================================================= */

@media screen and (max-width: 720px) {

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

    #mw-panel .portal {
        border-color: #1d3a56 !important;
    }

}

.tocnumber {
color: white !important;
}

/* =========================================================
   VECTOR MENU TABS — ASSOCIATED PAGES
   ========================================================= */

/* Tab container */

#left-navigation .vector-menu-tabs {
    background: transparent !important;
    border: none !important;
}


/* Individual tabs */

#left-navigation .vector-menu-tabs .mw-list-item {
    background-color: #0d1b2a !important;
    border: 1px solid #1d3a56 !important;
    border-bottom: none !important;
    margin-right: 3px !important;
    border-radius: 5px 5px 0 0 !important;
}


/* Tab links */

#left-navigation .vector-menu-tabs .mw-list-item a {
    background-color: #0d1b2a !important;
    color: #66b3ff !important;
    padding: 12px !important;
    text-decoration: none !important;
}


/* Hover */

#left-navigation .vector-menu-tabs .mw-list-item:hover,
#left-navigation .vector-menu-tabs .mw-list-item:hover a {
    background-color: #12304a !important;
    color: #9ed3ff !important;
}


/* Selected/current tab */

#left-navigation .vector-menu-tabs .mw-list-item.selected,
#left-navigation .vector-menu-tabs .mw-list-item.selected a {
    background-color: #12263a !important;
    color: #ffffff !important;
}


/* =========================================================
   ASSOCIATED PAGES — PAGE / DISCUSSION
   ========================================================= */

#p-associated-pages {
    background-color: transparent !important;
}


/* Page tab */

#p-associated-pages #ca-nstab-main {
    background-color: #12263a !important;
}


/* Discussion tab */

#p-associated-pages #ca-talk {
    background-color: #0d1b2a !important;
}


/* New discussion link */

#p-associated-pages #ca-talk a.new {
    color: #66b3ff !important;
}


/* =========================================================
   VARIANTS DROPDOWN
   ========================================================= */

#left-navigation #p-variants {
    background-color: #0d1b2a !important;
    border: 1px solid #1d3a56 !important;
    border-radius: 4px !important;
}


/* Variants heading */

#left-navigation #p-variants .vector-menu-heading {
    background-color: #12263a !important;
    color: #ffffff !important;
    padding: 7px 10px !important;
    cursor: pointer !important;
}


/* Variants heading hover */

#left-navigation #p-variants .vector-menu-heading:hover {
    background-color: #12304a !important;
    color: #9ed3ff !important;
}


/* Variants dropdown */

#left-navigation #p-variants .vector-menu-content {
    background-color: #0d1b2a !important;
    border: 1px solid #1d3a56 !important;
}


/* Variants links */

#left-navigation #p-variants .vector-menu-content-list a {
    color: #66b3ff !important;
    background-color: #0d1b2a !important;
}


/* Variants hover */

#left-navigation #p-variants .vector-menu-content-list a:hover {
    background-color: #12304a !important;
    color: #9ed3ff !important;
}


/* =========================================================
   ALL VECTOR MENU HEADINGS
   ========================================================= */

.vector-menu-heading,
.vector-menu-heading-label {
    color: #ffffff !important;
}


/* =========================================================
   ALL VECTOR MENU CONTENT
   ========================================================= */

.vector-menu-content {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
}


/* =========================================================
   ALL VECTOR MENU LINKS
   ========================================================= */

.vector-menu-content a {
    color: #66b3ff !important;
}


.vector-menu-content a:hover {
    color: #9ed3ff !important;
}
Retrieved from "https://wow-forever.wiki/index.php?title=MediaWiki:Vector.css&oldid=16"