Black Highlighter Theme

Link to article: Black Highlighter Theme.

@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");

a[rel="license"]::after {
    content: ".";
}

.scp-image-block.block-right {
    padding: 1em !important;
    background: var(--gradient-header);
}

.scp-image-block img {
    padding-bottom: 1em;
}

.status {
    font-family: var(--title-font);
    font-weight: 900;
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
}

.status span.active {
    color: rgb(var(--white-monochrome));
    margin-left: 0.5rem;
    -webkit-box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
       -moz-box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
            box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
}

.fonts-display {
    font-size: 1.25em;
}

.title-font {
    font-family: var(--title-font);
    font-weight: 700;
}

.header-font {
    font-family: var(--title-font);
    font-weight: 900;
}

.UI-font {
    font-family: var(--UI-font);
}

.mono-font {
    --MONO: 1;
    --CASL: 0;
    --CRSV: 0;
    font-family: var(--mono-font);
}

border: 1px solid #ddd; padding: 1em; text-align: center;

```
text-align: center;
```
```
text-align: center;
```

```
status
```
```
active
```
```
code
```
```
blockquote
```
```
code
```
```
code
```
```
code
```
```
code
```
```
fonts-display
```
```
title-font
```
```
header-font
```
```
UI-font
```
```
mono-font
```

[[module CSS]]
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");

a[rel="license"]::after {
    content: ".";
}
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css
]]

[[iftags +theme -nobhl]]
[[module css]]
.scp-image-block.block-right {
    padding: 1em !important;
    background: var(--gradient-header);
}

.scp-image-block img {
    padding-bottom: 1em;
}

.status {
    font-family: var(--title-font);
    font-weight: 900;
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
}

.status span.active {
    color: rgb(var(--white-monochrome));
    margin-left: 0.5rem;
    -webkit-box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
       -moz-box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
            box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	-0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
    	0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
}

.fonts-display {
    font-size: 1.25em;
}

.title-font {
    font-family: var(--title-font);
    font-weight: 700;
}

.header-font {
    font-family: var(--title-font);
    font-weight: 900;
}

.UI-font {
    font-family: var(--UI-font);
}

.mono-font {
    --MONO: 1;
    --CASL: 0;
    --CRSV: 0;
    font-family: var(--mono-font);
}
[[/module]]
[[>]]
[[module Rate]]
[[/>]]
[[image https://scp-wiki.wdfiles.com/local--files/component%3Ablack-highlighter-theme-dev/black-highlighter-logo.svg]]

[[=]]
[[div_ class="status"]]
This component is currently [[span class="active"]]ACTIVE[[/span]]
[[/div]]
[[/=]]
 _
[[div style="border: 1px solid #ddd; padding: 1em; text-align: center;"]]

+ Usage

On any wiki:

[[div class="code" style="text-align: center;"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
[[/div]]

[[div class="blockquote" style="text-align: center;"]]
++ [[[black-highlighter-themes | ]]]
------
++ Optional Addons
+++ [[[component:bhl-dark-sidebar|Dark Sidebar]]]
[[div class="code"]]
@@[[include :scp-wiki:component:bhl-dark-sidebar]]@@
[[/div]]

+++ [[[component:collapsible-sidebar|Collapsible Sidebar]]]
[[div class="code"]]
@@[[include :scp-wiki:component:collapsible-sidebar]]@@
[[/div]]

+++ [[[component:toggle-sidebar-bhl|Toggle Sidebar]]]
[[div class="code"]]
@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@
[[/div]]

+++ [[[component:centered-header-bhl|Centered Header]]]
[[div class="code"]]
@@[[include :scp-wiki:component:centered-header-bhl]]@@
[[/div]]
[[/div]]

[[/div]]



+ What this is

A component that applies the [http://scptestwiki.wikidot.com/ Black Highlighter] theme to your article.

This component will apply a stable version of the Black Highlighter theme, but it might break sometimes as it's updated. 

+ Reporting problems

If you've got a Github account, create an Issue [https://github.com/Nu-SCPTheme/Black-Highlighter/issues here] detailing your problem (whether it's technical, or aesthetic, or whatever).

If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly send a PM to preferably [[*user Woedenaz]] or, if he does not respond, [[*user Croquembouche]].
-----

[[=]]
+ Theme Colors
[[/=]]

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Payne's Grey
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Rosewood
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=White Smoke
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Buccaneer
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Maroon
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango Tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

+ Examples

[[include component:image-block name=https://cdn.scpwiki.com/theme/en/black-highlighter/img/logo.svg | caption=SCP Foundation Logo | width=200px]]

A horizontal rule can be created with 5 hyphens "@@-----@@" and extends across the whole page if it's not placed inside anything (e.g. 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

[[collapsible show="+ Titles" hide="- Titles"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab This empty tab has a really long name for some odd reason. I wonder why? It is very strange.]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

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

[[=]]
[[div_ class="fonts-display"]]
The body, [[span class="title-font"]]title,[[/span]] and [[span class="header-font"]]header[[/span]] font is [https://rsms.me/inter/ Inter].
[[span class="UI-font"]]The UI font is [https://www.paratype.com/fonts/pt/pt-root-ui PT Root UI].[[/span]] 
[[span class="mono-font"]]The monospaced font is [https://www.recursive.design/ Recursive].[[/span]]
[[/div]]

All fonts are licensed under the [http://scripts.sil.org/OFL SIL Open Font License, Version 1.1]
[[/=]]

-----
[[/iftags]]

Black Highlighter Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source