跳转到内容
打开/关闭搜索
打开/关闭菜单
  • 450 条目
  • 805 文件
  • 22 用户
  • 9101 编辑
Blockland Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:KuranokaPageTransition.css：修订间差异

MediaWiki界面页面
更多操作
←上一编辑

KK​（留言 | 贡献）

8个用户组
3,280次编辑
无编辑摘要
无编辑摘要
 
（未显示同一用户的4个中间版本）
第1行： 第1行：
/* ===============================================================
/* Kuranoka Page Transition V6 — CATACLYSM / DAWN
  Kuranoka Page Transition v2 — REAL CANVAS FIRE
   Load only on /wiki/Kuranoka and /wiki/Kuronata.
   REPLACE MediaWiki:KuranokaPageTransition.js with this entire file.
   No Citizen.css / Common.css changes. */
   No global styles. No external JavaScript dependencies.
  =============================================================== */
(function () {
    'use strict';


     if (window.__kkptV2 || window !== window.top) return;
#kkpt-toggle {
     window.__kkptV2 = true;
    --kkpt-tone: #a7e7ff;
     if (!window.mw || !mw.config) return;
     --kkpt-panel: rgba(7,28,49,.87);
     if (mw.config.get('wgNamespaceNumber') !== 0 || mw.config.get('wgAction') !== 'view') return;
    position: fixed;
    z-index: 2147483000;
    right: clamp(12px,2.3vw,34px);
     bottom: clamp(14px,3.4vh,34px);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 12px 17px;
    border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
    border-radius: 999px;
     background: var(--kkpt-panel);
     box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
    color: #f1fcff !important;
    font: 650 13px/1.3 system-ui,sans-serif;
    letter-spacing: .045em;
    text-decoration: none !important;
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transition: transform .22s,box-shadow .22s,opacity .22s;
}


    const page = mw.config.get('wgPageName');
/* Easter egg mode: no floating button unless SHOW_FLOATING_BUTTON=true. */
    if (page !== 'Kuranoka' && page !== 'Kuronata') return;
#kkpt-toggle[hidden] {display:none !important}


    const burn = page === 'Kuranoka';
#kkpt-toggle.kkpt-dark {
     const target = burn ? 'Kuronata' : 'Kuranoka';
     --kkpt-tone: #ff6b7e;
     const targetUrl = '/wiki/' + encodeURIComponent(target);
     --kkpt-panel: rgba(41,4,14,.88);
     const DURATION = burn ? 3450 : 2850;
     color: #fff1f1 !important;
    let busy = false;
}


    function makeButton() {
#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
        if (!document.body || document.getElementById('kkpt-toggle')) return;
    transform: translateY(-3px);
        const button = document.createElement('a');
    box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
        button.id = 'kkpt-toggle';
}
        button.href = targetUrl;
        button.setAttribute('aria-label', burn ? '焚毁当前世界，切换到 Kuronata' : '破晓，返回 Kuranoka');


        const icon = document.createElement('span');
#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
        icon.className = 'kkpt-icon';
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
        icon.setAttribute('aria-hidden', 'true');
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
        icon.textContent = burn ? '✦' : '☀';
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}


        const label = document.createElement('span');
/* Real interactive Wiki page, retained after the transition finishes. */
        label.className = 'kkpt-text';
