Pastel Skies Theme

Link to article: Pastel Skies Theme.

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

(none)

```
blockquote
```
```
blockquote
```
```
lite
```
```
blockquote
```
```
lite
```
```
blockquote
```
```
lite
```
```
blockquote
```

[[iftags +theme]]
[[include :scp-wiki:info:start]]
Rating with info module.
[[include :scp-wiki:info:end]]

[[>]]
[[module Rate]]
[[/>]]

[[include :scp-wiki:info:start-standalone]]
Info module without rating.
[[include :scp-wiki:info:end-standalone]]

This is an aesthetic theme created by [[*user Miss Lapis]] and co-created by [[*user radian628]].

To use the theme, insert the following:

> {{@@[[include :scp-wiki:theme:pastel-skies]]@@}}

Pastel Skies Theme is a [[[component:sigma-plus|]]] theme. It comes with a pre-styled ACS (see lower down in a collapsible) and [[[component:toggle-sidebar|]]].

----

[[include component:image-block name= https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/moon_icon.svg |caption=Image.|width=270px]]

A horizontal rule can be created with 4 hyphens "- - - -" as above. 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="+ Collapsible - Click me" hide="- Collapsible - Click me"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
[[/collapsible]]

@@ @@

= **bold** | //italic// | __underline__ | --strikethrough-- | {{teletype}} | ^^superscript^^,,subscript,, | [https://scp-wiki.wikidot.com/# Link]

[[toc]]

# numbered list
# list item
# list item

* bulleted list
* list item
* list item

@@ @@

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Ass Tab]]
This is a long tab. It contains a lot of text.[[footnote]] And a footnote. [[/footnote]]

This is a long tab. It contains a lot of text.[[footnote]] Vertical tabs are the wave. [[/footnote]] 

This is a long tab. It contains a lot of text.[[footnote]] They're the wave except for when you're on mobile, where I made the tabs horizontal again for accessibility. [[/footnote]]

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 Long ass tab with a long ass name, very long tab and very long name. It's so long it makes your head spin]]
This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.
[[/tab]]

[[tab This empty tab has a long ass name. It's empty and yet its name is long. It's taking too long]]
[[/tab]]

[[tab Stuff In Tabs Tab]]

[[include component:image-block name= https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/icon_night.svg |caption=Lorem ipsum|width=270px]]

+* Header in the Tabber

+++* Header in the Tabber But Smaller

+++++* Header in the Tabber But Even Smaller

