MediaWiki:Vector.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* global transitions */
* {
    transition: all 0.3s ease !important;
}

/* main background and text */
body {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* content area */
#content,
.mw-body {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    color: #ffffff !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* sidebar */
#mw-panel,
.vector-menu-portal {
    background: #222 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

#mw-panel .portal h3,
.vector-menu-portal h3 {
    background: #333 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #cc3333 !important;
}

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

#mw-panel .portal .body li a:hover,
.vector-menu-portal .body li a:hover {
    background: #ff6666 !important;
    color: #ffffff !important;
}

/* header */
#mw-head,
.vector-header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #444 !important;
}

/* search box */
#searchInput,
.vector-search-box-input {
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

#searchInput:focus,
.vector-search-box-input:focus {
    border-color: #cc3333 !important;
    background: #444 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 5px rgba(204, 51, 51, 0.3) !important;
}

/* tabs */
#p-views li,
#p-cactions li,
.vector-menu-tabs li {
    background: #2a2a2a !important;
    border: 1px solid #555 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* selected tab */
#p-views li.selected,
#p-cactions li.selected,
.vector-menu-tabs li.selected {
    background: #444 !important;
    border-bottom: 2px solid #888 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* remove default tab styling */
.vector-menu-tabs, 
.vector-menu-tabs a, 
#mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none !important;
}

.vector-menu-tabs-legacy li {
    background-image: none !important;
    background: #2a2a2a !important;
}

.vector-menu-tabs-legacy li.selected {
    background: #444 !important;
}

#p-views li a,
#p-cactions li a,
.vector-menu-tabs li a {
    color: #ffffff !important;
}

#p-views li:hover,
#p-cactions li:hover,
.vector-menu-tabs li:hover {
    background: #3a3a3a !important;
}

/* don't change selected tab on hover */
#p-views li.selected:hover,
#p-cactions li.selected:hover,
.vector-menu-tabs li.selected:hover {
    background: #444 !important;
}

/* links */
a {
    color: #ff9999 !important;
}

a:hover {
    color: #ffffff !important;
}

a:visited {
    color: #ff7777 !important;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
}

/* user menu */
#p-personal,
.vector-user-menu {
    background: transparent !important;
}

#p-personal li a,
.vector-user-menu li a {
    color: #ffffff !important;
}

#p-personal li a:hover,
.vector-user-menu li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.3) !important;
}

/* tables */
table {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6) !important;
}

th {
    background: #333 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #cc3333 !important;
}

td {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
}

/* code blocks */
pre, code {
    background: #1a1a1a !important;
    border: 1px solid #444 !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

/* footer */
#footer {
    background: #1a1a1a !important;
    border-top: 1px solid #444 !important;
    color: #cccccc !important;
}

/* hide not logged in text */
#pt-anonuserpage {
    display: none !important;
}