MediaWiki:Common.css: Difference between revisions

Revision as of 19:54, 13 December 2025

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

@@ Line 1: / Line 1: @@
 /* =========================================================
-    Center ONLY the search area; keep user/login far right
+    Vector 2022: prevent overlapping duplicate search
-    Works even if Vector header wrappers differ
+    Keep normal header search, hide sticky-header duplicate only
     ========================================================= */
-/* PROOF (temporary): if you don't see this outline, Common.css isn't applying */
+/* Hide only the search inside the sticky header (duplicate) */
-.mw-header { outline: 2px solid transparent; } /* change to red in debug if needed */
+.vector-sticky-header input[type="search"],
+.vector-sticky-header #searchInput,
-/* Make the header a simple 3-part flex row */
+.vector-sticky-header .vector-search-box,
-.mw-header {
+.vector-sticky-header form.mw-search,
-   display: flex !important;
+.vector-sticky-header [role="search"] {
-  align-items: center !important;
+   display: none !important;
 }
-/* Logo stays left */
+/* Ensure the normal header search stays visible */
-.mw-header .mw-logo {
+.mw-header input[type="search"],
-  flex: 0 0 auto !important;
+.mw-header #searchInput,
-}
+.mw-header .vector-search-box,
-/* Search lane takes remaining space and centers its contents */
-.mw-header [role="search"],
 .mw-header form.mw-search,
-.mw-header #p-search,
+.mw-header [role="search"] {
-.mw-header .vector-search-box,
+   display: block !important;
-.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;
 }