错误的舞台

+ 展开样式代码

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

警告：版式代码

/*
   2024 Theme
   [2024 Wikidot Theme]
   by Ambersight
   For 2024 Archipelago
*/
 
@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
@keyframes collapsible-arrow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-90deg); }
}
 
@keyframes collapsible-arrow-spin-back {
    from { transform: rotate(-90deg); }
    to { transform: rotate(0deg); }
}
 
@keyframes collapsible-arrow-spin-2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(90deg); }
}
 
@keyframes collapsible-arrow-spin-back-2 {
    from { transform: rotate(90deg); }
    to { transform: rotate(0deg); }
}
 
/* ROOT */
:root {
    --2024_red: 212, 39, 39;
    --2024_gray: 255, 237, 221;
    --2024_black: 39, 36, 36;
    --2024_white: 255,255,238;
    --2024_purple: 96, 39, 212;
    --2024_link: 251, 40, 54;
    --2024_visited-link: 210, 12, 12;
    --2024_hover-link: var(--2024_visited-link);
    --2024_dead-link: 251, 163, 31;
    --2024_alt-link: var(--2024_black);
    --2024_alt-visited-link: 0, 0, 0;
    --2024_alt-hover-link: var(--2024_alt-link);
    --2024_alt-dead-link: 255, 202, 45;
    --2024_alt-link-2: 210, 12, 12;
    --2024_alt-visited-link-2: 156, 8, 8;
    --2024_alt-hover-link-2: 210, 12, 12;
    --2024_alt-dead-link-2: 221, 102, 17;
    --2024_pattern: url('http://ye-zhi-d.wikidot.com/local--files/start/theme2024pattern.png');
 
    --logo-image: url(http://backrooms-oversight-cn.wikidot.com/local--files/posts/CN-logo-alt-white.png);
    --header-title: "2024";
    --header-subtitle: "The Backrooms";
    --mono-font: 'JetBrains Mono', Recursive, "Noto Serif SC", "Noto Serif TC", "宋体", "SimSun", "Microsoft YaHei UI", "微软雅黑", "Microsoft JhengHei UI", "Microsoft JhengHei", "Courier New", Courier, monospace, STXihei, "华文细黑";
    --white-monochrome: var(--2024_black);
    --pale-gray-monochrome: var(--2024_red);
    --very-light-gray-monochrome: var(--2024_black);
    --light-gray-monochrome: var(--2024_red);
    --gray-monochrome: var(--2024_gray);
    --dark-gray-monochrome: var(--2024_gray);
    --black-monochrome: var(--2024_white);
    --bright-accent: var(--2024_red);
    --medium-accent: var(--2024_red);
    --dark-accent: var(--2024_gray);
    --alt-accent: var(--2024_dead-link);
    --link-color: var(--2024_link);
    --hover-link-color: var(--2024_hover-link);
    --visited-link-color: var(--2024_visited-link);
    --rating-module-button-cancel-color: var(--2024_gray);
    --header-height-on-desktop: 19.5rem;
    --header-height-on-mobile: 19.5rem;
    --header-h1-font-size: calc(var(--base-font-size)*5);
    --header-h2-font-size: calc(var(--base-font-size)*2);
    --topbar-height-on-desktop: 2.35rem;
    --body-width-on-desktop: 61.25rem;
    --toggle-border-color: rgb(var(--2024_red));
    --toggle-icon-color: rgb(var(--2024_red));
    --modal-header-bg: var(--2024_red);
    --modal-header-txt: var(--2024_white);
    --base-font-size: max(0.8125rem, min(2vw, 0.9375rem));
    --sidebar-width-on-mobile: calc(var(--base-font-size) * (14 / 15) * 19);
}
 
/* HEADER */
#header {
    --swatch-headerh1-color: var(--2024_white);
    --swatch-headerh2-color: var(--2024_white);
}
 
#header::before {
    background-size: auto 12rem;
    background-position: center top;
    opacity: 1;
}
 
#header h1,
#header h1 a {
    top: 0;
}
 
#header h1 span,
#header h2 span {
    font-size: 0;
}
 
#header h1 a::before {
    display: block;
    position: absolute;
    top: 14rem;
}
 
#header h2, #header h2 span,
#header h2 span::before {
    top: 5.5rem;
}
 
#header h2 span::before {
    font-size: var(--header-h2-font-size);
}
 
#header h1 a::before,
#header h2 span::before {
    --wght: 400;
    --text-shadow: none;
    font-family: 'Archivo Black', var(--title-font);
}
 
#extrac-div-1 {
    position: absolute; top: 0; right: 0;
    width: 100%;
    height: var(--header-height-on-desktop);
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
#skrollr-body {
    background: none;
}
 
/* TOP BAR */
#top-bar div.mobile-top-bar > ul > li > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a {
    --wght: 700;
}
 
