component:theme

为什么
我每次搞全站版式
一用就崩
cnm
这是第二次尝试，失败了我就滚
改自http://scp-wiki-cn.wikidot.com/theme:shark-punching-centre-bhl

@import url("https://bhl.scpwikicn.com/css/min/normalize.min.css");
@import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css");
#page-title, #breadcrumbs {
    text-align: center !important;
}
 
.scp-image-block.block-right {
    margin: 1em 0 1em 2em;
}
 
.scp-image-block > a:first-of-type {
    background: var(--gradient-header);
}
 
.scp-image-block .printuser img.small {
    width: initial;
}
 
.scp-image-block img {
    min-width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0.5em;
}
:root {
    --logo-image: url("https://3703r.wikidot.com/local--files/fujian/aaa");
    --header-title: "R-U-NITLIGHT";
    --header-subtitle: "FOR YOU,THAT'S ALL";
 
    --rating-module-bg-color: 232, 240, 255;
    --rating-module-bottom-border-color: 0, 35, 94;
    --newpage-color: var(--alt-accent);
/* ===THEME COLORS=== */
    /* subdued theme color, for visited links */
    --pale-accent: 20, 20, 210;
    /* vivid theme color, the "default" accent color */
    --bright-accent: 0, 71, 194;
    /* theme color */
    --medium-accent: 40, 91, 122;
    /* darker theme color */
    --dark-accent: 0, 42, 115;
    /* alternate accent color, for newpage links */
    --alt-accent: 190, 190, 255;
 
    --modal-header-bg: 150, 191, 255;
 
}
:root:lang(cn) {
    --header-title: "R·U·NITLIGHT";
    --header-subtitle: "避难所，但不只是避难所";
}
#main-content {
    --tables-header-bg: 0, 71, 194;
    --footnotes-footer-colorbar-color: 0, 42, 115;
    --pagetags-title-bg: 0, 42, 115;
    --blockquote-border-color: 0, 42, 115;
}
 
#content-wrap::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  background-image: url('https://scp-wiki.wikidot.com/local--files/theme:shark-punching-centre-bhl/band.png');
  opacity: 0.5;
}
#page-title,
.meta-title {
    color: rgb(0, 0, 200);
}
.SPCbox {
    box-sizing: border-box;
    border: rgb(var(--medium-accent)) 10px solid;
    padding: 1rem;
}
.SPCbox-filled {
    box-sizing: border-box;
    border: rgb(var(--medium-accent)) 10px solid;
    padding: 1rem;
    background-color: rgb(122, 182, 255);
}
.SPCbox-dotted {
    box-sizing: border-box;
    border: rgb(var(--medium-accent)) 10px dashed;
    padding: 1rem;
}
.SPCbox-dotted-filled {
    box-sizing: border-box;
    border: rgb(var(--medium-accent)) 10px dashed;
    padding: 1rem;
    background-color: rgb(122, 182, 255);
}
.CICAPOCOnotice {
    border: #999999 1px solid;
    background-color: lightblue;
    padding: 5px;
    margin-bottom: 10px;
}
.DOnotice {
    border: hsl(0, 0%, 5%) 2px solid;
    background: hsl(208, 67%, 44%);
    padding: 5px;
    margin-bottom: 10px;
    color: hsl(208, 100%, 97%);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(0, 42, 115);
}
hr {
    color: rgb(0, 42, 115);
    background: rgb(0, 42, 115);
    border: rgb(0, 42, 115) 1px solid;
}
/*=======特色代码=======*/
/*
* @name: 文字样式扩展
* @author: HelloOSMe
* @version: 1.0
*/
.mobile-show{
display:none;
}
@media screen and (max-width: 600px) {
    .mobile-show{
        display:block;
    }
    .desktop-show{
        display:none;
    }
}
/*黑幕*/
.heimu{
    color: transparent;
    display:inline-block;
    background:#aaa;
    transition:all 100ms linear 0s;
    padding:0px;
    margin:0px;
}
.heimu:hover{
    background: none;
    color:#aaa;
    transition:all 100ms linear 0s;
}
.heimu p{
    display:inline-block;
    padding:0px;
    margin:0px;
}
/*模糊文字*/
.blur{
    text-shadow: var(--text-color) 0 0 5px;
    color:transparent;
    display:inline-block;
}
/*模糊幕*/
.hblur{
    text-shadow: #aaa 0 0 5px;
    color:transparent;
    transition:all 100ms linear 0s;
    display:inline-block;
}
.hblur:hover{
    text-shadow:none;
    color:#aaa;
    transition:all 100ms linear 0s;
}
.hblur p{
    display:inline-block;
    padding:0px;
    margin:0px;
}
/*颜色*/
.colorful{
background:linear-gradient(to right, red 0% , orange 20% , yellow 40% , green 60%, blue 80%, purple 100%);
-webkit-background-clip: text;
color: transparent;
display:inline-block;
}
/*错误框*/
.errorbox{
border: dashed var(--error-color) 1px;
padding:1em;
color:var(--error-color);
}
.errorbox p{
padding:0px;
margin:0px;
}
.buttonlink a{
    border: var(--button-border)!important;
    background: var(--button-background)!important;
    color: #99a;
    padding-left:7px;
    padding-right:7px;
    padding-bottom:1px;
transition:none;
cursor:default;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.buttonlink a:hover{
color:#fff;
text-decoration:none;
border-color:#fff;
transition:none;
cursor:default;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
/*=======结束：特色代码=======*/
/*=======原作者helloos========*/
/*=======很抱歉未经允许自己加了awa========*/
/*其他↓*/
/*剧中页眉，对就是基金会的那个组件*/
/*原作者woedenaz*/
@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-tertiary-color));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-tertiary-color));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
        #login-status::before {
            --mask-image: none;
            background-color: transparent;
        }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
        #search-top-box:focus-within ~ #login-status {
            opacity: 1;
        }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}
