MediaWiki:Common.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: prevent overlapping duplicate search
   Keep normal header search, hide sticky-header duplicate only
   ========================================================= */

/* Hide only the search inside the sticky header (duplicate) */
.vector-sticky-header input[type="search"],
.vector-sticky-header #searchInput,
.vector-sticky-header .vector-search-box,
.vector-sticky-header form.mw-search,
.vector-sticky-header [role="search"] {
  display: none !important;
}

/* Ensure the normal header search stays visible */
.mw-header input[type="search"],
.mw-header #searchInput,
.mw-header .vector-search-box,
.mw-header form.mw-search,
.mw-header [role="search"] {
  display: block !important;
}

//* =========================================================
   Center ONLY the search area; keep user/login far right
   Works even if Vector header wrappers differ
   ========================================================= */

/* PROOF (temporary): if you don't see this outline, Common.css isn't applying */
.mw-header { outline: 2px solid transparent; } /* change to red in debug if needed */

/* Make the header a simple 3-part flex row */
.mw-header {
  display: flex !important;
  align-items: center !important;
}

/* Logo stays left */
.mw-header .mw-logo {
  flex: 0 0 auto !important;
}

/* Search lane takes remaining space and centers its contents */
.mw-header [role="search"],
.mw-header form.mw-search,
.mw-header #p-search,
.mw-header .vector-search-box,
.mw-header .vector-search-box-vue {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
}

/* Constrain the search width (centered) */
.mw-header [role="search"] input[type="search"],
.mw-header form.mw-search input[type="search"],
.mw-header #searchInput {
  width: min(720px, 100%) !important;
}

/* User/login tools forced far right */
.mw-header .vector-user-links,
.mw-header #p-personal,
.mw-header .mw-header-user,
.mw-header .vector-user-menu,
.mw-header .vector-user-menu-container {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  justify-self: end !important;
}