Janitor's Closet Theme

Link to article: Janitor's Closet Theme.

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

(none)

```
blockquote
```
```
greenbox
```
```
greenbox
```
```
redbox
```
```
redbox
```

[[iftags +theme]]

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

[[>]]
[[module rate]]
[[/>]]

[[include :scp-wiki:info:start]]
This is a rating box with a credit module.

The cleanliness is truly guaranteed.
[[include :scp-wiki:info:end]]

+ What's This?

This is the Janitor's Closet Theme made by [[*user winkwonkboi]] for pages under the Cleanliness Guaranteed* series.

> @@[[include :scp-wiki:theme:janitor-closet]]@@

To implement this theme, copy and paste the above code at the top of your article.

----

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Ajanitor-closet/173canon.jpg|caption=bingo bongo|width=300px]]

+ Examples

A horizontal rule is created by using five hyphens @@"-----"@@ which stretches across the page unless contained inside a div block (eg: a blockquote). Lines separating sections of this page are horizontal rules.

[# Unvisited link.]
[[[theme:janitor-closet|Visited link.]]]

[[collapsible show="+ This is a collapsible." hide="- Close collapsible."]]
Titles are made by putting one to six pluses "+" at the beginning of the line.

+ Title One
++ Title Two
+++ Title Three
++++ Title Four
+++++ Title Five
++++++ Title Six
[[/collapsible]]

----

[[tabview]]
[[tab Tab One]]
This tab contains one line.
[[/tab]]
[[tab Tab Two]]
This tab contains two lines.

The second line being this one.
[[/tab]]
[[tab Tab Three]]
This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.

This tab contains many lines.
[[/tab]]
[[tab Tab Four (ft. Very Unnecessarily Long Title)]]
It's fun having fun.
[[/tab]]
[[tab Empty Tab]]

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

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

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

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

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

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

[[/tab]]
[[tab Empty Tab]]
You just lost the game.
[[/tab]]
[[/tabview]]

@@ @@

[[div class="blockquote"]]
Hello, this is a blockquote.
----
They can be make by using a div block

> or by adding ">" at the beginning of the line.
>> Nested blockquotes.[[footnote]]This is a footnote.[[/footnote]]
[[/div]]

@@ @@

[[=]]
[[div class="greenbox"]]
This is a green box.

{{@@[[div class="greenbox"]]@@}}
[[/div]]

@@ @@

[[div class="redbox"]]
This is a red box.

{{@@[[div class="redbox"]]@@}}
[[/div]]
[[/=]]

@@ @@

||~ Why, yes. ||~ This is a table. ||
|| I'm sure || you know ||
|||| how to make one of these, right? ||

----

+ Source Code

[[collapsible]]
[[code type="CSS"]]
@import url('https://api.fonts.coollabs.io/css2?family=Patua+One&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Afacad+Flux:wght@100..1000&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

div#container-wrap {
  background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ajanitor-closet/bg.jpg') top left repeat-x;
  background-size: 100%;
}

#header {
  background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Ajanitor-closet/lightlogo.png');
}

#header h1 span,
#header h2 span {
  text-shadow: none;
  color: transparent;
}
 
#header h1 span::before {
  content: 'Safe Cleanup Professionals';
  font-family: "Patua One", serif;
  color: #efefef;
  text-shadow: 0rem 0rem 0.3125rem #000000;
}

#header h2 span::before {
  content: 'Sanitize, Cleanse, Polish';
  color: #efefef;
  font-family: "Afacad Flux", serif;
  font-style: italic;
  text-shadow: none;
}

#search-top-box-input, 
#search-top-box-input:hover, 
#search-top-box-input:focus {
  background-color: #ffbb55;
  color: #0e0e0e;
}
 
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
  background-color: #ffbb55;
  border: none;
  color: #0e0e0e;
  background-image: none;
}

#login-status, 
#login-status a {
  color: #ffbb55;
  text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
}
 
#account-options li a, 
#account-options li a:hover {
  color: #ffbb55;
  text-shadow: none;
}

#account-options {
  border: 1px solid #ffbb11;
}
 
#account-options ul {
  background-color: #0e0e0e;
}

#top-bar {
  background: linear-gradient(to right, transparent 60%, #0e0e0e 85%, transparent 100%);
}

#top-bar ul li:hover a:hover {
  background: #ffbb11;
  color: #0e0e0e;
}

#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
  background: #0e0e0e;
  color: #ffbb55;
}

div.page-rate-widget-box .rate-points {
  background-color: #ffbb55;
  color: #0e0e0e;
  border: none;
}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
  background-color: #16161f;
  border-top: none;
  border-bottom: none;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
  background: transparent;
  color: #ededed;
}

.page-rate-widget-box .rateup a:hover {
  background: #29AB87;
  color: #0e0e0e;
}

.page-rate-widget-box .ratedown a:hover {
  background: #C21807;
  color: #0e0e0e;
}

