/* 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; }
@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; } } .yui-navset .yui-content > div { padding: 0.25em 0.5em; display: block; top: 0; overflow: hidden; transform-origin: 0 0; } #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 0.5s 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 0.5s ease-in-out 0.5s 1 both; } .color{ min-height:100px; } :root { --theme-base: "black-highlighter"; --theme-id: "frost"; --theme-name: "Frost Theme"; --theme-base: "black-highlighter"; --logo-image: url(""); --header-title: "The Backrooms"; --header-subtitle: "深度冰寒"; --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --white-monochrome: 242, 242, 242; --pale-gray-monochrome: 220, 236, 242; --light-gray-monochrome: 172, 202, 242; --dark-gray-monochrome: 63, 94, 136; --gray-monochrome: 41, 73, 166; --dark-accent: 22, 45, 115; --bright-accent: 173, 192, 217; --medium-accent: 10, 93, 166; --black-monochrome: 34, 47, 64; --pale-accent: 60, 84, 115; --swatch-topmenu-border-color: var(--bright-accent); --link-color: var(--medium-accent); --hover-link-color: var(--dark-accent); --visited-link-color: 13, 65, 174; --newpage-color: 88, 101, 166; --gradient-header: linear-gradient(to top, rgba(var(--bright-accent),0) 0%, rgba(var(--gray-monochrome),.4) 5rem ),linear-gradient(to top left, rgba(var(--bright-accent),0) 0%, rgba(var(--gray-monochrome),.6) 100% ); } .color{ min-height:90px; } ::selection { color: rgb(var(--white-monochrome)); background:rgb(var(--pale-accent)); } span.printuser { color: rgb(0,0,0) } #skrollr-body { background-image: radial-gradient(circle, rgba(var(--light-gray-monochrome),.2) 50%, transparent 0); } 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; } body::after { content: ""; background-image: url("https://images.unsplash.com/photo-1548097160-627fd636ee56?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"); background-size: cover; position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.15; z-index: -1; -webkit-filter: blur(10px); filter: blur(10px); } body{ background-color: rgba(var(--bright-accent)); } div#extrac-div-1::after { content: ""; position:fixed; top:var(--final-header-height-on-desktop); width:100%; height:calc(100% - var(--final-header-height-on-desktop)); background-image: linear-gradient(to bottom, rgba(var(--bright-accent)) 0%, rgba(var(--pale-gray-monochrome)) 25%, rgba(var(--white-monochrome)) 100% ); background-size: auto 100%; background-repeat: repeat; opacity: 1; z-index: -3; } #main-content a { transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; /* Safari */ } .scp-image-block .scp-image-caption { color: rgb(var(--white-monochrome)); background-color: rgb(var(--dark-accent)); border-color: rgb(var(--dark-accent)); } #container { background-image: none } #side-bar .side-block div a img { filter: grayscale(0%); } div#page-options-bottom-2 > a, div#page-options-bottom > a { border-radius: 0em; -moz-border-radius: 0em; border: none; } div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover { border: none; } hr { border-color:rgb(var(--pale-accent)); } table.wiki-content-table td, table.wiki-content-table th, table.wiki-content-table tr { border: .2rem solid rgb(var(--gray-monochrome)) !important; background-color:rgb(var(--bright-accent))!important; } table.wiki-content-table th { color:rgb(var(--black-monochrome))!important; background-color:rgb(var(--pale-gray-monochrome))!important; } blockquote, .blockquote, div.blockquote, [class*="blockquote"] { border: 2px double rgba(var(--pale-accent)); background-color:rgb(var(--pale-gray-monochrome)); color: var(--white-monochrome); margin: 1em 46px; padding: 0 1em; } .styled-quote { background-color:rgb(var(--pale-gray-monochrome)); border-left: 0.5rem solid rgba(var(--pale-accent)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote { background-color:rgb(var(--pale-accent)); border-left: 0.5rem solid rgb(var(--pale-gray-monochrome)); color:rgb(var(--white-monochrome)); box-shadow: 0.2rem 0.1rem 0.3rem rgba(0,0,0,.25); } .lightblock { background-color:rgb(var(--pale-gray-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock { background-color:rgb(var(--pale-accent)); color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock a,.dark-styled-quote a,.dark-titleblock a,.titlebox a{ color:rgb(var(--pale-gray-monochrome)); } .titleblock { background-color: rgb(var(--pale-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: solid rgb(var(--pale-accent)) 2px; } .dark-titlebox{ position: relative; top: -1.6rem; background-color: rgb(var(--pale-gray-monochrome)); color: rgb(var(--black-monochrome)); padding: 0.25rem 1rem; line-height: 0.1rem; } .dark-titleblock { background-color:rgb(var(--pale-accent)); color:rgb(var(--white-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: solid rgb(var(--pale-accent)) 2px; } .titlebox{ position: relative; top: -1.6rem; background-color: rgb(var(--pale-accent)); color: rgb(var(--white-monochrome)); padding: 0.25rem 1rem; line-height: 0.1rem; } .glassblock { background-image: linear-gradient(-30deg, rgba(var(--medium-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; transform: translateY(0em); } .hoverblock:hover,.hoverblock:focus{ box-shadow: 0px 4px 20px 0 rgba(var(--medium-accent), .25); background-color: rgba(var(--light-gray-monochrome),.1); 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 */ transform: translateY(0em); } .light-hoverblock:hover,.light-hoverblock:focus{ background-color: rgb(var(--pale-gray-monochrome)); box-shadow: 0px 4px 20px 0 rgba(var(--medium-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 */ transform: translateY(0em); } .dark-hoverblock:hover,.dark-hoverblock:focus{ background-color: rgb(var(--pale-accent)); color: rgb(var(--white-monochrome)); box-shadow: 0px 4px 20px 0 rgba(var(--medium-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 */ transform: translateY(0em); } .transparent-hoverblock:hover,.transparent-hoverblock:focus{ color: rgb(var(--black-monochrome)); box-shadow: 0px 4px 20px 0 rgba(var(--medium-accent), .25); transform: translateY(-.3em); } .white-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: box-shadow 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transform: translateY(0em); } .white-hoverblock:hover,.white-hoverblock:focus{ box-shadow: 0px 4px 20px 0 rgba(var(--white-monochrome), .25); background-color: rgb(var(--white-monochrome)); transform: translateY(-.3em); } .inset-hoverblock{ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; transition: box-shadow 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transform: translateY(0em); } .inset-hoverblock:hover,.hoverblock:focus{ box-shadow: inset 0px 4px 20px 0 rgba(var(--bright-accent), .25); background-color: rgb(var(--pale-accent)); color: rgb(var(--white-monochrome)); transform: translateY(.3em); } .interwiki1 { background: rgb(var(--light-gray-monochrome)); margin: 10px 15px; padding: 10px; border: none; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,102,.5); box-sizing: border-box; /*width: 15em;*/ width: calc(var(--base-font-size*0.93333*19)); } .interwiki1_title { color: rgb(var(--black-monochrome)); border-bottom: solid 1px rgb(var(--black-monochrome)); padding-left: 15px; margin-top: 10px; margin-bottom: 5px; font-size: 8pt; font-weight: bold; } .interwiki1_entry { position: relative; margin: 2px 0; } .interwiki1_entry p::before { content: "■"; font-size: 9px; color: rgb(var(--black-monochrome)); position: relative; margin: 0 7px 0 5px; bottom: 3px; } .interwiki1_entry a, .interwiki1_entry a:visited { font-weight: bold; color: rgb(var(--black-monochrome)); text-decoration: none; background: transparent; } .interwiki1_entry a:hover { color: rgb(var(--black-monochrome)); background-color: transparent; text-decoration: underline; }
生存难度:生存難度:
等级等級 0
- 环境安全
- 实体低害
- 空间稳定
如何使用:
[[include :backrooms-wiki-cn:component:level-class
|class=等级
]]
class 处的可用参数包括以下内容,支持简繁体及英文输入。
| English | 简体中文 | 繁體中文 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 | 5 | 0 | 1 | 2 | 3 | 4 | 5 | 0 | 1 | 2 | 3 | 4 | 5 |
| unknown | 未知 | 未知 | |||||||||||||||
| habitable | 宜居 | 宜居 | |||||||||||||||
| deadzone | 死区 | 死區 | |||||||||||||||
| pending | 等待分级 | 等待分級 | |||||||||||||||
| n/a | 不适用 | 不適用 | |||||||||||||||
| amended | 修正 | 修正 | |||||||||||||||
| omega | 终结 | 終結 | |||||||||||||||
该组件支持简繁切换,如下方代码所示:
[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级
]]
在 lang 处选择语言,cn 表示简体中文,tr 表示繁体中文,不填默认选择简体中文。
自定义等级
[[include :backrooms-wiki-cn:component:level-class
|lang=cn/tr
|class=等级名字
|color=#000000(带有井号的十六进制色号代码。)
|image=链接(至图片的链接。)
|one=在这
|two=随便
|three=放文字
]]
使用 CSS 进行自定义:
你可以使用 CSS 进行额外的自定义,将代码放入到 [[module css]] 中或者是放入到页面的版式内都可以。在这一组件中,不要把 [[module css]] 放在 [[include]] 里面,把它放在那个的下面或者是页面的顶部或底部。
将这些代码放入到你的页面/版式中以编辑所有的颜色,因为组件的 |color= 部分仅能控制背景:
[[module css]]
.sd-container {
/* 字体 */
--sd-font: Poppins, Noto Sans SC, Noto Serif SC;
/* 边框 */
--sd-border: var(--gray-monochrome); /* 大多数等级 */
--sd-border-secondary: 0, 0, 0; /* 不适用 */
--sd-border-deadzone: 20, 0, 0; /* 死区 */
/* 标志 */
--sd-symbol: var(--sd-border) !important; /* 大多数标志 */
--sd-symbol-secondary: 255, 255, 255; /* 4 级以上的是白色 */
/* 文本 */
--sd-bullets: var(--sd-border) !important; /* 点句符文本颜色 */
--sd-text: var(--swatch-text-secondary-color); /* 顶部框文本颜色 */
/* 等级颜色 */
--class-0: 247, 227, 117;
--class-1: 247, 227, 117;
--class-1: 255, 201, 14;
--class-2: 245, 156, 0;
--class-3: 249, 90, 0;
--class-4: 254, 23, 1;
--class-5: 175, 6, 6;
--class-unknown: 38, 38, 38;
--class-habitable: 26, 128, 111;
--class-deadzone: 44, 13, 12;
--class-pending: 182, 182, 182;
--class-n-a: 38, 38, 38;
--class-amended: 185, 135, 212;
--class-omega: 25, 46, 255;
}
[[/module]]
旧版颜色:
如果你不喜欢新版的样式,想要用回旧版的红色边框色,只需要在你的页面中与组件一同引入下方的代码:
[[module css]]
.sd-container {
--sd-border: 90, 29, 27;
--sd-image: 90, 29, 27;
--sd-symbol: 90, 29, 27;
}
[[/module]]