#top-bar div.mobile-top-bar > ul > li > ul > li > a:hover,
#top-bar div.top-bar > ul > li > ul > li > a:hover {
    color: rgb(var(--2024_white));
    background: rgb(var(--2024_red));
}
 
/* SIDE BAR */
#main-content::before {
    background: rgba(var(--2024_black), .5) 1px 1px repeat;
}
 
#side-bar {
    scrollbar-color: rgb(var(--2024_red)) rgb(var(--2024_black));
}
 
#side-bar .side-block.media {
    background-color: rgb(var(--2024_red)) !important;
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
#side-bar .side-block.media a {
    overflow: hidden;
}
 
#side-bar .side-block.media a img {
    position: relative;
    transform: translateX(-80px);
    filter: drop-shadow(rgb(var(--2024_white)) 80px 0);     
}
 
#side-bar div.side-block {
   border: none;
}
 
#side-bar .side-block .heading {
    background: rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
}
 
#side-bar .heading p,
#side-bar #side-bar .side-block > .collapsible-block .collapsible-block-link {
    --text-shadow: none;
}
 
#side-bar div.menu-item a:hover {
    background-color: rgb(var(--2024_red));
    color: rgb(var(--2024_gray));
}
 
#side-bar .side-block > .collapsible-block a.collapsible-block-link {
    padding-right: 0;
    font-size: var(--base-font-size);
}
 
#side-bar .side-block > .collapsible-block a.collapsible-block-link:after,
#side-bar div.menu-item a.collapsible-block-link:after {
    transform: none;
    content: "▼";
    position: static;
    background: none;
    width: auto;
    filter: none;
}
 
/* CONTENT */
#container {
    background-image: none;
}
 
#main-content :is(h1, h2, h3, h4, h5, h6, blockquote, div.blockquote, div.lightblock, div.darkblock, div.styled-quote, div.dark-styled-quote, hr, div.collapsible-block, table.wiki-content-table, .yui-navset-top, div.code, table, div.paperblock, div.darkerblock, div.darker-styled-quote) {
    margin-top: var(--base-font-size);
    margin-bottom: var(--base-font-size);
}
 
#main-content :is(blockquote, div.blockquote, div.lightblock, div.darkblock, div.styled-quote, div.dark-styled-quote, code, div.code, div.scp-image-block) {
    box-shadow: none;
}
 
#page-title {
    --wght: 700;
    display: flex;
    align-items: center;
    min-height: 1em;
    margin: .5em 0 1em;
    padding: 0;
    border: none;
    color: rgb(var(--swatch-text-general));
    font-weight: var(--wght);
    font-size: 2em;
    line-height: 1;
    font-family: var(--title-font);
    font-variant-ligatures: common-ligatures contextual discretionary-ligatures;
    text-align: left;
}
 
#page-title::after,
#page-title::before{
    content: "";
    flex-grow: 1;
    height: 0.0625rem;
    margin: auto auto auto 1.25rem;
    background: rgb(var(--swatch-primary));
}
 
#page-title::before{
    margin: auto 1.25rem auto auto;
}
 
.yui-navset .yui-nav {
    transition: none;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--2024_red));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    color: rgb(var(--2024_white));
    transition: none;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: rgb(var(--2024_gray));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    color: rgb(var(--2024_black));
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
    background-color: rgb(var(--2024_black));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    color: rgb(var(--2024_white)) !important;
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    background-color: rgb(var(--2024_black));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    padding: 1px 1em;
}
 
.footnotes-footer {
    background-color: rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
}
 
hr {
    height: 0px;
    border-top: 1px solid rgba(var(--2024_gray), .4);
}
 
#toc {
    margin: 0;
    background-color:rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
    border: none;
}
 
table {
    border-spacing: 0;
}
 
.scp-image-block {
    border: none;
}
 
