MediaWiki:Common.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;
}

/* footer last modified text */
.footer-info-lastmod {
    color: rgb(175, 175, 175) !important;
}

/* footer items override */
.mw-footer li,
#footer-info li {
    color: rgb(175, 175, 175) !important;
}

/* visual editor save dialog */
.ve-ui-mwSaveDialog-options {
    background-color: rgb(50, 50, 50) !important;
}

/* ooui window elements */
.oo-ui-window-body,
.oo-ui-window-head,
.oo-ui-window-foot {
    background-color: rgb(50, 50, 50) !important;
}

/* edit page copyright warning */
#editpage-copywarn {
    color: white !important;
    background: rgba(0, 0, 0, 0.75) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* ooui button elements */
.oo-ui-buttonElement-button {
    background-color: #cc3333 !important;
    color: white !important;
    border: 1px solid #aa2222 !important;
}

/* close button specifically gets black background */
.oo-ui-buttonElement-button:has(.oo-ui-icon-close),
.oo-ui-buttonElement-button .oo-ui-icon-close {
    background-color: black !important;
}

/* alternative selector for close buttons */
.oo-ui-buttonElement-button.oo-ui-iconElement {
    background-color: black !important;
}

/* ooui close icon - bright red filter */
.oo-ui-iconElement-icon.oo-ui-icon-close {
    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%) !important;
}

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