Text — [https://scp-wiki.wikidot.com/theme:pastel-skies Link]

----

> Quote One
>> (Quote Two)

[[/tab]]

[[tab Empty Tab]]
[[/tab]]

[[tab Empty Tab]]
[[/tab]]

[[tab Empty Tab]]
[[/tab]]

[[tab Empty Tab]]
Got your nose.
[[/tab]]

[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

@@ @@

[[footnoteblock]]

@@ @@

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
>>
>>> You can also use {{@@[[div class="blockquote"]]@@}} to make a blockquote

[[div class="blockquote lite"]]

The theme also has a lightweight blockquote, if you're not into the default blockquote with the chunky border. 

----

You can summon it as such:

[[div class="blockquote lite"]]
{{@@[[div class="blockquote lite"]]@@}}
[[/div]]
[[/div]]

[[collapsible show="+ ACS demo" hide="- ACS demo"]]
Several different ACS colors, if you wanna use ACS on this theme for one reason or another

[[image https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/acs_demo_pastel_skies.png]]

[[/collapsible]]

@@ @@

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||
||Otherwise, ||go here ||
||||= [[[wiki-syntax|]]] ||

@@ @@

[[div class="blockquote"]]
[[=]]
++++* The header font is IBM VGA8x16.
The body font is Departure Mono.

{{The UI font is Terminus.}}
[[/=]]
[[/div]]

++ Source Code
[[collapsible]]
[[code type="css"]]
/*---------------------------------------------------*/
/*  PASTEL SKIES THEME
    BY MISS LAPIS
    [2025 Wikidot Theme]
 
    INSPIRED BY / BASED ON / BORROWS ELEMENTS FROM: 
    Fossil Theme by EstrellaYoshte: https://scp-wiki.wikidot.com/theme:fossil
    Generic Space Theme by EstrellaYoshte: https://scp-wiki.wikidot.com/theme:space
    Cosmonaut Theme by EstrellaYoshte: https://scp-wiki.wikidot.com/theme:cosmonaut
    Shivering Night Theme by Flea_ZER0: https://scp-wiki-cn.wikidot.com/theme:shivering-night
 
    WITH SPECIAL THANKS TO: 
    STRANGE MATTER ET AL FOR EMOTIONAL SUPPORT AND FOR HYPING ME UP
    SUGARUSH FOR WANTING A PINK THEME (I HOPE THE PINK COLOR SCHEME IS PINK ENOUGH)
    ADASBA, CROQUEMBOUCHE, HAYDENSAINTPASCAL, FISH^12, MANG GWAN, YOSSIPOSSI, PLAGUEPJP, AMAI IXCHEL, IGNOTA FOR TECHNICAL/AESTHETIC SUPPORT
    ESTRELLAYOSHTE FOR MAKING THEMES, FOR APPROVAL, AND FOR ADDITIONAL TECHNICAL SUPPORT */
/*---------------------------------------------------*/
 
/* fonts taken from Isolated Terminal Theme by EstrellaYoshte and from SCP-8980 by Yossipossi */
@import url('https://scp-wiki.wdfiles.com/local--files/theme:isolated-terminal/vga8.css');
@import url('https://scp-wiki.wdfiles.com/local--files/theme:isolated-terminal/terminus.css');
@import url('https://scp-wiki.wikidot.com/local--files/scp-8980/departuremono.css');
 
    /*---------------------------------------------------*/
    /*----------------------- ROOT ----------------------*/
    /*---------------------------------------------------*/
 
:root {
    --header-font: 'mxplus_ibm_vga_8x16regular', monospace;
    --title-font: 'mxplus_ibm_vga_8x16regular', monospace; 
    --body-font: 'Departure Mono', monospace; 
    --UI-font: 'terminus_ttfmedium', monospace; 
 
    --header-title: "⠀⠀⠀";
    --header-subtitle: " ";
 
    --sp_header-title-scale: 1.5;
    --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw));
    --sp_header-logo: unset;
    --sp_header-logo-size: 25rem;
    --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.9 + 5vw));
    --sp_header-height: 20rem;

    --sp_top-bar-height: 2rem;
    --sp_top-bar-gradient-top-color: rgba(var(--top-bar-color), 0.8);
    --sp_top-bar-gradient-bottom-color: rgba(var(--top-bar-color), 0.8);
    --sp_top-bar-link-hover-background: rgba(var(--lighter-pink), 0.8);
    --sp_top-bar-link-hover-color: rgb(var(--dark-purple));
    --sp_dropdown-background: rgb(var(--light-pink));
    --sp_dropdown-link-hover-color: rgb(var(--dark-pink));
    --sp_dropdown-link-hover-background: rgb(var(--light-red));
 
    --sp_tab-text-color: rgb(var(--dark-purple));
    --sp_tab-background: rgb(var(--light-red));
    --sp_tab-border-color: transparent;
    --sp_tab-hover-text-color: rgb(var(--dark-purple));
    --sp_tab-hover-background: rgba(var(--light-purple), 0.4);
    --sp_tab-hover-border-color: transparent;
    --sp_tab-selected-text-color: rgb(var(--dark-purple));
    --sp_tab-selected-background: rgb(var(--light-pink));
    --sp_tab-selected-border-color: transparent;
 
    --sp_rate-module-text-color: rgb(var(--text-color));
    --sp_rate-module-background: rgb(var(--lighter-pink));
    --sp_rate-module-sub-color: rgb(var(--light-red));
    --sp_rate-module-active-color: var(--sp_rate-module-background);
    --sp_rate-module-button-color: var(--sp_rate-module-background);
    --sp_rate-module-button-background: var(--sp_rate-module-background);
    --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color);
    --sp_rate-module-button-hover-background: rgb(var(--light-pink));
 
    --sp_hovertip-background: rgb(var(--lighter-pink));
    --sp_hovertip-border: var(--border-big) rgb(var(--border-color-general));
 
