版式：渊落沉光

+ 展开样式代码

/* BHL Style Search Top Box And User Account */
/* By Mercuresphere */
/* Based on BHL Theme */
 
:root, :root:lang(cn) {
    --merc-light-color: var(--swatch-menutxt-light-color);
    --merc-dark-color: var(--swatch-menubg-dark-color);
 
    --user-account-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/user-circle.svg");
    --search-top-box-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/search-top-box-mask.svg");
}
 
/* ===用户和搜索栏=== */
@media only screen and (max-width: 768px) {
    #login-status {
        right: unset;
        font-size: unset;
    }
 
    #navi-bar, #navi-bar-shadow, #search-top-box-input {
        display: unset;
    }
 
    #search-top-box-input {
        min-width: unset;
    }
 
    #search-top-box {
        top: unset;
        right: unset;
        height: unset;
    }
 
    #search-top-box:focus-within {
        box-shadow: unset;
        background: unset;
        padding: unset;
    }
 
    #search-top-box:not(:focus-within):before {
        -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: var(--search-top-box-mask);
        ; z-index: 14;
        background-color: rgb(var(--merc-light-color));
        color: rgb(var(--merc-dark-color));
        text-align: center;
        cursor: pointer;
        mask-image: var(--search-top-box-mask);
        ; mask-position: center center;
        mask-repeat: no-repeat;
        mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        width: calc(0.9375rem * 1.8);
        height: 100%;
        content: " ";
    }
 
    #search-top-box form[id=search-top-box-form] {
        visibility: unset;
        height: unset;
    }
 
    #search-top-box form[id=search-top-box-form]:focus-within {
        visibility: unset;
    }
 
    #search-top-box form[id=search-top-box-form] input {
        -webkit-appearance: unset;
        -moz-appearance: unset;
        position: unset;
        top: unset;
        transform: unset;
        appearance: unset;
        height: unset;
    }
 
    #search-top-box form[id=search-top-box-form] input[type=text] {
        visibility: unset;
        transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
    }
 
    #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
        position: unset;
        right: unset;
        transform: unset;
        cursor: unset;
        border-width: unset;
        width: unset;
        height: unset;
        color: unset;
    }
 
    #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
        background-color: unset;
    }
 
    #search-top-box form[id=search-top-box-form] input[type=submit] {
        background: none;
        transition: unset;
    }
 
    #search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
        opacity: unset;
        margin: unset;
        padding: unset;
        width: unset;
    }
 
    #header h1 a {
        z-index: unset;
    }
}
 
@media only screen and (max-width: 56.25rem) {
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgba(0, 0, 0, 0);
    }
}
 
@media (min-width: 36rem) {
    #login-status {
        flex-grow: unset;
        left: unset;
        right: unset;
    }
 
    #login-status:not(:hover):not(:focus-within) {
        visibility: hidden;
    }
 
    #login-status::before {
        visibility: visible;
    }
}
 
#search-top-box-input {
    min-width: unset;
    display: inline-block;
}
 
#search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    color: transparent;
}
 
#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    border: none;
    text-shadow: none;
}
 
#search-top-box-form input[type=submit], #search-top-box-input:focus, #search-top-box-input:hover {
    border: none;
}
 
#search-top-box {
    display: flex;
    z-index: 12;
    position: absolute;
    top: 1.5em;
    right: calc(3% - .25em);
    align-items: center;
    justify-content: center;
    width: auto;
    height: calc(0.9375rem * 1.8);
    transform: translateY(-50%);
    font-size: calc(0.9375rem * .86667);
}
 
#search-top-box, #search-top-box * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
    will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}
 
#search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within :after, #search-top-box:focus-within :before {
    margin: 0;
    padding: 0;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), max-width .3s cubic-bezier(.4, 0, .2, 1);
    will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}
 
#search-top-box:focus-within {
    background: rgba(var(--merc-dark-color), .7);
    box-shadow: calc(calc(0.9375rem * 1.8) / 2 * -1) 0 calc(calc(0.9375rem * 1.8) / 2) rgba(var(--merc-dark-color));
}
 
#search-top-box:after, #search-top-box:before {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(0.9375rem * 1.8);
    height: 100%;
    content: " ";
}
 
#search-top-box:before {
    -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: var(--search-top-box-mask);
    ; z-index: 14;
    background-color: rgb(var(--merc-light-color));
    color: rgb(var(--merc-dark-color));
    text-align: center;
    cursor: pointer;
    mask-image: var(--search-top-box-mask);
    ; mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
    pointer-events: none;
}
 
