MediaWiki:KuranokaFX.css：修订间差异

2026年10月21日 (三) 20:46的版本

/* STORMBREAK XV — Kuranoka only. Requires JS to add kk-stormbreak-v4 class.
   Does NOT change article typography, colors, font sizes, heading layouts, or Citizen components. */
html.kk-stormbreak-v4 #kk4-pressure,
html.kk-stormbreak-v4 #kk4-sky,
html.kk-stormbreak-v4 #kk4-rain,
html.kk-stormbreak-v4 #kk6-fracture {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  overflow: hidden !important;
  visibility: hidden;
  transform-origin: center center;
  contain: strict;
}
html.kk-stormbreak-v4 #kk4-pressure {z-index: 408; background: radial-gradient(ellipse 81% 78% at 51% 47%, transparent 27%, rgba(1,6,15,.17) 49%, rgba(0,2,8,.86) 96%), linear-gradient(180deg,rgba(0,5,18,.9),rgba(7,15,29,.07) 56%,rgba(1,5,14,.76));}
html.kk-stormbreak-v4 #kk4-sky {z-index: 409; will-change: transform;}
html.kk-stormbreak-v4 #kk4-rain {z-index: 410; will-change: transform;}
html.kk-stormbreak-v4 #kk6-fracture {z-index: 411; will-change: transform; opacity:.95;}
html.kk-stormbreak-v4.kk-v4-on #kk4-pressure,
html.kk-stormbreak-v4.kk-v4-on #kk4-sky,
html.kk-stormbreak-v4.kk-v4-on #kk4-rain,
html.kk-stormbreak-v4.kk-v4-on #kk6-fracture {visibility: visible;}
/* Protect the central copy without painting over or altering its actual text. */
html.kk-stormbreak-v4 #kk4-sky {
  -webkit-mask-image: radial-gradient(ellipse 62% 61% at 49% 50%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.44) 55%, #000 99%);
  mask-image: radial-gradient(ellipse 62% 61% at 49% 50%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.44) 55%, #000 99%);
}
/* Defeat lingering V2/V3 visual widgets if the browser was previously caching old sheets. */
html.kk-stormbreak-v4 #kk-stormbreak-controls,
html.kk-stormbreak-v4 #kk-stormbreak-canvas,
html.kk-stormbreak-v4 #kk-stormbreak-atmosphere,
html.kk-stormbreak-v4 #kk-sb3-sky,
html.kk-stormbreak-v4 #kk-sb3-glass,
html.kk-stormbreak-v4 #kk-sb3-choke {display:none!important;}
@media (max-width:680px){
  html.kk-stormbreak-v4 #kk4-sky {
    -webkit-mask-image:radial-gradient(ellipse 70% 68% at 49% 49%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.43) 58%,#000 100%);
    mask-image:radial-gradient(ellipse 70% 68% at 49% 49%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.43) 58%,#000 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  html.kk-stormbreak-v4 #kk4-pressure,
  html.kk-stormbreak-v4 #kk4-sky,
  html.kk-stormbreak-v4 #kk4-rain,
  html.kk-stormbreak-v4 #kk6-fracture {display:none!important;}
}
@media print{
  html.kk-stormbreak-v4 #kk4-pressure,
  html.kk-stormbreak-v4 #kk4-sky,
  html.kk-stormbreak-v4 #kk4-rain,
  html.kk-stormbreak-v4 #kk6-fracture {display:none!important;}
}

