BHL Dark Sidebar

Link to article: BHL Dark Sidebar.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
div.blockquote {
    padding-top: 0.5em;
}
div.blockquote tt {
    margin: 0.5em 1em 1em 1em;
    display: block;
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-monochrome));
    padding: 0.5em;
}

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Abhl-dark-sidebar/1");

(none)

:scp-wiki:component:bhl-dark-sidebar [info]

```
blockquote
```

[[iftags +component]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
div.blockquote {
    padding-top: 0.5em;
}
div.blockquote tt {
    margin: 0.5em 1em 1em 1em;
    display: block;
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-monochrome));
    padding: 0.5em;
}
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]

[[=]]
[[module Rate]]
[[div_ class="blockquote"]]

Pretty self explanatory.
For anyone who //really// wants the dark sidebar from the O.G. BHL on their articles.
Just add this include **AFTER** the BHL include:
{{[[include :scp-wiki:component:bhl-dark-sidebar]]}}
[[/div]]
[[/=]]
-----
[[collapsible show="+ Show component code" hide="- Hide component code"]]

[[code type="css"]]
#interwiki, 
#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-subtext-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 .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));
}

[[/code]]
[[/collapsible]]
[[/iftags]]
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Abhl-dark-sidebar/1");
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=4
| theme=https://scp-wiki.wdfiles.com/local--code/component%3Abhl-dark-sidebar/1
]]

BHL Dark Sidebar

Module Styles

Inline Styles

Includes

CSS Classes

Page Source