MediaWiki:Common.css

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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Psychedelic Background Base */
body {
  background: radial-gradient(circle at center, #ff00cc, #3333ff);
  animation: hueShift 60s infinite linear;
  overflow-x: hidden;
  background-attachment: fixed;
  background-size: 400% 400%;
  transition: background 1s ease-in-out;
}

/* Dynamic swirl overlay via pseudo element */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><filter id="swirl"><feTurbulence type="turbulence" baseFrequency="0.01 0.02" numOctaves="2" result="turbulence"/><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G"/></filter><rect width="100%" height="100%" filter="url(%23swirl)" fill="transparent"/></svg>') no-repeat center center;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: lighten;
  opacity: 0.15;
}

/* Keyframe for shifting hue */
@keyframes hueShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Optional star-like shimmer dots */
body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 2px, transparent 100px);
  animation: shimmer 80s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Star shimmer motion */
@keyframes shimmer {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1000px 1000px;
  }
}