冬湾。
远在浅海群系发现之前,甚至可以说在后室发现之初,“冬湾”的传说便已在后室万维网流传开来,甚至有四套信息与图片互证。对于网络,十几年已非常漫长,这些传说已经传播、发展得纷繁复杂,一直无法确定源头,也无法判断真伪。不过,2025年那些开汽艇的流浪者往北航行的时候,我们确认了这个地方确实存在。总的来说,冬湾在浅海的正北方。但它并不是像其它浅海层级那样,航向大概对,随便开开就能到——它的海域入口极为狭小,通常弥漫了浓厚的海雾,且有寒气从其中吹出。
除了开船,目前还没有人用其它方式抵达过层级。1
冬湾的外貌与传闻基本一致:浮有薄薄海雾的海湾,周围一圈是近岸的街道。越过街道去则是冰雪染白的冬日山丘,向外无限延伸,上面生着落光了叶的白桦或是覆满积雪的松林。
层级总是处在如同高纬度地区的黄昏中。晴时天色是澄明的深蓝,偶有薄云,背向太阳能见几颗星,也能见着那横贯天际的渐变蓝色。太阳大致是夕阳,染了一小片天际。它处在地平线上方不远处,水平地绕着小海湾旋转。若以岸边上一点为参照,太阳旋转的周期约35个小时。
层级没有昼夜交替,只是当太阳转到小丘或高峰那处时,阴影可能覆盖整个冬湾。住在冬湾的人们以“拉上窗帘黑夜、拉开窗帘黄昏”的方式生活着。
流浪者能感到这斜阳的光比一般的温暖,但层级室外气温还是大致低冰点五个摄氏度。海湾似乎不断地向层级输来寒风,穿过窄窄的街区吹到雪丘上去。这般低温好像没有影响海湾上寒雾的形成,但雾气吹到海湾外面,就会凝结了,化作滚地的雪风,街区中常能见到。

