Mothcide

+ Show component code

@supports(display: grid) {
    :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: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
            z-index: -1;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            transition:
                left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            transition:
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: flex;
            flex-direction: row;
            width: calc(100vw - (100vw - 100%));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: var(--body-width-on-desktop, 45.75rem);
            max-width: var(--body-width-on-desktop, 45.75rem);
            margin: 0 auto;
        }
 
        #page-content {
            max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
        }
 
        @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    transition:
                        left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
                        background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

---

+ Show component code

@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-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);
            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;
    }
}

---

+ 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-dark-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:-webkit-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a:-moz-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#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[href*="tiktok"]::before,
#side-bar .side-block.media a[href*="tiktok"]::after {
    transition:
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::before,
#side-bar .side-block.media a[href*="tiktok"]:active::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}
 
#side-bar .side-block.media a[href*="tiktok"]::after {
    --clip-path:
        polygon(0 0,
            0 0,
            0 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:hover::after,
#side-bar .side-block.media a[href*="tiktok"]:active::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a[href*="tiktok"]:focus-within::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}
 
#side-bar .side-block.media a img {
    -webkit-filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
            filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
    transition: -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-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 {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}
 
#side-bar .side-block.media a:focus-within img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            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)) {
    -webkit-filter: invert(1);
            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>

+ Show Source

/*
   Unity Theme
   [2021 Wikidot Theme]
   by Azamo
 
   Inspired by SCP: Unity
 
   Tag redesign by Rounderhouse
   Tab animation by Croquembouche
 
   Borrows elements from:
 
   JAKSTYLE by JakdragonX
   Present Malice by JackalRelated
 
*/
 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "unity";
   --theme-name: "Unity";
 
    --header-subtitle: "SECURE • CONTAIN • PROTECT";
    --header-title: "SCP FOUNDATION";
    --logo-image: url("http://scptestwiki.wikidot.com/local--files/theme:unity/UNITYv3.png");
    --header-font: 'Josefin Sans', sans-serif;
    --title-font: 'Josefin Sans', sans-serif;
    --body-font: 'DM Sans', sans-serif;
 
    --sidebar-internal-border-thickness: 0rem;
    --tab-border-color: transparent;
 
    --background-gradient-color: 144, 148, 158;
    --background-gradient-distance: 55rem;
 
    --unity: 0, 4, 21, 1;
    --bg-image: http://scptestwiki.wikidot.com/local--files/theme:unity/REGIMEN.png;
    --logo-opacity: 30%;
 
    --gray-monochrome: 38, 38, 38;
    --dark-gray-monochrome: 5, 5, 7;
 
    --medium-accent: var(--unity);
    --pale-accent: 79, 79, 79;
    --bright-accent: 1, 1, 1;
    --dark-accent: 20, 20, 24;
 
    --toggle-roundness: 0%;
    --toggle-border-width: 0px;
    --barColour: var(--unity);
    --fnColor: rgb(29, 29, 29);
 
    --diagonal-stripes: linear-gradient(transparent 0);
 
     --header-height-on-desktop: 21rem;
     --header-height-on-mobile: 21rem;
 
    --header-gradient-color-bottom: var(--unity);
    --header-gradient-color-middle: var(--unity);
    --header-gradient-color-top: var(--unity);
 
     --swatch-topmenu-border-color: 0, 0, 0;
     --swatch-topmenu-bg-color: 10, 10, 10;
 
}
 
/* Ayers Info Bar Integration */
 
.info-container .collapsible-block-unfolded {
border: 1px dotted slategrey;
}
 
/* BetterFootnotes Integration */
 
.fncon {
background: rgb(38, 38, 38);
color: #fefefe;
border: 2px solid rgb(20, 20, 20);
}
 
/* Header & Topbar */
 
.top-bar {
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
background: transparent;
}
 
