版式：后室厨师联盟

+ 展开样式代码

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

此主题版式由 Liurd 创作。

如果想要在你的页面上使用这个主题，请将如下文本放置其中：

[[include :backrooms-wiki-cn:theme:backrooms-chef-allience]]

版式示例

B.C.A.的图标(他版)，由Liurd绘制

你可以使用五个连字符"-----" 创建水平线，如果你没把这玩意放置在任何内容（比如引用块什么的）里面，那它就能扩展到整个页面——超酷的！

---

你可以在行首加上那么1-6个"+"字符来创建个标题。

标题示例

1号标题 - 哦，自带一根线

2号标题

3号标题

4号标题

5号标题

6号标题 - 比正文都小啊这

-----------------------这是一个菜单——为什么这么长长长长长长啊——-----------------------

价位：客官您看着给

凉菜

尖椒变蛋

蒜泥白肉

拍黄瓜

擀面皮

等待补充

面食

油泼面（拉条子/扯面/菠菜面）

炸酱面

臊子干拌面（拉条子/扯面/菠菜面）

三合一（拉条子/扯面/菠菜面）

二合一（拉条子/扯面/菠菜面）

四合一（拉条子/扯面/菠菜面）

岐山臊子面

等待补充

热菜

番茄牛肉

酸辣土豆丝

开水白菜

拔丝地瓜

红烧肉

芳香排骨

水煮鱼

清蒸鲈鱼

纸包鱼

等待补充

汤类

西湖牛肉羹

拌疙瘩

猪骨高汤

养颜鸡汤

紫菜蛋花汤

紫菜没有蛋花汤

等待补充

-----------------------中西菜分割线——为什么这个也这么长长长长长长啊——-----------------------

前菜

田园沙拉

酸奶沙拉

千岛沙拉

番茄沙拉

等待补充

主菜

牛排（西冷/菲力/肉眼/丁骨/小排 - 一份五个）/（一分/三分/半熟/七分/八分/九分/全熟）

羊排（油炸/油煎/烤制）

猪排（油炸/油煎）

意大利面（番茄酱/番茄肉丸/黑胡椒番茄酱/奶油）

通心粉（同上）

披萨（凤尾鱼/芝士/香肠/海鲜/菠萝已下架）

三明治（牛肉/羊肉/鸡肉）

奶油蘑菇鸡

等待补充

汤类

奶油蘑菇汤

罗宋汤

等待补充

酒水

白酒（酱香型/浓香型/清香型/凤香型/米香型/芝麻香型/馥郁香型/特香型/兼香型/其它香型）

啤酒（雪花/黑啤/白啤）

白兰地

伏特加

朗姆（和死亡不是同义词）

兰琴

波本

威士忌

香槟

苦艾酒

杜松子酒

金酒

利口酒

鸡尾酒：

• 莫吉托
• 长岛冰茶
• B2轰炸机
• 马天尼
• 金菲士
• 拉莫斯金菲士已下架
• 钻石苦艾滴
• 尼格罗尼
• 教父
• 酸马天尼
• 琴雷
• 水割/汤割威士忌
• 曼哈顿
• 彩虹
• 环游世界
• 马颈
• 8号当铺

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

---

一条分割线

嵌套块引用¹

这是一个	表格
你应该早就	知道怎么
制作它了吧

---

脚²
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起^来是
怎么_运作
包括那些不存在
以及存在的链接！
还有特殊警告
或者风险更低的
或者安全的！

[[div class="circle-ul"]]

• 使用“* ”添加无序列表
• 像这样
• 你可以添加很多
  • 还可以缩进
    • 接着缩进
      • 缩！

[[/div]]

[[div class="roman-ol"]]

1. 换成“# ”就可以添加有序列表
2. 就像这样
   1. 它也可以缩进
      1. 真不错
3. 你可能不知道
4. 这是罗马数字
5. 现在你应该知道了吧

[[/div]]

[[div class="float-left-block"]]

