查看“︁MediaWiki:KuranokaPageTransition.css”︁的源代码

/* ================================================================
   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; } }