/* ---------- custom colors and vars ---------- */
    --light-purple: 192, 163, 217; 
    --light-pink: 238, 178, 203; 
    --lighter-pink: 250, 207, 225;
    --light-red: 250, 207, 207; 
    --dark-purple: 86, 46, 96; 
    --dark-pink: 129, 54, 101; 
    --white: 255, 255, 255; 
    --text-color: 32, 21, 51;

    --bg-color: 184, 189, 231;
    --lowest-sky: 243, 199, 216;

    --border-color-general: 199, 123, 169;
    --top-bar-color: var(--bg-color);
    --selection-color: 146, 63, 112;
    --og-selection-color: 0, 120, 215;
 
    --border-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/bordir.svg) 10;
    --cloud-background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/cloudy_dusk_new.png);
    
    --radius: 1.4rem;
    --border-big: 0.3em solid;
    --border-small: 0.08em solid;
    --button-border: 0.3rem outset;
    --pink-border-filter: invert(91%) sepia(13%) saturate(7071%) hue-rotate(282deg) brightness(85%) contrast(80%);
    --dark-purple-filter: invert(19%) sepia(28%) saturate(1641%) hue-rotate(245deg) brightness(93%) contrast(87%);
 
    /*---------------------------------------------------*/
    /*------------------- PIXEL BORDER ------------------*/
    /*---------------------------------------------------*/
    /*---------------- CODE FROM CODEPEN ----------------*/
    /*-----------------LICENSED UNDER MIT ---------------*/
    /*---------------------------------------------------*/
    /*---- https://codepen.io/makewistful/pen/ezOGJK ----*/
    /*---------------------------------------------------*/
 
    --pixel-bg: var(--light-red);
    --pixel-border: var(--dark-purple);
    --pixel-border-2: var(--pixel-bg);
    --pixel-border-3: var(--pixel-border);
    --pixel: .3rem; /* Pixel size */
 
    --the-border-itself: /* Inner Background Color */
     0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) rgb(var(--pixel-bg)),
     0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) rgb(var(--pixel-bg)),
 
    /* Pixel Border Layer 1 */
     calc(var(--pixel) * -1) 0 0 0 rgb(var(--pixel-border)),
     var(--pixel) 0 0 0 rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -2) 0 0 rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 2) 0 0 rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border)),
     0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border)),
 
    /* Pixel Border Layer 2 */
     calc(var(--pixel) * -2) 0 0 0 rgb(var(--pixel-border-2)),
     calc(var(--pixel) * 2) 0 0 0 rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -1) 0 var(--pixel) rgb(var(--pixel-border-2)),
     0 var(--pixel) 0 var(--pixel) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -4) 0 0 rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 4) 0 0 rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-2)),
     0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-2)),
 
    /* Border Layer 3: --pixel-border-3 */
     calc(var(--pixel) * -3) 0 0 0 rgb(var(--pixel-border-3)),
     calc(var(--pixel) * 3) 0 0 0 rgb(var(--pixel-border-3)),
     0 0 0 calc(var(--pixel) * 2) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -3) 0 var(--pixel) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 3) 0 var(--pixel) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -5) 0 0 rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 5) 0 0 rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-3)),
     0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) rgb(var(--pixel-border-3));
 
    /*---------------------------------------------------*/
    /*-------------------- END OF ROOT ------------------*/
    /*---------------------------------------------------*/
}
 
    /*---------------------------------------------------*/
    /*------------------ MAIN ELEMENTS ------------------*/
    /*---------------------------------------------------*/
 
/* ---------- griddy ---------- */
#header {
    background: transparent;
    grid-template-areas:
        "login login login search"
        "top-bar top-bar top-bar top-bar"
        ". . . ."
        "h1 h1 . ."
        ". . . .";
    grid-template-rows: auto auto 1fr auto 1fr;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto auto;
}
/* -------------------- */
 
/* ---------- title ---------- */
#header h1 a {
  position: relative;
}

#header h2 { display: none; }
#header h1 a {
    font-family: var(--header-font); 
    text-shadow: none;
    font-weight: 700;
    line-height: 0.875;
    letter-spacing: -0.1rem;
    margin-bottom: 5rem;
    color: transparent;

    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/moon_icon.svg");
    background-size: var(--sp_header-logo-adaptive-size) auto;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.2s ease-out;
}

#header h1 a:is(:hover,:focus-within) {
    filter: drop-shadow(0 0 10px rgb(var(--light-red)));
}

#header::before {
    content: "";
    display: block;
    background: var(--sp_header-logo) no-repeat center;
    background-size: contain;
    grid-row: 3/6;
    grid-column: 1/3;
    justify-self: center;
    width: var(--sp_header-logo-adaptive-size);
}
 
#header h1 {
    margin-top: 5em;
}

#header h1, #header h2 {
  margin-left: initial;
  padding: 0;
  padding-inline-start: 0;
  float: none;
  max-height: initial;
  font-size: 1rem;
  text-align: center;
}

#header h1 a::before {
    content: var(--header-title);
    font-size: 15rem;
}
/* -------------------- */
 
/* ---------- user info and owindows ---------- */
#header-extra-div-1 {
    grid-area: login;
    background-color: rgba(var(--bg-color), 0.8);
}
 
#login-status {
    padding-inline-start: calc(var(--sp_area-min-margin) + 1.25rem);
    padding-inline-end: 2rem;
    padding-left: 5em;
    height: 30px;
    text-align: center;
    width: max-content;
    font-size: 0.9em;
    color: rgb(var(--dark-pink));
}
 
#login-status a {
    color: rgb(var(--dark-purple));
}
 
a#account-topbutton {
    display: grid;
    place-content: center;
    height: 69%;
    width: 1.75rem;
    padding: 0.2em;
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    font-size: 1.02em;
    color: rgb(var(--dark-purple));
    border: none;
}
 
