Level UX-113 “大殿”

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

+ 版式代码

- 关闭

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&display=swap');
@import url('https://backrooms-wiki-cn.wikidot.com/local--files/theme:golden-age/back.css');
:root {
--logo-image: url("");
--header-title: "The Backrooms";
--header-subtitle: "你曾经来过这里";
--body-font: 'Noto Sans', sans-serif;
--header-font: 'Noto Sans SC';
--title-font: 'Noto Sans SC';
--mono-font: 'Noto Serif SC';
--white-monochrome:  0,0,0;
--pale-gray-monochrome: 0,0,0;
--light-gray-monochrome: 252,232,2;
--gray-monochrome:252,232,2;
--black-monochrome:255,255,255;
--bright-accent: 252,232,2;
--medium-accent: 214,206,2;
--dark-accent: 252,232,2;
--pale-accent: 252,232,2;
--link-color: 252,232,2;
--visited-link-color: 252,232,2;
--hover-link-color: 252,232,2;
--newpage-color: 214,206,2;
--background-gradient-distance: 30rem;
--background-gradient-color: 200,200,200;
 
--sd-border: 252,232,2;
--sd-fill: 20, 22, 24;
}
 
#header, #top-bar {
   color:#ffffff;
}
 
hr {
width: auto;
margin: auto;
position: relative;
height: 2.5px;
background-color: none;
pointer-events: none;
overflow: hidden;
border: initial;
-webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
}
 
hr:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
background-attachment: fixed;
background-color: #fce703;
background-repeat: repeat;
background-position: center;
background-size: auto;
}
 
#header h1 a::before {
color: #ffffff;
}
 
#header h2 span:before {
color: #ffffff;
background-clip: text;
-webkit-background-clip: text;
width: 100%;
height: 100%;
background-attachment: fixed;
}
 
#header h2 span {
font-size: 1.5em;
top: 1em;
font-family: "Noto Sans SC";
}
 
#container {
   background: none;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    color:rgb(255,255,255);
}
 
th {
background-color: rgb(var(--medium-accent)) !important;
}
 
.top-box:before {
    background: url("") !important;
}
 
.header-diamond .diamond-pattern {
    background: url("") !important;
}
 
.scp-image-block {
    border: 0.2rem solid rgba(var(--pale-accent));
}
 
.scp-image-block .scp-image-caption {
    color: rgb(255,255,255);
    background-color: rgb(0,0,0);
    border-top: 0.2rem solid rgba(var(--pale-accent));
    margin-top: 0.3rem;
}
 
.page-rate-widget-box {
    background: none;
    border: 0.2rem solid rgba(var(--pale-accent));
    background-color: rgb(0,0,0);
}
 
table.wiki-content-table th,
table.wiki-content-table td {
   border: solid 1px rgb(var(--pale-accent));
}
 
.code{
   background-color: white;
   border: solid 2px rgb(var(--pale-accent));
}
 
.lightblock {
background-color:rgb(0,0,0);
   border: solid 2px rgb(var(--pale-accent));
}
 
.styled-quote {
background-color:rgb(0,0,0);
   border: solid 2px rgb(var(--pale-accent));
border-left: 0.5rem solid rgba(var(--pale-accent));
}
 
.dark-styled-quote {
border-left: 0.5rem solid rgba(40,40,40);
}
 
.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,.5);
border: solid rgb(var(--medium-accent)) 0.1rem;
}
 
.titlebox {
color: rgb(var(--white-monochrome));
position: relative;
top: -1.6rem;
background-color: rgb(var(--medium-accent));
padding: 0.25rem 1rem;
line-height: 0.1rem;
}
 
.dark-titleblock {
background-color: rgb(var(--gray-monochrome));
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,.5);
border: solid rgb(var(--medium-accent)) 0.1rem;
}
 
.dark-titlebox {
color: rgb(0,0,0);
position: relative;
top: -1.6rem;
background-color: rgb(var(--medium-accent));
padding: 0.25rem 1rem;
line-height: 0.1rem;
}
 
blockquote{
color: white !important;
}
 
.blockquote{
color: white !important;
}
 
.dark-styled-quote a, .dark-titleblock a, .darkblock a, .titlebox a, .dark-titlebox a{
color: rgb(70,70,70);
}
 
.top-box {
   border-color: rgb(var(--sd-border)) !important;
}
 
.bottom-box ul li {
   color: rgb(var(--sd-border)) !important;
}
 
.bottom-box ul li:before {
   background: rgb(var(--sd-border)) !important;
}
 
.top-box .gradient-box {
  background: linear-gradient(90deg, rgba(var(--sd-border),1) 0%, rgba(var(--sd-border),0) 36%) !important;
}
 
.header-diamond {
   background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 300.9 284.5' style='enable-background:new 0 0 300.9 284.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23fce802;%7D .st1%7Bfill:%23fce802;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st1' points='73.4,32.6 0,105.4 13.6,105.4 86.4,32.6 '/%3E%3Cpolygon class='st1' points='26.5,105.4 40.1,105.4 112.9,32.6 99.3,32.6 '/%3E%3C/g%3E%3Cpolyline class='st1' points='287.3,105.4 214.5,32.6 227.5,32.6 287.3,91.9 '/%3E%3Cpolygon class='st1' points='274.4,105.4 260.8,105.4 188,32.6 201.6,32.6 '/%3E%3C/svg%3E") !important;
}
 
