MediaWiki:KuranokaPageTransition.css - 版本历史

2026年10月23日 (五) 05:34 KK

2026-10-23T05:34:39Z

@@ 第1行： / 第1行： @@
-/* Kuranoka Page Transition V5 — ASHEN VEIL / AURORA
+/* Kuranoka Page Transition V6 — CATACLYSM / DAWN
     Load only on /wiki/Kuranoka and /wiki/Kuronata.
     No Citizen.css / Common.css changes. */
@@ 第78行： / 第78行： @@
 #kkpt-atmosphere {
      position: fixed !important;
-     z-index: 2147481900 !important;
+    /* Above the fire shader: V5 rendered the smoke UNDER opaque soot,
      inset: 0 !important;
      display: block !important;
@@ 第97行： / 第99行： @@
      pointer-events: none !important;
      transition: opacity 180ms linear;
+}
@@ 第188行： / 第223行： @@
 @media (prefers-reduced-motion: reduce) {
      #kkpt-toggle {transition:none !important}
-     #kkpt-vfx,#kkpt-atmosphere {display:none !important}
+     #kkpt-vfx,#kkpt-atmosphere,#kkpt-impact {display:none !important}
      #mw-content-text a.kkpt-portal-link,
      .mw-parser-output a.kkpt-portal-link {animation:none !important}
@@ 第197行： / 第232行： @@
+}
 @media print {
-     #kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere {display:none !important}
+     #kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,#kkpt-impact {display:none !important}
+}

2026年10月23日 (五) 05:20 KK

2026-10-23T05:20:00Z

@@ 第1行： / 第1行： @@
-/* Kuranoka Page Transition V4 — EMBER / AURORA
+/* Kuranoka Page Transition V5 — ASHEN VEIL / AURORA
     Load only on /wiki/Kuranoka and /wiki/Kuronata.
     No Citizen.css / Common.css changes. */
@@ 第29行： / 第29行： @@
      transition: transform .22s,box-shadow .22s,opacity .22s;
+}
 #kkpt-toggle.kkpt-dark {
@@ 第72行： / 第75行： @@
 #kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
-/* WebGL volumetric fire / electric aurora; visual only. */
+/* Rolling turbulent smoke, soot, sparks and shockwave halos. */
 #kkpt-vfx {
      position: fixed !important;
@@ 第82行： / 第97行： @@
      pointer-events: none !important;
      transition: opacity 180ms linear;
+}
@@ 第90行： / 第188行： @@
 @media (prefers-reduced-motion: reduce) {
      #kkpt-toggle {transition:none !important}
-     #kkpt-vfx {display:none !important}
+     #kkpt-vfx,#kkpt-atmosphere {display:none !important}
+}
 @media print {
-     #kkpt-toggle,#kkpt-preview,#kkpt-vfx {display:none !important}
+     #kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere {display:none !important}
+}

2026年10月23日 (五) 04:28 KK

2026-10-23T04:28:39Z

显示更改

2026年10月23日 (五) 04:00 KK

2026-10-23T04:00:44Z

显示更改

2026年10月23日 (五) 03:40 KK

2026-10-23T03:40:26Z

显示更改

2026年10月23日 (五) 03:39 KK

2026-10-23T03:39:43Z

显示更改

KK：创建页面，内容为“/* ================================================================ KURANOKA / KURONATA — PAGE TRANSITION 1.0 Paste the ENTIRE file at the end of MediaWiki:Citizen.css. This does not change the Citizen glass layout or Stormbreak FX. ================================================================ / / Allow same-origin document navigation to retain old/new snapshots. The default transition for unrelated Wiki pages stays very short. */ @view-t…”

2026-10-23T03:22:43Z

创建页面，内容为“================================================================ KURANOKA / KURONATA — PAGE TRANSITION 1.0 Paste the ENTIRE file at the end of MediaWiki:Citizen.css. This does not change the Citizen glass layout or Stormbreak FX. ================================================================： Allow same-origin document navigation to retain old/new snapshots. The default transition for unrelated Wiki pages stays very short.： @view-t…”

新页面

/* ================================================================
KURANOKA / KURONATA — PAGE TRANSITION 1.0
Paste the ENTIRE file at the end of MediaWiki:Citizen.css.
This does not change the Citizen glass layout or Stormbreak FX.
================================================================ */

/* Allow same-origin document navigation to retain old/new snapshots.
The default transition for unrelated Wiki pages stays very short. */
@view-transition {
navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.16s;
}