a#account-topbutton:is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--dark-pink));
}
 
#account-options {
    background-color: rgb(var(--light-pink));
    border: none;
}
 
#account-options ul li a {
    text-align: center;
    color: rgb(var(--dark-purple));
    border-bottom: 0.08em solid rgb(var(--white));
}
 
#account-options ul li a:is(:hover, :active, :focus, :focus-within) {
    color: var(--dark-purple);
    background-color: rgb(var(--light-red));
}
 
.owindow {
    background-color: rgb(var(--lighter-pink));
    color: rgb(var(--text-color));
    border: var(--border-big) rgb(var(--border-color-general));
}
 
.owindow .title {
    cursor: initial;
    padding: 0.375rem 0.675rem;
    font-family: var(--header-font); 
    font-size: 190%;
    text-align:center;
    background-color: rgba(var(--bg-color), 0.7);
    color: rgb(var(--dark-purple));
    border-top: 0.08em solid rgb(var(--dark-purple));
    border-bottom: 0.08em solid rgb(var(--dark-purple));
 
    height: auto;
}
 
.owindow img {
    background-color: transparent!important;
}
 
.owindow a {
    color: rgb(var(--dark-purple));
}
 
.owindow:has(#user-abuse-report-button-hovertip) {
    background-color: rgb(var(--light-red));
    color: rgb(var(--text-color));
    box-shadow: var(--the-border-itself);
    border: unset;
}
 
.modal-body td img[src*="userkarma.php"] {
    filter: hue-rotate(150deg);
}
/* -------------------- */
 
/* ---------- search box ---------- */
#search-top-box-form {
    gap: 0;
    height: 100%;
}
 
#search-top-box-input, #search-top-box-form input[type=submit] {
    padding: 0.25rem;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
}
 
#search-top-box-form input.btn[type=submit] {
    box-shadow: none;
    background: rgb(var(--lighter-pink));
    border: none;
    font-size: 0;
    width: 2rem;
}
#search-top-box {
    --search-mask: 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);
}
#search-top-box::before {
    content: "";
    display: block;
    width: 2rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgb(var(--dark-pink));
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: var(--search-mask);
    mask-image: var(--search-mask);
    -webkit-mask-size: 1.05rem;
    mask-size: 1.05rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* -------------------- */
 
/* ---------- top bar ---------- */
#top-bar {
    border-bottom: 0.25em solid rgb(var(--dark-purple));
}
 
#top-bar div[class*="top-bar"] > ul > li { 
    flex-grow: 1; 
}

#top-bar div[class*="top-bar"]>ul>li>a {
    color: rgb(var(--dark-pink));
    font-weight: bold;
}
 
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    display: grid;
    padding: .425rem;
    border: none;
    border-bottom: 0.25em solid rgb(var(--dark-purple));
    font-size: 0.9em;
}
 
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    text-align: center;
    padding: .375rem .625rem;
    font-weight: bold;
    color: rgb(var(--dark-purple));
}
 
#top-bar .open-menu a {
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: 0.15em solid rgb(var(--dark-purple));
    background-color: rgba(var(--top-bar-color), 0.6);
    border-radius: 0;
    color: rgb(var(--dark-purple));
}
/* -------------------- */
 
/* ---------- sidebar ---------- */
div#side-bar {
    font-family: var(--UI-font);
    background-color: rgba(var(--dark-purple), 0.7);
    border-right: 0.08em solid rgb(var(--dark-purple));
    scrollbar-width: none;
}
 
:is(#side-bar, #interwiki) .heading {
    padding-left: 0;
    color: rgb(var(--dark-purple));
    font-family: var(--header-font);
    font-size: 1.2em;
    text-align: center;
    border-bottom-color: rgb(var(--dark-purple));
}
 
#side-bar a, #interwiki a { 
    color: rgb(var(--white)); 
}
 
#side-bar a:is(:hover, :active, :focus, :focus-within), #interwiki a:is(:hover, :active, :focus, :focus-within) { 
    text-decoration: underline;
}
 
:is(#side-bar, #interwiki) .side-block {
    background-color: rgba(var(--light-purple), 0.9);
    border-color: rgb(var(--dark-purple));
}
 
#side-bar .side-block.resources {
    background-color: rgba(var(--border-color-general), 0.9);
    border-color: rgb(var(--dark-purple));
}
 
#side-bar .side-block.media {
    background-color: rgba(var(--light-red), 0.9);
    border-color: rgb(var(--dark-purple));
}
 
.side-block.media a:nth-child(1) img {
    filter: hue-rotate(60deg);
}
.side-block.media a:nth-child(2) img {
    filter: hue-rotate(78deg);
}
.side-block.media a:nth-child(3) img {
    filter: hue-rotate(265deg);
}
.side-block.media a:nth-child(5) img {
    filter: hue-rotate(20deg);
}
.side-block.media a:nth-child(7) img {
    filter: hue-rotate(46deg);
}
/* -------------------- */
 
