Classic SCP Foundation Theme

Link to article: Classic SCP Foundation Theme.

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

/* ==== PRESENTATION ==== */
 .templateInfo {
    margin: 1em 0;
    padding: 0 1em;

    background: var(--fill-bg);
    border: 1px solid var(--area-border);
}

```
width: 160px
```

```
templateInfo
```
```
templateInfo
```
```
code
```
```
templateInfo
```
```
classic-image-block
```
```
code
```
```
blockquote
```
```
templateInfo
```
```
blockquote
```
```
blockquote
```
```
blockquote
```

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

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

[[iftags +theme]]
[[module CSS]]
/* ==== PRESENTATION ==== */
 .templateInfo {
    margin: 1em 0;
    padding: 0 1em;

    background: var(--fill-bg);
    border: 1px solid var(--area-border);
}
[[/module]]

[[=image scp_foundation_logo.png style="width: 160px"]]

[[>]]
**Rating:**
[[module Rate]]

**Rating + Info Module:**
[[include :scp-wiki:info:start]]
[[<]]
**Classic SCP Foundation Theme**
**By:** [[*user Lt Flops]]
**Published on 21 Jul 2020**

Thank you to [[*user stormbreath]] and [[*user Croquembouche]] for looking this over.
[[/<]]
----
[[=]]
+++* [[[floppyphoenix|If you liked this, check out my Author Page!]]]
[[/=]]
[[include :scp-wiki:info:end]]

**Standalone Info Module:**
[[include :scp-wiki:info:start-standalone]]
[[include :scp-wiki:info:end-standalone]]
[[/>]]

@@ @@

[[div class="templateInfo"]]
[[=]]
+* What Is This?
[[/=]]
----
This is a modern version of the Classic SCP Foundation Theme.

It is adapted from Wikidot's “Shiny Theme”, which the SCP Wiki used as its main theme from 2008–2014.
[[/div]]

@@ @@

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

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

Unlike other themes, this theme does not have a logo.

**What is this theme used for?**

This theme exists to mimic the aesthetic of an older SCP database. Think a SCiPNET Access Terminal running legacy software from the late-90s to mid-2000s.

This theme is suitable for use in SCPs, Tales, and other pages.
[[/div]]

@@ @@

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

[[div class="classic-image-block"]]
|||| [[image base_image_frame.png]] ||
||||~ Classic Image Block _
(See Source Code) ||
[[/div]]

||~ header ||~ header ||~ header ||
|| cell-content || cell-content || cell-content ||

+ 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.
----
[[toc]]

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

[# A link] ([https://google.com A link you have probably visited])

# 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 Tab]]
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.

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.

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

This is a long tab. It contains a lot of text.
[[/tab]]
[[tab This empty tab has a really long name for some odd reason. I wonder why that is?]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

[[div class="blockquote"]]
This is a blockquote.

More text
-----
That's a horizontal rule.

> Nested blockquote
[[/div]]

@@ @@

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

@@ @@

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

[[<]]
[[code type="CSS"]]
/* Classic SCP Foundation Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Forked From Shiny Theme by Gabrys
**/

/* ======== HEADER AREA ======== */
/* ==== SELECTION ==== */
 ::selection {
    color: var(--key-color);
    background: var(--highlight-color);
}

/* ==== COMMON ==== */
 :root {
    /* == COLOUR SCHEME == */
    --green-light-1:	hsl(127, 50%, 94%);
    --green-light-2:	hsl(120, 100%, 77%);
    --red-light:	hsl(0, 49%, 91%);
    --red-strong:	hsl(355, 100%, 37%);
    --red-dark-1:	hsl(0, 70%, 35%);
    --red-dark-2:	hsl(353, 100%, 30%);

    --off-white:	hsl(0, 0%, 99%);
    --gray-light-1:	hsl(0, 0%, 93%);
    --gray-light-2:	hsl(0, 0%, 87%);
    --gray-light-3:	hsl(0, 0%, 83%);
    --gray-medium:	hsl(0, 0%, 67%);
    --gray-dark-1:	hsl(0, 0%, 40%);
    --gray-dark-2:	hsl(0, 0%, 27%);
    --off-black:	hsla(0, 0%, 0%, .95);
}

 :root {
    /* == COLOUR DEFINITIONS == */
    --accent-color: var(--red-dark-2);
    --fill-bg: var(--off-white);
    --key-color: var(--off-black);

    --area-border: var(--gray-light-2);
    --banner-primary-color: var(--gray-light-1);
    --banner-secondary-color: var(--red-dark-2);
    --highlight-color: var(--gray-light-3);
    --interwiki-bg: var(--green-light-1);
    --nav-bar-border: var(--gray-dark-2);

    --credit-btn-color: var(--gray-light-1);
    --credit-btn-hover-color: var(--green-light-2);
    --info-bar-color: var(--gray-dark-2);
    --link-color: var(--red-strong);
    --rate-bar-bg: var(--gray-dark-1);
    --tab-bg: var(--red-dark-1);
    --tab-hover-bg: var(--red-light);

    --special-border: var(--gray-medium);
    --special-btn-color: var(--gray-light-1);
    --special-text-color: var(--gray-light-1);
}

 :root {
    /* == FONTS == */
    --header-font: "Trebuchet MS", "Trebuchet", var(--body-font);
    --body-font: "Verdana", "Arial", "Helvetica", sans-serif;
}

 body {
    accent-color: var(--accent-color);
    color: var(--key-color);

    font-family: var(--body-font);
    overflow-wrap: break-word;
}

/* ==== SITE BANNER ==== */
 div#container-wrap {
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/classic_body_bg.png);
    background-repeat: repeat-x;
    background-size: auto;
}

 #header {
    background: 0;
}

 #header h1,
 #header h2 {
    margin: 0 0 0 -4px;
}

 #header h1 {
    max-height: 105px;
}

 #header h1 a,
 #header h2 span {
    color: transparent;
    text-shadow: none;
}

 #header h1 a {
    font-family: var(--header-font);
    letter-spacing: 0;
}

 #header h1 a::before,
 #header h2 span::before {
    text-shadow: none;
}

 #header h1 a::before {
    content: "The SCP Foundation";
    color: var(--banner-primary-color);
}

 #header h2 span::before {
    content: "To Secure, Contain, and Protect";
    color: var(--banner-secondary-color);
}

