Jump to content

MediaWiki:Common.css

From Doom Relics
Revision as of 12:28, 24 December 2025 by Rbutcher (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* 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/bg.png");
  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;
}
// Vector 2022: force the LEFT main menu open + pinned for logged-out users (desktop)
(function () {
  // Logged out only
  if (mw.config.get('wgUserName')) return;

  function clickFirst(selectors) {
    for (const sel of selectors) {
      const el = document.querySelector(sel);
      if (el) { el.click(); return true; }
    }
    return false;
  }

  function run() {
    // Desktop only (match your CSS breakpoint)
    if (window.matchMedia('(min-width: 1120px)').matches === false) return;

    // 1) Open the main menu if it's in "hamburger/drawer" mode
    clickFirst([
      // Common Vector 2022 menu toggle button selectors
      '.vector-header-start .vector-main-menu-dropdown .vector-menu-heading',
      '.vector-header-start .vector-main-menu-dropdown button',
      '.vector-header-start .vector-menu-toggle',
      '#vector-main-menu-dropdown .vector-menu-heading',
      '#vector-main-menu-dropdown button',
      '[aria-controls="vector-main-menu-dropdown"]',
      '[aria-controls="vector-main-menu"]'
    ]);

    // 2) Pin the main menu (so it stays on the left)
    clickFirst([
      // Different MW/Vector versions use different data-event-name strings
      '[data-event-name="pinnable-header.vector-main-menu.pin"]',
      '[data-event-name="pinnable-header.vector-main-menu.unpin"]', // sometimes inverted
      '#vector-main-menu-pinned-container [data-event-name$=".pin"]',
      '#vector-main-menu-pinned-container button'
    ]);
  }

  // Run after Vector finishes its UI setup
  const obs = new MutationObserver(() => {
    if (document.documentElement.classList.contains('vector-animations-ready')) {
      run();
      obs.disconnect();
      // Run again a moment later in case the first click happens before the menu exists
      setTimeout(run, 250);
      setTimeout(run, 1000);
    }
  });

  obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
})();
Retrieved from "https://doomrelics.com/index.php?title=MediaWiki:Common.css&oldid=35"