Twin Files Theme

Link to article: Twin Files 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%3Atwin-files/1")

```
display: none;
```
```
width:100%; box-shadow:none;
```
```
width:100%;
```
```
width:100%;
```
```
color: rgb(var(--ink-blot));
```

width: 250px; mix-blend-mode: exclusion; text-align: center;

```
blokquote-alt
```
```
scp-image-block
```
```
block-center
```
```
scp-image-caption
```
```
code
```
```
headblock-tabs
```
```
headblock
```
```
genblock
```
```
ticker
```
```
windows-bar
```
```
windows
```
```
windows-slimbox
```
```
windows-box
```
```
logs
```
```
logs-header
```
```
dialog
```
```
active
```
```
blokquote-alt
```
```
post-it-note
```

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

[[div style="display: none;"]]
[[include component:image-block
name=https://scp-wiki.wdfiles.com/local--files/theme:twin-files/fiic-logo-wash.png
|caption=Thumbnail (FIIC Logo)]]
[[/div]]

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

-----
++ What is this?
[[div class="blokquote-alt"]]
The Twin Files theme is a dark theme for BHL loosely visually based off of the aesthetics of the 90s television series //Twin Peaks// and //The X-Files//. You can use it for any article... but preferably one with an older-style, supernatural-adjacent government agency and investigation. Or if you like X-Files and Twin Peaks.
[[/div]]
----
[[=]]
+ Theme Colors
[[/=]]

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Filing Cabinet
| color1-variable=--filing-cabinet
| color1-info=(193, 197, 201)
| color2-name=Einhander Gun
| color2-variable=--einhander-gun
| color2-info=(78, 82, 92)
| color2-has-light-text=1
| subcolor1-name=Manila Folder
| subcolor1-variable=--manila-folder
| subcolor1-info=(217, 201, 160)
| subcolor2-name=Agent Doggett
| subcolor2-variable=--doggett
| subcolor2-info=(140, 119, 98)
| subcolor3-name=Dead Wood
| subcolor3-variable=--dead-wood
| subcolor3-info=(43, 35, 25)
| subcolor3-has-light-text=1
| subcolor4-name=Dale Cooper
| subcolor4-variable=--cooper
| subcolor4-info=(98, 112, 140)
| subcolor5-name=AD Skinner
| subcolor5-variable=--skinner
| subcolor5-info=(41, 51, 91)
| subcolor5-has-light-text=1
| subcolor6-name= FIIC Blue
| subcolor6-variable=--fiic-blue
| subcolor6-info=(16, 20, 105)
| subcolor6-has-light-text=1
]]