#search-top-box:not(:focus-within):hover:before {
    background-color: rgb(var(--merc-light-color));
}
 
#search-top-box:after {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    z-index: 13;
    clip-path: var(--clip-path);
    pointer-events: none;
    background-color: transparent;
}
 
#search-top-box:not(:focus-within):after {
    --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    background-color: rgb(var(--merc-light-color), 0);
}
 
#search-top-box form[id=search-top-box-form] {
    display: flex;
    visibility: visible;
    position: relative;
    right: 0;
    max-width: 100%;
    height: calc(0.9375rem * 1.8);
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) {
    max-width: calc(0.9375rem * 15);
}
 
#search-top-box form[id=search-top-box-form] input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
}
 
#search-top-box form[id=search-top-box-form] input[type=text] {
    z-index: 13;
    position: absolute;
    right: 0;
    width: calc(0.9375rem * 15);
    max-width: calc(0.9375rem * 15);
    height: 100%;
    padding: 0 calc(0.9375rem * 1.8) 0 1em;
    outline: 0 solid rgb(var(--merc-light-color));
    background-color: rgb(var(--merc-dark-color), .7);
    box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color));
    color: rgba(var(--merc-light-color));
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    max-width: calc(0.9375rem * 1.8);
    padding: 0;
    outline-width: 0;
    background-color: rgba(var(--merc-dark-color), 0);
    box-shadow: 0 0 0 0 rgb(var(--merc-light-color));
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
    background-color: rgba(var(--merc-dark-color), 1);
}
 
#search-top-box form[id=search-top-box-form] input[type=submit] {
    visibility: visible;
    z-index: 14;
    position: absolute;
    right: 0;
    width: calc(0.9375rem * 1.8);
    height: calc(0.9375rem * 1.8);
    outline: 0 solid rgb(var(--merc-light-color));
    background-color: transparent;
    box-shadow: 0 0 0 .125rem rgb(var(--merc-light-color));
    color: t;
    font-size: calc(0.9375rem * .86667);
    cursor: pointer;
    pointer-events: all;
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
    box-shadow: 0 0 0 0 rgb(var(--merc-light-color));
    pointer-events: none;
}
 
#login-status {
    --wght: var(--ui-wght);
    display: flex;
    z-index: 11;
    position: absolute;
    top: 1.5em;
    right: calc(3% + calc(0.9375rem * 1.8) - .25em);
    align-items: center;
    justify-content: center;
    height: 2em;
    margin: 0 0 0 .5em;
    transform: translateY(-50%);
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
    font-size: 1em;
    font-family: var(--UI-font);
    white-space: nowrap;
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}
 
#search-top-box:focus-within ~ #login-status {
    opacity: 0;
}
 
#login-status span.printuser a:first-of-type {
    width: 1.75em;
}
 
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in {
    margin: 0 1em;
    background-color: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--merc-dark-color));
    padding: 0.1em 1em;
    text-decoration: none;
}
 
#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:focus-within {
    background-color: rgba(var(--merc-light-color), 1);
    color: rgb(var(--merc-dark-color));
    text-decoration: none;
}
 
#login-status span.printuser {
    --wght: var(--ui-wght);
    margin-right: .5em;
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
}
 
#login-status a#my-account, #login-status a[href*="account/messages"] {
    color: rgb(var(--merc-light-color));
}
 
#login-status a#my-account {
    --wght: var(--ui-wght);
    -webkit-text-decoration: underline rgb(var(--merc-dark-color)) .125em;
    display: flex;
    align-items: center;
    padding: 0 .5em;
    background-color: initial;
    box-shadow: inset 0 0 0 0 rgb(var(--merc-dark-color));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--merc-dark-color)) .125em;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status a#my-account:active, #login-status a#my-account:hover {
    --wght: var(--ui-hvr-wght);
    -webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0;
    box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color));
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--merc-dark-color)) 0;
}
 
#login-status a#my-account:focus-within {
    --wght: var(--ui-hvr-wght);
    -webkit-text-decoration: underline rgb(var(--merc-dark-color)) 0;
    box-shadow: inset 0 -2em 0 0 rgb(var(--merc-dark-color));
    color: rgb(var(--merc-light-color));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--merc-dark-color)) 0;
}
 
