MediaWiki:Common.css: Difference between revisions

Latest revision as of 15:57, 26 December 2025

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@400;700&display=swap');

/* Vector 2022: hide the wordmark (site title) and tagline next to the logo */
.mw-logo-wordmark,
.mw-logo-tagline,
.mw-wiki-title,
.mw-logo-text {
  display: none !important;
}
/* --- BIG LOGO: Vector 2022 --- */

/* 1) Set how tall you want the header area */
.vector-header {
  min-height: 160px !important; /* adjust */
}

/* 2) Let the logo block use that height */
.vector-header-start,
.mw-logo {
  height: 160px !important;     /* match the header height */
  display: flex !important;
  align-items: center !important;
}

/* 3) Kill Vector's built-in logo caps */
.mw-logo-icon,
.mw-logo-icon img,
.mw-logo img {
  max-height: none !important;
  height: 190px !important;     /* THIS is what makes it bigger */
  width: auto !important;
}
/* Move logo left + down (Vector 2022) */
.mw-logo {
  margin-left: -18px !important;  /* left */
  margin-top: 50px !important;    /* down */
}
body {
  background-image: url("https://doomrelics.com/images/7/7e/Bgdoom.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
/* Main content background transparency */
.mw-page-container,
.mw-content-container,
.vector-body {
  background: rgba(0, 0, 0, 0) !important; /* adjust opacity */
}
/* Glass-style header background */
.vector-header {
  background-color: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(4px);
}

/* Ensure background image still shows */
.vector-header {
  background-blend-mode: overlay;
}
/* =========================
   DOOM EMBERS (SEAMLESS + FADE)
   Background-only, behind content
   ========================= */

body { position: relative; }

/* Ember layers */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen; /* makes embers feel like light */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 18%, black 100%);
          mask-image: linear-gradient(to top, transparent 0%, black 18%, black 100%);
}

/* Layer 1: small sharp embers */
body::before {
  opacity: 0.55;
  background-repeat: repeat;
  background-image:
    radial-gradient(circle, rgba(255,120,0,0.85) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,60,0,0.70) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,200,120,0.55) 0 1px, transparent 2px);
  background-size: 240px 240px, 340px 340px, 520px 520px;
  background-position: 10% 100%, 60% 120%, 90% 80%;
  filter: blur(0.25px);
  animation: embersScroll1 10s linear infinite;
}

/* Layer 2: larger soft embers */
body::after {
  opacity: 0.30;
  background-repeat: repeat;
  background-image:
    radial-gradient(circle, rgba(255,120,0,0.35) 0 2px, transparent 7px),
    radial-gradient(circle, rgba(255,80,0,0.32) 0 2px, transparent 8px),
    radial-gradient(circle, rgba(255,220,150,0.22) 0 2px, transparent 9px);
  background-size: 560px 560px, 820px 820px, 1040px 1040px;
  background-position: 20% 120%, 70% 90%, 40% 140%;
  filter: blur(0.8px);
  animation: embersScroll2 18s linear infinite;
}

/* Keep wiki content above embers */
.vector-header,
.mw-page-container,
#content,
.mw-body {
  position: relative;
  z-index: 1;
}

/* Animate the tile upward smoothly (no snap-glitch) */
@keyframes embersScroll1 {
  from { background-position: 10% 120%, 60% 140%, 90% 110%; }
  to   { background-position: -10% -120%, 55% -140%, 85% -110%; }
}
@keyframes embersScroll2 {
  from { background-position: 20% 140%, 70% 120%, 40% 160%; }
  to   { background-position: 30% -180%, 80% -160%, 50% -220%; }
}
/* DOOM STYLE for Vector 2022 sidebar portlets (Tools / Appearance) */
#mw-panel .mw-portlet,
.vector-sidebar-container .mw-portlet,
.vector-column-start .mw-portlet,
#mw-panel .vector-menu-portal,
.vector-sidebar-container .vector-menu-portal {
  background: rgba(0,0,0,0.75) !important;
  border: 1px solid rgba(255,120,0,0.30) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 18px rgba(255,120,0,0.12) !important;
  backdrop-filter: blur(4px);
}

/* Headings (“Tools”, “Appearance”) */
#mw-panel .mw-portlet h3,
.vector-sidebar-container .mw-portlet h3,
#mw-panel .vector-menu-heading,
.vector-sidebar-container .vector-menu-heading {
  margin: 0 !important;
  padding: 12px 12px !important;
  background: linear-gradient(to bottom, rgba(255,120,0,0.18), rgba(0,0,0,0)) !important;
  border-bottom: 1px solid rgba(255,120,0,0.22) !important;
  color: #f2f2f2 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
}

/* Content area inside portlets */
#mw-panel .mw-portlet .vector-menu-content,
#mw-panel .mw-portlet .mw-portlet-body,
.vector-sidebar-container .mw-portlet .vector-menu-content,
.vector-sidebar-container .mw-portlet .mw-portlet-body {
  padding: 10px 10px 12px !important;
}

/* Links inside */
#mw-panel .mw-portlet a,
.vector-sidebar-container .mw-portlet a {
  display: block !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  color: #eaeaea !important;
  text-decoration: none !important;
}
#mw-panel .mw-portlet a:hover,
.vector-sidebar-container .mw-portlet a:hover {
  background: rgba(255,120,0,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
  color: #ffd0a0 !important;
}
/************ DOOM STYLE: TOOLS BOX ONLY ************/

/* Tools box container */
#p-tb {
  background: rgba(0,0,0,0.78) !important;
  border: 1px solid rgba(255,120,0,0.32) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 18px rgba(255,120,0,0.12) !important;
  backdrop-filter: blur(4px);
}

/* Tools header (“Tools” + hide) */
#p-tb > h3,
#p-tb .vector-menu-heading {
  margin: 0 !important;
  padding: 12px 12px !important;
  background: linear-gradient(to bottom, rgba(255,120,0,0.18), rgba(0,0,0,0)) !important;
  border-bottom: 1px solid rgba(255,120,0,0.22) !important;
  color: #f2f2f2 !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
}

/* Tools inner content */
#p-tb .vector-menu-content,
#p-tb .mw-portlet-body {
  padding: 10px 10px 12px !important;
}

/* Section dividers inside Tools */
#p-tb hr {
  border: 0 !important;
  border-top: 1px solid rgba(255,120,0,0.18) !important;
  margin: 10px 6px !important;
}

/* Links inside Tools */
#p-tb a {
  display: block !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  color: #eaeaea !important;
  text-decoration: none !important;
}

#p-tb a:hover {
  background: rgba(255,120,0,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
  color: #ffd0a0 !important;
  text-decoration: none !important;
}
/************ DOOM STYLE: APPEARANCE BOX (EXACT ID) ************/

/* Appearance box container */
#vector-appearance {
  background: rgba(0,0,0,0.78) !important;
  border: 1px solid rgba(255,120,0,0.32) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    0 0 18px rgba(255,120,0,0.12) !important;
  backdrop-filter: blur(4px);
}