----
@@ @@
[[div class="scp-image-block block-center" style="width:100%; box-shadow:none;"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:twin-files/fiic-spread.png style="width:100%;" link=#]]
[[div class="scp-image-caption" style="width:100%;"]]
Foundation for Investigation into Irregular Crimes (FIIC) logo spread
[[/div]]
[[/div]]
@@ @@
Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. [[[theme:black-highlighter-theme|To learn more go here]]].

**On any wiki:**
[[div class="code" style="color: rgb(var(--ink-blot));"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:twin-files]]@@
[[/div]]
@@ @@

+ Examples

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="- Titles"]]
+ 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]]
Just cause I'm assigned to the X-Files you want me to think like Scully or Mulder would. You got the wrong guy - I need facts, not wild ideas. - Agent Doggett
[[/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 ||
-----
[[=]]
++ EXTRA DIVS
[[/=]]
@@ @@
+++++ MANILA FOLDER
[[>]]
uses __{{headblock-tabs}}__ & __{{headblock}}__ divs
[[/>]]
[[div class="headblock-tabs"]]
09.22-95
[[/div]]
[[div class="headblock"]]
[[=image fiic-logo-stamp.png style="width: 250px; mix-blend-mode: exclusion; text-align: center;"]]
The Twin Files theme is a dark theme for BHL loosely visually based off of the aesthetics of the 90s television series //Twin Peaks// and //The X-Files//. You can use it for any article... but preferably one with an older-style, supernatural-adjacent government agency and investigation. Or if you like X-Files and Twin Peaks.
[[/div]]
@@ @@
@@ @@
@@ @@
+++++ PRINTER PAPER
[[>]]
uses __{{genblock}}__ div
[[/>]]
[[div class="genblock"]]
The Twin-Files theme is a light theme for BHL visually based off of the aesthetics of the 90s television series //Twin Peaks// and //The X-Files//. You can use it for any article... but preferably one with an uncaring, overpopulated, yet bleeding-edge technological advances vibe. Or if you like Blade Runner.
[[/div]]
@@ @@
@@ @@
@@ @@
+++++ TELEX PAPER
[[>]]
uses __{{ticker}}__ div
[[/>]]
[[div class="ticker"]]
The Twin-Files theme is a light theme for BHL visually based off of the aesthetics of the 90s television series //Twin Peaks// and //The X-Files//. You can use it for any article... but preferably one with an uncaring, overpopulated, yet bleeding-edge technological advances vibe. Or if you like Blade Runner.
[[/div]]
@@ @@
@@ @@
@@ @@
+++++ WIN95 WINDOW
[[>]]
uses __{{windows-bar}}__ & __{{windows}}__ divs + __{{windows-box}}__, __{{windows-slimbox}}__ & __{{windows-button}}__ spans
[[/>]]
[[div class="windows-bar"]]
FIIC E.MAIL
[[/div]]
[[div class="windows"]]
__F__ile@@       @@__I__nbox
-----
**TO:** [[span class="windows-slimbox"]]blehbleh@gobbedygooknet[[/span]]
[[div class="windows-box"]]
Maria - first of all, congrats on the marriage. Second of all, I’m sorry about all of this. You should be on your honeymoon vacation but now you’ve got to deal with one hell of an imbroglio. I’m sure the board’s sticking pipes up everybody’s asses - they have mine on a pike - since they just lost a crap ton of money on the downed shuttle, and on top of that Delta’s gone quiet too. They can’t even send an investigation team either cause the ADS there is still up. So they’re grilling us instead. They want answers we don’t have.
[[/div]]
[[/div]]
@@ @@
@@ @@
@@ @@
+++++ RECORDED VIDEO LOGS
[[>]]
uses __{{logs}}__ & __{{logs-header}}__ divs + __{{dialog}}__ & __{{active}}__ classes
[[/>]]
[[div class="logs"]]
[[div class="logs-header"]]

Video Log

[[/div]]
[[=]]
**> RECORDING STARTED <**
[[/=]]
[[table class="dialog"]]
 
[[row]]
[[hcell]]
 
[[/hcell]]
[[cell]]
//Describe some visual action here.//
 
//You like visual action, right?//
[[/cell]]
[[/row]]
 
[[row]]
[[hcell]]
SPEAKER
[[/hcell]]
[[cell class="active"]]
This is my speech. Very wordy.
[[/cell]]
[[/row]]
 
[[/table]]
[[/div]]
@@ @@
@@ @@
@@ @@
+++++ ALT. BLOCKQUOTE
[[>]]
uses __{{blokquote-alt}}__ div
[[/>]]
[[div class="blokquote-alt"]]
TEXT GOES HERE
-----
OR HERE
[[/div]]
@@ @@
@@ @@
@@ @@
+++++ POST-IT NOTE
[[>]]
uses __{{post-it-note}}__ div
[[/>]]
[[div class="post-it-note"]]
We found him today.

He was in the water heater, turned into pulp.
[[/div]]
@@ @@
-----
[[=]]
++ ADDED FONTS
[[/=]]
Normally I would list them, but there's fourteen different fonts soo.....
-----
[[=]]
++ SOURCE CODE
[[/=]]

[[collapsible show="» show source" hide="« hide source"]]
[[code type="css"]]
/*
    Twin Files Theme
    [2022 Wikidot Theme]
       by JackalRelated
*/
@import url('https://scp-wiki.wdfiles.com/local--files/theme:twin-files/stylesheet-alt.css');
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');

:root {
    --theme-base: "black-highlighter";
    --theme-id: "twin-files";
    --theme-name: "Twin Files";

    --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/fiic-logo-wash.png");
    --header-title: "FIIC";
    --header-subtitle: " ";

    --body-font: 'Jost', sans-serif;
    --header-font: 'Rubik', sans-serif;
    --title-font: 'Archivo', sans-serif;
    --mono-font: 'IBM Plex Mono', monospace;
    --UI-font: var(--printer-paper-font);

    --manila-tabs-font: 'Telegraphem', monospace;
    --manila-body-font: 'Remington Noiseless', serif;
    --blokquote-alt-font: var(--printer-paper-font);
    --ticker-font: 'Nouveau IBM', monospace;
    --printer-paper-font: 'Alte Haas Grotesk', sans-serif;
    --handwriting-font: 'Sedgwick Ave', cursive;
    --windows-font: 'Modern DOS 8x16', sans-serif;
    --logs-header-font: 'Commodore 64 Angled', sans-serif;
    --logs-text-font: 'BabelSans', sans-serif;
    --logs-dialogue-font: 'Arimo', sans-serif;
    --logs-action-font: 'MoonGloss Display', sans-serif;

    --header-height-on-desktop: 11.5rem;
    --header-height-on-mobile: 11.5rem;

    /* WHITE - GREY */
    --win-white: 255, 255, 255;
    --win-grey: 195, 195, 195;
    --win-lborder: 237, 237, 237;
    --win-border: 207, 207, 207;

    --printer-paper: 245, 242, 235;
    --believe-white: 215, 216, 217;
    --grey-child: 205, 206, 208;
    --papers-edge: 176, 176, 176;
    --another-grey: 196, 196, 196;
    --filing-cabinet: 193, 197, 201;
    --white-lodge: 159, 160, 161;

    --one-more-grey: 99, 99, 99;
    --dark-track: 40, 42, 46;
    --faded-type: 28, 28, 28;
    --ink-blot: 10, 10, 10;

    /* BLUE */
    --dept-blue: 2, 4, 20;
    --saucer-steel: 19, 21, 26;
    --believe-grey: 25, 29, 43;
    --einhander-gun: 78, 82, 92;
    --fiic-blue: 16, 20, 105;
    --fiic-grey: 119, 125, 140;

    --cooper: 98, 112, 140;
    --mulder: 69, 84, 115;
    --skinner: 41, 51, 91;
    --scully: 34, 40, 54;

    /* BROWN */
    --manila-folder: 217, 201, 160;
    --manila-body: 224, 213, 186;
    --manila-edge: 189, 169, 124;

    --coffee-ring: 71, 39, 5;
    --dead-wood: 43, 35, 25;
    --light-desk: 26, 24, 21;
    --dark-desk: 13, 12, 11;

    --reyes: 224, 219, 195;
    --doggett: 140, 119, 98;

    /* GREEN */
    --peaks-green: 0, 145, 9;

    /* YELLOW */
    --highlighter: 214, 184, 36;
    --post-it: 230, 223, 131;

    /* RED */
    --red-room: 163, 0, 0;

    /* THEME ASSIGNMENTS */
    --white-monochrome: var(--filing-cabinet);
    --pale-gray-monochrome: var(--reyes);
    --light-gray-monochrome: var(--manila-edge);
    --gray-monochrome: var(--ink-blot);
    --dark-gray-monochrome: var(--filing-cabinet);
    --black-monochrome: var(--printer-paper);
    --pale-accent: var(--cooper);
    --bright-accent: var(--doggett);
    --medium-accent: var(--scully);
    --dark-accent: var(--mulder);

    --swatch-topmenu-bg-color: var(--einhander-gun);
    --swatch-topmenu-border-color: var(--einhander-gun);

    --swatch-code-text-general: var(--swatch-text-dark);

    --swatch-text-light: var(--believe-white);
    --swatch-text-dark: var(--ink-blot);
    --swatch-text-general: var(--swatch-text-light);

    --swatch-menubg-color: var(--filing-cabinet);
    --swatch-menubg-medium-color: var(--papers-edge);
    --swatch-menubg-medium-dark-color: var(--ink-blot);

    --swatch-menutxt-light-color: var(--believe-white);
    --swatch-menutxt-dark-color: var(--ink-blot);
    --swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);

    --swatch-text-secondary-color: var(--ink-blot);
    --swatch-text-tertiary-color: var(--believe-white);
    --swatch-important-text: var(--bright-accent);

    --swatch-background: var(--dark-desk);

    --header-gradient-color-top: var(--saucer-steel);
    --header-gradient-color-middle: var(--believe-grey);
    --header-gradient-color-bottom: var(--saucer-steel);
    --background-gradient-distance: 0rem;
    --diagonal-stripes: linear-gradient(transparent 0);

    --sidebar-transition-timing: 0.8s ease-in-out 0.1s;

    --hover-link-color: var(--highlighter);
    --newpage-color: var(--manila-folder);
    --link-color: var(--manila-folder);
    --visited-link-color: var(--grey-child);

    --rating-module-bg-color: var(--einhander-gun);
    --rating-module-button-plus-color: var(--peaks-green);
    --rating-module-button-cancel-color: var(--scully);
    --rating-module-bottom-border-color: var(--scully);
    --rating-module-text-hover-color: var(--swatch-text-tertiary-color);

    --toggle-button-bg: rgba(var(--ink-blot), 0);
    --toggle-border-color: rgb(var(--printer-paper));
    --toggle-icon-color: rgb(var(--believe-white));
    --toggle-roundness: 0%;

    --ui-button-bg: var(--another-grey);
    --ui-button-txt: var(--ink-blot);
    --ui-button-hover-bg: var(--skinner);
    --ui-button-hover-outline: var(--scully);
    --ui-button-hover-txt: var(--printer-paper);
}

#main-content {
    --ui-icon-color: var(--dead-wood);
    --ui-icon-bg: var(--papers-edge);
    --ui-icon-hover-color: var(--printer-paper);
    --ui-icon-hover-bg: var(--skinner);
}