#login-status #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    position: relative;
    width: var(--account-height);
    height: var(--account-height);
    margin: 0;
    padding: 0;
    background-color: rgb(var(--merc-light-color));
    color: transparent;
    clip-path: var(--clip-path);
    transition: -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
    transition: clip-path .1s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options {
    display: block !important;
    z-index: 12;
    position: absolute;
    top: 1.5rem;
    right: 0;
    width: 10em;
    margin: .25em 0 0;
    padding: 0;
    overflow: hidden;
    background-image: var(--gradient-header);
    background-color: rgb(var(--merc-dark-color));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options:focus-within, #login-status #account-topbutton:active + #account-options, #login-status #account-topbutton:focus + #account-options {
    opacity: 1;
    pointer-events: all;
}
 
@media (pointer: coarse) {
    #login-status #account-options:hover, #login-status #account-topbutton:hover + #account-options {
        opacity: 1;
        pointer-events: all;
    }
}
 
#login-status #account-options * {
    margin: 0;
    padding: 0;
}
 
#login-status #account-options ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 2em;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: .85em;
}
 
#login-status #account-options ul li {
    position: relative;
}
 
#login-status #account-options ul li, #login-status #account-options ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
 
#login-status #account-options a {
    --box-shadow: rgba(var(--merc-dark-color));
    --wght: var(--ui-wght);
    position: relative;
    flex-grow: 1;
    height: 100%;
    max-height: 2em;
    padding: 0 .25em;
    box-shadow: inset 0 0 0 .0625rem var(--merc-dark-color);
    font-weight: var(--wght);
    transition: color .15s cubic-bezier(.4, 0, .2, 1), font-weight .15s cubic-bezier(.4, 0, .2, 1), font-variation-settings .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options li > a, #login-status #account-options li > a:visited {
    color: rgb(var(--merc-light-color));
}
 
#login-status #account-options li > a:active, #login-status #account-options li > a:hover {
    --wght: var(--ui-hvr-wght);
    color: rgb(var(--merc-dark-color));
    font-weight: var(--wght);
    text-decoration: none;
}
 
#login-status #account-options li > a:focus-within {
    --wght: var(--ui-hvr-wght);
    color: rgb(var(--merc-dark-color));
    font-weight: var(--wght);
    text-decoration: none;
}
 
#login-status #account-options li > a[href*="/messages"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 0;
}
 
#login-status #account-options li > a[href*="/messages"]:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: "信息";
    font-size: calc(0.9375rem * .765);
    pointer-events: none;
}
 
#login-status #account-options li > a:before {
    --clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    z-index: -1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--merc-light-color));
    content: " ";
    clip-path: var(--clip-path);
    pointer-events: none;
    transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
    transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status #account-options li > a:active:before, #login-status #account-options li > a:hover:before {
    --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
 
#login-status #account-options li > a:focus-within:before {
    --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}
 
/* ===默认收起用户信息栏和搜索栏=== */
#search-top-box {
    top: 23px;
    right: calc(3%);
}
 
#login-status {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    top: 24px;
    right: calc(3% + calc(0.9375rem * 1.8) + .25em);
    color: transparent;
    pointer-events: none;
    transition: color .2s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
}
 
@media only screen and (min-width: 980px) {
    #search-top-box {
        right: calc(3% + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2);
    }
 
    #login-status {
        right: calc(3% + calc(0.9375rem * 1.8) + .25em + (-100vw + var(--header-width-on-desktop, 61.25rem)) / 2);
    }
}
 
#login-status:active, #login-status:hover {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    color: rgb(var(--merc-light-color));
    pointer-events: all;
    user-select: auto;
}
 
#login-status:focus-within {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    color: rgb(var(--merc-light-color));
    pointer-events: all;
    user-select: auto;
}
 
#login-status:active #account-options, #login-status:hover #account-options {
    pointer-events: all;
}
 
#login-status:focus-within #account-options {
    pointer-events: all;
}
 
#login-status > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 0;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), clip-path .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status:active > :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 1;
}
 
#login-status:focus-within > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 1;
}
 
#login-status #account-topbutton {
    margin-left: 0;
    background-color: initial;
    pointer-events: all;
    transition: clip-path .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status:hover #account-topbutton {
    background-color: rgb(var(--merc-light-color));
}
 
