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

MediaWiki:KuranokaPageTransition.css：修订间差异

MediaWiki界面页面
更多操作
下一编辑→

KK​（留言 | 贡献）

8个用户组
3,280次编辑
 
无编辑摘要
（未显示同一用户的3个中间版本）
第1行： 第1行：
/* ================================================================
/* Kuranoka Page Transition V4 — EMBER / AURORA
   KURANOKA / KURONATA — PAGE TRANSITION 1.0
   Load only on /wiki/Kuranoka and /wiki/Kuronata.
   Paste the ENTIRE file at the end of MediaWiki:Citizen.css.
   No Citizen.css / Common.css changes. */
  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-toggle {
     --kkpt-accent: #94dcff;
     --kkpt-tone: #a7e7ff;
     --kkpt-ink: #e8f8ff;
     --kkpt-panel: rgba(7,28,49,.87);
    --kkpt-back: rgba(7, 26, 44, 0.76);
     position: fixed;
     position: fixed;
     right: clamp(12px, 2.3vw, 34px);
    z-index: 2147483000;
     bottom: clamp(14px, 3.4vh, 34px);
     right: clamp(12px,2.3vw,34px);
    z-index: 2147481000;
     bottom: clamp(14px,3.4vh,34px);
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 11px;
     gap: 10px;
    max-width: calc(100vw - 24px);
     box-sizing: border-box;
     box-sizing: border-box;
    max-width: min(340px, calc(100vw - 24px));
     padding: 12px 17px;
     padding: 11px 16px;
     border: 1px solid color-mix(in srgb,var(--kkpt-tone) 60%,transparent);
     border: 1px solid color-mix(in srgb, var(--kkpt-accent) 65%, transparent);
     border-radius: 999px;
     border-radius: 999px;
     background: var(--kkpt-back);
     background: var(--kkpt-panel);
     -webkit-backdrop-filter: blur(16px) saturate(145%);
     box-shadow: 0 8px 35px #0007,0 0 20px color-mix(in srgb,var(--kkpt-tone) 25%,transparent);
    backdrop-filter: blur(16px) saturate(145%);
     color: #f1fcff !important;
     color: var(--kkpt-ink) !important;
     font: 650 13px/1.3 system-ui,sans-serif;
     font: 600 13px/1.35 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
     letter-spacing: .045em;
     letter-spacing: .035em;
     text-decoration: none !important;
     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;
     cursor: pointer;
     isolation: isolate;
     backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transition: transform .22s,box-shadow .22s,opacity .22s;
}
}


#kkpt-toggle:hover,
#kkpt-toggle.kkpt-dark {
#kkpt-toggle:focus-visible {
     --kkpt-tone: #ff6b7e;
     transform: translateY(-3px);
     --kkpt-panel: rgba(41,4,14,.88);
     border-color: var(--kkpt-accent);
    color: #fff1f1 !important;
    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 {
#kkpt-toggle:hover,#kkpt-toggle:focus-visible {
     outline: 2px solid var(--kkpt-accent);
     transform: translateY(-3px);
     outline-offset: 4px;
     box-shadow: 0 9px 38px #0008,0 0 32px var(--kkpt-tone);
}
 
#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) {
#kkpt-toggle:focus-visible {outline: 2px solid var(--kkpt-tone);outline-offset: 4px}
    z-index: 1;
#kkpt-toggle .kkpt-icon {font-size: 23px;color: var(--kkpt-tone);text-shadow: 0 0 13px var(--kkpt-tone)}
    animation: kkpt-blood-arrive 2.7s linear both;
#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}


@keyframes kkpt-burn {
/* Real interactive Wiki page, retained after the transition finishes. */
     0% {
#kkpt-preview {
        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%);
     position: fixed !important;
        filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
    z-index: 2147481000 !important;
     }
    inset: 0 !important;
     10% {
     display: block !important;
        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%);
     box-sizing: border-box !important;
        filter: brightness(.89) sepia(.12) drop-shadow(10px 0 16px #ff772c);
    width: 100vw !important;
     }
     height: 100vh !important;
     29% {
     padding: 0 !important;
        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%);
    margin: 0 !important;
        filter: brightness(.78) sepia(.4) drop-shadow(12px 0 23px #ff360c);
     border: 0 !important;
     }
     border-radius: 0 !important;
     49% {
    overflow: hidden !important;
        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%);
     clip-path: inset(0 0 0 100%);
        filter: brightness(.64) sepia(.65) drop-shadow(11px 0 28px #ff3a10);
     pointer-events: none !important;
     }
    background: #1f0710;
    71% {
     transform: translateZ(0);
        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%);
    will-change: clip-path;
        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 {
body.page-Kuronata #kkpt-preview {background: #c0eafe}
    0%, 12% { filter: brightness(.23) saturate(1.7) sepia(.33); }
#kkpt-preview.kkpt-active {pointer-events: auto !important;clip-path: inset(0)}
    35% { filter: brightness(.52) saturate(1.4) sepia(.15); }
    72% { filter: brightness(.9) saturate(1.1); }
    100% { filter: brightness(1) saturate(1) sepia(0); }
}


/* --------------------------------------------------------------
/* WebGL volumetric fire / electric aurora; visual only. */
  ENTER KURANOKA — a white-blue break of dawn from the left.
#kkpt-vfx {
  -------------------------------------------------------------- */
     position: fixed !important;
html:has(body.page-Kuranoka)::view-transition-old(root) {
     z-index: 2147482000 !important;
     z-index: 2;
     inset: 0 !important;
    animation: kkpt-dawn 2.45s linear both;
     display: block !important;
}
     width: 100vw !important;
 
     height: 100vh !important;
html:has(body.page-Kuranoka)::view-transition-new(root) {
     pointer-events: none !important;
     z-index: 1;
     transition: opacity 180ms linear;
    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) {
@media (max-width: 600px) {
     #kkpt-toggle { padding: 10px 13px; gap: 8px; }
     #kkpt-toggle {padding: 10px 13px;gap: 8px}
     #kkpt-toggle .kkpt-subtitle { display: none; }
     #kkpt-toggle .kkpt-sub {display:none}
}
}
@media (prefers-reduced-motion: reduce) {
@media (prefers-reduced-motion: reduce) {
     html:has(body.page-Kuronata)::view-transition-group(root),
     #kkpt-toggle {transition:none !important}
    html:has(body.page-Kuranoka)::view-transition-group(root),
     #kkpt-vfx {display:none !important}
     html:has(body.page-Kuronata)::view-transition-old(root),
}
    html:has(body.page-Kuranoka)::view-transition-old(root),
@media print {
    html:has(body.page-Kuronata)::view-transition-new(root),
     #kkpt-toggle,#kkpt-preview,#kkpt-vfx {display:none !important}
    html:has(body.page-Kuranoka)::view-transition-new(root) {
        animation-duration: .01ms !important;
    }
     #kkpt-toggle { transition: none; }
}
}
@media print { #kkpt-toggle { display: none !important; } }

2026年10月23日 (五) 12:28的版本

/* Kuranoka Page Transition V4 — EMBER / AURORA
   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;
}

#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)}

/* WebGL volumetric fire / electric 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;
}

@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 {display:none !important}
}
@media print {
    #kkpt-toggle,#kkpt-preview,#kkpt-vfx {display:none !important}
}
检索自“https://blockland.wiki/index.php?title=MediaWiki:KuranokaPageTransition.css&oldid=9129”