/* Header row (“Appearance” + hide) */
#vector-appearance > h3,
#vector-appearance .vector-menu-heading {
  margin: 0 !important;
  padding: 12px 12px !important;
  background: linear-gradient(
    to bottom,
    rgba(255,120,0,0.18),
    rgba(0,0,0,0)
  ) !important;
  border-bottom: 1px solid rgba(255,120,0,0.22) !important;
  color: #f2f2f2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px !important;
  text-transform: uppercase !important;
}

/* Inner content */
#vector-appearance .vector-menu-content,
#vector-appearance .mw-portlet-body {
  padding: 10px 10px 12px !important;
}

/* Section labels (Text / Width) */
#vector-appearance h4 {
  color: rgba(255,180,120,0.95) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin: 10px 6px 6px !important;
}

/* Dividers */
#vector-appearance hr {
  border: 0 !important;
  border-top: 1px solid rgba(255,120,0,0.18) !important;
  margin: 10px 6px !important;
}

/* Radio buttons */
#vector-appearance input[type="radio"] {
  accent-color: rgb(255,120,0) !important;
}

/* Make each option row feel clickable */
#vector-appearance label,
#vector-appearance .oo-ui-fieldLayout {
  display: block !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  cursor: pointer;
}

/* Hover glow */
#vector-appearance label:hover,
#vector-appearance .oo-ui-fieldLayout:hover {
  background: rgba(255,120,0,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
}

/* Checked radio emphasis */
#vector-appearance input[type="radio"]:checked + label {
  background: rgba(255,120,0,0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,120,0,0.35) !important;
}
/************ APPEARANCE RADIO ALIGNMENT FIX (robust) ************/

/* Reset anything we did to labels/rows that could break OOUI */
#vector-appearance label,
#vector-appearance .oo-ui-fieldLayout,
#vector-appearance .oo-ui-fieldLayout-body {
  display: block !important;
}

/* Make each option row have a consistent left gutter for the radio */
#vector-appearance .oo-ui-fieldLayout {
  position: relative !important;
  padding: 8px 10px 8px 42px !important; /* LEFT SPACE FOR RADIO */
  border-radius: 12px !important;
}

/* Put the actual radio control in that left gutter */
#vector-appearance .oo-ui-inputWidget,
#vector-appearance .oo-ui-radioInputWidget,
#vector-appearance input[type="radio"] {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* Text always starts after the radio */
#vector-appearance .oo-ui-labelElement-label,
#vector-appearance label {
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Hover/active row styling (on the wrapper, not the label) */
#vector-appearance .oo-ui-fieldLayout:hover {
  background: rgba(255,120,0,0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255,120,0,0.28) !important;
}

/* Optional: make the section headings not crowd the first option */
#vector-appearance h4 {
  margin-bottom: 10px !important;
}
/******** FINAL TEXT NUDGE (Appearance radios) ********/

/* Move label text right + slightly up */
#vector-appearance .oo-ui-labelElement-label,
#vector-appearance label {
  position: relative !important;
  left: 20px;     /* move text right */
  top: -5px;     /* move text up */
  line-height: 1.15 !important;
}
/* === CLICK FIX: ensure nothing overlays header/user links === */

/* If you have a header overlay, it must not capture clicks */
.vector-header::before,
.vector-sticky-header::before {
  pointer-events: none !important;
}

/* Force ember layers behind everything (even if z-index got changed elsewhere) */
body::before,
body::after {
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Put header + user links above page containers */
.vector-header,
.vector-sticky-header,
.vector-user-links,
.vector-user-links-dropdown,
.vector-user-menu,
#p-personal,
#pt-userpage,
#pt-logout,
#pt-login {
  position: relative !important;
  z-index: 50 !important;
}

/* Prevent page container from covering the header */
.mw-page-container,
.mw-page,
.mw-page-container-inner,
#content {
  position: relative !important;
  z-index: 1 !important;
}
html {
  color-scheme: dark !important;
}

html[data-mw-skin-theme="light"] {
  --background-color-base: #000 !important;
  --background-color-neutral: #000 !important;
  --background-color-interactive: #111 !important;
  --color-base: #e7e7e7 !important;
}
/************ FORCE DARK (Vector 2022) — KILL REMAINING WHITE ************/

/* Default browser form controls to dark */
html { color-scheme: dark !important; }

/* Force the skin theme variable surfaces dark even if Vector says "light" */
html[data-mw-skin-theme="light"],
html:not([data-mw-skin-theme]) {
  --background-color-base: #000 !important;
  --background-color-neutral: #0a0a0a !important;
  --background-color-interactive: #111 !important;
  --background-color-progressive: #111 !important;
  --background-color-subtle: #0b0b0b !important;

  --color-base: #e7e7e7 !important;
  --color-emphasized: #fff !important;

  --border-color-base: rgba(255,120,0,0.22) !important;
  --border-color-subtle: rgba(255,120,0,0.16) !important;
}

/* Hard override common white containers */
html[data-mw-skin-theme="light"] body,
html:not([data-mw-skin-theme]) body,
.vector-header,
.vector-sticky-header,
.mw-page-container,
.mw-content-container,
.vector-body,
.vector-sidebar-container,
.vector-toc,
.mw-panel,
.vector-page-tools,
.vector-dropdown-content,
.vector-menu-portal,
.vector-menu-content,
.mw-portlet,
.mw-body,
#content {
  background-color: rgba(0,0,0,0) !important;
  color: #e7e7e7 !important;
}

/* Links stay readable */
a { color: #ffb36b; }
a:hover { color: #ffd2a2; }

/* Inputs / search boxes */
input, textarea, select {
  background: rgba(0,0,0,0.65) !important;
  color: #e7e7e7 !important;
  border: 1px solid rgba(255,120,0,0.22) !important;
}
/******** HIDE APPEARANCE MENU FOR LOGGED-OUT USERS ********/

/* Appearance portlet (Vector 2022) */
.mw-anon #vector-appearance {
  display: none !important;
}

/******** FORCE-HIDE APPEARANCE FOR LOGGED-OUT USERS ********/

/* Body class for anonymous users */
.mw-anon {

  /* Hide Appearance portlet by ID (when present) */
  #vector-appearance,

  /* Hide Appearance menu portal (Vector 2022 anon layout) */
  .vector-appearance,

  /* Hide any menu explicitly labeled Appearance */
  .vector-menu-portal[aria-labelledby*="appearance"],
  .vector-menu-portal[aria-label*="Appearance"],
  nav[aria-labelledby*="appearance"],
  nav[aria-label*="Appearance"] {
    display: none !important;
  }
}
/******** HIDE APPEARANCE (PINNED CONTAINER) FOR LOGGED-OUT USERS ********/
.mw-anon #vector-appearance-pinned-container {
  display: none !important;
}
/******** HARD-KILL APPEARANCE UI FOR LOGGED-OUT USERS ********/

/* Any Appearance container by ID */
.mw-anon #vector-appearance,
.mw-anon #vector-appearance-pinned-container,

