Exposé Theme

Link to article: Exposé 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");

.scp-image-block.block-right {
    background: var(--gradient-header);
}

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

(none)

```
code
```
```
code
```
```
gray1
```
```
gray1
```
```
gray2
```
```
gray2
```

[[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");

.scp-image-block.block-right {
    background: var(--gradient-header);
}
[[/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]]
[[/>]]

[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]]

+ Usage

++ 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]]].

This is a BHL version of [[[theme:broken-masquerade|Broken Masquerade Theme]]] by Cyantreuse and [[*user stormbreath]]. It is designed to be used for the [[[broken-masquerade-hub|Broken Masquerade Canon]]].

On any wiki:

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

If you would not like to use the police flashing lights on the header, add the following code in anywhere of your article:

[[div class="code"]]
@@[[module css]]@@
@@div#extra-div-1,div#extra-div-2{display:none;}@@
@@[[/module]]@@
[[/div]]

+ Examples

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Abroken-masquerade/new_scp_logo.png|caption=New SCP Logo by Cyantreuse|width=200px]]

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

[[div class="gray1"]]
> @@[[div class="gray1"]]@@
> @@> Gray Quoteblock One@@
> @@[[/div]]@@
[[/div]]

[[div class="gray2"]]
> @@[[div class="gray2"]]@@
> @@> Gray Quoteblock Two@@
> @@[[/div]]@@
[[/div]]

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||

@@ @@