[[/div]]

[[div class="float-right-block"]]

[[/div]]

[[div class="border-block"]]

[[/div]]

---

---

[[div class="lightblock"]]
嗯，普通的亮色块
[[/div]]

---

[[div class="darkblock"]]
哦这是一个暗色块
[[/div]]

---

[[div class="tiffanyblock"]]
真是高级感拉满的颜色。
——垃圾厨子
[[/div]]

---

[[div class="cheeseblock"]]
我喜欢奶酪，不过它放在蛋糕上更棒！（当然是甜奶酪！）=D
——蛋糕大师
[[/div]]

---

[[div class="burgundyblock"]]
鲜血的颜色……不对好像只是红酒而已吧
——马天尼博士
[[/div]]

---

[[div class="marrsblock"]]
这才对味嘛，够垃圾的颜色
——垃圾厨子
[[/div]]

---

[[div class="gelbblock"]]
我觉得这个颜色糟透了！比我上次炖坏的那锅汤还糟糕！
——鲜汤达人
[[/div]]

---

[[div class="vandykeblock"]]
巧克力万岁！！！=D
——蛋糕大师
[[/div]]

---

[[div class="khakiblock"]]
我觉得这两个颜色就像咖啡和拉花一样，爱来自咖啡层
——咖啡豆先生于Level C-offee
[[/div]]

---

[[div class="ancientblock"]]
像葡萄——烤葡萄不好吃，伤心
——火候师傅
[[/div]]

---

[[div class="magentablock"]]
也许果酱的味道不错
——垃圾厨子
这就是你上次把果酱加我汤里的理由？！！！
——鲜汤达人
[[/div]]

---

[[div class="prussianblock"]]
我发誓要是下一次再看到垃圾厨子往我汤里加东西我非把它炖了不行！
——鲜汤达人
[[/div]]

---

[[div class="grayblock"]]
为什么不现在就试试呢
——垃圾厨子
你滚！
——鲜汤达人
[[/div]]

---

[[div class="styled-quote"]]
啊哈！样式化引用块！
[[/div]]

---

[[div class="dark-styled-quote"]]
不错的颜色
[[/div]]

---

[[div class="styled-tiffanyblock"]]
每一种特殊的引用块都有自己的styled版本，真不错
——垃圾厨子
答应我你下次别把那玩意烧糊了好吗
——火候师傅
[[/div]]

---

[[div class="styled-quote-d"]]
这个是双侧样式块诶！
[[/div]]

---

[[div class="dark-styled-quote-d"]]
真不错真不错
[[/div]]

---

[[div class="styled-tiffanyblock-d"]]
当然每一种特殊的引用块也都有自己的-d版本！
[[/div]]

标题示例
[[div class="titleblock"]]
[[span class="titlebox"]]标题示例[[/span]]
哦这个块可以加标题
[[/div]]

标题示例
[[div class="dark-titleblock"]]
[[span class="dark-titlebox"]]标题示例[[/span]]
哦看来那些花块块没有这个版本
[[/div]]

---

+ 版式代码