/* Any Appearance container by class */
.mw-anon .vector-appearance,
.mw-anon .vector-appearance-pinned-container,

/* Any Vector menu explicitly labeled Appearance */
.mw-anon nav[aria-label="Appearance"],
.mw-anon nav[aria-labelledby*="appearance"],
.mw-anon .vector-menu-portal[aria-label="Appearance"],
.mw-anon .vector-menu-portal[aria-labelledby*="appearance"],

/* Nuclear option: any portlet whose heading text is Appearance */
.mw-anon .mw-portlet:has(.vector-menu-heading:has-text("Appearance")) {
  display: none !important;
}
/******** HIDE APPEARANCE LANDMARK (LOGGED OUT ONLY) ********/
.mw-anon nav.vector-appearance-landmark[aria-label="Appearance"] {
  display: none !important;
}
/******** HIDE BY DEFAULT, SHOW ONLY WHEN LOGGED IN ********/
nav.vector-appearance-landmark[aria-label="Appearance"],
#vector-appearance-pinned-container {
  display: none !important;
}

/* Logged-in pages usually have #pt-userpage */
#pt-userpage ~ * nav.vector-appearance-landmark[aria-label="Appearance"],
#pt-userpage ~ * #vector-appearance-pinned-container {
  display: block !important;
}

/******** REMOVE LEFTOVER BAR AFTER HIDING APPEARANCE (LOGGED OUT) ********/

/* When logged out (no userpage link), remove the pinned/sticky container styling */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* If it’s still reserving height, collapse it */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/******** REMOVE LEFTOVER GRADIENT BAR (LOGGED OUT) ********/

/* Logged out detection (no user page link) */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner,
body:not(:has(#pt-userpage)) nav.vector-page-tools-landmark,
body:not(:has(#pt-userpage)) nav.vector-page-tools-landmark > * {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

/* Collapse the bar height if it’s just an empty pinned strip */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* If a pseudo-element is drawing the gradient */
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container::before,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container::after,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner::before,
body:not(:has(#pt-userpage)) .vector-sticky-pinned-container-inner::after {
  content: none !important;
  display: none !important;
}
/******** FINAL SEARCH CENTER + SIZE FIX ********/

/* Center relative to header */
.vector-header,
.vector-sticky-header {
  position: relative !important;
}

/* Center the search form itself */
#searchform {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-75%) !important;

  /* CONTROL SIZE */
  width: 520px !important;       /* <- normal desktop size */
  max-width: 80vw !important;    /* responsive on small screens */

  margin: 0 !important;
}

/* Prevent Codex from stretching inner elements */
#searchform .cdx-search-input,
#searchform .cdx-typeahead-search__form,
#searchform .cdx-text-input {
  width: 100% !important;
  flex: 0 0 auto !important;
}

/* Ensure right-side buttons stay put */
.vector-header .vector-header-end,
.vector-sticky-header .vector-header-end,
.vector-user-links,
#p-personal {
  position: relative !important;
  z-index: 10 !important;
}
/******** SEARCH BUTTON DOOM POLISH ********/

/* Search button */
#searchform button,
#searchform .cdx-button,
#searchform .searchButton {
  background: rgba(0,0,0,0.85) !important;
  color: #f2f2f2 !important;

  border: 1px solid rgba(255,120,0,0.30) !important;
  border-left: 1px solid rgba(255,120,0,0.45) !important; /* divider emphasis */
  border-radius: 0 !important;

  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
}

/* Hover */
#searchform button:hover,
#searchform .cdx-button:hover,
#searchform .searchButton:hover {
  background: rgba(255,120,0,0.12) !important;
  border-color: rgba(255,120,0,0.45) !important;
}

/* Active / pressed */
#searchform button:active,
#searchform .cdx-button:active {
  background: rgba(255,120,0,0.18) !important;
}
/* Doom Archives main page icon grid */
.doom-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin: 30px 0;
  text-align: center;
}

.doom-archive-icon img {
  width: 100%;
  max-width: 100px;
  border: 2px solid #3a0000;
  background: #000;
  padding: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doom-archive-icon img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(180, 0, 0, 0.8);
}
/* ===== Vector 2022 sidebar icons (pinned main menu) ===== */

/* Target BOTH legacy panel and Vector 2022 main menu containers */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a {
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 16px;
}

/* Use Special:Redirect/file so MediaWiki serves the right file URL */
#mw-panel a[href*="Category:Doom_(1993)"],
#vector-main-menu-pinned-container a[href*="Category:Doom_(1993)"],
nav.vector-main-menu a[href*="Category:Doom_(1993)"] {
  background-image: url(/index.php?title=Special:Redirect/file/Doom1993.png);
}

#mw-panel a[href*="Category:Doom_II"],
#vector-main-menu-pinned-container a[href*="Category:Doom_II"],
nav.vector-main-menu a[href*="Category:Doom_II"] {
  background-image: url(/index.php?title=Special:Redirect/file/Doom2.png);
}

#mw-panel a[href*="Category:Doom_3"],
#vector-main-menu-pinned-container a[href*="Category:Doom_3"],
nav.vector-main-menu a[href*="Category:Doom_3"] {
  background-image: url(/index.php?title=Special:Redirect/file/Doom3.png);
}

#mw-panel a[href*="Category:Doom_(2016)"],
#vector-main-menu-pinned-container a[href*="Category:Doom_(2016)"],
nav.vector-main-menu a[href*="Category:Doom_(2016)"] {
  background-image: url(/index.php?title=Special:Redirect/file/Doom2016.png);
}

#mw-panel a[href*="Category:Doom_Eternal"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Eternal"],
nav.vector-main-menu a[href*="Category:Doom_Eternal"] {
  background-image: url(/index.php?title=Special:Redirect/file/DoomEternal.png);
}

#mw-panel a[href*="Category:Doom_The_Dark_Ages"],
#vector-main-menu-pinned-container a[href*="Category:Doom_The_Dark_Ages"],
nav.vector-main-menu a[href*="Category:Doom_The_Dark_Ages"] {
  background-image: url(/index.php?title=Special:Redirect/file/DoomDarkAges.png);
}

#mw-panel a[href*="Category:Doom_Movies"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Movies"],
nav.vector-main-menu a[href*="Category:Doom_Movies"] {
  background-image: url(/index.php?title=Special:Redirect/file/DoomMovies.png);
}

#mw-panel a[href*="Category:Doom_Other"],
#vector-main-menu-pinned-container a[href*="Category:Doom_Other"],
nav.vector-main-menu a[href*="Category:Doom_Other"] {
  background-image: url(/index.php?title=Special:Redirect/file/DoomOther.png);
}
/* ===== Doom sidebar icons: bigger + proper spacing ===== */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a{
  background-size: 32px auto !important;     /* 2x size */
  background-position: 10px center !important;
  padding-left: 52px !important;            /* shift text right */
  line-height: 34px !important;             /* prevents overlap */
  min-height: 34px !important;
  display: block;                           /* ensures padding applies cleanly */
}
/* ===== Doom sidebar icons (robust): use ::before so hover can't wipe them ===== */