#login-status:before {
    -webkit-mask-image: var(--user-account-mask);
    -webkit-mask-size: calc(calc(0.9375rem * 1.8) - .5em);
    -webkit-mask-position: center right;
    -webkit-mask-repeat: no-repeat;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--merc-light-color), 1);
    content: "";
    cursor: pointer;
    mask-image: var(--user-account-mask);
    mask-position: center right;
    mask-repeat: no-repeat;
    mask-size: calc(calc(0.9375rem * 1.8) - .5em);
    pointer-events: all;
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
 
#login-status:hover:before {
    background-color: rgba(var(--search-icon-hover-color), 1);
}
 
#login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before {
    background-color: rgba(var(--search-icon-hover-bg-color), 0);
    cursor: auto;
    pointer-events: none;
}
 
#login-status:focus-within:after, #login-status:focus-within:before {
    background-color: rgba(var(--search-icon-hover-bg-color), 0);
    cursor: auto;
    pointer-events: none;
}
 
#login-status #account-topbutton {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgba(var(--merc-light-color), 0);
    clip-path: var(--clip-path);
}
 
#login-status:active #account-topbutton, #login-status:hover #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgb(var(--merc-light-color));
    clip-path: var(--clip-path);
}
 
#login-status:focus-within #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgb(var(--merc-light-color));
    clip-path: var(--clip-path);
}
 
#login-status #account-options {
    margin: 0;
}
 
#login-status a[href*="account/messages"] {
    color: rgb(var(--merc-light-color));
    pointer-events: all;
}
 
#account-topbutton {
    border: none;
}
 
#account-options {
    border: none;
}

现在版式可能无法加载，但可以引用来预览效果。

+ 版式代码

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&display=swap');
 
:root {
 
   --theme-base: "black-highlighter";
   --theme-id: "the-drown-light";
   --theme-name: "渊落沉光";
 
   --logo-image: url("https://backrooms-wiki.wikidot.com/local--files/component:theme/logo.svg");
   --header-title: "The Backrooms";
   --header-subtitle: "你曾经来过这里";
 
   --white: 243, 243, 243;
   --pale: 200, 200, 200;
   --light-grey: 168, 168, 168;
   --grey: 22, 22, 22;
   --black: 0, 0, 0;
   --green: 45,160,153;
   --dark-green: 9, 130, 127;
   --lime: 46, 231, 176;
   --cyan: 35, 219, 228;
   --blue: 19, 144, 144;
   --purple: 1, 36, 63;
 
   --white-monochrome: 1, 36, 63;
   --pale-gray-monochrome: 22, 22, 22;
   --light-gray-monochrome: 168, 168, 168;
   --dark-gray-monochrome: 45,160,153;
   --gray-monochrome: 200, 200, 200;
   --black-monochrome: 243, 243, 243;
   --bright-accent: 35, 219, 228;
   --medium-accent: 45,160,153;
   --dark-accent: 1, 36, 63;
   --pale-accent: 19, 144, 144;
   --alt-accent: 9, 130, 127;
 
   --gradient-header: linear-gradient(to top,
      rgb(var(--blue)) 0%,
     rgb(var(--cyan)) 90%
 );
 
   --swatch-headerh1-color: var(--white);
   --swatch-headerh2-color: var(--white);
   --swatch-topmenu-border-color: var(--blue);
   --swatch-topmenu-bg-color: var(--blue);
 
   --sidebar-links-text: var(--white);
 
   --rating-module-button-color: var(--white);
   --rating-module-text-color: var(--cyan);
 
   --background-gradient-color: var(--blue);
}
 
div#extrac-div-1 {
       content: "";
    position: fixed;
    top:var(--final-header-height-on-desktop);
    width:100%;
    height:calc(100% - var(--final-header-height-on-desktop));
    background-image: linear-gradient(to bottom,
      rgb(var(--blue)) 0%,
      rgb(17, 112, 124) 15%,
      rgb(12, 71, 86) 35%,
      rgb(10, 43, 70) 55%,
      rgb(var(--purple)) 90%
   );
    background-size: auto 100%;
    background-repeat: repeat;
    opacity: 1;
    z-index: -1;
}
 
* {
 font-family: 'Noto Serif SC' !important;
 font-weight: 300;
}
 
