MediaWiki:Foreground.css
From Redrock Wiki
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.
:root {
--darkBG: #2d3034; /* background */
--darkFG: #181a1b; /* foreground */
--darkA: #66b1fa
--redrockRed: #610215;
}
hr {
clear: left;
}
.mw-ui-button {
color: grey;
}
#content { background-color: #eeeeee; }
#bodyContent { background-color: #eeeeee; }
#catlinks { background-color: #eeeeee; }
body { background-color: #eeeeee; }
@media (prefers-color-scheme: dark) {
body, #content, #mw-content-subtitle, #bodyContent, #catlinks, #toc {
background-color: var(--darkBG);
.mw-redirectedfrom, #mw-content-text, .mw-specialpagesgroup, #toc {
color: white;
}
}
#catlinks, #footer-privacy, #footer-about, #footer-disclaimers, #poweredby, .tcAnnouncement, #content, #mw-content-subtitle, .guideTabs, .tcWidgetPage {
a {color: var(--darkA) !important}
.label {color: white !important;}
}
.tcAnnouncement {
filter: brightness(0.6) saturate(1.5) contrast(2.8) invert(0.1);
}
.guideTabs {
border-color: var(--darkBG);
background: var(--darkFG);
}
.tcWidgetPage {
background: var(--darkFG);
border-color: var(--darkBG);
.pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible, caption { color: white; }
th, td {
background-color: var(--darkBG) !important;
background: var(--darkBG);
border-color: #a2a9b1 !important;
}
.mw-collapsible-toggle:hover { background-color: unset; }
.mw-collapsible-text { color: var(--darkA) !important }
}
.categoryBox {
h2 { color: #C73149; }
border: 1px solid var(--darkBG);
hr { border-color: var(--darkBG); }
}
.mw-highlight {
filter: invert(1);
color: black;
background-color: #ececec;
}
}
/* Link Color */
a {color: #0645ad}
/* Hover Color */
a:hover, a:focus {filter: brightness(60%);}
/* Hide titles */
.title { display: none; }
#tagline { display: none; }
#searchInput {
width: 500px;
}
nav.top-bar,
.top-bar.expanded .title-area {
background: var(--redrockRed);
}
.mw-collapsible-toggle:hover {
background-color:white;
}
.mw-collapsible-toggle:focus {
background-color:white;
}
#navwrapper {
background: var(--redrockRed);
}
ul#top-bar-left li,
ul#top-bar-left li a
{
background: var(--redrockRed);
}
ul#top-bar-right li,
ul#top-bar-right li a {
background: var(--redrockRed);
}
ul#top-bar-left li:hover,
ul#top-bar-left li a:hover,
ul#top-bar-right li:hover:not(.has-form),
ul#top-bar-right li a:hover {
background: #E5E5E5;
color: var(--redrockRed);
}