2024 群岛活动 中心页

+ 展开样式代码

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

2024 群岛活动

曾几何时，从前厅坠落至后室的经历还历历在目，而近来，越来越多的寻人告示正在悄悄地挤满社区的每一个角落……每一个神秘失踪的人，他们的身影似乎都在那神秘的蓝色通道海洋中若隐若现，直到我们收到源自海洋深处的求救讯号，讯号中在不停歇地重复着：“群岛……群岛……群岛……”

为了揭开神秘失踪事件的面纱，由勇敢者们组成的探险队主动向着蓝色通道之海中进发，而在深邃之中等待着他们的是……

活动详情

活动主题

本次活动的主题为：群岛Archipelago，我们向各位征求关于蓝色通道诸岛的信息。根据寥寥无几的现存情报，我们大致可以确定以下几条线索：

• 自 2010 年前后开始，C 层群各地宜居聚落不断出现失踪案例；
• 通用公共数据库上偶尔会出现有关“岛屿”与“蓝色通道”的求援讯息，从这些支离破碎的情报中，我们拼凑出了一一幅“群岛”的地图：
  • 这些岛屿浮动在蓝色通道的缝隙之间；
  • 岛屿周围弥漫着浓密的雾气；
  • 无法从岛屿切出。

……然而，显而易见，我们所知的仅仅是那片虚空海域的冰山一角。根据我们对后室网络的了解，蓝色通道中或许存在一个封闭的局域网，不知落在群岛中的人们是否又建立了新的数据库？

---

投稿作品

岛屿稿件	投稿者
塔楼街观光指南	Ellov
流奶与蜜之地	Yoghurt_Jinchouge
浸水龙城	rukatyan
池流	fljlus
砼隅	Floxk
荷花渡	Starset_M
元晖卷	Deip*isoster
黑白珊瑚岛	baiyuleyu
覆雪	slothwellHelp
碎空岛	Saintafox
银盛金衰	LemonCat233
云屿堡	WhiteBlade VIKC
方壶岛	JinFif
龙伯国	RULER shengzhu
星海寰屿	Etinjat
冰之宫	Starset_M
雨都	BR_Bot
白芸岛	baiyuleyu
红枫	only a tree
天姥	shoggths
风鸢岛	Lcefrost
埋云岛	Slime4399
通天木	NPCenter
虚境岛	jan Kija
岱舆	BR_Bot
游岩	BR_Bot
旧日之都	Clay Hygik

故事稿件	投稿者
不是，这哪儿啊？	Null0
云朵并不是棉花糖状的蓬松羊毛	SwitzerCandy
安眠药与蓝色夜晚	shoggths
群岛指南	Null0
广播 11：关于群岛信号及第二版岛屿分级组件	Ambersight
海葬	Eltrac
灯塔、旅人与繁星	Starset_M
在水中流淌，直到流出这个世界	fljlus
一次航行	only a tree

---

投稿方式

岛屿投稿

• 创作一座漂浮于蓝色通道之上、迷雾重重的岛屿，填充这片神秘的海域！
• 没有题材、团体、人物上的限制，但应当符合本页开头叙述的背景。
• 不应存在出口。
• 没有固定格式，但可以参考层级的模板！

发表流程：

1. 发表的 URL 格式：/island-c-xxx，其中 xxx 是你的岛屿名，类似于隐秘层级的命名方式。
2. 为你的投稿打上【 原创 层级 群岛设定 2024群岛活动 】这四个标签。
3. 在讨论区声明你所挑战的成就。
4. 大功告成！

---

故事投稿

• 创作一篇蓝色通道海上的故事。
• 没有题材、团体、人物上的限制，但应当符合本页开头叙述的背景。
• 你可以在故事中串联已有的岛屿投稿，但应避免提及其他层级与实体。
• 不应存在离开群岛、返回其他层级的情节。
• 没有固定格式！

发表流程：

1. 为你的投稿打上【 原创 故事 群岛设定 2024群岛活动 】这四个标签。
2. 在讨论区声明你所挑战的成就。
3. 大功告成！

---

活动规则

• 原则零：本活动旨在鼓励作者的创作热情，虽然“枢纽岛”的评选与评分挂钩，但不会被标记为“竞赛优胜作品”，也不会受到活动奖项之外的特殊对待。重在参与，图一乐就行！
• 允许成员赞助，赞助者与活动参与者请务必阅览以下须知内容：
  • 成员赞助形式为【成就达成 - 青睐之选】，即当你选择以某种形式赞助活动时，必须同时设置一个获得条件。
    • 不接受以作品排名 / 分数为成就内容的赞助。不接受高度定制文章内容为成就的赞助，不接受以其他成就作为条件为成就的赞助。每人能且最多只能贡献 3 个成就名。若有多者，以前三个成就为有效贡献。
    • 你的获得条件必须与作品内容相关。
    • 如果你不知道该如何设置你的成就条件，可以参考我们上一次活动的词条归档池。
  • 出于方便考虑，你赞助的成就之获得条件将统一为赞助者的【青睐之选】，即由赞助者在声明挑战该成就的作品中挑选心仪的作品送出赞助内容。
  • 网站工作人员不负责追踪与处理成员赞助的发放。
