MediaWiki:Common.css: Difference between revisions

Revision as of 22:01, 22 December 2025

/* 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%; }
}