/* ==== SEARCH ==== */
 #search-top-box-form input[type="submit"] {
    color: var(--key-color);
    background: var(--special-btn-color);
    border: 1px solid var(--special-border);
    border-radius: 0;
    box-shadow: none;
    font-size: 100%;
    font-weight: normal;
}

 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus {
    color: var(--key-color);
    background: var(--highlight-color);
    border: 1px solid var(--special-border);
    box-shadow: none;
}

/* ==== TOP MENU ==== */
 #top-bar ul li,
 #top-bar ul li ul {
    box-shadow: none;
}

 #top-bar ul li ul {
    border-color: var(--nav-bar-border);
    border-style: solid;
    border-width: 0 1px 1px;
}

 #top-bar ul li a {
    border-color: var(--nav-bar-border);
    border-style: solid;
    border-width: 0 0 0 1px;
}

 #top-bar ul li a::before {
    content: "[";
}

 #top-bar ul li a::after {
    content: "]";
    position: relative;

 /* Top Menu has spaces after each bullet, which is why this is done: */
    left: -.3em;
}

 #top-bar ul li ul li a::before {
    content: unset;
}

 #top-bar ul li ul li a::after {
    content: unset;
}

 #top-bar ul li:nth-child(5) a::after {
    left: unset;
}

 #top-bar .top-bar > ul > li > a,
 #top-bar .mobile-top-bar > ul > li > a {
    font-weight: normal;
}

 #top-bar .top-bar > ul > li:hover > ul {
    margin-top: 1px;
}

 .mobile-top-bar {
    bottom: -.5px;
}

/* ==== LOGIN ==== */
 #login-status ul a {
    background: var(--special-text-color);
}

/* ==== SIDE MENU ==== */
 #side-bar {
    clear: both;
    padding: .78em;
    padding-bottom: 0;
    border: 1px solid var(--area-border);
    border-radius: 0;
    box-shadow: none;
}

 #side-bar .side-block {
    margin-bottom: .78em;
    background: var(--fill-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

 #side-bar .heading {
    padding-left: 0;
    color: var(--key-color);
    border-bottom: 1px solid var(--special-border);
}

/* ==== INTERWIKI ==== */
 #interwiki body {
    overflow: hidden;
}

 #interwiki .side-block {
    background: var(--interwiki-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

 #interwiki .heading {
    margin: 0;
    padding-left: 0;

    color: var(--key-color);
    border-color: var(--special-border);
}

 #side-bar a:visited,
 #interwiki a:visited {
    color: var(--link-color);
}

/* ======== CONTENT AREA ======== */
/* ==== INFO BAR ==== */
 .info-container {
    --barColour: var(--info-bar-color);
    --linkColour: var(--credit-btn-color);
}

 .info-container:hover {
    --linkColour: var(--credit-btn-hover-color);
}