/* 1) Base styling for sidebar links: make room for an icon */
#mw-panel .vector-menu-content a,
#vector-main-menu-pinned-container .vector-menu-content a,
nav.vector-main-menu .vector-menu-content a,
nav.vector-main-menu a {
  position: relative !important;
  padding-left: 56px !important;    /* space for icon */
  line-height: 34px !important;
  min-height: 34px !important;
  display: block !important;

  /* IMPORTANT: stop using background-image on the link itself */
  background-image: none !important;
}

/* 2) The icon element */
#mw-panel .vector-menu-content a::before,
#vector-main-menu-pinned-container .vector-menu-content a::before,
nav.vector-main-menu .vector-menu-content a::before,
nav.vector-main-menu a::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 32px !important;
  height: 32px !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* keeps aspect ratio, no stretching */

  opacity: 1 !important;
  pointer-events: none !important;
}

/* 3) Assign the icon per category link (uses the same matching you already had) */
#mw-panel a[href*="Category:Doom_(1993)"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_(1993)"]::before,
nav.vector-main-menu a[href*="Category:Doom_(1993)"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/Doom1993.png) !important;
}

#mw-panel a[href*="Category:Doom_II"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_II"]::before,
nav.vector-main-menu a[href*="Category:Doom_II"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/Doom2.png) !important;
}

#mw-panel a[href*="Category:Doom_3"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_3"]::before,
nav.vector-main-menu a[href*="Category:Doom_3"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/Doom3.png) !important;
}

#mw-panel a[href*="Category:Doom_(2016)"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_(2016)"]::before,
nav.vector-main-menu a[href*="Category:Doom_(2016)"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/Doom2016.png) !important;
}

#mw-panel a[href*="Category:Doom_Eternal"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Eternal"]::before,
nav.vector-main-menu a[href*="Category:Doom_Eternal"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/DoomEternal.png) !important;
}

#mw-panel a[href*="Category:Doom_The_Dark_Ages"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_The_Dark_Ages"]::before,
nav.vector-main-menu a[href*="Category:Doom_The_Dark_Ages"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/DoomDarkAges.png) !important;
}

#mw-panel a[href*="Category:Doom_Movies"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Movies"]::before,
nav.vector-main-menu a[href*="Category:Doom_Movies"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/DoomMovies.png) !important;
}

#mw-panel a[href*="Category:Doom_Other"]::before,
#vector-main-menu-pinned-container a[href*="Category:Doom_Other"]::before,
nav.vector-main-menu a[href*="Category:Doom_Other"]::before {
  background-image: url(/index.php?title=Special:Redirect/file/Other.png) !important;
}
/* ===== Vector 2022: remove the main-menu header controls (Hide/Pin/etc.) ===== */

/* Pinned menu header action buttons */
#vector-main-menu-pinned-container .vector-pinnable-header-toggle,
#vector-main-menu-pinned-container .vector-pinnable-header-buttons,
#vector-main-menu-pinned-container .vector-pinnable-header-actions,
#vector-main-menu-pinned-container .vector-pinnable-header,
#vector-main-menu-pinned-container .vector-menu-heading-actions,
#vector-main-menu-pinned-container .vector-menu-heading {
  display: none !important;
}

/* Also cover nav variant */
nav.vector-main-menu .vector-pinnable-header-toggle,
nav.vector-main-menu .vector-pinnable-header-buttons,
nav.vector-main-menu .vector-pinnable-header-actions,
nav.vector-main-menu .vector-pinnable-header,
nav.vector-main-menu .vector-menu-heading-actions,
nav.vector-main-menu .vector-menu-heading {
  display: none !important;
}
nav.vector-main-menu-landmark{
  background: rgba(0,0,0,0.85) !important;
  border: 1px solid rgba(255,120,0,0.30) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 0 18px rgba(255,120,0,0.18) !important;
}

/* ===== FINAL: keep only OUTER frame, kill any INNER frame lines ===== */

/* Keep your OUTER frame exactly here */
nav.vector-main-menu-landmark {
  background: rgba(0,0,0,0.85) !important;
  border: 1px solid rgba(255,120,0,0.30) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Kill ALL inner borders/shadows/gradients that can look like a second outline */
nav.vector-main-menu-landmark :is(
  #vector-main-menu-pinned-container,
  nav.vector-main-menu,
  .vector-menu-portal,
  .vector-menu-content,
  .mw-portlet,
  .vector-pinnable-header,
  .vector-pinnable-header-buttons,
  .vector-pinnable-header-actions,
  .vector-menu-heading,
  .vector-menu-heading-actions
),
nav.vector-main-menu-landmark :is(
  #vector-main-menu-pinned-container *,
  nav.vector-main-menu *,
  .vector-menu-portal *,
  .vector-menu-content *,
  .mw-portlet *
) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;  /* <-- key for "inner line" gradients */
}

/* Kill pseudo-elements that often draw inner frames */
nav.vector-main-menu-landmark :is(
  #vector-main-menu-pinned-container,
  nav.vector-main-menu,
  .vector-menu-portal,
  .vector-menu-content,
  .mw-portlet,
  .vector-menu-heading
)::before,
nav.vector-main-menu-landmark :is(
  #vector-main-menu-pinned-container,
  nav.vector-main-menu,
  .vector-menu-portal,
  .vector-menu-content,
  .mw-portlet,
  .vector-menu-heading
)::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  background: none !important;
}
/* Make the orange border wrapper match the sidebar black */
nav.vector-main-menu-landmark {
  background-color: rgba(0,0,0,0.85) !important; /* same Doom black */
}
/* ===== CLASSIC DOOM (1993) TYPOGRAPHY ===== */

/* Body text — gritty but readable */
body,
.mw-body,
.mw-parser-output,
.vector-body {
  font-family: 'Roboto Condensed', Arial, sans-serif !important;
  letter-spacing: 0.015em;
}

/* Page titles & section headers */
h1, h2, h3, h4, h5, h6,
.mw-first-heading {
  font-family: 'Metal Mania', Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #f5c542; /* classic Doom yellow */
}

/* Sidebar + menu links */
nav.vector-main-menu-landmark,
.vector-menu-content a,
#mw-panel {
  font-family: 'Roboto Condensed', Arial, sans-serif !important;
  letter-spacing: 0.05em;
}

/* Sidebar category emphasis */
.vector-menu-content a {
  font-weight: 700;
}
h1, h2, h3, h4, h5, h6,
.mw-first-heading {
  font-family: 'Bebas Neue', Arial, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #f5c542;
}
/* ===== REMOVE CONTENTS / TOC EVERYWHERE ===== */

/* Standard table of contents */
#toc,
.toc,
.mw-table-of-contents {
  display: none !important;
}

/* Vector 2022 sticky Contents panel */
.vector-toc,
.vector-toc-pinned,
.vector-toc-pinned-container,
#vector-toc-pinned-container {
  display: none !important;
}

