MediaWiki:Common.css

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 */

/* 1. Top Header Bar */
.header-container.header-chrome {
    background-color: #7D4698 !important;
    border-bottom: 2px solid #66397c;
}

/* 2. Header Icons & Logo (Make them white to contrast with purple) */
.header-container.header-chrome .mw-ui-icon, 
.header-container.header-chrome .branding-box h1,
.header-container.header-chrome .search-box .search {
    filter: brightness(0) invert(1) !important;
}

/* 3. The Slide-out Side Menu (Drawer) */
/* This colors the header of the slide-out menu */
.navigation-drawer .drawer-header {
    background-color: #7D4698 !important;
}

/* Optional: Light purple tint for the menu body to match */
.navigation-drawer {
    background-color: #f9f5fa !important;
}

/* 4. The Footer Area */
.footer {
    background-color: #7D4698 !important;
    color: #ffffff !important;
    padding: 1.5em 1em;
}

/* Ensure links in the footer are readable (white/light gray) */
.footer a, .footer li {
    color: #ffffff !important;
}

/* --- Body Link Color Customization --- */

/* Standard links in the page content */
#bodyContent a:not(.new) {
    color: #7D4698 !important;
}

/* Visited links (slightly darker or desaturated purple to show history) */
#bodyContent a:not(.new):visited {
    color: #5a326e !important;
}

/* Hover state (optional: adds an underline or brightens color) */
#bodyContent a:not(.new):hover {
    color: #9b59bc !important;
    text-decoration: underline;
}

/* Keep "Red Links" (pages that don't exist) red so editors can find them */
#bodyContent a.new {
    color: #ba0000;
}