The Foundation Theme

Theme Colors

Payne's Grey--gray-monochrome(66, 66, 72)

Rosewood--bright-accent(133, 0, 5)

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

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

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

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

Alto--very-light-gray-monochrome(215, 215, 215)

White Smoke--pale-gray-monochrome(244, 244, 244)

Bastille--dark-gray-monochrome(48, 48, 52)

Buccaneer--medium-accent(100, 46, 44)

Maroon--dark-accent(100, 3, 15)

Guardsman Red--light-gray-monochrome(200, 0, 5)

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

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

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

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

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

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

Usage

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.¹

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:the-foundation-theme]]

Option for Dark Theme as seen on SCP-4485 as well:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:the-foundation-theme |dark=--]]]

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

The body and header font is Source Sans Pro. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The Title font is Merriweather. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The Title font is Merriweather. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ
The monospace font is Roboto Mono. ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ ěščřžýáíéůú ĚŠČŘŽÝÁÍÉŮÚ

Footnotes

1. Check out how links actually get highlighted!

---

+ Show component code

: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; 
        }
    }

---

+ Show component code

: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);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #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-dark));
    }
 
    #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-dark));
    }
 
    #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);
        }
 
         #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;
    }

---

+ Show theme code

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
 
@supports(display:grid) {
    :root {
     /* S-CSS-P Integration */
     /* If you're making a new CSS theme, please include the following three variables at minimum. */
     --theme-base: "black-highlighter";
     /* must be either "black-highlighter" or "sigma9" */
     --theme-id: "The-Foundation-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "The Foundation Theme";
     /* set this to your theme's full name */
     --body-font: 'Source Sans Pro', sans-serif;
     --header-font: 'Oswald', sans-serif;
     --title-font: 'Merriweather', serif;
 
     --header-title: "Nadace";
 
     --light-gray-monochrome: 200, 0, 5;
 
     --header-gradient-color-bottom: var(--dark-accent);
     --header-gradient-color-middle: var(--black-monochrome);
     --header-gradient-color-top: var(--black-monochrome);
 
     --background-gradient-color: var(--light-gray-monochrome);
     --swatch-topmenu-border-color: var(--black-monochrome);
     --swatch-topmenu-bg-color: var(--dark-accent);
 
     --gradient-topmenu: linear-gradient(to bottom,
     rgba(255, 255, 255, 0) 0,
     rgba(255, 255, 255, 0) var(--header-height-on-desktop),
     rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
     rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + .125rem),
     rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
     rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
     rgba(var(--swatch-topmenu-border-color), 0) 100%);
 
     --gradient-topmenu-mobile: linear-gradient(to bottom,
     rgba(var(--swatch-topmenu-border-color), 1) 0,
     rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
     rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - .125rem),
     rgba(var(--swatch-topmenu-bg-color), 0) calc(var(--topbar-height-on-mobile) - .125rem),
     rgba(var(--swatch-topmenu-border-color), 0) 3rem);
 
     --gradient-header: linear-gradient(to bottom,
     rgb(var(--header-gradient-color-bottom)) 0%,
     rgb(var(--header-gradient-color-middle)) 90%,
     rgb(var(--header-gradient-color-top)) 100%);
 
     --header-background-image-size: 100% var(--header-height-on-desktop);
     --header-height-on-desktop: 12.25rem;
     --header-height-on-mobile: 12.25rem;
     --topbar-height-on-mobile: 2.5rem;
 
     --header-h1-font-size: calc(var(--base-font-size) * 7);
     --max-font-size: 0.9375rem;
    }
 
    #top-bar {
     --mobile-topmenu-sidebar-button-color: var(--swatch-text-tertiary-color);
    }
 
    html,
    body {
     font-feature-settings: "onum"0;
     font-variant-numeric: tabular-nums;
    }
 
    body {
     --wght: 400;
     background-size: var(--header-background-image-size), 100% 14.25rem, 100% var(--background-gradient-distance);
     font-weight: 400;
    }
 
    #header h1 {
     text-transform: uppercase;
     letter-spacing: 0.2em;
    }
 
    #header h2 {
     display: none;
    }
 
    .danger-diamond a,
    .danger-diamond a:hover {
     box-shadow: initial !important;
     color: rgba(0, 0, 0, 0) !important;
    }
 
    #main-content {
     flex-basis: 100%;
    }
 
    #page-title,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
     --wght: 900;
     color: rgba(var(--light-gray-monochrome));
     font-family: var(--title-font);
     font-weight: 900;
    }
 
    hr {
     position: relative;
     height: 0.5em;
     overflow: hidden;
     border: initial;
     background-color: rgba(0, 0, 0, 0);
    }
 
    hr::before {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-attachment: fixed;
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme:the-foundation-theme/cons_circle.png');
     background-repeat: repeat;
     background-position: top center;
     background-size: 100vh;
     pointer-events: none;
     -webkit-clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
     clip-path: polygon(50% 10%, 100% 50%, 50% 90%, 0% 50%);
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
     margin: -0.15em;
     padding: 0.15em;
     transition:
     box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
     color: rgb(var(--gray-monochrome));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
     margin: -0.25em;
     padding: 0.3em 0.25em 0.2em 0.25em;
     box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
     color: rgb(var(--white-monochrome));
     text-decoration: none
    }
 
    #extra-div-3 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: var(--header-height-on-desktop);
     background: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-header-img.png');
     background-position: center center;
     pointer-events: none;
    }
 
    #header::before {
     content: none;
    }
 
    #login-status .printuser {
     --wght: 900;
     color: rgb(var(--swatch-text-light));
     font-weight: 900 !important;
    }
 
    #top-bar div.top-bar>ul>li,
    #top-bar div.mobile-top-bar>ul>li {
     --wght: 800;
     font-family: var(--title-font);
     font-weight: 800;
     text-transform: uppercase;
     isolation: isolate;
    }
 
    #top-bar div.top-bar>ul>li::before,
    #top-bar div.mobile-top-bar>ul>li>a::before {
     content: " ";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-size 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -webkit-animation-direction: reverse;
     animation-direction: reverse;
     opacity: 0;
     background:
     url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
     background-attachment: fixed;
     background-position: center center;
     background-size: 100vh;
     pointer-events: none;
     pointer-events: none;
    }
 
    #top-bar div.top-bar>ul>li:hover::before,
    #top-bar div.mobile-top-bar>ul>li>a:hover::before {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 1;
    }
 
    #top-bar div.top-bar>ul>li>a::before,
    #top-bar div.top-bar>ul>li>a::after {
     z-index: 1;
     background-color: rgba(var(--dark-gray-monochrome));
     pointer-events: none;
    }
 
    #side-bar {
        --swatch-border-color: rgb(var(--light-gray-monochrome));
        z-index: 10;
        top: 0;
        background-image:
            linear-gradient(to bottom,
                rgba(var(--swatch-menubg-dark-color), 1) 0%,
                rgba(var(--swatch-menubg-dark-color), 0.55) 100%),
            url("https://scp-wiki.wdfiles.com/local--files/theme:the-foundation-theme/cons_circle.png");
        transition:
            background-position 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,
            transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        background-repeat: no-repeat, no-repeat;
        background-position:
            -2.5rem center,
            calc(-100% + var(--sidebar-width-on-desktop)) center;
        background-size:
            cover,
            125vh;
        background-blend-mode:
            multiply,
            normal;
    }
 
    #side-bar:hover,
    #side-bar:active {
     background-color: rgb(var(--swatch-menubg-dark-color));
     background-position: center center, center center;
    }
 
    #side-bar:focus-within {
     background-color: rgb(var(--swatch-menubg-dark-color));
     background-position: center center, center center;
    }
 
    @media only screen and (max-width:56.25rem) {
     #side-bar:target {
     background-color: rgb(var(--swatch-menubg-dark-color));
     background-position: center center, center center;
     }
    }
 
    #side-bar .heading {
     position: relative;
     padding-top: 0.15em;
     padding-bottom: 0.25em;
     font-family: var(--title-font);
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
     margin: 0.15em 0;
    }
 
    .yui-navset .yui-nav {
     --wght: 600;
     font-family: var(--title-font);
     font-weight: 600;
    }
 
    .yui-navset .yui-nav a::before {
     background-color: transparent;
     background-image:
     radial-gradient(closest-side,
     rgba(var(--tabs-bg), 1),
     rgba(var(--tabs-bg), 0)),
     url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
     radial-gradient(closest-side,
     rgba(var(--tabs-bg), 1),
     rgba(var(--tabs-bg), 0));
     background-blend-mode: normal, overlay, normal;
     background-position: center center, center center;
     background-size: 100% 100%, 100vw, 100% 100%;
     pointer-events: none;
    }
 
    .yui-navset .yui-nav a:hover::before,
    .yui-navset .yui-nav a:active::before {
     background-color: transparent;
     background-image:
     radial-gradient(rgba(var(--tabs-hover-bg), 0),
     rgba(var(--tabs-hover-bg), 1)),
     url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
     radial-gradient(rgba(var(--tabs-hover-bg), 0),
     rgba(var(--tabs-hover-bg), 1));
 
    }
 
    .yui-navset .yui-nav .selected a::before,
    .yui-navset .yui-nav .selected:hover a::before,
    .yui-navset .yui-nav .selected:focus a::before,
    .yui-navset .yui-nav .selected:active a::before {
     background-color: transparent;
     background-image:
     radial-gradient(rgba(var(--tabs-selected-bg), 0),
     rgba(var(--tabs-selected-bg), 1)),
     url("https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png"),
     radial-gradient(rgba(var(--tabs-selected-bg), 0),
     rgba(var(--tabs-selected-bg), 1));
    }
 
    .yui-navset .yui-nav li a,
    .yui-navset .yui-nav li a em,
    .yui-navset .yui-nav .selected a,
    .yui-navset .yui-nav .selected a em {
     background-color: transparent !important;
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-nav .selected {
     background-color: rgb(var(--swatch-background));
    }
 
    table.wiki-content-table {
     border-collapse: collapse;
    }
 
    table.wiki-content-table th {
     position: relative;
     border-color: rgb(var(--light-gray-monochrome)) !important;
     background-attachment: fixed;
     background-image: url('https://scp-wiki.wikidot.com/local--files/theme:the-foundation-theme/foundation-circles-bg.png');
     background-position: top center;
     background-size: 100vh;
     font-family: var(--title-font);
     font-weight: 600;
     text-transform: uppercase;
    }
 
    @media only screen and (max-width: 56.25rem) {
     #header h1 a {
     text-align: center;
     font-size: 3.5em;
     }
 
     #top-bar {
     font-size: calc(var(--base-font-size) * 0.8);
     }
 
     #top-bar>div.mobile-top-bar>div.open-menu {
     font-size: calc(var(--base-font-size) * 0.65);
     }
 
     #top-bar div.mobile-top-bar>ul>li>a {
     letter-spacing: 0;
     }
 
     #top-bar>div.top-bar>ul>li:last-of-type>ul,
     #top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
     left: 50%;
     }
 
     #top-bar div.mobile-top-bar>ul>li>ul>li>a {
     white-space: pre-wrap;
     }
 
     #main-content {
     margin-top: 2.1em;
     }
    }
}
 