#kkpt-preview {
        const title = document.createElement('span');
    position: fixed !important;
        title.textContent = target.toUpperCase();
    z-index: 2147481000 !important;
        const sub = document.createElement('span');
    inset: 0 !important;
        sub.className = 'kkpt-sub';
    display: block !important;
        sub.textContent = burn ? 'BURN THE WORLD' : 'RETURN TO THE SKY';
    box-sizing: border-box !important;
        label.append(title, sub);
    width: 100vw !important;
        button.append(icon, label);
    height: 100vh !important;
        document.body.append(button);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    clip-path: inset(0 0 0 100%);
    pointer-events: none !important;
    background: #1f0710;
    transform: translateZ(0);
    will-change: clip-path;
}


        button.addEventListener('click', function (event) {
body.page-Kuronata #kkpt-preview {background: #c0eafe}
            // Preserve opening in a new tab, modifiers, and browser behavior.
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
            if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey ||
                event.shiftKey || event.altKey) return;
            event.preventDefault();
            if (busy) return;
            busy = true;
            button.classList.add('kkpt-loading');


            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
/* Rolling turbulent smoke, soot, sparks and shockwave halos. */
                window.location.assign(targetUrl);
#kkpt-atmosphere {
                return;
    position: fixed !important;
            }
    /* Above the fire shader: V5 rendered the smoke UNDER opaque soot,
            begin().catch(function (err) {
      making its independently generated particles effectively invisible. */
                console.error('[KuranokaPageTransition] Transition failed:', err);
    z-index: 2147482100 !important;
                window.location.assign(targetUrl);
    inset: 0 !important;
            });
    display: block !important;
        });
    width: 100vw !important;
    }
    height: 100vh !important;
    pointer-events: none !important;
    transition: opacity 180ms linear;
}


    // Use an actual same-origin rendering of the destination as the layer
/* WebGL incandescent front / cold electrical aurora; visual only. */
    // that shows through the burnt holes. If framing is blocked, fall back
#kkpt-vfx {
    // to a solid atmospheric color while retaining the fire animation.
    position: fixed !important;
    function preparePreview() {
    z-index: 2147482000 !important;
        return new Promise(function (resolve) {
    inset: 0 !important;
            const iframe = document.createElement('iframe');
    display: block !important;
            iframe.id = 'kkpt-preview';
    width: 100vw !important;
            iframe.className = burn ? 'kkpt-blood' : 'kkpt-sky';
    height: 100vh !important;
            iframe.title = 'Transition preview';
    pointer-events: none !important;
            iframe.tabIndex = -1;
    transition: opacity 180ms linear;
            iframe.setAttribute('aria-hidden', 'true');
}
            iframe.style.clipPath = burn
                ? 'polygon(100% 0,100% 100%,100% 100%,100% 0)'
                : 'polygon(0 0,0 100%,0 100%,0 0)';


            let completed = false;
/* A truly short combustion / cold-ionization flash, tracking the tear. */
            const finish = function (success) {
#kkpt-impact {
                if (completed) return;
    --kkpt-impact-x: 50vw;
                completed = true;
    position: fixed !important;
                clearTimeout(timeout);
    z-index: 2147482200 !important;
                if (success) {
    inset: 0 !important;
                    try { iframe.contentWindow.scrollTo(0, 0); } catch (e) { /* ignore */ }
    display: block !important;
                    resolve(iframe);
    pointer-events: none !important;
                } else {
    width: 100vw !important;
                    iframe.remove();
    height: 100vh !important;
                    const fallback = document.createElement('div');
    opacity: 0;
                    fallback.id = 'kkpt-preview';
    mix-blend-mode: screen;
                    fallback.className = burn ? 'kkpt-blood' : 'kkpt-sky';
    will-change: opacity;
                    fallback.style.clipPath = burn
}
                        ? 'polygon(100% 0,100% 100%,100% 100%,100% 0)'
#kkpt-impact.kkpt-impact-red {
                        : 'polygon(0 0,0 100%,0 100%,0 0)';
    background:
                    document.body.append(fallback);
        radial-gradient(ellipse 36vw 82vh at var(--kkpt-impact-x) 51%,
                    resolve(fallback);
            rgba(255,253,231,.93) 0%,
                }
            rgba(255,177,69,.74) 16%,
            };
            rgba(255,53,17,.26) 48%,
            transparent 78%),
        linear-gradient(90deg,rgba(255,70,18,.12),rgba(255,124,24,.15));
}
#kkpt-impact.kkpt-impact-blue {
    background:
        radial-gradient(ellipse 32vw 80vh at var(--kkpt-impact-x) 51%,
            rgba(255,255,255,.98) 0%,
            rgba(157,235,255,.71) 18%,
            rgba(37,101,255,.21) 49%,
            transparent 79%),
        linear-gradient(90deg,rgba(30,140,255,.11),rgba(165,238,255,.11));
}


            const timeout = setTimeout(function () { finish(false); }, 3500);
