Shivering Night Theme

Link to article: Shivering Night Theme.

@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/1);

/* {$half-height}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/2);
/{$half-height} */

/* {$low-height}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/3);
/{$low-height} */

/* {$mo}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/4);
/{$mo} */

/* {$kl}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/5);
/{$kl} */

/* {$dub}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/6);
/{$dub} */

/* {$ba}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/7);
/{$ba} */

/* {$ct}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/8);
/{$ct} */

:root {
  --prologue: "Hark, the thrum of the city";
  --prologue-setting: visible;
  --prologue-author: "—where alleys intersect, a chill.";
  --prologue-author-setting: visible;
  --introduction: "The sun had long since lurched towards the west. Over the mountain, golden threads wove vivaciously among scarlet hues and aubergine, resembling the lid of a cigar box. The palm and banana trees that blanket the landscape, baked by the poisonous sun, have dried up into yellow and loose curls like cigar tobacco. The Sun sets quickly in the South, dusk scarcely the blink of an eye. One moment the sun clings to the horizon fervently still, and yet in the next, long before you know it-- where the trail disappears amidst mist-blurred canopies and the green smears they cast -- it's already been replaced by a sliver of moon.";
  --introduction-setting: auto;
}

(none)

```
blockquote
```
```
blockquote
```
```
blockquote
```
```
dark
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
porthole
```
```
blockquote
```
```
porthole
```
```
blockquote
```
```
dark
```
```
blockquote
```
```
dark
```
```
Shivering-ACS
```
```
Shivering-ACS
```
```
Shivering-ACS
```
```
color
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```

