Foundless Theme

Link to article: Foundless Theme.

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");

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

```
filter: display:flex;
```
```
width:100px;
```
```
width:width:100px;;
```
```
font-family: var(--header-font);
```
```
font-family: var(--mono-font);
```

```
scp-image-block
```
```
block-right
```
```
scp-image-caption
```

[[iftags +theme]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css
]]

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

[[div_ style="filter: display:flex;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]]
[[/div]]

-----

+* Theme Colors

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Charade
| color1-variable=--gray-monochrome
| color1-info=(48, 48, 64)
| color1-has-light-text=1
| color2-name=Gulf Stream
| color2-variable=--medium-accent
| color2-info=(139, 179, 180)
| color2-has-light-text=1
| subcolor1-name=Santas Grey
| subcolor1-variable=--light-gray-monochrome
| subcolor1-info=(160, 160, 180)
| subcolor2-name=Snuff
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(220, 220, 240)
| subcolor4-name=Half Baked
| subcolor4-variable=--pale-accent
| subcolor4-info=(140, 202, 202)
| subcolor5-name=Eden
| subcolor5-variable=--dark-accent
| subcolor5-info=(33, 40, 78)
| subcolor5-has-light-text=1
]]

-----

+* Usage

This is a Black Highlighter based theme, meaning you will need to import the Black Highlighter theme as well in order to use this theme. To learn more, go [[[theme:black-highlighter-theme|here]]].

**To import this theme, simply add the following to your page:**

> @@[[include :scp-wiki:theme:black-highlighter-theme]]@@
> @@[[include :scp-wiki:theme:foundless]]@@

@@ @@

+ Examples

