MediaWiki:Common.css

/* ── Van Gogh / Starry sky before TOC (pure CSS) ── */
/* 可调变量 */
:root{
  --vg-height: 240px;        /* 高度，按需改 */
  --swirl-duration: 40s;     /* 轮转速度 */
  --bg-deep: #07102a;
  --bg-mid:  #12336a;
  --accent:  #f7c85a;
}

/* 确保目录本身仍正常显示，并为伪元素提供定位上下文 */
#toc, .toc {
  position: relative;
  z-index: 1;
}

/* 基底图层（伪元素 before）——深色 + 画笔感渐变 */
#toc::before {
  content: "";
  display: block;
  width: 100%;
  height: var(--vg-height);
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background:
    /* 大范围色块（类似夜空底色）*/
    radial-gradient(1200px 400px at 10% 20%, rgba(247,200,90,0.10), transparent 20%),
    conic-gradient(from 120deg at 50% 50%, var(--bg-deep), var(--bg-mid), #1b4b7a);
  filter: contrast(115%) saturate(120%) blur(2px);
  transform-origin: 50% 50%;
  will-change: transform, filter;
  animation: vg-rotate var(--swirl-duration) linear infinite;
  box-shadow: 0 2px 18px rgba(2,6,20,0.45) inset;
}

/* 画笔状纹理（叠在基底上，利用 repeating-linear-gradient 模拟笔触）*/
#toc::before {
  background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 18px),
    radial-gradient(1200px 400px at 10% 20%, rgba(247,200,90,0.10), transparent 20%),
    conic-gradient(from 120deg at 50% 50%, var(--bg-deep), var(--bg-mid), #1b4b7a);
  background-blend-mode: overlay, normal, normal;
  background-size: cover;
}

/* 星点层（伪元素 after）——多个 radial-gradient 放在不同位置模拟随机星点 */
#toc::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--vg-height);
  pointer-events: none;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255,245,210,1) 0.6px, transparent 1px),
    radial-gradient(circle at 22% 42%, rgba(255,255,255,0.95) 0.8px, transparent 1px),
    radial-gradient(circle at 35% 30%, rgba(255,235,190,0.95) 0.7px, transparent 1px),
    radial-gradient(circle at 58% 18%, rgba(255,250,220,0.95) 0.9px, transparent 1px),
    radial-gradient(circle at 72% 60%, rgba(255,255,255,0.9) 0.6px, transparent 1px),
    radial-gradient(circle at 86% 38%, rgba(255,240,200,0.9) 0.8px, transparent 1px);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,220,120,0.12));
  animation: star-twinkle 3.8s ease-in-out infinite alternate;
  z-index: 2;
}

/* 小“月亮”高光（叠加） */
#toc .vg-moon{
  display: none; /* 如果你能编辑 HTML 可用下面的 HTML 标记显示月亮，否则可忽视 */
}

/* 动画 */
@keyframes vg-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes star-twinkle {
  0% { opacity: 0.7; transform: scale(0.98); filter: blur(0.2px); }
  100% { opacity: 1; transform: scale(1.05); filter: blur(0px); }
}

/* 响应式：手机端高度更小 */
@media (max-width:720px){
  :root{ --vg-height: 160px; --swirl-duration: 30s; }
}