Forum Categories

---

+ Show component code

: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;
        overflow-y: scroll;
        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;
        }
    }
}

Announcements

Announce new pages, talk about site policy, and interact with new site members.

Category name	Threads	Posts	Last post
Announcements Announce new pages and site-wide events here. Authors, please use the Authors' Announcements thread	1	17	by YellowISlol 25 Dec 2020 09:12Jump!
Contact Staff What can we do to improve the site? Ask any questions you may have regarding site structure and policy.	11	26	by lukeo322 11 Oct 2021 19:55Jump!
Introductions New to the site? Introduce yourself and meet other site members here.	34	66	by Zavvnao 19 Oct 2021 15:58Jump!
Authors' Announcements For authors to announce new pages and projects	14	27	by Maraluna 15 Oct 2021 01:13Jump!

Backrooms Universe

The world behind the Backrooms

Category name	Threads	Posts	Last post
Lore Discussing and inquiring about the lore of the Backrooms	11	37	by Kai4C 03 Oct 2021 12:27Jump!

Writing Help

Get help with developing, writing, and editing your mainsite works!

Category name	Threads	Posts	Last post
Help: Ideas Critique Feedback on concepts and greenlights given here. Please only post sandbox/draft pages if requested by a reviewer.	99	237	by Ferraru 19 Oct 2021 12:24Jump!
Help: Draft Critique Want to run your draft past the veterans? Post here.	128	271	by Mighty Potato 20 Oct 2021 04:15Jump!
Help: Research and Resources Doing background research to use real-life knowledge to make in-universe pages sound professional.	1	3	by OkThisIsHard 27 Mar 2021 01:28Jump!
Help: Questions Desk If you've got questions about the sandbox, chat, formatting (wiki syntax/coding), or anything that involves the writing process and/or something you're currently writing, post here.	27	82	by BearPig 03 Oct 2021 17:42Jump!

General

General forum discussion regarding interests, projects, and so on.

Category name	Threads	Posts	Last post
General General Discussion	22	70	by Paint Palette 16 Oct 2021 10:14Jump!

Meta

Category name	Threads	Posts	Last post
Per page discussions This category holds per-page comment threads	1371	3277	by name picking is hard 20 Oct 2021 07:02Jump!
Deleted threads Deleted forum discussions should go here.	4	3	by YellowISlol 15 Dec 2020 23:20Jump!

Show hidden

RSS: New threads | New posts