Empty Office Theme

This component is currently ACTIVE

Usage

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]

black-highlighter-themes

---

Optional Addons

Dark Sidebar

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

Collapsible Sidebar

[[include :scp-wiki:component:collapsible-sidebar]]

Toggle Sidebar

[[include :scp-wiki:component:toggle-sidebar-bhl]]

Centered Header

[[include :scp-wiki:component:centered-header-bhl]]

What this is

A component that applies the 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 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, either join the #black-highlighter channel on SkipIRC, or send a PM to Woedenaz or Croquembouche.

---

Theme Colors

Payne's Grey--gray-monochrome(66, 66, 72)

Rosewood--bright-accent(133, 0, 5)

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

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

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

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

Alto--very-light-gray-monochrome(215, 215, 215)

White Smoke--pale-gray-monochrome(244, 244, 244)

Bastille--dark-gray-monochrome(48, 48, 52)

Buccaneer--medium-accent(100, 46, 44)

Maroon--dark-accent(100, 3, 15)

Mango Tango--newpage-color(221, 102, 17)

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

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

Examples

SCP Foundation Logo

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

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

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.

This empty tab has a really long name for some odd reason. I wonder why? It is very strange.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

The body font is Raleway.
The header and title font is Poppins.
The monospace font is Recursive.

---

Hello World!

Include this CSS on your page by adding the following code:

[[include :sekiyotest2:component:emptyofficetheme]]

 @import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700');
 
@supports(--css: variables) {
 
:root {
    /* Typefaces */
    --body-font: 'IBM Plex Mono', monospace;
    --header-font: 'IBM Plex Mono', sans-serif;
    --title-font: 'IBM Plex Mono', monospace;
    --mono-font: "IBM Plex Mono", monospace;
 
    /* Standard Colors */
 
    --white-monochrome: 238, 238, 216;
    --pale-gray-monochrome: 233, 231, 204;
    --light-gray-monochrome: 147, 147, 147;
    --gray-monochrome: 127, 127, 127;
    --dark-gray-monochrome: 101, 101, 101;
    --black-monochrome: 25, 20, 16;
    --bright-accent: 145, 179, 153;
    --medium-accent: 145, 179, 153;
    --dark-accent: 105, 133, 111;
 
    --header-title: "Private Overseer Archives";
    --header-subtitle: "REDACTIS IN POTESTATEM HABEMUS";
 
    --logo-image: url("http://www.scp-wiki.net/local--files/component:scp-offices-theme/scpoffices_logo.svg");
 
    --background-gradient-color: 215, 215, 215;
    --background-gradient-distance: 40rem;
 
    /* Link Colors */
    --link-color: var(--bright-accent);
    --visited-link-color: var(--dark-accent);
    --hover-link-color: var(--dark-accent);
    --newpage-color: 221, 102, 17;
 
    scrollbar-color: rgba(var(--white-monochrome), 1) rgba(var(--bright-accent), 0.50);
}
 
#container-wrap-wrap {
 
    background-image:
        repeating-linear-gradient(180deg,
        hsla(0, 0%, 100%, 0),
        hsla(0, 0%, 100%, 0) 0.25vh,
        rgba(88, 88, 88, 0.1) 0.35vh,
        rgba(88, 88, 88, 0.2) 0.5vh),
 
        linear-gradient(to bottom,
        rgba(var(--black-monochrome), 1) 7.5rem,
        rgba(var(--gray-monochrome), 1) 7.625rem,
        rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
        rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
        rgba(var(--black-monochrome), 1) 100%);
    background-size: 100% 7.5rem, 100% 9.375rem;
    background-repeat: no-repeat;
}
 
#skrollr-body {}
 
a {
    font-weight: 900;
}
 
#header h2 span::before {
    color: rgb(var(--bright-accent));
}
 
#header h1 *,
#top-bar *,
#page-title * {
    will-change: opacity;
    transition: opacity 0.2s ease-in-out;
}
 
#header h1 a:hover::before,
#top-bar a:hover,
#page-title:hover,
#search-top-box-form input[type="submit"]:hover, 
#search-top-box-form input[type="submit"]:focus {
    -webkit-animation: flicker 20s linear infinite;
    -moz-animation: flicker 20s linear infinite;
    animation: flicker 20s linear infinite;
}
 