:root {
   --theme-base: "black-highlighter";
   --theme-id: "bca-theme";
   --theme-name: "Backrooms Chef Allience Theme";
 
   --logo-image: url("https://s1.ax1x.com/2022/09/19/x9Nyin.png");
   --header-title: "后室厨师联盟";
   --header-subtitle: "于无尽后室寻求真正美味";
 
   --tiffany-blue: 128, 209, 200;
   --cheese-color: 248, 245, 214;
   --schonbrunner-gelb: 251, 210, 106;  
   --burgundy-red:  71, 0, 36;
   --marrs-green: 1, 132, 127;
   --vandyke-brown: 73, 45, 34;
   --light-khaki: 216, 199, 181;
   --prussian-blue: 0, 49, 83;
   --titian-red: 212, 72, 72;
   --foggy-gray: 229, 221, 215;
   --ancient-purple: 137, 91, 138;
   --light-magenta: 250, 220, 233;
 
   --white-monochrome: 255, 255, 255;
   --pale-gray-monochrome: var(--cheese-color);
   --light-gray-monochrome:  var(--schonbrunner-gelb);
   --gray-monochrome: var(--titian-red);
   --dark-gray-monochrome: var(--burgundy-red);
   --black-monochrome: 25, 20, 16;
   --bright-accent: var(--titian-red);
   --medium-accent: 125, 25, 0;
   --dark-accent: var(--titian-red);
   --pale-accent: var(--titian-red);
 
   --swatch-topmenu-border-color: var(--medium-accent);
 
   --link-color: var(--titian-red);
   --hover-link-color: var(--burgundy-red);
   --visited-link-color: var(--ancient-purple);
   --newpage-color: var(--prussian-blue);
 
   --background-gradient-distance: 0rem;
 
   --gradient-header: linear-gradient(to top,
      rgba(var(--medium-accent)) 0%,
      rgba(var(--medium-accent), 0.90) 100%
   );
   --diagonal-stripes: linear-gradient(transparent 0);
}
@media only screen and (min-width: 769px) {
#header::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: var(--logo-image);
    background-size: auto 12rem;
    opacity: 1;
    z-index: -1;
    top: calc(var(--topbar-height-on-desktop) * -0.5);
}
}
#skrollr-body {
width: auto;
position: relative;
top: 0;
left: 0;
background-image: url("https://images.unsplash.com/photo-1563373011-d9b2e9af4167?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
 
#side-bar:hover,
#side-bar:active,
#side-bar:focus-within {
        background-color: #F8F5D6;
}
 
div#extrac-div-1 {
       content: "";
    position:absolute;
    top:var(--final-header-height-on-desktop);
    width:100%;
    height:calc(100% - var(--final-header-height-on-desktop));
    background-color: #80D1C8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%23fdfbfe' fill-opacity='0.74' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 5%;
    background-repeat: repeat;
    opacity: 1;
    z-index: -3;
}
@media (max-width: 767px) {
 div#extrac-div-1 {
       content: "";
    position:absolute;
    top:var(--final-header-height-on-desktop);
    width:100%;
    height:calc(100% - var(--final-header-height-on-desktop));
    background-color: #80D1C8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath fill='%23fdfbfe' fill-opacity='0.74' d='M0 17.83V0h17.83a3 3 0 0 1-5.66 2H5.9A5 5 0 0 1 2 5.9v6.27a3 3 0 0 1-2 5.66zm0 18.34a3 3 0 0 1 2 5.66v6.27A5 5 0 0 1 5.9 52h6.27a3 3 0 0 1 5.66 0H0V36.17zM36.17 52a3 3 0 0 1 5.66 0h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 0 1 0-5.66V52H36.17zM0 31.93v-9.78a5 5 0 0 1 3.8.72l4.43-4.43a3 3 0 1 1 1.42 1.41L5.2 24.28a5 5 0 0 1 0 5.52l4.44 4.43a3 3 0 1 1-1.42 1.42L3.8 31.2a5 5 0 0 1-3.8.72zm52-14.1a3 3 0 0 1 0-5.66V5.9A5 5 0 0 1 48.1 2h-6.27a3 3 0 0 1-5.66-2H52v17.83zm0 14.1a4.97 4.97 0 0 1-1.72-.72l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1 0-5.52l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43c.53-.35 1.12-.6 1.72-.72v9.78zM22.15 0h9.78a5 5 0 0 1-.72 3.8l4.44 4.43a3 3 0 1 1-1.42 1.42L29.8 5.2a5 5 0 0 1-5.52 0l-4.43 4.44a3 3 0 1 1-1.41-1.42l4.43-4.43a5 5 0 0 1-.72-3.8zm0 52c.13-.6.37-1.19.72-1.72l-4.43-4.43a3 3 0 1 1 1.41-1.41l4.43 4.43a5 5 0 0 1 5.52 0l4.43-4.43a3 3 0 1 1 1.42 1.41l-4.44 4.43c.36.53.6 1.12.72 1.72h-9.78zm9.75-24a5 5 0 0 1-3.9 3.9v6.27a3 3 0 1 1-2 0V31.9a5 5 0 0 1-3.9-3.9h-6.27a3 3 0 1 1 0-2h6.27a5 5 0 0 1 3.9-3.9v-6.27a3 3 0 1 1 2 0v6.27a5 5 0 0 1 3.9 3.9h6.27a3 3 0 1 1 0 2H31.9z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 25%;
    background-repeat: repeat;
    opacity: 1;
    z-index: -3;
 }
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   background-image: var(--logo-image);
   opacity: 1;
}
 
}
#container{
    background-image: none;
}
 
