Midnight Rush Theme

Link to article: Midnight Rush 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");

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

```
filter: invert(1);
```
```
color: rgb(var(--visited-link-color))
```
```
color: rgb(var(--link-color))
```
```
color: rgb(var(--newpage-color))
```
```
padding-bottom: 10rem; flex-grow: 1;
```

```
code
```
```
blockquote
```
```
xtra-div-1
```
```
xtra-div-1
```
```
xtra-div-2
```
```
xtra-div-2
```
```
xtra-div-3
```
```
xtra-div-3
```
```
xtra-div-4
```
```
xtra-div-4
```
```
document
```
```
document
```

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

[[include :scp-wiki:info:start]]
Info about your page.
[[include :scp-wiki:info:end]]

[[div style="filter: invert(1);"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]]
[[/div]]

----

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

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Penumbra Purple
| color1-variable=--penumbra-purple
| color1-info=(75, 57, 123)
| color1-has-light-text=1
| color2-name=Deepwell
| color2-variable=--deepwell
| color2-info=(43, 43, 43)
| color2-has-light-text=1
| subcolor1-name=Subdirective Silver
| subcolor1-variable=--subdirective-silver
| subcolor1-info=(204, 204, 204)
| subcolor2-name=Liberation Lilac
| subcolor2-variable=--liberation-lilac
| subcolor2-info=(145, 121, 231)
| subcolor2-has-light-text=1
]]

----

This is a Black Highlighter theme based on the Sigma-9 [[[theme:night-rush-theme | Night Rush]]] theme by [[*user Nagiros]], with customized visuals for the [[[anomaly-classification-system-guide | ACS]]], [[[component:info-ayers | Info Bar]]], [[[component:toggle-sidebar-bhl | Toggle Sidebar]]], and [[[component:betterfootnotes | BetterFootnotes]]] components.

You will need to import the Black Highlighter theme 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:midnight-rush]]@@
[[/div]]

@@ @@

+ Examples

A horizontal rule can be created with 4 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]]
Just use your imagination and pretend there's {{Lorem Ipsum}} here.

* [[span style="color: rgb(var(--visited-link-color))"]]Visited link[[/span]]
* [[span style="color: rgb(var(--link-color))"]]Unvisited link[[/span]]
* [[span style="color: rgb(var(--newpage-color))"]]Missing link[[/span]]
[[/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, or use {{@@[[div class="blockquote"]]@@}}.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
>>> And another[[footnote]] And here's a footnote! [[/footnote]]

@@ @@

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

@@ @@

[[=]]

[[div class="xtra-div-1"]]
@@[[div class="xtra-div-1"]]@@
[[/div]]

@@ @@

[[div class="xtra-div-2"]]
@@[[div class="xtra-div-2"]]@@
[[/div]]

@@ @@

[[div class="xtra-div-3"]]
@@[[div class="xtra-div-3"]]@@
[[/div]]

@@ @@

[[div class="xtra-div-4"]]
@@[[div class="xtra-div-4"]]@@
[[/div]]

@@ @@

[[div class="document" style="padding-bottom: 10rem; flex-grow: 1;"]]
@@[[div class="document"]]@@
[[/div]]

[[/=]]

@@ @@

----

[[=]]
+ Source Code
[[/=]]

[[collapsible show="+ Show source code" hide="- Hide source code"]]

[[code type="css"]]

/*
Midnight Rush Theme
[2023 Wikidot Theme]
By MontagueETC
Based on Night Rush by Nagiros
*/

:root {

    --theme-base: "black-highlighter";
    --theme-id: "midnight-rush";
    --theme-name: "Midnight Rush";

    /* Color Palette */

     --penumbra-purple: 75, 57, 123;
     --liberation-lilac: 145, 121, 231;
     --subdirective-silver: 204, 204, 204;
     --deepwell: 43, 43, 43;

     --medium-accent: var(--penumbra-purple);
     --cutColour: #fafafa;
     --barColour: var(--penumbra-purple);
     --toggle-border-color: rgb(var(--penumbra-purple));
     --toggle-icon-color: rgb(var(--penumbra-purple));
     --dark-accent: var(--penumbra-purple);
     --bright-accent: var(--penumbra-purple);

    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Amidnight-rush/midnight-rush-icon.png");

     --link-color: var(--liberation-lilac);
     --visited-link-color: 204, 156, 255;
     --hover-link-color: 204, 156, 255;

    --swatch-text-general: var(--subdirective-silver);

    --swatch-background: 26, 26, 26;
    --background-gradient-color: 26, 26, 26;

    --rating-module-bg-color: var(--deepwell);
    --rating-module-text-color: var(--subdirective-silver);
    --rating-module-text-hover-color: var(--deepwell);

    --swatch-menubg-medium-color: var(--penumbra-purple);
    --swatch-menubg-light-color: var(--deepwell);
    --swatch-menutxt-general-color: var(--subdirective-silver);
    --swatch-menutxt-light-color: var(--subdirective-silver);
    --swatch-menutxt-dark-color: var(--subdirective-silver);

    --ui-button-txt: var(--subdirective-silver);
    --ui-button-hover-txt: var(--subdirective-silver);

    --document-background-color: var(--deepwell);

/* Toggle Sidebar BHL */
    
    --toggle-roundness: 0%;

/* BetterFootnotes */

    --fnColor: rgb(var(--liberation-lilac));
    
}

.fncon {
    background: rgb(var(--deepwell));
    border: .125rem solid rgb(var(--liberation-lilac));
}

#main-content {
    --tabs-bg: var(--deepwell);
    --tabs-txt: var(--subdirective-silver);
    --tabs-content-bg-color: var(--deepwell);
    --tabs-content-border-color: rgba(0, 0, 0, 0);
    --blockquote-bg-color: var(--deepwell);
    --blockquote-border-color: var(--subdirective-silver);
    --tables-header-bg: 64, 64, 64;
    --tables-border: 107, 107, 107;
}   

#side-bar {
    --sideblock-heading-text-color: 166, 147, 236;
    --sideblock-heading-border-color: 166, 147, 236;
    --sidebar-bg-color: 18, 18, 18;
    --sidebar-links-text: var(--liberation-lilac);
}