/* ---------- rating module ---------- */
:not(.rate-box-with-credit-button) > div.page-rate-widget-box,
div.rate-box-with-credit-button {
    border-radius: 0;
    border: var(--border-small) rgb(var(--border-color-general));
    font-size: 1.14em;
    font-family: var(--UI-font);
}
 
.page-rate-widget-box :is(.rateup, .ratedown, .cancel) a {
    display: block;
    height: 100%;
    width: 0.95em;
    text-align: center;
}
 
div.page-rate-widget-box .cancel a:hover { 
    background-color: var(--sp_rate-module-button-hover-background);
}
 
.creditButton p a:hover, .creditButtonStandalone p a:hover {
    background-color: var(--sp_rate-module-button-hover-background);
}
 
div.modalbox {
    background: rgb(var(--light-red));
    padding: 0.25rem 0.75rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
.modalbox > .credit {
    margin: 0.5rem;
}

.creditButtonStandalone p a {
    border-radius: 0;
    border: var(--border-small) rgb(var(--border-color-general));
    background-color: rgb(var(--lighter-pink));
}
/* -------------------- */
 
/* ---------- scrollbar ---------- */
::-webkit-scrollbar {
  width: 0.625rem;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--dark-pink));
  border: none;
}
::-webkit-scrollbar-track {
  background: rgb(var(--bg-color));
}
 
:root {
    scrollbar-color: rgb(var(--dark-pink)) rgb(var(--bg-color));
    scrollbar-width: thin;
}
/* -------------------- */
    /*---------------------------------------------------*/
 
    /*---------------------------------------------------*/
    /*------------------ SKY BACKGROUND -----------------*/
    /*---------------------------------------------------*/
#container {
    background-color: rgb(var(--bg-color));
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/cloudy_dawn_sky_new.png'), linear-gradient(0deg, rgba(var(--lowest-sky),1) calc(50vh - 15vw), rgba(var(--bg-color),1) calc(50vh - 15vw));
    background-size: 100dvw auto, auto;
    background-position: center, center;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    image-rendering: pixelated; 
}

:root {
  --cloud-background-gradient-transition: calc(100vh - 30vw);
}
 
#container::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: var(--cloud-background-image), linear-gradient(0deg, rgba(var(--light-purple),1) var(--cloud-background-gradient-transition), rgba(var(--bg-color),0) var(--cloud-background-gradient-transition));
    background-size: 100dvw auto, auto;
    background-position: right center, top 150%;
    background-repeat: no-repeat, no-repeat;
    image-rendering: pixelated; 
}
    /*---------------------------------------------------*/
 
    /*---------------------------------------------------*/
    /*----------------- BODY CONTAINER ------------------*/
    /*---------------------------------------------------*/
#main-content {
    background: rgba(var(--light-red), 0.6);
    background: linear-gradient(180deg,rgba(var(--light-red), 1) 0%, rgba(var(--light-red), 0.6) 15%, rgba(var(--light-red), 0.6) 85%, rgba(var(--light-red), 1) 100%);
    padding: 2.5rem 2.5rem 0 2.5rem;
    margin: 3rem auto;
    max-width: 53.5rem;
    color: rgb(var(--text-color));
    box-shadow: var(--the-border-itself);
    image-rendering: auto;
}

#content-wrap {
    margin: 0 auto;
}
    /*---------------------------------------------------*/
 
    /*---------------------------------------------------*/
    /*---------------------- FONTS ----------------------*/
    /*---------------------------------------------------*/
body {
    font-family: var(--body-font); 
    color: rgb(var(--text-color));
}

::selection {
    background-color: rgba(var(--selection-color), 0.72);
    color: rgb(var(--white));
}

a::selection {
    color: #e3edfa;
}
 
h1 { font-size: 2.1em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.2em; }
 
h1, h2, h3 {
    font-family: var(--header-font); 
    color: rgb(var(--dark-purple));
}
 
h4, h5, h6 {
    font-family: var(--header-font); 
    color: rgb(var(--dark-pink));
}
 
#page-title, .meta-title {
    font-family: var(--header-font); 
    color: rgb(var(--dark-purple));
    border-bottom: var(--border-small) rgb(var(--dark-pink));
    text-align: center;
    font-size: calc(var(--sp_header-title-size) * 0.8);
}
 
#main-content {
    font-size: 0.9em;
}
 
#main-content a:not(.yui-navset .yui-nav a, .collapsible-block a) {
    font-weight: bold;
    color: rgb(var(--dark-pink));
    text-decoration: underline;
}