#header {
    --swatch-headerh1-color: var(--win-white);
    --swatch-headerh2-color: var(--printer-paper);

    --search-icon-color: var(--filing-cabinet);
    --search-icon-hover-color: var(--believe-white);
    --search-icon-hover-bg-color: var(--skinner);
    --search-textbox-text-color: 0, 0, 0, 0;

    --login-mobile-icon-color: var(--filing-cabinet);
    --login-mobile-icon-hover-color: var(--believe-white);
    --login-mobile-icon-hover-bg-color: var(--skinner);

    --search-icon-focus-color: var(--win-white);
    --search-icon-focus-bg-color: var(--fiic-blue);
    --search-focus-outline-color: var(--win-grey);
    --search-focus-textbox-bg-color: var(--win-white);
    --search-focus-textbox-text-color: var(--printer-paper);

    --login-line-divider-color: var(--mulder);
    --login-username-color: var(--filing-cabinet);
    --login-myaccount-color: var(--filing-cabinet);
    --login-myaccount-underline-color: var(--mulder);
    --login-myaccount-hover-color: var(--believe-white);
    --login-myaccount-hover-bg-color: var(--skinner);
    --login-arrow-color: var(--filing-cabinet);

    --login-dropdown-bg-color: var(--papers-edge);
    --login-dropdown-bg-image: var(--papers-edge);
    --login-dropdown-border-color: var(--win-border), 0.5;
    --login-dropdown-text-color: var(--faded-type);
    --login-dropdown-text-hover-color: var(--printer-paper);
    --login-dropdown-bg-hover-color: var(--skinner);
}

