MediaWiki:Vector-2022.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.
/* CSS placed here will affect users of the Vector 2022 skin */
/* AmwayWiki branding: blue band across the top of the page with the logo overlapping it, as in the old skin */
:root { --amw-blue: #044AA4; --amw-band: 58px; --amw-h: 110px; }
html { overflow-x: clip; }
.vector-header-container { position: relative; }
.vector-header-container::before { content: ''; position: absolute; top: 0; height: var(--amw-band); left: -100vmax; right: -100vmax; background: var(--amw-blue); z-index: 0; }
.vector-header-container .mw-header { position: relative; z-index: 1; background: linear-gradient(to bottom, var(--amw-blue) 0, var(--amw-blue) var(--amw-band), var(--background-color-base, #fff) var(--amw-band)); min-height: var(--amw-h); align-items: flex-start; padding-top: 7px; box-sizing: border-box; flex-direction: row; flex-wrap: nowrap; }
.vector-header-container .vector-header-start { align-items: flex-start !important; flex: 0 0 auto; width: auto; }
.vector-header-container .vector-main-menu-landmark { align-self: flex-start; }
.vector-header-end { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
/* Logo image instead of the text wordmark */
.vector-header-start .mw-logo { display: block; flex: 0 0 var(--amw-h) !important; min-width: 0 !important; width: var(--amw-h) !important; height: var(--amw-h); margin-top: -7px; background: url(/images/1/18/AmwayWiki_logo_2026.png?v=2) no-repeat center / contain; }
.vector-header-start .mw-logo-container { visibility: hidden; }
/* White links and icons on the blue band */
.vector-header .vector-user-links a, .vector-header .vector-user-links-main a { color: #fff !important; }
.vector-header .vector-icon { filter: invert(1) brightness(2); }
.vector-header .vector-typeahead-search .vector-icon, .vector-header .cdx-text-input__icon { filter: none; }
/* Drop-down menus (for example the "..." menu on phones) keep normal colours on their own background */
.vector-header .vector-dropdown-content a, .vector-header .vector-dropdown-content a:visited { color: var(--color-progressive, #36c) !important; }
.vector-header .vector-dropdown-content .vector-icon { filter: none; }
@media (max-width: 719px) {
:root { --amw-band: 44px; --amw-h: 76px; }
.vector-header-container .mw-header { padding-top: 0; }
.vector-header-start .mw-logo { margin-top: 0; }
}
/* Page background matches the content area, so wide screens show no side bars (light and dark mode) */
body { background-color: var(--background-color-base, #fff); }
/* Compact header (Nov 2026): logo sits inside the blue band; less space above the top ad */
:root { --amw-band: 84px; --amw-h: 76px; }
.vector-header-container .mw-header { padding-top: 4px; }
@media (max-width: 719px) {
:root { --amw-band: 64px; --amw-h: 58px; }
.vector-header-container .mw-header { padding-top: 3px; }
}
.vector-header-start .mw-logo { margin-top: 0 !important; }
#siteNotice { margin: 8px 0; }
/* Horizontal header logo (Nov 2026): thinner band */
:root { --amw-band: 64px; --amw-h: 56px; }
.vector-header-start .mw-logo { background-image: url(/images/5/57/AmwayWiki_header_logo_2026.png?v=2) !important; background-position: left center !important; flex: 0 0 134px !important; width: 134px !important; height: 56px !important; }
@media (max-width: 719px) {
:root { --amw-band: 52px; --amw-h: 46px; }
.vector-header-start .mw-logo { flex: 0 0 110px !important; width: 110px !important; height: 46px !important; }
}
/* Hide the ULS interface-language selector and the empty "Add language" buttons;
the AmwayWiki switcher (MediaWiki:Common.js) replaces them. */
.vector-header-end .uls-trigger,
#p-lang-btn,
#p-lang-btn-sticky-header { display: none !important; }
/* AmwayWiki content-language switcher */
.amw-ls { position: relative; margin-right: 12px; align-self: center; }
.amw-ls-btn {
display: inline-flex; align-items: center; gap: 6px;
min-width: 11em; justify-content: center;
padding: 6px 12px; border: 2px solid #fff; border-radius: 18px;
background: #fff; color: #0b3d91; font: bold 14px/1.2 sans-serif; cursor: pointer;
}
.amw-ls-btn:hover, .amw-ls-btn:focus-visible, .amw-ls-btn[aria-expanded="true"] {
background: #ffd84d; border-color: #ffd84d; color: #0b2a66; outline: none;
}
.amw-ls-btn:focus-visible { box-shadow: 0 0 0 3px #fff; }
.amw-ls-label { transition: opacity .25s; white-space: nowrap; }
.amw-ls-short { display: none; }
.amw-ls-fade { opacity: 0; }
.amw-ls-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 1000;
min-width: 12em; margin: 0; padding: 4px 0; list-style: none;
background: #fff; border: 1px solid #a2a9b1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.amw-ls-menu li { margin: 0; }
.amw-ls-menu a { display: block; padding: 8px 14px; color: #202122; font-size: 15px; text-decoration: none; }
.amw-ls-menu a:hover, .amw-ls-menu a:focus { background: #eaf3ff; color: #0b3d91; outline: none; }
.amw-ls-current { font-weight: bold; }
.amw-ls-current::after { content: " ✓"; color: #14866d; }
/* small screens: header button hidden, bar under the header instead */
.amw-ls-bar { display: none; }
@media (max-width: 720px) {
.amw-ls { display: none; }
.amw-ls-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
padding: 8px 16px; background: #ffd84d; color: #0b2a66; font: 15px/1.3 sans-serif;
}
.amw-ls-bar-label { font-weight: bold; }
.amw-ls-bar a { color: #0b3d91; text-decoration: underline; }
.amw-ls-bar strong { color: #0b2a66; }
}
@media (prefers-reduced-motion: reduce) { .amw-ls-label { transition: none; } }