#main-content {
    background-color: #ffffff;
    box-shadow: 1px 1px 3px 2px #00000040;
    padding: 2px 8px;
    margin-top: 16px;
    border: 0.5rem double #000000;
}
 
#page-title{
   text-align: center;
   border-bottom: 5px double black;
}
 
#main-content h1 {
    border-bottom: 5px double black;
}
 
#footer{
    margin: 16px 0 0 0;
    color: #ffffff;
}
 
.page-rate-widget-box {
    border: none;
    border-bottom: 3px double black;
    background-image: none;
    background-color:rgba(var(--light-gray-monochrome),.25);
    box-shadow: none
}
 
.page-rate-widget-box span.rate-points {
   letter-spacing: -12px;
   color: transparent !important;
}
 
.page-rate-widget-box .rate-points:before, .page-rate-widget-box .rate-points span {
    content: "食客评分：";
    letter-spacing: 0;
    color: rgb(var(--burgundy-red));
}
 
.scp-image-block {
    border: 5px double black;
}
 
.scp-image-caption {
    background-color: white!important;
    border-top: 1.5px solid black!important;
}
 
.circle-ul ul {
    list-style-type:disc;
}
 
.circle-ul ul li ul {
    list-style-type:circle;
}
 
.roman-ol ol {
    list-style-type:upper-roman;
}
 
.roman-ol li ol {
    list-style-type:lower-roman;
}
 
table.wiki-content-table tbody {
border: none !important;
}
 
table.wiki-content-table tr {
border: none !important;
}
 
table.wiki-content-table th {
border: none !important;
background-color: rgb(var(--black-monochrome))!important;
}
 
table.wiki-content-table td {
border: none !important;
border-bottom: 2px dotted black !important;
}
 
hr {
background: transparent;
border-top: double 3px black;
}
 
.dark-styled-quote hr {
   border-color: rgb(var(--cheese-color));
}
 
.styled-quote hr {
   border-color: rgb(var(--titian-red));
}
 
.dark-styled-quote-d hr {
   border-color: rgb(var(--cheese-color));
}
 
.styled-quote-d hr {
   border-color: rgb(var(--titian-red));
}
 
.blockquote hr {
   border-color: rgb(var(--titian-red));
}
 
.darkblock hr {
   border-color: rgb(var(--cheese-color));
}
 
.tiffanyblock hr {
   border-color: rgb(var(--cheese-color));
}
 
.styled-tiffanyblock hr {
   border-color: rgb(var(--cheese-color));
}
 
.burgundyblock hr {
   border-color: white;
}
 
.marrsblock hr {
   border-color: rgb(var(--schonbrunner-gelb));
}
 
.gelbblock hr {
   border-color: rgb(var(--marrs-green));
}
 
.vandykeblock hr {
   border-color: rgb(var(--light-khaki));
}
 
.ancientblock hr {
   border-color: rgb(var(--light-magenta));
}
 
.magentablock hr {
   border-color: rgb(var(--ancient-purple));
}
 
.kahkiblock hr {
   border-color: rgb(var(--vandyke-brown));
}
 
.prussianblock hr {
   border-color: rgb(var(--foggy-gray));
}
 