#top-bar {
    --topmenu-hover-border-color: var(--liberation-lilac);
    --dropdown-border-color: var(--liberation-lilac);
}

hr {
    background-color: rgb(var(--subdirective-silver));
}

::selection {
  background: rgb(var(--penumbra-purple));
}

:is(div.image-block, div.scp-image-block) {

    :is(.image-caption, .scp-image-caption) {

   	 background-color: rgb(var(--deepwell));
}
}

:is(.footnotes-footer, .bibitems) {
   	 background-color: rgb(var(--deepwell));
}

.info-container{
--barColour: rgb(var(--penumbra-purple));
}

/* DIVs */

.xtra-div-1 {
    border-top:solid 5px rgb(var(--penumbra-purple));
    border-bottom:solid 5px rgb(var(--penumbra-purple));
    background: rgb(var(--deepwell));
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px 10px 20px;
    word-break: break-word;
}

.xtra-div-2 {
    border-left:solid 5px rgb(var(--penumbra-purple));
    border-right:solid 5px rgb(var(--penumbra-purple));
    background: rgb(var(--deepwell));
    width:90%;
    padding:1px 15px;
    margin: 10px auto;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.xtra-div-3 {
    border:solid 4px rgb(var(--penumbra-purple));
    background: rgb(var(--deepwell));
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 20px 20px;
    word-break: break-word;
}

.xtra-div-4 {
    border:solid 1px rgb(var(--subdirective-silver));
    background: rgb(var(--deepwell));
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 20px 20px 20px;
    word-break: break-word;
}

#page-content div:is(.document) {
    max-width: 45rem;
}

div:is(.document) {
    display: block;
    margin-inline: auto;
    margin-block: 1.5em;
    padding: 1.5rem;
    position: relative;
    --posX: -20vw;
}

div.document {
    background-color: rgb(var(--document-background-color));
    box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 10, 0.8), 0px 6px 15px -4px rgba(0, 0, 7, 0.9);
}

div:is(.document)::before,
div:is(.document)::after {
    content: "";
    height: 98%;
    position: absolute;
    width: 98%;
    z-index: -1;
}

div:is(.document)::before {
    left: -5px;
    top: 4px;
    transform: rotate(-2.5deg);
}

div:is(.document)::after {
    right: -3px;
    top: 1px;
    transform: rotate(1.4deg);
}

div:is(.document)::before,
div:is(.document)::after {
    background-color: rgb(var(--document-background-color));
    opacity: 90%;
}

div.document::before {
    box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 10, 0.8), 0px 6px 15px -4px rgba(0, 0, 7, 0.9);
}

div.document::after {
    box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 10, 0.8), 0px 6px 15px -4px rgba(0, 0, 7, 0.05);
}

@media only screen and (max-width: 1020px) {

    div:is(.document)::before,
    div:is(.document)::after {
     display: none;
    }
}

/*  ACS COLORS  */
 
div.anom-bar-container {
  --five-color: 196, 67, 67;   /*  red  */
  --four-color: 255, 141, 54;   /*  orange  */
  --three-color: 255, 226, 82;   /*  yellow  */
  --two-color: 40, 135, 189;   /*  blue  */
  --one-color: 40, 159, 107;   /*  green  */
 
  --white-bar: 207, 207, 207;
  --lg-bar: 118, 118, 130;
  --gray-bg: 66, 66, 72;
}
 