[[iftags +theme]]
[[>]]
**Rating module:**
[[module Rate]]
**Info module:**
[[include :scp-wiki:info:start]]
**Title:** Shivering Night theme
**Author:** [[*user Flea_ZER0]]
**Original:** [https://scp-wiki-cn.wikidot.com/theme:shivering-night Shivering Night Theme -- CN]
**Translator:** [[*user LOVEMARGINAL]]
Localised by [[*user EstrellaYoshte]] and  [[*user MisterFrown]]
**Year of publication:** 2025

**Search bar/Wikidot profile layout**
Created at 2020
Created by [[*user dog_punch]]
CC BY-SA 3.0
https://1nu.wikidot.com/iikanji

**Sidebar component**
Created at 2021
Created by [[*user EstrellaYoshte]]
CC BY-SA 3.0
https://scp-wiki.wikidot.com/component:toggle-sidebar

**Square frame**
Created at 2024
Created by 百事无成_影黎君
CC BY-SA 4.0
https://blog.csdn.net/LY_z_/article/details/140805190

**Header image - Victoria Harbor**
Created by Ank Kumar
CC BY-SA 4.0
https://commons.wikimedia.org/wiki/File:Hongkong_Victoria_Harbour-_View_from_Sky100_(Ank_Kumar)_08.jpg

**Header image - Glass fragments**
Created by Freepik
[https://www.freepik.com/legal/terms-of-use Freepik Terms of use]
https://www.freepik.com/free-vector/realistic-polygonal-background_13223084.html

**Sample image - Dreaming cat**
Created by רינת מינדליס
CC BY-SA 4.0
Creative Commons Attribution-Share Alike 4.0 International
https://commons.wikimedia.org/wiki/File:A_sweet_sleeping_cat.jpg
[[include :scp-wiki:info:end]]
**Info module sans rating module:**
[[include :scp-wiki:info:start-standalone]]
[[include :scp-wiki:info:end-standalone]]
[[/>]]
This is a stylistic Sigma-9 theme made by [[*user Flea_ZER0]], with an aesthetic and ambiance inspired by the [[[theme:aero-glass|Aero Glass theme]]] and [[[k-s-g-hub|Kong, Shing, Gong]]]. The source code partially includes syntax modified or borrowed from [[[theme:basalt|Basalt]]], [[[theme:parallel|Parallel]]] and [[*user Agent FS]]'s navy blue theme (yet to be unveiled).

Though originally designed for articles about cities/urban legends/the night, such as //Kong, Shing, Gong//, this theme is customizable. The source code of this theme is included at the bottom of this page for you to tweak to your heart's content.

To use this theme, paste the following syntax onto the top of your page:
[[div class="blockquote"]]
{{@@[[include :scp-wiki:theme:shivering-night]]@@}}
[[/div]]
The --massive forehead-- tall header is optional, feel free to pick between two other layouts to change header height:

[[div class="blockquote"]]
{{@@[[include :scp-wiki:theme:shivering-night half-height=*]]@@}} - Sets header height as half of default
@@ @@
{{@@[[include :scp-wiki:theme:shivering-night low-height=*]]@@}} - Flattens header and excludes the prologue
[[/div]]

Appending the following syntax to your page allows a certain extent of customization:
[[div class="blockquote dark"]]
{{@@[[module CSS]]@@}}
{{@@:root {@@}}

{{@@  --bg-img: url(https://scpsandboxcn.wikidot.com/local--files/echoaphaniptera3/sn_bg_R.jpg); /* Changes background image */@@}}

{{@@  --blur-mode: none; /* Toggles background blur for the content, off by default. Set as 'block' to blur.*/ @@}}
{{@@  --bg-blur-filter: 2px; /* Changes how blurry the background image is when the above is toggled */ @@}}

{{@@  --background-gradient: linear-gradient(to bottom, rgb(var(--primary-color), 0.75) 20%, transparent); /* Changes transparency of background gradient*/ @@}}

{{@@  --prologue: "Meow meow meow"; /* Changes prologue title in the middle of the header */@@}}
{{@@  --prologue-setting: visible; /* Set as 'hidden' to hide prologue title*/@@}}

{{@@  --prologue-author: " --Fascinating creatures of the night"; /* Changes the author/quote source in the prologue */@@}}
{{@@  --prologue-author-setting: visible; /* Set as 'hidden' to hide the author/source */@@}}

{{@@  --introduction: "They lurk by neon lights in dreams, swallowing travellers' shadows"; /* Changes contents shown when hovering over title on header */@@}}
{{@@  --introduction-setting: auto; /* Set as 'none' to turn the above off */@@}}

{{@@  --title-setting: flex; /* Set as 'none' to hide title and subtitle, to better accomodate ACS*/@@}}
{{@@  --subtitle-content: "- SHIVERING NIGHT THEME -"; /* Changes subtitle */@@}}
{{@@  --subtitle-setting: flex; /* Set as none to hide the subtitle alone*/@@}}

{{@@  --primary-color: 16, 15, 20; /* Background color, set as a light-ish black by default */@@}}
{{@@  --secondary-color: 236, 246, 253; /* Text color, white by default */@@}}

{{@@  --link-color: 120, 140, 255; /* Link color, changing this also affects what tabs will look like*/@@}}
{{@@  --new-link-color: 111, 144, 206; /* Color for links to unmade pages */@@}}
{{@@ }@@}}
{{@@[[/module]]@@}}
[[/div]]
+ Examples:

This is how various components look with this theme applied.

[[include component:image-block name=http://scp-wiki.wikidot.com/local--files/theme:shivering-night/A_sweet_sleeping_cat.jpg|caption=Good night, sleep tight.|width=250px|align=right]]

[[toc]]

+ Heading level 1

++ Heading level 2

+++ Heading level 3

++++ Heading level 4

+++++ Heading level 5

++++++ Heading level 6

**Bold** | //Italic// | __Underline__ | --Strikethrough-- | {{teletype text}} ^^Superscript^^,,Subscript,,

A horizontal rule can be made with five hyphens “@@-----@@”.

-----

[[tabview]]
[[tab Tab]]
[[*user MasterTman2]]: Read //Kong, Shing, Gong//!
[[/tab]]
[[tab Tab]]
[[*user Lemonsense]]: Emerald Dawn 202X, stay woke
[[/tab]]
[[tab Long tab]]
The sun had long since lurched towards the west. Over the mountain, golden threads wove vivaciously among scarlet hues and aubergine, resembling the lid of a cigar box. The palm and banana trees that blanket the landscape, baked by the poisonous sun, have dried up into yellow and loose curls like cigar tobacco. The Sun sets quickly in the South, dusk scarcely the blink of an eye. One moment the sun clings to the horizon fervently still, and yet in the next, long before you know it-- where the trail disappears amidst mist-blurred canopies and the green smears they cast -- it's already been replaced by a sliver of moon.

(I'm not sure who wrote the original quote but this bit in the prologue was beautifully written. I hope my translation did it justice.)
[[/tab]]
[[tab Empty tab]]
[[/tab]]
[[tab Empty tab]]
[[/tab]]
[[tab Empty tab]]
[[/tab]]
[[tab Empty tab]]
[[/tab]]
[[tab Empty tab]]
Gorgeous theme, ten out of ten.
[[/tab]]
[[/tabview]]

||~  ||~ Title ||~ Title ||~ Title ||~ Title ||~ Title ||
|| Content || Content || Content || Content || Content || Content ||
|| Content |||||||||| More content ||||
|| Content || Content || Content || Content || Content || Content ||

= [# A link] · [[[theme:shivering-night| Visited link]]] · [[[SCP-CN-10000| New link]]]

[[div class="blockquote"]]
@@ @@
= {{@@[[div class="blockquote"]]@@}}
= This is a default blockquote, which slightly obscures the background and its animations.
@@ @@
@@ @@
[[/div]]

[[div class="blockquote porthole"]]
@@ @@
= {{@@[[div class="blockquote porthole"]]@@}}
= This is a blockquote textured like a porthole, inspired by none other than the Aero Glass theme.
= Note that frequent use may cause the browser to lag.  Safari and other iOS browsers are not supported.
@@ @@
[[/div]]

[[div class="blockquote dark"]]
@@ @@
= {{@@[[div class="blockquote dark"]]@@}}
= This is a dark blockquote, which obscures the background a little more.
@@ @@
@@ @@
[[/div]]

@@ @@
+++ ACS component changes:
Put the ACS component in{{@@[[div class="Shivering-ACS" color]]@@}} (original palette), or {{@@[[div class="Shivering-ACS" color]]@@}} to change how it looks (shivering palette).
@@ @@
[[tabview]]
[[tab Original palette]]
[[image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/original%20palette.jpg size="medium"]]
@@ @@
[[/tab]]
[[tab Shivering palette]]
[[div class="Shivering-ACS color"]]
[[image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/shivering%20palette.jpg size="medium"]]
[[/div]]
[[/tab]]
[[/tabview]]
@@ @@
This theme includes 5 additional presets inspired by cities around the world.

[[div class="blockquote"]]
= [[size 150%]]Macau, China🇲🇴[[/size]]
[[=image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/mo.png width="100%"]]
= {{@@[[include :scp-wiki:theme:shivering-night mo=*]]@@}}
[[/div]]
@@ @@
[[div class="blockquote"]]
= [[size 150%]]Kua Lumpur, Malaysia 🇲🇾[[/size]]
[[=image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/kl.png width="100%"]]
= {{@@[[include :scp-wiki:theme:shivering-night kl=*]]@@}}
[[/div]]
@@ @@
[[div class="blockquote"]]
= [[size 150%]]Dublin, Ireland 🇮🇪[[/size]]
[[=image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/dub.png width="100%"]]
= {{@@[[include :scp-wiki:theme:shivering-night dub=*]]@@}}
[[/div]]
@@ @@
[[div class="blockquote"]]
= [[size 150%]]Cape Town, South Africa  🇿🇦[[/size]]
[[=image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/ct.png width="100%"]]
= {{@@[[include :scp-wiki:theme:shivering-night ct=*]]@@}}
[[/div]]
@@ @@

[[div class="blockquote"]]
= [[size 150%]]Buenos Aires, Argentina  🇦🇷[[/size]]
[[=image http://scp-wiki.wikidot.com/local--files/theme:shivering-night/ba.png width="100%"]]
= {{@@[[include :scp-wiki:theme:shivering-night ba=*]]@@}}
[[/div]]

@@ @@
[[collapsible show="Source code▶" hide="Source code ▼"]]
[[code type="css"]]
@import url('https://fonts.bunny.net/css2?family=Afacad+Flux&display=swap');
@import url('https://fonts.bunny.net/css2?family=Titillium+Web&display=swap');

:root {
  --title-font: 'Afacad Flux', serif;
  --body-font:  'Titillium Web', sans-serif;

  --bg-img: url(http://scp-wiki.wikidot.com/local--files/theme:shivering-night/sn_bg_R.jpg);

  --blur-mode: none;
  --bg-blur-filter: 2px;

  --prologue: "Hark the thrum of the city.";
  --prologue-setting: visible;
  --prologue-author: "--where alleys intersect, a chill";
  --prologue-author-setting: visible;
  --introduction: "The sun had long since lurched towards the west. Over the mountain, golden threads wove vivaciously among scarlet hues and aubergine, resembling the lid of a cigar box. The palm and banana trees that blanket the landscape, baked by the poisonous sun, have dried up into yellow and loose curls like cigar tobacco. The Sun sets quickly in the South, dusk scarcely the blink of an eye. One moment the sun clings to the horizon fervently still, and yet in the next, long before you know it— where the trail disappears amidst mist-blurred canopies and the green smears they cast — it's already been replaced by a sliver of moon.";
  --introduction-setting: auto;

  --title-setting: flex;
  --subtitle-content: "- SHIVERING NIGHT THEME -";
  --subtitle-setting: flex;

  --primary-color: 16, 15, 20;
  --secondary-color: 236, 246, 253;

  --link-color: 120, 140, 255;
  --new-link-color: 111, 144, 206;

  --display-mode: 86vh;
  --background-gradient: linear-gradient(to bottom, rgb(var(--primary-color), 0.75) 20%, transparent);
}

body {
    background-color: rgb(var(--primary-color));
    color: rgb(var(--secondary-color));

    font-family: var(--body-font);
    font-weight: 200;
    font-size: 0.925em;
}

body:where(:not(#interwiki body))::before {
    content: " ";
    position: fixed;
    display: block;
    z-index: -2;

    top: 0;
    width: 100%;
    height: 100lvh;
    background: var(--bg-img);
    background-size: cover;
    background-position: center;
}

a, a:visited, h1  {
    color: rgb(var(--link-color));
}

a.newpage {
    color: rgb(var(--new-link-color));
}

hr {
  background: rgb(var(--secondary-color), .15);
  box-shadow: 0 0 10px rgb(0, 0, 0);
  -webkit-backdrop-filter: brightness(3) contrast(1.1);
  backdrop-filter: brightness(3) contrast(1.1);
}

strong {
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6, #page-title {
    font-family: var(--title-font);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--link-color))  rgb(var(--primary-color));
}

div#container-wrap {
    background: none;
}

/*-------------------------------------*/
/*---- MAIN ----*/
/*-------------------------------------*/

#container {
    display: grid;
    grid-template-columns: minmax(0,1fr);
}

#container::before {
    content: "";
    display: block;
    height: var(--display-mode);
    pointer-events: none;
}

/*-------------------------------------*/
/*---- HEADER ----*/
/*-------------------------------------*/

#header {
    max-width: 100%;
    width: 100%;
    padding: 0;

    order: -1;
    display: grid;
    grid-template-areas:'open-menu h1 top-bar search user';
    grid-template-columns: 3rem max-content 1fr 2.25rem auto;
    column-gap: .325rem;

    align-items: center;
    top: 0;
   position: sticky;
  background: transparent;
  height: 2.75rem;
  grid-template-rows: 1fr;
  -webkit-backdrop-filter: blur(var(--bg-blur-filter));
  backdrop-filter: blur(var(--bg-blur-filter));
}

#header h2 { display: none; }
#header h1 {
    margin: unset;
    float: unset;
    max-height: unset;

    grid-area: h1;
}
#header h1 a {
    margin: 0;
    padding: 0;
    line-height: unset;
    max-height: unset;
    color: inherit;
    background: unset;
    text-shadow: none;
    font-family: var(--title-font);
    letter-spacing: normal;

    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 0;
}
#header h1 a::before {
    content: "\f015";
    font-family: "FontAwesome";
    font-size: 1.325rem;
}

/*---- Top Bar----*/

#top-bar,
#top-bar :is(.top-bar, .mobile-top-bar) {
    display: contents;
}

#top-bar :is(.top-bar, .mobile-top-bar) > ul {
    grid-area: top-bar;
    display: flex;
    width: 100%;
}
#top-bar .mobile-top-bar > ul { display: none; }

#top-bar :is(.top-bar, .mobile-top-bar) > ul > li {
    float: none;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    border: none!important; 
}


#top-bar .open-menu {
    grid-area: open-menu;
    height: 100%;
    display: grid;
    place-items: center;
}
#top-bar .open-menu p { display: contents; }