/* Remove the toggle button / label */
.vector-toc-toggle,
.vector-toc-toggle-button {
  display: none !important;
}

/* Prevent layout gap where TOC used to be */
.mw-body-content {
  margin-right: 0 !important;
}
/* ===== FORCE Vector 2022 search input text color ===== */

/* Actual typed text */
html body .cdx-text-input__input,
html body .vector-search-box-input,
html body #searchInput {
  color: #f5c542 !important;        /* Doom yellow */
  caret-color: #f5c542 !important; /* Cursor color */
}

/* Placeholder text */
html body .cdx-text-input__input::placeholder,
html body .vector-search-box-input::placeholder,
html body #searchInput::placeholder {
  color: rgba(245,197,66,0.65) !important;
}

/* Chrome autofill fix */
html body .cdx-text-input__input:-webkit-autofill,
html body .vector-search-box-input:-webkit-autofill,
html body #searchInput:-webkit-autofill {
  -webkit-text-fill-color: #f5c542 !important;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0.85) inset !important;
}
/* ===== FORCE Vector 2022 search magnifying glass color ===== */

/* 1) Override Codex icon color variables within the search box */
html body .vector-search-box,
html body .cdx-search-input {
  --color-base: #f5c542 !important;
  --color-base--hover: #ffd966 !important;
  --color-subtle: #f5c542 !important;
  --color-subtle--hover: #ffd966 !important;
  --color-emphasized: #f5c542 !important;
}

/* 2) Force the actual SVG + PATH to Doom yellow */
html body .vector-search-box svg,
html body .vector-search-box svg * ,
html body .cdx-search-input__icon svg,
html body .cdx-search-input__icon svg * ,
html body .cdx-icon svg,
html body .cdx-icon svg * {
  fill: #f5c542 !important;
  stroke: #f5c542 !important;
  color: #f5c542 !important;
}
/* ===== Doom readability overlay: PAGE CONTENT ===== */

/* Ensure outer containers are transparent */
.mw-body,
.vector-body,
.mw-body-content {
  background: transparent !important;
  box-shadow: none !important;
}

/* Apply ONE shading layer to article content only */
#mw-content-text {
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 12px;
  padding: 18px;
}
/* ===== Doom icon hover effect (Main Page) ===== */

/* Target main page icons only */
.page-Main_Page a img {
  transition: 
    transform 0.18s ease,
    filter 0.18s ease;
}

/* Hover effect */
.page-Main_Page a:hover img {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 6px rgba(245,197,66,0.55))
    drop-shadow(0 0 14px rgba(255,120,0,0.35));
}
/* ===== Doom-style STICKY header only (Vector 2022) ===== */

/* Style ONLY the sticky header bar */
.vector-sticky-header .vector-page-titlebar,
.vector-sticky-header .vector-page-titlebar-title {
  background: rgba(0,0,0,0.85) !important;
  border-bottom: 1px solid rgba(255,120,0,0.35) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.70) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Sticky header title text */
.vector-sticky-header .mw-page-title-main,
.vector-sticky-header .vector-page-titlebar .mw-page-title-main {
  font-family: 'Bebas Neue', Arial, sans-serif !important;
  color: #f5c542 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  text-shadow: 0 0 4px rgba(245,197,66,0.35) !important;
}
.relic-card{
  max-width:980px;
  margin:18px auto;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,120,0,.30);
  background:rgba(0,0,0,.55);
}

.relic-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,120,0,.22);
}

.relic-title{
  font-size:20px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.relic-chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid rgba(255,120,0,.35);
  background:rgba(0,0,0,.35);
}

.relic-body{
  display:grid;
  grid-template-columns:440px 1fr;
  gap:16px;
}

.relic-noimg{
  height:240px;
  border-radius:12px;
  border:1px dashed rgba(255,120,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.85;
}

.relic-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,120,0,.18);
  background:rgba(0,0,0,.35);
  margin-bottom:8px;
}

.relic-row .k{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
}

.relic-desc--full{
  margin-top:18px;
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(255,120,0,.18);
  background:rgba(0,0,0,.35);
}

.relic-desc--full .k{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:6px;
}

.relic-desc--full .desc{
  line-height:1.6;
  white-space:pre-wrap;
}

@media (max-width: 860px){
  .relic-body{
    grid-template-columns: 1fr;
  }
}
.doom-divider {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,120,0,0.45),
    transparent
  );
  margin: 28px 0;
}

}
/* Main page action buttons: left + right */
.doom-main-buttons{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 1100px;
  margin: 28px auto;

  gap: 24px;
}

.doom-main-buttons .doom-btn{
  display: block;
}

/* prevent MediaWiki paragraph wrappers from breaking the row */
.doom-main-buttons p{
  margin: 0 !important;
}

/* hover polish */
.doom-main-buttons img{
  transition: transform .18s ease, filter .18s ease;
}
.doom-main-buttons a:hover img{
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 6px rgba(245,197,66,0.55))
    drop-shadow(0 0 14px rgba(255,120,0,0.35));
}

/* optional mobile stack */
@media (max-width: 700px){
  .doom-main-buttons{
    flex-direction: column !important;
  }
}
/* === Doom floating buttons (front page) === */

/* Base float animation */
@keyframes doomFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Apply to main-page button images only */
.page-Main_Page img[alt="Add a Relic"],
.page-Main_Page img[alt="Random Relic"],
.page-Main_Page img[alt="How to Contribute"] {
  animation: doomFloat 4.5s ease-in-out infinite;
}

/* Slight desync so they don't move together */
.page-Main_Page img[alt="Random Relic"] {
  animation-delay: 1.2s;
}

.page-Main_Page img[alt="How to Contribute"] {
  animation-delay: 2.4s;
}

/* === REMOVE HEADER BLUR (Vector 2022) === */

.vector-header,
.vector-sticky-header,
.vector-header-start,
.vector-header-end {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* ==================================================
   DOOM CACODEMON EVENT — REQUIRED CSS (NO-FLICKER)
   ================================================== */

#doom-fx-layer{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 240px;           /* top band */
  pointer-events: none;    /* never blocks clicks */
  z-index: 1;              /* behind UI */
  overflow: visible;
}

/* Keep UI above FX */
.skin-vector-2022 .vector-header,
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .mw-content-container,
.skin-vector-2022 #content,
.skin-vector-2022 .mw-body,
.skin-vector #mw-head,
.skin-vector #content,
.skin-vector .mw-body,
.skin-vector #mw-panel{
  position: relative;
  z-index: 5;
}

/* Demon container */
.doom-demon{
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0.95;
  filter:
    drop-shadow(0 0 10px rgba(255,90,0,0.35))
    drop-shadow(0 10px 14px rgba(0,0,0,0.45));
  will-change: transform;
}

/* Two stacked frames (NO blink) */
.doom-demon .doom-frame{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 1;
  transition: opacity 80ms steps(1,end);
  will-change: opacity;
}

