MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 20:16, 2 August 2026

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