.grayblock hr {
   border-color: rgb(var(--prussian-blue));
}
 
.styled-tiffanyblock hr {
   border-color: rgb(var(--cheese-color));
}
 
.styled-burgundyblock hr {
   border-color: white;
}
 
.styled-marrsblock hr {
   border-color: rgb(var(--schonbrunner-gelb));
}
 
.styled-gelbblock hr {
   border-color: rgb(var(--marrs-green));
}
 
.styled-vandykeblock hr {
   border-color: rgb(var(--light-khaki));
}
 
.styled-ancientblock hr {
   border-color: rgb(var(--light-magenta));
}
 
.styled-magentablock hr {
   border-color: rgb(var(--ancient-purple));
}
 
.styled-kahkiblock hr {
   border-color: rgb(var(--vandyke-brown));
}
 
.styled-prussianblock hr {
   border-color: rgb(var(--foggy-gray));
}
 
.styled-grayblock hr {
   border-color: rgb(var(--prussian-blue));
}
 
.styled-tiffanyblock-d hr {
   border-color: rgb(var(--cheese-color));
}
 
.styled-burgundyblock-d hr {
   border-color: white;
}
 
.styled-marrsblock-d hr {
   border-color: rgb(var(--schonbrunner-gelb));
}
 
.styled-gelbblock-d hr {
   border-color: rgb(var(--marrs-green));
}
 
.styled-vandykeblock-d hr {
   border-color: rgb(var(--light-khaki));
}
 
.styled-ancientblock-d hr {
   border-color: rgb(var(--light-magenta));
}
 
.styled-magentablock-d hr {
   border-color: rgb(var(--ancient-purple));
}
 
.styled-kahkiblock-d hr {
   border-color: rgb(var(--vandyke-brown));
}
 
.styled-prussianblock-d hr {
   border-color: rgb(var(--foggy-gray));
}
 
.styled-grayblock-d hr {
   border-color: rgb(var(--prussian-blue));
}
 
.yui-navset .yui-content {
  background-color: white;
  border: none;
  border-bottom: 5px double black;
  margin-top: 0.2em;
  transform-origin: 0 0;
}
 
