Level C-720

+ 展开样式代码

/* 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;
 
}

生存难度：生存難度：

等级等級 2

• 亚安全
• 稳定
• 实体绝迹

---

如何使用：

[[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]]

---

Level C-720是后室C层群的第720层，是较早被录入数据库的层级之一，于2012年初被发掘。

描述

洁净晶白的“海洋”混杂着层出叠见的“波浪”

Level C-720是一片由雪构成的无垠海洋，该层级海面漂浮数量不定的的岛屿。值得注意的是，即使该层级全体均由雪构成，但其中的雪并不表现出常态，而是若羽毛般柔嫩的、液式的样态¹。

雪海茫茫，捧起一片软糯香甜，只消一霎，白色恐怖便荡然无存，只得浸在闲情逸致之下

该层级内有较弱的Wi-Fi信号，尽管其十分不稳定。该层级内的时间恒定于凌晨，这导致该层级中的亮度偏低，也为怪诞又承蒙了一层薄雾。伴随彷徨的加剧，层级中便会下起小雪。除了朦胧视野，还孕育出一介悲凄孤寂。

下车伊始，扑面而迎的却非是掠颊的寒气，恢胎旷荡羼杂着风平浪静，好不怅惘

层级内的反常温度已而促成流浪者须得面对的危因。迄今为止已被观测到的最低温度达到了零下四十三摄氏度，长时间暴露在户外会招致严重的冻伤。故建议流浪者如非必要，尽量避免进入外域。而当流浪者竭尽能量、即将昏晕之际，身上便会即刻穿着有一件普通羽绒服，它将使穿戴者逐渐清醒过来，并持续提供热量。这件羽绒服无法以任何方式破坏或被脱下，直至从该层级离去。

前所未有的温存感涌上心头，反转携顺着幸福淹没了痛楚，沦没于枕稳衾温之中

该层级内海洋的深度目前未知。任何试图以各种方式穿过海洋的流浪者都无一例外的陷入雪中直至消失。同时，流浪者的陷入痕迹会被雪全部覆盖，同无人历通过般，是故所有陷落之人均被认定为已失踪。因此任何流浪者切忌徒步穿越海洋。该区域的多数性质均与前厅海洋一致。

眼望着似雪的深海，波澜起伏，好像自身虚影倒映其中，堕陷至挑战者深渊²

该层级中的各个群岛是流浪者进入层级时的栖身地，也是离开本层的主要地带，这些群岛的规模普遍在0.5平方千里至5平方千米之间，大多由凌乱的冰凌和冰原组成，群岛上有极少概率出现建筑或类似植物的构造体。当中建筑雪屋为主，里面概率存有杏仁水、时空水晶、皇家口粮等物资，当中除过杏仁水具备突出的特征，其余物资均试图与环境融为一体³。但由于反常的低温，杏仁水总是固态的。对于雪屋本身，它们可零星分布在层级的任何区域，间杂出现抑或消失，所以雪屋总被作为一处优秀的临时庇护所。而植物的组成以分外坚实的冰晶为枝干，之中穿插着极大的、叶状的雪花。经核证，其外观大多为松树。

或许幸运诞临，极寒中坐有如此袒庇之护所，于中，雪花交汇于冰松里，酷寒也作一道靓景

据调查报告可知，此地域已然被多次记实有数名流浪者同处其中，但费解的是，从未有过任何报告提及过邂逅一事。初步推测罗致此现象的因由是层级难以置信的广阔面积，及各座岛屿的分离性，引致流浪者相遇的可能性几近为零。

寂寥无人，心静如水，瞥向景致，纠结或是矛盾便涣然冰释，徜徉，不失灯火阑珊、独自茕茕

随着流浪者在层级盘桓的时间加长，层级的特性便开始逐一显现，这种感觉被流浪者们描述为“像是小时候对下雪的憧憬，伴随着温馨的感觉，宛如亲情于我傍边”。揣测该现象可能是由层级而诱发的精神幻象，由此也引出了另一个论点：层级本身就是一只独立的未知实体。

许久，释然的伶仃蜕变出宜室宜家般的意象，犹若它看破了冰冷的皮囊，深深般贯入我心

---

现象

极光

此现象的发生具有规律⁴，也是造成流浪者在本层死亡或失踪的主要原因。在此现象出现时，天空会急剧滑移，进行昼夜切换⁵，夜空中会亮起淡紫色的光斑或光带。在此刻目视天空的流浪者会感到极为不适⁶，并在三小时内休克或死亡。而服用杏仁水已被证实可缓解一症状，候切出层级，症状也随枯形灰心化为乌有。若已无法规避死亡的到来，在临终之际，心中便会唤起渊底的怀念之情⁷ 。

逝去、毕命，它早便熟视无睹，付此置若罔闻，唯独心系在那雪涣云消之前，尽多吞噬思念

---

实体

已知本层级中并不存在任何除人类外的实体，但由于层级的广阔性，在更深处或许存在更多的未知之事。

---

基地、前哨与社区

由于本层级的极寒天气，暂不适宜建立任何前哨站或基地。

---

入口与出口

入口

于Level C-205游荡时，有概率在转折处⁸来到该层级。

出口

在极光事件中，忍耐着痛苦注视着天空，直至晕厥，醒来后你会躺在Level C-901的一座木屋中。

望着远方的群岛，心中浮现惆怅之思情，随之落入海洋中，你会抵达一片雪原。

---

还记得你第一次看到下雪吗？

当时，你兴奋的扑扇，试图抓住那些

晶莹无暇的纯白雪花

然而，这些雪花却在你稚嫩的手中一点点

消融、

分解，

最后成为一小摊清水，

倒映着你微微失望的脸庞。

下雪的时节固然是美丽而又灿烂的

但

…

雪后呢？


泥泞、湿滑…

一切可厌的事物接踵而来…

无情的摧残着这动人的光景。


你还期盼着下雪吗…？

也许你可能早已进入繁杂的社会

不能从生活的泥泞中自拔…

也许你在看雪时，

想起的不会是雪的洁净和无暇，

而是

寒冷和无助

…

但

无论你怎么想、怎么做…

我们会一直存在着

从广阔的天空中飘落…

以及极光

也从未离去


哪怕前途是消融与泯灭…

我们会一直在你身边…

不管你处境如何

请记住一点


一切皆未改变

回忆完满如初

---

著作信息

作者信息
404 Dream Night 为本篇文章的原作者
Tylersss 为本篇文章的重撰者 所有改扩均在原文上进行
图源：
版头背景
文中雪地
以上图片均符合Unsplash协议

Footnotes

1. 即便如此，其组成的本质依旧是雪。

2. 即前厅中海洋最深之处，也称马里亚纳海沟，位于西太平洋马里亚纳群岛东侧。

3. 以某种形式隐藏存在，例如皇家口粮，它的颜色致使它完全可以与雪融于一体。

4. 大约每八小时发生一次。

5. 直至抵达夜晚。

6. 具体表现为恶心、呕吐、晕眩、出现幻觉等。

7. 快速但清晰的回顾一生，徒增生平怀念。

8. 例如转身，摔倒后爬起，静目结束等。