MediaWiki:KuranokaPageTransition.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ================================================================
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; } }