MediaWiki:Common.css: Difference between revisions

From WikiMedia i11

Created page with "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..."
 
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* --- 1. GLOBAL BRANDING & LINKS --- */
/* Primary Brand Color: #7D4698 | Darker: #66397c | Lighter: #9b59bc */


/* 1. Top Header Bar */
/* Body Links */
.header-container.header-chrome {
#mw-content-text a:not(.new), .mw-parser-output a:not(.new), a.external {
     background-color: #7D4698 !important;
    color: #7D4698 !important;
     border-bottom: 2px solid #66397c;
}
#mw-content-text a:not(.new):visited, .mw-parser-output a:not(.new):visited {
     color: #5a326e !important;
}
#mw-content-text a:not(.new):hover, .mw-parser-output a:not(.new):hover {
    color: #9b59bc !important;
     text-decoration: underline !important;
}
}


/* 2. Header Icons & Logo (Make them white to contrast with purple) */
/* Sidebar & Navigation Links */
.header-container.header-chrome .mw-ui-icon,  
.medik-sidebar a, #mw-navigation a, .nav-link, .sidebar-inner a, .medik-sidebar .text-muted, #mw-navigation .text-muted {
.header-container.header-chrome .branding-box h1,
    color: #7D4698 !important;
.header-container.header-chrome .search-box .search {
}
     filter: brightness(0) invert(1) !important;
.medik-sidebar a:hover, #mw-navigation a:hover, .nav-link:hover {
    color: #66397c !important;
    text-decoration: underline !important;
}
.medik-sidebar-section-title, #mw-navigation h3 {
     color: #7D4698 !important;
    font-weight: bold;
}
}


/* 3. The Slide-out Side Menu (Drawer) */
/* Tabs & Buttons */
/* This colors the header of the slide-out menu */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
.navigation-drawer .drawer-header {
    color: #7D4698 !important;
    border-top: 3px solid #7D4698 !important;
}
.btn-primary, #searchform .btn, #wpSave, #wpPreview, #wpDiff {
     background-color: #7D4698 !important;
     background-color: #7D4698 !important;
    border-color: #7D4698 !important;
    color: white !important;
}
}
.btn-primary:hover, #wpSave:hover, #wpPreview:hover, #wpDiff:hover {
    background-color: #66397c !important;
}
/* --- 2. INTERFACE BOXES (The "Blue" Overrides) --- */


/* Optional: Light purple tint for the menu body to match */
/* This targets the blue notices in Medik/Bootstrap */
.navigation-drawer {
.alert, .alert-info, .mw-message-box, .mw-message-box-info, .mw-message-box-notice, .mw-editinginterface .mw-content-ltr {
     background-color: #f9f5fa !important;
     background-color: #f9f5fa !important;
    color: #333 !important;
    border: 1px solid #7D4698 !important;
    border-left-width: 5px !important;
}
}


/* 4. The Footer Area */
/* Links inside notice boxes */
.footer {
.alert a, .mw-message-box a, .mw-message-box strong {
     background-color: #7D4698 !important;
     color: #7D4698 !important;
     color: #ffffff !important;
     font-weight: bold;
    padding: 1.5em 1em;
}
}


/* Ensure links in the footer are readable (white/light gray) */
/* Code Preview Area */
.footer a, .footer li {
.mw-content-ltr.mw-highlight-lines, pre, .mw-code {
     color: #ffffff !important;
    background-color: #fdfbff !important;
    border: 1px solid #e2d1e9 !important;
     color: #333 !important;
}
}


/* --- Body Link Color Customization --- */
/* --- 3. EDITOR & TOOLS --- */


/* Standard links in the page content */
#wpTextbox1 { border: 1px solid #7D4698 !important; }
#bodyContent a:not(.new) {
#wpTextbox1:focus { outline: 2px solid #7D4698 !important; }
     color: #7D4698 !important;
 
#toolbar, .editOptions {
     background-color: #f3e5f5 !important;
    border: 1px solid #7D4698 !important;
}
}