.scp-image-block .scp-image-caption {
    border: none;
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
table.wiki-content-table th {
    --wght: 700;
    color: rgb(var(--2024_white));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
table.wiki-content-table td {
    color: rgb(var(--2024_black));
    background: rgb(var(--2024_white));
}
 
table.wiki-content-table td,
table.wiki-content-table th,
table.wiki-content-table tr {
    border: 0.2rem solid rgba(var(--2024_red), 0.6) !important;
}
 
div.rate-box-with-credit-button div.page-rate-widget-box .rate-points,
div.page-rate-widget-box .rate-points {
    font-size: 0.8em;
    align-items: center;
}
 
div.rate-box-with-credit-button div.page-rate-widget-box .rate-points .number,
div.page-rate-widget-box .rate-points .number {
    --wght: 400;
    font-size: 1.3em;
}
 
ul {
    list-style-type: disc;
    padding-inline-start: 20px;
}
 
ol {
    padding-inline-start: 20px;
}
 
a.collapsible-block-link {
    display: block;
    background-color: rgb(var(--2024_black));
    text-align: center;
    color: rgb(var(--2024_white));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    padding: 0.3em 0.5em;
    --wght: 700;
    font-size: 1.2em;
    text-decoration: none !important;
    transition: background-color 300ms;
}
 
a.collapsible-block-link:hover {
    color: rgb(var(--2024_white));
    background-color: rgb(var(--2024_red));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
.collapsible-block-folded a.collapsible-block-link::before,
.collapsible-block-unfolded-link a.collapsible-block-link::before,
.collapsible-block-folded a.collapsible-block-link::after,
.collapsible-block-unfolded-link a.collapsible-block-link::after {
    margin: 0 0.5em;
    content: "▼";
    display: inline-block;
}
 
.collapsible-block-folded a.collapsible-block-link::before {
    animation-name: collapsible-arrow-spin;
}
 
.collapsible-block-unfolded-link a.collapsible-block-link::before {
    animation-name: collapsible-arrow-spin-back;
}
 
.collapsible-block-folded a.collapsible-block-link::after {
    animation-name: collapsible-arrow-spin-2;
}
 
.collapsible-block-unfolded-link a.collapsible-block-link::after {
    animation-name: collapsible-arrow-spin-back-2;
}
 
.collapsible-block-folded a.collapsible-block-link::before,
.collapsible-block-unfolded-link a.collapsible-block-link::before,
.collapsible-block-folded a.collapsible-block-link::after,
.collapsible-block-unfolded-link a.collapsible-block-link::after {
    animation-duration: 300ms;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32, .38, .39, .94);
    animation-fill-mode: forwards;
}
 
.collapsible-block-content {
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    background-color: rgb(var(--2024_black));
    padding: 1px 1rem;
    color: rgb(var(--2024_white));
}
 
.sponsor table {
    width: 100%;
    color: rgb(var(--2024_black));
}
 
.sponsor table {
    border-top: 0.2rem solid rgba(var(--2024_red), 0.6) !important;
    border-bottom: 0.2rem solid rgba(var(--2024_red), 0.6) !important;
}
 
.sponsor table tr {
    display: grid;
    grid-template-areas: 'name con' 'name req' 'name rew';
    grid-template-columns: 7.5em auto;
    border-top: none !important;
    border-bottom: 0.3rem transparent solid !important;
}
 
.sponsor table tr:nth-last-child(1) {
    border-bottom-width: 0 !important;
}
 
.sponsor table tr td:nth-child(1) {
    grid-area: con;
    border-right: none !important;
    border-top: none !important;
}
 
.sponsor table tr td:nth-child(1)::before {
    --wght: 700;
    content: "赞助用户："
}
 
.sponsor table tr td:nth-child(2) {
    --alt-accent: var(--2024_alt-dead-link);
    --link-color: var(--2024_alt-link);
    --hover-link-color: var(--2024_alt-hover-link);
    --visited-link-color: var(--2024_alt-visited-link);
    --wght: 700;
    white-space: normal;
    grid-area:name;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    color: rgb(var(--2024_white));
    background-color: rgb(var(--2024_red));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    text-align: center;
}
 
.sponsor table tr td:nth-child(3) {
    grid-area: req;
    border-right: none !important;
    border-top: none !important;
}
 
.sponsor table tr td:nth-child(3)::before {
    --wght: 700;
    content: "成就条件："
}
 
.sponsor table tr td:nth-child(4) {
    grid-area: rew;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
}
 
.sponsor table tr td:nth-child(4)::before {
    --wght: 700;
    content: "青睐奖励："
}
 
#main-content [id*=u-credit] div.modalbox {
    background: rgb(var(--2024_black)) !important;;
    color: rgb(var(--2024_gray));
}
 
#main-content [id*=u-credit] div.modalbox > div:first-of-type {
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
#main-content [id*=u-credit] div.modalcontainer div:nth-child(1) > h2 {
    margin-top: 0;
    margin-bottom: 0;
}
 
#main-content [id*=u-credit] .credit.first {
    display: block;
}
 
#main-content [id*=u-credit] div.modalbox > hr {
    margin: 0;
    height: 0;
    border: none;
}
 
#main-content [id*=u-credit] .credit.first p {
    margin: 1em 0;
    padding: 0;
}
 
#main-content [id*=u-credit] div.creditBottomRate {
    margin: 0 0 1em;
    padding: 1rem 0 0;
    box-shadow: none;
}
 
#page-content .licensebox a.collapsible-block-link {
    margin-left: 0;
    opacity: 1;
    color: rgba(var(--2024_white), 0.5);
    transition: background-color 300ms;
}
 
#page-content .licensebox a.collapsible-block-link:hover {
    color: rgba(var(--2024_white), 1);
}
 
/* DIV */
.darkblock a,
.dark-styled-quote a {
    color: rgb(var(--link-color));
}
 
.darkblock a:visited,
.dark-styled-quote a:visited {
    color: rgb(var(--visited-link-color));
}
 
.darkblock a:hover,
.dark-styled-quote a:hover {
    color: rgb(var(--hover-link-color));
}
 