/* HEADER AND TOPBAR */

#header h1 a {
    text-shadow: none;
    height: 100%;
    width: 150%;
    color: transparent;

    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/fiic-logo.png");
    margin: 0;
    margin-left: 3.3em;
    padding: 0;

    background-size: auto calc(var(--header-height-on-desktop) - 1rem);
    background-repeat: no-repeat;
    background-position: left center;
}

@media only screen and (max-width: 56.25rem) {
    #header {
    	background-size: calc(var(--size) - 2rem), 100% var(--header-height-on-mobile);
    	background-position: calc(var(--header-height-on-mobile) - 0 - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
    }

    #header h1 a {
    	background-size: contain;
    	position: relative;
    	width: min(10em, 65vw);
    	margin-left: 7.25em;
    }
}

#header h1 a::before {
    text-shadow: none;
    color: transparent;
}

#header h2 {
    display: none;
}

#extra-div-1 {
    height: var(--header-height-on-desktop);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/grid-bog.png");
    background-size: calc(var(--header-height-on-desktop) * 0.5);
    mix-blend-mode: overlay;
    opacity: 0.2;
}

#top-bar {
    --topmenu-category-color: var(--filing-cabinet);
    --topmenu-category-hover-color: var(--printer-paper);
    --topmenu-hover-border-color: var(--cooper);

    --mobile-topmenu-sidebar-button-color: var(--printer-paper);

    --dropdown-bg-color: var(--papers-edge);
    --dropdown-border-color: var(--win-border);
    --dropdown-links-color: var(--faded-type);
    --dropdown-links-hover-color: var(---printer-paper);
    --dropdown-links-hover-bg-color: var(--skinner);
}

/* BREADCRUMBS */

#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
    color: rgb(var(--win-white));
    text-decoration: none;
}

/* SCROLLBAR AND SIDEBAR */

