/* BHL Style Search Top Box And User Account */ /* By Mercuresphere */ /* Based on BHL Theme */ :root, :root:lang(cn) { --merc-light-color: var(--swatch-menutxt-light-color); --merc-dark-color: var(--swatch-menubg-dark-color); --user-account-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/user-circle.svg"); --search-top-box-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/search-top-box-mask.svg"); } /* ===用户和搜索栏=== */ @media only screen and (max-width: 768px) { #login-status { right: unset; font-size: unset; } #navi-bar, #navi-bar-shadow, #search-top-box-input { display: unset; } #search-top-box-input { min-width: unset; } #search-top-box { top: unset; right: unset; height: unset; } #search-top-box:focus-within { box-shadow: unset; background: unset; padding: unset; } #search-top-box:not(:focus-within):before { -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-image: var(--search-top-box-mask); ; z-index: 14; background-color: rgb(var(--merc-light-color)); color: rgb(var(--merc-dark-color)); text-align: center; cursor: pointer; mask-image: var(--search-top-box-mask); ; mask-position: center center; mask-repeat: no-repeat; mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2); pointer-events: none; position: absolute; top: 0; right: 0; width: calc(0.9375rem * 1.8); height: 100%; content: " "; } #search-top-box form[id=search-top-box-form] { visibility: unset; height: unset; } #search-top-box form[id=search-top-box-form]:focus-within { visibility: unset; } #search-top-box form[id=search-top-box-form] input { -webkit-appearance: unset; -moz-appearance: unset; position: unset; top: unset; transform: unset; appearance: unset; height: unset; } #search-top-box form[id=search-top-box-form] input[type=text] { visibility: unset; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1); } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] { position: unset; right: unset; transform: unset; cursor: unset; border-width: unset; width: unset; height: unset; color: unset; } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover { background-color: unset; } #search-top-box form[id=search-top-box-form] input[type=submit] { background: none; transition: unset; } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] { opacity: unset; margin: unset; padding: unset; width: unset; } #header h1 a { z-index: unset; } } @media only screen and (max-width: 56.25rem) { #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { background-color: rgba(0, 0, 0, 0); } } @media (min-width: 36rem) { #login-status { flex-grow: unset; left: unset; right: unset; } #login-status:not(:hover):not(:focus-within) { visibility: hidden; } #login-status::before { visibility: visible; } } #search-top-box-input { min-width: unset; display: inline-block; } #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover { color: transparent; } #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover { border: none; text-shadow: none; } #search-top-box-form input[type=submit], #search-top-box-input:focus, #search-top-box-input:hover { border: none; } #search-top-box { display: flex; z-index: 12; position: absolute; top: 1.5em; right: calc(3% - .25em); align-items: center; justify-content: center; width: auto; height: calc(0.9375rem * 1.8); transform: translateY(-50%); font-size: calc(0.9375rem * .86667); } #search-top-box, #search-top-box * { box-sizing: border-box; margin: 0; padding: 0; border: none; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1); will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width; } #search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within :after, #search-top-box:focus-within :before { margin: 0; padding: 0; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), max-width .3s cubic-bezier(.4, 0, .2, 1); will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width; } #search-top-box:focus-within { background: rgba(var(--merc-dark-color), .7); box-shadow: calc(calc(0.9375rem * 1.8) / 2 * -1) 0 calc(calc(0.9375rem * 1.8) / 2) rgba(var(--merc-dark-color)); } #search-top-box:after, #search-top-box:before { position: absolute; top: 0; right: 0; width: calc(0.9375rem * 1.8); height: 100%; content: " "; } #search-top-box:before { -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2); -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; -webkit-mask-image: var(--search-top-box-mask); ; z-index: 14; background-color: rgb(var(--merc-light-color)); color: rgb(var(--merc-dark-color)); text-align: center; cursor: pointer; mask-image: var(--search-top-box-mask); ; mask-position: center center; mask-repeat: no-repeat; mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2); pointer-events: none; } #search-top-box:not(:focus-within):hover:before { background-color: rgb(var(--merc-light-color)); } #search-top-box:after { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); z-index: 13; clip-path: var(--clip-path); pointer-events: none; background-color: transparent; } #search-top-box:not(:focus-within):after { --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); background-color: rgb(var(--merc-light-color), 0); } #search-top-box form[id=search-top-box-form] { display: flex; visibility: visible; position: relative; right: 0; max-width: 100%; height: calc(0.9375rem * 1.8); } #search-top-box form[id=search-top-box-form]:not(:focus-within) { max-width: calc(0.9375rem * 15); } #search-top-box form[id=search-top-box-form] input { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; top: 0; } #search-top-box form[id=search-top-box-form] input[type=text] { z-index: 13; position: absolute; right: 0; width: calc(0.9375rem * 15); max-width: calc(0.9375rem * 15); height: 100%; padding: 0 calc(0.9375rem * 1.8) 0 1em; outline: 0 solid rgb(var(--merc-light-color)); background-color: rgb(var(--merc-dark-color), .7); box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color)); color: rgba(var(--merc-light-color)); } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] { max-width: calc(0.9375rem * 1.8); padding: 0; outline-width: 0; background-color: rgba(var(--merc-dark-color), 0); box-shadow: 0 0 0 0 rgb(var(--merc-light-color)); color: rgba(0, 0, 0, 0); cursor: pointer; } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover { background-color: rgba(var(--merc-dark-color), 1); } #search-top-box form[id=search-top-box-form] input[type=submit] { visibility: visible; z-index: 14; position: absolute; right: 0; width: calc(0.9375rem * 1.8); height: calc(0.9375rem * 1.8); outline: 0 solid rgb(var(--merc-light-color)); background-color: transparent; box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color)); color: t; font-size: calc(0.9375rem * .86667); cursor: pointer; pointer-events: all; } #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] { box-shadow: 0 0 0 0 rgb(var(--merc-light-color)); pointer-events: none; } #login-status { --wght: var(--ui-wght); display: flex; z-index: 11; position: absolute; top: 1.5em; right: calc(3% + calc(0.9375rem * 1.8) - .25em); align-items: center; justify-content: center; height: 2em; margin: 0 0 0 .5em; transform: translateY(-50%); color: rgb(var(--merc-light-color)); font-weight: var(--wght); font-size: 1em; font-family: var(--UI-font); white-space: nowrap; transition: opacity .2s cubic-bezier(.4, 0, .2, 1); } #search-top-box:focus-within ~ #login-status { opacity: 0; } #login-status span.printuser a:first-of-type { width: 1.75em; } #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in { margin: 0 1em; background-color: rgb(var(--pale-gray-monochrome)); color: rgb(var(--merc-dark-color)); padding: 0.1em 1em; text-decoration: none; } #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:focus-within { background-color: rgba(var(--merc-light-color), 1); color: rgb(var(--merc-dark-color)); text-decoration: none; } #login-status span.printuser { --wght: var(--ui-wght); margin-right: .5em; color: rgb(var(--merc-light-color)); font-weight: var(--wght); } #login-status a#my-account, #login-status a[href*="account/messages"] { color: rgb(var(--merc-light-color)); } #login-status a#my-account { --wght: var(--ui-wght); -webkit-text-decoration: underline rgb(var(--merc-dark-color)) .125em; display: flex; align-items: center; padding: 0 .5em; background-color: initial; box-shadow: inset 0 0 0 0 rgb(var(--merc-dark-color)); font-weight: var(--wght); text-decoration: underline rgb(var(--merc-dark-color)) .125em; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1); } #login-status a#my-account:active, #login-status a#my-account:hover { --wght: var(--ui-hvr-wght); -webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0; box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color)); color: rgb(var(--merc-light-color)); font-weight: var(--wght); text-decoration: underline rgb(var(--merc-dark-color)) 0; } #login-status a#my-account:focus-within { --wght: var(--ui-hvr-wght); -webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0; box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color)); color: rgb(var(--merc-light-color)); font-weight: var(--wght); text-decoration: underline rgb(var(--merc-dark-color)) 0; } #login-status #account-topbutton { --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%); -webkit-clip-path: var(--clip-path); position: relative; width: var(--account-height); height: var(--account-height); margin: 0; padding: 0; background-color: rgb(var(--merc-light-color)); color: transparent; clip-path: var(--clip-path); transition: -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1); transition: clip-path .1s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options { display: block !important; z-index: 12; position: absolute; top: 1.5rem; right: 0; width: 10em; margin: .25em 0 0; padding: 0; overflow: hidden; background-image: var(--gradient-header); background-color: rgb(var(--merc-dark-color)); opacity: 0; pointer-events: none; transition: opacity .15s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options:focus-within, #login-status #account-topbutton:active + #account-options, #login-status #account-topbutton:focus + #account-options { opacity: 1; pointer-events: all; } @media (pointer: coarse) { #login-status #account-options:hover, #login-status #account-topbutton:hover + #account-options { opacity: 1; pointer-events: all; } } #login-status #account-options * { margin: 0; padding: 0; } #login-status #account-options ul { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 2em; flex-grow: 1; align-items: center; justify-content: center; font-size: .85em; } #login-status #account-options ul li { position: relative; } #login-status #account-options ul li, #login-status #account-options ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #login-status #account-options a { --box-shadow: rgba(var(--merc-dark-color)); --wght: var(--ui-wght); position: relative; flex-grow: 1; height: 100%; max-height: 2em; padding: 0 .25em; box-shadow: inset 0 0 0 .0625rem var(--merc-dark-color); font-weight: var(--wght); transition: color .15s cubic-bezier(.4, 0, .2, 1), font-weight .15s cubic-bezier(.4, 0, .2, 1), font-variation-settings .15s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options li > a, #login-status #account-options li > a:visited { color: rgb(var(--merc-light-color)); } #login-status #account-options li > a:active, #login-status #account-options li > a:hover { --wght: var(--ui-hvr-wght); color: rgb(var(--merc-dark-color)); font-weight: var(--wght); text-decoration: none; } #login-status #account-options li > a:focus-within { --wght: var(--ui-hvr-wght); color: rgb(var(--merc-dark-color)); font-weight: var(--wght); text-decoration: none; } #login-status #account-options li > a[href*="/messages"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; font-size: 0; } #login-status #account-options li > a[href*="/messages"]:after { position: absolute; left: 50%; transform: translateX(-50%); content: "信息"; font-size: calc(0.9375rem * .765); pointer-events: none; } #login-status #account-options li > a:before { --clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); -webkit-clip-path: var(--clip-path); z-index: -1; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgb(var(--merc-light-color)); content: " "; clip-path: var(--clip-path); pointer-events: none; transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1); transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1); } #login-status #account-options li > a:active:before, #login-status #account-options li > a:hover:before { --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%); } #login-status #account-options li > a:focus-within:before { --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%); } /* ===默认收起用户信息栏和搜索栏=== */ #search-top-box { top: 23px; right: calc(3%); } #login-status { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; top: 24px; right: calc(3% + calc(0.9375rem * 1.8) + .25em); color: transparent; pointer-events: none; transition: color .2s cubic-bezier(.4, 0, .2, 1); user-select: none; } @media only screen and (min-width: 980px) { #search-top-box { right: calc(3% + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2); } #login-status { right: calc(3% + calc(0.9375rem * 1.8) + .25em + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2); } } #login-status:active, #login-status:hover { -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; color: rgb(var(--merc-light-color)); pointer-events: all; user-select: auto; } #login-status:focus-within { -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; color: rgb(var(--merc-light-color)); pointer-events: all; user-select: auto; } #login-status:active #account-options, #login-status:hover #account-options { pointer-events: all; } #login-status:focus-within #account-options { pointer-events: all; } #login-status > :not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 0; transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), clip-path .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1); } #login-status:active > :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover > :not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 1; } #login-status:focus-within > :not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); opacity: 1; } #login-status #account-topbutton { margin-left: 0; background-color: initial; pointer-events: all; transition: clip-path .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .15s cubic-bezier(.4, 0, .2, 1); } #login-status:hover #account-topbutton { background-color: rgb(var(--merc-light-color)); } #login-status:before { -webkit-mask-image: var(--user-account-mask); -webkit-mask-size: calc(calc(0.9375rem * 1.8) - .5em); -webkit-mask-position: center right; -webkit-mask-repeat: no-repeat; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--merc-light-color), 1); content: ""; cursor: pointer; mask-image: var(--user-account-mask); mask-position: center right; mask-repeat: no-repeat; mask-size: calc(calc(0.9375rem * 1.8) - .5em); pointer-events: all; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); } #login-status:hover:before { background-color: rgba(var(--search-icon-hover-color), 1); } #login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before { background-color: rgba(var(--search-icon-hover-bg-color), 0); cursor: auto; pointer-events: none; } #login-status:focus-within:after, #login-status:focus-within:before { background-color: rgba(var(--search-icon-hover-bg-color), 0); cursor: auto; pointer-events: none; } #login-status #account-topbutton { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: var(--clip-path); background-color: rgba(var(--merc-light-color), 0); clip-path: var(--clip-path); } #login-status:active #account-topbutton, #login-status:hover #account-topbutton { --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%); -webkit-clip-path: var(--clip-path); background-color: rgb(var(--merc-light-color)); clip-path: var(--clip-path); } #login-status:focus-within #account-topbutton { --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%); -webkit-clip-path: var(--clip-path); background-color: rgb(var(--merc-light-color)); clip-path: var(--clip-path); } #login-status #account-options { margin: 0; } #login-status a[href*="account/messages"] { color: rgb(var(--merc-light-color)); pointer-events: all; } #account-topbutton { border: none; } #account-options { border: none; }
这个版式由Liurd创建。若要在您的页面中使用本主题,将如下代码插入您页面中的任何位置:
[[include :backrooms-wiki-cn:theme:the-p-r-i]]
版式示例

图片(啊啊啊毛边我测你吗)
可以使用五个连字符"-----" 创建水平线,如果未将其放置在任何内容(例如引用块)中,则可以扩展到整个页面。分隔本文档各部分的行是水平线。
可以通过在行首加上1-6个之间的"+"字符来创建标题。
这是一个分页。
看看我,我这有更多文字!
可真是古朴风格。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套块引用1
这是一个 | 表格 |
---|---|
你应该早就 | 知道怎么 |
制作它了吧 |
脚2
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起来是
怎么运作
包括那些不存在
以及存在的链接!
还有特殊警告
或者风险更低的
或者安全的!
标题示例
[[div class="titleblock"]]
[[span class="titlebox"]]标题示例[[/span]]
[[/div]]
标题示例
[[div class="dark-titleblock"]]
[[span class="dark-titlebox"]]标题示例[[/span]]
[[/div]]
[[div class="lightblock"]]
这个东西用来让你看看链接颜色
[[/div]]
[[div class="darkblock"]]
这个东西用来让你看看链接颜色
[[/div]]
[[div class="styled-quote"]]
[[/div]]
[[div class="dark-styled-quote"]]
[[/div]]
[[div class="glassblock"]]
[[/div]]
[[div class="hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="light-hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="dark-hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="white-hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="inset-hoverblock"]]
试试把鼠标放在上面
[[/div]]
[[div class="transparent-hoverblock"]]
试试把鼠标放在这里
没错!这是一个div块!
[[/div]]
你是猫。
你是猫。
你是猫。
你是猫。
你是猫。
@import url("https://vivarium.wdfiles.com/local--files/backrooms%3Avivtheme/stylesheet.css"); :root { --theme-base: "black-highlighter"; --theme-id: "dark-p-r-i"; --theme-name: "Dark P.R.I. Theme"; --logo-image: url("https://s1.ax1x.com/2023/01/14/pSMUy1H.png"); --header-title: "P. R. I."; --header-subtitle: "因探求而凝聚,因合作而共存"; --body-font: punctuation-marks,proxima-nova, sans-serif; --header-font: 'CKTKingKong','uni_sansheavy_caps', sans-serif; --title-font: 'CKTKingKong','uni_sansheavy_caps', sans-serif; --mono-font: 'Fantasque Sans Mono', monospace; --white-monochrome: 240, 242, 242; --pale-gray-monochrome: 138, 166, 158; --light-gray-monochrome: 167, 217, 217; --very-light-gray-monochrome: var(--dark-gray-monochrome); --gray-monochrome: 101, 129, 140; --black-monochrome: 33, 37, 46; --bright-accent: 182, 219, 242; --dark-accent: 34, 50, 64; --medium-accent: 34, 68, 89; --pale-accent: 34, 68, 89; --swatch-topmenu-border-color: var(--dark-gray-monochrome); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); --swatch-background: var(--dark-gray-monochrome); --swatch-text-general: var(--swatch-text-light); --link-color: var(--bright-accent); --hover-link-color: var(--white-monochrome); --visited-link-color: var(--bright-accent); --newpage-color: var(--light-gray-monochrome); --background-gradient-distance: 40rem; --gradient-header: linear-gradient(to bottom, rgba(var(--dark-accent)) 0%, rgba(var(--dark-gray-monochrome)) 7.5rem ); --gradient-topmenu: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) var(--header-height-on-desktop), rgba(var(--dark-gray-monochrome),1) calc(var(--header-height-on-desktop) + 0.375rem), rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.2rem), rgba(var(--bright-accent), 1) calc(100% - 0.2rem), rgba(var(--bright-accent), 1) 100%); --gradient-topmenu-mobile: linear-gradient( to bottom, rgba(var(--dark-gray-monochrome),1) 0, rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem, rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.2rem), rgba(var(--bright-accent), 1) calc(var(--topbar-height-on-mobile) - 0.2rem), rgba(var(--bright-accent),1) var(--topbar-height-on-mobile)); --sidebar-transition-timing: 0.1s ease-in-out 0.1s; } @keyframes logo-appear { from { opacity: 0;} to { opacity: 0.4; } } @-webkit-keyframes logo-appear /* Safari and Chrome */ { from { top:-16rem; opacity: 0; } to { top:-0rem; opacity: 0.4; } } @keyframes top-appear { from { opacity: 0;} to { opacity: 1; } } -webkit-@keyframes top-appear { from { opacity: 0;} to { opacity: 1; } } @keyframes h1-appear { from { opacity: 0;} to { opacity: 1; } } @-webkit-keyframes h1-appear /* Safari and Chrome */ { from { opacity: 0;} to { opacity: 1; } } @keyframes h2-appear { from { opacity: 0;} to { opacity: 1; } } @-webkit-keyframes h2-appear /* Safari and Chrome */ { from { opacity: 0;} to { opacity: 1; } } @keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } @-webkit-keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @-webkit-keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } body { background-color: rgba(var(--black-monochrome)); max-width:100%!important; } #skrollr-body { width: auto; position: relative; top: 0; left: 0; background-image: linear-gradient( to bottom, rgba(var(--dark-accent), 1), rgba(var(--dark-gray-monochrome),1)); background-repeat: repeat-x; background-size: cover; background-position: center, center; } #top-bar{ animation:top-appear 3s ease-in-out alternate; -webkit-animation:top-appear 3s ease-in-out alternate; /*Safari and Chrome*/ } #side-bar:hover, #side-bar:active, #side-bar:focus-within { background-color: rgb(var(--black-monochrome)); } #side-bar .menu-item a, #side-bar:hover, #side-bar:active, #side-bar:focus-within a{ color:rgb(var(--white-monochrome))!important; } #header h1 a::before, #header h2 span::before { text-shadow: none; } #header::before { animation:logo-appear 3s ease-in-out alternate; -webkit-animation:logo-appear 3s ease-in-out alternate; /*Safari and Chrome*/ background-size: auto 8.5rem; } #header h1, #header h1 a { animation:h1-appear 3s ease-in-out alternate; -webkit-animation:h1-appear 3s ease-in-out alternate; /*Safari and Chrome*/ } #header h2, #header h2 span, #header h2 span::before { animation:h2-appear 3s ease-in-out alternate; -webkit-animation:h2-appear 3s ease-in-out alternate; /*Safari and Chrome*/ } div.top-bar>ul>li>ul>li>a{ transition: color 0.3s ease-out; -webkit-transition: color 0.3s ease-out; } div.top-bar>ul>li>ul>li>a:hover{ color: rgb(var(--black-monochrome))!important; } #container { background-image: none; } #toc { background-color:rgb(var(--gray-monochrome)); color:rgb(var(--white-monochrome)); box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: none; padding: 0.5rem } #toc a { color: rgb(var(--swatch-menubg-medium-color)); } #main-content a { transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } #page-title{ text-align: center; color: rgb(var(--light-gray-monochrome)); border-bottom: 5px solid rgb(var(--light-gray-monochrome)); } #main-content h1 { color: rgb(var(--light-gray-monochrome)); border-bottom: 5px 5px solid rgb(var(--light-gray-monochrome)); } .code { background-color: rgb(var(--dark-gray-monochrome)); border: none; border-left: 0.125rem rgb(var(--light-gray-monochrome))!important; box-shadow: none; } blockquote, div.blockquote { border: none; border-left: 0.125rem rgb(var(--light-gray-monochrome))!important; background-color: rgb(var(--dark-gray-monochrome)); } .scp-image-caption { background-color: rgb(var(--gray-monochrome)); } div.page-rate-widget-box, #page-content div.rate-box-with-credit-button, #page-content .creditButtonStandalone { border: none; border-left: 3px soild rgb(var(--light-gray-monochrome))!important; background-image: none; background-color:rgb(var(--light-gray-monochrome)); box-shadow: none } .page-rate-widget-box span.rate-points { letter-spacing: -12px; color: transparent !important; } .page-rate-widget-box .rate-points:before, .page-rate-widget-box .rate-points span { content: "综合评分指数:"; letter-spacing: 0; color: rgb(var(--black-monochrome)); } table.wiki-content-table td, table.wiki-content-table th, table.wiki-content-table tr { border: .1rem solid rgb(var(--gray-monochrome)) !important; background-color:rgb(var(--dark-accent))!important; } table.wiki-content-table th { color:rgb(var(--black-monochrome))!important; background-color:rgb(var(--light-gray-monochrome))!important; } .scp-image-caption { background-color: rgb(var(--gray-monochrome))!important; } /* TABVIEW */ .yui-navset .yui-content { background-color:inherit; border:none; border-bottom: 0.3rem solid rgba(var(--bright-accent), 1); } /*未选择的tab*/ .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background-color: rgba(var(--dark-accent), 1); color:rgb(var(--white-monochrome)); } /*鼠标移上去的tab*/ .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus { background-color: rgba(var(--dark-gray-monochrome), 1); color:rgb(var(--white-monochrome)); } /*选了的tab*/ #page-content .yui-navset .yui-nav .selected, #page-content .yui-navset .yui-navset-top .yui-nav .selected { background-color: rgba(var(--dark-gray-monochrone), 1); } #page-content .yui-navset .yui-nav .selected a:focus, #page-content .yui-navset .yui-nav .selected a:active { background-color: rgba(var(--dark-gray-monochrome), 1); } .yui-navset .yui-content > div { padding: 0.25em 0.5em; display: block; top: 0; overflow: hidden; transform-origin: 0 0; } #owindow{ background-color: rgba(var(--dark-accent), 1); color:rgb(var(--white-monochrome)); } #page-content .yui-navset .yui-content > div > * { transform-origin: 0 0; } #page-content .yui-navset .yui-content > div[style*="none"] { display: block !important; flex: 0; max-height: 0; padding: 0 0.5em; border-width: 0; transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s; animation: tab-disappear 1s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s; animation: tab-appear 1s ease-in-out 0.5s 1 both; } .footnotes-footer { border-color: rgb(var(--bright-accent)); } .lightblock { background-color:rgb(var(--gray-monochrome)); } .styled-quote { background-color:rgb(var(--gray-monochrome)); border-left:0.2rem solid rgb(var(--bright-accent)); } .darkblock { background-color:rgb(var(--dark-accent)); } .dark-styled-quote { background-color:rgb(var(--dark-accent)); border-left:0.2rem solid rgb(var(--bright-accent)); } .titleblock { background-color:rgb(var(--gray-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border-top: solid rgb(var(--bright-accent)) 0.3rem; } .dark-titlebox{ position: relative; top: -1.6rem; background-color:rgb(var(--gray-monochrome)); padding: 0.25rem 1rem; line-height: 0.1rem; } .dark-titleblock { background-color:rgb(var(--dark-accent)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border-top: solid rgb(var(--bright-accent)) 0.3rem; } .titlebox{ position: relative; top: -1.6rem; background-color:rgb(var(--dark-accent)); color: rgb(var(--white-monochrome)); padding: 0.25rem 1rem; line-height: 0.1rem; } .glassblock { background-image: linear-gradient(-30deg, rgba(var(--bright-accent),.8) -80%, rgba(var(--white-monochrome),.4) 100%); border: solid rgb(var(--pale-accent)) 2px; padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .hoverblock:hover,.hoverblock:focus{ box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25); transform: translateY(-.3em); } .light-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .light-hoverblock:hover,.light-hoverblock:focus{ background-color: rgb(var(--gray-monochrome)); box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25); transform: translateY(-.3em); } .dark-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .dark-hoverblock:hover,.dark-hoverblock:focus{ background-color: rgb(var(--dark-accent)); box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25); transform: translateY(-.3em); } .transparent-hoverblock{ color:transparent; padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .transparent-hoverblock:hover,.transparent-hoverblock:focus{ color: rgb(var(--white-monochrome)); box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25); transform: translateY(-.3em); } .white-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .white-hoverblock:hover,.white-hoverblock:focus{ color: rgb(var(--black-monochrome)); background-color: rgb(var(--white-monochrome)); box-shadow: 0px 4px 10px 0 rgba(var(--white-monochrome), .25); transform: translateY(-.3em); } .white-hoverblock:hover a:hover{ color: rgb(var(--black-monochrome)); } .inset-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .inset-hoverblock:hover,.hoverblock:focus{ box-shadow: inset 0px 4px 10px 0 rgba(var(--bright-accent), .25); transform: translateY(.3em); } .color{ min-height:90px; } .image-background { background-image: url(https://cicnsandbox.wikidot.com/local--files/component:destruction-sequence-agreement-css/body-url); border: solid rgb(89,47,46) 2px; padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; box-shadow: 0px 0px 20px 0px rgba(var(--dark-accent), .25); filter: invert(85%); color: rgb(var(--black-monochrome)); } .colors-container { width: 98%; display: flex; flex-direction: column; margin: 0 auto; font-weight: 700; font-family: var(--title-font, Verdana); color: black; } .colors-container .colors, .colors-container .subcolors { width: 100%; flex-shrink: 0; display: flex; flex-wrap: wrap; } .colors-container .color { flex-grow: 2; padding: 0.5rem; margin: 0.5rem; color: rgb(var(--swatch-text-dark, 0, 0, 0)); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .colors-container .colors .color { height: 7rem; min-width: 4rem; flex-basis: calc((100% / 2) - 2rem); } .colors-container .subcolors .color { height: 4rem; min-width: 4rem; font-size: 75%; text-align: center; flex-basis: calc((100% / 6) - 2rem); } .colors-container .css-variable { font-size: 75%; letter-spacing: 0.1em; font-family: var(--body-font, Verdana); } /* Hide a colour that's not been provided by seeing if the variable starts with "{$" */ .colors-container [data-variable^=\{\$] { display: none; } .colors-container [data-has-light-text="1"] { color: white; color: rgb(var(--swatch-text-light, 255, 255, 255)); } .owindow, .title.modal-header { background-color: rgb(44 44 44); color: #ffffff; }