MediaWiki:KuranokaFX.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/*
 * KURANOKA / STORMBREAK v2
 * Site-local CSS interface page: MediaWiki:KuranokaFX.css
 * Injected ONLY on Kuranoka, with an additional class guard.
 * Never changes article text, links, headings, images, or existing layout.
 */
html.kk-stormbreak-enabled #kk-stormbreak-canvas {
  position: fixed !important;
  inset: 0 !important;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 600;
  opacity: 0;
  transition: opacity .75s ease;
  contain: strict;
}
html.kk-stormbreak-enabled.kk-stormbreak-active #kk-stormbreak-canvas { opacity: 1; }

/* The vignette draws on top of the skin; no filter is applied to its content. */
html.kk-stormbreak-enabled #kk-stormbreak-atmosphere {
  position: fixed !important;
  inset: 0 !important;
  z-index: 599;
  pointer-events: none !important;
  opacity: 0;
  background:
    radial-gradient(ellipse 60% 68% at 50% 50%, transparent 19%, rgba(4,10,30,.34) 56%, rgba(3,5,21,.87) 86%, rgba(1,2,12,.98) 100%),
    radial-gradient(ellipse 75% 65% at 85% 5%, rgba(37,25,112,.30), transparent 74%),
    conic-gradient(from 195deg at 50% 55%, rgba(79,6,64,.24), transparent 32%, rgba(11,62,137,.23) 60%, rgba(31,3,50,.23));
  transition: opacity 1s ease;
}
html.kk-stormbreak-enabled.kk-stormbreak-active #kk-stormbreak-atmosphere { opacity: var(--kk-atmosphere, .7); }

/* UI only: anchored outside article prose; never edits the article DOM content. */
html.kk-stormbreak-enabled #kk-stormbreak-controls {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 602;
  display: none;
  gap: 8px;
  align-items: center;
  font: 600 12px/1.25 system-ui, sans-serif;
  color: #ecf8ff;
  background: rgba(7,16,34,.91);
  border: 1px solid rgba(133,205,241,.56);
  border-radius: 7px;
  padding: 8px 10px;
  box-shadow: 0 10px 36px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
}
html.kk-stormbreak-enabled.kk-stormbreak-inchapter #kk-stormbreak-controls { display: flex; }
html.kk-stormbreak-enabled #kk-stormbreak-controls button {
  font: inherit;
  color: inherit;
  background: #172b47;
  padding: 7px 10px;
  border: 1px solid #6789ab;
  border-radius: 5px;
  cursor: pointer;
}
html.kk-stormbreak-enabled #kk-stormbreak-controls button:focus-visible,
html.kk-stormbreak-enabled #kk-stormbreak-controls input:focus-visible { outline: 2px solid #98e2ff; outline-offset: 3px; }
html.kk-stormbreak-enabled #kk-stormbreak-controls input[type="range"] { width: 66px; accent-color: #6fe4ff; }
html.kk-stormbreak-enabled #kk-stormbreak-controls label { white-space: nowrap; }
html.kk-stormbreak-enabled #kk-stormbreak-controls button[aria-pressed="true"] { background: #36577a; }

/* Position markers are zero-height; no typography, content, or layout alterations. */
html.kk-stormbreak-enabled .kk-fx-marker { display: block; height: 0; margin: 0; padding: 0; overflow: hidden; }
@media (max-width: 600px) {
  html.kk-stormbreak-enabled #kk-stormbreak-controls { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px; }
  html.kk-stormbreak-enabled #kk-stormbreak-controls input[type="range"] { width: 50px; }
  html.kk-stormbreak-enabled #kk-stormbreak-controls label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.kk-stormbreak-enabled #kk-stormbreak-canvas,
  html.kk-stormbreak-enabled #kk-stormbreak-atmosphere { transition: none; }
}