Foreground.css: Difference between revisions
From Redrock Wiki
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
:root { | |||
--darkBG: #2d3034; /* background */ | |||
--darkFG: #181a1b; /* foreground */ | |||
} | |||
hr { | hr { | ||
clear: left; | clear: left; | ||
| Line 14: | Line 19: | ||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
body, #content, #mw-content-subtitle, #bodyContent, #catlinks { | body, #content, #mw-content-subtitle, #bodyContent, #catlinks { | ||
background-color: | background-color: var(--darkBG); | ||
.mw-redirectedfrom, .center, #mw-clearyourcache { | .mw-redirectedfrom, .center, #mw-clearyourcache { | ||
color: white; | color: white; | ||
| Line 41: | Line 46: | ||
.guideTabs { | .guideTabs { | ||
color: white; | color: white; | ||
border: 1px solid | border: 1px solid var(--darkBG); | ||
background: | background: var(--darkFG); | ||
a {color: #66b1fa !important} | a {color: #66b1fa !important} | ||
a:hover {color: #4894e0 !important} | a:hover {color: #4894e0 !important} | ||
} | } | ||
.tcWidgetPage { | .tcWidgetPage { | ||
background: | background: var(--darkFG); | ||
border: 1px solid | border: 1px solid var(--darkBG); | ||
.pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible { color: white; } | .pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible { color: white; } | ||
th, td { | th, td { | ||
background-color: | background-color: var(--darkBG) !important; | ||
background: | background: var(--darkBG); | ||
} | } | ||
a {color: #66b1fa !important} | a {color: #66b1fa !important} | ||
| Line 62: | Line 67: | ||
h2 { color: #C73149 !important; } | h2 { color: #C73149 !important; } | ||
h2:hover { color: #A41D33 !important; } | h2:hover { color: #A41D33 !important; } | ||
border: 1px solid | border: 1px solid var(--darkBG); | ||
} | } | ||
.mw-highlight { | .mw-highlight { | ||
Revision as of 15:17, 16 April 2026
:root {
--darkBG: #2d3034; /* background */
--darkFG: #181a1b; /* foreground */
}
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 {
background-color: var(--darkBG);
.mw-redirectedfrom, .center, #mw-clearyourcache {
color: white;
}
}
#catlinks, #footer-privacy, #footer-about, #footer-disclaimers, #poweredby, .tcAnnouncement, #content, #mw-content-subtitle {
a {color: #66b1fa;}
a:hover {color: #4894e0 !important}
.label {color: white;}
}
.blue { /* not yet updated */
background-color: #D9EDF7;
border: 1px solid #BCE8F1;
color:#31708F;
}
.green {
background-color: #293c17;
border: 1px solid #8bc48c;
color:#8bc48c;
}
.red {
background-color: #A93636;;
border: 1px solid #EBCCD1;
color:#F4BEBD;;
}
.guideTabs {
color: white;
border: 1px solid var(--darkBG);
background: var(--darkFG);
a {color: #66b1fa !important}
a:hover {color: #4894e0 !important}
}
.tcWidgetPage {
background: var(--darkFG);
border: 1px solid var(--darkBG);
.pageTitle, p, dd, ul, li, h2, h3, td, th, .collapsible { color: white; }
th, td {
background-color: var(--darkBG) !important;
background: var(--darkBG);
}
a {color: #66b1fa !important}
a:hover {color: #4894e0 !important}
.mw-collapsible-toggle:hover { background-color: unset; }
.mw-collapsible-text { color: #66b1fa !important }
}
.categoryBox {
h2 { color: #C73149 !important; }
h2:hover { color: #A41D33 !important; }
border: 1px solid var(--darkBG);
}
.mw-highlight {
filter: invert(1);
background-color: #ececec;
}
}
/* Link Color */
a {color: #0645ad}
/* Hover Color */
a:hover, a:focus {color: #032356;}
/* Hide titles */
.title { display: none; }
#tagline { display: none; }
#searchInput {
width: 500px;
}
nav.top-bar,
.top-bar.expanded .title-area {
background: #8D182B;
}
.mw-collapsible-toggle:hover {
background-color:white;
}
.mw-collapsible-toggle:focus {
background-color:white;
}
#navwrapper {
background: #8D182B;
}
ul#top-bar-left li,
ul#top-bar-left li a
{
background: #8D182B;
}
ul#top-bar-right li,
ul#top-bar-right li a {
background: #8D182B;
}
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: #8D182B;
}