可折叠侧边栏

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

！！！警告！！！

这个组件有点试验性质，可能会在一小部分浏览器上无法正常工作。

如果你发现了一个错误，请在讨论区反馈，包括浏览器、浏览器版本和操作系统。

截止 2021 年 03 月 04 日，有一个小漏洞：

如果一同使用的版式为侧边栏上了色，它也会改变伪元素的背景色。这会导致侧边栏在悬停之前只能显示为彩色的竖直方块。

---

用于添加可折叠侧边栏的组件。
可用于黑色标记笔和 Sigma-9。
>点击这里查看黑色标记笔预览效果<
>点击这里查看 Sigma-9 预览效果<

在任何版式下方添加以下 include 代码：
[[include :scp-wiki:component:collapsible-sidebar]]

---

+ 显示组件代码

:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
    --body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
    #content-wrap {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: -webkit-calc(100vw - (100vw - 100%));
        width: -moz-calc(100vw - (100vw - 100%));
        width: calc(100vw - (100vw - 100%));
        min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
        min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
        min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
        -webkit-box-flex: 2;
        -webkit-flex-grow: 2;
           -moz-box-flex: 2;
            -ms-flex-positive: 2;
                flex-grow: 2;
        height: auto;
        position: initial;
        margin: 0 auto;
        max-width: inherit;
        margin-left: -11em;
        margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
        margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
        margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
    }
 
    #main-content {
        position: initial;
        max-height: 100%;
        padding: 2rem 1rem;
        width: 45.75rem;
        width: var(--body-width-on-desktop, 45.75rem);
        max-width: 45.75rem;
        max-width: var(--body-width-on-desktop, 45.75rem);
        margin: 0 auto;
    }
 
    #page-content {
            max-width: min(90vw, 45.75rem);
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
    }
 
    #side-bar {
        -webkit-transform: translateX(-14.6rem);
           -moz-transform: translateX(-14.6rem);
            -ms-transform: translateX(-14.6rem);
             -o-transform: translateX(-14.6rem);
                transform: translateX(-14.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
        -webkit-transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            padding 300ms linear,
            margin 300ms linear,
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            transform 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,
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 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;
        transition:
            transform 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,
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border: none;
        border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
        width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        grid-area: side-bar;
        padding-right: 2rem;
        background-color: transparent;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
        top: 0;
        max-height: 100vh;
        position: -webkit-sticky;
        position: sticky;
        left: 0;
        padding-left: 0.5rem;
        direction: rtl;
        scrollbar-width: thin;
        -ms-scroll-chaining: none;
            overscroll-behavior: contain;
        scrollbar-color:
            rgba(170, 170, 170, 0)  /* Thumb */
            rgba(252, 252, 252, 0); /* Track */
        scrollbar-color:
        rgba(var(--swatch-primary-darker, 170, 170, 170), 0.1)   /* Thumb */
        rgba(var(--swatch-tertiary-color, 252, 252, 252), 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: -webkit-calc(100vw + 100vh);
        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:hover,
    #side-bar:active {
        background-color: white;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
        padding-right: 0.25rem;
        margin-right: 1.75rem;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0)));
        overflow-y: auto;
        overflow-x: hidden;
        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 */
        border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #side-bar:focus-within {
        background-color: white;
        background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
        padding-right: 0.25rem;
        margin-right: 1.75rem;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem)));
        overflow-y: auto;
        overflow-x: hidden;
        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 */
        border-color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #main-content::after {
        content: " ";
        position: fixed;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 1rem;
        height: 100%;
        max-height: 100%;
        top: 0;
        -webkit-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);
        -o-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);
        -moz-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);
        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);
        left: 1rem;
        background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
        background-repeat: no-repeat;
        background-position: center left 1rem;
        background-attachment: fixed;
        -webkit-background-size: 1rem 12.875rem;
           -moz-background-size: 1rem 12.875rem;
             -o-background-size: 1rem 12.875rem;
                background-size: 1rem 12.875rem;
        pointer-events: none;
    }
 
    #side-bar:hover+#main-content::after,
    #side-bar:active+#main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
        background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
        -webkit-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);
        -o-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);
        -moz-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);
        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;
        width: 0rem;
        font-size: 0em;
    }
 
    #side-bar:focus-within+#main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
        background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
        -webkit-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);
        -o-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);
        -moz-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);
        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;
        width: 0rem;
        font-size: 0em;
    }
 
    #main-content::before {
        --not-ie: absolute;
        content: " ";
        background-color: black;
        background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
        position: fixed;
        position: var(--not-ie);
        top: 0;
        top: var(--final-header-height-on-desktop, 0);
        left: 0;
        -webkit-transform: translateX(-12.6rem);
           -moz-transform: translateX(-12.6rem);
            -ms-transform: translateX(-12.6rem);
             -o-transform: translateX(-12.6rem);
                transform: translateX(-12.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
        width: 17em;
        width: var(--sidebar-width-on-desktop, 17em);
        height: -webkit-calc(100% - 3rem);
        height: -moz-calc(100% - 3rem);
        height: calc(100% - 3rem);
        height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
        -webkit-transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition:
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0.5;
        pointer-events: none;
        z-index: 9;
        margin-bottom: 0;
        margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
        margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
        margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    }
 
    #side-bar:hover+#main-content::before,
    #side-bar:active+#main-content::before {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }
 
    #side-bar:focus-within+#main-content::before {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
        opacity: 0;
    }
 
    #side-bar .side-block {
        margin-top: 1em;
        padding-left: 0.25em;
        background-color: rgb(0, 0, 0, 0);
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        border-left-width: 0rem;
        border-right-width: 0rem;
        direction: ltr;
    }
 
    #side-bar .scpnet-interwiki-wrapper {
        direction: ltr;
    }
 
    @supports (-ms-ime-align: auto) {
        #side-bar {
            overflow-y: hidden;
            overflow-x: hidden;
            -webkit-transform: translateX(-90%) !important;
               -moz-transform: translateX(-90%) !important;
                -ms-transform: translateX(-90%) !important;
                 -o-transform: translateX(-90%) !important;
                    transform: translateX(-90%) !important;
        }
 
        #side-bar:hover,
        #side-bar:active {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
            margin-left: -0.5rem;
        }
 
        #side-bar:focus-within {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
            margin-left: -0.5rem;
        }
 
        #main-content::before {
            left: 1rem;
            -webkit-transform: translateX(-100%) !important;
               -moz-transform: translateX(-100%) !important;
                -ms-transform: translateX(-100%) !important;
                 -o-transform: translateX(-100%) !important;
                    transform: translateX(-100%) !important;
        }
    }
}