/*↓↓↓黑标风格折叠*/
/*也是基金会的组件，，，*/
/* BHL styled collapsibles with fancy-schamncy animations! By Monkatraz */
/* #page-content is shoved everywhere to make sure it's the most specific thingy */
/* Styling! */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    /* Animated things */
    transition: background 0.2s linear;
    background: rgb(66, 66, 72);
    /* Technical bits */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
/* The Clicky Text */
#page-content .collapsible-block-link {
    color: white;
    font-weight: bold;
}
/* Gets rid of the underline when hovering over the collapsible */
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
/* Collapsible content */
#page-content .collapsible-block-content {
    border-bottom: solid 3px rgb(66,66,72);
    /* Animated things */
    transition: border-top-color 0.2s linear;
    border-top: solid rgb(66, 66, 72) 5px;
}
/* End of addendum tag */
#page-content .collapsible-block-content::after {
    content:"附录结束";
    font-weight: bold;
    font-size: 95%;
    color:white;
    background: rgb(66, 66, 72);
    width: 150px;
    border-radius: 3px;
    /* Technical bits */
    display: block;
    text-align: center;
    margin:auto;
    margin-bottom: -3px;
}
/* Folded blocks are animated, unfolded ones are not */
#page-content .collapsible-block-folded {
    transition: max-width 0.2s linear;
    max-width: 7.75em;
}
#page-content .collapsible-block-unfolded-link{
    width: min-content;
}
/* Addendum counter */
#page-content {
    counter-reset: collapse;
}
#page-content .collapsible-block, #page-content .unfolded-collapse, #page-content .centered-unfolded-collapse{
    counter-increment: collapse;
}
 
/* Addendum prefixes */
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ 附录 XXXX." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ 附录 XXXX." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
/* Hovering effects */
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover{
    background: rgb(100, 46, 44);
    max-width: 100%;
}
/* Top of the collapsible border - because it looks prettier this way */
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{
    border-top-color: rgb(100, 46, 44);
}
/* Accent flash when clicking, also forces the collapsible to expand */
#page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active{
    transition: background 0s, max-width 0s;
    background: rgb(133, 0, 5);
    max-width: 100%;
}
/* Done with normal collapsibles, now we do all the variations */
/* Unfolded collapsible */
#page-content .unfolded-collapse{
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: rgb(66, 66, 72);
    /* Text */
    color: white;
    font-weight: bold;
    /* Technical bits */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
/* Addendum prefix */
#page-content .unfolded-collapse::before {
    content: "▽ 附录 XXXX." counter(collapse);
    border-right: dotted 0.25em;
    padding-right: 1rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