#top-bar .open-menu a {
    position: static;
    z-index: initial;
    width: unset;
    height: unset;
    border: unset;
    border-radius: unset;
    background: unset;
    color: inherit;
}
#top-bar .open-menu a:is(:hover,:focus) {
    box-shadow: none;
}

#top-bar ul li.sfhover a, #top-bar ul li:hover a {
  background: transparent;
  color: rgb(var(--link-color));
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
}

#top-bar ul li ul {
  border: transparent;
  box-shadow: none;
  background: rgb(0, 0, 0);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#top-bar ul li a {
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  text-shadow: 0px 0px 5px black;
}

#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
  border-top: 1px solid rgba(var(--secondary-color), 0.33);
  text-shadow: 0px 0px 5px black;
}

/*---- Search ----*/

#search-top-box {
    position: relative;
    top: initial; right: initial;

  grid-area:search;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}


div#search-top-box form {
    display: flex;
    justify-content: flex-end;
}
 
div#search-top-box form input[type="text"]  {
    display: none;
}

 
#header div#search-top-box input[type="submit"] {
    display: block;
    height: 1.75rem;
    width: 1.75rem;
    border: none;
    color: transparent;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}
#header div#search-top-box input[type="submit"]:is(:hover,:focus) { background-color: rgb(var(--link-color)); }
 