/* Visited links (slightly darker or desaturated purple to show history) */
/* Table of Contents */
#bodyContent a:not(.new):visited {
.toc, .mw-toc, #toc {
     color: #5a326e !important;
    background-color: #f9f5fa !important;
    border: 1px solid #7D4698 !important;
    padding: 10px !important;
}
.toc h2, .mw-toc h2 {
     color: #7D4698 !important;
    border-bottom: 1px solid #e2d1e9 !important;
}
}


/* Hover state (optional: adds an underline or brightens color) */
/* --- 4. FOOTER --- */
#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 */
#footer {
#bodyContent a.new {
    background-color: #7D4698 !important;
     color: #ba0000;
     color: #ffffff !important;
    padding: 2rem 1rem !important;
    margin-top: 2rem;
}
}
#footer a, .footer-places li { color: #ffffff !important; }
#footer a:hover { color: #e2d1e9 !important; }

Latest revision as of 23:41, 15 January 2026

/* --- 1. GLOBAL BRANDING & LINKS --- */
/* Primary Brand Color: #7D4698 | Darker: #66397c | Lighter: #9b59bc */

/* Body Links */
#mw-content-text a:not(.new), .mw-parser-output a:not(.new), a.external {
    color: #7D4698 !important;
}
#mw-content-text a:not(.new):visited, .mw-parser-output a:not(.new):visited {
    color: #5a326e !important;
}
#mw-content-text a:not(.new):hover, .mw-parser-output a:not(.new):hover {
    color: #9b59bc !important;
    text-decoration: underline !important;
}

/* Sidebar & Navigation Links */
.medik-sidebar a, #mw-navigation a, .nav-link, .sidebar-inner a, .medik-sidebar .text-muted, #mw-navigation .text-muted {
    color: #7D4698 !important;
}
.medik-sidebar a:hover, #mw-navigation a:hover, .nav-link:hover {
    color: #66397c !important;
    text-decoration: underline !important;
}
.medik-sidebar-section-title, #mw-navigation h3 {
    color: #7D4698 !important;
    font-weight: bold;
}

/* Tabs & Buttons */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: #7D4698 !important;
    border-top: 3px solid #7D4698 !important;
}
.btn-primary, #searchform .btn, #wpSave, #wpPreview, #wpDiff {
    background-color: #7D4698 !important;
    border-color: #7D4698 !important;
    color: white !important;
}
.btn-primary:hover, #wpSave:hover, #wpPreview:hover, #wpDiff:hover {
    background-color: #66397c !important;
}

/* --- 2. INTERFACE BOXES (The "Blue" Overrides) --- */

/* This targets the blue notices in Medik/Bootstrap */
.alert, .alert-info, .mw-message-box, .mw-message-box-info, .mw-message-box-notice, .mw-editinginterface .mw-content-ltr {
    background-color: #f9f5fa !important;
    color: #333 !important;
    border: 1px solid #7D4698 !important;
    border-left-width: 5px !important;
}

/* Links inside notice boxes */
.alert a, .mw-message-box a, .mw-message-box strong {
    color: #7D4698 !important;
    font-weight: bold;
}

/* Code Preview Area */
.mw-content-ltr.mw-highlight-lines, pre, .mw-code {
    background-color: #fdfbff !important;
    border: 1px solid #e2d1e9 !important;
    color: #333 !important;
}

/* --- 3. EDITOR & TOOLS --- */

#wpTextbox1 { border: 1px solid #7D4698 !important; }
#wpTextbox1:focus { outline: 2px solid #7D4698 !important; }

#toolbar, .editOptions {
    background-color: #f3e5f5 !important;
    border: 1px solid #7D4698 !important;
}

/* Table of Contents */
.toc, .mw-toc, #toc {
    background-color: #f9f5fa !important;
    border: 1px solid #7D4698 !important;
    padding: 10px !important;
}
.toc h2, .mw-toc h2 {
    color: #7D4698 !important;
    border-bottom: 1px solid #e2d1e9 !important;
}

/* --- 4. FOOTER --- */

#footer {
    background-color: #7D4698 !important;
    color: #ffffff !important;
    padding: 2rem 1rem !important;
    margin-top: 2rem;
}
#footer a, .footer-places li { color: #ffffff !important; }
#footer a:hover { color: #e2d1e9 !important; }