div.anom-bar-container .anom-bar > .bottom-box {   /*  horizontal bar  */
  box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207);
  -webkit-box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207);
  -moz-box-shadow: 0 -0.5rem 0 0 rgb(207, 207, 207);
  box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207));
  -webkit-box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207));
  -moz-box-shadow: 0 -0.5rem 0 0 rgb(var(--white-bar, 207, 207, 207));
}
div.anom-bar-container .bottom-box > .diamond-part {   /*  vertical bar  */
  box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207);
  -webkit-box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207);
  -moz-box-shadow: -0.5rem 0 0 0 rgb(207, 207, 207);
  box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207));
  -webkit-box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207));
  -moz-box-shadow: -0.5rem 0 0 0 rgb(var(--white-bar, 207, 207, 207));
}
div.anom-bar-container.esoteric .text-part .main-class,
div.anom-bar-container.explained .text-part .main-class,
div.anom-bar-container.neutralized .text-part .main-class,
div.anom-bar-container.pending .text-part .main-class {
  background-color: rgba(66, 66, 72, .5);
  background-color: rgba(var(--gray-bg, 66, 66, 72), .5);
  border-left-color: rgb(118, 118, 130);
  border-left-color: rgb(var(--lg-bar, 118, 118, 130));
}
div.anom-bar-container .danger-diamond > .arrows,
div.anom-bar-container .danger-diamond > .bottom-icon::before {   /*  inverted arrows, esoteric icons  */
  filter: invert(90%);
  -webkit-filter: invert(90%);
}
div.anom-bar-container .danger-diamond > .quadrants > .bottom-quad,
div.anom-bar-container.explained .danger-diamond > .quadrants > .top-quad,
div.anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad,
div.anom-bar-container.pending .danger-diamond > .quadrants > .top-quad {   /*  "transparent" bottoms/top icon backgrounds  */
  background-color: rgb(26, 26, 26);   /*  body background color  */
}
div.anom-bar-container .danger-diamond > .bottom-icon,
div.anom-bar-container.pending .danger-diamond > .top-icon::before {   /*  esoteric, pending icon backgrounds  */
  background-color: rgb(3, 3, 3);
}
 
div.anom-bar-container .acs-hybrid-text-bar > .acs-clear > .clearance-level-text::before,
div.anom-bar-container .acs-hybrid-text-bar > .acs-disrupt .disruption-class-number::before,
div.anom-bar-container .acs-hybrid-text-bar > .acs-risk .risk-class-number::before {   /*  hybrid text fixes  */
  color: rgb(237, 237, 237);   /*  text color  */
}
div.anom-bar-container .acs-hybrid-version.acs-yes .acs-secondary,
div.anom-bar-container .acs-hybrid-version.acs-esoteric .acs-contain,
div.anom-bar-container .acs-hybrid-version.acs-explained .acs-contain,
div.anom-bar-container .acs-hybrid-version.acs-neutralized .acs-contain,
div.anom-bar-container .acs-hybrid-version.acs-pending .acs-contain {   /*  hybrid vertical bars  */
  box-shadow: inset 0.5rem 0 0 0 rgb(118, 118, 130);
  -webkit-box-shadow: inset 0.5rem 0 0 0 rgb(118, 118, 130);
  -moz-box-shadow: inset 0.5rem 0 0 0 rgb(118, 118, 130);
  box-shadow: inset 0.5rem 0 0 0 rgb(var(--lg-bar, 118, 118, 130));
  -webkit-box-shadow: inset 0.5rem 0 0 0 rgb(var(--lg-bar, 118, 118, 130));
  -moz-box-shadow: inset 0.5rem 0 0 0 rgb(var(--lg-bar, 118, 118, 130));
}
div.anom-bar-container .acs-hybrid-version.acs-pending .acs-contain {
  background-color: rgba(66, 66, 72, .5);
  background-color: rgba(var(--gray-bg, 66, 66, 72), .5);
}

/* TABVIEW - Abandon All Hope Ye Who Enter Here */

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 0.125rem);
    margin: 0 auto;
    box-shadow: 0 calc(0.0625rem * 5) 0 0 rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    display: flex;
    position: relative;
    max-width: 100%;
    margin: 0 0.25em 0.5em;
    padding: 0;
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 0 0 0.0625rem rgba(var(--dark-accent), 0.5);
    color: rgb(var(--bright-accent));
    font-weight: bold;
}
 
.yui-navset .yui-nav li a,
.yui-navset .yui-navset-top .yui-nav li a {
    zoom: unset;
    border: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    zoom: unset;
    vertical-align: bottom;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active {
    font-weight: bold;
}
 
.yui-navset .yui-nav a:focus-within {
    color: rgb(var(--dark-accent));
    font-weight: bold;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    padding: 0.35em 0.75em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
.yui-navset .yui-nav li em {
    /* Undoes border set by wikidot's default layout */
    border: unset;
}
 
/* Selected Tab */
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-nav .selected:hover,
.yui-navset .yui-navset-top .yui-nav .selected:hover {
    flex-grow: 2;
    margin: -0.25em 0 0.25em 0;
    padding: 0;
}
 
.yui-navset .yui-nav .selected a {
    width: 100%;
    /* Undoes a color set by wikidot's default layout */
    color: rgb(var(--white-monochrome));
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    margin-bottom: -0.125rem;
    background-image: none;
    font-weight: bold;
    cursor: default;
}

[[/code]]
[[/collapsible]]
[[/iftags]]

[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Amidnight-rush/1");
[[/module]]

Midnight Rush Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source