标有000的木栈桥。
街道是无限的。这有些反直觉,因为海湾是近圆形,虽然由于海雾见不到对面,但从弯曲程度上看,湾的直径仅四到六千米——总该是有尽头的。不过,在不下海的情况下,向海湾一侧去,总能见到无穷无尽新的景象,不会折回。当然,这时再看,海湾仍然是原来的海湾,就像未曾移动那样,而对面的景象仍然沉没在海雾之中。
有人说那些街区,甚至是山道和海堤公路,都不断在海雾当中出现,也在海雾当中消失。也有人说这纯粹是视错觉。不论怎么样,这岸边的狭小街道都能无限延伸。唯一不变的是冬湾的景象。
实际上,流浪者开船到达冬湾时,总是处在层级中心位置附近,这片街区,定居者们称之“零号镇”。实际上,早在传闻中,就有描述称冬湾街区的建筑都有编号,而编号是从零开始往两边增大。真正进入层级后,流浪者们也发现镇中心就有一座标着零号的灯塔,包括海湾边上木栈桥一个“000”的标识——零号镇就此定名了。
零号镇是个北欧风格的小城镇,紧靠着礁石质的海岸。房屋大多都是单层,装修各异,一点共性是外漆都鲜艳明亮。民居车库中常停有能开动的轿车,其中大部分看不出是什么车型。民居之外,零号镇有一栋办公大楼、几间超市与粮食店、家具店等,有少部分甚至有流浪者在经营。大部分街区有三条与海岸平行的街道,有时也并作两条。镇子是狭长形状,到第四个街区外面就都是覆雪的荒山。
零号镇内大部分建筑都有供暖,更远的镇子上也一样,只不过是供暖方式有所不同。据说到目前,零号镇内已定居有一两百人,他们靠某些建筑中不时刷新的物资生活。