[[div class="scp-image-block block-right" style="width:100px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:foundless/unfounded.gif]]
[[div class="scp-image-caption" style="width:width:100px;;"]]
Unfounded by [[*user stephlynch]]
[[/div]]
[[/div]]

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

[[collapsible show="▼ Titles" hide="▲ Close"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
Just use your imagination and pretend there's //Lorem Ipsum// here.
[[/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 Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
weed lmao
[[/tab]]
[[/tabview]]

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes
>>> And another[[footnote]] And here's a footnote! [[/footnote]]

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

----

[[=]]
[[span style="font-family: var(--header-font);"]]The header, title, and body font is Roboto.[[/span]]
[[span style="font-family: var(--mono-font);"]]The monospace font used is PT Mono.[[/span]]
[[/=]]

+* Code
[[collapsible show="▼ Show code" hide="▲ Hide code"]]
[[code type="css"]]
/*
    Foundless Theme
    [2020 Wikidot Theme]
     Created by Greyve
     Logo by stephlynch
*/
@supports(display: grid) {

    /* ROOT - Header & General Recoloring */
    :root {
    	/* Intro */
    	--theme-base: "nuscp";
    	--theme-id: "foundless";
    	--theme-name: "Foundless Theme";

    	/* Header */
    	--logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:foundless/unfounded.gif");
    	--header-title: "Unfounded";
    	--header-subtitle: "Untainted by the Foundation";

    	/* Colors */
    	--pale-gray-monochrome: 220, 220, 240;
    	/* Light Grey */
    	--light-gray-monochrome: 160, 160, 180;
    	/* Accent Light Gray */
    	--gray-monochrome: 48, 48, 64;
    	/* Gray  */
    	--dark-gray-monochrome: 48, 48, 64;
    	/*Gray */

    	--pale-accent: 140, 202, 202;
    	/* Pale Blue*/
    	--bright-accent: 206, 233, 234;
    	/* Light Blue*/
    	--medium-accent: 139, 179, 180;
    	/* Blue */
    	--dark-accent: 68, 92, 109;
    	/* Dark Blue */
    	--newpage-color: 135, 158, 176;
    	/* Grey Blue */

    	/* Menu Colors */
    	--swatch-menubg-color: var(--gray-monochrome);
    	--swatch-menubg-light-color: var(--pale-gray-monochrome);
    	--swatch-menubg-medium-color: var(--light-gray-monochrome);
    	--swatch-menubg-medium-dark-color: var(--black-monochrome);
    	--swatch-menubg-dark-color: var(--dark-gray-monochrome);
    	--swatch-menubg-black-color: var(--black-monochrome);
    	--swatch-menubg-hover-color: var(--gray-monochrome);
    	--swatch-menutxt-dark-color: var(--dark-accent);
    	--swatch-menutxt-light-color: var(--white-monochrome);
    	--swatch-border-color: var(--black-monochrome);

    	/* Link Colors */
    	--link-color: var(--medium-accent);
    	--visited-link-color: var(--dark-accent);
    	--hover-link-color: var(--bright-accent);

    	/* Rating Module Colors */
    	--rating-module-text-color: var(--black-monochrome);

    	/* Header Colors */
    	--swatch-topmenu-border-color: var(--light-gray-monochrome);
    	--swatch-topmenu-bg-color: var(--light-gray-monochrome);

    	/* Navbar Shadow */
    	--gradient-background:
    		linear-gradient(to bottom,
    			rgba(var(--background-gradient-color), 0.5) 0,
    			rgba(var(--background-gradient-color), 0) var(--background-gradient-distance));
    	--background-gradient-color: var(--dark-accent);
    	--background-gradient-distance: 15rem;

    	--header-gradient-color-bottom: 68, 92, 109;
    	--header-gradient-color-middle: 135, 158, 176;
    	--header-gradient-color-top: 154, 180, 181;

    	--diagonal-stripes: repeating-linear-gradient(135deg,
    			hsla(0, 0%, 100%, 0),
    			hsla(0, 0%, 100%, 0) 0.25vh,
    			rgba(88, 88, 88, 0.1) 0.35vh,
    			rgba(88, 88, 88, 0.2) 0.5vh);
    }

    /* Filter */
    --filter: hue-rotate(268deg) saturate(50%) brightness(111%);

    /* Ayers' Info Bar */
    --barColour: rgb(var(--dark-accent));

    #header {
    	/* ===HEADER ELEMENTS=== */
    	/* ===SEARCH ELEMENT=== */
    	/* Focus is when the search box has been clicked on */
    	--search-icon-focus-color: var(--swatch-alternate-color);
    }

    #top-bar {
    	/* ===DROPDOWN MENU=== */
    	--dropdown-links-hover-color: var(--swatch-text-tertiary-color);
    }

    #side-bar {
    	/* ===SIDEBLOCK MENU=== */
    	--sideblock-heading-border-color: var(--dark-accent);
    	--sideblock-heading-bg-color: var(--medium-accent), 0.25;
    	--sideblock-heading-text-color: var(--swatch-text-tertiary-color);

    	--sidebar-links-hover-bg-color: var(--light-gray-monochrome)
    }

    #interwiki {
    	--sideblock-heading-bg-color: var(--medium-accent), 0.25;
    }

    /* ===FOOTER=== */
    #footer {
    	--footer-link-hover-color: var(--swatch-text-tertiary-color);
    }

    /* ===LICENSE AREA=== */
    #license-area {
    	--license-link-hover-color: var(--swatch-text-tertiary-color);
    }

    #main-content {
    	/* ===MAIN CONTENT UI ELEMENTS */
    	/* ===UI ICONS=== */
    	/* ===PAGE OPTIONS ICONS=== */
    	--ui-icon-hover-color: var(--dark-accent);

    	/* ===TEXT EDITOR ICONS=== */
    	--editor-icon-color: var(--swatch-menutxt-dark-color);
    	--editor-icon-hover-bg: var(--dark-accent);

    	/* ===TABS=== */
    	--tabs-txt: var(--swatch-text-tertiary-color);
    	--tabs-hover-bg: var(--swatch-primary-darkest);
    	--tabs-hover-txt: var(--swatch-text-secondary-color);
    	--tabs-selected-bg: var(--swatch-primary-darker);
    	--tabs-selected-txt: var(--swatch-text-secondary-color);
    	--tabs-selected-outline: var(--swatch-primary-darker);

    	/* ===TABLES=== */
    	--tables-header-bg: var(--light-gray-monochrome);

    	/* Color for special .colorbar-quote blockquote class */
    	--blockquote-colorbar-color: var(--swatch-primary-darker), 1;

    	/* ===PAGE TAGS=== */
    	--pagetags-text-hover-color: var(--swatch-primary-darkest);
    }

    /* ===GLOBAL ELEMENTS=== */
    :root {
    	/* ===UI BUTTONS=== */
    	--ui-button-bg: var(--swatch-alternate-color);
    	--ui-button-txt: var(--swatch-text-secondary-color);
    	--ui-button-hover-bg: var(--swatch-primary-darkest);
    	--ui-button-hover-outline: var(--swatch-primary-darkest);

    	/* ===FOOTNOTES HOVER BLOCK=== */
    	--hoverblock-bg: var(--swatch-alternate-color);
    }

    ::-moz-selection {
    	background: rgba(var(--swatch-primary-darkest), 1);
    	color: rgb(var(--swatch-primary));
    }

    ::selection {
    	background: rgba(var(--swatch-primary-darkest), 1);
    	color: rgb(var(--swatch-primary));
    }

    /* Header Logo Compensation */
    #header {
    	background-position: left 0 top 0;
    	background-size: var(--header-height-on-desktop) auto;
    }

    /* Page Title */
    #page-title {
    	border-color: rgb(var(--dark-gray));
    	color: rgb(var(--medium-accent));
    }

    /* Page Rating Module */
    .page-rate-widget-box {
    	border-color: rgb(var(--pale-gray-monochrome));
    	background: linear-gradient(to top,
    			rgba(var(--pale-gray-monochrome), 1) 0%,
    			rgba(var(--pale-gray-monochrome), 1) 100%);
    }

    #page-content .rate-box-with-credit-button {
    	border-color: rgb(var(--pale-gray-monochrome));
    	background: linear-gradient(to top,
    			rgba(var(--pale-gray-monochrome), 1) 0%,
    			rgba(var(--pale-gray-monochrome), 1) 100%);
    }

    #page-content .rate-box-with-credit-button>.creditButton>p>a::before {
    	background-color: rgb(var(--pale-gray-monochrome));
    }

    #page-content .rate-box-with-credit-button>.creditButton:hover {
    	background: rgba(var(--bright-accent), 0.8);
    }

    #page-content .modalbox {
    	border-radius: 0;
    	background: rgb(var(--pale-gray-monochrome)) !important;
    	box-shadow: 0 2px 6px rgba(var(--bright-accent), 0.5);
    	color: rgb(var(--pale-gray-monochrome));
    }
}
[[/code]]
[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:bhl-dark-sidebar]]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Afoundless/1")
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Afoundless/1
]]

Foundless Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source