MediaWiki:Vector.css

/* Das folgende CSS wird für Benutzer der Vector-Benutzeroberfläche geladen. */
/*****************************************************
 * Angepasstes Farb-Theme für die Vector-Skin
 *****************************************************/

/* Allgemeiner Seitenhintergrund und Schriftfarbe */
body {
    background-color: #2b2e38;
    color: #dce1e7; /* Standard-Textfarbe */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0; /* MediaWiki überschreibt das i.d.R. sowieso */
}

/* Links */
a, a:visited {
    color: #53a7fd;
    text-decoration: none;
}
a:hover, a:focus {
    color: #53fd7c; 
    text-decoration: underline;
}

/* Kopfbereich (Vector 2010) */
#mw-head, 
#p-personal,
#left-navigation,
#right-navigation {
    background-color: #242731;
    border-bottom: 1px solid #3e414d;
}

/* Kopfbereich (Vector 2022) -- nur falls du Vector 2022 benutzt
   (entferne diesen Block, wenn du den alten Vector verwendest!) */
.skin-vector-2022-navigation, 
.skin-vector-2022-brand-bar, 
.skin-vector-2022-main-menu-heading, 
.skin-vector-2022-vector-menu-checkbox {
    background-color: #242731;
    border-color: #3e414d;
    color: #dce1e7;
}

/* Suchleiste (altes Vector) */
#p-search form,
#simpleSearch input#searchInput,
#simpleSearch #searchButton {
    background-color: #393c48;
    border: 1px solid #3e414d;
    color: #dce1e7;
}

/* Suchleiste (Vector 2022) */
.vector-search-box, 
.vector-search-box input, 
.vector-search-box .cdx-text-input {
    background-color: #393c48;
    border: 1px solid #3e414d;
    color: #dce1e7;
}

/* Seiteninhaltsbereich */
#content,
#mw-content-text,
.mw-page-container, 
.page {
    background-color: #2f3240;
    color: #bfc4ce;
    border: 1px solid #3e414d; /* ggf. für Container */
    padding: 1rem;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
    color: #e4e4e4;
    margin-top: 1em;
}

/* Seitlicher Navigationsbereich (altes Vector) */
#mw-panel,
.portlet,
#p-logo, 
#p-navigation, 
#p-tb, 
#p-cactions, 
#p-personal ul {
    background-color: #242731;
    border: none;
    color: #dce1e7;
}

/* Menü-Tabs (altes Vector) */
#p-cactions ul li.selected,
#p-cactions ul li.selected a {
    background-color: #2f3240;
    border: 1px solid #3e414d;
    color: #e4e4e4 !important;
}

/* Menü-Tabs (Vector 2022) */
.vector-menu-tabs > ul > li.selected a,
.skin-vector-2022-menu-dropdown > div > ul > li.selected > a {
    background-color: #2f3240;
    border: 1px solid #3e414d;
    color: #e4e4e4 !important;
}

/* Tabellen & Listen-Hover-Effekte */
table.wikitable tr:hover,
ul li:hover,
ol li:hover {
    background-color: #393c48;
}

/* Linkfarbe in Tabellen nicht ändern */
table.wikitable a {
    color: #53a7fd;
}
table.wikitable a:hover {
    color: #53fd7c;
}

/* Footer */
#footer,
#mw-footer,
.footer,
.skin-vector-2022-footer {
    background-color: #242731;
    color: #999;
    border-top: 1px solid #3e414d;
    padding: 10px;
}

/* Formulareingaben */
input[type="text"],
input[type="search"],
input[type="password"],
textarea {
    background-color: #393c48;
    border: 1px solid #3e414d;
    color: #dce1e7;
}

/* Buttons (allgemein) */
button,
input[type="submit"],
input[type="button"] {
    background-color: #53a7fd;
    border: 1px solid #3e414d;
    color: #ffffff;
    cursor: pointer;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #53fd7c;
    color: #242731;
}

/* Kleinere Details, Platzhalter-Farbe etc. */
::-webkit-input-placeholder {
    color: #cccccc;
}
:-moz-placeholder {
    color: #cccccc;
}
::-moz-placeholder {
    color: #cccccc;
}
:-ms-input-placeholder {
    color: #cccccc;
}

/*********************************
 * 1) Haupt-Content dunkel färben
 *********************************/
.skin-vector .mw-content-ltr,
.skin-vector .mw-parser-output,
.skin-vector .mw-body,
.skin-vector #content,
.skin-vector .mw-content-text {
    background-color: #2f3240 !important;
    color: #bfc4ce !important; 
}

/*********************************
 * 2) Inhaltsverzeichnis (TOC)
 *********************************/
.mw-parser-output #toc,
.mw-parser-output .toc {
    background-color: #2f3240 !important;
    color: #bfc4ce !important;
    border: 1px solid #3e414d !important;
}
.mw-parser-output #toc a,
.mw-parser-output .toc a {
    color: #53a7fd !important; 
    text-decoration: none;
}
.mw-parser-output #toc a:hover,
.mw-parser-output .toc a:hover {
    color: #53fd7c !important;
}

/********************************************
 * 3) Tabellen, Boxen, Infokästen im Artikel
 ********************************************/
.mw-parser-output table,
.mw-parser-output table th,
.mw-parser-output table td {
    background-color: #2f3240 !important;
    border: 1px solid #3e414d !important;
    color: #bfc4ce !important;
}
.mw-parser-output table.wikitable>caption {
    background-color: #2f3240 !important;
    color: #bfc4ce !important;
}

/****************************************************
 * 4) Weitere Kleinigkeiten: Code-Blöcke, Pre-Text...
 ****************************************************/
.mw-parser-output pre,
.mw-parser-output code,
.mw-parser-output tt {
    background-color: #393c48 !important;
    color: #eeeeee !important;
    border: 1px solid #3e414d !important;
}

#footer, 
.skin-vector .mw-footer, 
.skin-vector-2022-footer {
  background-color: #242731 !important;
  border-top: 1px solid #3e414d !important;
  color: #999;
}

.mw-specialpage-summary, 
.mw-specialpage-summary ~ div {
  background-color: #2f3240 !important;
  color: #bfc4ce !important;
}