.darkblock a.newpage,
.dark-styled-quote a.newpage {
    color: rgb(var(--newpage-color));
}
 
blockquote,
div.blockquote {
    --alt-accent: var(--2024_alt-dead-link);
    --link-color: var(--2024_alt-link);
    --hover-link-color: var(--2024_alt-hover-link);
    --visited-link-color: var(--2024_alt-visited-link);
    background: rgb(var(--2024_red));
    color: rgb(var(--2024_white));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    border: 2px solid rgba(var(--2024_white), .6);
}
 
div.lightblock {
    --alt-accent: var(--2024_alt-dead-link-2);
    --link-color: var(--2024_alt-link-2);
    --hover-link-color: var(--2024_alt-hover-link-2);
    --visited-link-color: var(--2024_alt-visited-link-2);
    margin-left: 0;
    background: rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
}
 
div.paperblock {
    padding: 0.1rem 1rem;
    background: rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}
 
div.darkblock {
    --alt-accent: var(--2024_alt-dead-link);
    --link-color: var(--2024_alt-link);
    --hover-link-color: var(--2024_alt-hover-link);
    --visited-link-color: var(--2024_alt-visited-link);
    margin-left: 0;
    background: rgb(var(--2024_red));
    color: rgb(var(--2024_white));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
div.darkerblock {
    background: rgb(var(--2024_black));
    color: rgb(var(--2024_gray));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    padding: 0.1rem 1rem;
}
 
div.styled-quote {
    --alt-accent: var(--2024_alt-dead-link-2);
    --link-color: var(--2024_alt-link-2);
    --hover-link-color: var(--2024_alt-hover-link-2);
    --visited-link-color: var(--2024_alt-visited-link-2);
    margin-left: 0;
    background: rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
    border-color: rgb(var(--2024_red));
}
 
div.dark-styled-quote {
    --alt-accent: var(--2024_alt-dead-link);
    --link-color: var(--2024_alt-link);
    --hover-link-color: var(--2024_alt-hover-link);
    --visited-link-color: var(--2024_alt-visited-link);
    margin-left: 0;
    background: rgb(var(--2024_red));
    color: rgb(var(--2024_white));
    border-color: rgb(var(--2024_gray));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
div.darker-styled-quote {
    padding: 0.1rem 1rem;
    background: rgb(var(--2024_black));
    color: rgb(var(--2024_gray));
    border-left: 0.5rem solid rgba(var(--2024_red));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
div.styled-quote hr,
div.lightblock hr {
    background: rgba(var(--2024_black), .6);
}
 
blockquote hr
div.blockquote hr,
div.dark-styled-quote hr,
div.darkblock hr {
    border-color: rgba(var(--2024_white), .8);
}
 
div.paperblock hr {
    --alt-accent: var(--2024_alt-dead-link-2);
    --link-color: var(--2024_alt-link-2);
    --hover-link-color: var(--2024_alt-hover-link-2);
    --visited-link-color: var(--2024_alt-visited-link-2);
    display: grid;
    height: 6px;
    background: rgba(var(--2024_red), .6);
    border: none;
    transform: skew(-15deg);
    border-radius: 3px 8px 10px 6px;
}
 
div.code {
    background: rgb(var(--2024_black));
    color: rgb(var(--2024_white));
    border: 0.2rem solid rgba(var(--2024_red), .6);
}
 
/* BUTTONS */
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
    background-color: rgb(var(--2024_red));
    color: rgb(var(--2024_white));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
}
 
div#page-options-bottom > a:focus-within,
div#page-options-bottom-2 > a:focus-within {
    text-decoration: none;
}
 
.owindow .button-bar a,
a.button,
button,
div.buttons input,
file,
input.button {
    border-color: rgb(var(--2024_black));
    background-color: rgb(var(--2024_red));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    color: rgb(var(--2024_white));
}
 
.owindow .button-bar a:hover,
a.button:hover,
button:hover,
div.buttons input:hover,
file:hover,
input.button:hover {
    border-color: rgb(var(--2024_black));
    background-color: rgb(var(--2024_gray));
    color: rgb(var(--2024_black));
}
 
/* PAGE TAGS */
 
#main-content .page-tags {
    border-top: 0.2rem solid rgb(var(--2024_red));
    position: relative;
    margin-top: 2rem;
}
 
.page-tags:before {
    color: rgb(var(--2024_gray));
    content: "TAGS";
    font-weight: bold;
    font-size: 85%;
    background: rgb(var(--2024_red));
    padding: 0.1rem 0.3rem;
    margin: 0;
    display: block;
    width: fit-content;
    position: absolute;
    bottom: 1.4rem;
    left: 0;
}
 
#main-content .page-tags span {
    border-top: none;
    padding-top: 3px;
}
 
.page-tags span a:nth-child(1) {
    margin-left: 0;
}
 