tt {
    font-family: var(--UI-font);
    font-size: 1.2em;
}
    /*---------------------------------------------------*/

    /*---------------------------------------------------*/
    /*--------------- KEY PAGE COMPONENTS ---------------*/
    /*---------------------------------------------------*/
 
hr {
    background-color: rgb(var(--border-color-general));
}
 
/* ---------- blockquote ---------- */
blockquote, div.blockquote {
    display: flow-root;
    position: relative;
    border-color: transparent;
    border-radius: var(--radius); 
    padding: 0.25rem 1.325rem;
 
    background-color: rgb(var(--light-red));
    color: rgb(var(--text-color));
}
 
blockquote::after, div.blockquote::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 30px solid;
    border-image: var(--border-image) / 1rem;
    filter: var(--pink-border-filter);
    border-image-outset: 0.1em 0.1em 0.06em;
    pointer-events: none;
}
/* -------------------- */

/* ---------- lite blockquote ---------- */
div.blockquote.lite {
    border: var(--border-small) rgb(var(--border-color-general));
    border-radius: 0; 
}
div.blockquote.lite::after {
    border: transparent;
    border-image: unset;
}
/* -------------------- */

/* ---------- collapsible ---------- */
div[class*="collapsible-block"] {
    display: flow-root;
}
 
.collapsible-block-folded a.collapsible-block-link,
.collapsible-block-unfolded-link a.collapsible-block-link {
    display: block;
    padding: .53rem 1rem;
    color: rgb(var(--dark-purple)); 
}
 
.collapsible-block-folded a.collapsible-block-link:is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--dark-purple));
    background-color: rgb(var(--light-red));
    border-radius: var(--radius); 
    filter: unset;
    text-decoration: none;
}
 
.collapsible-block-folded, .collapsible-block-unfolded-link {
    position: relative;
    margin: 1rem auto;
    padding: 0;
    border-color: transparent;
    border-radius: var(--radius); 
    background-color: rgb(var(--light-pink)); 
    font-family: var(--header-font); 
    font-size: 140%;
 
    text-align:center;
}
 
:is(.collapsible-block-folded, .collapsible-block-unfolded-link)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}
 
.collapsible-block-folded:is(:hover, :active, :focus, :focus-within),
.collapsible-block-unfolded-link:is(:hover, :active, :focus, :focus-within){
    background-color: rgb(var(--light-red)); 
    color: rgb(var(--dark-purple));
    filter: unset;
}
 
:is(.collapsible-block-folded, .collapsible-block-unfolded-link):is(:hover, :active, :focus, :focus-within)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}
 
.collapsible-block-link:is(:hover, :active, :focus, :focus-within){
    color: rgb(var(--text-color));
}
 
.collapsible-block-unfolded {
    position: relative;
    margin: 1rem auto;
    border-color: transparent;
    border-radius: var(--radius); 
    background-color: rgb(var(--light-red)); 
    color: rgb(var(--text-color));
}
 
.collapsible-block-unfolded::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 30px solid;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.14em;
    pointer-events: none;
}
 
.collapsible-block-unfolded > *:nth-child(1){
    padding: 0;
    margin-top: 0;
}
 
.collapsible-block-unfolded > * {
    padding: .53rem 1rem;
}
/* -------------------- */

/*-------- tabs --------*/

:is(.yui-navset.yui-navset-top .yui-nav li a:where(:hover, :active, :focus, :focus-within)) {
    color: var(--sp_tab-hover-text-color);
    background: var(--sp_tab-hover-background);
    border-color: var(--sp_tab-hover-border-color);
}

div.yui-navset {
    display: grid;
    grid-template-areas: "tab content";
    grid-template-columns: 12.5rem minmax(0,1fr);
    align-items: flex-start;
    --_gap: .45rem;
    gap: var(--_gap);
    padding: var(--_gap);
    background-color: rgb(var(--light-pink));
    border-radius: var(--radius);
}

:is(div.yui-navset)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--pink-border-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}

.yui-navset .yui-nav {
    grid-area: tab;
    display: grid;
    border: none;
    gap: var(--_gap);
    font-size: clamp(.875em, calc(.5em + .675vw), .9125em);
    top: var(--_gap);
    position: static;
}

.yui-navset.yui-navset-top>.yui-nav>li {
    flex-grow: 0;
    position: relative;
    margin: 1.2rem;
    padding: .53rem 1rem;

    border-color: transparent;
    border-radius: var(--radius);

    font-family: var(--header-font); 
    font-size: 140%;
    text-align: center;
}

:is(.yui-navset.yui-navset-top>.yui-nav>li)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--pink-border-filter);
    border-image-outset: 0.1em;
    pointer-events: none;
}

:is(.yui-navset.yui-navset-top .yui-nav .selected a)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.22em;
    pointer-events: none;
}

