MediaWiki:KuranokaPageTransition.css

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

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

/* ============================================================
   KURANOKA PAGE TRANSITION V3 — ASHES / REBIRTH
   MediaWiki:KuranokaPageTransition.css
   Only loaded on /wiki/Kuranoka and /wiki/Kuronata.
   ============================================================ */

/* 原生跨页面无缝衔接 */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* 切换按钮 */
#kkpt-toggle {
    --kkpt-accent: #93dfff;
    --kkpt-ink: #eefaff;
    --kkpt-panel: rgba(8, 27, 43, .82);

    position: fixed;
    right: clamp(12px, 2.3vw, 34px);
    bottom: clamp(14px, 3.4vh, 34px);
    z-index: 2147483000;

    display: flex;
    align-items: center;
    gap: 11px;

    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    padding: 12px 17px;

    color: var(--kkpt-ink) !important;
    background: var(--kkpt-panel);

    border: 1px solid color-mix(
        in srgb,
        var(--kkpt-accent) 64%,
        transparent
    );

    border-radius: 999px;
    font: 650 13px/1.35 system-ui, sans-serif;
    letter-spacing: .04em;
    text-decoration: none !important;
    cursor: pointer;

    box-shadow:
        0 6px 29px #0006,
        0 0 23px color-mix(
            in srgb,
            var(--kkpt-accent) 20%,
            transparent
        );

    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);

    transition:
        transform .2s,
        opacity .18s,
        box-shadow .2s;
}

/* Kuronata 血红主题 */
body.page-Kuronata #kkpt-toggle {
    --kkpt-accent: #ff718b;
    --kkpt-ink: #fff1f3;
    --kkpt-panel: rgba(46, 2, 13, .86);
}

#kkpt-toggle:hover,
#kkpt-toggle:focus-visible {
    transform: translateY(-3px);

    box-shadow:
        0 8px 34px #0009,
        0 0 36px var(--kkpt-accent);
}

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

#kkpt-toggle .kkpt-icon {
    color: var(--kkpt-accent);
    font-size: 22px;
    text-shadow: 0 0 12px var(--kkpt-accent);
}

#kkpt-toggle .kkpt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#kkpt-toggle .kkpt-sub {
    font-size: 10px;
    opacity: .75;
}

#kkpt-toggle.kkpt-loading {
    cursor: wait;
    opacity: .8;
}

#kkpt-toggle.kkpt-running {
    pointer-events: none;
}

#kkpt-toggle.kkpt-vanish {
    opacity: 0;
    pointer-events: none;
}

/* 预载的真实目标页面 */
#kkpt-preview {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147481000 !important;

    display: block !important;
    box-sizing: border-box !important;

    width: 100vw !important;
    height: 100vh !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;

    transform: translateZ(0);
    will-change: clip-path;

    background: #22050b;
    clip-path: inset(0 0 0 100%);
}

body.page-Kuronata #kkpt-preview {
    background: #bfeaff;
}

/* Canvas 火焰、烟雾、火星、爆燃 */
#kkpt-canvas {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482000 !important;

    display: block !important;
    width: 100vw !important;
    height: 100vh !important;

    pointer-events: none !important;
    transform: translateZ(0);

    transition: opacity 160ms linear;
}

/* 移动端 */
@media (max-width: 600px) {
    #kkpt-toggle {
        padding: 10px 13px;
        gap: 8px;
    }

    #kkpt-toggle .kkpt-sub {
        display: none;
    }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: .01ms !important;
    }

    #kkpt-toggle {
        transition: none !important;
    }
}

/* 打印时隐藏 */
@media print {
    #kkpt-preview,
    #kkpt-canvas,
    #kkpt-toggle {
        display: none !important;
    }
}