.top-box.class-unknown .header-diamond { filter: none !important; }
.top-box.class-unknown:before, .top-box.class-unknown .header-diamond .diamond-pattern{ opacity: 0.15 !important; }
 
.top-box .header-diamond .diamond-image {
   filter: brightness(0%) invert(100%);
}
 
.top-box.class-0 {
   background: rgb(var(--sd-fill)) !important;
}
 
.header-diamond .diamond-color.class-0 {
   background: rgb(var(--sd-fill)) !important;
}
 
.top-box.class-1, .top-box.class-2 {
   background: rgb(var(--sd-fill)) !important;
}
 
.header-diamond .diamond-color.class-1,
.header-diamond .diamond-color.class-2 {
   background: rgb(var(--sd-fill)) !important;
}
 
.top-box.class-3, .top-box.class-4 {
   background: rgb(var(--sd-fill)) !important;
}
 
.header-diamond .diamond-color.class-3,
.header-diamond .diamond-color.class-4 {
   background: rgb(var(--sd-fill)) !important;
}
 
.top-box.class-5, .top-box.class-unknown {
   background: rgb(var(--sd-fill)) !important;
}
 
.header-diamond .diamond-color.class-5,
.header-diamond .diamond-color.class-unknown {
   background: rgb(var(--sd-fill)) !important;
}
 
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
    color: rgb(225, 225, 225);
}
 
#top-bar div.top-bar > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li:hover > a {
    color: rgb(225, 225, 225);
}
 
#top-bar div.top-bar > ul > li > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover > a {
    color: black;
}
 
#top-bar div.top-bar > ul > li > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a {
    color: rgb(225, 225, 225);
}
 
#account-options > ul > li > a {
color: black;
}
@media only screen and (max-width: 510px) {
 
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
    color: black;
}
 
#top-bar div.top-bar > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li:hover > a {
    color: white;
}
 
#top-bar div.top-bar > ul > li > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover > a {
    color: white;
}
 
#top-bar div.top-bar > ul > li > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a {
    color: rgb(225, 225, 225);
}
 
}
 
@media only screen and (max-width: 768px) {
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
   color: #000;
}
 
#top-bar div.top-bar > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li:hover > a {
    color: #000;
}
 
#top-bar div.top-bar > ul > li > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover > a {
   color: #000;
}
}
 
.license-area{
color: #fff!important;
}
 
.license-area a{
color: #fff;
}
 
.license-area a:hover{
color: rgb(252,232,2);
}

生存难度：生存難度：

等级等級 4E

不安全
脆弱不堪
环境危害

如何使用：