/* Bottom border */
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid rgb(66, 66, 72) 5px;
}
/* Centering, very simple */
#page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{
    margin:auto;
    margin-top: 10px;
}
/* Removing the slick animation and addendum number because you're a monster */
/* Set back the max width and just ignore the transition screwyness */
#page-content .no-addendum .collapsible-block-folded {
    max-width: none;
}
/* Prefixes */
#page-content .no-addendum .collapsible-block-unfolded .collapsible-block-link::before, #page-content .no-addendum .unfolded-collapse::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
}
#page-content .no-addendum .collapsible-block-folded .collapsible-block-link::before {
    content: "▷";
    border-right: none;
    padding-right: 0rem;
}
/* Kill the automatic footer because you haven no trouble figuring out where your addendums end */
#page-content .no-footer .collapsible-block-content{
    border-bottom: none;
}
#page-content .no-footer .collapsible-block-content::after{
    display:none;
}
/* Fittingly, we finish with the footer object */
/* The footer is actually the giant bottom border object because larger -> smaller works better */
#page-content .addendumfooter{
    display: block;
    border-bottom: solid 3px rgb(66,66,72);
    margin:auto;
    text-align: center;
}
/* Texty bits */
#page-content .addendumfooter::after{
    content: "附录结束";
    font-weight: bold;
    font-size: 95%;
    color:white;
    background: rgb(66, 66, 72);
    width: 150px;
    border-radius: 3px;
    /* Technical bits */
    display: block;
    text-align: center;
    margin:auto;
    margin-bottom: -3px;
}
/* Ayer's info-bar patch */
#page-content .info-container .collapsible-block {
    counter-increment: none;
}
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: var(--barColour);
}
#page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before {
    content: "";
    display: none;
}
#page-content .info-container .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
/* License Box Patch */
#page-content .licensebox .collapsible-block-link {
    color: inherit;
}
#page-content .licensebox .collapsible-block-link:hover {
    text-decoration: underline;
}
#page-content .licensebox .collapsible-block {
    counter-increment: none;
}
#page-content .licensebox .collapsible-block-folded,
#page-content .licensebox .collapsible-block-unfolded-link {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: none;
}
#page-content .licensebox .collapsible-block-folded::before,
#page-content .licensebox .collapsible-block-unfolded-link::before {
    content: "";
    display: none;
}
#page-content .licensebox .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
#page-content .licensebox .collapsible-block-folded .collapsible-block-link::before,
#page-content .licensebox .collapsible-block-unfolded .collapsible-block-link::before,
#page-content .licensebox .unfolded-collapse::before {
    display: none;
}
#page-content .licensebox .collapsible-block-content::after {
    display: none;
}
/*可折叠侧边栏，依然是基金会的组件（*/
:root {
        --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
        --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 56.25rem) {
        #content-wrap {
            display: flex;
            position: initial;
            flex-direction: row;
            flex-grow: 2;
            width: calc(100vw - (100vw - 100%));
            max-width: inherit;
            height: auto;
            min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
            margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
        }
 
        #main-content {
            position: initial;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            max-height: 100%;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        #side-bar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            grid-area: side-bar;
            width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
            max-height: 100vh;
            padding-right: 2.5rem;
            padding-left: 0.5rem;
            overflow-y: scroll;
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                padding 300ms linear,
                margin 300ms linear;
            border: none;
            border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
            translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
            direction: rtl;
            scrollbar-width: thin;
            -ms-scroll-chaining: none;
                overscroll-behavior: contain;
            scrollbar-color: 
                rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
                rgba(var(--swatch-tertiary-color), 0.05); /* Track */
        }
 
        #side-bar::-webkit-scrollbar-track {
            background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
        }
 
        #side-bar::-webkit-scrollbar,
        #side-bar::-webkit-scrollbar-thumb,
        #side-bar::-webkit-scrollbar-corner {
            width: 0.5rem;
            border-right-width: calc(100vw + 100vh);
            border-right-style: inset;
            border-color: inherit;
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        }
 
        #side-bar:is(:hover, :active, :focus-within) {
            margin-right: 2.25rem;
            padding-right: 0.25rem;
            overflow-x: hidden;
            overflow-y: auto;
            border-color: rgba(var(--swatch-primary-darker), 1);
            background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
            translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
            scrollbar-color: 
                rgba(170, 170, 170, 1)  /* Thumb */
                rgba(252, 252, 252, 1); /* Track */
            scrollbar-color: 
                rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
                rgb(var(--swatch-menubg-color, 252, 252, 252), 1);  /* Track */
        }
 
        #main-content::after {
            content: " ";
            display: flex;
            position: fixed;
            top: 0;
            left: 1rem;
            align-items: center;
            justify-content: center;
            width: 1rem;
            height: 100%;
            max-height: 100%;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: center left 1rem;
            background-size: 1rem 12.875rem;
            pointer-events: none;
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::after {
            left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            width: 0rem;
            transition:
                left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0;
            background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
            font-size: 0em;
        }
 
        #main-content::before {
            content: " ";
            position: absolute;
            z-index: 9;
            top: var(--final-header-height-on-desktop, 0);
            left: 0;
            width: var(--sidebar-width-on-desktop, 14.5rem);
            height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
            margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
            transition:
                translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
            opacity: 0.5;
            background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
            pointer-events: none;
            translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
        }
 
        #side-bar:is(:hover, :active, :focus-within) + #main-content::before {
            translate: 0;
            opacity: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1em;
            padding-left: 0.25em;
            border-right-width: 0rem;
            border-left-width: 0rem;
            border-radius: 0;
            background-color: rgb(0, 0, 0, 0);
            direction: ltr;
        }
 
        #side-bar .scpnet-interwiki-wrapper {
            direction: ltr;
        }
 
        /* Print Friendly Formatting by Estrella */
        body.print-body { 
            --sidebar-width-on-desktop: 0; 
        } 
        body.print-body #main-content::before,
        body.print-body #main-content::after { 
            display: none; 
        }
    }