[[footnoteblock]]
-----
[[collapsible show="+ Show theme code" hide="- Hide theme code"]]
[[code type="css"]]
@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: "expose";
    	/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    	--theme-name: "Expose Theme";
    	/* set this to your theme's full name */

    	/* ===HEADER ELEMENTS=== */
    	--logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Abroken-masquerade/new_scp_logo.png");
    	--header-subtitle: "Safety Continues in Public";

    	/* ===STANDARD THEME COLORS=== */
    	--pale-accent: 255, 7, 7;
    	--bright-accent: 214, 0, 0;
    	--medium-accent: 119, 119, 119;
    	--dark-accent: 42, 42, 42;

    	/* ===HEADER GRADIENT=== */
    	--header-gradient-color-bottom: 66, 66, 66;
    	--header-gradient-color-middle: var(--black-monochrome);
    	--header-gradient-color-top: var(--black-monochrome);

    	/* ===TOPBAR GRADIENT=== */
    	--swatch-topmenu-border-color: var(--gray-monochrome);
    	--swatch-topmenu-bg-color: var(--very-light-gray-monochrome);

    	/* ===LINK COLORS=== */
    	--link-color: var(--swatch-primary);
    	--visited-link-color: var(--swatch-primary);
    	--hover-link-color: var(--pale-accent);
    }

    /* ===BUTTONS=== */

    *:not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>input.button,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>button,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>.button,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>input.button,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>button,
    *:not(.page-rate-widget-box):not(#search-top-box-form)>.btn {
    	border-color: rgb(var(--swatch-primary-darker), 0.05);
    }

    /* ===HEADER ELEMENTS=== */

    #header {
    	--swatch-headerh2-color: var(--pale-accent);
    }

    #header h1 a,
    #header h2 span {
    	margin-left: 11rem;
    }

    /* ===TOPBAR ELEMENTS=== */

    #top-bar {
    	/* ===TOPBAR CATEGORIES=== */
    	--topmenu-category-color: var(--swatch-menutxt-dark-color);
    	--topmenu-category-hover-color: var(--swatch-menutxt-dark-color);
    	--mobile-topmenu-sidebar-button-color: var(--light-gray-monochrome);

    	/* ===DROPDOWN MENU=== */
    	--dropdown-bg-color: var(--swatch-menubg-color), 0.9;
    	--dropdown-links-color: var(--swatch-menutxt-dark-color);
    	--dropdown-links-hover-color: var(--swatch-menutxt-light-color);
    }

    #header div[class*="top-bar"]>ul>li:hover,
    #header div[class*="top-bar"]>ul>li:active,
    #header div[class*="top-bar"]>ul>li:focus-within {
    	background-color: rgb(var(--swatch-menubg-color));
    }

    /* ===BLOCKQUOTE=== */

    .gray1>blockquote,
    .gray1>.blockquote,
    .gray1>div.blockquote,
    .gray1>[class*="blockquote"],
    .gray2>blockquote,
    .gray2>.blockquote,
    .gray2>div.blockquote,
    .gray2>[class*="blockquote"] {
    	--blockquote-border-color: var(--bright-accent);
    	margin: 1em 0;
    	border-radius: 0.625rem;
    	box-shadow:
    		inset 0 0 0 0.1875rem rgb(var(--blockquote-border-color)),
    		inset 0.1875rem 0 0 0 rgb(var(--blockquote-border-color)),
    		inset 0 -0.1875rem 0 0 rgb(var(--blockquote-border-color));
    }

    .gray1>blockquote,
    .gray1>.blockquote,
    .gray1>div.blockquote,
    .gray1>[class*="blockquote"] {
    	--blockquote-bg-color: 244, 244, 244, 1;
    }

    .gray2>blockquote,
    .gray2>.blockquote,
    .gray2>div.blockquote,
    .gray2>[class*="blockquote"] {
    	--blockquote-bg-color: 232, 232, 232, 1;
    }

    /* ===Ayer's Info Bar=== */

    .info-container {
    	--barColour: rgb(var(--link-color));
    }

    /* ===Flashing Lights=== */

    div#extra-div-1,
    div#extra-div-2 {
    	position: absolute;
    	top: 2.5rem;
    	width: 6rem;
    	height: 1rem;
    	border-radius: 0.0625rem;
    }

    div#extra-div-1 {
    	--light-on: -1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 0 0.0625rem 1.5rem rgba(255, 0, 0, 1) inset;
    	--light-off: -0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0 0.0625rem 0.125rem rgba(255, 0, 0, 0.2) inset;
    	left: 55%;
    	background-color: rgba(255, 0, 0, 0.75);
    	-webkit-animation: flash-1 1s infinite;
    	animation: flash-1 1s infinite;
    }

    @-webkit-keyframes flash-1 {
    	0% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	12.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	25% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	37.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	50% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	100% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}
    }

    @keyframes flash-1 {
    	0% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	12.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	25% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	37.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	50% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	100% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}
    }

    div#extra-div-2 {
    	--light-on: -1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 0 0.0625rem 1.5rem rgba(0, 0, 255, 1) inset;
    	--light-off: -0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0 0.0625rem 0.125rem rgba(0, 0, 255, 0.2) inset;
    	left: calc(55% + 6.25rem);
    	background-color: rgba(0, 0, 255, 0.75);
    	-webkit-animation: flash-2 1s infinite;
    	animation: flash-2 1s infinite;
    }

    @-webkit-keyframes flash-2 {
    	0% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	50% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	62.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	75% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	87.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	100% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}
    }

    @keyframes flash-2 {
    	0% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	50% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	62.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	75% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}

    	87.5% {
    		opacity: 1;
    		box-shadow: var(--light-on);
    	}

    	100% {
    		opacity: 0.2;
    		box-shadow: var(--light-off);
    	}
    }

    /* ===MOBILE FORMATTING=== */

    @media only screen and (max-width: 56.25rem) {
    	#header {
    		background-position: left 0.75rem top 1.1875rem;
    		background-size: auto calc(var(--header-height-on-desktop) - 2rem);
    	}

    	div#extra-div-1 {
    		max-width: calc(100vw - 55%);
    	}

    	div#extra-div-2 {
    		max-width: calc(100vw - 55% - 6.25rem);
    	}
    }

    @media only screen and (max-width: 25rem) {

    	#header h1 a,
    	#header h2 span {
    		margin-left: 10rem;
    	}
    }
}
[[/code]]
[[/collapsible]]
[[/iftags]]

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

Exposé Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source