#search-top-box-input {
    border: solid 1px var(--background);
    border-radius: 5px
}
 

/*---- Login Status ----*/

#login-status {
    grid-area:user;
    display: flex;
    align-items: center;
    position: relative;
    right: 0;
    top: 0;
    z-index: initial;
    font-size: 0;
    padding-inline: .5rem;
}
#login-status:has(.login-status-create-account) { font-size: .75rem; gap: .5ch;}
:where(#login-status) [id] {
    font-size: .75rem;
}

#login-status .printuser img.small {
    background: none !important;
    margin: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border-radius: 5px;
    box-shadow: 0 0 3px #3f3f3f;
}
 
a#account-topbutton {
    font-weight: bold;
    margin: 0;
    font-size: 0;
    text-align: center;
    text-decoration: none;
    background: none;
    width: 21.8px;
    border: none;
}
 
a#account-topbutton::before {
    content: "\f013";
    display: inline-block;
    font-family: FontAwesome;
    font-size: 1.3rem;
}
 
#my-account { display: none; }
 
#account-options { top: 100%; }

#account-options ul {
    display: flex;
    flex-wrap: wrap;
}
 
#account-options ul>li {
    flex-basis: 40%;
    flex-grow: 1;
    text-align: center;
}
 
#account-options ul>li a {
    color: #000;
    transition: all .25s ease-in-out
}

/*-------------------------------------*/
/*---- SIDE BAR----*/
/*-------------------------------------*/

#side-bar :is(.side-block, .side-block.resources) {
    border: 1.5px solid transparent;
    border-radius: 5px;
    position: relative;
    background: rgb(var(--primary-color), 0.5);
    box-shadow: 0 0 10px rgb(0, 0, 0);
    margin-bottom: 15px;
}

#side-bar div.menu-item a {
  font-weight: normal;
  font-size: 95%;
}

#side-bar div.menu-item img {
  display: none;
}

#side-bar .heading {
  color: rgb(var(--secondary-color));
  border-bottom: solid 1px rgb(var(--secondary-color));
  font-size: 95%;
  font-weight: bold;
  font-family: var(--title-font);
  text-align: center;
}

#side-bar .collapsible-block-folded {
  background: none;
}

#side-bar :is(a,a:visited) {
  color: rgb(var(--link-color));
}
#side-bar :is(a,a:visited):hover {
    color: rgb(0, 0, 0);
}

/*-------------------------------------*/
/*---- FOREHEAD ----*/
/*-------------------------------------*/