html,
body {
    scrollbar-color:
    	rgb(var(--dark-track)) rgb(var(--fiic-grey));
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 18px;
    background: #transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: rgb(var(--dark-track));
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: rgb(var(--fiic-grey));
    border: rgb(var(--fiic-grey)) 1px solid;
    border-radius: 0px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--papers-edge));
}

#side-bar,
#interwiki {
    --sidebar-bg-color: var(--white-lodge);
    --sidebar-resources-bg-color: var(--win-border), 0.25;
    --sidebar-media-bg-color: var(--win-border), 0.25;

    --sideblock-heading-border-color: var(--fiic-blue);
    --sideblock-heading-bg-color: var(--fiic-blue);
    --sideblock-heading-text-color: var(--printer-paper);

    --sidebar-border-color: var(--dark-track), 0.08;
    --sidebar-subtest-color: var(--swatch-primary);

    --sidebar-links-text: var(--faded-type);
    --sidebar-links-hover-bg-color: var(--skinner);
    --sidebar-links-hover-text-color: var(--believe-white);
}

#side-bar .heading p,
#interwiki .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
    font-size: 0.9em;
    letter-spacing: .1em;
    font-family: var(--logs-text-font);
    margin-bottom: 0.25rem;
}

@media only screen and (max-width: 56.25rem) {

    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
    	margin-bottom: 0.3rem;
    }
}

hr {
    background-color: rgb(var(--filing-cabinet));
    border-top: .0625rem solid rgb(var(--filing-cabinet));
}

.code {
    background-color: rgb(var(--another-grey));
}

blockquote,
div.blockquote {
    border: .0625rem dashed rgba(var(--scully), 1);
    color: rgb(var(--faded-type));

    --hover-link-color: var(--cooper);
    --newpage-color: var(--scully);
    --link-color: var(--scully);
    --visited-link-color: var(--ink-blot);
}

.blockquote p a,
.blockquote p sup a,
.logs,
.windows {
    --hover-link-color: var(--cooper);
    --newpage-color: var(--scully);
    --link-color: var(--scully);
    --visited-link-color: var(--ink-blot);
}

blockquote hr,
div.blockquote hr {
    background-color: rgb(var(--faded-type));
    border-top: .0625rem solid rgb(var(--faded-type));
}

.scp-image-block {
    box-shadow: none;
    border: none;
}

.scp-image-block .scp-image-caption {
    border-top: .0625rem outset rgba(var(--win-border), 1);
    background-color: rgb(var(--skinner)) !important;
    color: rgb(var(--printer-paper));
    font-family: var(--printer-paper-font);
}

/* MAIN CONTENT */

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
}

.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    color: rgb(var(--ink-blot));
}

#main-content {
    --tabs-bg: var(--manila-folder);
    --tabs-txt: var(--ink-blot);
    --tabs-hover-bg: var(--manila-edge);
    --tabs-hover-txt: var(--dead-wood);
    --tabs-selected-bg: var(--manila-edge);
    --tabs-selected-txt: var(--ink-blot);
    --tabs-selected-outline: var(--manila-edge);
    --tabs-bottom-border-color: var(--manila-edge);

    --tabs-content-bg-color: var(--manila-body);
    --tabs-content-border-color: var(--manila-edge);

    --tables-header-bg: var(--fiic-blue);
    --tables-header-txt: var(--printer-paper);
    --tables-border: var(--win-border);
    --tables-body-txt: var(--ink-blot);
    --tables-body-bg: var(--white-lodge);

    --toc-directory-lines-color: var(--neon-blue);
    --toc-header-bg-color: var(--passive-blue);
    --toc-header-text-color: var(--lapd-badge);
    --toc-header-text-hover-color: var(--neon-blue);
    --toc-body-bg-color: var(--pkd-blaster);
    --toc-body-link-color: var(--tears-n-rain);
    --toc-body-link-hover-color: var(--neon-blue);
    --toc-body-hover-arrow-color: var(--neon-blue);

    --blockquote-bg-color: var(--win-border), 0.8;
    --blockquote-colorbar-color: var(--fiic-blue), 1;

    --footnotes-footer-colorbar-color: var(--doggett);
    --footnotes-footer-title-bg-color: var(--doggett);
    --footnotes-footer-title-text-color: var(--ink-blot);
    --footnotes-footer-bg-color: var(--manila-body);
    --footnotes-footer-num-color: var(--doggett);
    --footnotes-footer-num-hover-color: var(--dark-desk);
    --footnotes-footer-text-color: var(--faded-type);

    --pagetags-title-bg: var(--skinner);
    --pagetags-title-text: var(--believe-white);
    --pagetags-text-color: var(--filing-cabinet);
    --pagetags-text-hover-color: var(--dark-desk);
    --pagetags-text-hover-bg-color: var(--highlighter);
}

