The E28 Wiki - User contributions [en]

MediaWiki:Timeless.css

2026-08-02T20:16:36Z

Maintenance script: MyE28 brand theme (wiki-theme/)

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

MediaWiki:Timeless.css

2026-08-02T20:14:57Z

Maintenance script: MyE28 brand theme (wiki-theme/)

/*
* 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)
* Sidebar chunk titles → classic M violet-blue #2B1C6B + white
* Content container bottom edge → violet-blue
*
* 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 */
#personal h2,
#personal .dropdown-toggle,
#mw-header .dropdown-toggle {
color: #FFFFFF !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}

#personal h2:hover,
#mw-header .dropdown-toggle: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 {
/* keep icon; no soft chrome */
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;
}

/* ------------------------------------------------------------------
* 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 / portlets — aluminum plates, violet headers
* ------------------------------------------------------------------ */
.sidebar-chunk,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
.nav-block,
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
background-color: #E6E8EC !important;
border: 1px solid #B8BDC4 !important;
border-radius: 0 !important;
box-shadow: none !important;
}

/* Sidebar section titles */
.sidebar-chunk h2,
.sidebar-chunk h3,
#mw-site-navigation h2,
#mw-site-navigation h3,
#mw-related-navigation h2,
#mw-related-navigation h3,
.mw-portlet h3,
.mw-portlet > h3 {
background-color: #2B1C6B !important;
color: #FFFFFF !important;
border-bottom: none !important;
border-radius: 0 !important;
margin: -0.5em -0.75em 0.75em !important;
padding: 0.45em 0.75em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em;
font-size: 0.85em !important;
}

/* Some Timeless layouts put padding on the chunk; keep header flush */
.sidebar-chunk > h2,
.sidebar-chunk > h3 {
margin-left: -1.5em !important;
margin-right: -1.5em !important;
margin-top: -1.5em !important;
padding-left: 1.5em !important;
padding-right: 1.5em !important;
padding-top: 0.55em !important;
padding-bottom: 0.55em !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)
* ------------------------------------------------------------------ */
.dropdown,
.dropdown-menu,
#personal .dropdown,
#mw-header .dropdown {
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid #B8BDC4 !important;
background: #FFFFFF !important;
}

.dropdown a,
.dropdown-menu a {
color: #2B1C6B !important;
}

.dropdown a:hover,
.dropdown-menu 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,
.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,
.dropdown,
.suggestions {
box-shadow: none !important;
}

/* ------------------------------------------------------------------
* Mobile (Timeless < 851px)
* ------------------------------------------------------------------ */
@media screen and (max-width: 850px) {
#mw-header-container {
background-color: #0066B3 !important;
}

/* Menu toggles stay readable on blue */
#mw-header .dropdown-toggle,
#personal h2 {
color: #FFFFFF !important;
}

#mw-content-container {
border-bottom: solid 3px #2B1C6B !important;
}
}

MediaWiki:Common.css

2026-08-02T20:14:57Z

Maintenance script: MyE28 brand theme (wiki-theme/)

/*
* MyE28 wiki brand — MediaWiki:Common.css
* Shared across all skins (Timeless default, Vector, Minerva, …).
*
* Palette matches forums style `mye28` (classic 1970s BMW M stripes):
* Light blue #0066B3
* Violet-blue #2B1C6B
* Red #D52B1E
* Source: https://github.com/mye28/mye28 (wiki-theme/)
*/

/* ------------------------------------------------------------------
* Links (content)
* ------------------------------------------------------------------ */
a {
color: #2B1C6B;
}

a:hover,
a:focus {
color: #D52B1E;
}

a:visited {
color: #1F1450;
}

a:visited:hover {
color: #D52B1E;
}

/* Redlinks keep M red */
a.new,
.new a,
a.new:visited,
.new a:visited {
color: #D52B1E;
}

/* External / interwiki — same brand blue, slightly dimmer */
.mw-parser-output a.external,
.mw-parser-output a.extiw {
color: #2B1C6B;
}

.mw-parser-output a.external:hover,
.mw-parser-output a.extiw:hover {
color: #D52B1E;
}

/* ------------------------------------------------------------------
* Content surfaces — aluminum silver stack (match forums)
* ------------------------------------------------------------------ */
.toc,
.toccolours,
.mw-warning,
.catlinks,
.mw-parser-output .navbox,
.mw-parser-output .infobox,
.thumbinner,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions {
background-color: #E6E8EC;
border-color: #B8BDC4;
border-radius: 0;
box-shadow: none;
}

/* Tables */
.wikitable,
.mw-datatable,
.mw_metadata {
border-color: #B8BDC4;
background-color: #FFFFFF;
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.mw-datatable th,
.mw_metadata th {
background-color: #2B1C6B;
color: #FFFFFF;
border-color: #1F1450;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
border-color: #C5C9CF;
}

.wikitable > tr:nth-child(even),
.wikitable > * > tr:nth-child(even) {
background-color: #E2E5E9;
}

.wikitable > tr:hover,
.wikitable > * > tr:hover {
background-color: #D0D7DE;
}

/* Code / pre */
code,
pre,
.mw-code {
background-color: #F0F1F3;
border-color: #A8AEB6;
border-radius: 0;
color: #121417;
}

/* Quotes */
blockquote {
border-left: 3px solid #2B1C6B;
background-color: #E6E8EC;
color: #121417;
}

/* Edit section links */
.mw-editsection,
.mw-editsection-bracket {
color: #2B1C6B;
}

/* Headings underline accents */
.mw-body h1.firstHeading,
.mw-body .firstHeading {
border-bottom-color: #2B1C6B;
color: #121417;
}

.mw-body h1,
.mw-body h2,
.mw-body .mw-heading1,
.mw-body .mw-heading2 {
border-bottom-color: #B8BDC4;
color: #121417;
}

/* ------------------------------------------------------------------
* OOUI / forms — flat, square, M colours
* ------------------------------------------------------------------ */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
border-radius: 0;
}

.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
background-color: #2B1C6B;
border-color: #1F1450;
color: #FFFFFF;
}

.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
background-color: #1F1450;
border-color: #120A30;
color: #FFFFFF;
}

.oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
background-color: #D52B1E;
border-color: #A81F16;
color: #FFFFFF;
}

/* Inputs */
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
input[type="text"],
input[type="search"],
input[type="password"],
textarea,
select {
border-radius: 0;
border-color: #A8AEB6;
color: #121417;
}

/* ------------------------------------------------------------------
* Usermessage / notices
* ------------------------------------------------------------------ */
.usermessage {
background-color: #FCE9E6;
border-color: #D52B1E;
color: #D52B1E;
border-radius: 0;
}