/* MediaWiki portal links are normal links until hovered/focused. */
            iframe.addEventListener('load', function () {
#mw-content-text a.kkpt-portal-link,
                let valid = false;
.mw-parser-output a.kkpt-portal-link {
                try {
    --kkpt-fringe: #ff4662;
                    valid = Boolean(iframe.contentDocument &&
    --kkpt-halo: rgba(244,19,51,.30);
                        iframe.contentDocument.querySelector('#mw-content-text'));
    display: inline-block;
                } catch (e) { valid = false; }
    position: relative;
                finish(valid);
    isolation: isolate;
            }, { once: true });
    cursor: pointer;
            iframe.addEventListener('error', function () { finish(false); }, { once: true });
    text-decoration-thickness: 1px;
            document.body.append(iframe);
    text-underline-offset: 3px;
            iframe.src = targetUrl;
    transition: color .13s, text-shadow .13s, filter .13s;
        });
}
    }
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
    --kkpt-fringe: #55e5ff;
    --kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
    color: var(--kkpt-fringe) !important;
    text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
                0 0 11px var(--kkpt-halo);
    animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    opacity: 0;
    content: attr(data-kkpt-text);
    color: var(--kkpt-fringe);
    line-height: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
    opacity: .90;
    text-shadow: -2px 0 #fa345c;
    animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
    opacity: .80;
    color: #8af5ff;
    text-shadow: 2px 0 #39a7ff;
    animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
    0%,12%,40%,72%,100% {transform:translate(0)}
    13% {transform:translate(1px,-1px)}
    15% {transform:translate(-1px,0)}
    42% {transform:translate(2px,0)}
    44% {transform:translate(0)}
    73% {transform:translate(-1px,1px)}
    75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
    0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
    15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
    26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
    42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
    59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
    84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
    0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
    14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
    37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
    61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
    83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}


    function createSprite(stops) {
@media (max-width: 600px) {
        const canvas = document.createElement('canvas');
     #kkpt-toggle {padding: 10px 13px;gap: 8px}
        canvas.width = canvas.height = 96;
     #kkpt-toggle .kkpt-sub {display:none}
        const c = canvas.getContext('2d');
}
        const gradient = c.createRadialGradient(48, 48, 0, 48, 48, 48);
@media (prefers-reduced-motion: reduce) {
        stops.forEach(function (stop) { gradient.addColorStop(stop[0], stop[1]); });
    #kkpt-toggle {transition:none !important}
        c.fillStyle = gradient;
    #kkpt-vfx,#kkpt-atmosphere,#kkpt-impact {display:none !important}
        c.fillRect(0, 0, 96, 96);
    #mw-content-text a.kkpt-portal-link,
        return canvas;
    .mw-parser-output a.kkpt-portal-link {animation:none !important}
     }
    #mw-content-text a.kkpt-portal-link::before,
 
    #mw-content-text a.kkpt-portal-link::after,
    const SPRITES = {
    .mw-parser-output a.kkpt-portal-link::before,
        flame: createSprite([[0, '#fffadc'], [.14, '#ffeb75'], [.43, '#ff7a17'], [.72, '#eb230b88'], [1, '#9a000000']]),
    .mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
        ember: createSprite([[0, '#ffffff'], [.18, '#fff5af'], [.52, '#ff8500aa'], [1, '#ff330000']]),
}
        smoke: createSprite([[0, '#160b0acc'], [.4, '#24171977'], [1, '#11111100']]),
@media print {
        blue: createSprite([[0, '#ffffff'], [.18, '#e6ffff'], [.47, '#75ccffad'], [1, '#55b2ff00']])
    #kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,#kkpt-impact {display:none !important}
    };
}
 
     function runAnimation(preview) {
        return new Promise(function (resolve) {
            const canvas = document.createElement('canvas');
            canvas.id = 'kkpt-canvas';
            canvas.setAttribute('aria-hidden', 'true');
            document.body.append(canvas);
            const ctx = canvas.getContext('2d', { alpha: true });
            if (!ctx) { canvas.remove(); resolve(); return; }
 
            let width = 0;
            let height = 0;
            let ratio = 1;
            function size() {
                width = window.innerWidth;
                height = window.innerHeight;
                ratio = Math.min(window.devicePixelRatio || 1, 1.7);
                canvas.width = Math.round(width * ratio);
                canvas.height = Math.round(height * ratio);
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
            }
            size();
 
            const particles = [];
            const rand = function (a, b) { return a + Math.random() * (b - a); };
            const smooth = function (x) { return x * x * (3 - 2 * x); };
            let previous = performance.now();
            let start = previous;
            let done = false;
 
            function spawn(x, y) {
                if (particles.length > 1300) return;
                const r = Math.random();
                const kind = burn ? (r < .64 ? 'flame' : r < .84 ? 'ember' : 'smoke') : 'blue';
                const life = kind === 'smoke' ? rand(.6, 1.4) : kind === 'ember' ? rand(.42, 1.1) : rand(.28, .75);
                particles.push({
                    kind: kind,
                    x: x + rand(-13, 13),
                    y: y + rand(-14, 14),
                    vx: rand(burn ? -125 : -55, burn ? 55 : 85),
                    vy: rand(-185, -35),
                    life: life,
                    remaining: life,
                    radius: kind === 'smoke' ? rand(32, 85) : kind === 'ember' ? rand(3, 12) : rand(16, 47),
                    angle: rand(-.4, .4)
                });
            }
 
            function render(now) {
                if (done) return;
                const delta = Math.min(.05, Math.max(0, (now - previous) / 1000));
                previous = now;
                const raw = Math.min(1, (now - start) / DURATION);
                const eased = smooth(raw);
                const center = burn
                    ? (width + 100) - (width + 200) * eased
                    : -100 + (width + 200) * eased;
                const waviness = Math.sin(Math.PI * raw);
 
                function edgeX(y) {
                    return center + waviness * (
                        16 * Math.sin(y * .023 + now * .0055) +
                        9 * Math.sin(y * .063 - now * .009) +
                        5 * Math.sin(y * .13 + now * .012)
                    );
                }
 
                const pts = [];
                const count = Math.max(28, Math.ceil(height / 25));
                for (let i = 0; i <= count; i++) {
                    const y = height * i / count;
                    pts.push([edgeX(y), y]);
                }
                const reverse = pts.slice().reverse().map(function (p) {
                    return p[0].toFixed(1) + 'px ' + p[1].toFixed(1) + 'px';
                }).join(',');
                preview.style.clipPath = burn
                    ? 'polygon(100% 0,100% 100%,' + reverse + ')'
                    : 'polygon(0 0,0 100%,' + reverse + ')';
 
                ctx.clearRect(0, 0, width, height);
 
                // Smoke first, so bright fire and sparks appear in front.
                ctx.globalCompositeOperation = 'source-over';
                for (let i = particles.length - 1; i >= 0; i--) {
                    const p = particles[i];
                    p.remaining -= delta;
                    if (p.remaining <= 0) { particles.splice(i, 1); continue; }
                    p.x += p.vx * delta;
                    p.y += p.vy * delta;
                    p.vy -= 18 * delta;
                    if (p.kind !== 'smoke') continue;
                    const opacity = Math.min(1, p.remaining / .35) * .42;
                    const size = p.radius * (1 + (1 - p.remaining / p.life) * .8);
                    ctx.globalAlpha = opacity;
                    ctx.drawImage(SPRITES.smoke, p.x - size, p.y - size, size * 2, size * 2);
                }
                ctx.globalAlpha = 1;
 
                // The irregular, continuously moving combustion front.
                ctx.beginPath();
                pts.forEach(function (p, i) {
                    if (i === 0) ctx.moveTo(p[0], p[1]);
                    else ctx.lineTo(p[0], p[1]);
                });
                ctx.lineJoin = 'round';
                ctx.lineCap = 'round';
                ctx.shadowColor = burn ? '#ff3905' : '#b1eaff';
                ctx.shadowBlur = burn ? 48 : 55;
                ctx.strokeStyle = burn ? 'rgba(255,41,5,.82)' : 'rgba(160,227,255,.72)';
                ctx.lineWidth = burn ? 29 : 35;
                ctx.stroke();
                ctx.shadowBlur = 21;
                ctx.strokeStyle = burn ? '#ff9d1c' : '#e5fbff';
                ctx.lineWidth = burn ? 9 : 11;
                ctx.stroke();
                ctx.shadowBlur = 11;
                ctx.strokeStyle = '#fff9e2';
                ctx.lineWidth = 2.5;
                ctx.stroke();
                ctx.shadowBlur = 0;
 
                // Actual flame tongues curling into the page that is burning.
                // Layered Bezier shapes prevent this from looking like a flat wipe.
                if (burn) {
                    ctx.save();
                    ctx.globalCompositeOperation = 'lighter';
                    for (let y = -20; y < height + 45; y += 31) {
                        const x = edgeX(y);
                        const flicker = Math.sin(now * .014 + y * .19);
                        const lift = 24 + 29 * (1 + flicker) + 22 * Math.abs(Math.sin(now * .006 - y * .1));
                        const lean = 15 + 12 * Math.sin(now * .009 + y * .075);
                        ctx.fillStyle = 'rgba(255,77,5,.39)';
                        ctx.beginPath();
                        ctx.moveTo(x + 13, y + 15);
                        ctx.bezierCurveTo(x - 17, y - 2, x - lean - 25, y - lift * .62, x - lean, y - lift);
                        ctx.bezierCurveTo(x - 2, y - lift * .56, x + 11, y - 13, x + 17, y + 15);
                        ctx.closePath();
                        ctx.fill();
 
                        ctx.fillStyle = 'rgba(255,220,91,.43)';
                        ctx.beginPath();
                        ctx.moveTo(x + 3, y + 7);
                        ctx.quadraticCurveTo(x - 10, y - lift * .28, x - lean * .6, y - lift * .68);
                        ctx.quadraticCurveTo(x + 3, y - lift * .3, x + 7, y + 7);
                        ctx.closePath();
                        ctx.fill();
                    }
                    ctx.restore();
                }
 
                // Live flame tongues / sparks, not an animated screenshot.
                const amount = Math.max(14, Math.min(34, Math.round(height / 41)));
                for (let i = 0; i < amount; i++) {
                    const y = rand(0, height);
                    spawn(edgeX(y), y);
                }
 
                ctx.globalCompositeOperation = 'lighter';
                for (let i = 0; i < particles.length; i++) {
                    const p = particles[i];
                    if (p.kind === 'smoke') continue;
                    const stage = 1 - p.remaining / p.life;
                    const fade = Math.min(1, p.remaining * 3) * (1 - stage * .5);
                    ctx.save();
                    ctx.globalAlpha = fade * (p.kind === 'ember' ? .85 : .8);
                    ctx.translate(p.x, p.y);
                    ctx.rotate(p.angle);
                    const sprite = p.kind === 'blue' ? SPRITES.blue :
                        p.kind === 'ember' ? SPRITES.ember : SPRITES.flame;
                    const sx = p.radius * (p.kind === 'flame' ? .9 : 1);
                    const sy = p.radius * (p.kind === 'flame' ? 1.7 : 1);
                    ctx.drawImage(sprite, -sx, -sy, sx * 2, sy * 2);
                    ctx.restore();
                }
                ctx.globalAlpha = 1;
                ctx.globalCompositeOperation = 'source-over';
 
                if (raw < 1) {
                    requestAnimationFrame(render);
                } else {
                    done = true;
                    preview.style.clipPath = 'none';
                    setTimeout(resolve, 110);
                }
            }
            requestAnimationFrame(render);
        });
    }
 
    function handoff() {
        // A very short opaque frame hides the last real document navigation.
        // The preview is already the actual target URL, not mock Wiki text.
        const cover = document.createElement('div');
        cover.id = 'kkpt-handoff';
        if (!burn) cover.className = 'kkpt-sky';
        document.body.append(cover);
        requestAnimationFrame(function () {
            cover.style.opacity = '1';
            setTimeout(function () { window.location.assign(targetUrl); }, 200);
        });
    }
 
    async function begin() {
        const preview = await preparePreview();
        await runAnimation(preview);
        handoff();
    }
 
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', makeButton, { once: true });
    } else {
        makeButton();
    }
}());