.doom-demon.is-alt .frame-a{ opacity: 0; }
.doom-demon.is-alt .frame-b{ opacity: 1; }
.doom-demon:not(.is-alt) .frame-a{ opacity: 1; }
.doom-demon:not(.is-alt) .frame-b{ opacity: 0; }

/* (Optional) smaller on mobile */
@media (max-width: 768px){
  .doom-demon{ width: 80px; height: 80px; }
}
/* ===== CLASSIC DOOM PLASMA (required) ===== */
.doom-plasma{
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 2px;

  background:
    radial-gradient(circle at 50% 50%,
      #FFFFFF 0%,
      #FFFFFF 10%,
      #FFB7B7 11%,
      #FFB7B7 18%,
      #FF5F5F 19%,
      #FF5F5F 30%,
      #E70000 31%,
      #E70000 42%,
      #BF0000 43%,
      #BF0000 52%,
      #5F7FFF 53%,
      #5F7FFF 62%,
      #3F63FF 63%,
      #3F63FF 72%,
      #2F4FEF 73%,
      #2F4FEF 80%,
      #1F3FBF 81%,
      #1F3FBF 88%,
      transparent 89%
    );

  box-shadow:
    0 0 2px  #FF5F5F,
    0 0 6px  #E70000,
    0 0 10px #BF0000,
    0 0 6px  #5F7FFF,
    0 0 12px #3F63FF,
    0 0 20px #2F4FEF;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  opacity: 0.96;
  will-change: transform, opacity;

  animation:
    plasmaPixelFlicker 0.18s steps(2) infinite,
    plasmaSpin 0.45s steps(8) infinite;
}

@keyframes plasmaPixelFlicker{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes plasmaSpin{
  0%   { rotate: 0deg; }
  100% { rotate: 360deg; }
}
/* === RELIC PAGE: FORCE META TO RIGHT OF IMAGE === */

.relic-body{
  display: grid;
  grid-template-columns: 440px 1fr;
  align-items: start;
}

/* Left column = image only */
.relic-media{
  grid-column: 1;
}

/* Right column = all metadata rows */
.relic-meta{
  grid-column: 2;
}

/* Description always full-width BELOW */
.relic-desc--full{
  grid-column: 1 / -1;
  margin-top: 18px;
}
/* === FORCE ALL LINKS TO DOOM ORANGE (NO PURPLE VISITED) === */

/* Normal links */
a,
a:link {
  color: #f5c542 !important; /* Doom yellow/orange */
}

/* Visited links */
a:visited {
  color: #f5c542 !important;
}

/* Hover */
a:hover {
  color: #ffd966 !important;
}

/* Active / focus */
a:active,
a:focus {
  color: #ffd966 !important;
}
/* ===== REMOVE "Powered by MediaWiki" BUTTON ===== */
#footer-poweredbyico,
#footer-poweredby,
.mw-poweredby,
.mw-footer-poweredby {
  display: none !important;
}
/* Match category links box to logged-in gray */
#mw-normal-catlinks {
  background-color: #2a2a2a !important;  /* or whatever gray tone you use */
  border: 1px solid #444 !important;
  color: #ccc !important;
}

/* Optional: match the links too */
#mw-normal-catlinks a {
  color: #ccc !important;
}
#mw-normal-catlinks a:hover {
  color: #ff6600 !important; /* accent hover color if you use orange */
}
/* 🔧 Force dark theme on category box and its container */
#catlinks,
#mw-normal-catlinks,
div.catlinks,
div#mw-normal-catlinks {
  background: none !important;              /* remove default white */
  background-color: #2a2a2a !important;     /* your gray tone */
  border: 1px solid #444 !important;
  color: #ccc !important;
}

/* Fix inherited white padding/margins */
#catlinks,
#mw-normal-catlinks {
  padding: 0.5em 0.8em !important;
  margin: 1em 0 !important;
}

/* Style category links themselves */
#catlinks a,
#mw-normal-catlinks a {
  color: #ccc !important;
}
#catlinks a:hover,
#mw-normal-catlinks a:hover {
  color: #ff6600 !important; /* or your accent */
}

/* Extra: kill any white from surrounding body content */
.mw-body-content #catlinks,
.mw-body-content #mw-normal-catlinks {
  background-color: transparent !important;
}
/* ===== Doom Relics theme for account pages ===== */
body.mw-special-CreateAccount,
body.mw-special-UserLogin {
 background-color: transparent !important;
}                /* page background */
  --panel: rgba(33,33,36,0.85);  /* card/panel bg */
  --border: rgba(255,120,0,.30); /* your orange border accent */
  --text: #ddd;                  /* main text */
  --muted: #aaa;                 /* secondary text */
  --accent: #ff6600;             /* button/hover accent */
}

/* Page background & content area */
body.mw-special-CreateAccount .mw-page-container,
body.mw-special-CreateAccount .mw-workspace-container,
body.mw-special-CreateAccount .mw-content-container,
body.mw-special-CreateAccount .mw-body,
body.mw-special-CreateAccount .vector-body,
body.mw-special-UserLogin .mw-page-container,
body.mw-special-UserLogin .mw-workspace-container,
body.mw-special-UserLogin .mw-content-container,
body.mw-special-UserLogin .mw-body,
body.mw-special-UserLogin .vector-body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Main form “card” */
body.mw-special-CreateAccount .mw-htmlform,
body.mw-special-CreateAccount .mw-htmlform-ooui-wrapper,
body.mw-special-CreateAccount .oo-ui-panelLayout,
body.mw-special-CreateAccount .mw-message-box,
body.mw-special-UserLogin .mw-htmlform,
body.mw-special-UserLogin .mw-htmlform-ooui-wrapper,
body.mw-special-UserLogin .oo-ui-panelLayout,
body.mw-special-UserLogin .mw-message-box {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255,120,0,.12) inset, 0 8px 24px rgba(0,0,0,.35) !important;
  padding: 16px 18px !important;
}

/* Inputs */
body.mw-special-CreateAccount input,
body.mw-special-CreateAccount select,
body.mw-special-CreateAccount textarea,
body.mw-special-CreateAccount .oo-ui-inputWidget-input,
body.mw-special-UserLogin input,
body.mw-special-UserLogin select,
body.mw-special-UserLogin textarea,
body.mw-special-UserLogin .oo-ui-inputWidget-input {
  background: #141416 !important;
  border: 1px solid #444 !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}
body.mw-special-CreateAccount .oo-ui-labelWidget,
body.mw-special-UserLogin .oo-ui-labelWidget {
  color: var(--muted) !important;
}

/* Buttons (OOUI + mw-ui) */
body.mw-special-CreateAccount .oo-ui-buttonElement-button,
body.mw-special-CreateAccount .mw-ui-button,
body.mw-special-UserLogin .oo-ui-buttonElement-button,
body.mw-special-UserLogin .mw-ui-button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
body.mw-special-CreateAccount .oo-ui-buttonElement-button:hover,
body.mw-special-UserLogin .oo-ui-buttonElement-button:hover,
body.mw-special-CreateAccount .mw-ui-button:hover,
body.mw-special-UserLogin .mw-ui-button:hover {
  filter: brightness(1.05);
}

/* Links & small helper text */
body.mw-special-CreateAccount a,
body.mw-special-UserLogin a { color: var(--accent) !important; }
body.mw-special-CreateAccount .mw-form-related-link,
body.mw-special-UserLogin .mw-form-related-link { color: var(--muted) !important; }

/* Kill any stray white boxes */
body.mw-special-CreateAccount .mw-message-box,
body.mw-special-UserLogin .mw-message-box,
body.mw-special-CreateAccount .oo-ui-messageWidget,
body.mw-special-UserLogin .oo-ui-messageWidget {
  background-color: rgba(33,33,36,0.9) !important;
  border-color: var(--border) !important;
}

/* Optional: center/narrow the form like your main page cards */
body.mw-special-CreateAccount #content,
body.mw-special-UserLogin #content {
  max-width: 760px !important;
  margin: 0 auto !important;
}
/* === Force BLACK text in login/create-account validation messages === */