#page-content div.b-tables table.wiki-content-table th,
#page-content table.wiki-content-table th {
    font-family: var(--UI-font);
}

:root {
    --hoverblock-header-bg: var(--doggett);
    --hoverblock-header-txt: var(--ink-blot);
    --hoverblock-footer-txt: var(--dark-desk);
    --hoverblock-bg: var(--manila-body);
    --hoverblock-txt: var(--faded-type);

    --modal-bg: var(--white-lodge);
    --modal-body-text: var(--ink-blot);
    --modal-body-header-txt: var(--red-room);
    --modal-header-bg: var(--skinner);
    --modal-header-stripe: var(--fiic-blue);
    --modal-header-txt: var(--printer-paper);
}

/* FOOTERS AND BELOW */

.page-source {
    background: rgb(var(--win-grey));
    color: rgb(var(--ink-blot));

    --hover-link-color: var(--coffee-ring);
    --newpage-color: var(--dead-wood);
    --link-color: var(--dead-wood);
    --visited-link-color: var(--light-desk);
}

#footer {
    --footer-bg-color: var(--einhander-gun);
    --footer-text-color: var(--filing-cabinet);
    --footer-link-color: var(--filing-cabinet);
    --footer-link-hover-color: var(--believe-white);
    --footer-link-hover-bg-color: var(--cooper);
}

.bibitems .title,
.footnotes-footer .title {
    font-family: var(--manila-body-font);
}

.footnotes-footer .footnote-footer {
    font-family: var(--UI-font);
}

#license-area {
    --license-bg-color: var(--dark-desk);
    --license-text-color: var(--believe-white);
    --license-link-color: var(--printer-paper);
    --license-link-hover-color: var(--ink-blot);
    --license-link-hover-bg-color: var(--highlighter);
}

form#edit-page-form .wd-editor-toolbar-panel {
    background-color: rgb(var(--win-grey));
}

#action-area:has(form[onsubmit*=setParent],#who-rated-page-area,form[onsubmit*=PageTagsModule],table.page-files,#edit-meta-addbutton,ul[style="list-style: none"],#page-block-checkbox,#rename-option-rename,#rename-option-delete) p:not(:has(a[id*=backlinks],a[onclick*=showWho],a.btn)) {
   color: black;
}

/* TOGGLE SIDEBAR (BHL) CHANGES */

@supports(display: grid) {
    @media only screen and (min-width: 769px) {
    	#main-content::before {
    		background: rgba(var(--saucer-steel), .55) 1px 1px repeat;
    	}
    }
}

/* CUSTOM DIVS */
.headblock-tabs {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/manila-top.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;

    height: 3em;

    color: rgb(var(--faded-type));
    font-family: var(--manila-tabs-font);
    font-weight: bold;
    font-size: 0.8em;

    padding: 1em 0 0 1em;
    margin: 0em;
}

@supports(display: grid) {
    @media only screen and (max-width: 769px) {
    	.headblock-tabs {
    		background-size: 250%;
    		height: 1.9rem;
    		font-size: 1em;
    		padding: 1.5rem 0 0 1rem;
    	}

    	.headblock-tabs p {
    		margin: 0em;
    	}
    }
}

.headblock {
    background-color: rgb(var(--manila-folder));
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/manila-texture.png");
    background-repeat: repeat;
    background-size: 100%;
    background-blend-mode: multiply;

    border: 2px solid white;
    border-color: rgb(var(--manila-edge));

    color: rgb(var(--faded-type));
    font-family: var(--manila-body-font);
    font-weight: 400;
    font-size: 1.1em;
    text-shadow: 0px 0 1px rgba(var(--faded-type), 0.5);

    padding: 1em 0.5em 1em 1em;
}

.headblock p {
    margin: 0em;
}

.genblock {
    background-color: rgb(var(--printer-paper));
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/paper-texture.png");
    background-repeat: repeat;
    background-size: 100%;

    color: rgb(var(--ink-blot));
    font-family: var(--printer-paper-font);
    border: 1px solid white;
    border-color: rgb(var(--papers-edge));

    padding: 1.5em 1em 1.5em 1em;
}