strong {
 font-weight: 900;
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#skrollr-body {
    background-image: none;
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   color: rgb(var(--cyan));
   border-bottom: solid 0.1rem rgb(var(--cyan));
   border-top: solid 0.1rem rgb(var(--purple));
   border-left: solid 0.1rem rgb(var(--purple));
   border-right: solid 0.1rem rgb(var(--purple));
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: solid 0.1rem rgb(var(--cyan));
   color: rgb(var(--cyan));
   background-color: rgb(var(--purple));
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16.4rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   top: 1rem;
   width: 100%;
   display: flex;
   justify-content: center;
   border-right: soild 0.5rem rgba(0,0,0,0);
   z-index: 0;
}
 
#header h2, #header h2 span, #header h2 span::before {
   top: 2rem;
   width: 100%;
   display: flex;
    border-right: soild 0.5rem rgba(0,0,0,0);
   justify-content: center;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow:  .086rem 0.1rem 0.1rem #0c0c0c;
}
 
#footer{
   color: rgb(var(--pale));
}
 
/*----------------链接-----------------*/
a{
   color: rgb(var(--lime));
}
a:hover{
   color: rgb(var(--lime));
}
a:visited{
   color: rgb(var(--cyan));
}
a.newpage {
   text-decoration: none;
   color: rgb(var(--pale));
}
a.newpage:hover {
    color: rgb(var(--lime));
}
 
/*----------------搜索栏样式-----------------*/
 
/*----------------背景板-----------------*/
 
body {
    background-color: rgb(var(--blue));
    color: rgba(var(--white));
    max-width:100%!important;
}
 
/*----------------平分线-----------------*/
 
hr {
   background-color: rgba(var(--cyan), .9);
   border-top: solid 2px rgba(var(--cyan), .5);
}
 
/*----------------账号信息样式-----------------*/
 
#login-status > span.printuser{
    color: rgb(var(--white));
}
 
#login-status a {
    color: rgba(var(--white), .9);
}
 
#login-status ul a {
    color: rgb(var(--light-gray));
}
 
#account-topbutton {
    color: rgb(var(--white));
}
 
#container {
background-image: none;
}
 
/*----------------表格样式-----------------*/
 
table.wiki-content-table th {
   background-color: rgba(var(--pale), .3);
   color: rgb(var(--white));
   border-color: rgba(var(--cyan), .6);
}
table.wiki-content-table td {
   background-color: rgba(var(--pale), .2);
   color: rgb(var(--white));
   border-color: rgba(var(--white), .2);
}
 
/*----------------tab块-----------------*/
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a{
     background-color: rgba(var(--pale), .2);
    color:rgb(var(--white));
}
 
/*tab（悬浮时）*/
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
     background-color: rgba(var(--blue), .2);
     color: rgba(var(--cyan), 1);
}
 
/*tab（选择时）*/
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
     background-color: rgba(var(--cyan), 1);
     color: rgba(var(--dark-green), 1);
}
 
/*主div块*/
 
.yui-navset > div.yui-content{
    background-color: rgba(var(--pale), .2);
     border-color: rgba(var(--pale), .05);
}
 
/*----------------编辑按钮-----------------*/
 
.buttons.alignleft > input{
    color: rgb(var(--cyan));
    background-color: rgba(var(--pale), .2);
   border: 0.1rem solid rgba(var(--pale), .05);
}
.buttons.alignleft > input :hover{
   color: rgb(var(--dark-green));
   background-color: rgba(var(--pale), .2);
   border: 0.1rem solid rgba(var(--pale), .05);
}
/*----------------评分模块-----------------*/
.page-rate-widget-box{
    background: rgba(var(--pale), .2);
}
.page-rate-widget-box > span.rate-points > #text,
.page-rate-widget-box > span.rate-points > span.number.prw54353
{
    color: rgb(var(--cyan));
}
 
.page-rate-widget-box > span.rate-up > a:hover{
    color: var(--black);
    background-color: var(--lime)
}
.page-rate-widget-box > span.rate-down > a:hover{
    color: var(--black);
    background-color: var(--cyan)
}
.page-rate-widget-box > span.cancel > a:hover{
    color: var(--black);
    background-color: var(--green)
}
/*----------------顶栏与下拉-----------------*/
 
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a {
   color: rgba(var(--white),0.9);
    background-color: rgb(var(--blue));
}
 
#top-bar div.top-bar > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > a:hover
#top-bar div.top-bar > ul > li > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li > a:hover {
    color: rgba(var(--white),0.9);
    background-color: rgb(var(--blue));
 
}
 
