MediaWiki:KuranokaFX.css：修订间差异

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

/* KURANOKA / STORMBREAK XIV — RECONNECTION
   ONLY add to the END of the original STORMBREAK XII CSS.
   Completely remove the XIII addon first (the .kk-sb-world filter is obsolete).
   MediaWiki:Kuranoka.css remains untouched. Everything is namespaced #kk14-*.
*/

/* Backdrop filter desaturates the CURRENT COMPOSITE of the actual Wiki page,
   including its Kuranoka.css background / pseudo-elements. This layer is BELOW
   all of the original XII colored atmospheric canvases (z=408–413).
   It neither adds grayscale filters to Citizen nodes nor creates layout shifts. */
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. */
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  html.kk-stormbreak-v4 #kk14-tone {background: rgba(5,8,12,.12) !important;}
  html.kk-stormbreak-v4:has(#kk14-tone[style*="opacity: 1"]) #mw-content-text {
    filter: grayscale(.9);
  }
}
@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;}
}