.ticker {
    padding: 10px 5px 1.1em 3.7em;

    font-family: var(--ticker-font);
    font-size: 110%;
    font-weight: 400;
    color: #000;

    background: repeat-y url("https://scp-wiki.wdfiles.com/local--files/theme:twin-files/tickerback.png");
    background-position: center top;
    background-size: 100%;

    border: 2px solid #D8D6CA;
    border-style: dashed solid dashed;
    border-width: medium 2px 0px;
}

.windows p,
.windows-box p,
.windows-slimbox p,
.windows-button p,
.windows-bar p {
    margin: 0em;
}

.windows-bar {
    background-color: rgb(var(--fiic-blue));
    color: rgb(var(--printer-paper));
    font-family: var(--windows-font);
    font-size: 16px;

    border: 3px outset rgb(207, 207, 207);
    border-bottom: 0px;

    margin: 0em;
    padding: 0.25em 0px 0px 0.5em;
}

.windows {
    background-color: rgb(var(--win-grey));

    color: rgb(var(--faded-type));
    font-family: var(--windows-font);
    font-size: 16px;
    border: 3px outset rgb(var(--win-border));
    border-top: 0px;

    padding: 0.3em 0.75em 0.2em 0.75em;
}

.windows hr {
    height: 0.125rem;
    margin: 0.4em 0px;
    border-top: 0px;
    background-color: rgb(var(--white-lodge));
}

.windows-box {
    background-color: rgb(var(--win-white));
    border: 3px inset rgb(var(--win-lborder));

    padding: 0.5em;
    margin: 0.4em 0px 0.4em 0px;
}

.windows-slimbox {
    background-color: rgb(var(--win-white));
    border: 2px inset rgb(var(--win-lborder));
    color: rgb(var(--ink-blot));

    padding: 0.175em;
}

.windows-button {
    background-color: rgb(var(--win-grey));
    border: 3px outset rgb(var(--win-border));

    padding: 0.4em;
}

.logs p,
.logs-header p,
table.dialog p {
    margin: 0em;
}

.logs {
    padding: 0px 0px 0.5em 0px;
    margin: auto;
    width: 95%;

    background-color: rgb(var(--win-grey));
    border: 3px outset rgb(var(--win-border));
    color: rgb(var(--one-more-grey));
    font-family: var(--logs-text-font);
}

.logs-header {
    padding: 0.5em 0px 0.5em 0px;
    text-align: center;
    font-size: 1.5em;

    background-color: rgb(var(--skinner));
    color: rgb(var(--believe-white));
    font-family: var(--logs-header-font);
}

.logs hr {
    background-color: rgb(var(--ink-blot));
}

table.dialog {
    border-collapse: collapse;
    font-family: var(--logs-text-font);
}

table.dialog th {
    border-right: 1px solid rgb(var(--ink-blot));
    color: rgb(var(--ink-blot));
    padding: 1em 1em 0em 1em;
}

table.dialog td {
    padding: 1em 0em 0em 1em;
    font-family: var(--logs-action-font);
}

table.dialog td.active {
    color: rgb(var(--ink-blot));
    font-family: var(--logs-dialogue-font);
}

.blokquote-alt {
    margin: .5em 1.25rem;
    padding: .825em 1.25em;
    border: .0625rem dashed rgba(var(--doggett), 1);
    background-color: rgba(var(--manila-body), 0.9);

    color: rgb(var(--dark-desk));
    font-weight: 400;
    font-family: var(--blokquote-alt-font);

    --hover-link-color: var(--coffee-ring);
    --newpage-color: var(--dead-wood);
    --link-color: var(--dead-wood);
    --visited-link-color: var(--light-desk);
}

.blokquote-alt hr {
    background-color: rgb(var(--manila-edge));
    border-top: .0625rem solid rgb(var(--manila-edge));
}

.post-it-note {
    width: 50%;
    min-height: 20em;
    border: 2px solid rgba(var(--highlighter), 0.9);

    margin: auto;
    padding: 1em;

    background-color: rgb(var(--post-it));
    color: rgb(var(--ink-blot));
    font-family: var(--handwriting-font);
    font-weight: bold;
}

[[/code]]
[[/collapsible]]
[[/iftags]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Atwin-files/1")
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Atwin-files/1
]]

Twin Files Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source