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 v2 — standalone page-scoped stylesheet.
   REPLACE MediaWiki:KuranokaPageTransition.css with this file.
   No @view-transition and NO Citizen.css changes required. */

#kkpt-toggle {
    --kkpt-accent: #95dfff;
    position: fixed;
    right: clamp(14px, 2.5vw, 32px);
    bottom: clamp(16px, 3vh, 34px);
    z-index: 2147481000;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: calc(100vw - 32px);
    padding: 12px 17px;
    border: 1px solid var(--kkpt-accent);
    border-radius: 999px;
    background: rgba(9, 27, 46, .84);
    color: #ecfaff !important;
    font: 700 13px/1.3 system-ui, sans-serif;
    letter-spacing: .04em;
    text-decoration: none !important;
    box-shadow: 0 8px 28px #071b3055, 0 0 20px #5cc8ff33;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform .2s, box-shadow .2s, opacity .2s;
}
body.page-Kuronata #kkpt-toggle {
    --kkpt-accent: #ff667c;
    background: rgba(55, 6, 17, .89);
    color: #fff4f5 !important;
    box-shadow: 0 8px 28px #21030877, 0 0 24px #e41f4438;
}
#kkpt-toggle:hover, #kkpt-toggle:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px #0006, 0 0 27px var(--kkpt-accent);
}
#kkpt-toggle:focus-visible { outline: 2px solid var(--kkpt-accent); outline-offset: 4px; }
#kkpt-toggle.kkpt-loading { opacity: .7; pointer-events: none; }
#kkpt-toggle .kkpt-icon { color: var(--kkpt-accent); font-size: 21px; }
#kkpt-toggle .kkpt-text { display: flex; flex-direction: column; gap: 3px; }
#kkpt-toggle .kkpt-sub { font-size: 10px; font-weight: 500; opacity: .72; }

/* The target Wiki page is visible through an animated polygon mask. */
#kkpt-preview {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: 2147481100 !important;
    pointer-events: none !important;
    display: block !important;
    background: #3b0613;
    will-change: clip-path;
    contain: paint;
}
#kkpt-preview.kkpt-sky { background: #bce9ff; }

#kkpt-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147481200 !important;
    pointer-events: none !important;
}

#kkpt-handoff {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147481300 !important;
    pointer-events: all !important;
    opacity: 0;
    transition: opacity .16s linear;
    background: #39050f;
}
#kkpt-handoff.kkpt-sky {
    background: #e5f7ff;
}

@media (max-width: 600px) {
    #kkpt-toggle { padding: 10px 13px; gap: 8px; }
    #kkpt-toggle .kkpt-sub { display: none; }
}
@media print {
    #kkpt-toggle, #kkpt-preview, #kkpt-canvas, #kkpt-handoff { display: none !important; }
}