Theme 7

---

+ 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 code

/* ========= =
    Wikidot Theme [untitled]
    Created by iti119
    CC BY-SA 3.0
= ========= */
 
@import url('http://1119s.wdfiles.com/local--code_/side-icons/1');
 
:root {
    --bright-accent: 252,232,128;
    --dark-accent: 204,170,68;
    --body: 60,68,80;
    --black: 20,20,28;
    --white: 248,248,255;
    --dark-gray: 68, 68, 68;
    --light-gray: 136, 136, 136;
    --pale-gray: 204, 204, 204;
    --alt-accent: 119,216,192;
}
 
/* == Body === */
body#html-body {
    background: rgb(var(--body));
    color: rgb(var(--white));
}
 
/* === Header === */
div#container-wrap {
    background:
        repeating-linear-gradient(45deg, rgb(var(--black)) 0 4px, rgb(var(--black),0.8) 5px, rgb(var(--black)) 6px) 0 0 / 100% 161px no-repeat
    ;
}
#header {
}
 
/* === Side-Bar === */
#side-bar {
    padding: 5em 1em;
    direction: rtl;
}
#side-bar .side-block,
#side-bar .scpnet-interwiki-wrapper {
    border-color: rgb(var(--dark-accent));
    background: rgb(var(--black));
    box-shadow: rgb(var(--dark-accent),0.5) 0 2px 6px;
    direction: ltr;
}
#side-bar .heading,
#side-bar .collapsible-block-unfolded-link,
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link {
    border-color: rgb(var(--dark-accent));
    color: rgb(var(--dark-accent));
}
#side-bar .collapsible-block-unfolded-link a.collapsible-block-link:hover {
    color: rgb(var(--bright-accent));
}
.side-block .menu-item img + a::before,
.side-block ul.menu-item li::before,
.side-block .collapsible-block-folded a.collapsible-block-link::before {
    filter: hue-rotate(75deg) saturate(75) !important;
}
@media (max-width: 767px) {
    #side-bar:target {
        background-color: rgb(var(--dark-gray));
    }
    .open-menu a {
        border-color: rgb(var(--bright-accent)) !important;
        background: rgb(var(--body)) !important;
        color: rgb(var(--bright-accent)) !important;
        line-height: 30px;
    }
    .open-menu a {
        box-shadow: rgb(var(--dark-accent)) 0px 0px 20px 3px;
    }
}
 
/* === Main-Content === */
/* Page-Content */
a, a:visited {
    color: rgb(var(--bright-accent));
}
a.newpage {
    color: rgb(var(--alt-accent));
}
#page-title,
h1 {
    color: rgb(var(--bright-accent));
}
 
/* Box */
 
/* Scrollbar */
::-webkit-scrollbar-track {
    background-color: rgb(var(--black),0.5);
}
::-webkit-scrollbar-thumb {
    background-color: rgb(var(--bright-accent),1);
}

Luna--bright-accent(252,232,128) / #FCE880

Sol--dark-accent(204,170,68) / #CA4

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

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

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

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

Evening--body(60,68,80) / #3c4450

Shade--black(20,20,28) / #14141C

Ghost--white(248,248,255) / #F8F8FF

Shadow--dark-gray(68,68,68) / #444

Cloud--light-gray(136,136,136) / #888

Daze--pale-gray(204,204,204) / #CCC

Stella--alt-accent(119,216,192) / #77D8C0

{$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}