/* OTHERS */
::selection {
    background: rgb(var(--2024_purple));
    color: rgb(var(--2024_white));
}
 
::-moz-selection {
    background: rgb(var(--2024_purple));
    color: rgb(var(--2024_white));
}
 
#footer {
    white-space: nowrap;
    padding: 0.2rem;
    align-items: center;
    height: auto;
    font-size: calc(var(--base-font-size)*.75);
}
 
#footer .options {
    display: flex !important;
    flex-wrap: wrap;
    border: none;
    font-size: 0;
    padding-right: calc(var(--base-font-size)*.75*.4);
}
 
#footer .options a {
    font-size: calc(var(--base-font-size)*.75);
    box-shadow: .0625rem 0 0 0 rgb(var(--2024_red));
    padding: 0.2em;
    padding-right: 0.4em;
    margin: 0.2em;
}
 
#license-area {
    background: rgb(var(--2024_red));
    background-image: var(--2024_pattern);
    background-repeat: repeat;
    background-size: 80px auto;
    color: rgb(var(--2024_gray));
    padding: 0.5em 0;
}
 
#license-area a {
    color: rgb(var(--2024_gray));
}
 
.avatar-hover {
    display: none !important;
}
 
.printuser img.small {
    padding-right: 3px;
}
 
#page-info-break {
    height: 0.8rem;
}
 
#page-options-container {
    margin-bottom: 0.5em;
    display: grid;
    grid-template-areas: 'info watch' 'option1 option1' 'option2 option2';
    max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
}
 
#page-options-container #page-info {
    grid-area: info;
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 0.65rem;
}
 
#page-options-container .page-watch-options {
    grid-area: watch;
    margin: 0;
    padding: 0;
    font-size: 0.65rem;
}
 
#page-options-container #page-options-bottom {
    grid-area: option1;
    margin-top: 0.5rem;
}
 
#page-options-container #page-options-bottom-2 {
    grid-area: option2;
}
 
#page-options-container #page-options-bottom,
#page-options-container #page-options-bottom-2 {
    width: 100%;
}
 
.hl-code,
.hl-identifier,
.hl-brackets {
    color: rgb(var(--2024_gray));
 
}
 
.hl-string,
.hl-special {
    color: rgb(96, 39, 212);
}
 
#who-rated-page-area > div > span[style*=color] {
    color: rgb(var(--2024_gray)) !important;
}
 
/* ICONS */
.infomark::before {
    content: "\f05a";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}
 
/* MOBILE */
#license-area {
    bottom: 0;
    width: 100%;
    padding-top: 0.5em;
}
 
#top-bar div.mobile-top-bar {
    height: var(--topbar-height-on-mobile);
}
 
@media only screen and (max-width: 768px) {
    :root {
        --rating-module-height: 1.5em;
    }
 
    #content-wrap {
        margin: var(--topbar-height-on-mobile) auto 0;
    }
 
    #page-content {
        font-size: 0.95em;
    }
 
    #page-options-container {
        grid-template-areas: 'info info' 'watch watch' 'option1 option1' 'option2 option2';
    }
 
    #page-options-container .page-watch-options {
        text-align: left;
    }
 
    .sponsor table tr {
        grid-template-columns: min-content auto;
    }
 
    .sponsor table tr td:nth-child(2) {
        white-space: normal;
    }
 
    .sponsor table tr td:nth-child(1)::before {
        content: "赞助用户"
    }
 
    .sponsor table tr td:nth-child(3)::before {
        content: "成就条件"
    }
 
    .sponsor table tr td:nth-child(4)::before {
        content: "青睐奖励"
    }
 
    .sponsor table tr td:nth-child(1)::before,
    .sponsor table tr td:nth-child(3)::before,
    .sponsor table tr td:nth-child(4)::before {
        display: block;
    }
 
    #license-area {
        padding: 0.8em 0;
        height: auto;
    }
 
    #license-area a {
        display: block;
    }
}

• 

  close

  著作信息

  ---

  X

  可怜的家伙。就是没法时来运转啊。:c

  本文是用英式英语写的，以防写作内容让你感到困惑。

  由 pnn wepm 为 2024 圣诞礼物交换活动撰写。这是给 Praetor3005 的礼物。

  他想要一篇能把两个不相关的页面合并成一个的文章。我选的两个是Entity 185 和 Level 74，这很合适，因为恐旅是他最喜欢的设定之一，也是我最爱的设定。

  非常感谢 Op_Egg does not match any existing user name、CROOOKIE 和 DrAkimoto 的评论…… 以及 Light_Nate 尝试进行评论。还要感谢 DrAkimoto 给予的绿灯。

  使用的版式是版式：2024，由 Ambersight 制作。

  ---

日安，喜剧演员。

你在恐怖旅馆剧院的下一场演出已定于下周三下午 5 点，恳请你尽可能多花时间准备。

