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 |
||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | /* --- 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; } | |||
Latest revision as of 16:41, 24 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; }
