Parawatch Anon Theme
rating: +35+x

Usage

To import this theme to your page, put the following anywhere inside it:

[[include :scp-wiki:theme:creepypasta]]

The standard CSS @import method won't work. This is intentional (thanks to stormbreathstormbreath for providing the CSS code!). Importing the theme using [[include]] adds your page to a list of Backlinks. This is useful for seeing what pages would be affected when this theme is updated, and allows any errors caused by that to be noticed and corrected much faster.

You can view any page's Backlinks by clicking "+ Options" at the bottom of the page, then "Backlinks".


Examples

rook.png

Parawatch Logo.

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.

More text


That's a horizontal rule

Nested blockquotes

This is a table
You should know how to make these
already
@import url('https://fonts.googleapis.com/css?family=PT+Mono&display=swap');
 
/*
    Powered on 2019/05/09 06:09:42
    [2019 Wikidot Theme]
    Created by The Great Hippo
    CC BY-SA 3.0
*/
 
/* FONTS AND COLORS */
 
:root {
    --bg-light: #262626;
    --bg: #1a1a1a;
    --bg-dark: #000000;
 
    --fg-light: #ffffff; 
    --fg:  #f2f2f2;
    --fg-dark: #e6e6e6;
 
    --fg-accent-light: #ffffcc;
    --fg-accent: #ffff99;
    --fg-accent-dark: #ffff80;
 
    --fg-accent-2: #ffffff;
 
}
 
body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'PT Mono', monospace;
}
 
a, a:visited {
    color: var(--fg-accent-dark);
}
 
h1, h2, h3, h4, h5, h6, #page-title {
    color: var(--fg-light);
    font-family: 'PT Mono', monospace;
}
 
ins, del {
    color: black;
}
 
/* HEADER */
 
div#container-wrap {
    background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Acreepypasta/gradient.png) top left repeat-x;
}
 
div#header {
    background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Acreepypasta/parawatch.png) 10px 40px no-repeat;
}
 
div#header h1 a span {
    /* hiding header text */
    font-size: 0px;
    color: transparent;
}
 
div#header h1 a:before {
    content: " ";
    color: rgb(24, 24, 24);
}
 
div#header h2 span {
    font-size:0px;
    padding: 4px;
}
 
div#header h2:after {
    content: " ";
    font-weight: bold;
    color: rgb(255, 224, 135);
    padding: 19px 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
    white-space: pre;
}
 
/* SIDE-BAR */
 
div#side-bar a,
div#side-bar a:visited {
    color: var(--fg-dark);
}
 
div#side-bar div.side-block {
    background: rgb(24, 24, 24);
    border: 1px solid #ffe087;
    box-shadow: 0 2px 6px #404040;
}
 
div#side-bar div.side-block.media,
div#side-bar div.side-block.resources {
    background: rgb(24,24,24);
}
 
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: rgb(255, 224, 135);
    border-color: rgb(255, 224, 135);
}
 
/* Recolors the image bullet points in the side-bar */
.side-block .menu-item > .image {
    filter: hue-rotate(230deg) invert(100%);
}
 
/* Recolors the Translation Module */
div.scpnet-interwiki-wrapper {
    filter: hue-rotate(230deg) invert(100%);
}
 
/* Recolors the panel that opens on mobile with the side-bar */
@media (max-width: 767px) {
    #side-bar{
        background-color: var(--bg);
    }
}
 
/* Recolors the drop down from the arrow next to username in the header */
#login-status ul a {
    color: var(--fg);
    background: var(--bg);
    border-color: var(--fg);
}
 
#login-status ul a:hover {
    color: var(--fg-dark);
}
 
/* Makes the code readable */
.hl-identifier, .hl-code, .hl-brackets {
    color: var(--fg);
}
 
/* Top-Bar */
#top-bar a { 
    color: var(--fg-dark);
}
 
#top-bar ul li ul {
    border-color: var(--fg-light);
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: var(-fg-light);
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background-color: var(--bg-light);
    color: var(--fg-dark);
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: var(--bg-dark); /* top bar hover background color */
    color: var(--fg-dark);
}
 
div.yui-navset div.yui-content {
    background: rgb(24, 24, 24);
}
 
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
    background: rgb(24, 24, 24);
    color: rgb(255, 237, 185);
    border: solid 1px #ffffff;
}
 
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav a:focus {
    background: rgb(40, 40, 40);
    color: rgb(255, 237, 185);
}
 
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: rgb(50, 50, 50);
    color: var(--fg);
    border: solid 2px #ffff99;
}
 
/* rating module */
 
.page-rate-widget-box .rate-points {
    background-color: var(--bg-dark) !important;
}
 
.page-rate-widget-box .rate-points,
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
    background-color: var(--bg-dark);
    color: white;
    border: 0;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel {
    background-color: var(--bg-dark);
    border: 0;
    border-left: 1px solid var(--fg-accent-light);
}
 
.page-rate-widget-box .rate-points,
.page-rate-widget-box .cancel a {
    border: 0;
 
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background-color: var(--bg-dark);
    color: white;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover {
    background-color: var(--bg-dark);
    color: white;
}
 
/* footnote hovers */
 
.hovertip {
    width: 20em;
    padding: 0.5em;
 
    border: 1px solid var(--fg-accent-light) !important;
    border-radius: 0.5em;
 
    background-color: #000000ee !important;
    box-shadow: 0 0 6px 1px #000000aa;
    z-index: 100;
}
 
.hovertip .f-heading {
    color: var(--fg-accent-light);
}
 
/* inputs */
 
input.text, input.button,
#search-top-box-input,
#search-top-box-form input[type=submit],
div.buttons input, input.button, button, file, a.button {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--fg-accent-2);
    border-radius: 0;
    font-size: 1em;
    outline: 0;
}
 