html.kk-stormbreak-v4 #kk4-rain {
  /* Uniform full-width rainfall, with only a slight central readability cutout. */
  -webkit-mask-image:radial-gradient(ellipse 95% 83% at 50% 48%,rgba(0,0,0,.83),#000 95%);
  mask-image:radial-gradient(ellipse 95% 83% at 50% 48%,rgba(0,0,0,.83),#000 95%);
}

/* Fragment layer is separate from article text; no text or Citizen styles changed. */
html.kk-stormbreak-v4 #kk6-fracture {mix-blend-mode:normal;}

/* Persistent local faults; no global attack envelope. Real viewport fragments. Never intercept selection, links, or scrolling. */
html.kk-stormbreak-v4 #kk7-replicas {
 position:fixed!important;inset:0!important;z-index:412;pointer-events:none!important;
 overflow:hidden;contain:strict;visibility:hidden;user-select:none;
}
html.kk-stormbreak-v4 .kk7-plate {
 position:absolute;inset:0;pointer-events:none!important;transform-origin:50% 50%;
 contain:strict;will-change:transform;overflow:hidden;
}
html.kk-stormbreak-v4 .kk7-copy {position:absolute;inset:0;pointer-events:none!important;}
html.kk-stormbreak-v4 #kk7-replicas * {pointer-events:none!important;user-select:none!important;}
@media(prefers-reduced-motion:reduce){html.kk-stormbreak-v4 #kk7-replicas{display:none!important;}}
@media print{html.kk-stormbreak-v4 #kk7-replicas{display:none!important;}}

/* Floating shards use an independent Canvas. */

/* Small moving mirror faces invert the real page underneath, only inside each shard. */
html.kk-stormbreak-v4 #kk10-negative {
 position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
 pointer-events:none!important;user-select:none!important;z-index:413;
 margin:0!important;padding:0!important;border:0!important;
 visibility:hidden;mix-blend-mode:difference;contain:strict;
}
@media(prefers-reduced-motion:reduce){html.kk-stormbreak-v4 #kk10-negative{display:none!important;}}
@media print{html.kk-stormbreak-v4 #kk10-negative{display:none!important;}}

/* Optional narrative anchor only; adds no visible control or layout height. */
html.kk-stormbreak-v4 .kk-fx-outburst {display:inline-block;width:0;height:0;overflow:hidden;}

/* Pixel overscan is sized from the maximum camera displacement, including narrow screens. */
html.kk-stormbreak-v4 #kk4-sky,
html.kk-stormbreak-v4 #kk4-rain,
html.kk-stormbreak-v4 #kk6-fracture,
html.kk-stormbreak-v4 #kk10-negative {
 top:calc(-1 * var(--kk-bleed,96px))!important;
 left:calc(-1 * var(--kk-bleed,96px))!important;
 right:auto!important;bottom:auto!important;
 width:calc(100vw + 2 * var(--kk-bleed,96px))!important;
 height:calc(100vh + 2 * var(--kk-bleed,96px))!important;
}
html.kk-stormbreak-v4 #kk12-inversion {
 position:fixed!important;inset:0!important;z-index:2147483000;
 pointer-events:none!important;user-select:none!important;
 background:#fff!important;mix-blend-mode:difference;
 margin:0!important;border:0!important;padding:0!important;
 opacity:0;will-change:opacity;
}
@media(prefers-reduced-motion:reduce){html.kk-stormbreak-v4 #kk12-inversion{display:none!important;}}
@media print{html.kk-stormbreak-v4 #kk12-inversion{display:none!important;}}

/* KURANOKA / STORMBREAK XV — RECONNECTION / MODERN AERO UI OS26.2
   Complete replacement stylesheet: base effects and compatibility styles are included.
   MediaWiki:Kuranoka.css remains untouched: specifically preserving:
   - body.skin-citizen.page-Kuranoka fixed thunderstorm photo (desktop) / scroll (mobile)
   - #bodyContent glass variable + blur(6px), translucent surface, padding, borders
   - #firstHeading / #siteSub white text
   - #citizen-toc presentation / hidden scrollbar
   Everything is namespaced #kk14-* and never overrides those selectors.
*/

/* Glass compatibility:
   The original #bodyContent uses backdrop-filter: blur(6px) !important.
   Do not put filter:grayscale(...) on that node, #mw-content-text, body, or
   .citizen-body-container: those would recolor WebGL overlays or introduce
   new stacking/containing blocks. The full-viewport, pointer-transparent
   overlay BELOW storm canvases (z 408–413) works over the fixed photo and
   the article glass in Chromium, preserving colorful storm/rain/shards.
   CSS used here does not change title, TOC, text, or glass settings. */
html.kk-stormbreak-v4 #kk14-tone {
  position: fixed !important;
  inset: 0 !important;
  z-index: 407 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: grayscale(var(--kk14-gray, .96)) brightness(var(--kk14-bright, .85));
  backdrop-filter: grayscale(var(--kk14-gray, .96)) brightness(var(--kk14-bright, .85));
  transition: opacity .8s ease;
  contain: layout style;
}

/* Stage three: very faint drifting rainfall, separate from XII's original rain. */
html.kk-stormbreak-v4 #kk14-aftermath {
  position: fixed !important;
  inset: 0 !important;
  z-index: 414 !important;
  display: block;
  width: 100vw !important;
  height: 100vh !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none !important;
  user-select: none !important;
  contain: strict;
}

/* Interactive shards. Keep the original XII canvas fractures AS THEY WERE.
   These are just a few extra tiny translucent reading windows. */
html.kk-stormbreak-v4 #kk14-peeks {
  position: fixed !important;
  inset: 0 !important;
  z-index: 416 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden;
  user-select: none !important;
  contain: strict;
}
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek {
  position: absolute !important;
  top: 0;
  left: 0;
  box-sizing: border-box !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  touch-action: none;
  cursor: grab;
  user-select: none !important;
  background:
    linear-gradient(119deg,rgba(209,238,246,.26),rgba(36,58,77,.23) 52%,rgba(193,224,242,.19)),
    rgba(35,69,89,.12);
  box-shadow: inset 0 0 1px 1px rgba(218,241,250,.50);
  will-change: transform;
}
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek:nth-child(4n) {
  background: linear-gradient(133deg,rgba(210,81,103,.28),rgba(48,13,28,.27),rgba(219,161,180,.18));
}
html.kk-stormbreak-v4 #kk14-peeks .kk14-dragging {cursor:grabbing;}
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-mirror {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none !important;
  user-select: none !important;
}
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone,
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone * {
  pointer-events: none !important;
  user-select: none !important;
}
/* This unlocks text inside a shard CLONE only; original {{黑幕}} stays opaque. */
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone .heimu,
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone .heimu *,
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone .blackout,
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone .blackout *,
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone .spoiler,
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone .spoiler * {
  color: #f5f9fc !important;
  -webkit-text-fill-color: #f5f9fc !important;
  background: transparent !important;
  background-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.70) !important;
  opacity: 1 !important;
  filter: none !important;
}
html.kk-stormbreak-v4 #kk14-peeks .kk14-peek-clone {
  max-width:none !important;
  background:transparent !important;
  transform:none !important;
  filter:none !important;
}

/* Isolated narrative pause is a Shadow DOM component created by JS.
   Page CSS rules for h2, buttons, infoboxes or Citizen do not enter it. */
/* Older browsers without backdrop-filter receive a quiet dimming layer.
   It deliberately does not filter or restyle any Citizen content. */
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  html.kk-stormbreak-v4 #kk14-tone {
    background: rgba(9, 14, 20, .22) !important;
  }
}
@media (prefers-reduced-motion: reduce), print {
  html.kk-stormbreak-v4 #kk14-tone,
  html.kk-stormbreak-v4 #kk14-aftermath,
  html.kk-stormbreak-v4 #kk14-peeks,
  html.kk-stormbreak-v4 #kk14-interruption {display:none !important;}
}