#extrac-div-1 {
    position: absolute;
    top: calc(var(--display-mode) / 2);
    left: 50%;
    transform: translateX(-50%);
    padding-left: 1em;
    padding-right: 1em;
    z-index: 2;
    pointer-events: var(--introduction-setting);
    width: min(28.5rem, 80%);
    font-size: min(.975em, calc(.325em + 1.625vw));

    display: flex;
    flex-direction: column;
}

#extrac-div-1::before {
    line-height: 1.5em;
    font-size: 1.5em;
    font-family: var(--title-font);
    font-weight: 400;
    text-shadow: 0px 0px 5px black;

    content: var(--prologue);
    color: rgb(var(--secondary-color));
    visibility: var(--prologue-setting);
    display: block;

    text-align: center;
    transition: font-size 0.3s ease, background-size 0.3s ease;
}

#extrac-div-1:hover::before {
    font-size: 1.25em;
    content: var(--introduction);
    background:
        linear-gradient(rgb(var(--secondary-color)), rgb(var(--secondary-color))) left top,
        linear-gradient(rgb(var(--secondary-color)), rgb(var(--secondary-color))) left top,
        linear-gradient(rgb(var(--secondary-color)), rgb(var(--secondary-color))) right bottom,
        linear-gradient(rgb(var(--secondary-color)), rgb(var(--secondary-color))) right bottom;
    background-position:
        left top, left top,
        right bottom, right bottom;
    background-repeat: no-repeat;
    background-size:
        1px 5px, 5px 1px,
        1px 5px, 5px 1px;
}

#extrac-div-1::after {
    line-height: 1.5em;
    font-size: 1.25em;
    font-family: var(--title-font);
    text-shadow: 0px 0px 3px rgba(var(--primary-color));

    content: var(--prologue-author);
    color: rgb(var(--secondary-color));
    visibility: var(--prologue-author-setting);
    display: block;

    text-align: right;
    transition: font-size 0.3s ease, background-size 0.3s ease;
}

#content-wrap {
    max-width: 100%;
    position: relative;
    margin: 0;
    background: linear-gradient(to bottom, transparent, rgb(var(--primary-color), 0.75) 15vh, rgb(var(--primary-color), 0.75));
}

#content-wrap::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    -webkit-backdrop-filter: blur(var(--bg-blur-filter));
    backdrop-filter: blur(var(--bg-blur-filter));
    display: var(--blur-mode);
}

#content-wrap::before {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background:
    url('https://scp-wiki.wikidot.com/local--files/theme:shivering-night/sn_bg_g.webp') top center no-repeat;
    background-size: cover;
    mix-blend-mode: overlay;
    animation: backgroundBounce 180s linear infinite;
    pointer-events: none;
}

@keyframes backgroundBounce {
    0%, 100% { background-position: center bottom; }
    50% { background-position: center top; }
}

#main-content {
    max-width: min(90%, 57.5rem);
}

#license-area, #footer {
  color: rgb(var(--secondary-color));
}

#footer {
  margin-top: 0px;
  background: rgb(var(--primary-color), 0.75);
}

#license-area {
  background: var(--background-gradient);
}



#action-area h1 {
    margin: 0;
    text-align: center;
}

#page-title, .meta-title {
    font-weight: bold;
    font-size: 4.5em;
    margin: 0;
    text-align: center;
    color: rgb(var(--secondary-color));
    border-color: transparent;

    display: var(--title-setting);
    gap: .125em;
    line-height: 1.25;
    flex-direction: column;
    align-items: center;
    position: relative;
}

:is(#page-title, .meta-title)::after {
   content: var(--subtitle-content);

   display: var(--subtitle-setting);
   width: 100%;
   height: 2rem;

   margin-top: -1.5rem;
   justify-content: center;
   align-items: center;
   font-size: 30%;
   letter-spacing: 1px;
}

#side-bar a:visited:hover,
div.buttons input:hover,
input.button:hover,
button:hover,
a.button:hover,
a:hover {
  text-decoration: none;
  background-color: rgb(var(--link-color));
  color: rgb(var(--primary-color));
  border-radius: 5px;
  text-shadow: none;
}

#top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
  background: rgb(var(--link-color));
  color: rgb(var(--primary-color));
}

#main-content .page-tags a {
  text-transform: uppercase;
  padding: 0 2px;
}

.license-area a,
.page-options-bottom a {
  text-shadow: 0px 0px 5px rgba(var(--primary-color));
}

blockquote,
div.blockquote,
div#toc,
#lock-info,
.scp-image-block {
    border: 0.1px dashed transparent;
    border-radius: 5px;
    position: relative;
    background: transparent;
    box-shadow: 0 0 10px rgb(0, 0, 0);
    -webkit-backdrop-filter: brightness(2) contrast(1.1);
    backdrop-filter: brightness(2) contrast(1.1);

    text-shadow: 0px 0px 5px black;
}
 
:where(.blockquote, blockquote) :is(div.blockquote, blockquote) {
   -webkit- backdrop-filter: brightness(1.25) contrast(1);
    backdrop-filter: brightness(1.25) contrast(1);
}