#top-bar li:hover ul,
#top-bar li:focus-within ul,
#top-bar li.sfhover ul,
#top-bar li ul {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
 
#search-top-box-form input[type="submit"] {
    background: rgb(var(--bright-accent)) !important;
}
 
#search-top-box-form input[type="submit"]:hover, 
#search-top-box-form input[type="submit"]:focus {
    background: rgb(var(--dark-accent)) !important;
}
 
#side-bar img {
    display: none;
}
 
#side-bar .collapsible-block-unfolded {
    background: unset;
}
 
#side-bar div.menu-item a.collapsible-block-link, 
#side-bar .side-block>.collapsible-block a.collapsible-block-link {
    background: rgba(var(--medium-accent),0.5);    
}
 
#side-bar div.menu-item a,
#side-bar div.menu-item .text {
    font-weight: 900;
}
 
#side-bar div.menu-item a:hover {
    -webkit-animation: flicker 20s linear infinite;
    -moz-animation: flicker 20s linear infinite;
    animation: flicker 20s linear infinite;
}
 
.page-rate-widget-box {
    background:
        linear-gradient(to bottom,
        rgb(var(--bright-accent)) 0%,
        rgb(var(--dark-accent)) 30%,
        rgb(var(--dark-accent)) 100%) !important;
}
 
.page-rate-widget-box > span.rate-points,
.page-rate-widget-box > span.rateup,
.page-rate-widget-box > span.ratedown,
.page-rate-widget-box > span.cancel,
.page-rate-widget-box > span.rate-points > a,
.page-rate-widget-box > span.rateup > a,
.page-rate-widget-box > span.ratedown > a,
.page-rate-widget-box > span.cancel > a {
    color: rgb(var(--white-monochrome));
    mix-blend-mode: unset;
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
 
.page-rate-widget-box > span.rate-points:hover,
.page-rate-widget-box > span.rate-points:active {
    color: rgb(var(--white-monochrome)) !important;
    mix-blend-mode: unset !important;
}
 
.page-rate-widget-box > span.rateup:hover,
.page-rate-widget-box > span.rateup:active,
.page-rate-widget-box > span.ratedown:hover,
.page-rate-widget-box > span.ratedown:active,
.page-rate-widget-box > span.cancel:hover,
.page-rate-widget-box > span.cancel:active {
    color: rgb(var(--black-monochrome));
    -webkit-animation: flicker 20s linear infinite;
    -moz-animation: flicker 20s linear infinite;
    animation: flicker 20s linear infinite;
}
 
.info-container .collapsible-block-folded, 
.info-container .collapsible-block-unfolded-link {
    background: rgb(var(--bright-accent))!important;    
}
 
iframe.scpnet-interwiki-frame {
    filter: hue-rotate(90deg);
}    
 
@media only screen and (max-width: 768px) {
    #header {
        background-position: left calc(5vw + 5.5rem - 10.4rem) top calc(4% - var(--offset-from-page-top) / 2),top center;
        background-size: calc(8.75rem + var(--offset-from-page-top)),100% 7.5rem;
        background-repeat: no-repeat,repeat;
    }
}
 
@-webkit-keyframes flicker {
    0% {
        opacity: .2;
    }
 
    5% {
        opacity: .9;
    }
 
    6% {
        opacity: 1;
    }
 
    11% {
        opacity: .4;
    }
 
    11.25% {
        opacity: .6;
    }
 
    11.5% {
        opacity: .4;
    }
 
    18% {
        opacity: 1;
    }
 
    18.5% {
        opacity: .9;
    }
 
    22% {
        opacity: 1;
    }
 
    38.5% {
        opacity: 1;
    }
 
    39% {
        opacity: .8;
    }
 
    42% {
        opacity: 1;
    }
 
    60% {
        opacity: 1;
    }
 
    60.5% {
        opacity: 0;
    }
 
    62% {
        opacity: 0;
    }
 
    63% {
        opacity: .2;
    }
 
    63.25% {
        opacity: 0;
    }
 
    65% {
        opacity: 1;
    }
 
    73% {
        opacity: 1;
    }
 
    75% {
        opacity: .8;
    }
 
    79% {
        opacity: 1;
    }
 
    100% {
        opacity: 1;
    }
}
}