djkaktus's Proposal III

 

djkaktus's Proposal III - The Way It Ends

---

▸ More by this Author ◂

---

{$comments2}

F.A.Q.

{$doesthisfixthebug}

---

---

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

@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-highlighte";
        /* must be either "nuscp" or "sigma9" */
        --theme-id: "Extra-BHL-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "Extra Black Highlighter Theme";
        /* set this to your theme's full name */
        /* New Vars */
        --swatch-menubg-extra-dark-color: 30, 30, 32;
 
        /* Old Vars */
        --black-monochrome: 20, 22, 24;
        --light-pale-gray-monochrome: 250, 250, 250;
        --bright-accent: var(--pale-accent);
        /* Primary Theme Colors */
        --swatch-background: var(--swatch-menubg-black-color);
        /* Background and Header Colors */
        --background-gradient-color: 10, 10, 10;
        --header-gradient-color-bottom: var(--medium-accent);
        --header-gradient-color-middle: var(--swatch-menubg-black-color);
        --header-gradient-color-top: var(--swatch-menubg-black-color);
        /* Primary Text Colors */
        --swatch-text-light: var(--light-pale-gray-monochrome);
        --swatch-text-general: var(--swatch-text-light);
        /* Primary Menu Colors */
        --swatch-menubg-color: var(--swatch-menubg-black-color);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        /* 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-dark-color);
        --swatch-alternate-color: var(--swatch-primary);
 
        /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
        --swatch-text-secondary-color: var(--swatch-menutxt-light-color);
        --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
        /* Primary Header Colors */
        --swatch-topmenu-border-color: var(--swatch-menubg-black-color);
        --swatch-topmenu-bg-color: var(--swatch-menubg-extra-dark-color);
 
        --rating-module-text-color: var(--swatch-text-general);
        --rating-module-button-color: var(--swatch-text-general);
        --rating-module-button-cancel-color: 100, 100, 100;
 
        --ui-wght: 500;
        --ui-hvr-wght: 600;
 
        --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%);
 
        --diagonal-stripes: repeating-linear-gradient(45deg,
                hsla(0, 0%, 100%, 0),
                hsla(0, 0%, 100%, 0) 0.25vh,
                rgba(var(--swatch-menubg-extra-dark-color), 0.1) 0.35vh,
                rgba(var(--swatch-menubg-extra-dark-color), 0.2) 0.5vh);
    }
 
    #main-content {
        --pagetags-title-text: var(--swatch-text-secondary-color);
    }
 
    #header {
        --search-icon-color: var(--swatch-text-tertiary-color);
    }
 
    #top-bar {
        /* ===DROPDOWN MENU=== */
        --dropdown-bg-color: var(--swatch-menubg-extra-dark-color), 0.9;
    }
 
    ::-moz-selection {
        background: rgb(var(--swatch-primary-darkest));
    }
 
    ::selection {
        background: rgb(var(--swatch-primary-darkest));
    }
 
    body {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
 
    #search-top-box-input {
        background-color: rgb(var(--swatch-menubg-extra-dark-color));
    }
 
    #account-options {
        background: var(--gradient-header);
    }
 
    #login-status {
        color: rgba(var(--swatch-menutxt-light-color), 0.5);
    }
 
    #login-status ul a {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    span.printuser {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    .page-rate-widget-box {
        background: linear-gradient(to bottom,
                rgba(var(--header-gradient-color-bottom), 0.5) 0%,
                rgba(var(--header-gradient-color-middle), 0.15) 90%,
                rgba(var(--header-gradient-color-top), 0.15) 100%);
        border: 0.0625rem solid rgba(var(--swatch-menubg-medium-color), 0.25);
    }
 
    #top-bar div.mobile-top-bar>ul>li>ul>li>a,
    #top-bar div.top-bar>ul>li>ul>li>a {
        box-shadow: inset 0 0 0 0.0625rem rgba(var(--swatch-menubg-medium-color), 0.15);
    }
 
    #side-bar .heading p,
    #side-bar .collapsible-block .collapsible-block-link {
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    blockquote,
    .blockquote,
    .code {
        --swatch-border-color: var(--swatch-menubg-light-color);
        border-color: rgba(var(--swatch-border-color), 0.25);
    }
 
    .yui-navset .yui-nav,
    .yui-navset .yui-navset-top .yui-nav {
        --box-shadow: rgb(var(--swatch-primary-darkest));
        border-color: rgb(var(--swatch-primary-darkest));
    }
 
    .yui-navset .yui-nav li,
    .yui-navset .yui-navset-top .yui-nav li {
        --box-shadow: rgb(var(--swatch-primary-darkest));
    }
 
    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
        background-color: rgb(var(--swatch-menubg-extra-dark-color));
        color: rgb(var(--swatch-text-general));
    }
 
    .yui-navset .yui-nav .selected,
    .yui-navset .yui-navset-top .yui-nav .selected {
        background-color: rgb(var(--swatch-primary-darkest));
    }
 
    table.wiki-content-table th {
        background: rgb(var(--swatch-secondary-color));
    }
 
    table.wiki-content-table th,
    table.wiki-content-table tr {
        border: 0.0625rem solid rgba(var(--swatch-menubg-medium-color), 0.25) !important;
    }
 
    table.wiki-content-table td {
        border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25) !important;
    }
 
    textarea,
    input.text,
    input.checkbox,
    div.note,
    #lock-info {
        border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25);
        background-color: rgb(var(--swatch-menubg-extra-dark-color));
        color: rgb(var(--swatch-text-light));
    }
 
    .code pre span[class*="hl-"] {
        -webkit-filter: invert(1) hue-rotate(180deg);
        filter: invert(1) hue-rotate(180deg);
    }
 
    .owindow .modal-body img {
        background-color: transparent !important;
    }
 
    .hovertip {
        border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25);
        background-color: rgb(var(--swatch-menubg-extra-dark-color)) !important;
        color: rgb(var(--swatch-text-light)) !important;
    }
 
    #main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]), 
    #main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]) {
        color: rgb(var(--swatch-primary-secondary-color));
    }
 
    #footer,
    #license-area {
        --link-color: var(--swatch-text-tertiary-color);
        --hover-link-color: var(--swatch-text-tertiary-color);
        --visited-link-color: var(--swatch-text-tertiary-color);
        color: rgb(var(--swatch-text-general));
    }
 
    #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;
    }
 
    div[id*="page-options-bottom"]>a::after {
        background-color: rgb(var(--swatch-text-secondary-color));
    }
 
    /* ===BUTTONS=== */
    div[id*="page-options-bottom"]>a::after {
        background-color: rgb(var(--swatch-text-tertiary-color));
    }
}

BY ORDER OF THE OVERSEER COUNCIL

The following file is Level 6/001 Classified.
Unauthorized access is forbidden.

001

Item#: 001

Level6

Containment Class:

esoteric

Secondary Class:

principalis

Disruption Class:

amida

Risk Class:

notice

link to memo

---

All Things Must End

---

Special Containment Procedures: It is the imperative of the Overseer Council to establish containment of SCP-001.

Description: To know the nature of SCP-001 is to know the nature of the Foundation.

For more information, see Document 001-GOI.01-Operatus.

Addendum 001.1: Attached Documentation

Enter Decryption Key

The first man stood alone
on the barren field
and in the distance he saw
the locked gate beyond which
his greatest shame was kept.

He turned to the snake
who writhed on its belly
like a worm
and cursed it for its treachery.

"You tricked me," the man said
"you led my hand astray
and now we are damned for it."

The snake sighed.
"I gave you knowledge," it said
"and with that knowledge
you made the choice you made.
I could not make it for you."

The man cried out
"All the same, trusting you was
my greatest mistake."

"No," the snake said
"Your greatest mistake was
believing you had a choice at all."


- — -

Access Document 001-GOI.01-Operatus