:is(.yui-navset.yui-navset-top>.yui-nav>li a):is(:hover, :active, :focus, :focus-within)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border: unset;
    border-image: var(--border-image) / 1rem;
    filter: var(--dark-purple-filter);
    border-image-outset: 0.22em;
    pointer-events: none;
}

.yui-navset.yui-navset-top .yui-nav li a {
    border-radius: calc(var(--radius) - var(--_gap) + 0.02rem);
    border-width: .125rem;
    padding: .575em;
}
.yui-navset .yui-content {
    grid-area: content;
    align-self: stretch;
    border: none;
    border-radius: calc(var(--radius) - var(--_gap) + 0.01rem);
    padding: 0.325rem 1.25rem;
    background-color: rgba(var(--light-red), 0.8);
    min-height: var(--radius);
}
/* -------------------- */

/* ---------- tables ---------- */
table.wiki-content-table :is(th,td) {
    border-color: rgb(var(--border-color-general));
}
 
table.wiki-content-table th {
    background-color: rgb(var(--light-pink));
    color: rgb(var(--text-color));
}
 
table.wiki-content-table td {
    background: rgb(var(--light-red));
}
/* -------------------- */
 
/* ---------- image block ---------- */
.scp-image-block {
    border: none;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
    background: rgba(var(--bg-color), 0.25);
}
 
.scp-image-block.block-left { margin-left: 0; }
 
.scp-image-block.block-right { margin-right: 0; }
 
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--light-purple));
    border: unset;
    padding: 0;
    padding-top: 0.25rem;
    color: rgb(var(--text-color));
    font-weight: normal;
    font-size: .95em;
}
/* -------------------- */
 
/* ---------- TOC ---------- */
#toc {
    background-color: rgb(var(--lighter-pink));
    border: var(--border-big) rgb(var(--border-color-general));
}
/* -------------------- */
 
/* ---------- ACS ---------- */
div.anom-bar-container {
  --five-color: 150, 52, 103;
  --four-color: 113, 58, 142;
  --three-color: 81, 74, 143;
  --two-color: 68, 103, 140;
  --one-color: 70, 142, 126;
}
 
div.danger-diamond a {
    color: transparent!important;
}
 
div.anom-bar-container.clear-6 .top-center-box > div {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/blue_spaces.jpg");
    background-blend-mode: normal;
}
/* -------------------- */
 
/* ---------- code ---------- */
.code {
    font-weight: bold;
    background: rgb(var(--light-red));
    border: none;
}
 
pre {
    font-family: var(--UI-font);
    font-size: 1.15em;
}
 
.hl-code,
.hl-default,
.hl-brackets,
.hl-quotes,
.hl-string,
.hl-identifier {
    color: rgb(18, 18, 18);
}
.hl-special {
    color: rgb(60, 158, 155);
}
.hl-number {
    color: rgb(199, 158, 71);
}
.hl-reserved {
    color: rgb(50, 131, 214);
}
.hl-var, .hl-comment {
  color: rgb(255, 97, 136);
}
/* -------------------- */

    /*---------------------------------------------------*/
    /*------------------- BOTTOM HALF -------------------*/
    /*---------------------------------------------------*/
 
/* ---------- license area ---------- */
#footer,
#license-area {
    position: relative;
    z-index: 2;
    background-color: rgb(var(--light-purple));
    color: rgb(var(--text-color));
}
 
#footer a, #license-area a {
    color: rgb(var(--dark-purple));
}
 
#footer {
    padding-top: 1rem;
}
 
#license-area {
    padding-top: 0;
}
 
.hovertip {
    color: rgb(var(--text-color));
    font-family: var(--UI-font);
}
/* -------------------- */
 
/* ---------- buttons ---------- */
div.buttons input, input.button, button, a.button, .owindow .button-bar .btn {
    margin: 0.125rem;
    padding: 0.25rem 0.675rem;
    text-decoration: none;
    background-color: rgb(var(--dark-purple));
    border: var(--button-border) rgb(var(--light-purple));
    font-weight: bold;
    color: rgb(var(--white));
}
 
:is(div.buttons input, input.button, button, a.button, .owindow .button-bar a):is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--white));
    background-color: rgb(var(--border-color-general));
    border: var(--button-border) rgb(var(--light-purple));
    font-weight: bold;
}
 
a.action-area-close:is(:hover, :active, :focus, :focus-within) {
    background-color: transparent;
}
/* -------------------- */
 
/* ---------- really misc misc stuff ---------- */

textarea, input.text {
    font-family: var(--UI-font);
    font-size: 1.198em;
    background-color: rgb(247, 225, 225);
}

:is(textarea, input.text)::selection {
  background-color: rgb(var(--og-selection-color));
  color: rgb(var(--white));
}
 