#skrollr-body {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='250' preserveAspectRatio='none' viewBox='0 0 1440 250'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3cpath d='M39 250L289 0L556 0L306 250z' fill='url(%23SvgjsLinearGradient1042)'%3e%3c/path%3e%3cpath d='M278.6 250L528.6 0L606.6 0L356.6 250z' fill='url(%23SvgjsLinearGradient1042)'%3e%3c/path%3e%3cpath d='M515.2 250L765.2 0L810.2 0L560.2 250z' fill='url(%23SvgjsLinearGradient1042)'%3e%3c/path%3e%3cpath d='M738.8000000000001 250L988.8000000000001 0L1209.3000000000002 0L959.3000000000001 250z' fill='url(%23SvgjsLinearGradient1042)'%3e%3c/path%3e%3cpath d='M1420 250L1170 0L1041 0L1291 250z' fill='url(%23SvgjsLinearGradient1043)'%3e%3c/path%3e%3cpath d='M1183.4 250L933.4000000000001 0L810.4000000000001 0L1060.4 250z' fill='url(%23SvgjsLinearGradient1043)'%3e%3c/path%3e%3cpath d='M916.8 250L666.8 0L456.79999999999995 0L706.8 250z' fill='url(%23SvgjsLinearGradient1043)'%3e%3c/path%3e%3cpath d='M715.1999999999999 250L465.19999999999993 0L346.69999999999993 0L596.6999999999999 250z' fill='url(%23SvgjsLinearGradient1043)'%3e%3c/path%3e%3cpath d='M1280.4913658167973 250L1440 90.49136581679721L1440 250z' fill='url(%23SvgjsLinearGradient1042)'%3e%3c/path%3e%3cpath d='M0 250L159.5086341832028 250L 0 90.49136581679721z' fill='url(%23SvgjsLinearGradient1043)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='250' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='100%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='rgba(57%2c 57%2c 57%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(57%2c 57%2c 57%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='rgba(57%2c 57%2c 57%2c 0.2)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='rgba(57%2c 57%2c 57%2c 0.2)' offset='0.66'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
background-size: cover;
background-position: 0, 0;
background-repeat: repeat;
height: 21rem;
z-index: -10;
}
 
#header::before {
top: 4.1rem;
-webkit-background-size: auto 13.5rem;
-moz-background-size: auto 13.5rem;
-o-background-size: auto 13.5rem;
background-size: auto 13.5rem;
opacity: var(--logo-opacity);
z-index: 0;
}
 
#header h2 span {
font-family: 'Josefin Sans', sans-serif;
font-weight: 200;
font-size: 110%;
}
 
#page-title {
text-align: center;
font-size: 190%;
border-bottom: dotted 1px slategrey;
margin-bottom: 30px;
}
 
/* Login & Search */
 
#search-top-box input.empty {
font-weight: 300;
font-style: italic;
color: #858585;
font-size: 80%;
}
 
/* Sidebar */
 
div#side-bar {
text-transform: uppercase;
font-weight: 500;
font-family: 'Josefin Sans', sans-serif;
background: rgb(20,20,20);
background: linear-gradient(0deg, rgba(var(--unity)) 0%, rgba(var(--unity)) 100%);
box-shadow: -8px 0px 50px -9px #000000;
}
 
#side-bar:hover::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
 
#side-bar:hover::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.7);
}
 
/* Footnotes */
 
.footnote-footer::selection {
background-color: rgb(90, 90, 90);
}
 
.footnotes-footer {
background: rgb(var(--gray-monochrome));
box-shadow : 0 0 7px rgba(0 , 0 , 0 , 0.3);
color: #fefefe;
border-left: 2px solid rgb(10, 10, 10);
border-right: 2px solid rgb(10, 10, 10);
font-size: 90%;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
margin-top: 65px;
}
 
.footnotes-footer a {
color: rgb(220, 220, 220);
}
 
.footnotes-footer > .title {
font-size: 100%;
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
}
 
/* Image Block */
 