.page-rate-widget-box .cancel {
  background-color: #ffbb55;
  border: none;
}

.page-rate-widget-box .cancel a {
  color: #0e0e0e;
}

.page-rate-widget-box .cancel a:hover {
  background: #ffbb55;
  color: #0e0e0e;
}

#page-content .rate-box-with-credit-button {
  background-color: #ffbb55;
  border: none;
}

#page-content .rate-box-with-credit-button .creditButton p a {
  border-left-color: #0e0e0e;
}

#page-content .rate-box-with-credit-button .creditButton a {
  color: #0e0e0e;
}
 
#page-content .modalbox {
  background: #0e0e0e;
  border: dotted 1px #ffbb55;
  color: #ededed;
  box-shadow: none;
}

#side-bar .heading,
#interwiki .heading {
  color: #C21807;
  border-color: #C21807;
  font-family: "Source Serif 4", serif;
  font-size: 100%;
  text-align: right;
}

#side-bar div.side-block, 
#side-bar .side-block.media, 
#side-bar .side-block.resources,
#interwiki .side-block {
  background: #0e0e0e;
  border: 1px solid #29AB87;
}

#page-title {
  color: #ffbb55;
  font-family: "Afacad Flux", serif;
  font-weight: bold;
  font-size: 250%;
  text-align: center;
  text-shadow: 0rem 0rem 0.3125rem #000000;
} 

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff;
  font-family: "Source Serif 4", serif;
}

h2 {
  font-weight: bold;
}

a,
#side-bar a,
#interwiki a {
  color: #29AB87;
}
 
a:visited,
#side-bar a:visited,
#interwiki a:visited {
  color: #194d3e;
}

body {
  background-color: #16161f;
  color: #ededed;
}

.yui-navset .yui-content {
  background: #0e0e0e;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
  background-color: #e89c2a;
  background-image: none;
  border: none;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
  background-color: #ffbb11;
  background-image: none;
  border: none;
  color: #0e0e0e;
}

.yui-navset .yui-content {
  background: #0e0e0e;
  border: 1px dotted #ffbb11;
}

.yui-navset .yui-nav {
  border: none;
  padding-bottom: 1px;
}
 
.yui-navset .yui-nav a em {
  border: none;
}

#toc {
  background-color: #0e0e0e;
  border: 1px solid #ffbb11;
}

blockquote,
div.blockquote {
  background: #0e0e0e;
  border: 3px solid #ffbb11;
}

table.wiki-content-table th {
  background: #ffbb11;
  border: 1px solid #e89c2a;
  color: #0e0e0e;
}

.scp-image-block .scp-image-caption {
  background-color: #0e0e0e;
  border: 1px solid #ffbb11;
}

.hovertip {
  background: #0e0e0e !important;
  border: solid 0.0625rem #ffbb11 !important;
  color: #ffffff;
  text-shadow: none;
  opacity: 0.95;
}

.owindow, 
.owindow h1, 
.owindow .button-bar a {
  color: #0e0e0e;
  text-shadow: none;
}

.owait, 
.osuccess {
  background-color: #0e0e0e;
  color: #ffffff;
  text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
  border: solid 0.0625rem #ffbb11;
  opacity: 0.95;
}

form div.sub {
  color: #ffffff;
}

#lock-info {
  color: #0e0e0e;
  text-shadow: none;
}

.greenbox {
  display: block;
  background: #0e0e0e;
  border: 3px solid #29AB87;
  padding: 0.5rem;
}

.redbox {
  display: block;
  background: #0e0e0e;
  border: 3px solid #C21807;
  padding: 0.5rem;
}

@media only screen and (max-width: 56.25rem) {
  #header h1 span::before {
    content: 'Safe Clean Pros.';
    font-size: 1.5rem;
  }

  #top-bar .open-menu a {
      border: 0.2em solid #ffbb11;
      background-color: #0e0e0e;
      color: #ffbb11;
  }

  #page-title {
    font-size: 200%;
  }

  #side-bar {
    background-color: #16161f;
  }
}
[[/code]]
[[/collapsible]]

@@ @@

[[footnoteblock]]

[[include :scp-wiki:component:license-box-theme]]
=====
> **Filename:** bg.jpg
> **Name:** Hallway01
> **Author:** Stuart McAlpine
> **License:** CC BY 2.0
> **Source Link:** [https://www.flickr.com/photos/54789991@N06/5678640520 Flickr]

> **Filename:** 173canon.jpg
> **Name:** peanuts
> **Author:** Dean Hochman
> **License:** CC BY 2.0
> **Source Link:** [https://www.flickr.com/photos/17997843@N02/11725696795 Flickr]

> **Filename:** lightlogo.png
> **Author:** [[*user radian628]]
> **License:** CC BY-SA 3.0
> **Source Link:** SCP Foundation
=====
[[include :scp-wiki:component:license-box-end]]
[[/iftags]]

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

Janitor's Closet Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source