#lock-info {
    border-color: rgb(var(--border-color-general));
    background-color: rgb(var(--light-pink));
    color: rgb(var(--text-color));
}
 
.page-source {
    font-family: var(--UI-font);
    font-size: 1.18em;
    background-color: rgb(var(--light-red));
    border: var(--border-big) rgb(var(--border-color-general));
}

.page-tags > span {
  border-top: none;
}
 
#edit-page-title {
    width: 100%;
}
 
.keycap {
    color: rgb(var(--dark-purple));
}
 
table.form td div.sub, form div.sub {
    color: rgb(var(--text-color));
}
/* -------------------- */
 
    /*---------------------------------------------------*/
 
    /*---------------------------------------------------*/
    /*---------------------- PHONE ----------------------*/
    /*---------------------------------------------------*/
@media only screen and (max-width: 1175px) {
#container::before {
    background-position: right center, center;
}
 
:root:root {
  --cloud-background-gradient-transition: calc(50vh - 17vw);
}
}
 
@media only screen and (max-width: 767.98px) {

:root {
    --sp_header-logo-size: 15rem;
}

:root:root {
  --cloud-background-gradient-transition: calc(50vh - 120px);
}

#login-status {
    padding-left: 3em;
}
 
#header h1 {
    padding-left: 0.8rem;
}    

#header h1 a::before {
    font-size: 9rem;
}

#header h1 a {
    margin-bottom: 4rem;
}

#header::before {
    grid-column: 2/3;
}
 
#top-bar div[class*="top-bar"] > ul > li {
    position: static;
}
 
#container {
    background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Apastel-skies/cloudy_dawn_sky_new.png'), linear-gradient(0deg, rgba(var(--lowest-sky),1) calc(75vh - 5vw), rgba(var(--bg-color),1) calc(55vh - 15vw));
    background-size: auto calc(var(--sp_header-height) + var(--sp_top-bar-height)), auto;
    background-position: right 15%, center;
}
 
#container::before {
    background-size: auto calc(var(--sp_header-height) + var(--sp_top-bar-height)), auto;
}

#content-wrap {
  position: relative;
  margin: 0 auto 0;
 
:root:root {
  --cloud-background-gradient-transition: calc(50vh - 120px);
}
 

#main-content {
    padding: 2.5rem 0.5rem 0 0.5rem;
}
 
.owindow:has(#user-abuse-report-button-hovertip) {
    margin: 3rem auto;
}

/* -------- tabs on phone -------- */
div.yui-navset {
    grid-template-areas:
        "tab"
        "content";
    grid-template-columns: minmax(0,1fr);
}
.yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
    position: static;
}

.yui-navset.yui-navset-top .yui-nav :is(li, .selected) {
  flex-grow: 1;
}
}

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

[[include :scp-wiki:component:license-box-theme
|author=Miss Lapis and radian628]]
> **Filename:** blue_spaces.jpg
> **License:** CC BY 3.0
> **Source Link:** [https://scp-wiki.wdfiles.com/local--files/scp-8600/spaces.jpg SCP Foundation Wiki]
>
> Image is a composite that incorporates the following image:
>
> **Filename:** Dragonfish600.jpg
> **Author:** NASA/JPL-Caltech/Univ. of Toronto
> **License:** Public Domain
> **Source Link:** [https://commons.wikimedia.org/wiki/File:Dragonfish600.jpg Wikimedia Commons]

> **Filename:** acs_demo_pastel_skies.png
> **License:** CC BY-SA 3.0
> **Source Link:** SCP Foundation Wiki
>
> Image is a composite that incorporates the following:
>
> **Name:** Anomaly Classification Bar
> **Author:** [[*user Woedenaz]]
> **License:** CC BY-SA 3.0
> **Source Link:** [https://scp-wiki.wikidot.com/component:anomaly-class-bar SCP Foundation Wiki]

> **Filename:** All other images (icon_night.svg, moon_icon.svg, bordir.svg, cloudy_dusk_new.png, cloudy_dawn_sky_new.png)
> **Author:** [[*user Miss Lapis]]
> **License:** CC BY-SA 3.0
> **Source Link:** SCP Foundation Wiki

> **Filename:** --the-border-itself and all corresponding variables
> **Author:** makewistful
> **License:** MIT
> **Source Link:** [https://codepen.io/makewistful/pen/ezOGJK Codepen]
[[include :scp-wiki:component:license-box-end]]
[[/iftags]]

[[include :scp-wiki:component:sigma-plus]]
[[include :scp-wiki:component:toggle-sidebar]]

[[module css]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Apastel-skies/1);
[[/module]]

[[div_]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Apastel-skies/1
]]
[[/div]]

Pastel Skies Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source