零号镇的黄昏。
冬湾有“东西”方向,但与太阳无关,是第一批到来的流浪者随意确定的。实际上太阳是向东转的。
零号镇在西边137号结束,东边镇外面,越过一个不大的雪丘,有一个加油站,标牌293号,在这里镇子也到尽头了。
镇外面的公路是一条,沿着海岸线前进,方向持续平缓地转着。这条公路一直串联了雪山、沙滩和海堤,甚至高耸的悬崖海岸。它两旁有着路灯,虽从来未曾开启,却能在公路埋在积雪下方时指示方向。
沿着公路开车,每开十几个小时,就可能遇到一个城镇。镇旁常有加油站,在这里可以补充燃油。这些更远的镇子里,建筑也依然按照之前的规则标号。流浪者们常用编号来称呼城镇,如294镇,可以从零号镇往东开十几个小时到达,是个高层公寓街区。
有些镇子还包含海港,在那里能够找到些船只,也可以找到对应的重油。2031年起航的那艘浅海游轮,就经常去往西边138号镇的海港。
前文提过三十五小时向东转一圈的太阳,提过后室发现之初对冬湾的传闻,也提到过零号镇的特殊地位。这些事实似乎拼拼凑凑也毫无关联,但据推测,冬湾拥有一些时间上的异常性质,能够解释大多数的事实。
2026年,流浪者们发现,在西边138号的港口中向外发送信息,总能在一天之前就被接收。也有流浪者发现,坐在开动的轿车上发送信息,信息竟然被军用无线电接收到了——似乎是某种多普勒效应。
实际上,冬湾周围的公路,向西是过去,向东则是未来。零号镇则代表了现在。冬湾内,时间是恒稳流逝的,但与外界互动之时,就会展现出时间异常。至于无线电信号的多普勒效应,则是因为驰骋的轿车实际上是在向过去飞奔,压缩了信号发出的时间。
在此理论下,后室发现之前,冬湾竟已有了传闻,也就很好理解了。这些探索者现在还没有出发很久,只是因为他们不断往西开去,也就开进了后室刚刚发现的时间里。事实上,这些传闻中,探索者们无一例外的是向西走去。向东走去的探索者们,则已经超越了我们,把他们的信息留在未来。
据这些传闻的时间线推测,冬湾这条公路跨越时间的尺度是会随距离增加的,也许到了西边几百公里处,几十米便能回溯一个月。
街道外部的雪原、林地、荒山之中,似乎没有任何人类活动的痕迹;以目前的探索看来,山地应该是铺展到无限远方。未曾有人冒着凛冽的气温深入这毫无庇护的雪境,便是有人滑雪、滑冰的湖泊,也大多离零号镇中心不远。
有些地方,低矮起伏的地势会忽而变作高耸的山峰,或变作宏伟的峡湾地貌,围绕着小小的冬湾。公路也可能盘山而上,或在峡湾底下蜿蜒穿行。有人测量后称138港后面那座雪山高达9200米,差不多四倍高于零号镇东边那座。
无论如何兜转,海岸线和冬湾都始终在公路附近。进出层级的唯一通道就是海湾——或者更准确点,是海湾内长久笼罩的过冷雾气。
实际上,层级内最多的船只,还是单调层里开出的汽艇。开船要择太阳在湾对面的时候。这个时候,把船开到湾的中心。过程之中,越来越沉凝的雾气将渐渐遮挡起湾边的全部景象,能见度变为仅有几十米。在这个时候,连灯塔都不再管用,唯一的航标就是隐约漏过雾气的夕阳色彩。向着那模糊了的夕阳开去,开个三十几公里,就可以感到寒意随雾气一起消散。此时便到浅海了。
若不是择太阳在湾对面的时候开船,那么海雾出口的方向就捉摸不定,船很难开出这片迷雾;或者,船干脆是开入了过去或者未来的浅海。大部分情况下,只有向着太阳航行,才能驶出冬湾。
当然,若船不进入湾心的海雾,只是沿岸驶去,那么船就和公路上的车一样,会经历无穷无尽的景象,从海雾中蹦出、在海雾中消失。开往138港的船只即是如此,它们偶尔从零号镇经过,沿海湾开往西边。
层级内的降雪比较特别。降雪通常是以一架划过天际的飞机作为开始。它从海雾中现身,留下的航迹云处于冬湾的正上方,随公路一起盘旋,最后隐没在海雾里。航迹云在不断扩散之时却毫无减损,最终变作笼罩天际的云层。
到这个时候,层级内会下一场暴雪。这场雪短的持续三个小时,长的持续三天以上。降雪频率并不高,约30天一次。2
飞机既可以由东飞向西,也可以由西飞向东,也就是这飞机既可以从未来飞往过去,也可以从过去飞往未来。没人知道这飞机是不是像速切航班这样的层级,或是一个自然的天象。不过刚刚落下的雪都极为纯净,以至于可以当作重要的水源。