div.blockquote.porthole {
    background: linear-gradient(rgba(var(--primary-color), 0.1), rgba(var(--primary-color), 0.1)), var(--bg-img);
    background-size: cover;
    background-attachment:fixed;
    background-position: center;
    box-shadow: none;
}
div.blockquote.porthole::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--primary-color));
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0.7;
    text-shadow: none;
}

/* safari fallback for porthole */
@supports (-webkit-hyphens:none) {
div.blockquote.porthole {
    background: unset;
    -webkit-backdrop-filter:brightness(1.5) contrast(1.25) brightness(1.5) saturate(1.125);
    backdrop-filter:brightness(1.5) contrast(1.25) brightness(1.5) saturate(1.125);
}
div.blockquote.porthole::before { content: unset; }
}

div.blockquote.dark {
    background: rgba(31, 31, 53, 0.5);
    -webkit-backdrop-filter: contrast(1.1);
    backdrop-filter: contrast(1.1);
}

.hovertip, .owindow, .preview-message {
    position: fixed;
    z-index: 100;
    border: 2px solid transparent;
    border-radius: 5px;

    background-color: rgb(var(--primary-color), 0.5)  !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.preview-message {
  opacity: 1;
  bottom: 1em;
}

.owindow .title {
  background-color: transparent;
  text-align: center;
}

.owindow > :not(.button-bar, .title) > img {
  background: transparent !important;
  padding-right: 6px;
  margin-right: 4px;
}

.owindow .button-bar a:hover {
  background-color: rgb(var(--link-color));
  color: rgb(var(--primary-color));
}

#lock-info, textarea, input.text, .owindow .button-bar a {
    color: rgb(var(--secondary-color));
    background-color: transparent;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}


.owindow .button-bar a {
  border-color:transparent;
}

.odialog-shader {
  background-color: #171619;
}

.scp-image-block img {
  position: relative;
}

.scp-image-block .scp-image-caption {
  background-color: transparent;
  border-top: solid 1px transparent;
  font-size: 90%;
  font-weight: normal;
}

div.buttons input, input.button, button, file, a.button {
  background-color: transparent;
  border: 1px solid transparent;
  color: rgb(var(--secondary-color));
  font-size: 90%;
}

table.page-history td.optionstd a, .pager a {
  border: 1px solid transparent;
}

.pager .current {
  background-color: rgb(var(--link-color));
  color: rgb(var(--primary-color));
  border: 1px solid transparent;
  border-radius: 5px;
}

.page-source {
  border: 0.1px dashed transparent;
}

/*Info module*/

div.rate-box-with-credit-button,
div.page-rate-widget-box {
  border-radius: 10px;
  background-color: rgba(var(--secondary-color), .05);
  box-shadow: 0 0 10px rgb(0, 0, 0);
  -webkit-backdrop-filter: brightness(2) contrast(1.1) blur(2px);
  backdrop-filter: brightness(2) contrast(1.1) blur(2px);

  padding-right: 0.45em;
}

div.rate-box-with-credit-button {
  border: none;
}

div.rate-box-with-credit-button .page-rate-widget-box {
  border-radius: 0;
  background-color: transparent ;
  box-shadow: none;
  -webkit-backdrop-filter: unset;
  backdrop-filter: unset;

  padding-right: 0;
}

#page-content :is(.page-rate-widget-box, .rate-box-with-credit-button) :is(.rate-points, .rateup, .ratedown, .cancel) {
  border: none;
}

div.page-rate-widget-box :is(.rate-points, .rateup, .ratedown, .cancel) {
  background-color: transparent;
  border: 1px transparent;
}

.page-rate-widget-box :is(.rateup, .ratedown, .cancel) a {
  color: rgb(var(--secondary-color));
  text-transform: none;
  border-left: none;
}

div.creditButton p a {
  margin-left: 0;
  border-left: solid 1px transparent;
}

div.creditButton p a:hover,
div.page-rate-widget-box :is(.rateup, .ratedown, .cancel) a:hover {
  background: transparent;
  color: rgb(var(--link-color));
}

div.modalbox {
  border: 2px solid transparent;
  border-radius: 5px;
  background: rgb(var(--primary-color), 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.modalbox .credit p {
  margin-right: 0.75em;
  overflow-x: unset;
}

table.wiki-content-table th {
  background-color: rgba aliceblue(var(--primary-color) 0.25);
}

div.creditButtonStandalone p a {
  background-color: rgba(var(--secondary-color), .05);
  box-shadow: 0 0 10px rgb(0, 0, 0);
  -webkit-backdrop-filter: brightness(2) contrast(1.1) blur(2px);
  backdrop-filter: brightness(2) contrast(1.1) blur(2px);
}

div.creditButtonStandalone p a:hover {
  background-color: rgba(var(--secondary-color), .05);
  color: var(--link-color);
}

/* TABS */
.yui-navset .yui-content,
.yui-content {
  border: 1px solid transparent;
  background-color: transparent;
}

.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
  border-color: #fff0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  text-align: center;
}

.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
  flex: 1 0 100px;
}

.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
  margin: 0;
}

yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a {
  display: block;
}

.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
  background-color: unset;
  background-image: none;
}

