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.

/* Vector 2022 CSS Styling */

/* ===== 1. Header + footer background ===== */
.vector-header-container .vector-header,
.vector-sticky-header-container,
#vector-sticky-header {
    background-color: #E9EEF6;
}

.mw-footer-container,
.mw-footer {
    background-color: #E9EEF6;
}

/* ===== 2. Wordmark / site name next to logo ===== */
.mw-logo-wordmark {
    color: rgb(77, 77, 80);
    font-size: 1.25rem !important;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
}

/* ensure logo never looks faded */
.mw-logo,
.mw-logo-wordmark,
.vector-sticky-header .mw-logo,
.vector-sticky-header .mw-logo-wordmark {
    opacity: 1 !important;
}

/* ===== 3. "Hamburger" / main menu toggle button ===== */
#vector-main-menu-dropdown-label.cdx-button--icon-only {
    background-color: rgb(32, 33, 36) !important;
    color: #fff;
    border-radius: 4px;
    padding: 4px 6px;
}
#vector-main-menu-dropdown-label .vector-icon {
    filter: invert(1);
}

/* ===== 4. Search field styling (rounded pill look) ===== */
.vector-header-end .cdx-text-input,
#vector-sticky-header .cdx-text-input {
    border-radius: 14px !important;
    border: 1px solid #d2eff7 !important;
    box-shadow: none !important;
    background-color: #fff;
}
.vector-header-end .cdx-text-input__input,
#vector-sticky-header .cdx-text-input__input {
    border-radius: 14px !important;
    border: 0 !important;
}

.cdx-search-input--has-end-button {
border: 0px;
background: transparent;
display; flex;
gap: 3px;
}

.cdx-button {
  border-radius: 11px !important;
   border: 1px solid #d2eff7 !important;
}

/* ===== 5. Heading font stack ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ===== 6. Slightly slimmer header bar ===== */
.vector-header {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
#vector-sticky-header {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}