.scp-image-caption {
color: #ffffff;
background: rgb(38, 38, 38) !important;
}
.scp-image-block {
border: solid rgb(var(--gray-monochrome)) 5px;
box-shadow : 0 0 7px rgba(0 , 0 , 0 , 0.3);
}
 
.scp-image-caption a {
color: rgb(230, 230, 230);
}
 
/* Misc */
 
div#action-area > h1 {
text-transform: uppercase;
}
 
.page-options-bottom {
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 90%;
border-radius: 0px;
}
 
a#edit-button.btn.btn-default, a#pagerate-button.btn.btn-default, a#tags-button.btn.btn-default, a#discuss-button.btn.btn-default, a#history-button.btn.btn-default, a#files-button.btn.btn-default, a#print-button.btn.btn-default, a#site-tools-button.btn.btn-default, a#more-options-button.btn.btn-default, a#edit-sections-button.btn.btn-default, a#edit-append-button.btn.btn-default, a#edit-meta-button.btn.btn-default, a#watchers-button.btn.btn-default, a#backlinks-button.btn.btn-default, a#view-source-button.btn.btn-default, a#parent-page-button.btn.btn-default, a#page-block-button.btn.btn-default, a#rename-move-button.btn.btn-default, a#delete-button.btn.btn-default {
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 90%;
border-radius: 0px;
}
 
input#edit-cancel-button.btn.btn-danger, input#edit-diff-button.btn.btn-default, input#edit-preview-button.btn.btn-default, input#edit-save-draft-button.btn.btn-default, input#edit-save-continue-button.btn.btn-info, input#edit-save-button.btn.btn-primary {
text-transform: uppercase;
font-family: 'Josefin Sans', sans-serif;
font-size: 90%;
padding: 6px;
border-radius: 0px;
}
 
blockquote, .blockquote, div.blockquote {
border: none;
background: rgb(245, 245, 245);
box-shadow : 0 0 3px rgba(0 , 0 , 0 , 0.3);
}
 
hr {
background: linear-gradient(90deg, rgba(35,35,35,0) 0%, rgba(35,35,35,0.75) 25%, rgba(35,35,35,1) 50%, rgba(35,35,35,0.7455357142857143) 75%, rgba(35,35,35,0) 100%);
border: none;
height: 2px;
}
 
.hovertip {
max-width: 410px;
background: rgb(var(--gray-monochrome)) !important;
box-shadow: 0 0 7px rgba(0 , 0 , 0 , 0.3);
color: #fefefe;
font-size: 85%;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
margin-top: 65px;
border: none;
outline: none;
}
 
.hovertip a {
color: grey;
}
 
.avatar-hover {
display: none !important;
}
 
form#edit-page-form {
border-radius: 0px;
padding: 30px;
}
 
div.anom-bar div.danger-diamond a {
color: transparent;
}
 
.code {
padding: 25px;
border: none;
box-shadow: 0 0 7px rgba(0 , 0 , 0 , 0.3);
}
 
.page-source::selection {
background-color: rgb(90, 90, 90);
}
 
.page-source {
background: rgb(var(--gray-monochrome));
color: #fefefe;
padding: 25px;
font-family: var(--mono-font);
border: none;
box-shadow: 0 0 7px rgba(0 , 0 , 0 , 0.3);
font-size: 90%;
}
 
.page-source a {
color: #b6d6d4;
}
 
a.collapsible-block-link {
font-weight: bold;
text-decoration: none;
}
 
#who-rated-page-area > h2 {
text-transform: uppercase;
}
 
#who-rated-page-area > div {
background: rgb(var(--gray-monochrome));
color: #fefefe;
font-size: 90%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
box-shadow : 0 0 7px rgba(0 , 0 , 0 , 0.3);
}
 
