MediaWiki:Common.css: Difference between revisions

Revision as of 19:45, 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;
}

@@ Line 1: / Line 1: @@
 /* =========================================================
-    Lumenward — stable global header layout
+    Center ONLY the search area; keep user/login far right
-    Skin: Vector 2022
+    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 */
-   Text logo styling (λ LUMENWARD)
+.mw-header {
-   --------------------------------------------------------- */
+   display: flex !important;
-.mw-logo,
-.mw-logo a,
-.mw-logo a:visited,
-.mw-logo a:hover,
-.mw-logo a:active {
-  color: #000 !important;
-  text-decoration: none !important;
-}
-/* ---------------------------------------------------------
-   Remove "Powered by MediaWiki"
-   --------------------------------------------------------- */
-#footer-poweredby,
-#footer-poweredbyico,
-.mw-poweredby {
-  display: none !important;
-}
-/* ---------------------------------------------------------
-   HEADER LAYOUT
-   Logo = left
-   Search = true center of page
-   User/Login = far right
-   --------------------------------------------------------- */
-/* Header container */
-.mw-header .vector-header-container {
-   display: grid !important;
-  grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
 }
-/* Left: logo/menu */
+/* Logo stays left */
-.mw-header .vector-header-start {
+.mw-header .mw-logo {
-   justify-self: start !important;
+   flex: 0 0 auto !important;
 }
-/* Middle: full-width centering lane */
+/* Search lane takes remaining space and centers its contents */
-.mw-header .vector-header-middle {
+.mw-header [role="search"],
-   justify-self: center !important;
+.mw-header form.mw-search,
-  width: 100% !important;
+.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;
 }
-/* Right: user/login tools */
+/* Constrain the search width (centered) */
-.mw-header .vector-header-end {
+.mw-header [role="search"] input[type="search"],
-  justify-self: end !important;
+.mw-header form.mw-search input[type="search"],
-  margin-left: auto !important;
+.mw-header #searchInput {
-   display: flex !important;
+   width: min(720px, 100%) !important;
-  justify-content: flex-end !important;
 }
-/* ---------------------------------------------------------
+/* User/login tools forced far right */
-   SEARCH BAR — perfectly centered on page
+.mw-header .vector-user-links,
-   --------------------------------------------------------- */
+.mw-header #p-personal,
+.mw-header .mw-header-user,
-.mw-header .vector-header-middle .vector-search-box,
+.mw-header .vector-user-menu,
-.mw-header .vector-header-middle .vector-search-box-vue,
+.mw-header .vector-user-menu-container {
-.mw-header .vector-header-middle form.mw-search,
+   flex: 0 0 auto !important;
-.mw-header .vector-header-middle #p-search {
-   width: min(720px, 100%) !important;
    margin-left: auto !important;
-   margin-right: auto !important;
+   justify-self: end !important;
 }