MediaWiki:Common.css: Difference between revisions

Revision as of 02:44, 20 August 2025

/* =================================
   MEDIAWIKI DARK THEME - VECTOR + MINERVA
   ================================= */

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

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

/* main background and text */
body {
    background: #1a1a1a !important;
    color: #ffffff !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;
}

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

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

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

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

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

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

/* main minerva elements */
.minerva-header,
.header {
    background: #1a1a1a !important;
    border-bottom: 1px solid #444 !important;
}

/* minerva content */
#content,
.content,
main.content {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

/* minerva page wrapper */
.page-container,
.minerva-page-container {
    background: #1a1a1a !important;
}

/* minerva navigation */
.main-menu-mask,
.navigation-drawer {
    background: rgba(26, 26, 26, 0.95) !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 #cc3333 !important;
}

.main-menu li a,
.navigation-drawer li a {
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
}

.main-menu li a:hover,
.navigation-drawer li a:hover {
    background: #ff6666 !important;
    color: #ffffff !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: #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;
}

/* minerva tabs/actions */
.page-actions-menu,
.minerva-tab-container {
    background: #2a2a2a !important;
    border: 1px solid #555 !important;
}

.page-actions-menu li,
.minerva-tab-container li {
    background: #2a2a2a !important;
    border-right: 1px solid #555 !important;
}

.page-actions-menu li.selected,
.minerva-tab-container li.selected {
    background: #444 !important;
    border-bottom: 2px solid #888 !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;
}

/* minerva footer */
.minerva-footer,
.last-modified-bar {
    background: #1a1a1a !important;
    border-top: 1px solid #444 !important;
    color: #cccccc !important;
}

/* minerva user menu */
.minerva-user-menu,
.user-links {
    background: transparent !important;
}

.minerva-user-menu li a,
.user-links li a {
    color: #ffffff !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;
}

/* minerva buttons */
.mw-ui-button,
.minerva-button {
    background-color: #cc3333 !important;
    color: white !important;
    border: 1px solid #aa2222 !important;
}

.mw-ui-button:hover,
.minerva-button:hover {
    background-color: #dd4444 !important;
}

/* minerva edit button */
.minerva-icon-edit,
.edit-link {
    background-color: #cc3333 !important;
    border-radius: 4px !important;
}

/* minerva page issues */
.page-issues,
.minerva-ambox {
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

/* minerva toast notifications */
.mw-notification,
.minerva-toast {
    background: #333 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

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

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

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

/* visual editor save button */
.ve-ui-toolbar-saveButton {
    background: #cc3333 !important;
}

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

/* ooui close icon - remove filter, keep it black */
.oo-ui-iconElement-icon.oo-ui-icon-close {
    filter: none !important;
}

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

/* search */
#mw-searchoptions {
    background-color: #1e1e1e !important;
}

.mw-search-profile-tabs {
    background-color: #181818 !important;
}

.mw-htmlform-submit-buttons {
    background-color: #1e1e1e !important;
}

.oo-ui-popupWidget-popup {
    background-color: #1e1e1e !important;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #1e1e1e !important;
}

.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
    background-color: #380000 !important;
}