我不想再看到上周那样的事件发生；因为他们否定你的笑话而引发斗殴，这是不负责任的行为。我很清楚你在努力逗乐客人时所面临的困难，但我向你保证，只要充分练习，你定会赢得一轮掌声。

对你而言，没有什么比逗这些客人开心更为重要的事了，而且你也非常清楚失败的代价。

此致，
——绅士

喜剧演员带着紧张的神情读完了那条消息。

“又来一次。”其暗自想道。

---

（一周后……）

---

就是今天！

其能透过旅馆的复古墙壁听到模糊的掌声，老板此刻一定正在招呼那些令人满意的客人。“该死！”那场既定的表演马上就要开始了，但其还没准备好。要是有个最毫无准备喜剧演员奖，现在肯定颁给这家伙了，甚至都不会有什么竞争。

上一场演出搞砸了，之前那场也是，再之前那场还是，依此类推。这太不公平了，为什么就没有一个明智的人觉得笑话好笑呢？他们显然不尊重其的工作，也难怪其上次一怒之下就大打出手了。其花了好几个月，不，是好几年，反复修改每一个……一个……让人们发笑的重要细节。

向别人征求意见：失败。阅读关于幽默的指南：失败。向老板求助：失败。在一阵绝望中，其甚至读遍了那个图书馆里所有能找到的书，尽管所有可读的书都是不情愿地从人们的脑海中提取出来的。“为什么我就是做不到呢？”如果其再失败，绅士这次肯定会施加更为严厉的惩罚。

“哦，该死，别再分心了。”在其准备的时候，把这烦人的想法抛到一边，这一定是第十次了。可就在这时，突然传来开门的声音，紧接着一个声音说道：“喜剧演员？”这让其猝不及防。其转过身，看到行李员站在门口——他那张猫头鹰般的脸格外显眼，显得与周围格格不入。

哦不，不，不，不，我还没准备好呢！再给我点时间。你知道的，让喜剧演员准备不足，这太不公平了。其脱口而出。

“你之前已经说过无数次了，而且每次你都会忘记点什么。不管了。绅士五分钟后要你上台。” 他用平淡的语气回应道，而这个消息只会让喜剧演员更加担心。

“五分钟？！不，不，不，这太过分了。我没有五分钟的时间！” 其绝望地试图增加准备时间。“绅士不愿再接受那样的借口了，他说他受够了。别再分心了，趁还来得及赶紧去准备好。哦，还有，这次请别和客人打架。” 说完，行李员关上门，离开了这个地方。

其没有时间可以浪费了。在一阵匆忙的慌乱中，喜剧演员竭尽所能地想要整理好自己的仪表，可所做的一切都只是让情况变得更糟。“去他的！”或许观众们看到乱糟糟的样子会笑得更厉害呢？最后，其匆匆离开房间，前往舞台准备下一场表演。这样的表演已经太多了，多到其都数不清了，而且每场总是以尴尬收场。是时候尝试些新花样了——观众们看到一个像是刚睡醒的人，肯定会捧腹大笑的。等笑话开始讲的时候，效果会更好。

其离开了房间，跑向舞台。“我不能再迟到了，老板会杀了我的！”其心里想着。可是有一个问题，虽然多年前其就来到了这家旅馆，而且从那以后一直在这儿工作，其还是不确定该往哪儿走。不过谁又能怪他们呢？后室被设计成一个令人迷惑的迷宫，而且就连绅士也没告知员工，也没张贴指示牌，还说这样做能让客人轻松离开。

全然凭借着记忆，喜剧演员开始向左跑，当遇到岔路时，又向左走去，而再一次出现岔路时，这次其选择了右边。大厅里有好几扇门。可是该选哪一扇呢？到这时，喜剧演员彻底忘了该往哪儿走。“我得跟老板说多少次啊？你就在大厅里装些该死的指示牌都行，现在我又要迟到了。你就这么对待你唯一的喜剧演员吗？”其自言自语着，显然很沮丧。

喜剧演员随机选了一扇门走了进去，恐慌涌上心头。“要是我迟到了怎么办？要是我错过了怎么办？老板会对我做什么吗？”门后是另一条长长的走廊，长得看不到尽头。“你一定是在开玩笑吧。”喜剧演员想都没想就沿着走廊跑了起来，跑的时间一定超过了五分钟。因其跑得太远，腿稍微开始疼了，而这对旅馆员工来说是罕见的一件怪事。

不过经一番激烈的冲刺后，救赎最终在尽头显现为一扇华丽的金色大门。“等等，我不记得以前穿过这样一扇门啊。”可是现在没时间想这些分心的事了，于是喜剧演员迅速打开这扇门并冲了进去，其现在比以往任何时候都更为迫切地想要做出一场精彩的表演。

令其感到极为宽慰的是，其发现自己正身处一家剧院，而每个座位上都坐着一位观众。喜剧演员一冲进来就说：“哦，见鬼，我又迟到了！我想我摔倒了……嘿，懂吗，摔倒了……”可奇怪的是，现场没有任何的反应。毫无头部动作，没有半句评论，也没有一丝笑声，鸦雀无声、毫无动静，什么都没有，这反常得匪夷所思。