不尽的雪原。
在冬湾更遥远荒凉的区域里头,拍到过北极熊、海豹、兔子、狐狸甚至狼群。它们很少与人类相遇,因此并无危险。独属于后室的实体在此并未发现,或许冬湾离其他层级都太远了,或许时间上隔得太久了。
树木在地势低矮的地方生长,茂密的丛林形成片区,无穷无尽;再高点就没有树木,地表一下子变作积雪下蛰伏的苔原,再往上是冻土地带。
冬湾的流浪者生活随意,有些干脆就是来度假,或者对于有季节的层级来说,是叫避暑。目前大多数流浪者还聚集在零号镇里,有些人也住在294镇和138港这两个临近的城镇里。
一部分流浪者将冬湾作为自己理想的假期目的地。当然,想要到那里并非易事。游轮往返于冬湾和各个浅海层级之间,许多流浪者就是靠它进入冬湾。
当然,许多流浪者驻留一段时间之后,还是因层级环境寒冷、光照不强而离开。或许这个层级只适合那些早已适应高纬度漫长冬季和极夜之前黄昏的人们。
我们再来看看那些在漫长的时间中开枝散叶的传说。
目前能确定是层级传出的,只有四个系列的探索记录。它们是倒序传出的,而现在,我们已经能够拿到全部的记录。这些确定为真的记录,反而没有那么“精彩”,它们记录的冬湾,也无非就是永远延伸的公路,还有湾上的海雾、高耸的雪峰。1203镇有点像是二战时期的要塞;2187港外,洋面上铺满枯萎的浮水植物;3320镇是雪砖堆的雪屋度假村;3398镇似乎永久留下了圣诞节的气氛,一望去满是圣诞树、冬青花环与关掉的灯带。
这些远行的记录,跟一些明显是编造的传闻一比,确实有些单调,也更容易被埋没;于是有一段时间,冬湾本身也就成了后室的lost media3。而其他传闻则是不断刷新着。
有些传闻说是自己向远离冬湾的一条道路驶去,那条道路似乎就通往前厅;有一些传闻说湾那边的海雾最终会被吹散,吹散后是一条通往所谓“结局”的路。有人说自己开船去过冬湾;有人在某些层级突然开车出现,然后宣讲自己就是经过冬湾,从未来回到了过去,可以提供预言。如是种种,不再赘述。
其中,一套研究那些门牌号与后室历史事件的对应关系的传言流传很广。好些流浪者相信每个镇子都对应了某些事件,如1203镇的地堡对应了一场战争,1664镇的损毁对应了一次灾难,甚至3502港栈桥比正常的设计长了两三倍,都能对应“一次大探索时代”。有人说将这些事件向前“平移”,就能预测后室的将来。
当然,这些传言现在都已销声匿迹。“冬湾”有人入住后,人们发现所谓的时间异常并非神秘不可测,既往的传闻对于这些居民来讲,已经成了一些笑谈。住在138港、住在294镇似乎都没什么差别,三个聚居地的流浪者们相互串门;流浪者们坐车去“昨天”或者“明天”,以给其他层级的流浪者发一条及时回复的信息,或者给自己延长一天工作截止时间。
最近,四支车队从零号镇中出发,开往西边;五支车队开往东边。开往西边过去的一支车队在层级论坛上发帖,称他们早就已经知道自己要踏上这一段征程,因为传闻中的照片就是未来的他们自己;不过,他们还是“为已经确定到来的未来而兴奋”。4
“冬湾”是从《左右游戏》这篇都市传说中摘得的名字。在《左右游戏》中,它是车队成员在和一个诡异的搭车人搭话后,脑中出现的那个虚幻而理想的目的地。
图源按顺序(有编辑)
https://unsplash.com/photos/ship-on-water-near-mountains-vpNK_g2k9L0
https://unsplash.com/photos/brown-wooden-ocean-dock-ZqwR90fCl8g
https://unsplash.com/photos/two-person-walking-on-side-walker-near-brown-leafed-tree-under-cloudy-sky-yqsRxqKKKXM
https://unsplash.com/photos/snowfield-near-trees-at-daytime-during-golden-hour-rwBIrbQLRTc