#who-rated-page-area > div a {
color: #fefefe;
}
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]) {
        padding: 0.15em;
        margin: -0.15em;
        color: rgb(var(--gray-monochrome));
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        -webkit-box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
        -moz-box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
        box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--light-gray-monochrome), 1);
        -webkit-transition:
            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),
            -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition:
            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),
            -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-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);
        -moz-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),
            -moz-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        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);
        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),
            -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
            -moz-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
 
    #page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href="/classification-committee-memo"]):hover {
        padding: 0.3em 0.25em 0.2em 0.25em;
        margin: -0.25em;
        -webkit-box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
        -moz-box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
        box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent), 1);
        text-decoration: none;
        color: rgb(var(--white-monochrome))
    }
 
#page-content a:not(a.collapsible-block-link):hover {
text-decoration: none !important;
}
 
#page-content a {
font-weight: bold;
}
 
.code-example {
width: fit-content;
background: rgb(var(--gray-monochrome));
color: #fefefe;
padding-left: 19px;
padding-right: 19px;
padding-top: 3px;
padding-bottom: 3px;
font-family: var(--mono-font);
box-shadow : 0 0 7px rgba(0 , 0 , 0 , 0.3);
font-size: 90%;
}
 
.code-example::selection {
background: rgb(90, 90, 90) !important;
}
 
/* Tags */
 
#main-content .page-tags {
border-top: 2px solid rgba(var(--unity));
}
 
#main-content .page-tags a {
    display: inline-block;
    height: 0.8125rem;
    line-height: 13px;
    line-height: 0.8125rem;
    font-size: 11px;
    font-size: 0.6875rem;
    background: rgb(48, 48, 52);
    background: rgb(var(--swatch-menubg-dark-color, 48, 48, 52));
    color: rgb(252, 252, 22);
    color: rgb(var(--swatch-menutxt-light-color, 252, 252, 252));
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin: 0 0 .5rem .75rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 0;
}
 
#main-content .page-tags a:before {
    top: -0.1875rem;
    left: -0.625rem;
    width: 0;
    height: 0;
    border-color:
     transparent
     rgb(48, 48, 52)
     transparent
     transparent;
    border-color:
     transparent
     rgb(var(--swatch-menubg-dark-color,  48, 48, 52))
     transparent
     transparent;
    border-style: solid;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    padding: 0 0.0625rem 0.1875rem;
}
 
#main-content .page-tags a:before,
#main-content .page-tags a:after {
    content: "";
    float: left;
    position: relative;
}
 
#main-content .page-tags a:after {
    --box-shadow: rgb(var(--swatch-menubg-dark-color,  48, 48, 52));
    top: 0.28125rem;
    left: -0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 0.125rem;
    background-color: rgb(252, 252, 252);
    background-color: rgb(var(--swatch-background, 252, 252, 252));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(48, 48, 52);
    box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
}
 
.page-tags span {
    border-top: .5rem solid transparent;
}
 
/* Tabs */
 
.yui-navset .yui-content {
background: none;
}
 
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
border: none;
border-top: none;
}
 
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li { 
box-shadow: none;
}
 
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav li a em {
text-decoration: none;
}
 
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav hover a {
border-color: rgb(var(--dark-accent));
text-decoration: none;
}
 
ul.yui-nav a {
font-family: 'Josefin Sans', sans-serif;
padding: 3.5px;
color: #fefefe;
}
 
ul.yui-nav {
background: rgb(var(--gray-monochrome));
color: #fefefe;
}
 
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/* Tables */
 
table.wiki-content-table th {
background: rgba(var(--unity));
}

what's a good starting format that would work for this theme?

mothman is some prometheus labs engineered species that can fly and siphon EVE from magic-users. originally used by prometheus' biology department as a bodyguard or something. when prometheus fell through and foundation bought out portions of it, they basically injected mothmen with steroids and made them magic killing machines. they hunt magic users and manipulate probability to put them in situations where they need to use their magic to defend themselves, where the mothman then swoops down and siphons all of their eve or something through the spellcasting, killing them.

genocide™