/* Button: mounted by MediaWiki:PageTransition.js. */
#kkpt-toggle {
--kkpt-accent: #94dcff;
--kkpt-ink: #e8f8ff;
--kkpt-back: rgba(7, 26, 44, 0.76);
position: fixed;
right: clamp(12px, 2.3vw, 34px);
bottom: clamp(14px, 3.4vh, 34px);
z-index: 2147481000;
display: flex;
align-items: center;
gap: 11px;
box-sizing: border-box;
max-width: min(340px, calc(100vw - 24px));
padding: 11px 16px;
border: 1px solid color-mix(in srgb, var(--kkpt-accent) 65%, transparent);
border-radius: 999px;
background: var(--kkpt-back);
-webkit-backdrop-filter: blur(16px) saturate(145%);
backdrop-filter: blur(16px) saturate(145%);
color: var(--kkpt-ink) !important;
font: 600 13px/1.35 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: .035em;
text-decoration: none !important;
box-shadow: 0 5px 26px rgba(0, 0, 0, .22),
0 0 22px color-mix(in srgb, var(--kkpt-accent) 15%, transparent);
transition: transform .24s ease, border-color .24s ease,
box-shadow .24s ease, background .24s ease;
cursor: pointer;
isolation: isolate;
}

#kkpt-toggle:hover,
#kkpt-toggle:focus-visible {
transform: translateY(-3px);
border-color: var(--kkpt-accent);
box-shadow: 0 8px 30px rgba(0, 0, 0, .34),
0 0 30px color-mix(in srgb, var(--kkpt-accent) 38%, transparent);
}

#kkpt-toggle:focus-visible {
outline: 2px solid var(--kkpt-accent);
outline-offset: 4px;
}

#kkpt-toggle .kkpt-mark {
display: grid;
place-items: center;
width: 25px;
height: 25px;
flex: none;
border-radius: 50%;
background: color-mix(in srgb, var(--kkpt-accent) 18%, transparent);
color: var(--kkpt-accent);
font-size: 17px;
font-weight: 500;
}

#kkpt-toggle .kkpt-copy { display: flex; flex-direction: column; gap: 1px; }
#kkpt-toggle .kkpt-title { font-size: 13px; font-weight: 700; }
#kkpt-toggle .kkpt-subtitle { font-size: 10px; font-weight: 500; opacity: .72; }

body.page-Kuronata #kkpt-toggle {
--kkpt-accent: #ff8898;
--kkpt-ink: #fff2f3;
--kkpt-back: rgba(60, 4, 19, .79);
}

/* --------------------------------------------------------------
ENTER KURONATA — consume the old page from the right edge.
The new page is already painted beneath the old page snapshot.
-------------------------------------------------------------- */
html:has(body.page-Kuronata)::view-transition-group(root),
html:has(body.page-Kuranoka)::view-transition-group(root) {
animation-duration: 2.7s;
}

html:has(body.page-Kuronata)::view-transition-old(root) {
z-index: 2;
animation: kkpt-burn 2.7s linear both;
transform-origin: center;
}

html:has(body.page-Kuronata)::view-transition-new(root) {
z-index: 1;
animation: kkpt-blood-arrive 2.7s linear both;
}

