MediaWiki:Common.css: Difference between revisions

Revision as of 19:51, 13 December 2025

/* =========================================================
   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;
}

/* =========================================================
   Lumenward search styling (safe, global)
   Applies wherever the search input exists
   ========================================================= */

/* Style the search input itself */
.mw-header input[type="search"],
.mw-header #searchInput {
  background: #f6f6f6 !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 999px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: #0a0a0a !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Focus state: subtle, not "app blue" */
.mw-header input[type="search"]:focus,
.mw-header #searchInput:focus {
  background: #ffffff !important;
  border-color: #bdbdbd !important;
}

/* Placeholder tone */
.mw-header input[type="search"]::placeholder,
.mw-header #searchInput::placeholder {
  color: #6a6a6a !important;
  opacity: 1 !important;
}

/* If the skin adds a search button/icon area, soften it too */
.mw-header .vector-search-box button,
.mw-header .mw-ui-button,
.mw-header .searchButton {
  background: #f6f6f6 !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 999px !important;
  color: #3a3a3a !important;
}