.yui-navset .yui-nav a {
  background: rgba(31, 31, 53, 0.5);
  border: solid transparent;
  border-radius: 5px;
  -webkit-backdrop-filter: contrast(1.1);
  backdrop-filter: contrast(1.1);
  text-shadow: 0px 0px 5px black;
  color: rbg(var(--secondary-color));
}
.yui-navset .yui-nav a:is(:hover,:focus) {
  background: rgba(31, 31, 53, 0.5);
}
.yui-navset .yui-nav a em {
  border: solid transparent;
}

.yui-navset .yui-nav .selected :is(a, a:hover, a:focus) {
  border: unset;
  background: unset;
  background-color: rgba(var(--link-color));
  border-radius: 5px 5px 0px 0px;
  text-shadow:none;
}

.yui-navset .yui-content, .yui-content {
  border-radius: 0px 0px 5px 5px;
  box-shadow: 0 10px 10px -10px rgb(0, 0, 0);
  background: rgba(31, 31, 53, 0.5);
  backdrop-filter: contrast(1.1);
  border: none;

  margin-top: -0.45em;
  border-top: 0.75rem solid rgba(var(--link-color));
}

.yui-navset .yui-nav .selected a em {
    border: none;
    padding: 0.65em 0.75em;
}

/*-------------------------------------*/
/*---- INTEGRATION----*/
/*-------------------------------------*/

/*Component recolors*/
div.obj {
  color: rgb(var(--primary-color)) !important;
  background-color: rgb(var(--secondary-color)) !important;
}

div.class1 > div {
  color: rgb(var(--secondary-color)) !important;
  font-family: rift, 'Noto Sans SC', 'Noto Sans TC', sans-serif;
  font-size: 2.90em;
  line-height: 0.9em;
}

#page-content div.scale {
  --woedbar-lvl1-color: rgba(var(--secondary-color,12, 12, 12),0.1);
  --woedbar-lvl2-color: rgba(var(--secondary-color,12, 12, 12),0.3);
  --woedbar-lvl3-color: rgba(var(--secondary-color,12, 12, 12),0.55);
  --woedbar-lvl4-color: rgba(var(--secondary-color,12, 12, 12),0.75);
  --woedbar-lvl5-color: rgba(var(--secondary-color,12, 12, 12),1);
  --woedbar-lvl6-color: rgba(var(--secondary-color,140, 25, 26),1);
}

/* ACS recolor, credits to Parallel*/
div.Shivering-ACS {
  --swatch-menutxt-dark-color: var(--secondary-color);
}

div.Shivering-ACS.color {
  --five-color: 220, 70, 141;
  --four-color: 162, 78, 200;
  --three-color: 105, 92, 196;
  --two-color: 92, 147, 196;
  --one-color: 92, 196, 171;
}

div.Shivering-ACS .danger-diamond a {
  background: none;
}

div.Shivering-ACS .top-box .top-center-box {
  height: 80%;
  opacity: 0.65;
}

div.Shivering-ACS .anom-bar > .bottom-box {
  box-shadow: none;
  margin-top: -1.5rem !important;
}

div.Shivering-ACS .bottom-box > .diamond-part {
  box-shadow: none;
}

div.Shivering-ACS .text-part > .main-class {
  box-shadow: 0 0 10px rgb(0, 0, 0);
  -webkit-backdrop-filter: brightness(2) contrast(1.1);
  backdrop-filter: brightness(2) contrast(1.1);
  border-radius: 5px;
}

div.Shivering-ACS .text-part > .main-class::before {
  border: 0.25rem solid transparent !important;
}

div.Shivering-ACS .top-center-box > .bar-one,
div.Shivering-ACS .top-center-box > .bar-two,
div.Shivering-ACS .top-center-box > .bar-three,
div.Shivering-ACS .top-center-box > .bar-four,
div.Shivering-ACS .top-center-box > .bar-five {
  box-shadow: 0 0 3px rgb(0, 0, 0);
  border-radius: 0px 10px 0px 10px;
}

div.Shivering-ACS .text-part > .disrupt-class,
div.Shivering-ACS .text-part > .risk-class {
  box-shadow: 0 0 5px rgb(0, 0, 0);
  -webkit-backdrop-filter: brightness(2) contrast(1.1);
  backdrop-filter: brightness(2) contrast(1.1);
  border-radius: 5px;
}

div.Shivering-ACS .danger-diamond > .quadrants > div {
  clip-path: polygon(25% 0%, 74% 0%, 97% 31%, 50% 95%, 3% 31%);
  backdrop-filter: brightness(3);
}

div.Shivering-ACS .text-part .disrupt-class::before,
div.Shivering-ACS .text-part .risk-class::before {
  background-color: rgb(255, 255, 255);
  color: black;
}

div.Shivering-ACS .text-part .disrupt-class::after,
div.Shivering-ACS .text-part .risk-class::after {
  border: 0.25rem solid rgb(255, 255, 255);
}

div.Shivering-ACS .danger-diamond > .arrows {
  display: none;
}

div.Shivering-ACS .danger-diamond > .top-icon,
div.Shivering-ACS .danger-diamond > .right-icon,
div.Shivering-ACS .danger-diamond > .left-icon,
div.Shivering-ACS .danger-diamond > .bottom-icon {
  border: 0.1875rem solid transparent !important;
}

