Parawatch Anon Theme

Link to article: Parawatch Anon Theme.

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

(none)

```
blockquote
```
```
blockquote
```
```
code
```
```
title
```
```
title
```
```
code
```
```
blockquote
```
```
code
```
```
blockquote
```

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

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

[[iftags +theme]]
[[>]]
**Rating:**
[[module Rate]]
**Rating w/ Info Pane:**
[[include :scp-wiki:info:start]]
[[<]]
[[module ListPages name="="]]
%%title%%
**Author:** %%created_by_linked%%
Published on %%created_at|%d %b %Y%%
[[/module]]

Thank you to both [[*user Croquembouche]] and [[*user stormbreath]] for approval.
----
> **Filename:** gradient-anon.png
> **Author:** [[*user The Great Hippo]]
> **License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aanon/gradient-anon.png
> **Note:** Edited by [[*user Lt Flops]]. Changed gradient tone.

> **Filename:** parawatch-anon.png
> **Author:** [[*user The Great Hippo]]
> **License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aanon/parawatch-anon.png
> **Note:** Edited by [[*user Lt Flops]]. Recoloured logo.

> **Filename:** rook-anon.png
> **Author:** [[*user The Great Hippo]]
> **License:** [https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aanon/rook-anon.png
> **Note:** Edited by [[*user Lt Flops]]. Recoloured logo.
[[/<]]
[[include :scp-wiki:info:end]]
[[/>]]

[[div class="blockquote"]]
[[=]]
+* What Is This?
[[/=]]
----
This is the Parawatch Anon Theme, by [[*user Lt Flops]].

It is a variant version of the **[[[theme:creepypasta|Creepypasta Theme]]]**, created by [[*user The Great Hippo]].
[[/div]]

[[div class="blockquote"]]
[[=]]
+* How to Use
[[/=]]
----
To use this theme, please copy this syntax onto the top of your page:

[[div class="code"]]
@@[[include :scp-wiki:theme:creepypasta]]@@
@@[[include :scp-wiki:theme:anon]]@@
[[/div]]

[[span class="title"]]What is this theme used for?[[/span]]

This theme provides a different colour scheme for the **[[[parawatch-hub|Parawatch Wiki]]]** forum structure.

It is suitable for use in Parawatch articles.

[[span class="title"]][OPTIONAL][[/span]]

If, for some reason, you wish to continue using the pastel yellow from the Creepypasta Theme, copy this onto your page //under// the above code:

[[div class="code"]]
@@[[module CSS]]@@
@@ :root{@@
@@     --fg-dark: hsl(45, 94%,82%);@@
@@     --fg-accent-light: hsl(60, 100%, 90%);@@
@@     --fg-accent: hsl(60, 100%, 80%);@@
@@     --fg-accent-dark: hsl(60, 100%, 75%);@@
@@     --fg-accent-dark-2: hsl(60, 53%, 59%);@@
@@     --fg-dark-2: hsl(59, 100%, 70%);@@
}

@@ div#header h1{@@
@@     background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Acreepypasta/parawatch.png) no-repeat;@@
}

@@ #side-bar div.menu-item img{@@
@@     filter: hue-rotate(230deg) invert(100%);@@
}
@@[[/module]]@@
[[/div]]

You could technically replace these variables with any colour. Because this code uses HSL colour values over the traditional Hexadecimal or RGB, simply change the hue -- **but please**, keep the saturation and lightness the same.

Personally, this goes against my vision for the theme. But, the option was requested, and so I thought I would make it clearly available.
[[/div]]

[[div class="blockquote"]]
[[=]]
+* Example Formatting
[[/=]]
[[/div]]

[[include component:image-block
|width=100px
|name=https://scp-wiki.wdfiles.com/local--files/theme%3Aanon/rook-anon.png
|caption=Image Block]]

+* L1 Heading

++* L2 Heading

+++* L3 Heading

++++* L4 Heading

+++++* L5 Heading

++++++* L6 Heading

**bold** | //italic// | __underline__ | --strikethrough-- | {{teletype}} | ^^superscript^^,,subscript,,

@@ @@

Type 4 hyphens ("@@----@@") to create a horizontal rule:

----

@@ @@

> Block Quote
>> Nested Block Quote

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

[[toc]]

[[div class="code"]]
@@fake code selector{@@
@@  fake code property: fake code value;@@
@@}@@
[[/div]]