/*
--------------------div------------------
*/
 
blockquote,
div.blockquote {
   background-color: rgba(var(--pale), .2);
   border-top: 0.1rem solid rgba(var(--cyan), .4);
   border-bottom: 0.1rem solid rgba(var(--cyan), .4);
    border-right: 0.1rem solid rgba(var(--pale), .05);
    border-left: 0.1rem solid rgba(var(--pale), .05);
}
 
.footnotes-footer {
   background-color: rgba(var(--pale), .2);
    border-top: 0.1rem solid rgba(var(--pale), .05);
    border-bottom: 0.1rem solid rgba(var(--pale), .05);
   border-right: 0.1rem solid rgba(var(--pale), .05);
    border-left: 0.2rem solid rgba(var(--cyan), .4);
   padding: 1rem 1rem !important;
   margin: 1rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(var(--grey),.15);
}
 
.styled-quote {
   background-color: rgba(var(--pale), .2);
    border-top: 0.1rem solid rgba(var(--pale), .05);
    border-bottom: 0.1rem solid rgba(var(--pale), .05);
   border-right: 0.1rem solid rgba(var(--pale), .05);
    border-left: 0.2rem solid rgba(var(--cyan), .4);
   padding: 0.1rem 1rem !important;
   margin: 1rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(var(--grey),.15);
}
 
.shadeblock {
   background-color:rgb(0,0,0,0);
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   border: 0.1rem solid rgba(var(--pale), .05);
   box-shadow: 0 0.2rem 0.3rem rgba(var(--grey),.15);
   color: rgb(var(--white));
}
 
.titleblock {
        background-color: rgba(var(--pale), .2);
        border: 0.1rem solid rgba(var(--pale), .05);
        color: rgb(var(--white));
        padding: 0.01rem 1rem;
        margin: 2.3rem 0 0.5rem 0.25rem;
        box-shadow: 0 0.2rem 0.3rem rgba(var(--grey),.15);
     }
     .titlebox{
       color: rgb(var(--white));
       position: relative;
       top: -2rem;
       background-color: rgba(var(--cyan), .4);
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
.code{
    background-color: rgba(var(--white), .85);
    border: 0.1rem solid rgba(var(--cyan));
}
.code > pre > code{
   color: rgb(var(--black));
}
 
/*----------------toc样式与页面信息板块的合并修改-----------------*/
#page-version-info{
    background: rgba(var(--pale), .2);
    border: 0.1rem solid rgba(var(--cyan));
}
#toc{
    background: rgba(var(--pale), .2);
    border: 0.1rem solid rgba(var(--cyan));
}
/*----------------标签/历史版本/父页面设定区域修改-----------------*/
.diff-box > div.inline-diff.page-source > del{
  background-color: rgba(var(--blue));
}
.diff-box > div.inline-diff.page-source > ins{
  background-color: rgba(var(--lime));
  color: rgba(var(--black));
}
div.buttons.form-actions > input,
form > .buttons > input,
form#history-form-1 > .buttons > input{
   color: rgb(var(--cyan));
    background-color: rgba(var(--pale), .2);
   border: 0.1rem solid rgba(var(--pale), .05);
}
div.buttons.form-actions > input:hover,
form > .buttons > input:hover,
form#history-form-1 > .buttons > input:hover{
   color: rgb(var(--lime));
   background-color: rgba(var(--pale), .2);
   border: 0.1rem solid rgba(var(--pale), .05);
}/*---------勿动，要改与上编辑按钮部分一起----------*/
/*----------------其他修补-----------------*/
#license-area.license-area{
    color: rgb(var(--pale));
}
 
table.edit-page-bottomtable > tbody > tr > td > div.sub{
   color: rgb(var(--pale));
}
 
#login-status > div#account-options > ul{
    background-color: rgba(var(--grey), .3);
}
#login-status > div#account-options > ul > li > a{
    color: rgba(var(--white));
}
#login-status > div#account-options > ul > li > a:hover{
    color: rgba(var(--cyan));
}
#login-status > a#my-account{
    color: rgba(var(--white));
}
#login-status > a#my-account:hover{
    color: rgba(var(--white));
}
.edit-section-button{
    background: rgba(var(--pale), .2);
}

天光--cyan(35,219,228)

水界--blue(19, 144, 144)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

深流--purple(1, 36, 63)

隐青--green(45,160,153)

寒绿--dark-green(9, 30, 127)

