MediaWiki:Timeless.css
From The E28 Wiki
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.
/*
* MyE28 wiki brand — MediaWiki:Timeless.css
* Default skin chrome. Mirrors forums `mye28` style.
*
* Bars:
* Page header (#mw-header-container) → classic M light blue #0066B3
* Color bar stripes → light blue / violet / red (oldest M)
* Portlet section titles (h3) → classic M violet-blue #2B1C6B + white
* Content container bottom edge → violet-blue
*
* Do NOT style .sidebar-chunk > h2 on small screens — those are icon toggles.
*
* Source: https://github.com/mye28/mye28 (wiki-theme/)
*/
/* ------------------------------------------------------------------
* Fonts (preserve existing Timeless preference)
* ------------------------------------------------------------------ */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato',
'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
}
.mw-body .mw-heading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-body dt,
#p-logo-text a {
font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato',
'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
}
/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
height: 1.5em;
position: relative;
bottom: 0.1em;
}
/* Triangle position patch */
#personal h2::after {
position: relative;
bottom: 0.5em;
}
/* ------------------------------------------------------------------
* Page chrome
* ------------------------------------------------------------------ */
html,
body {
color: #121417;
background-color: #E2E5E9 !important;
}
/* Header bar — classic M light blue (forums .headerbar / .navbar) */
#mw-header-container {
background-color: #0066B3 !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
color: #FFFFFF;
}
#mw-header {
color: #FFFFFF;
}
#mw-header a,
#mw-header a:visited {
color: #FFFFFF !important;
}
#mw-header a:hover,
#mw-header a:focus {
color: #E6F0F8 !important;
text-decoration: none;
}
/* Site name text in header */
#p-logo-text a {
color: #FFFFFF !important;
font-variant: normal;
font-weight: 600;
}
#p-logo-text a:hover {
color: #E6F0F8 !important;
}
/* Personal tools / user menu toggle on blue header */
#personal h2,
#personal .dropdown-toggle,
#mw-header .dropdown-toggle,
#user-tools h2 {
color: #FFFFFF !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#personal h2:hover,
#mw-header .dropdown-toggle:hover,
#user-tools h2:hover {
background-color: #005A9E !important;
color: #FFFFFF !important;
}
/* Search field on blue header */
#simpleSearch {
background: #FFFFFF !important;
border: 1px solid #1F1450 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#searchInput {
color: #121417 !important;
background: transparent !important;
}
#searchButton,
#mw-searchButton {
border-radius: 0 !important;
box-shadow: none !important;
}
/* Suggestions dropdown */
.suggestions {
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid #B8BDC4 !important;
}
.suggestions .suggestions-result-current {
background-color: #2B1C6B !important;
color: #FFFFFF !important;
}
/* Color-bar shadow under fixed header */
#mw-header-hack,
#mw-header-nav-hack {
box-shadow: none !important;
}
/* ------------------------------------------------------------------
* Classic M color bar (oldest logo order L→R: blue · violet · red)
* Timeless: color-left | color-middle (center band) | color-right
* ------------------------------------------------------------------ */
.color-left {
background: #0066B3 !important;
}
.color-middle {
background: #2B1C6B !important;
}
.color-right {
background: #D52B1E !important;
}
/* ------------------------------------------------------------------
* Content area — white plate on aluminum field
* ------------------------------------------------------------------ */
#mw-content-container {
background-color: #E2E5E9 !important;
background-image: none !important;
border-bottom: solid 4px #2B1C6B !important;
}
#mw-content {
background: #FFFFFF !important;
border: 1px solid #B8BDC4 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.mw-body {
color: #121417;
}
/* Page tools underline (namespaces / views) */
.tools-inline li.selected {
border-bottom-color: #2B1C6B !important;
}
.tools-inline li:hover {
border-bottom-color: #D52B1E !important;
}
.tools-inline li a {
color: #2B1C6B !important;
}
.tools-inline li a:hover {
color: #D52B1E !important;
}
/* First heading accent */
.mw-body h1.firstHeading,
.mw-body .firstHeading {
border-bottom: solid 4px #2B1C6B !important;
color: #121417 !important;
}
/* ------------------------------------------------------------------
* Sidebars — aluminum plates
* ------------------------------------------------------------------ */
.sidebar-chunk,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background-color: #E6E8EC !important;
border: 1px solid #B8BDC4 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Portlet section titles (desktop + mobile body labels).
* NOT .sidebar-chunk > h2 — on mobile those are the hamburger / tool icons. */
.sidebar-inner .mw-portlet > h3,
.sidebar-chunk .mw-portlet > h3,
#mw-site-navigation .mw-portlet > h3,
#mw-related-navigation .mw-portlet > h3 {
background-color: #2B1C6B !important;
color: #FFFFFF !important;
border-bottom: none !important;
border-radius: 0 !important;
margin: 0 0 0.65em 0 !important;
padding: 0.4em 0.65em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em;
font-size: 0.85em !important;
display: block !important;
}
.sidebar-chunk a,
#mw-site-navigation a,
#mw-related-navigation a {
color: #2B1C6B !important;
}
.sidebar-chunk a:hover,
#mw-site-navigation a:hover,
#mw-related-navigation a:hover {
color: #D52B1E !important;
}
/* Logo box in left column */
#p-logo {
background-color: #FFFFFF !important;
border: 1px solid #B8BDC4 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0.5em;
margin-bottom: 0.5em;
}
/* ------------------------------------------------------------------
* Dropdowns (personal menu, tools)
* ------------------------------------------------------------------ */
#personal .dropdown,
#mw-header .dropdown,
.dropdown-menu {
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid #B8BDC4 !important;
background: #FFFFFF !important;
}
#personal .dropdown a,
#mw-header .dropdown a {
color: #2B1C6B !important;
}
#personal .dropdown a:hover,
#mw-header .dropdown a:hover {
background-color: #D0D7DE !important;
color: #D52B1E !important;
}
/* ------------------------------------------------------------------
* Footer
* ------------------------------------------------------------------ */
.mw-footer-container {
background-color: #2B1C6B !important;
border-top: none !important;
box-shadow: none !important;
color: #FFFFFF !important;
}
.mw-footer,
.mw-footer a,
.mw-footer a:visited {
color: #E6F0F8 !important;
}
.mw-footer a:hover {
color: #FFFFFF !important;
text-decoration: underline;
}
/* ------------------------------------------------------------------
* Clean geometry — square corners, no soft shadows (forums match)
* ------------------------------------------------------------------ */
#mw-content,
.sidebar-chunk,
.toc,
.thumbinner,
.catlinks,
#simpleSearch,
#personal .dropdown,
.oo-ui-buttonElement-button,
.oo-ui-inputWidget-input,
input,
textarea,
select,
.wikitable,
.mw-code,
pre,
code {
border-radius: 0 !important;
}
#mw-content,
.sidebar-chunk,
#simpleSearch,
#personal .dropdown,
.suggestions {
box-shadow: none !important;
}
/* ------------------------------------------------------------------
* Mobile (Timeless < 851px)
* Keep header brand; leave .sidebar-chunk h2 as icon toggles (no fill).
* ------------------------------------------------------------------ */
@media screen and (max-width: 850px) {
#mw-header-container {
background-color: #0066B3 !important;
}
#mw-header .dropdown-toggle,
#personal h2,
#user-tools h2 {
color: #FFFFFF !important;
}
#mw-content-container {
border-bottom: solid 3px #2B1C6B !important;
}
/* Mobile flyout panels still get aluminum plate when open */
.sidebar-inner {
background-color: #E6E8EC !important;
border: 1px solid #B8BDC4 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
