MediaWiki:Common.css
Appearance
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.
/* CSS placed here will be applied to all skins */
/* light mode */
:root, .skin-theme-clientpref-day {
--vw-bg-page: #f8f9fa;
--vw-bg-surface: #ffffff;
--vw-bg-subtle: #d2d4d8;
--vw-bg-subtler: #f8f9fa;
--vw-accent: #8B3347;
--vw-accent-subtle: #f5dde2;
--vw-gold: #8a7633;
--vw-gold-subtle: #f4f0dc;
--vw-green: #478a33;
--vw-green-subtle: #e0f4dc;
--vw-teal: #338a76;
--vw-teal-subtle: #dcf4f0;
--vw-blue: #33478a;
--vw-blue-subtle: #dce0f4;
--vw-violet: #76338A;
--vw-violet-subtle: #f0dcf4;
}
/* dark mode */
.skin-theme-clientpref-night {
--vw-bg-page: #101418;
--vw-bg-surface: #1e2227;
--vw-bg-subtle: #2a2f36;
--vw-bg-subtler: #101418;
--vw-accent: #F2A0B2;
--vw-accent-subtle: #3d1e26;
--vw-gold: #f2e0a1;
--vw-gold-subtle: #3e351e;
--vw-green: #f2e0a1;
--vw-green-subtle: #263e1e;
--vw-teal: #a1f2e0;
--vw-teal-subtle: #1e3e35;
--vw-blue: #a1b3f2;
--vw-blue-subtle: #1e263e;
--vw-violet: #e0a1f2;
--vw-violet-subtle: #351e3e;
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os {
--vw-bg-page: #101418;
--vw-bg-surface: #1e2227;
--vw-bg-subtle: #2a2f36;
--vw-bg-subtler: #101418;
--vw-accent: #F2A0B2;
--vw-accent-subtle: #3d1e26;
--vw-gold: #f2e0a1;
--vw-gold-subtle: #3e351e;
--vw-green: #f2e0a1;
--vw-green-subtle: #263e1e;
--vw-teal: #a1f2e0;
--vw-teal-subtle: #1e3e35;
--vw-blue: #a1b3f2;
--vw-blue-subtle: #1e263e;
--vw-violet: #e0a1f2;
--vw-violet-subtle: #351e3e;
}
}
.skin-theme-clientpref-night .mw-logo-icon {
filter: invert(1);
}
@media ( prefers-color-scheme: dark ) {
.skin-theme-clientpref-os .mw-logo-icon {
filter: invert(1);
}
}
#footer-info li, #footer-places li {
font-size: 14px;
}
.mw-logo-wordmark {
font-size: 1.5rem;
color: maroon;
}
.hatnote {
font-style: italic;
padding-left: 1.5em;
margin-bottom: 0.5em;
}
.infobox {
width: 300px;
float: right;
margin: 0 0 1em 1em;
}
@media (max-width: 480px) {
.infobox {
width: 100% !important;
float: none !important;
margin: 0 0 1em 0;
}
}
.page-Main_Page .firstHeading {
display: none;
}
#welcome-box {
border: 2px solid var(--vw-accent);
background-color: var(--vw-accent-subtle);
}
#welcome-box h1 {
border-bottom-color: var(--vw-accent);
width: 50%;
}
#events-box, #bulletin-box {
flex: 1;
min-width: 280px;
}
#events-box {
border: 2px solid var(--vw-blue);
background-color: var(--vw-blue-subtle);
}
#events-box h2 { border-bottom-color: var(--vw-blue); }
#bulletin-box {
border: 2px solid var(--vw-green);
background-color: var(--vw-green-subtle);
}
#bulletin-box h2 { border-bottom-color: var(--vw-green); }
@media (max-width: 600px) {
#welcome-box h1 { width: 100%; }
}
.documentation .mw-editsection {
display: none;
}