/* Codex banners (newer MW versions) */
body.mw-special-CreateAccount .cdx-message,
body.mw-special-UserLogin .cdx-message,
body.mw-special-CreateAccount .cdx-message__content,
body.mw-special-UserLogin .cdx-message__content {
  color: #000 !important;
  background: rgba(255,255,255,0.92) !important; /* readable light bg */
  border-color: #ccc !important;
}

/* OOUI inline banners (older MW / some flows) */
body.mw-special-CreateAccount .oo-ui-messageWidget,
body.mw-special-UserLogin .oo-ui-messageWidget,
body.mw-special-CreateAccount .oo-ui-messageWidget .oo-ui-labelElement-label,
body.mw-special-UserLogin .oo-ui-messageWidget .oo-ui-labelElement-label {
  color: #000 !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid #ccc !important;
}

/* OOUI validation popups attached to fields (tooltips) */
body.mw-special-CreateAccount .oo-ui-popupWidget-popup,
body.mw-special-UserLogin .oo-ui-popupWidget-popup,
body.mw-special-CreateAccount .oo-ui-toolTipWidget-popup,
body.mw-special-UserLogin .oo-ui-toolTipWidget-popup {
  color: #000 !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid #bbb !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.25) !important;
}

/* Make sure the text inside those popups inherits black */
body.mw-special-CreateAccount .oo-ui-popupWidget-popup * ,
body.mw-special-UserLogin .oo-ui-popupWidget-popup * {
  color: #000 !important;
}

/* Optional: keep error/warning accents without changing text color */
body.mw-special-CreateAccount .cdx-message--warning,
body.mw-special-UserLogin .cdx-message--warning,
body.mw-special-CreateAccount .oo-ui-messageWidget.oo-ui-flaggedElement-warning,
body.mw-special-UserLogin .oo-ui-messageWidget.oo-ui-flaggedElement-warning {
  border-color: #f0c36d !important;
}
body.mw-special-CreateAccount .cdx-message--error,
body.mw-special-UserLogin .cdx-message--error,
body.mw-special-CreateAccount .oo-ui-messageWidget.oo-ui-flaggedElement-error,
body.mw-special-UserLogin .oo-ui-messageWidget.oo-ui-flaggedElement-error {
  border-color: #e28b8b !important;
}
/* Hide the Tools section for everyone except logged-in admins */
body:not(.group-sysop) #p-tb,
body:not(.group-sysop) #p-tb-label,
body:not(.group-sysop) #p-tb ul {
  display: none !important;
}
/* === Match Create a Relic button to dark theme for all non-admins === */

/* For any user NOT in sysop group */
body:not(.group-sysop) .mw-ui-button,
body:not(.group-sysop) .oo-ui-buttonElement-button,
body:not(.group-sysop) .mw-ui-primary,
body:not(.group-sysop) .oo-ui-buttonElement-framed {
  background-color: #2a2a2a !important; /* your dark gray */
  color: #ddd !important;
  border: 1px solid #444 !important;
  text-shadow: none !important;
}

/* Hover/active effect */
body:not(.group-sysop) .mw-ui-button:hover,
body:not(.group-sysop) .oo-ui-buttonElement-button:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #555 !important;
}

/* Optional: specifically target your Create a Relic button by title or label text */
body:not(.group-sysop) a[title="Create a relic"],
body:not(.group-sysop) button:contains("Create a relic") {
  background-color: #2a2a2a !important;
  color: #ddd !important;
  border-color: #444 !important;
}
/* ===== Center the login page content ===== */
body.mw-special-UserLogin #content,
body.mw-special-UserLogin .mw-page-container,
body.mw-special-UserLogin .mw-content-container {
  /* keep the page centered with a sane width */
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Center the block with the form + helper links */
body.mw-special-UserLogin .mw-htmlform,
body.mw-special-UserLogin .mw-htmlform-ooui-wrapper,
body.mw-special-UserLogin .oo-ui-panelLayout {
  max-width: 760px !important;
  margin: 24px auto !important;
}

/* Center the “Join / Create account” helper line under the form */
body.mw-special-UserLogin .mw-form-related-link,
body.mw-special-UserLogin .mw-form-related-links {
  text-align: center !important;
}

/* Keep field labels/inputs aligned left inside the centered card */
body.mw-special-UserLogin .oo-ui-fieldLayout,
body.mw-special-UserLogin .oo-ui-fieldLayout-body {
  text-align: left !important;
}

/* ===== Make the Join/Create button gray ===== */
/* Codex buttons (newer MW) */
body.mw-special-UserLogin .cdx-button {
  background-color: #2a2a2a !important;
  color: #ddd !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
}
body.mw-special-UserLogin .cdx-button:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #555 !important;
}

/* OOUI + mw-ui buttons (older/new skins) */
body.mw-special-UserLogin .oo-ui-buttonElement-button,
body.mw-special-UserLogin .mw-ui-button {
  background-color: #2a2a2a !important;
  color: #ddd !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
}
body.mw-special-UserLogin .oo-ui-buttonElement-button:hover,
body.mw-special-UserLogin .mw-ui-button:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #555 !important;
}
/* ===== Center the login content (cover both body class variants) ===== */
body.mw-special-Userlogin #content,
body.page-Special_UserLogin #content,
body.mw-special-Userlogin .mw-htmlform,
body.page-Special_UserLogin .mw-htmlform,
body.mw-special-Userlogin .mw-htmlform-ooui-wrapper,
body.page-Special_UserLogin .mw-htmlform-ooui-wrapper {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep labels/inputs left-aligned inside the centered block */
body.mw-special-Userlogin .oo-ui-fieldLayout,
body.page-Special_UserLogin .oo-ui-fieldLayout {
  text-align: left !important;
}

/* ===== Make the "Join / Create account" control gray ===== */
/* Codex button */
body.mw-special-Userlogin a.cdx-button[href*="Special:CreateAccount"],
body.page-Special_UserLogin a.cdx-button[href*="Special:CreateAccount"] {
  background-color: #2a2a2a !important;
  color: #ddd !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
}
body.mw-special-Userlogin a.cdx-button[href*="Special:CreateAccount"]:hover,
body.page-Special_UserLogin a.cdx-button[href*="Special:CreateAccount"]:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #555 !important;
}

