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.

/* =================================
   MEDIAWIKI DARK THEME - VECTOR + MINERVA (BLUE VERSION)
   ================================= */

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

/* =================================
   SHARED STYLES (Vector + Minerva)
   ================================= */

#filetoc {
    background-color: #001a3d !important;
    border: 1px solid black;
}

.mw-number-text {
    color: white !important;
}

.mw-body-content .mw-number-text span {
    color: #c3c3c3 !important;
}

.cdx-field:not(.cdx-field--disabled) .cdx-field__help-text {
    color: white !important;
}

.content .thumbcaption, .content figure[typeof~='mw:File/Thumb'] > figcaption, .content figure[typeof~='mw:File/Frame'] > figcaption {
    color: #aed4f9 !important;
}

.toctogglelabel {
    color: #b4d8ff !important;
}

.toc, .toccolours {
    background-color: #161616 !important;
    border: 1px solid #1a4d8d;
}

.tocnumber {
    color: #98d0f1 !important;
}

figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
    border: 1px solid black !important;
}

figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
    border: none !important;
}

figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] {
    border: none !important;
    background-color: #001a55 !important;
    color: white !important;
}

.ve-ce-branchNode-slug, .ve-ce-branchNode-inlineSlug {
    color: black !important;
}

.ve-ui-mwMediaDialog-panel-imageinfo-details {
    color: white !important;
}

.mw-upload-bookletLayout-filePreview {
    background-color: #1a3f85 !important;
    border-color: #1a3f85 !important;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span {
    border-color: #1a3f85 !important;
    box-shadow: 0 0 0 2px #1a3f85 !important;
    outline: 0 !important;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
    background-color: #1a3f85 !important;
    border-color: #1a3f85 !important;
}


.oo-ui-checkboxInputWidget-checkIcon {
    filter: none !important;
}

.oo-ui-toolbar-bar {
    background-color: #1a3674! important;
}

.cdx-button {
    color: white !important;
}

body .ui-dialog .ui-icon-closethick {
    filter: brightness(0) invert(1);
}
.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
    border: none !important;
    border-top: none !important;
}

.ui-widget-header {
    border: none !important;
}

.ui-dialog {
    border: none !important;
    padding: 0 !important;
}