2026年10月23日 (五) 13:34的最新版本

/* Kuranoka Page Transition V6 — CATACLYSM / DAWN
   Load only on /wiki/Kuranoka and /wiki/Kuronata.
   No Citizen.css / Common.css changes. */

#kkpt-toggle {
    --kkpt-tone: #a7e7ff;
    --kkpt-panel: rgba(7,28,49,.87);
    position: fixed;
    z-index: 2147483000;
    right: clamp(12px,2.3vw,34px);
    bottom: clamp(14px,3.4vh,34px);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 12px 17px;
    border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
    border-radius: 999px;
    background: var(--kkpt-panel);
    box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
    color: #f1fcff !important;
    font: 650 13px/1.3 system-ui,sans-serif;
    letter-spacing: .045em;
    text-decoration: none !important;
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transition: transform .22s,box-shadow .22s,opacity .22s;
}

/* Easter egg mode: no floating button unless SHOW_FLOATING_BUTTON=true. */
#kkpt-toggle[hidden] {display:none !important}

#kkpt-toggle.kkpt-dark {
    --kkpt-tone: #ff6b7e;
    --kkpt-panel: rgba(41,4,14,.88);
    color: #fff1f1 !important;
}

#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}

#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
#kkpt-toggle .kkpt-text {display: flex;flex-direction: column;gap: 2px}
#kkpt-toggle .kkpt-sub {font-size: 10px;opacity: .74}
#kkpt-toggle.kkpt-busy {pointer-events: none}
#kkpt-toggle.kkpt-quiet {opacity: 0;pointer-events: none}