[[[https://scp-wiki.wikidot.com/#|A link]]] ([https://google.com A link you probably visited])

[[collapsible show="+ A collapsible" hide="- A collapsible"]]
Something inside the collapsible
[[/collapsible]]

# numbered list
# list item
# list item

* bulleted list
* list item
* list item

[[tabview]]
[[tab First Tab]]
Tab content
[[/tab]]
[[tab Second Tab]]
Tab content
[[/tab]]
[[tab Third Tab]]
Tab content
[[/tab]]
[[tab Fourth Tab]]
Tab content
[[/tab]]
[[tab Fifth Tab]]
Tab content
[[/tab]]
[[/tabview]]

[[div class="blockquote"]]
[[=]]
+* Source Code
[[/=]]
[[/div]]

[[=]]
[[collapsible show="▷ Show Code ◁" hide="△ Hide Code △"]]
[[/=]]
[[<]]

[[code type="CSS"]]
/* Parawatch "Anon" Theme
 * [2021 Wikidot Theme]
 * Created by Lt Flops
 * Based on "Creepypasta Theme" by The Great Hippo and 4chan theme "Tomorrow"
**/

/* ---- COLOURS ---- */
 :root{
     --bg-light: hsl(0, 0%, 7%);
     --bg: hsl(210, 6%, 12%);
     --bg-dark: hsl(220, 7%, 17%);

     --bg-light-2: hsl(0, 0%, 11%);

     --fg-light: hsl(140, 3%, 83%);
     --fg: hsl(140, 3%, 78%);
     --fg-dark: hsl(207, 100%, 73%);

     --fg-dark-2: hsl(207, 100%, 56%);

     --fg-accent-light: hsl(207, 50%, 36.5%);
     --fg-accent: hsl(207, 90%, 63%);
     --fg-accent-dark: hsl(207, 32%, 52%);

     --fg-accent-2: hsl(140, 3%, 83%);
     --fg-accent-dark-2: hsl(207, 32%, 63%);

     --vivid-lime-green: hsl(112, 77%, 48%);
}

/* ---- GENERAL ---- */
 a, body, span{
     word-break: unset;
}
 a:visited, a:hover{
     color: var(--fg-accent-dark-2);
}
 a.newpage{
     color: hsl(237, 27%, 68%);
}
 ins, del{
     color: var(--bg-dark);
}
 .meta-title{
     color: var(--fg-light);
     border-bottom-color: var(--fg-light);
}
 #toc{
     background-color: unset;
}

/* ---- SCROLLBAR ---- */
 ::-webkit-scrollbar-track{
     background: var(--bg-dark);
}
 ::-webkit-scrollbar-thumb{
     background: var(--fg-dark);
     border: none;
}
 ::-webkit-scrollbar-thumb:hover{
     background: var(--fg-dark-2);
}
 textarea::-webkit-scrollbar-track{
     background: var(--bg);
}

/* ---- HEADER ---- */
 div#container-wrap{
     background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aanon/gradient-anon.png);
}
 div#header{
     background-image: none;
}
 div#header h1{
     position: relative;
     float: unset;
     top: 40px;
     max-height: 100%;
     height: 100%;
     margin: unset;

     background: url(https://scp-wiki.wdfiles.com/local--files/mkwhiteout-cia-pride/parawatchPRIDE.png) no-repeat;
}

/* ---- SIDE-BAR ---- */
 div#side-bar div.side-block{
     background-color: var(--bg-dark);
     border-color: var(--fg-dark-2);
     box-shadow: none;
}
 div#side-bar div.side-block.media,
 div#side-bar div.side-block.resources{
     background: var(--bg-dark);
}
 div#side-bar div.side-block div.heading,
 div#side-bar div.collapsible-block-unfolded-link,
 div#side-bar div.collapsible-block-unfolded-link div.collapsible-block-link{
     color: var(--fg-dark-2);
     border-color: var(--fg-dark-2);
}
 #side-bar div.menu-item img{
     filter: hue-rotate(62deg) invert(100%);
}
 @media (max-width: 767px){
     #side-bar{
         background-color: var(--bg-dark);
    }
}

/* ---- TOP-BAR ---- */
 #top-bar a{
     color: var(--fg-accent-dark);
}
 #top-bar .open-menu a{
     color: var(--fg-dark-2);
     background-color: var(--bg-dark);
     border-color: var(--fg-dark-2);
}
 div.yui-navset div.yui-content{
     background-color: var(--bg);
}
 div.yui-navset ul.yui-nav a,
 div.yui-navset div.yui-navset-top ul.yui-nav a{
     color: var(--fg-accent);
     background-color: var(--bg-dark);
     border-color: var(--fg-light);
}
 div.yui-navset ul.yui-nav a:hover,
 div.yui-navset ul.yui-nav a:focus{
     color: var(--fg-accent-light);
     background-color: var(--bg-light);
}
 div.yui-navset ul.yui-nav .selected a,
 div.yui-navset ul.yui-nav .selected a:focus,
 div.yui-navset ul.yui-nav .selected a:hover{
     background-color: var(--bg-light-2);
     border-color: var(--fg-accent);
}

/* ---- INFO BAR ---- */
 .info-container{
     --linkColour: var(--fg);
     --barColour: var(--bg-dark);
}

/* ---- INFO MODULE ---- */
 .creditButton p a{
     color: var(--fg);
}
 .creditButton p a:hover,
 .creditButtonStandalone p a:hover{
     color: var(--vivid-lime-green) !important;
}
 #page-content .modalbox{
     background: var(--bg) !important;
     box-shadow: none !important;
}
 .close-credits,
 .credit-back{
     filter: hue-rotate(62deg) invert(100%) brightness(150%);
}
 div#footer{
     background: var(--bg-dark);
}
 #license-area{
     color: var(--fg);
}

