MediaWiki:KuranokaFX.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ================================================================
KURANOKA / STORMBREAK XIII — LOST CONNECTION
Append to the END of existing Kuranoka Stormbreak XII CSS.
Keep the original storm styles. Scope: html.kk-stormbreak-v4 only.
================================================================ */
/* Gray out the page as a collection of existing site-root nodes,
NOT the body element (the colored Canvas layers are body siblings). */
html.kk-stormbreak-v4.kk-sb-afterlink .kk-sb-world {
filter: grayscale(var(--kk-sb-gray, 1)) brightness(var(--kk-sb-dim, .72)) contrast(1.06);
transition: filter .7s ease;
}
/* The interruption is a deliberate, click-to-continue scene, not a timer. */
html.kk-stormbreak-v4 #kk-sb-gate {
position: fixed !important;
inset: 0 !important;
z-index: 2147482950 !important;
display: grid;
place-items: center;
margin: 0 !important;
padding: 24px !important;
box-sizing: border-box;
color: #e8eff7;
background:
radial-gradient(ellipse 72% 75% at 50% 47%, rgba(17,30,49,.92), rgba(1,4,12,.985) 82%),
#02050a;
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
text-align: center;
isolation: isolate;
}
html.kk-stormbreak-v4 #kk-sb-gate[hidden] {display:none !important;}
html.kk-stormbreak-v4 #kk-sb-gate::before {
content: '';
position: absolute;
inset: 0;
opacity: .19;
pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(182,210,229,.16) 0 1px, transparent 1px 7px);
mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
html.kk-stormbreak-v4 .kk-sb-gate-inner {
position: relative;
z-index: 1;
width: min(100%, 540px);
box-sizing: border-box;
padding: clamp(22px,5vw,48px);
border: 1px solid rgba(175,208,231,.23);
border-radius: 4px;
background: rgba(2,8,19,.55);
box-shadow: 0 0 100px rgba(30,83,110,.16), inset 0 0 1px rgba(236,249,255,.25);
}
html.kk-stormbreak-v4 .kk-sb-gate-icon {
display: block;
margin-bottom: 22px;
font-size: 23px;
letter-spacing: .24em;
color: #a2e8f2;
}
html.kk-stormbreak-v4 .kk-sb-gate-code {
font: 500 12px/1.8 ui-monospace, 'Consolas', monospace;
color: #7fa4b5;
letter-spacing: .21em;
}
html.kk-stormbreak-v4 #kk-sb-gate h2 {
margin: 12px 0 23px !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
color: #f0f7fa !important;
font: 750 clamp(25px,5.6vw,42px)/1.13 ui-monospace, 'Consolas', monospace !important;
letter-spacing: .07em;
overflow-wrap: anywhere;
}
html.kk-stormbreak-v4 #kk-sb-gate p {
margin: 0 auto 10px !important;
color: #d4e0e9 !important;
font-size: 15px !important;
line-height: 1.7 !important;
}
html.kk-stormbreak-v4 #kk-sb-gate .kk-sb-gate-sub {
margin: 14px auto 27px !important;
color: #9daebb !important;
font-size: 12px !important;
}
html.kk-stormbreak-v4 .kk-sb-gate-actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
html.kk-stormbreak-v4 #kk-sb-gate button {
border-radius: 3px !important;
padding: 12px 19px !important;
min-height: 44px;
border: 1px solid rgba(169,214,232,.5) !important;
background: rgba(34,82,100,.27) !important;
color: #e3f8ff !important;
font: 500 14px/1.3 system-ui, sans-serif !important;
cursor: pointer;
transition: background .18s ease, border-color .18s ease;
}
html.kk-stormbreak-v4 #kk-sb-gate button:hover,
html.kk-stormbreak-v4 #kk-sb-gate button:focus-visible {
background: rgba(70,139,162,.43) !important;
border-color: #d6f8ff !important;
outline: 2px solid #7ecbe1;
outline-offset: 3px;
}
html.kk-stormbreak-v4 #kk-sb-gate .kk-sb-skip {
color: #a2b0bc !important;
background: transparent !important;
border-color: rgba(153,169,185,.18) !important;
}
/* Chapter III: quieter suspended rain and weak colored atmospheric residue. */
html.kk-stormbreak-v4 #kk13-aftermath {
position: fixed !important;
inset: 0 !important;
z-index: 414 !important;
width: 100vw;
height: 100vh;
pointer-events: none !important;
visibility: hidden;
contain: strict;
user-select: none;
}
/* Drifting, freely draggable shards. Only their clipped polygons intercept
pointer events; the rest of the wiki is still scrollable/selectable. */
html.kk-stormbreak-v4 #kk-sb-peeks {
position: fixed !important;
inset: 0 !important;
z-index: 416 !important;
width: 100vw !important;
height: 100vh !important;
overflow: hidden;
pointer-events: none !important;
visibility: hidden;
user-select: none;
contain: strict;
}
html.kk-stormbreak-v4 .kk-sb-peek {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
overflow: hidden;
pointer-events: auto !important;
touch-action: none;
cursor: grab;
user-select: none !important;
background:
linear-gradient(126deg, rgba(193,229,244,.39), rgba(14,37,53,.65) 36%, rgba(69,111,144,.47) 74%, rgba(225,239,250,.46)),
rgba(26,43,62,.43);
box-shadow: inset 0 0 2px 1px rgba(204,236,255,.64), inset 0 0 36px rgba(60,125,151,.34);
will-change: transform;
}
html.kk-stormbreak-v4 .kk-sb-peek:nth-child(4n) {
background:
linear-gradient(130deg, rgba(242,191,210,.35), rgba(65,11,26,.72) 43%, rgba(149,43,67,.45)),
rgba(49,12,23,.5);
}
html.kk-stormbreak-v4 .kk-sb-peek-grabbed {cursor: grabbing;}
html.kk-stormbreak-v4 .kk-sb-peek-mirror {
position: absolute !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
box-sizing: border-box;
overflow: visible;
pointer-events: none !important;
user-select: none !important;
}
html.kk-stormbreak-v4 .kk-sb-peek-clone,
html.kk-stormbreak-v4 .kk-sb-peek-clone * {
pointer-events: none !important;
user-select: none !important;
text-decoration-color: currentColor;
}
/* This is the genuine template black curtain: don't reveal the DOM behind
it globally; reveal an accurate local copy *inside shard windows only*. */
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .heimu,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .heimu *,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .blackout,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .blackout *,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .spoiler,
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone .spoiler * {
color: #f4fbff !important;
background: transparent !important;
text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
opacity: 1 !important;
-webkit-text-fill-color: #f4fbff !important;
}
html.kk-stormbreak-v4 #kk-sb-peeks .kk-sb-peek-clone {
background: transparent !important;
max-width: none !important;
transform: none !important;
filter: none !important;
}
@media (max-width:680px) {
html.kk-stormbreak-v4 #kk-sb-gate {padding: 15px !important;}
html.kk-stormbreak-v4 .kk-sb-gate-actions {flex-direction:column;}
html.kk-stormbreak-v4 .kk-sb-gate-actions button {width:100%;}
}
@media (prefers-reduced-motion:reduce) {
html.kk-stormbreak-v4 #kk-sb-gate,
html.kk-stormbreak-v4 #kk13-aftermath,
html.kk-stormbreak-v4 #kk-sb-peeks {display:none !important;}
html.kk-stormbreak-v4.kk-sb-afterlink .kk-sb-world {filter:none !important;}
}
@media print {
html.kk-stormbreak-v4 #kk-sb-gate,
html.kk-stormbreak-v4 #kk13-aftermath,
html.kk-stormbreak-v4 #kk-sb-peeks {display:none !important;}
html.kk-stormbreak-v4.kk-sb-afterlink .kk-sb-world {filter:none !important;}
}