/* Real interactive Wiki page, retained after the transition finishes. */
#kkpt-preview {
    position: fixed !important;
    z-index: 2147481000 !important;
    inset: 0 !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;
    clip-path: inset(0 0 0 100%);
    pointer-events: none !important;
    background: #1f0710;
    transform: translateZ(0);
    will-change: clip-path;
}

body.page-Kuronata #kkpt-preview {background: #c0eafe}
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}

/* Rolling turbulent smoke, soot, sparks and shockwave halos. */
#kkpt-atmosphere {
    position: fixed !important;
    /* Above the fire shader: V5 rendered the smoke UNDER opaque soot,
       making its independently generated particles effectively invisible. */
    z-index: 2147482100 !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    transition: opacity 180ms linear;
}

/* WebGL incandescent front / cold electrical aurora; visual only. */
#kkpt-vfx {
    position: fixed !important;
    z-index: 2147482000 !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    transition: opacity 180ms linear;
}

/* A truly short combustion / cold-ionization flash, tracking the tear. */
#kkpt-impact {
    --kkpt-impact-x: 50vw;
    position: fixed !important;
    z-index: 2147482200 !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    width: 100vw !important;
    height: 100vh !important;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: opacity;
}
#kkpt-impact.kkpt-impact-red {
    background:
        radial-gradient(ellipse 36vw 82vh at var(--kkpt-impact-x) 51%,
            rgba(255,253,231,.93) 0%,
            rgba(255,177,69,.74) 16%,
            rgba(255,53,17,.26) 48%,
            transparent 78%),
        linear-gradient(90deg,rgba(255,70,18,.12),rgba(255,124,24,.15));
}
#kkpt-impact.kkpt-impact-blue {
    background:
        radial-gradient(ellipse 32vw 80vh at var(--kkpt-impact-x) 51%,
            rgba(255,255,255,.98) 0%,
            rgba(157,235,255,.71) 18%,
            rgba(37,101,255,.21) 49%,
            transparent 79%),
        linear-gradient(90deg,rgba(30,140,255,.11),rgba(165,238,255,.11));
}