@keyframes kkpt-burn {
0% {
clip-path: polygon(0 0, 100% 0, 100% 10%, 100% 20%, 100% 30%, 100% 40%, 100% 50%, 100% 60%, 100% 70%, 100% 80%, 100% 90%, 100% 100%, 0 100%);
filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
}
10% {
clip-path: polygon(0 0, 99% 0, 97% 10%, 93% 20%, 98% 30%, 95% 40%, 91% 50%, 97% 60%, 93% 70%, 98% 80%, 94% 90%, 97% 100%, 0 100%);
filter: brightness(.89) sepia(.12) drop-shadow(10px 0 16px #ff772c);
}
29% {
clip-path: polygon(0 0, 77% 0, 71% 10%, 78% 20%, 69% 30%, 73% 40%, 65% 50%, 75% 60%, 69% 70%, 74% 80%, 68% 90%, 72% 100%, 0 100%);
filter: brightness(.78) sepia(.4) drop-shadow(12px 0 23px #ff360c);
}
49% {
clip-path: polygon(0 0, 52% 0, 45% 10%, 53% 20%, 43% 30%, 50% 40%, 39% 50%, 47% 60%, 42% 70%, 50% 80%, 40% 90%, 46% 100%, 0 100%);
filter: brightness(.64) sepia(.65) drop-shadow(11px 0 28px #ff3a10);
}
71% {
clip-path: polygon(0 0, 27% 0, 20% 10%, 25% 20%, 15% 30%, 23% 40%, 11% 50%, 22% 60%, 17% 70%, 25% 80%, 14% 90%, 20% 100%, 0 100%);
filter: brightness(.41) sepia(.85) drop-shadow(10px 0 28px #ff260b);
}
91% {
clip-path: polygon(0 0, 5% 0, -1% 10%, 6% 20%, -4% 30%, 3% 40%, -7% 50%, 4% 60%, -2% 70%, 6% 80%, -5% 90%, 2% 100%, 0 100%);
filter: brightness(.3) sepia(1) drop-shadow(9px 0 17px #ff3b15);
}
100% {
clip-path: polygon(-14% 0, -14% 0, -14% 10%, -14% 20%, -14% 30%, -14% 40%, -14% 50%, -14% 60%, -14% 70%, -14% 80%, -14% 90%, -14% 100%, -14% 100%);
filter: brightness(.2) sepia(1) drop-shadow(0 0 0 transparent);
}
}

@keyframes kkpt-blood-arrive {
0%, 12% { filter: brightness(.23) saturate(1.7) sepia(.33); }
35% { filter: brightness(.52) saturate(1.4) sepia(.15); }
72% { filter: brightness(.9) saturate(1.1); }
100% { filter: brightness(1) saturate(1) sepia(0); }
}

/* --------------------------------------------------------------
ENTER KURANOKA — a white-blue break of dawn from the left.
-------------------------------------------------------------- */
html:has(body.page-Kuranoka)::view-transition-old(root) {
z-index: 2;
animation: kkpt-dawn 2.45s linear both;
}

html:has(body.page-Kuranoka)::view-transition-new(root) {
z-index: 1;
animation: kkpt-sky-arrive 2.45s ease-out both;
}

@keyframes kkpt-dawn {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 90%, 0 80%, 0 70%, 0 60%, 0 50%, 0 40%, 0 30%, 0 20%, 0 10%);
filter: brightness(1) drop-shadow(0 0 0 transparent);
}
25% {
clip-path: polygon(18% 0, 100% 0, 100% 100%, 21% 100%, 25% 90%, 20% 80%, 28% 70%, 23% 60%, 31% 50%, 22% 40%, 29% 30%, 19% 20%, 24% 10%);
filter: brightness(1.25) drop-shadow(-9px 0 23px #b0eaff);
}
55% {
clip-path: polygon(56% 0, 100% 0, 100% 100%, 60% 100%, 65% 90%, 58% 80%, 69% 70%, 61% 60%, 72% 50%, 62% 40%, 68% 30%, 57% 20%, 64% 10%);
filter: brightness(1.65) drop-shadow(-12px 0 30px #f1fbff);
}
84% {
clip-path: polygon(89% 0, 100% 0, 100% 100%, 94% 100%, 101% 90%, 93% 80%, 103% 70%, 95% 60%, 107% 50%, 96% 40%, 104% 30%, 91% 20%, 99% 10%);
filter: brightness(1.85) drop-shadow(-9px 0 19px #d0f6ff);
}
100% {
clip-path: polygon(115% 0, 115% 0, 115% 100%, 115% 100%, 115% 90%, 115% 80%, 115% 70%, 115% 60%, 115% 50%, 115% 40%, 115% 30%, 115% 20%, 115% 10%);
filter: brightness(1) drop-shadow(0 0 0 transparent);
}
}

@keyframes kkpt-sky-arrive {
0%, 17% { filter: brightness(1.65) saturate(.7); }
51% { filter: brightness(1.22) saturate(.95); }
100% { filter: brightness(1) saturate(1); }
}

@media (max-width: 600px) {
#kkpt-toggle { padding: 10px 13px; gap: 8px; }
#kkpt-toggle .kkpt-subtitle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
html:has(body.page-Kuronata)::view-transition-group(root),
html:has(body.page-Kuranoka)::view-transition-group(root),
html:has(body.page-Kuronata)::view-transition-old(root),
html:has(body.page-Kuranoka)::view-transition-old(root),
html:has(body.page-Kuronata)::view-transition-new(root),
html:has(body.page-Kuranoka)::view-transition-new(root) {
animation-duration: .01ms !important;
}
#kkpt-toggle { transition: none; }
}

@media print { #kkpt-toggle { display: none !important; } }