@-webkit-keyframes fade {
    0% {
     opacity: 1;
    }
 
    100% {
     opacity: 0;
    }
}
 
@keyframes fade {
    0% {
     opacity: 1;
    }
 
    100% {
     opacity: 0;
    }
}

---

+ Show component code

#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-light-color);
 
    /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
    --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
    --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
    /* ===SIDE-BAR ELEMENTS=== */
 
     /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0,0,0,0;
    --sidebar-media-bg-color: 0,0,0,0;
 
     /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);
 
     /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtest-color: var(--swatch-text-tertiary-color);
 
    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);
 
     /* ===SIDEBAR COLLAPSIBLES=== */
     /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
     /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);
 
     /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);
 
    scrollbar-color:
     rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
     rgba(var(--swatch-secondary-color), 0.05); /* Track */
 
    border-color: rgba(var(--swatch-secondary-color), 0.4);
}
 
/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
     rgb(var(--swatch-primary-darker), 1) /* Thumb */
     rgb(var(--swatch-menubg-dark-color), 1); /* Track */
}
 
#side-bar:focus-within {
    scrollbar-color:
     rgb(var(--swatch-primary-darker), 1) /* Thumb */
     rgb(var(--swatch-menubg-color), 1); /* Track */
}
 
#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}
 
#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}
 
#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color),0.75) !important;
}
 
#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}
 
#side-bar .side-block.media a img {
    filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color),0));
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}
 
#side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
    filter: invert(1);
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
    background-color: rgb(var(--swatch-menubg-dark-color));
}
 
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
    mix-blend-mode: lighten;
}

<html>
    <head>
    </head>
    <body>
     <script type="text/javascript">
     function sendStyle() {
         try {
             window.parent.window.interwikiFrame.bhlDark();
         } catch(e) {}
     }
     sendStyle();
     </script>
    </body>
</html>