紧接着，一种难以名状的感觉袭卷而来，喜剧演员觉得这个地方有些不对劲。这肯定不是自己过去登台的那个舞台，绝对不是。观众更加少了，而且舞台上毫无生气，建筑风格也不一样，总之这里看起来就是不对劲。更糟的是，喜剧演员注意到这次自己是从观众入口进来的，而非从红色天鹅绒幕布后面。“也许老板觉得改变我的入场点会很有趣？”

不管怎么说，喜剧演员还是有工作要做，于是其关上了门，走下楼梯，随后大步走上舞台，竭力掩饰自己的不安。其看着坐席上的观众，他们给人一种似曾相识的感觉，但又总觉得哪里不对劲。舞台上放着两把椅子（当然，这对喜剧演员来说毫无用处，坐着讲的笑话可不够好笑），还有一个装在支架里的麦克风。尽管内心充满不确定的感觉，但踏上这个华丽的舞台总能给喜剧演员带来一种使命感，足以让这些不安的情绪退居次位。与之相反，此刻其的脑海里正飞速构思着各种能逗乐观众的点子。其握紧麦克风，将它拿起，不再浪费时间，开始了表演。

这是一场表演。其很快就会希望自己从未开始过这场表演。

“咳咳，喂？！”

…

没有回应。

“我有好多有趣的笑话要讲给你们听。想听吗？”

…

没有回应。

“好吧，是这样，有这么一个人，嗯，其正在为一场演出做准备，嗯……？”

在这段充满压力的职业生涯中，破天荒头一遭，观众毫无反应。难道其终于变好了？难道所有的练习终于有了回报？

然后其看了看时间。接着其说：“哦不，我要迟到了！……你在听吗？”

就在那一刻，一声突如其来的尖锐的尖叫充斥了整个房间。喜剧演员的生存本能触发了，其环顾四周寻找声音的来源。其看到的是一个难以辨认的黑影，而这黑影正在后排凶狠地残害一名观众。其盯着这一幕，看了一会儿……随后便耸耸肩不予理会——旅馆向来如此。其唯一注意到的问题，便是少了那台留声机——每当演出期间，发生这种计划好的事件时，它按理来说总是会在场的。当然，旅馆也不是其经营的，因而喜剧演员始终不知道原因，但其从未对此提出过质疑。毕竟，这台乐器的存在无论如何都不会让人觉得厌烦。然而，它的缺席进一步加剧了喜剧演员的怀疑，不过这还不足以让喜剧演员停下来。

“不管怎样，其冲出了门，但门是锁着的，关得紧紧的，所以其——”喜剧演员努力忍住笑。“……一头撞了上去！”

…

还是没有任何反应。房间里只有喜剧演员那止不住的笑声，尽管那个笑话非常无趣。不过，随后的另一声尖叫打断了这笑声——正如喜剧演员所预料的那样，又有一个人在残害观众，而其对此再次置之不理。

“呃……你们就打算坐在那儿吗？行吧，行吧。不过我还有更多的东西要给你们。”

这些观众让喜剧演员觉得不太对劲，他们和之前那些场次的观众相比，明显格格不入。而且，为什么他们对他的笑话毫无反应？表演了这么多次，这倒是头一回。喜剧演员心里开始发毛了——这可不是因为笑话有多烂。

“所以——呃……对——有这么个人，他——”喜剧演员把目光从观众身上移开了一瞬，想理一理自己的思绪，等再转回来的时候，其心脏差点停了。

观众席上空无一人，仿佛方才的满座宾客都在倏忽之间烟消云散。

当然，旅馆向来有让客人体验“消失”的习惯，但绝不可能让所有人消失得如此之快。其不过移开视线一眨眼的工夫。至此，盘踞在其脑海深处的那些感觉再次占据了上风，一个突如其来的念头让喜剧演员脊背发凉：“这里不可能是旅馆。这完全是另一个地方。”

“你说得一点没错，喜剧演员。”一个声音从身后传来。

其猛地转过身去。站在那里的，正是那位不可一世的绅士。“老板，谢天谢地您——等等，这地方不是旅馆。对吧？！”

绅士发出一声玩味的轻笑。“你倒是聪明。通常我们的客人从来察觉不到。但你不是客人——这点我可以明确告诉你。”

这番话让喜剧演员一头雾水。自己的老板，在所有员工里，为什么偏偏要称其为“聪明人”？“什么……？您在说什么？”

“我的意思是，这里不欢迎你。这家剧院只对人类开放。”
奇怪。明明是绅士让他来表演的，现在却说喜剧演员不得入内？莫非是其走错了地方？

“等等，您是说——我上错台了？！”

“随你怎么说。我正准备为了自己的目的举办一场演出，结果被你那恼人的烂笑话打断了——”