游灯--lime(46, 231, 176)

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

编辑者为zhangbowen55。

组件作者：

• Mercuresphere的隐藏搜索栏与用户信息组件；
• Cambrian White的改色生存难度组件。

协助者：

Liurd

为这个版式的修改做了很大贡献......

hoah2333最终审查了版式。
Enflowerz的“荒服”生存难度logo。

[[include :backrooms-wiki-cn:theme:drown-light]]

都一样的。

对于wikidot最近的附件区被墙，引用该版式页可以规避附件区。

[[include :backroomssandboxcn:theme:drown-light]]

版式示例

在海洋深度图上出现的等高线。

---

融光散影天为水，陆远池凉游者死。

标题示例

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题

分页1

这些地方并不像现实一般界限分明——它们都是某人精神的宏观体现，是他们情绪的倒影；它们扭曲着、拙劣地模仿着现实，但其实不过是某个人意识中对现实概念的延伸，不过是在日复一日平凡生活中绝不会被提及的妄想。深入妄想，正如同游历梦境。我还不知道这里的探索是否永无止境，但我相信这些地方都是经历过它们之人脑中自成的臆念，正是他们的情感维持着这些空间的存在——情绪、思维，便是这方世界滋生、稳固的力量源泉。除了我们的想象，再也没有什么地方能出现这样的建筑；这正是为何穿梭其间时，我们总能感受到无边的孤独。它们是创造者抛诸脑后的遐想，无比熟悉，但又无比陌生。

——level-37

分页2

远远的天际线上，有一朵白色的积雨云。云金色的边上与没有着色的里面分隔开地生硬，但是这显然是水造成的。整块云就像堆在地平线的上方，似乎那孩子越过一片草原，就能进去到那里面，看看白色无边的水雾与冰晶。

远远的天际线上，有一朵白色的积雨云。

远远的天际线上堆着一朵白色的积雨云。

徐锵衡向着那片云跑去。跑到远远的灭点里去。跑到无尽的宇宙里去。跑到流云虚掩的不可见里去。跑到无所观察的叠加态里去。跑到……

虚无里去。

长分页

最重要的事情无法诉诸言语......

空分页

空分页

空分页

空分页

空分页

研究表明，Level 370的水体中存在泻盐（硫酸镁）的痕迹。当人体长期暴露于这种化合物时，会感到自然的放松感，包括肌肉的舒张与身体疼痛的减缓。除此以外，水体内还发现了数种未知的化合物。直到本档案撰写之时，研究者们依旧未能查明这些物质的来源与特性，但鉴于它们与上述的泻盐一同出现，可以推测这些物质皆可通过某种异常方法增强水体的放松效果。

---

你逐渐感到平静。

化学式	pKa（K1）	pKa（K2）
H2SO4	-3	1.99
HCN	9.21

（in 25℃）

---

无物¹
某个名字
或许最后
最重要的东西
或是已经失去意义的东西
都将全部渐渐溶解
^{然后上浮；}
不存在
或是存在
_{都将全部沉底。}

---

[[div class="styled-quote"]]

[[/div]]

---

标题文本
[[div class="titleblock"]]
[[span class="titlebox"]]标题文本[[/span]]

[[/div]]

---

[[div class="shadeblock"]]

[[/div]]

---

再次感谢Cambrian White的改色生存难度模块，可以直接应用此组件搭建生存难度。

生存难度预设

引用的页面 “fragment:alt-custom-class-code” 尚不存在（立即创建）

+ 这是什么？

>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=other
|display=等级 //荒服//
|color=139090
|border=01243F
|list-color=C8C8C8
|image=https://scp-wiki.wdfiles.com/local--files/theme%3Amagazine/LOGO_huang-fu_White.svg
|one=迷失
|two=散去
|three=孤寂
]]

可以使用的自制浅色sd图标：

0难度
https://i.postimg.cc/tgZgVswD/image.png
1难度
https://i.postimg.cc/K8Yjxq56/image-2.png
2难度
https://i.postimg.cc/mg6DDYXt/image-3.png
3难度
https://i.postimg.cc/0NTyG8qv/image-4.png
4难度
https://i.postimg.cc/VNqXbZ3K/image.png
5难度
https://i.postimg.cc/tgQhJGm1/five.png
未分级
https://i.postimg.cc/RFvK1Qm4/unknown.png

---

脚注

1. 无物之物