[[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 表示繁体中文，不填默认选择简体中文。

自定义等级

使用 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 UX-113是后室UX层群的第114个层级。

描述

Level UX-113是一座悬浮在空中的巨大的中国古典风格宫殿，结构十分混乱，建造宫殿的材料及其中的各种物品均染成了褐色。宫殿以外的部分大多为虚空，流浪者应该尽快跳入虚空以离开此层级。破坏层级的任何部分都会导致层级进一步的崩塌，因此 M.E.G. 已放弃对此层级的开发与建立基地。

Level UX-113内部的走廊与房间错综复杂，无论是地板，墙壁，还是家具，陈设等等统一为褐色，即使带出层级颜色也不会改变。远远看来，一座浸透咖啡色的宫殿浮于空中；遥遥望去，层级晴朗湛蓝的天空令人宁静。层级的采光设计的十分怪异，部分地方完全黑暗，有些地方完全露天。

初入层级时，或许会被纯色和光影所吸引，温暖的阳光透过窗格射入，在茶色的映衬下有了几分冷光的色调，光影在复杂的结构间游走，染上褐色的斑驳，彰显出建筑的立体感。但时间稍长，自然会感到无聊，且长时间的单一颜色将导致视觉疲劳，同时由于层级的颜色与肤色接近，流浪者在视疲劳时难以把控距离。

层级的非线性空间极其不稳定，视野之外的部分总是在变化，即使眨一下眼面前的结构也会瞬间改变，同时由于结构的不合理，走进四面墙壁的死路很常见，直接回头就会发现身后是一片新的结构；行进时回头也可能会发现来路不再，只见一面墙壁贴在眼前。因此大殿中没有迷路的说法，也无法绘制地图。

庭院

一些房间的入口采用了异常大的月洞门，有些结构类似于四合院，但中间的庭院有时不露天，并且即使露天采光方式也极为奇怪，比如以平顶覆盖庭院，再在天花板中央开一个类似中国古代垂花门的洞口以采光，诸如此类。

当流浪者进入这种四合院结构的庭院时，正对着的房屋门一般都是紧闭的。层级地板上有时可见到意义不明的扶手，还有莫名其妙立在空地的门。这种门没有门框且较重，与其说是门，不如说是一块安有门把手的木板，一推就倒，倒地摔裂。

走廊

层级的走廊十分反常，流浪者有时可以在其中发现电梯门，由于只是在墙上雕刻出来的，无法正常使用。部分过道背景墙独立挂有许多栅格，其中摆放着一些引诱流浪者的物资，如杏仁水，唐式凉茶，方块状的葡萄冰糖等。这些物资并非幻象，也能正常食用，但这些栅格都是以小木板搭建的，之间并无连接，只有底层的承重板是固定在墙壁上的。拿取物资可能会导致栅格像多米诺骨牌一样散架摔碎。

有些走廊会横生墙壁将走廊分成两个小走廊，同时由于层级内没有任何电灯或蜡烛等小型照明物，唯一的光源就是层级的自然光，走廊经常是一片黑暗，流浪者行进中要尽量避免撞上此类墙壁的边缘。

层级有些部分装修精美，门窗雕镂细致，家具一应俱全，墙上配有浮雕，还有或横或竖的装饰柱，有时也会遇到突兀的影壁。影壁上的图案千奇百怪，有时在黑暗中摸起来凹凸不平的影壁，照明后发现一片光滑。一些埋伏在黑暗角落的衣帽架总是会惊吓到流浪者，也很容易被碰倒摔碎。而有些部分却十分简陋，单纯由天花板，墙壁，地板组成，连房梁或者门框都没有，结构类似Level 0，但分割上更加零碎。

特殊效应

层级中的所有材料都较为脆弱，稍稍用力即可破坏，原地起跳都可能导致地板凹陷，流浪者在探索时应多加注意。层级的设计有意诱导流浪者破坏层级，比如一些突兀的珠帘，上面缀有的蓝色水晶珠是本层级唯一非褐色的东西，自然格外显眼，同时打磨光滑，通透鲜艳。但这些珠子同属于层级的一部分，摘下珠子将被视为破坏层级，而此层级最重要的一个特殊效应也将显现。

流浪者进行一次任何破坏层级的行为时，大殿整体各个部分都会受到一定程度的损毁，例如推倒一个柱子，大殿的几十扇门和墙壁会一同碎裂，并产生一个流浪者破坏前的层级的迭代。需要注意的是，只有人为或实体破坏层级才会导致此效应发生，层级损毁引起的连锁损毁不会引起此效应。

找到通向大殿外部的门或走廊，跳下虚空，可以回到上一个迭代中随机的位置。新切入层级的流浪者会进入最新的迭代。在不是最新迭代的大殿中进行破坏，将立刻在最新的迭代后产生一个新迭代，破坏的效果将仅作用于新产生的迭代，刚才被破坏的大殿中所有流浪者都会进入这个新产生的迭代。每个迭代都会至少继承上一个最近的迭代的损毁，有增无减。

时间轴

一个假设的示意图，不代表层级真实情况。在真实情况中，打破一扇门后层级的损毁不止一扇门，还会附加其他损毁。

行为守则

流浪者应该遵守以下守则，以避免对层级的破坏：

不要推开任何关着的门，尤其是木门。门可能会被推倒砸地碎裂，或者门后非常脆弱的插销可能被掰断，这些都属于破坏层级。

不要快速跑动，跳跃，搬重物，上楼梯。层级的地板的脆弱远超想象。

不要扯下珠帘的水晶珠， U.E.C.曾经掠夺过这里的水晶珠，为此层级的逃离难度做出了"巨大的贡献"。

不要坐在椅子上，靠在墙上，它们并不稳固可靠。

不要拿取栅格，抽屉，箱子内的物资，即使物资放在空地上，也尽量远离，物资附近的地板可能禁不住流浪者的重量。

小心前进，避免碰倒东西，尤其是在视疲劳时。

不要在此层级开战！

另外，流浪者应时刻注意层级损毁导致的坍塌掉落物，远离装饰柱与墙壁。目前此层级已有约70个迭代，但据M.E.G.在一些资料库中找到的不完全可信的记录，大殿曾经到达过400以上的迭代，当时的大殿混乱不堪，分崩离析，生存难度接近死区。目前为止，M.E.G.还没有发现消除迭代的方法。

实体

尽管很少见，流浪者遇到的可使用的电梯都是实体。另外，损毁严重的迭代可能出现金羽鸟。

基地，前哨与社区

由于此层级的特殊性质，无法建立。

入口

在一些有户外空间的层级，盯着天空上漂浮而来的古代宫殿10秒，就会切入此层级。如不切入，一段时间后宫殿就会消失。

出口

从完好无损的大殿跳入虚空，回到原来的层级。

切入一些绘有其他层级的完整影壁，将来到对应层级，常见的有 Level UX-87、Level UX-75等。

第五个迭代后，基本没有完整的影壁，有小概率遇到一个翻倒的冰淇淋餐车，因为不是褐色所以很显眼，钻进去来到冰淇淋店。这个餐车疑似在第三个迭代后就被掩埋。

+ 作者信息

劣化原创层级建筑环境危害生存难度4 隔地促动

Parallel And Intersect

平行与相交