• 本活动不禁止推文，参赛期间的文章遵循 CC BY-SA 3.0 协议。
• 禁止恶意竞争行为，此行为将由工作人员认定并予以处置。
• 每名用户至多可投稿 2 篇岛屿文档，故事投稿不限量。
• 投稿作品可以是旧作，但其必须从未在后室中文维基发表过。
• 本次活动的负责人是负责写开头简介的 rukatyan、负责打杂的 Ambersight 与负责被打的 cakelord114514。

---

活动时间

此中心页发布起（2024 年 2 月 5 日）

接受岛屿投稿、故事投稿与设置成就。

2024 年 2 月 27 日 23:59

停止接受岛屿投稿、停止设置成就。

2024 年 3 月 1 日 23:59

停止故事投稿，主办方选出【枢纽岛】。

---

“枢纽岛”

自从在这里成功建立数据库后，我们从未停止过对出口的排查与检索。近期，我们发现了诸多岛屿中唯一的特例；可信情报表明，这座岛屿处于已知岛群的边缘地带；更特殊的是，从这座岛屿的海岸线向边境迷雾远眺时……隐隐能看到灯火闪烁。

作为活动的主办方，我们诚挚邀请各位创作一座特别的岛屿：这座岛带有中华特色¹。此处的中华是一个广义形容，包括但不限于文化²、地形、历史等多个维度。只要体现了其中一个特色，即视为达成评选“枢纽岛”的条件。你可以将此视为主办方设立的一则【青睐之选】成就。

本次活动的岛屿投稿期结束后，主办方与神秘评委团将会根据以下标准评选出本次活动的【枢纽岛】：

• 评分。
• 翻译难度。越是文法偏向文言文、难以翻译为对等英文的岛屿，越难以评为枢纽岛。
• 中华主题的呈现。
• 对已有设定的依赖程度。越是依赖站内其他文章的岛屿，越难以评为枢纽岛。

枢纽岛将成为 C 层群在群岛设定的主岛，而其他投稿将被归入“远海诸岛”列表。有关群岛设定的更多信息，届时请关注设定中心页。

枢纽岛	投稿者
浸水龙城调查报告	rukatyan

---

赞助成就池

成就列表

注意：每名用户至多可添加三条成就。不接受以作品排名 / 分数为成就内容的赞助；不接受高度定制文章内容为成就的赞助；不接受以其他成就作为条件为成就的赞助。如有需要，你可以声明自己赞助的投稿类型（岛屿 / 故事）

