MediaWiki:Common.css: Difference between revisions

Revision as of 13:44, 14 December 2025

/* =========================================================
   Lumenward: force neutral link + logo colors (no layout changes)
   ========================================================= */

/* Logo text: always black */
.mw-logo a,
.mw-logo a:visited,
.mw-logo a:hover,
.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;
}

/* Ensure lambda + text stay together */
.mw-logo a span,
.mw-logo a {
  white-space: nowrap !important;
}

/* Optional: tighten spacing if needed */
.mw-logo a {
  gap: 6px; /* adjust or remove if unnecessary */
}

/* =========================================================
   Vector 2022: FORCE 3-zone header layout (SAFE)
   Left = logo/links, Center = search, Right = user icons
   ========================================================= */

.mw-header .vector-header-container,
.mw-header .mw-header-container,
.mw-header .mw-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
}

/* Left zone */
.mw-header .vector-header-start,
.mw-header .mw-header-start {
  grid-column: 1 !important;
}

/* Right zone */
.mw-header .vector-header-end,
.mw-header .mw-header-end,
.mw-header .mw-header-user,
.mw-header .vector-user-links,
.mw-header #p-personal {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Center the search area */
.mw-header #p-search,
.mw-header .vector-search-box,
.mw-header .vector-search-box-vue,
.mw-header form.mw-search,
.mw-header [role="search"] {
  grid-column: 2 !important;
  justify-self: center !important;
}

/* =========================================================
   Lumenward: HARD center the header search (Vector 2022)
   - Search is centered on the page
   - User icons remain far right
   - Left header (logo + GitHub/Discord) remains left
   ========================================================= */

/* Make header a positioning context */
.mw-header .vector-header-container,
.mw-header .mw-header-container,
.mw-header {
  position: relative !important;
}

/* Center ONLY the search element */
.mw-header #p-search,
.mw-header .vector-search-box,
.mw-header .vector-search-box-vue,
.mw-header form.mw-search,
.mw-header [role="search"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}

/* Keep left/right header UI above it (clickable, not overlapped) */
.mw-header .vector-header-start,
.mw-header .mw-header-start,
.mw-header .vector-header-end,
.mw-header .mw-header-end,
.mw-header .mw-header-user,
.mw-header .vector-user-links,
.mw-header #p-personal {
  position: relative !important;
  z-index: 2 !important;
}

/* Optional: prevent the centered search from getting too wide */
.mw-header #p-search,
.mw-header .vector-search-box,
.mw-header .vector-search-box-vue,
.mw-header form.mw-search,
.mw-header [role="search"] {
  max-width: 620px !important;
  width: min(620px, calc(100vw - 520px)) !important; /* leaves room for left+right UI */
}

/* Mobile: don't absolute-center (avoid overlaps) */
@media (max-width: 900px) {
  .mw-header #p-search,
  .mw-header .vector-search-box,
  .mw-header .vector-search-box-vue,
  .mw-header form.mw-search,
  .mw-header [role="search"] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   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-right: auto !important;
}

#footer li {
  float: none !important;
  display: inline !important;
  margin: 0 8px !important;
}