/* ---- INTERWIKI ---- */
 iframe.scpnet-interwiki-frame{
     border-color: var(--fg-dark-2);
}
 #interwiki body{
     overflow: hidden;
}
 #interwiki .side-block{
     background-color: var(--bg-dark);
     border-color: var(--fg-dark-2);
     box-shadow: none;
}
 #interwiki .menu-item img{
     filter: hue-rotate(213deg) saturate(1.1364) brightness(2.7037);
}
 #interwiki .menu-item a{
     color: var(--fg-dark);
}
 #interwiki .heading{
     color: var(--fg-dark-2);
     border-color: var(--fg-dark-2);
}


/* ---- RATING MODULE ---- */
 .page-rate-widget-box,
 .rate-box-with-credit-button{
     box-shadow: none;
}
 div.page-rate-widget-box .rate-points,
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a,
 .page-rate-widget-box .cancel a,
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover,
 .page-rate-widget-box .cancel a:hover{
     color: var(--fg);
}

/* ---- LICENSEBOX ---- */
 .licensebox .collapsible-block-link{
     color: var(--fg-accent-dark);
}

/* ---- FOOTNOTE HOVERS ---- */
 .hovertip{
     box-shadow: none;
}

/* ---- EDITING WINDOWS ---- */
 .owindow{
     border-color: var(--fg-dark-2);
}
 .owindow,
 .owindow h1,
 .owindow h2,
 .owindow h3,
 .owindow h4,
 .owindow h5,
 .owindow h6{
     color: var(--fg);
}
 .owindow{
     background-color: var(--bg-dark);
}
 .owindow .title{
     background-color: var(--bg);
}
 .owindow a,
 .owindow a:visited{
     color: var(--fg-accent-dark);
}
 .owindow .active{
     color: var(--fg-dark-2);
}
 .owindow .content.modal-body img{
     background-color: var(--bg-dark) !important;
}
 .owindow .button-bar a{
     background-color: transparent;
     border-color: var(--fg-dark-2);
}
 .owindow .button-bar a:hover,
 .owindow .button-bar a:focus{
     background-color: transparent;
     border-color: var(--fg-dark);
}
 table.page-files .highlight{
     background-color: var(--bg-light);
}
 input.text,
 input.text:focus,
 input.text:hover{
     color: var(--fg-light);
     border-color: var(--fg);
}
 .wd-editor-toolbar-panel{
     filter: hue-rotate(62deg) invert(83%);
}
 textarea{
     color: var(--fg);
     background-color: var(--bg-dark);
}
 .change-textarea-size a{
     color: var(--fg);
     background-color: var(--bg-dark);
}
 div#lock-info{
     background-color: var(--bg);
}

/* ---- SELECTION ---- */
 ::selection{
     background: hsl(207, 11%, 27%);
}

/* ---- PARAWATCH DIV BLOCK ---- */
 div.parapost{
     border-color: var(--bg-dark);
}
 span.title{
     color: var(--fg-dark-2);
     font-size: 110%;
     font-weight: bold;
     cursor: pointer;
     word-break: unset;
}
 span.title span{
     word-break: unset;
}
 span.title:hover,
 span.title:focus{
     text-decoration: underline;
}

/* -------- MOBILE MEDIA QUERY -------- */
 @media (max-width: 479px){
     div#header h1{
         background-position-y: .5em !important;
         background-size: 75% !important;
    }
}

/* -------- NOTE MEDIA QUERY -------- */
 @media (min-width: 480px) and (max-width: 580px){
     div#header h1{
         background-position-y: 1em !important;
         background-size: 60% !important;
    }
}

/* -------- MINI TABLET MEDIA QUERY -------- */
 @media (min-width: 581px) and (max-width: 767px){
     div#header h1{
         background-position-y: .25em !important;
         background-size: 65% !important;
    }
}

 @media (max-width: 767px){
     .open-menu a:hover{
         box-shadow: none !important;
    }
     #top-bar .open-menu a{
         background-color: var(--bg-dark);
         border-width: .1em;
    }
}

/* -------- TABLET MEDIA QUERY -------- */
 @media (min-width: 768px) and (max-width: 979px){
     div#header h1{
         background-size: 75% !important;
    }
}

/* ---- CODE SELECTORS [BACK-END] ---- */
 .hl-identifier,
 .hl-code,
 .hl-brackets{
     color: var(--fg);
}
 
 .hl-var{
     color: #21ff00;
}
 
 .hl-special,
 .hl-quotes{
     color: #ffff00;
}
 
 .hl-reserved{
     color: #00b2ff;
}
 
 .hl-number,
 .hl-string{
     color: #ff0020;
}
[[/code]]
[[/<]]
[[/collapsible]]
[[/iftags]]

Parawatch Anon Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source