MediaWiki:DarkTheme.css

From Zombie Panic! Official Wiki
Revision as of 09:53, 11 June 2025 by Wuffesan (talk | contribs)
Jump to navigation Jump to search

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.
/* Color adjust for dark theme */
:root {
    --color-base: white;
}


/* Header */
#mw-page-base {
    background-color: #252525;
    background-image: linear-gradient(to bottom, var(--background-color-base, #211a1a) 50%, #252525 100%);
    background-position: bottom left;
    height: 5em;
}

/* Side Panel */
body {
    background-color: #252525;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
    color: #d93c3c;
}
.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
    color: #e76b6b;
}

/* Searchbar */
.vector-search-box-input {
    background-color: rgb(57 56 56 / 50%);
    color: #dfe0e1;
    border: 1px solid #891b1b;
}



/* Main Body */
.mw-body, .parsoid-body {
    background-color: var(--background-color-base, #252525);
    color: var(--color-base, #d1d1d1);
    direction: ltr;
    padding: 1em;
}

.mw-body {
    border: 1px solid #790f0f;
}

/* Header Text */
.mw-heading, h1, h2, h3, h4, h5, h6 {
    color: var(--color-emphasized, #b90009);
    font-weight: bold;
    margin: 0;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    display: flow-root;
    word-break: break-word;
}

/* New Links */
a.new {
    color: #48b8db;
}
a.new:after {
    content: '';
    background-image: url(/resources/assets/link_new.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.67em;
    padding-right: 1em;
    background-position-x: 2px;
    background-position-y: 0px;
}

/* Gallery Item */
li.gallerybox div.thumb {
    background-color: #510d0d57;
    border: 1px solid #4d1c1c;
}

/* Header Nav */
.vector-menu-tabs-legacy li {
    background-image: linear-gradient(to top, #9f4242 0, #4b060638 1px, #e5777714 100%);
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom, rgb(167 215 249 / 0%) 0, #9f4242 100%);
}

.vector-menu-tabs-legacy .selected {
	background: none;
    background-image: linear-gradient(to top, #ff0505 0, #9b1c1c94 1px, #fbe6e614 100%);
}

.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
    color: #ffffff;
    text-decoration: none;
}

.vector-menu-tabs-legacy li a {
    color: #7badff;
}

.vector-menu-dropdown .vector-menu-heading {
    color: #acc7dd;
}

.vector-menu-dropdown .vector-menu-content {
    background-color: var(--background-color-base, #373434cf);
    border: 1px solid var(--border-color-base, #37131399);
    backdrop-filter: blur(10px);
}

.suggestions-results {
    background-color: #37343475;
    border: 1px solid var(--border-color-base, #37131399);
    backdrop-filter: blur(10px);
}

.suggestions-result {
	color: #d5d5d5;
}

.vector-menu-dropdown .mw-list-item a {
    color: #99bfff;
}

.suggestions-special {
    border: 1px solid #5d2424;
    backdrop-filter: blur(10px);
    background-color: var(--background-color-base, #373434cf);
}

.suggestions-special .special-label {
    color: #b97d7d;
    text-align: left;
}

.suggestions-special .special-query {
    color: #ffffff;
    font-style: italic;
    text-align: left;
}

/* <pre> */
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
    box-shadow: inset 2.75em 0 0 #391b1b;
    background-color: rgb(75 75 75);
    color: #ade8ff;
}

pre, code, .mw-code {
    background-color: #1a1a1a;
    color: #8fbae5;
    border: 1px solid var(--border-color-muted, #8f2f2f);
}

/* TOC */
.toctogglelabel {
    color: #60b3ef;
    cursor: pointer;
}

/* Footer links */
.catlinks {
    background-color: #1a1a1a;
}

/* Infobox link color */
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
    color: #79d9ff;
}