/* MediaWiki portal links are normal links until hovered/focused. */
#mw-content-text a.kkpt-portal-link,
.mw-parser-output a.kkpt-portal-link {
    --kkpt-fringe: #ff4662;
    --kkpt-halo: rgba(244,19,51,.30);
    display: inline-block;
    position: relative;
    isolation: isolate;
    cursor: pointer;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .13s, text-shadow .13s, filter .13s;
}
#mw-content-text a.kkpt-portal-blue,
.mw-parser-output a.kkpt-portal-blue {
    --kkpt-fringe: #55e5ff;
    --kkpt-halo: rgba(23,183,255,.35);
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible),
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible) {
    color: var(--kkpt-fringe) !important;
    text-shadow: -2px 0 var(--kkpt-halo),2px 0 rgba(108,219,255,.42),
                 0 0 11px var(--kkpt-halo);
    animation: kkpt-hover-jitter 800ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link::before,
#mw-content-text a.kkpt-portal-link::after,
.mw-parser-output a.kkpt-portal-link::before,
.mw-parser-output a.kkpt-portal-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    opacity: 0;
    content: attr(data-kkpt-text);
    color: var(--kkpt-fringe);
    line-height: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::before,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::before {
    opacity: .90;
    text-shadow: -2px 0 #fa345c;
    animation: kkpt-slice-a 680ms steps(1,end) infinite;
}
#mw-content-text a.kkpt-portal-link:is(:hover,:focus-visible)::after,
.mw-parser-output a.kkpt-portal-link:is(:hover,:focus-visible)::after {
    opacity: .80;
    color: #8af5ff;
    text-shadow: 2px 0 #39a7ff;
    animation: kkpt-slice-b 580ms steps(1,end) infinite;
}
@keyframes kkpt-hover-jitter {
    0%,12%,40%,72%,100% {transform:translate(0)}
    13% {transform:translate(1px,-1px)}
    15% {transform:translate(-1px,0)}
    42% {transform:translate(2px,0)}
    44% {transform:translate(0)}
    73% {transform:translate(-1px,1px)}
    75% {transform:translate(0)}
}
@keyframes kkpt-slice-a {
    0%,100% {clip-path:inset(0 0 91% 0);transform:translate(0)}
    15% {clip-path:inset(9% 0 70% 0);transform:translate(-3px,1px)}
    26% {clip-path:inset(40% 0 38% 0);transform:translate(4px,-1px)}
    42% {clip-path:inset(76% 0 9% 0);transform:translate(-2px,0)}
    59% {clip-path:inset(22% 0 59% 0);transform:translate(3px,1px)}
    84% {clip-path:inset(56% 0 22% 0);transform:translate(-4px,-1px)}
}
@keyframes kkpt-slice-b {
    0%,100% {clip-path:inset(78% 0 7% 0);transform:translate(0)}
    14% {clip-path:inset(46% 0 29% 0);transform:translate(2px,-1px)}
    37% {clip-path:inset(11% 0 80% 0);transform:translate(-4px,1px)}
    61% {clip-path:inset(65% 0 20% 0);transform:translate(4px,0)}
    83% {clip-path:inset(28% 0 49% 0);transform:translate(-2px,-1px)}
}

@media (max-width: 600px) {
    #kkpt-toggle {padding: 10px 13px;gap: 8px}
    #kkpt-toggle .kkpt-sub {display:none}
}
@media (prefers-reduced-motion: reduce) {
    #kkpt-toggle {transition: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}
    #mw-content-text a.kkpt-portal-link::before,
    #mw-content-text a.kkpt-portal-link::after,
    .mw-parser-output a.kkpt-portal-link::before,
    .mw-parser-output a.kkpt-portal-link::after {animation:none !important;opacity:0 !important}
}
@media print {
    #kkpt-toggle,#kkpt-preview,#kkpt-vfx,#kkpt-atmosphere,#kkpt-impact {display:none !important}
}
检索自“https://blockland.wiki/index.php?title=MediaWiki:KuranokaPageTransition.css&oldid=9135”