Ambersight	故事的起点	岛屿投稿，投稿中包含人们发现、探索岛屿的过程	Steam 国区《生化危机 2》标准版 CDKey 一份
rukatyan	勇气的赞歌	故事投稿，关于勇敢探索者的故事	Steam 国区《吃香》或《猛鬼大厦》标准版 一份
Lupus Caeruleus	一鳞半爪	岛屿投稿。文章中出现“龙”这一概念，并对 Object C-1（“罐装龙肉”）的来源提出假说	插电式光纤夜灯一盏
Lupus Caeruleus	乘风破浪	故事投稿。讲述一群志在蓝色通道中远航，探索新的岛屿，乃至寻求出口的流浪者的故事	棱长约 3cm 的金字塔形黑曜石摆件一个
vallerback	我最亲爱的你	任意投稿。文章中带有男女间表达爱意的情节	一大个巧克力抱枕
vallerback	射出时间之弓	任意投稿。文章中的时间跨度达到了未来，即2024年之后	Steam 国区《缺氧》一份
vallerback	新年新气象	任意投稿。投稿包含作者（之一）为本次群岛活动专门设计的版式（不包括此中心页使用的板式）	Steam 国区《史丹利的预言》一份
NPCenter	你不许折磨DeepL	岛屿投稿。完全用标准格式白话文写成，不使用任何成语、典故、网络梗，且不引用任何名人名言或已有作品内容，此处包括站内与站外作品。	doge亚克力钥匙扣一个
NPCenter	在湛蓝虚空号上	内容与隐秘层级憎恶枢纽中任意登场角色、涉及层级、相关势力或出现物品有关联	复古钥匙串一个
Starset_M	花之都	文章以任意一种或多种花为主题 / 主要或重要意象	0.01元人民币
x1193	新年第一杯	故事投稿。文章有“咖啡”的意象	挂耳咖啡一份
Ni Feng_EX	浅海边缘	岛屿投稿。文章中的“岛屿”符合或者贴近现实岛屿概念，且以“迷雾”元素为重点	0.02元人民币
Ni Feng_EX	鲁宾逊漂流记	文章类型不限，须符合“无人后室”设定。	5元人民币
Absurdism in Yellow	你说得对，但是山魔王仪式是 ……	故事投稿，尝试通过山魔王仪式逃离该群岛层级，上限1人	4.44元(仅线上支付)
Absurdism in Yellow	后室轻武器大师	文中涉及到了某种本站内特有的轻武器作为重要元素，上限1人	4.44元(仅线上支付)或者邮寄一本《轻武器100年》
Maenliesi	小样，你穿个马甲，我就不认识你啦	投稿一篇相关故事，描绘一个智慧生物改变其外形或身份。	马甲一件（仅一件）
Ellov	你好，长崎	文章类型不限，文章中需包含关于外来探险者尝试离开已有流浪者居住的岛屿的内容。	金劲旭著作《您可疑的近况》一本，可折现为49元人民币。
Ellov	深潜	文章类型不限，文章中需包含以下元素中的任意三种：水下、电台、梦想、黑暗、大型机械、人工智能3。	陈春成著作《夜晚的潜水艇》一本或Steam游戏《SIGNAILS》标准版一部（CDKey形式或国区礼物形式），均可折现为50元人民币。
highlightingman	心理测量者	故事类型，内容需直接提及Phenomenon C-1，且将其作为故事的核心要素	《小径分岔的花园》，博尔赫斯著
Slime4399	姆色森林	在岛屿中，存在大量史莱姆或类似实体。	12元人民币 或 Steam国区《史莱姆牧场》一份
Slime4399	路旁的理想国	岛屿内物资严重缺乏，且依旧存在大量人类以特殊方式生活其中。	4.33元人民币
wings_nameless	天空是一个巨大的荷包蛋	岛屿投稿中，以天空4为主要元素（之一），且使用了可食用物体进行了相关的比喻描述5	6.66元人民币（微信或支付宝）
wings_nameless	命运是如此的瑰丽	投稿类型不限，文章首尾使用完全相同的描述，体现出不同的内涵、场景或人文关怀	8元人民币（微信或支付宝）
wings_nameless	万象更新	岛屿投稿，且文章符合一元复始竞赛投稿要求中的禁止事项6	20.24元人民币（微信或支付宝）
U-Coocoo	后室总动员	岛屿投稿。文章应涉及至少9个拥有中心页的团体，其中5个团体的相关内容应占据文章相当篇幅。	50元人民币（仅受青睐者一人）/5元人民币（其他达成成就者） （仅支持微信支付）
chuying123	遥不可及抑或近在眼前	任意投稿，文章以「童年」与「未来」两个关键词（之一）作为主要元素（之一）。	6.68元人民币（微信支付，上限两人）
Lambda Core	幻你命8000	任意投稿，文章中包含一种或多种东西方民间传说/神话中的幻想Fantasy意象（如东方龙，昆仑仙山，亚瑟王宝剑，巨蟒耶梦加德，天狗等）。	120HKD以内的Steam游戏任选（仅可选择一个），通过礼物形式发送。也可折现为15.34USDT加密货币。
cloudaswater	真实与半真之间	任意投稿，文章详细介绍了人们如何在迷雾中行进到其他岛屿。	《苍之彼方的四重奏》（Aokana: Four Rhythm Across the Blue）标准版steam国区CDKEY一份（不可折现）
only a tree	先发优势	不限投稿类型，成为第一篇投稿文章且于活动结束后存活即可7	3元人民币(青睐之选，微信支付)
only a tree	未卜先知	故事投稿，其中故事主体内容发生的岛屿被评为“枢纽岛”	5元人民币(青睐之选，微信支付)
only a tree	首份地图，绘制完成	存活下来的最后一篇岛屿投稿	2元人民币(青睐之选，微信支付)
Xx_ssc_xX	曾引潮汐	不限投稿类型，要求文章中至少有一处引用与“月”这一意象有关的文章内容。	人民币5元 微信支付
Pedder	元神启动	不限投稿类型，要求文章涉及以下游戏之一：《原神》《崩坏 3》《星穹铁道》《明日方舟》《碧蓝航线》《重返未来 1999》《阴阳师》《第五人格》《元梦之星》《蛋仔派对》，并至少在活动截止时达到合格线（参考中文维基作者页的要求）。“涉及”的标准为具体提及或基于其进行 crossover；具体解释权归本人所有。	人民币 5 元微信或 QQ 支付，对所有符合条件者
Pedder	渊深启动	限岛屿，要求文章内包含一段爱情悲剧（插入方式不限），涉及至少 3 名感情参与者。	《情人》，[法]杜拉斯，王道乾译，上海译文出版社。限内地地址，偏远地区需补邮费；可微信或 QQ 支付折现 15 元；限青睐之选
Capybara13	旧神的注视	限岛屿，要求文章拥有克系题材或风格。	人民币 20 元线上支付，限青睐之选；其余符合条件者可获得人民币5元。
0cs	0cs最喜欢的一集	文章中出现实体Talitha Cumi或社区成员Tailitha Cumi	人民币1元微信支付，限青睐之选
0cs	？？？	出现“我们正热烈地活着”设定，但适用对象为后室原生人类与群岛	人民币0.1元微信支付，对所有符合条件者
Kunieda Lynne	卡拉格高级档案员	文章的中心内容必须与卡拉格灵协会有关，且至少出现三名卡拉格灵协会成员（仅限中心页中提到的成员）	66.66元人民币（仅限Kunieda Lynne最喜爱的一篇，微信支付）
LemonCat233	三维世界	岛屿文章，但岛屿必须以空岛形式漂浮在海面上，且存在对外的吊桥	0.32元人民币（最多两篇LemonCat233最喜欢的文章）
LemonCat233	四维世界	岛屿文章，但其空间系比三维多一条轴	4.00元人民币（仅限一篇LemonCat233最喜欢的文章）
LemonCat233	品牌新世界Brand New World	岛屿，但它刚刚诞生！	5元人民币（仅限一篇LemonCat233最喜欢的文章）
HinaKagiyama	谁言天地宽	岛屿拥有住民，且其为某一后室原生文明的实体，因特殊原因流落岛屿	5元人民币
HOMESICK	鸟的一赞	格式不限，文中开创至少一个成为“群岛”设定正式发布后被该设定后续创作广泛采用的专属的、重要的、拥有特色的概念（团体、POI、现象、物品等皆可；需明确声明此概念是什么） 。标准：该设定后续存在共计来自三名不同作者创作的六篇与之相关的层级/实体/物品/故事（每篇评分应大于等于10）页面。若有幸出现多篇具此潜力的文章，仅取率先满足标准的文章获此成就。	200RMB
HOMESICK	鸟的二赞	仅限岛屿格式。文中须出现与“树海论”相关的论述（驳斥为佳）并成为赞助者的青睐之选。	66RMB
HOMESICK	鸟的三赞	格式不限，文章须与“晨曦”这一意象相关并成为赞助者的青睐之选；可自由决定弱相关或强相关（需声明）。	9.7RMB（弱相关）/97RMB（强相关）
Jingan Xu	最初的美好	仅限岛屿格式，该岛屿生存难度必须为宜居，可通过迭代变成其他生存难度。（前者是要求，后者是可选项）	4RMB（仅前者）/10RMB（添加可选项）
di_ge	Spider-Man ！	文章中至少必须涉及一位已存在的与蜘蛛有关的文章	首位获得5RMB ，之后每人0.01RMB
Saintafox	神秘岛	仅限岛屿，岛屿自身存在很可能使其完全毁灭的因素。	水泥消波块摆件一只（可折现为38元人民币。仅给予满足条件的一位参赛者，按分数，好评率，发布时间顺延，本人赞助的其他成就同）。
Saintafox	机器岛	不限格式，岛屿居民通过某种方式沉溺于几乎无所不得的快乐。	银河系混沌摆摆件一只。（可折现为32元人民币）
Saintafox	禁闭岛	不限格式，文章以一座神秘的灯塔为线索。	《精神分析引论》一本。（可折现为17元人民币）
Liurd	适合中国宝宝体质	撰写一篇具有“现代中国元素”的文章，格式不限 。	一罐价值30元以内的随机飞鹤奶粉（可折现，微信支付）
fljlus	自是的中流淌	岛屿投稿，文中环境存在流动的水流或其他流动液体形成的河流	10元(微信支付)
fangzexiaoo	你怎么才写了这么点？	写一篇字数不到150的文章，不能是故事稿件	230元(微信支付)
fangzexiaoo	福克兰群岛	写一篇以福克兰群岛为原型的岛屿稿件	230元(微信支付)

后室中文 2024
Logo by Kcorena
Theme by Ambersight

Footnotes

1. 不必带有中华标签。

2. 不仅仅局限于中华传统文化。举例而言，“中式阈限”也符合这一条件。

3. 需注明为哪三种元素

4. 可以为幻视或其他形式，具体不需要为真实天空，毕竟蓝色通道

5. 除NPCenter本人外禁用“棉花糖——云彩”的相关比喻

6. 与该活动冲突的相关限制与禁止事项，以该活动为准（如url限制、组件限制等）

7. 删除重投稿以重投时间计算