/* ==== PAGE RATING ==== */
 .page-rate-widget-box {
    margin-right: 0;
    border-radius: 0;
    box-shadow: none;
}

 div.page-rate-widget-box .rate-points {
    background-color: var(--rate-bar-bg);
    border: none;
    border-radius: 0;
}

 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown {
    background-color: var(--area-border);
    border: none;
    font-weight: normal;
}

 .page-rate-widget-box .cancel {
    background-color: var(--area-border);
    border: none;
    border-radius: 0;
}

 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a {
    color: var(--key-color);
}

 .page-rate-widget-box .cancel a {
    color: var(--key-color);
    text-transform: lowercase;
}

 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover {
    color: var(--key-color);
    background: var(--special-text-color);
    text-decoration: underline;
}

 .page-rate-widget-box .cancel a:hover {
    color: var(--key-color);
    background: var(--special-text-color);
    text-decoration: underline;
}

/* ==== INFO MODULE ==== */
 #page-content .creditRate {
    margin-right: 0;
}

 #page-content .rate-box-with-credit-button {
    background: var(--rate-bar-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

 #page-content .creditButton p a,
 #page-content .creditButtonStandalone p a {
    color: var(--special-btn-color);
    text-decoration: none;
}

 #page-content .creditButton p a {
    border-left: 0;
}

 #page-content .creditButtonStandalone p a {
    background: var(--rate-bar-bg);
    border-radius: 0;
    box-shadow: none;
}

 #page-content .rate-box-with-credit-button .fa-info:hover,
 #page-content .creditButtonStandalone p a:hover {
    color: var(--credit-btn-hover-color);
}

 #page-content .modalbox {
    border-radius: 0;
    box-shadow: none;
}

/* ==== FORMATTING | [GENERAL] ==== */
 h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
}

 h1 {
    color: var(--accent-color);
}

 hr {
    height: 0;
    margin: 1em 0;
    background: 0;
    border-top: 1px solid var(--special-border);
}

 *, a, span {
 /* No Line Breaks Mid-Word */
    word-break: normal;
}

 li, p {
    text-underline-offset: 30%;
}

 a {
    color: var(--link-color);
}

/* ==== IMAGE BLOCK ==== */
/* == STANDARD == */
 .scp-image-block.block-right {
    margin: 0 0 1em 2em;
    box-shadow: none;
}

/* == CLASSIC == */
 .classic-image-block {
    float: right;
    width: 300px;
    margin: 0 0 1em 2em;
    text-align: center;
}

/* ==== TABLE STYLING ==== */
 table.wiki-content-table td {
    background-color: var(--fill-bg);
}

/* ==== YUI TABS ==== */
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a {
    /* ==== Tab Background Colour | [UNSELECTED] ==== */
    background-color: var(--fill-bg);
    /* ==== */
    background-image: none;
}

 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus {
    /* ==== Tab Background Colour | [HOVER] ==== */
    background-color: var(--tab-hover-bg);
    /* ==== */
    background-image: none;
}

 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:hover {
    /* ==== Tab Background Colour | [SELECTED] ==== */
    background-color: var(--tab-bg);
    /* ==== */
    background-image: none;
}

/* ======== MOBILE BREAKPOINT ======== */
 @media (max-width: 767px) {
     #side-bar .side-block {
    	background-color: var(--fill-bg);
    }

     #header,
     .mobile-top-bar {
    	max-width: 95%;
    }

     .mobile-top-bar {
    	left: 0;
    }
}
[[/code]]
[[/<]]

[[/collapsible]]

@@ @@
----
[[=]]
[[include :scp-wiki:component:license-box-theme]]
=====
[[<]]
[[div class="blockquote"]]
**Filename:** classic_body_bg.png
**Author:** [[*user Gabrys]]
**License:** [*https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** [*https://static.wikidot.com/v--c827dff18394/common--theme/shiny/images/body_bg.png Wikidot]
[[/div]]

[[div class="blockquote"]]
**Filename:** base_image_frame.png
**Author:** [[*user Lt Flops]]
**License:** [*https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** Self
[[/div]]

[[div class="blockquote"]]
**Filename:** scp_foundation_logo.png
**Author:** [[*user far2]]
**License:** [*https://creativecommons.org/licenses/by-sa/3.0/ Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)]
**Source Link:** [*/main SCP Foundation Wiki]
[[/div]]
[[/<]]
=====
[[include :scp-wiki:component:license-box-end]]
[[/=]]
[[/iftags]]

Classic SCP Foundation Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source