SCP Offices Theme

Link to article: SCP Offices Theme.

@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");
:root {
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg");
}

.scp-image-block.block-right {
    margin: 1em 0 1em 2em;
}

.scp-image-block a {
    width: 100%;
    min-width: 100%;
}

.scp-image-block img {
    min-width: 100%;
    border: 0.5rem solid rgba(var(--pale-gray-monochrome));
    box-sizing: border-box;
}

#page-content > div.scp-image-block.block-right > a {
    background-color: rgb(var(--gray-monochrome));
}

#page-content > div.scp-image-block.block-right > a > img {
    padding: 1em;
}

@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Ascp-offices-theme/1")

```
max-width:300px;
```
```
max-width: 300px;
```
```
display:flex;
```
```
font-family: var(--header-font);
```

```
scp-image-block
```
```
block-right
```
```
scp-image-caption
```
```
code
```

[[iftags +theme]]
[[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");
:root {
    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg");
}

.scp-image-block.block-right {
    margin: 1em 0 1em 2em;
}

.scp-image-block a {
    width: 100%;
    min-width: 100%;
}

.scp-image-block img {
    min-width: 100%;
    border: 0.5rem solid rgba(var(--pale-gray-monochrome));
    box-sizing: border-box;
}

#page-content > div.scp-image-block.block-right > a {
    background-color: rgb(var(--gray-monochrome));
}

#page-content > div.scp-image-block.block-right > a > img {
    padding: 1em;
}
[[/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]]
[[/>]]

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

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Jumbo
| color1-variable=--gray-monochrome
| color1-info=(127,127,127)
| color1-has-light-text=1
| color2-name=Envy
| color2-variable=--bright-accent
| color2-info=(145,179,153)
| color2-has-light-text=1
| subcolor1-name=Orange White
| subcolor1-variable=--pale-gray-monochrome
| subcolor1-info=(233,231,204)
| subcolor2-name=Suva Gray
| subcolor2-variable=--light-gray-monochrome
| subcolor2-info=(147,147,147)
| subcolor3-name=Dove Gray
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(101,101,101)
| subcolor3-has-light-text=1
| subcolor4-name=White Rock
| subcolor4-variable=--white-monochrome
| subcolor4-info=(238,238,216)
| subcolor5-name=Zeus
| subcolor5-variable=--black-monochrome
| subcolor5-info=(25,20,16)
| subcolor5-has-light-text=1
| subcolor6-name=Viridian Green
| subcolor6-variable=--dark-accent
| subcolor6-info=(105,133,111)
| subcolor6-has-light-text=1
]]

[[div class="scp-image-block block-right" style="max-width:300px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg width="300px"link="https://scp-wiki.wikidot.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg"]]
[[div class="scp-image-caption" style="max-width: 300px;"]]
SCP Offices Theme
[[/div]]
[[/div]]

+ Usage

[[div_ style="display:flex;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]]
[[/div]]

++ Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. [[[theme:black-highlighter-theme|To learn more go here]]].

On any wiki:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:scp-offices-theme]]@@
[[/div]]

+ Examples

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

[[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 Empty Tab]]
[[/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 ||

[[=]]
[[span style="font-family: var(--header-font);"]]The Body, Header, Title, and monospace font is IBM Plex Mono.[[/span]]
[[/=]]

@@ @@
[[collapsible show="+ Show theme code" hide="- Hide theme code"]]
[[code type="css"]]
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

@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-highlighter";
    	/* must be either "black-highlighter" or "sigma9" */
    	--theme-id: "SCP-Offices-theme";
    	/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    	--theme-name: "SCP Offices Theme";
    	/* set this to your theme's full name */
    	
    	/* Typefaces */
    	--body-font: "JetBrains Mono", Recursive, Consolas, monaco, monospace;
    	--header-font: var(--header-font);
    	--title-font: var(--header-font);
    	--mono-font: var(--header-font);
    	--UI-font: var(--header-font);

    	/* 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;

    	--swatch-text-general: var(--swatch-text-dark);

    	--logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme: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;
    }

    #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) var(--header-height-on-desktop),
    			rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
    			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-repeat: no-repeat;
    	background-size: 
    		100% var(--header-height-on-desktop), 
    		100% var(--final-header-height-on-desktop);
    }

    a {
    	--wght: 900;
    	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,
    #header h1 a:hover::after,
    #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;
    	animation: flicker 20s linear infinite;
    }

    #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 .close-menu::before {
    	line-height: 0.85em !important;
    }

    #interwiki .heading p,
    #side-bar .heading p,
    #side-bar .collapsible-block .collapsible-block-link {
    	color: rgb(var(--swatch-primary-darkest))
    }

    #interwiki div.menu-item a,
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
    	--wght: 900;
    	font-weight: 900;
    }

    #interwiki div.menu-item a:hover,
    #interwiki div.menu-item a:active,
    #side-bar div.menu-item a:hover,
    #side-bar div.menu-item a:active {
    	-webkit-animation: flicker 20s linear infinite;
    	animation: flicker 20s linear infinite;
    	color: rgb(var(--swatch-text-tertiary-color));
    }

    #interwiki div.menu-item a:focus-within,
    #side-bar div.menu-item a:focus-within {
    	-webkit-animation: flicker 20s linear infinite;
    	animation: flicker 20s linear infinite;
    	color: rgb(var(--swatch-text-tertiary-color));
    }

    .info-container .collapsible-block-folded,
    .info-container .collapsible-block-unfolded-link {
    	background: rgb(var(--bright-accent)) !important;
    }

    div[id*="page-options-bottom"] {
    	--ui-wght: 600;
    	--ui-hvr-wght: 600;
    	font-size: calc(var(--base-font-size) * 0.75);
    }

    @media only screen and (max-width: 56.25rem) {
    	#header {
    		background-repeat: no-repeat, repeat;
    		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% var(--header-height-on-desktop);
    	}
    }

    @-webkit-keyframes flicker {
    	0% {
    		opacity: 1;
    	}

    	5% {
    		opacity: .9;
    	}

    	6% {
    		opacity: .8;
    	}

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

    @keyframes flicker {
    	0% {
    		opacity: 1;
    	}

    	5% {
    		opacity: .9;
    	}

    	6% {
    		opacity: .8;
    	}

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

[[/code]]
[[/collapsible]]
[[footnoteblock]]
[[/iftags]]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Ascp-offices-theme/1")
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Ascp-offices-theme/1
]]

SCP Offices Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source