div.Shivering-ACS .danger-diamond > .top-icon::before,
div.Shivering-ACS .danger-diamond > .left-icon::before,
div.Shivering-ACS .danger-diamond > .right-icon::before,
div.Shivering-ACS .danger-diamond > .bottom-icon::before {
  background-color: transparent !important;
}

div.Shivering-ACS .danger-diamond > .top-quad,
div.Shivering-ACS .danger-diamond > .right-quad,
div.Shivering-ACS .danger-diamond > .left-quad,
div.Shivering-ACS .danger-diamond > .bottom-quad{
  box-shadow: 0 0 5px rgb(0, 0, 0);
  -webkit-backdrop-filter: brightness(2) contrast(1.1);
  backdrop-filter: brightness(2) contrast(1.1);
}

div.Shivering-ACS .danger-diamond .top-quad::before,
div.Shivering-ACS .danger-diamond .right-quad::before,
div.Shivering-ACS .danger-diamond .left-quad::before,
div.Shivering-ACS .danger-diamond .bottom-quad::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  z-index: 10;
}

/*-------------------------------------*/
/*---- MOBILE QUERY----*/
/*-------------------------------------*/

@media (max-width: 767px) {
#header {
    grid-template-areas: 
        'h1  . search user'
        'open-menu top-bar top-bar top-bar';
    grid-template-columns: 3rem 1fr 2.25rem auto;
    grid-template-rows: 2.75rem auto;
    height: auto;
    top: -2.75rem;
}
#top-bar .top-bar > ul { display: none; }
#top-bar .mobile-top-bar > ul { display: flex; }
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li {
    flex-grow: 1;
}
#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    padding-inline: .25em;
}

#side-bar {
    background-color: rgba(34, 32, 46, 0.75);
}

}

[[/code]]

[[code type="CSS"]]
/* Layout - half-height header*/
:root {
  --display-mode: 43vh;
}
[[/code]]

[[code type="CSS"]]
/* Layout - flattened header*/
:root {
  --display-mode: 3em;
  --prologue-setting: hidden;
  --prologue-author-setting: hidden;
}
[[/code]]

/* Presets */
[[code type="CSS"]]
/* Theme - Macau*/
:root {
  --bg-img: url(https://scp-wiki.wikidot.com/local--files/theme:shivering-night/Macau_Skyline_%2528157820121%2529.webp);
  --link-color: 65, 165, 155;
  --new-link-color: 95, 170, 150;
}
[[/code]]

[[code type="CSS"]]
/* Theme - Kua Lumpur*/
:root {
  --bg-img: url(https://scp-wiki.wikidot.com/local--files/theme:shivering-night/jlp.webp);
  --link-color: 173, 203, 64;
  --new-link-color: 235, 255, 0;
}
[[/code]]

[[code type="CSS"]]
/* Theme - Dublin*/
:root {
  --bg-img: url(https://scp-wiki.wikidot.com/local--files/theme:shivering-night/1920px-Samuel_Beckett_Bridge_at_Sunset_%25289618233806%2529.webp);
  --link-color: 219, 48, 43;
  --new-link-color: 215, 85, 70;
}
[[/code]]

[[code type="CSS"]]
/* Theme - Buenos Aires*/
:root {
  --bg-img: url(https://scp-wiki.wikidot.com/local--files/theme:shivering-night/1280px-Buenos_Aires_Nachts_Hafeneinfahrt.webp);
  --link-color: 64, 124, 238;
  --new-link-color: 95, 158, 214;
}
[[/code]]

[[code type="CSS"]]
/* Theme - Cape Town*/
:root {
  --bg-img: url(https://scp-wiki.wikidot.com/local--files/theme:shivering-night/Cape_Town_%2528ZA%2529%252C_Sea_Point%252C_Nachtansicht_--_2024_--_1867-70_-_2.webp);
  --link-color: 225, 171, 43;
  --new-link-color: 240, 222, 135;
}
[[/code]]

[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:toggle-sidebar]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/1);

/* {$half-height}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/2);
/{$half-height} */

/* {$low-height}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/3);
/{$low-height} */

/* {$mo}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/4);
/{$mo} */

/* {$kl}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/5);
/{$kl} */

/* {$dub}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/6);
/{$dub} */

/* {$ba}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/7);
/{$ba} */

/* {$ct}/
@import url(https://scp-wiki.wdfiles.com/theme:shivering-night/code/8);
/{$ct} */

:root {
  --prologue: "Hark, the thrum of the city";
  --prologue-setting: visible;
  --prologue-author: "—where alleys intersect, a chill.";
  --prologue-author-setting: visible;
  --introduction: "The sun had long since lurched towards the west. Over the mountain, golden threads wove vivaciously among scarlet hues and aubergine, resembling the lid of a cigar box. The palm and banana trees that blanket the landscape, baked by the poisonous sun, have dried up into yellow and loose curls like cigar tobacco. The Sun sets quickly in the South, dusk scarcely the blink of an eye. One moment the sun clings to the horizon fervently still, and yet in the next, long before you know it-- where the trail disappears amidst mist-blurred canopies and the green smears they cast -- it's already been replaced by a sliver of moon.";
  --introduction-setting: auto;
}
[[/module]]

Shivering Night Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source