.yui-navset .yui-content > div {
  padding: 0.25em 0.5em;
  display: block;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div > * {
  transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
  display: block !important;
  flex: 0;
  max-height: 0;
  padding: 0 0.5em;
  border-width: 0;
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
  animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
 
#page-content .yui-navset .yui-content > div[style*="block"] {
  display: block !important;
  flex: 1;
  max-height: 9999rem;
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
  animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
  0% { max-height: 9999rem; }
  1% { max-height: 100vh; }
  100% { max-height: 0; }
}
@keyframes tab-appear {
  0% { max-height: 0; }
  99% { max-height: 100vh; }
  100% { max-height: 9999rem; }
}
 
blockquote, div.blockquote {
   border: none;
}
.code {
   border: none;
}
 
.titleblock {
   background-color: rgb(var(--pale-gray-monochrome));
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid rgb(var(--dark-accent)) 2px;
}
 
.titlebox{
  position: relative;
  top: -1.6rem;
  background-color: rgb(var(--dark-accent));
  color: rgb(var(--pale-gray-monochrome));
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
  text-align: center;
}
 
.dark-titleblock {
   background-color: rgb(var(--dark-accent));
   color: rgb(255,255,255);
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid rgb(var(--pale-gray-monochrome)) 2px;
}
 
.dark-titlebox{
  position: relative;
  top: -1.6rem;
  background-color: rgb(var(--pale-gray-monochrome));
  color: rgb(0,0,0);
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
  text-align: center;
}
 
.styled-quote-d {
   background-color:rgb(var(--pale-gray-monochrome));
   border-left: 0.5rem solid rgba(var(--gray-monochrome));
   border-right: 0.5rem solid rgba(var(--gray-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote-d {
   background-color:rgb(var(--gray-monochrome));
   border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
   border-right: 0.5rem solid rgba(var(--pale-gray-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.tiffanyblock {
   background-color:rgb(var(--tiffany-blue));
   color: #1F1E3F;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.tiffanyblock a {
color: rgb(var(--burgundy-red));
}
 
.cheeseblock {
   background-color:rgb(var(--cheese-color));
   color:black;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.burgundyblock {
   background-color:rgb(var(--burgundy-red));
   color: white;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.burgundyblock a {
color: rgb(var(--light-magenta));
}
 
.marrsblock {
   background-color:rgb(var(--marrs-green));
   color: rgb(var(--schonbrunner-gelb));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.gelbblock {
   background-color:rgb(var(--schonbrunner-gelb));
   color: rgb(var(--marrs-green));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.vandykeblock {
   background-color:rgb(var(--vandyke-brown));
   color: rgb(var(--light-khaki));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.vandykeblock a {
color: rgb(var(--light-magenta));
}
 
.ancientblock {
   background-color:rgb(var(--ancient-purple));
   color: rgb(var(--light-magenta));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
. ancientblock a {
color: rgb(var(--light-magenta));
}
 
.magentablock {
   background-color:rgb(var(--light-magenta));
   color: rgb(var(--ancient-purple));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.khakiblock {
   background-color:rgb(var(--light-khaki));
   color: rgb(var(--vandyke-brown));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.khakiblock a {
color: rgb(var(--ancient-purple));
}
 
.prussianblock {
   background-color:rgb(var(--prussian-blue));
   color: rgb(var(--foggy-gray));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.prussianblock a {
color: white;
}
 
.grayblock {
   background-color:rgb(var(--foggy-gray));
   color: rgb(var(--prussian-blue));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.grayblock a {
color: rgb(var(--titian-red));
}
 
.styled-tiffanyblock {
   background-color:rgb(var(--tiffany-blue));
   color: #1F1E3F;
   border-left: 0.5rem solid rgba(var(--cheese-color));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-tiffanyblock a {
color: rgb(var(--burgundy-red));
}
 
.styled-burgundyblock {
   background-color:rgb(var(--burgundy-red));
   border-left: 0.5rem solid rgb(var(--light-magenta));
   color: white;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-burgundyblock a {
color: rgb(var(--light-magenta));
}
 
.styled-marrsblock {
   background-color:rgb(var(--marrs-green));
   color: rgb(var(--schonbrunner-gelb));
   border-left: 0.5rem solid rgb(var(--schonbrunner-gelb));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-gelbblock {
   background-color:rgb(var(--schonbrunner-gelb));
   color: rgb(var(--marrs-green));
   border-left: 0.5rem solid rgb(var(--marrs-green));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-vandykeblock {
   background-color:rgb(var(--vandyke-brown));
   color: rgb(var(--light-khaki));
   border-left: 0.5rem solid rgba(var(--light-khaki));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-vandykeblock a {
color: rgb(var(--light-magenta));
}
 
.styled-ancientblock {
   background-color:rgb(var(--ancient-purple));
   color: rgb(var(--light-magenta));
   border-left: 0.5rem solid rgb(var(--light-magenta));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-ancientblock a {
color: rgb(var(--light-magenta));
}
 
.styled-magentablock {
   background-color:rgb(var(--light-magenta));
   color: rgb(var(--ancient-purple));
   border-left: 0.5rem solid rgba(var(--ancient-purple));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-khakiblock {
   background-color:rgb(var(--light-khaki));
   color: rgb(var(--vandyke-brown));
   border-left: 0.5rem solid rgba(var(--vandyke-brown));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-khakiblock a {
color: rgb(var(--ancient-purple));
}
 
.styled-prussianblock {
   background-color:rgb(var(--prussian-blue));
   color: rgb(var(--foggy-gray));
   border-left: 0.5rem solid rgba(var(--foggy-gray));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-prussianblock a {
color: white;
}
 
.styled-grayblock {
   background-color:rgb(var(--foggy-gray));
   color: rgb(var(--prussian-blue));
   border-left: 0.5rem solid rgba(var(--prussian-blue));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-grayblock a {
color: rgb(var(--titian-red));
}
 
.styled-tiffanyblock-d {
   background-color:rgb(var(--tiffany-blue));
   color: #1F1E3F;
   border-left: 0.5rem solid rgba(var(--cheese-color));
   border-right: 0.5rem solid rgba(var(--cheese-color));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-tiffanyblock-d a {
color: rgb(var(--burgundy-red));
}
 
.styled-burgundyblock-d {
   background-color:rgb(var(--burgundy-red));
   border-left: 0.5rem solid rgb(var(--light-magenta));
   border-right: 0.5rem solid rgb(var(--light-magenta));
   color: white;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-burgundyblock-d a {
color: rgb(var(--light-magenta));
}
 
.styled-marrsblock-d {
   background-color:rgb(var(--marrs-green));
   color: rgb(var(--schonbrunner-gelb));
   border-left: 0.5rem solid rgb(var(--schonbrunner-gelb));
   border-right: 0.5rem solid rgb(var(--schonbrunner-gelb));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-gelbblock-d {
   background-color:rgb(var(--schonbrunner-gelb));
   color: rgb(var(--marrs-green));
   border-left: 0.5rem solid rgb(var(--marrs-green));
   border-right: 0.5rem solid rgb(var(--marrs-green));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-vandykeblock-d {
   background-color:rgb(var(--vandyke-brown));
   color: rgb(var(--light-khaki));
   border-left: 0.5rem solid rgba(var(--light-khaki));
   border-right: 0.5rem solid rgba(var(--light-khaki));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-vandykeblock-d a {
color: rgb(var(--light-magenta));
}
 
.styled-ancientblock {
   background-color:rgb(var(--ancient-purple));
   color: rgb(var(--light-magenta));
   border-left: 0.5rem solid rgb(var(--light-magenta));
   border-right: 0.5rem solid rgb(var(--light-magenta));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-ancientblock-d a {
color: rgb(var(--light-magenta));
}
 
.styled-magentablock-d {
   background-color:rgb(var(--light-magenta));
   color: rgb(var(--ancient-purple));
   border-left: 0.5rem solid rgba(var(--ancient-purple));
   border-right: 0.5rem solid rgba(var(--ancient-purple));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-khakiblock-d {
   background-color:rgb(var(--light-khaki));
   color: rgb(var(--vandyke-brown));
   border-left: 0.5rem solid rgba(var(--vandyke-brown));
   border-right: 0.5rem solid rgba(var(--vandyke-brown));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-khakiblock-d a {
color: rgb(var(--ancient-purple));
}
 
.styled-prussianblock-d {
   background-color:rgb(var(--prussian-blue));
   color: rgb(var(--foggy-gray));
   border-left: 0.5rem solid rgba(var(--foggy-gray));
   border-right: 0.5rem solid rgba(var(--foggy-gray));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-prussianblock-d a {
color: white;
}
 
.styled-grayblock-d {
   background-color:rgb(var(--foggy-gray));
   color: rgb(var(--prussian-blue));
   border-left: 0.5rem solid rgba(var(--prussian-blue));
   border-right: 0.5rem solid rgba(var(--prussian-blue));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-grayblock-d a {
color: rgb(var(--titian-red));
}
 
.float-left-block {
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   background-color: white;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
   border: 5px double black;
   float: left;
}
 
.float-right-block {
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   background-color: white;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
   border: 5px double black;
   float: right;
}
 
.border-block {
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   background-color: white;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
   border: 5px double black;
}

---

作者信息

版式用的图片来自unsplash
图标由Cat-herine 不匹配任何一个现有的用户名制作
背景图片由TaRtaR0S制作
其余配图由本人制作
感谢Mercuresphere和TaRtaR0S的代码支持

脚注

1. 这是一个脚注！

2. 注