Jump to content

MediaWiki:Common.css: Difference between revisions

From λ LUMENWARD
← Older editNewer edit →
Kauku (talk | contribs)
Bureaucrats, Interface administrators, Administrators
956 edits
No edit summary
No edit summary
Line 1: Line 1:
/* =========================================================
/* =========================================================
   Lumenward: force neutral link + logo colors (no layout changes)
   Vector 2022: Center header search WITHOUT moving user tools
   ========================================================= */
   ========================================================= */


/* Logo text: always black */
/* Use Vector's real header row as the layout context */
.mw-logo a,
.vector-header {
.mw-logo a:visited,
   position: relative !important;
.mw-logo a:hover,
   display: flex !important;
.mw-logo a:active {
  color: #000 !important;
  text-decoration: none !important;
}
 
/* All links: black (including visited) */
a,
a:visited {
  color: #111 !important;
}
 
/* Hover: underline only (no color shift) */
a:hover,
a:focus {
  color: #111 !important;
  text-decoration: underline !important;
}
 
/* Contents / TOC links specifically (these are the ones showing purple) */
.vector-toc a,
.vector-toc a:visited,
#toc a,
#toc a:visited {
  color: #111 !important;
}
 
/* =========================================================
  Lumenward: prevent GitHub/Discord from wrapping/truncating
  (targets the wrapper you added via Common.js)
  ========================================================= */
#lumenward-header-links {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
 
#lumenward-header-links a {
  white-space: nowrap !important;
}
 
/* =========================================================
  Lumenward: remove magnifying-glass icon inside the search input
  (Vector 2022 / Codex)
  ========================================================= */
.cdx-search-input__icon {
  display: none !important;
}
.cdx-search-input__input {
  padding-left: 10px !important; /* keep text aligned after icon removal */
}
 
/* =========================================================
  Lumenward: force logo to a single line (Vector 2022 safe)
  ========================================================= */
 
/* Prevent line breaks in the logo */
.mw-logo,
.mw-logo a {
   white-space: nowrap !important;
   display: inline-flex !important;
   align-items: center !important;
   align-items: center !important;
}
}


/* Ensure lambda + text stay together */
/* Force the right-side tools to remain FAR RIGHT */
.mw-logo a span,
.vector-header-end {
.mw-logo a {
  white-space: nowrap !important;
}
 
/* Optional: tighten spacing if needed */
.mw-logo a {
  gap: 6px; /* adjust or remove if unnecessary */
}
 
/* =========================================================
  Lumenward: Center footer content (Vector 2022)
  ========================================================= */
 
#footer {
  text-align: center !important;
}
 
#footer ul,
#footer-info,
#footer-places,
#footer-icons {
  float: none !important;
  display: inline-block !important;
  text-align: center !important;
   margin-left: auto !important;
   margin-left: auto !important;
   margin-right: auto !important;
   display: flex !important;
}
   align-items: center !important;
 
   justify-content: flex-end !important;
#footer li {
   float: none !important;
   display: inline !important;
  margin: 0 8px !important;
}
 
/* =========================================================
  Vector 2022: Center header search (single source of truth)
  - Search is centered on the page
  - Left header (logo + GitHub/Discord) remains left
  - User icons remain far right
  ========================================================= */
 
/* Make header a positioning context */
.mw-header {
  position: relative !important;
}
}


/* Center ONLY the real search widgets (Vector’s actual search containers) */
/* Center ONLY the actual search box (do NOT touch wrappers like [role="search"]) */
.mw-header .vector-search-box,
.vector-header .vector-search-box,
.mw-header .vector-search-box-vue,
.vector-header .vector-search-box-vue,
.mw-header #p-search {
.vector-header #p-search {
   position: absolute !important;
   position: absolute !important;
   left: 50% !important;
   left: 50% !important;
   top: 50% !important;
   top: 50% !important;
   transform: translate(-50%, -50%) !important;
   transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 1 !important;


  /* width of the centered search */
   width: min(620px, calc(100vw - 760px)) !important;
   width: min(620px, calc(100vw - 760px)) !important;
  margin: 0 !important;
  z-index: 1 !important;
}
}


/* Keep user/login tools on the far right (and above if anything overlaps) */
/* Keep user tools clickable above any overlap */
.mw-header .vector-header-end,
.vector-header-end,
.mw-header .vector-user-links,
.vector-user-links,
.mw-header .mw-header-user,
.vector-user-menu,
.mw-header .vector-user-menu,
#p-personal {
.mw-header .vector-user-menu-container,
.mw-header #p-personal {
   position: relative !important;
   position: relative !important;
   z-index: 2 !important;
   z-index: 2 !important;
}
}


/* Mobile: don't absolute-center (avoid overlaps) */
/* Mobile: revert to normal flow */
@media (max-width: 900px) {
@media (max-width: 900px) {
   .mw-header .vector-search-box,
   .vector-header .vector-search-box,
   .mw-header .vector-search-box-vue,
   .vector-header .vector-search-box-vue,
   .mw-header #p-search {
   .vector-header #p-search {
     position: static !important;
     position: static !important;
    left: auto !important;
    top: auto !important;
     transform: none !important;
     transform: none !important;
     width: 100% !important;
     width: 100% !important;
     margin: 8px 0 0 !important;
     margin-top: 8px !important;
   }
   }
}
}

Revision as of 09:54, 15 December 2025

/* =========================================================
   Vector 2022: Center header search WITHOUT moving user tools
   ========================================================= */

/* Use Vector's real header row as the layout context */
.vector-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* Force the right-side tools to remain FAR RIGHT */
.vector-header-end {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Center ONLY the actual search box (do NOT touch wrappers like [role="search"]) */
.vector-header .vector-search-box,
.vector-header .vector-search-box-vue,
.vector-header #p-search {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 1 !important;

  width: min(620px, calc(100vw - 760px)) !important;
}

/* Keep user tools clickable above any overlap */
.vector-header-end,
.vector-user-links,
.vector-user-menu,
#p-personal {
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile: revert to normal flow */
@media (max-width: 900px) {
  .vector-header .vector-search-box,
  .vector-header .vector-search-box-vue,
  .vector-header #p-search {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
}
Retrieved from "https://lumenward.com/index.php?title=MediaWiki:Common.css&oldid=88"