div.buttons input:hover, div.buttons input:focus,
input.button:hover, input.button:focus,
button:hover, button:focus,
file:hover, file:focus,
a.button:hover, a.button:focus {
    border-color: var(--fg-accent-2);
    background: transparent;
    color: var(--fg);
}
 
input.text:hover, input.button:hover,
input.text:focus, input.button:focus,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--fg-accent-2);
    outline: 0;
}
 
/* EDITING WINDOWS */
.owindow {
    color: #000;
}
 
.owindow h1, .owindow h2, .owindow h3, .owindow h4, .owindow h5, .owindow h6 {
    color: #000;
}
 
.owindow a {
    color: #272727;
}
 
table.page-files .highlight {
    background-color: #272727;
}
 
input.text {
    border: 1px dashed #000;
    color: #fff;
}
 
input.text:focus {
    border: 1px dashed #000;
    color: #fff;
}
 
input.text:hover {
    border: 1px dashed #000;
    color: #fff;
}
 
div#lock-info {
    background-color: var(--bg-light);
}
 
/* BLOCKQUOTES */
 
blockquote,
div.blockquote {
    background:  var(--bg-dark);
    border-width: 2px;
    border-style: solid;
    border-color: var(--bg-light);
}
 
/* Parawatch Forum Pseudo-Blockquotes */
div.parapost {
    background:  var(--bg-dark);
    border-width: 2px;
    border-style: solid;
    border-color: var(--bg-light);
    padding: 0 1em;
    margin: 1em 3em;
}
 
div.parapost.reply1 {margin: 1em 3em 1em 4em;}
div.parapost.reply2 {margin: 1em 3em 1em 5em;}
div.parapost.reply3 {margin: 1em 3em 1em 6em;}
div.parapost.reply4 {margin: 1em 3em 1em 7em;}
div.parapost.reply5 {margin: 1em 3em 1em 8em;}
 
@media (max-width: 479px) {
   div.parapost {margin: 1em 0;}
   div.parapost.reply1 {margin: 1em 0 1em 1em;}
   div.parapost.reply2 {margin: 1em 0 1em 2em;}
   div.parapost.reply3 {margin: 1em 0 1em 3em;}
   div.parapost.reply4 {margin: 1em 0 1em 4em;}
   div.parapost.reply5 {margin: 1em 0 1em 5em;}
}
 
@media (min-width: 480px) and (max-width: 580px) {
   div.parapost {margin: 0.5em;}
   div.parapost.reply1 {margin: 0.5em 0.5em 0.5em 1em;}
   div.parapost.reply2 {margin: 0.5em 0.5em 0.5em 1.5em;}
   div.parapost.reply3 {margin: 0.5em 0.5em 0.5em 2em;}
   div.parapost.reply4 {margin: 0.5em 0.5em 0.5em 2.5em;}
   div.parapost.reply5 {margin: 0.5em 0.5em 0.5em 3em;}
}
 
/* IMAGES */
 
#page-content .scp-image-block {
    border-color: var(--fg-accent);
    box-shadow: none;
}
#page-content .scp-image-block .scp-image-caption {
    border-color: var(--fg-accent);
    background-color: var(--bg-dark);
}
 
table.wiki-content-table th {
    background-color: var(--bg-dark);
}
 
hr {
    background-color: var(--fg);
}
 
.code {
    border: 1px dashed var(--fg);
    background-color: transparent;
 
    font-family: "Courier", "Courier New", "Roboto Mono", monospace;
    font-size: 1em;
}
 
/* INFO MODULE */
 
#page-content .rate-box-with-credit-button {
    background-color: var(--bg-dark); 
    border: 1px solid var(--bg-dark);
}
 
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: var(--fg-accent-light);
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
#page-content .modalbox {
    background: linear-gradient(var(--bg) 51px,var(--bg-light) 51px,var(--bg-light)) !important;
    color: var(--fg);
    box-shadow: 0 2px 6px #404040;
}
 
.close-credits,
.credit-back {
    filter: hue-rotate(230deg) invert(100%) brightness(150%);
}
 
#footer {
    background: var(--bg-light);
}
 
/* MOBILE CODE */
@media (max-width: 767px) { 
    div#header {
        background-size: 22em;
        background-position: 1em;
    }
 
    #top-bar .open-menu a {
        border: 0.2em solid var(--bg-light);
        background-color: #787878;
        color: var(--bg-light);
  }
}

Rating:

rating: +35+x

Rating w/ Info Pane:

rating: +35+x

What Is This?


This is the Parawatch Anon Theme, by Lt FlopsLt Flops.

It is a variant version of the Creepypasta Theme, created by The Great HippoThe Great Hippo.

How to Use


To use this theme, please copy this syntax onto the top of your page:

[[include :scp-wiki:theme:creepypasta]]
[[include :scp-wiki:theme:anon]]

What is this theme used for?

This theme provides a different colour scheme for the Parawatch Wiki forum structure.

It is suitable for use in Parawatch articles.

[OPTIONAL]

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:

[[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]]

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.

Example Formatting

rook-anon.png

Image Block

L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading
L6 Heading

bold | italic | underline | strikethrough | teletype | superscriptsubscript

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

fake code selector{
fake code property: fake code value;
}

A link (A link you probably visited)

  1. numbered list
  2. list item
  3. list item
  • bulleted list
  • list item
  • list item

Tab content

Source Code

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License