/* OOUI/mw-ui fallback (if it's rendered as a standard button) */
body.mw-special-Userlogin .oo-ui-buttonElement a.oo-ui-buttonElement-button[href*="CreateAccount"],
body.page-Special_UserLogin .oo-ui-buttonElement a.oo-ui-buttonElement-button[href*="CreateAccount"],
body.mw-special-Userlogin .mw-ui-button[href*="CreateAccount"],
body.page-Special_UserLogin .mw-ui-button[href*="CreateAccount"] {
  background-color: #2a2a2a !important;
  color: #ddd !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
}

/* If it's just a plain link in the helper line, style it like a button */
body.mw-special-Userlogin .mw-form-related-link a[href*="CreateAccount"],
body.page-Special_UserLogin .mw-form-related-link a[href*="CreateAccount"] {
  display: inline-block !important;
  padding: 10px 16px !important;
  background-color: #2a2a2a !important;
  color: #ddd !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}
body.mw-special-Userlogin .mw-form-related-link a[href*="CreateAccount"]:hover,
body.page-Special_UserLogin .mw-form-related-link a[href*="CreateAccount"]:hover {
  background-color: #3a3a3a !important;
  color: #fff !important;
  border-color: #555 !important;
}
/* Nix the hamburger on Login & Create Account (Vector 2022) */
body.mw-special-Userlogin #mw-sidebar-button,
body.mw-special-CreateAccount #mw-sidebar-button,
body.page-Special_UserLogin #mw-sidebar-button,
body.page-Special_CreateAccount #mw-sidebar-button,
body.mw-special-Userlogin #vector-main-menu-dropdown,
body.mw-special-CreateAccount #vector-main-menu-dropdown,
body.page-Special_UserLogin #vector-main-menu-dropdown,
body.page-Special_CreateAccount #vector-main-menu-dropdown {
  display: none !important;
}

/* Extra safety: any Vector header “menu” buttons by aria-label */
body.mw-special-Userlogin .vector-header .vector-button[aria-label*="menu"],
body.mw-special-CreateAccount .vector-header .vector-button[aria-label*="menu"],
body.page-Special_UserLogin .vector-header .vector-button[aria-label*="menu"],
body.page-Special_CreateAccount .vector-header .vector-button[aria-label*="menu"] {
  display: none !important;
}

/* Remove any leftover spacing where the button sat */
body.mw-special-Userlogin .vector-header-start,
body.mw-special-CreateAccount .vector-header-start,
body.page-Special_UserLogin .vector-header-start,
body.page-Special_CreateAccount .vector-header-start {
  gap: 0 !important;
}
/* === 0) General fluid rules (good everywhere) === */
img, video, iframe { max-width: 100%; height: auto; }
.mw-parser-output { overflow-wrap: anywhere; }

/* Make wide tables scroll instead of overflowing */
.mw-parser-output table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === 1) Button rows that auto-wrap === */
/* Add class="doom-row" around any row of buttons/links */
.doom-row {
  display: flex;
  flex-wrap: wrap;           /* prevents spillage */
  gap: 10px;
  align-items: center;
}

/* Add class="doom-btn" to individual buttons/links */
.doom-btn,
.doom-row .mw-ui-button,
.doom-row .oo-ui-buttonElement-button {
  flex: 1 1 220px;          /* grows, but will wrap below 220px */
  min-width: 180px;         /* sets a sane minimum */
  text-align: center;
}

/* === 2) Responsive typography (scales with screen) === */
:root {
  --ui-font: clamp(14px, 1.6vw, 18px);    /* auto scales */
  --ui-pad: clamp(8px, 1.2vw, 12px);
}
.doom-btn,
.mw-ui-button,
.oo-ui-buttonElement-button { 
  font-size: var(--ui-font);
  padding: var(--ui-pad) calc(var(--ui-pad) * 1.5);
}

/* === 3) Containers & cards don’t run off-screen === */
.doom-container, .mw-parser-output > .doom-card {
  box-sizing: border-box;
  max-width: 100%;
}

/* === 4) Small-screen tweaks === */
@media (max-width: 1024px) {
  /* Let big button bars stack nicely */
  .doom-row { justify-content: center; }

  /* If you have fixed-width side elements, allow full width on tablets */
  .doom-side, .doom-aside { width: 100% !important; }
}

@media (max-width: 768px) {
  /* Stack buttons vertically with full width */
  .doom-btn, .doom-row .mw-ui-button, .doom-row .oo-ui-buttonElement-button {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Tighten padding/margins on small screens */
  .mw-parser-output .doom-card,
  .mw-parser-output .doom-section {
    padding: 12px;
    margin: 10px 0;
  }

  /* Prevent headers/long titles from pushing layout */
  .firstHeading { font-size: clamp(18px, 5vw, 28px); line-height: 1.2; }
}

/* === 5) Make hero banners scale without overflow (if you use one) === */
.doom-hero {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/6;           /* keeps proportion; change as needed */
  object-fit: cover;
  border-radius: 12px;
}
/* === Make sidebar unsquish on tablets/laptops === */

/* 1) Vector 2022: let sidebar drop under content and span full width */
@media (max-width: 1100px) {
  /* Move sidebar below main content */
  .vector-column-start { order: 2 !important; width: 100% !important; }
  .vector-column-end, .vector-column-content { order: 1 !important; }

  /* Make the sidebar container full width and add breathing room */
  .vector-sidebar-container, .vector-sidebar { 
    width: 100% !important; 
    max-width: 100% !important; 
    padding: 8px 0 !important; 
  }

  /* Lay out portlet links in a wrapping grid so nothing gets cramped */
  .vector-sidebar .vector-menu-content-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .vector-sidebar .vector-menu-content-list > li {
    flex: 1 1 220px;        /* two–three columns depending on width */
    min-width: 160px;       /* stop ultra-narrow crunching */
  }

  /* Keep headings tidy */
  .vector-sidebar .vector-menu-heading {
    font-size: 0.95rem !important;
    margin: 8px 0 4px !important;
    white-space: normal !important;
  }
}

/* 2) Legacy Vector (#mw-panel): same idea */
@media (max-width: 1100px) {
  #mw-panel { 
    float: none !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 12px 0 !important;
  }
  #mw-panel .portal .body ul { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
  }
  #mw-panel .portal .body ul li { 
    flex: 1 1 220px; 
    min-width: 160px; 
  }
}

/* 3) Small phones: stack everything cleanly */
@media (max-width: 768px) {
  .vector-sidebar .vector-menu-content-list > li,
  #mw-panel .portal .body ul li {
    flex: 1 1 100%;
    min-width: 0;
  }
}
Rbutcher (talk | contribs)

Latest revision as of 15:57, 26 December 2025
