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: #F8FAFD;
   
}

.vector-header.mw-header {

border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
padding-top: 25px !important;

}

body {
background-color: white;
margin-top: 15px;
margin-bottom: 15px;
}

.mw-content-container {
background-color: #F8FAFD;
padding-bottom: 2.25rem;
padding-right: 3.25rem;


}

.mw-body #bodyContent {
background-color: white;
border-radius: 15px;
margin-top: 19px;
padding: 15px;
}

.vector-pinned-container {
border-radius: 7px;
padding-left:20px;
padding-right:20px;
padding-top:17px;
padding-bottom:17px;
background-color: #F8FAFD;
}

.vector-pinnable-header-toggle-button {
background-color: #C2E7FF;

}

.vector-pinnable-header {
border-bottom: 1px solid #8b8b8b;
}

.mw-page-container {
background-color: #F8FAFD;
}

.vector-sitenotice-container {
background-color: #F8FAFD;

}

.vector-column-start {
    background-color: #F8FAFD;
margin-left: 0;
}


/* Inner footer containers get the same color so there’s no visible seam */
.vector-footer-container,

.mw-footer {
    background-color: #F8FAFD;
border-top: 1px solid #35a2c9;

}

.mw-footer-container {
padding-left: 3.25rem;
padding-right: 3.25rem;
}



.mw-page-container {
padding-left: 0;
padding-right: 0;
}

.vector-sticky-pinned-container::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}











/* ===== 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 #35a2c9 !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.cdx-search-input__end-button{
  border-radius: 11px !important;
   border: 1px solid #35a2c9 !important;
}


/* keep the pill shape consistent everywhere */
.vector-header-end .cdx-text-input,
#vector-sticky-header .cdx-text-input {
    border-radius: 14px !important;
}

/* force the inner <input> to match, and remove its own border */
.vector-header-end .cdx-text-input__input,
#vector-sticky-header .cdx-text-input__input {
    border-radius: 14px !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important; /* don't draw a second layer */
}

/* when focused: only draw ONE highlight (outer), not two stacked borders */
.vector-header-end .cdx-text-input:focus-within,
#vector-sticky-header .cdx-text-input:focus-within {
    border-radius: 14px !important;

    /* pick the color you like for active state */
    border: 1px solid #2a70d6 !important;

    /* if you want the "glow", keep box-shadow. if you hate the double edge,
       you can make it a softer single glow that doesn't create a sharp second ring */
    box-shadow: 0 0 0 1px rgba(42,112,214,0.15) !important;

    background-color: rgba(255,255,255,0.9) !important;
}

/* also kill any extra outline the <input> itself tries to add on focus */
.vector-header-end .cdx-text-input__input:focus,
#vector-sticky-header .cdx-text-input__input:focus {
    outline: none !important;
    box-shadow: none !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;
}