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.
/************************************************************
* CLEAN MINIMAL THEME — FULL RGB, RESPONSIVE, NO GRADIENTS
************************************************************/
/*----------------------------------------------------------
0. GLOBAL RESET / CLEANUP
----------------------------------------------------------*/
.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo,
#p-logo,
#p-logo a,
.mw-logo-container {
display: none !important;
visibility: hidden !important;
}
html {
font-size: 18px !important; /* bigger text globally */
}
body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,
input, textarea, select, button {
font-family: Arial, sans-serif !important;
color: rgb(30, 30, 30) !important;
line-height: 1.62 !important;
background: transparent !important;
}
body {
background: #ffffff !important;
}
/* Remove shadows everywhere */
.portlet, .pBody, #content, #column-content, #column-one,
.portlet h3, .portlet h5, .gallerybox,
.thumb, .thumbinner, .infobox, table, #footer,
#p-cactions, .vector-menu-tabs {
box-shadow: none !important;
text-shadow: none !important;
}
/*----------------------------------------------------------
REMOVE ALL HEADER / TOP SHADOWS
----------------------------------------------------------*/
#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.vector-container,
.mw-header {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
filter: none !important;
display: flex !important;
align-items: center !important;
min-height: 56px !important;
}
/*----------------------------------------------------------
SAFARI HEADER ALIGNMENT FIX
----------------------------------------------------------*/
#left-navigation,
.vector-page-toolbar {
display: flex !important;
align-items: center !important;
}
#right-navigation {
display: flex !important;
align-items: center !important;
margin-left: auto !important;
}
#p-namespaces li a,
#p-views li a,
#p-cactions li a,
#p-personal ul li a {
display: flex !important;
align-items: center !important;
height: 36px !important;
}
#p-search,
#simpleSearch {
display: flex !important;
align-items: center !important;
}
#searchInput {
height: 32px !important;
font-size: 0.95rem !important;
}
/*----------------------------------------------------------
1. SIDEBAR LAYOUT
----------------------------------------------------------*/
#column-one {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
}
#mw-panel, .vector-legacy-sidebar {
background: none !important;
}
#p-navigation {
order: 999 !important;
margin-top: auto !important;
padding-top: 60px !important;
border-top: 1px solid #eee !important;
}
.portlet h3, .portlet h5 {
color: rgb(20,20,20) !important;
font-weight: bold !important;
}
.portlet .pBody ul li a {
color: rgb(0,102,255) !important;
text-decoration: none !important;
}
.portlet .pBody ul li a:hover {
color: rgb(0,51,204) !important;
text-decoration: underline !important;
}
/*----------------------------------------------------------
2. TOP TABS / PERSONAL MENU
----------------------------------------------------------*/
#p-cactions, #p-namespaces, #p-views, #p-personal {
background: none !important;
border: none !important;
}
#p-cactions li, #p-namespaces li, #p-views li {
margin-right: 10px !important;
}
#p-cactions li a, #p-namespaces li a, #p-views li a {
background: none !important;
padding: 8px 15px !important;
color: rgb(0,102,255) !important;
}
#p-cactions li.selected a,
#p-namespaces li.selected a,
#p-views li.selected a {
color: rgb(20,20,20) !important;
font-weight: bold !important;
}
#p-cactions li a:hover,
#p-namespaces li a:hover,
#p-views li a:hover {
background: rgb(240,240,240) !important;
color: rgb(0,51,204) !important;
}
/*----------------------------------------------------------
3. CONTENT AREA
----------------------------------------------------------*/
#content, .mw-body, .mw-body-content {
background: none !important;
border: none !important;
}
#content {
background: #ffffff !important;
border: 1px solid #ddd !important;
border-top: none !important;
}
/* Headings with proportional scaling */
h1 { font-size: 2rem !important; }
h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.35rem !important; }
h4 { font-size: 1.15rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.9rem !important; }
h1, h2, h3, h4, h5, h6, .firstHeading {
border-bottom: none !important;
color: rgb(20,20,20) !important;
}
/* Edit links */
.mw-editsection a {
color: rgb(0,102,255) !important;
}
.mw-editsection a:hover {
color: rgb(0,51,204) !important;
text-decoration: underline !important;
}
/*----------------------------------------------------------
4. RESPONSIVE CONTENT WIDTH
----------------------------------------------------------*/
.mw-body-content,
#content,
#mw-content-text {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Tablet */
@media (max-width: 1100px) {
.mw-body-content,
#content,
#mw-content-text {
max-width: 90% !important;
}
}
/* Mobile */
@media (max-width: 700px) {
.mw-body-content,
#content,
#mw-content-text {
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/*----------------------------------------------------------
5. IMAGES / GALLERIES
----------------------------------------------------------*/
.gallerybox,
.gallerybox .thumb,
.thumb,
.thumbinner {
background: none !important;
border: none !important;
}
.gallerybox {
width: 200px !important;
margin: 15px !important;
}
.gallerybox .thumb img {
width: 200px !important;
height: auto !important;
}
.gallerytext, .thumbcaption {
color: rgb(110,110,110) !important;
}
/*----------------------------------------------------------
6. TABLES
----------------------------------------------------------*/
table {
border-collapse: collapse !important;
background: none !important;
}
table th, table td {
border: 1px solid #ddd !important;
padding: 6px !important;
}
table th {
font-weight: bold !important;
color: rgb(20,20,20) !important;
}
/*----------------------------------------------------------
7. INFOBOX
----------------------------------------------------------*/
.infobox {
background: none !important;
border-left: 3px solid rgb(0,180,255) !important;
padding: 15px !important;
margin: 0 0 20px 20px !important;
}
.infobox th, .infobox td {
border-bottom: 1px solid #eee !important;
padding: 8px 0 !important;
}
.infobox tr:last-child th,
.infobox tr:last-child td {
border-bottom: none !important;
}
/*----------------------------------------------------------
8. FORMS
----------------------------------------------------------*/
input, textarea, select {
border: 1px solid #ccc !important;
background: #ffffff !important;
border-radius: 0 !important;
}
/*----------------------------------------------------------
9. FOOTER / META
----------------------------------------------------------*/
#footer, #catlinks {
background: none !important;
border-top: 1px solid #eee !important;
color: rgb(110,110,110) !important;
}