MediaWiki:Vector-2022.css: Difference between revisions

Latest revision as of 21:18, 21 October 2026

/* dev.eiffel.com - Eiffel Software look for Vector 2022 (palette from the 2013 eiffelsoftware_origo skin) */
:root {
	--eiffel-navy: #173A7B;
	--eiffel-blue: #2153B0;
	--eiffel-light: #CBDDFF;
	--eiffel-pale: #F2F6FF;
	--eiffel-gold: #fabd23;
}

/* Header bar (full window width, also when the header is sticky) */
body.skin-vector-2022 .vector-header-container,
body.skin-vector-2022 .vector-header-container .mw-header,
body.skin-vector-2022 .vector-sticky-header {
	background: var(--eiffel-navy);
}
/* Full-width bar without clipping: the old clip-path trick also clipped the header dropdowns (main menu,
   user menu), which then appeared cut off / behind the page content. */
html {
	overflow-x: hidden;
}
body.skin-vector-2022 .vector-header-container {
	position: relative;
	z-index: 3;   /* header and its dropdowns above the page content */
}
body.skin-vector-2022 .vector-header-container::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc( 50% - 50vw );
	width: 100vw;
	background: var(--eiffel-navy);
	border-bottom: 3px solid var(--eiffel-gold);
	z-index: -1;
}
body.skin-vector-2022 .vector-sticky-header .vector-sticky-header-context-bar-primary,
body.skin-vector-2022 .vector-sticky-header a {
	color: #fff;
}
.vector-header-container .mw-logo-wordmark,
.vector-header-container .mw-logo-container,
.vector-header-container .vector-main-menu-dropdown .vector-dropdown-label,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-user-links .vector-dropdown-label {
	color: #fff;
}
.vector-header-container .mw-logo-wordmark {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
	font-size: 1.15em;
	font-weight: bold;
}
.vector-header-container .cdx-button__icon,
.vector-header-container .vector-icon {
	filter: invert( 1 );
}
.vector-header-container .cdx-text-input__input,
.vector-header-container .cdx-search-input__input-wrapper input {
	border-color: var(--eiffel-light);
}

/* Links */
.mw-body a:not( .new ):not( .external ),
.vector-toc a {
	color: var(--eiffel-blue);
}
.mw-body a:not( .new ):hover,
.vector-toc a:hover {
	color: var(--eiffel-navy);
}
.mw-body a:visited:not( .new ) {
	color: #3b5fa8;
}

/* Headings */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-first-heading {
	color: var(--eiffel-navy);
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
}
.mw-body h1, .mw-body h2 {
	border-bottom-color: var(--eiffel-light);
}

/* Active tabs */
.vector-menu-tabs .selected a,
.vector-menu-tabs .mw-list-item.selected a {
	color: var(--eiffel-navy);
	box-shadow: inset 0 -2px 0 var(--eiffel-gold);
}

/* Footer */
.mw-footer {
	border-top: 3px solid var(--eiffel-light);
}