.ui-button .ui-button-text {
    background: linear-gradient(to bottom, #1a3f85, #0d1f52) !important;
    color: white !important;
    border: 1px solid white;
}

.wikiEditor-toolbar-dialog .ui-dialog-buttonpane {
    background: linear-gradient(to bottom, #1a3f85, #0d1f52) !important;
    color: white !important;
}

.ui-dialog .ui-dialog-content {
    background: linear-gradient(to bottom, #1a3f85, #0d1f52) !important;
    color: white !important;
}

body .ui-dialog .ui-widget-header {
    background: linear-gradient(to bottom, #1a3f85, #0d1f52) !important;
    color: white !important;
}

.ui-widget-content {
    color: white !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6) !important;
    background: #1e2d6d url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkEAIAAACY3hF0AAAAd0lEQVR4Ae1OJRYCARD9b04HB9i9AAfA8lZcCy4Fibhk3KlEroA7g5PQvuM+n7bN3W7fJlxJdu/cFEusCVlUMSS2IIEyQcNuThKrYESUILAEL7EIiX3EStbDSVBAz05i8dYTcHbPPQlBpAkWxFEi7vGIx39Akt0JDx8zhdonkHMAAAAASUVORK5CYII=) 50% top repeat-x !important;
}

.wikiEditor-ui-toolbar .booklet > .index > :hover {
    background-color: #2d4d8d !important;
}

.wikiEditor-ui-toolbar .booklet > .index > .current {
    background-color: #2d4d8d !important;
    color: white !important;
}

.wikiEditor-ui-toolbar .page-characters div span {
    color: white !important;
}

.wikiEditor-ui-toolbar .group .label {
    color: white !important;
}

.wikiEditor-ui-toolbar {
    background-color: #0d1829 !important;
}

.oo-ui-toolbar-bar {
    color: white !important;
}

.oo-ui-popupToolGroup-tools { 
    background-color: #2d5175 !important;
}

.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
    background-color: #0d4199 !important;
}

.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
    background-color: #0d2547 !important;
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
    background-color: #27477f !important;
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active, .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-popupToolGroup-handle, .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
    background-color: #0d295f !important;
}

.editOptions {
    background-color: #181818 !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6) !important;
    color: white !important;
}

.diff-deletedline {
    border-color: #8B0000;
}

.diff-deletedline .diffchange {
    background: #8B0000;
}

.diff-addedline {
    border-color: #006400;
}

.diff-addedline .diffchange {
    background: #006400;
}


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

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

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

a:visited {
    color: #5078c5 !important;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !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 #3366cc !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}



td {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.diff-context {
    border-color: #858585 !important;
    background: #858585 !important; 
}

td.diff-context > div {
    color: black !important;
}

td.diff-context {
    color: black !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;
}

/* =================================
   VECTOR SKIN STYLES
   ================================= */

/* 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;
}

.mw-prefs-description {
    color: #babcbd !important;
}

.oo-ui-window-body.mw-mobile-pref-dialog-body .mw-htmlform-field-HTMLInfoField {
    color: #white !important;
}

.oo-ui-menuOptionWidget {
    background: #2a2a2a !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

.oo-ui-labelWidget.oo-ui-inline-help {
    color: #c1c1c1 !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 #3366cc !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: #6699ff !important;
    color: #ffffff !important;
}

/* header */
.header-container, #mw-head,
.vector-header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #444 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !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: #3366cc !important;
    background: #444 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 5px rgba(51, 102, 204, 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;
}

.mw-echo-ui-notificationItemWidget {
    background-color: #1c1c1c !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
    background-color: #121212 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7) !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;
}

/* user menu */
#p-personal,
.vector-user-menu {
    background: #222 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !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;
}

/* footer */
#footer {
    background: #1a1a1a !important;
    border-top: 1px solid #444 !important;
    color: #cccccc !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.5) !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;
}

/* =================================
   MINERVA SKIN STYLES
   ================================= */

/* main minerva elements */
.minerva-header,
.header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #444 !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* minerva content */
#content,
.content,
main.content {
    background: #2a2a2a !important;
    color: #ffffff !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    padding: 4px !important;
}

/* minerva page wrapper */
.page-container,
.minerva-page-container {
    background: #1a1a1a !important;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5) !important;
}

.content .mw-index-pager-list-header, .mw-special-Watchlist .content h4 {
    background-color: #212121 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.mw-pager-tools a, .mw-history-undo a {
    background-color: #1e1e1e !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

/* minerva navigation */
.main-menu-mask,
.navigation-drawer {
    background: rgba(26, 26, 26, 0.95) !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

#mw-mf-page-center {
    background: #1a1a1a !important;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6) !important;
}

.main-menu,
.navigation-drawer .menu {
    background: #222 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

.main-menu h3,
.navigation-drawer h3 {
    background: #333 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #3366cc !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.main-menu li a,
.navigation-drawer li a {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.main-menu li a:hover,
.navigation-drawer li a:hover {
    background: #6699ff !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

/* minerva search */
.minerva-search-form input,
.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;
}

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

/* minerva search suggestions */
.minerva-search-form .search-overlay,
.search-box .search-overlay {
    background: #2a2a2a !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* minerva tabs/actions */
.page-actions-menu,
.minerva-tab-container {
    background: #2a2a2a !important;
    border: 1px solid #555 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.page-actions-menu li,
.minerva-tab-container li {
    background: #2a2a2a !important;
    border-right: 1px solid #555 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.page-actions-menu li.selected,
.minerva-tab-container li.selected {
    background: #444 !important;
    border-bottom: 2px solid #888 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.page-actions-menu li a,
.minerva-tab-container li a {
    color: #ffffff !important;
}

.page-actions-menu li:hover,
.minerva-tab-container li:hover {
    background: #3a3a3a !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

/* minerva footer */
.minerva-footer,
.last-modified-bar {
    background: #1a1a1a !important;
    border-top: 1px solid #444 !important;
    color: #cccccc !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6) !important;
}

/* minerva user menu */
.minerva-user-menu,
.user-links {
    background: #222 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.minerva-user-menu li a,
.user-links li a {
    color: #ffffff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.minerva-user-menu li a:hover,
.user-links 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;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

/* minerva buttons */
.mw-ui-button,
.minerva-button {
    background-color: #3366cc !important;
    color: white !important;
    border: 1px solid #2255aa !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.mw-ui-button:hover,
.minerva-button:hover {
    background-color: #4477dd !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* minerva edit button */
.minerva-icon-edit,
.edit-link {
    background-color: #3366cc !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* minerva page issues */
.page-issues,
.minerva-ambox {
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* minerva toast notifications */
.mw-notification,
.minerva-toast {
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* minerva left menu toggle items */
#mw-mf-page-left ul .toggle-list-item {
    background: #333 !important;
    color: #ffffff !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

#mw-mf-page-left ul .toggle-list-item:hover {
    background: #444 !important;
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.7) !important;
}

/* minerva icons */
.minerva-icon {
    color: #cccccc !important;
    background-color: #a7a7a7 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* toggle list item labels */
.toggle-list-item__label {
    color: #ffffff !important;
}

/* echo notifications toolbar wrapper */
.mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
    background: #111 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

/* unread notifications */
.mw-echo-ui-notificationItemWidget-unread {
    background: #333 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* notification message headers */
.mw-echo-ui-notificationItemWidget-content-message-header {
    color: #ffffff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* minerva mobile specific elements */
.minerva-drawer,
.overlay {
    background: #222 !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

.minerva-page-actions {
    background: #2a2a2a !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.minerva-talk-full-page {
    background: #2a2a2a !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.minerva-history-list {
    background: #2a2a2a !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5) !important;
}

.minerva-watchstar {
    background: #333 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* minerva section headers */
.minerva-section-heading {
    background: #333 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* =================================
   SHARED UI ELEMENTS (Both Skins)
   ================================= */

/* visual editor save dialog */
.ve-ui-mwSaveDialog-options {
    background-color: rgb(50, 50, 50) !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

/* ooui window elements */
.oo-ui-window-body,
.oo-ui-window-head,
.oo-ui-window-foot {
    background-color: rgb(50, 50, 50) !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !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;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

/* ooui button elements */
.oo-ui-buttonElement-button {
    background-color: #0d1f52 !important;
    color: white !important;
    border: 1px solid #2255aa !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* alternative selector for close buttons */
.oo-ui-buttonElement-button.oo-ui-iconElement {
    background-color: black !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

/* visual editor save button */
.ve-ui-toolbar-saveButton {
    background: #3366cc !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* ooui tool titles */
.oo-ui-tool-title {
    color: white !important;
}

.oo-ui-iconElement-icon {
    filter: brightness(0) invert(1);
}

.oo-ui-icon-close {
    filter: brightness(0) invert(1);
}


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

/* search */
#mw-searchoptions {
    background-color: #1e1e1e !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.mw-search-profile-tabs {
    background-color: #181818 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7) !important;
}

.mw-htmlform-submit-buttons {
    background-color: #1e1e1e !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.oo-ui-popupWidget-popup {
    background-color: #1e1e1e !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #1e1e1e !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6) !important;
}

.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
    background-color: #001a55 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}