“哎，得了吧，你的幽默感去哪——”

“别打断我！”绅士提高了音量。“看来你刚才没在听，这家剧院只有一条规矩：外来非人类，一律禁止入内！”

“这不是我认识的那个绅士。他从没发过这么大的火。”

“你——你到底是——”

“你想知道我是谁吗，入侵者？”绅士轻笑道，“我可不是那个丑陋不堪、满脸黏液、穿着燕尾服的野兽。你的猜测一点没错，入侵者。”

“那——那——那你到底……是谁？”恐惧悄然蔓延，喜剧演员结结巴巴地问道。

“一个易形者，窃取并模仿进入此地之人的思想。”

“我——我不信，你——你——你偷——”

“从你那清醒得很的脑子里偷走他的身份？有机会我当然要这么干了。行了，别再废话了，是时候把你彻底解决了。”

此刻，一股前所未有的巨大恐慌瞬间涌遍了喜剧演员的全身。绅士——或者说那个伪装成绅士的东西，打了个响指，随即一群再熟悉不过的恐怖旅馆员工凭空现身——或者说，是从喜剧演员记忆中提取出来的冒牌货。看门人站在最前面，管家徘徊在后，挥舞着一把结实的扫帚，厨师则守在最后，手里攥着一把沾满暗红血迹的大刀。

“劳烦送这位不速之客出门，如何？”

要么逃，要么打。喜剧演员转身拔腿就跑。可慌乱之中，其一脚踏空，从舞台上摔到了铺着红毯的地板上，手里的麦克风也飞了出去。冒牌看门人瞅准机会，攥紧拳头朝喜剧演员猛扑过来。快速思考后，喜剧演员翻滚躲开，爬起身。拳头狠狠砸在地板上，离其刚才脸贴着的位置只有几寸远。看门人那一排眼睛随即转了过来，正好对上喜剧演员仓皇逃窜时投去的目光。

其必须离开这里——据喜剧演员所知，唯一的出路便是来时的路。于是其径直冲向最近的楼梯，可冒牌管家早已在舞台上方守株待兔。喜剧演员加速冲过时，管家挥起扫帚柄朝其脸上扫来，想将其一棍打昏。好在其反应够快，千钧一发之际躲过了这一击。

其此刻正拼命冲上楼梯，心跳从未如此剧烈。“别让那入侵者跑了！”其听到冒牌绅士的喊声。与此同时，冒牌看门人和管家也杀气腾腾地冲上楼梯，紧追其后。很快，喜剧演员就冲到了出口处。“就差一点了。”就在这时，其看见了冒牌厨师正以精准无比的手法掷出那把大刀，并径直朝喜剧演员那毫无防备的头部飞来。其迅速地开门、闪入、关门，就在刀即将带着戏剧性的闷响击中前……但它没来。

其回头一看，发现自己已经回到了旅馆里——至少目前是安全了。一股巨大的如释重负感涌上心头，说是如释重负都不足以形容。其借着这个机会，喘匀刚才狂奔时紊乱的呼吸——冲刺消耗的体力远比走路要多得多。可没过多久，差点丧命的喜剧演员就开始绞尽脑汁地思索起来。“刚才那他妈到底是什么情况？”

其需要冷静下来，不然就要撑不住了。深呼吸……深呼吸……没事的，其安全了。那个冒牌绅士再也伤不到其了。但这并不全是好消息。“所以我一进那个地方，就把老板的信息全泄露给那个易形怪了？我都干了些什——”

“哦，原来你在这儿。”其听到一个令人安心的声音说道，思绪戛然而止。回头一看，是行李员正站在旁边的走廊里。“你去哪了？你都失踪一个小时了。老板可担心坏了。相信我，我最了解他，我从没见过他脸上露出那么担心的表情。”

喜剧演员没有回应，方才的创伤让其说不出一个字。

“你……需要什么吗，也许？”

喜剧演员这才结结巴巴地挤出话来。“没——没事——没什么……那个——演出……还继续吗？”

“恐怕你错过了。”

“啊，糟了！老板会杀了我的！”

也许最好谁也别知道这件事。毕竟，旅馆里那位尊贵的绅士，是不太可能会相信一个如此不靠谱的家伙讲出的如此荒谬的故事。

---

‡ 授权 / 引用

请按如下方式引用此页：

“错误的舞台”，作者 pnn wepm，来自后室英文维基。原文链接：http://backrooms-wiki.wikidot.com/the-wrong-stage。译者 jiaoyanerlan2，owl4513，来自后室中文维基。译文链接：https://backrooms-wiki-cn.wikidot.com/the-wrong-stage。遵循 CC BY-SA 3.0 协议。

---

名称： Old paper7.jpg
作者：未知
授权协议： CC0 1.0
来源链接： https://commons.wikimedia.org/wiki/File:Old_paper7.jpg

更多授权相关信息，请查阅授权指导。