ACIID
ERMAHGERD STAHP
This is a template page used internally by the SCP Wiki.
PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
[[module CSS]]
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
a[rel="license"]::after {
content: ".";
}
[[/module]]
[[div_ style="display: none"]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=1&theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css&css={$css}" style="display: none"></iframe>
[[/embed]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=2&theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css&css={$css}" style="display: none"></iframe>
[[/embed]]
[[/div]]
[[iftags +theme -nobhl]]
[[module css]]
#page-title { display: none }
.scp-image-block.block-right img {
background: var(--gradient-header);
box-sizing: border-box;
padding: 1em;
}
.fonts-display {
font-size: 1.25em;
}
.title-font {
font-family: var(--title-font);
font-weight: 700;
}
.header-font {
font-family: var(--title-font);
font-weight: 900;
}
.UI-font {
font-family: var(--UI-font);
}
.mono-font {
--MONO: 1;
--CASL: 0;
--CRSV: 0;
font-family: var(--mono-font);
}
[[/module]]
[[image https://scp-wiki.wdfiles.com/local--files/component%3Ablack-highlighter-theme-dev/black-highlighter-logo.svg alt="Black Highlighter"]]
[[>]]
[[module Rate]]
[[/>]]
This is the Black Highlighter theme, a new base theme that aims to be better than the SCP Wiki's default base theme, [[[theme:site | Sigma-10]]]. You've already seen it in action.
_
+ Usage
On any wiki:
[[div class="code" style="text-align: center;"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
[[/div]]
_
+ Reporting problems
If you've got a Github account, [https://github.com/Nu-SCPTheme/Black-Highlighter/issues create an Issue] detailing your problem (whether it's technical, or aesthetic, or whatever).
If you don't have a Github account, or if you'd prefer to discuss your issues with someone directly, send a Wikidot PM to [[*user Woedenaz]]. If he doesn't respond, send it to [[*user Croquembouche]].
_
+ Addons
As a base theme, it's easy to extend Black Highlighter to be whatever you want. You can see all Black Highlighter-derived themes here: [[[black-highlighter-themes | ]]]
For functional changes, try these:
* **[[[component:bhl-dark-sidebar|]]]:** {{@@[[include :scp-wiki:component:bhl-dark-sidebar]]@@}}
* **[[[component:collapsible-sidebar|]]]:** {{@@[[include :scp-wiki:component:collapsible-sidebar]]@@}}
* **[[[component:toggle-sidebar-bhl|]]]:** {{@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@}}
* **[[[component:centered-header-bhl|]]]:** {{@@[[include :scp-wiki:component:centered-header-bhl]]@@}}
_
-----
_
+ Theme Colors
>[!--
[[module CSS]]
td { vertical-align: top; }
td strong { white-space: nowrap; }
.options table.wiki-content-table td { border: none; padding: 0.7em 1em; }
[[/module]]
[[div style="border: 1px solid #ddd; padding: 1em;"]]
+ What this is
A component that displays a bunch of colored squares to show off a CSS theme's flair.
Designed by [[*user Woedenaz]] and componentised by [[*user Croquembouche]].
This component is designed to be used for CSS themes, but it can be used on almost any page, if you really want.
+ Usage
On any wiki:
[[div class="code"]]
##blue|**[[include :scp-wiki:component:theme-squares -=-**##
##blue|**|**## ##green|color1-name####blue|**=**##My Favourite Colour
##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@fav-color
##blue|**|**## ##green|color1-info####blue|**=**##(191, 144, 0)
##blue|**]]**##
[[/div]]
Note the "{{-=-}}" after the component name. You **//do//** need to include that -- otherwise all this text explaining how to use the component will appear on your page.
For this component, there are three parameters per color. Replace N with the number of the color.
[[div class="options"]]
|| **colorN-name** || The name of the color. Pick whatever you want! ||
|| **colorN-variable** || The name of the [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable] that contains this color. _
The variable should hold three comma-separated numbers representing the RGB values of the color. This is consistent with BHL-style variables. _
If your variables hold something else (e.g. a full RGB/RGBA or hex color), you will need to override the background color of each theme square manually with CSS. ||
|| **colorN-info** || Some info about the colour. Displaying the RGB values is typical. Keep it short. _
If you don't want any text, add {{@<@@ @@>@}} instead.||
|| **//colorN-has-light-text//** _
//Optional. Default: 0// || Either 0 or 1. Determines the font color on the square. Useful to make sure there is enough contrast between the background color and the text color. _
If 1, the value of {{@@--swatch-text-light@@}} is used, or white (255, 255, 255) if it is not defined. Otherwise {{@@--swatch-text-dark@@}}, or black (0, 0, 0). Like all BHL-style CSS color variables, three numbers representing RGB values are expected. ||
[[/div]]
A color can only be used if it's exposed as a [https://developer.mozilla.org/en-US/docs/Web/CSS/--* CSS variable]. All colors in a Black Highlighter theme have a corresponding CSS variable by default, so for BHL themes, this component should work out of the box. However, sigma9 does not use CSS variables, so the only CSS variables that are available will be any that you have defined in your theme.
This component can hold a maximum of 6 primary colors and 12 secondary colors. I recommend two primary colors and no more than six secondary colors.
To add a primary color, just add the top three of the above parameters to the include, as shown in the example.
To add a secondary color, it's the same, but replace 'color' with 'subcolor'.
+ Example
Here's a longer example, taken from the Black Highlighter theme:
[[div class="code"]]
##blue|**[[include :scp-wiki:component:theme-squares -=-**##
##blue|**|**## ##green|color1-name####blue|**=**##Payne's Grey
##blue|**|**## ##green|color1-variable####blue|**=**##@@--@@gray-monochrome
##blue|**|**## ##green|color1-info####blue|**=**##(66, 66, 72)
##blue|**|**## ##green|color1-has-light-text####blue|**=**##1
##blue|**|**## ##green|color2-name####blue|**=**##Rosewood
##blue|**|**## ##green|color2-variable####blue|**=**##@@--@@bright-accent
##blue|**|**## ##green|color2-info####blue|**=**##(133, 0, 5)
##blue|**|**## ##green|color2-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor1-name####blue|**=**##Alto
##blue|**|**## ##green|subcolor1-variable####blue|**=**##@@--@@very-light-gray-monochrome
##blue|**|**## ##green|subcolor1-info####blue|**=**##(215, 215, 215)
##blue|**|**## ##green|subcolor2-name####blue|**=**##White Smoke
##blue|**|**## ##green|subcolor2-variable####blue|**=**##@@--@@pale-gray-monochrome
##blue|**|**## ##green|subcolor2-info####blue|**=**##(244, 244, 244)
##blue|**|**## ##green|subcolor3-name####blue|**=**##Bastille
##blue|**|**## ##green|subcolor3-variable####blue|**=**##@@--@@dark-gray-monochrome
##blue|**|**## ##green|subcolor3-info####blue|**=**##(48, 48, 52)
##blue|**|**## ##green|subcolor3-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor4-name####blue|**=**##Buccaneer
##blue|**|**## ##green|subcolor4-variable####blue|**=**##@@--@@medium-accent
##blue|**|**## ##green|subcolor4-info####blue|**=**##(100, 46, 44)
##blue|**|**## ##green|subcolor4-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor5-name####blue|**=**##Maroon
##blue|**|**## ##green|subcolor5-variable####blue|**=**##@@--@@dark-accent
##blue|**|**## ##green|subcolor5-info####blue|**=**##(100, 3, 15)
##blue|**|**## ##green|subcolor5-has-light-text####blue|**=**##1
##blue|**|**## ##green|subcolor6-name####blue|**=**##Mango Tango
##blue|**|**## ##green|subcolor6-variable####blue|**=**##@@--@@newpage-color
##blue|**|**## ##green|subcolor6-info####blue|**=**##(221, 102, 17)
##blue|**]]**##
[[/div]]
This produces the following colored squares:
[[=]]
[[image bhl-squares.png]]
[[/=]]
+ Tweaking
You can adjust the appearance of the component with CSS.
The whole component has the {{.colors-container}} class, and any CSS that targets it should included that class to ensure that nothing else on the page is affected. Every colored square has class {{.color}}. The primary colors have a {{.colors}} parent and the secondary colors have a {{.subcolors}} parent.
You'll need to use {{!important}} to override a square's background.
For example, the [[[theme:laughter-and-knives-theme | Laughter and Knives theme]]] adds a gradient background to the 9th secondary color like so:
[[code type="css"]]
.colors-container .subcolors .color:nth-of-type(9) {
background: var(--pastel-rainbow) !important;
}
[[/code]]
-----
[https://rossjrw.com/series-replace/?f=%5Cn&f=%5E&f=%24&f=%3C%3C%3E%3E&f=%28%3F%3C%3Dsubcolors.%2A%29%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%28%5B%5E%5C%5B%5C%5D%5D%2B%29%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5Ba-z-%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D%5C%5B%5C%5Bspan%20class%3D%22css-variable%22%5D%5D%40%40%28%5B%5E%40%5D%2B%29%40%40%5C%5B%5C%5B%5C%2Fspan%5D%5D&f=%5C%7C&f=%5E%5C%5B%5C%5B%5B%5Ei%5D.%2A%7C%5E%5C%7C%5B%5E%20%5D.%2A&f=%5Cn%24&r=&r=%5B%5Binclude%20%3Ascp-wiki%3Acomponent%3Atheme-squares%20-%3D-%3C%3C%3E%3E%7C%20color%24-has-light-text%3D1%3C%3C%3E%3E%7C%20subcolor%24-has-light-text%3D1%3C%3C%3E%3E&r=%5Cn%5D%5D&r=%5Cn&r=%7C%20subcolor%24%24-name%3D%241%7C%20subcolor%24%24-variable%3D%242%7C%20subcolor%24%24-info%3D%243%7C&r=%7C%20color%24%24-name%3D%241%7C%20color%24%24-variable%3D%242%7C%20color%24%24-info%3D%243%7C&r=%5Cn%7C&r=&r= Tool to convert existing syntax to arguments for this component]
[[/div]]
[!-- --]
[[module CSS]]
.colors-container {
width: 98%;
display: flex;
flex-direction: column;
margin: 0 auto;
font-weight: 700;
font-family: var(--title-font, Verdana), sans-serif;
color: black;
}
.colors-container .colors, .colors-container .subcolors {
width: 100%;
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
}
.colors-container .color {
flex-grow: 2;
padding: 0.5rem;
margin: 0.5rem;
color: rgb(var(--swatch-text-dark, 0, 0, 0));
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.colors-container .colors .color {
height: 7rem;
min-width: 4rem;
flex-basis: calc((100% / 2) - 2rem - 1px);
}
.colors-container .subcolors .color {
height: 4rem;
min-width: 4rem;
font-size: 75%;
text-align: center;
flex-basis: calc((100% / 6) - 2rem - 1px);
}
.colors-container .css-variable {
font-size: 75%;
letter-spacing: 0.1em;
font-family: var(--body-font, Verdana), sans-serif;
}
/* Hide a colour that's not been provided by seeing if the variable starts with "{$" */
.colors-container [data-variable^=\{\$] {
display: none;
}
.colors-container [data-has-light-text="1"] {
color: white;
color: rgb(var(--swatch-text-light, 255, 255, 255));
}
[[/module]]
[[div_ class="colors-container"]]
[!-- Unfortunately I can only support a limited number of colours, because each possible slot needs to be hardcoded --]
[!-- I can use the CSS variable name to reliably determine whether or not a colour has been provided, because it shouldn't contain any fancy formatting that would preclude it from being used in a CSS attribute --]
[!-- If a colour is not provided, it should not take up any space --]
[!-- Support up to six primary colours --]
[[div_ class="colors"]]
[[div_ class="color" style="background-color: rgb(var(--gray-monochrome));" data-variable="--gray-monochrome" data-has-light-text="1"]]
Payne's Grey[[span class="css-variable"]]@@--gray-monochrome@@[[/span]][[span class="css-variable"]](66, 66, 72)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--bright-accent));" data-variable="--bright-accent" data-has-light-text="1"]]
Rosewood[[span class="css-variable"]]@@--bright-accent@@[[/span]][[span class="css-variable"]](133, 0, 5)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color3-variable}));" data-variable="{$color3-variable}" data-has-light-text="{$color3-has-light-text}"]]
{$color3-name}[[span class="css-variable"]]@@{$color3-variable}@@[[/span]][[span class="css-variable"]]{$color3-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color4-variable}));" data-variable="{$color4-variable}" data-has-light-text="{$color4-has-light-text}"]]
{$color4-name}[[span class="css-variable"]]@@{$color4-variable}@@[[/span]][[span class="css-variable"]]{$color4-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color5-variable}));" data-variable="{$color5-variable}" data-has-light-text="{$color5-has-light-text}"]]
{$color5-name}[[span class="css-variable"]]@@{$color5-variable}@@[[/span]][[span class="css-variable"]]{$color5-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$color6-variable}));" data-variable="{$color6-variable}" data-has-light-text="{$color6-has-light-text}"]]
{$color6-name}[[span class="css-variable"]]@@{$color6-variable}@@[[/span]][[span class="css-variable"]]{$color6-info}[[/span]]
[[/div]]
[[/div]]
[!-- Support up to twelve subcolours --]
[[div_ class="subcolors"]]
[[div_ class="color" style="background-color: rgb(var(--very-light-gray-monochrome));" data-variable="--very-light-gray-monochrome" data-has-light-text="{$subcolor1-has-light-text}"]]
Alto[[span class="css-variable"]]@@--very-light-gray-monochrome@@[[/span]][[span class="css-variable"]](215, 215, 215)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--pale-gray-monochrome));" data-variable="--pale-gray-monochrome" data-has-light-text="{$subcolor2-has-light-text}"]]
White Smoke[[span class="css-variable"]]@@--pale-gray-monochrome@@[[/span]][[span class="css-variable"]](244, 244, 244)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--dark-gray-monochrome));" data-variable="--dark-gray-monochrome" data-has-light-text="1"]]
Bastille[[span class="css-variable"]]@@--dark-gray-monochrome@@[[/span]][[span class="css-variable"]](48, 48, 52)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--medium-accent));" data-variable="--medium-accent" data-has-light-text="1"]]
Buccaneer[[span class="css-variable"]]@@--medium-accent@@[[/span]][[span class="css-variable"]](100, 46, 44)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--dark-accent));" data-variable="--dark-accent" data-has-light-text="1"]]
Maroon[[span class="css-variable"]]@@--dark-accent@@[[/span]][[span class="css-variable"]](100, 3, 15)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var(--newpage-color));" data-variable="--newpage-color" data-has-light-text="{$subcolor6-has-light-text}"]]
Mango Tango[[span class="css-variable"]]@@--newpage-color@@[[/span]][[span class="css-variable"]](221, 102, 17)[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor7-variable}));" data-variable="{$subcolor7-variable}" data-has-light-text="{$subcolor7-has-light-text}"]]
{$subcolor7-name}[[span class="css-variable"]]@@{$subcolor7-variable}@@[[/span]][[span class="css-variable"]]{$subcolor7-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor8-variable}));" data-variable="{$subcolor8-variable}" data-has-light-text="{$subcolor8-has-light-text}"]]
{$subcolor8-name}[[span class="css-variable"]]@@{$subcolor8-variable}@@[[/span]][[span class="css-variable"]]{$subcolor8-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor9-variable}));" data-variable="{$subcolor9-variable}" data-has-light-text="{$subcolor9-has-light-text}"]]
{$subcolor9-name}[[span class="css-variable"]]@@{$subcolor9-variable}@@[[/span]][[span class="css-variable"]]{$subcolor9-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor10-variable}));" data-variable="{$subcolor10-variable}" data-has-light-text="{$subcolor10-has-light-text}"]]
{$subcolor10-name}[[span class="css-variable"]]@@{$subcolor10-variable}@@[[/span]][[span class="css-variable"]]{$subcolor10-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor11-variable}));" data-variable="{$subcolor11-variable}" data-has-light-text="{$subcolor11-has-light-text}"]]
{$subcolor11-name}[[span class="css-variable"]]@@{$subcolor11-variable}@@[[/span]][[span class="css-variable"]]{$subcolor11-info}[[/span]]
[[/div]]
[[div_ class="color" style="background-color: rgb(var({$subcolor12-variable}));" data-variable="{$subcolor12-variable}" data-has-light-text="{$subcolor12-has-light-text}"]]
{$subcolor12-name}[[span class="css-variable"]]@@{$subcolor12-variable}@@[[/span]][[span class="css-variable"]]{$subcolor12-info}[[/span]]
[[/div]]
[[/div]]
[[/div]]
_
+ Syntax Examples
[[div class="scp-image-block block-right" style="width:200px;"]]
[[image https://cdn.scpwiki.com/theme/en/black-highlighter/img/logo.svg style="width:200px;" link=#]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP Foundation Logo
[[/div]]
[[/div]]
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]]
A horizontal rule can be created with 5 hyphens "@@-----@@" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.
-----
_
[[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? It is very strange.]]
[[/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, created by enclosing its contents with {{[[div class="blockquote"]]}} on the line before and {{[[/div]]}} on the line after.
-----
[[div class="blockquote"]]
Blockquotes, and all divs, can be nested.
[[/div]]
[[/div]]
||~ Here's an ||~ example ||
|| of a || table ||
_
[[=]]
[[div_ class="fonts-display"]]
The body, [[span class="title-font"]]title,[[/span]] and [[span class="header-font"]]header[[/span]] font is [https://rsms.me/inter/ Inter].
[[span class="UI-font"]]The UI font is [https://www.paratype.com/fonts/pt/pt-root-ui PT Root UI].[[/span]]
[[span class="mono-font"]]The monospaced font is [https://www.recursive.design/ Recursive].[[/span]]
[[/div]]
All fonts are licensed under the [http://scripts.sil.org/OFL SIL Open Font License, Version 1.1]
[[/=]]
-----
[[/iftags]]
[[iftags +component]]
[[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]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=1&theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css&css={$css}" style="display: none"></iframe>
[[/embed]]
[!--
Styling component for the EN Interwiki, based on the CN Interwiki by 7happy7 and Sekai-s.
Please note that as of 2022-03-15, the new EN interwiki is not yet active on the EN SCP Wiki, so this styling component will not yet work.
Interwiki: https://scpwiki.com/interwiki
Source: https://github.com/scpwiki/interwiki
See also: https://scpwiki.com/how-to-create-a-branch-of-the-scp-foundation
Usage:
On the page that intends to restyle the Interwiki:
[[include :scp-wiki:component:interwiki-style
| priority=X
| theme=<link to CSS stylesheet>
| css=<URI-encoded CSS>
]]
The `priority` value must be set to a number that is 1 greater than the priority of the theme that this theme is extending.
Examples:
- The base theme of the site (for the SCP Wiki, this is Sigma-9) has a priority of 0.
- A CSS theme designed to be used on pages that are already styled with Sigma-9 (i.e. a theme that extends Sigma-9) would have a priority of 1.
- The Black Market theme extends the Black Highlighter theme, which has a priority of 2; therefore the Black Market theme would have a priority of 3.
The `theme` value is optional, and can be a URL to a CSS stylesheet e.g. a CSS theme.
The `css` value is optional, and can be URI-encoded CSS to apply directly to the Interwiki. To URI-encode CSS, see https://meyerweb.com/eric/tools/dencoder
--]
[[embed]]
<iframe src="//interwiki.scpwiki.com/styleFrame.html?priority=2&theme=https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css&css={$css}" style="display: none"></iframe>
[[/embed]]
[[=]]
[[module Rate]]
[[/=]]
[[module css]]
h1, h2, h3 {
text-align: center;
}
#page-title {
text-align: center;
}
[[/module]]
+ What this does
++ Makes the sidebar hidden by default and toggled via a corner button, similar to the mobile version of the site.
[[=]]
* Does NOT work on Sigma-9. This ONLY functions with [http://www.scpwiki.com/theme:black-highlighter-theme Black Highlighter.]
* [http://www.scpwiki.com/component:toggle-sidebar Use this component by EstrellaYoshte instead if you intend to use Sigma-9.]
* [http://www.scpwiki.com/component:collapsible-sidebar If you prefer, there is also a Collapsible Sidebar that functions on both BHL and Sigma-9.] _
The collapsible sidebar functions via hovering rather than clicking and is slightly more visible than the Toggle Sidebar.
[[/=]]
------
+ How to use
++ 1. Copy code below.
++ 2. Paste in article **after** Black Highlighter and any other Theme include.
> {{[[include :scp-wiki:component:toggle-sidebar-bhl]]}}
+++ 3. (Optional) Style toggle button if using a theme.
[[div class="blockquote"]]
There are also 5 CSS Vars available to style the button if needed.
For the colors, it is heavily suggested that you use the available BHL Color Vars which can be found [https://github.com/Nu-SCPTheme/Black-Highlighter/blob/master/src/css/root.css here.]
[[div class="code"]]
:root {
@@--toggle-button-bg: hex/rgb/hsl color;@@
@@--toggle-border-color: hex/rgb/hsl color;@@
@@--toggle-border-width: px/rem/em;@@
@@--toggle-icon-color: hex/rgb/hsl color;@@
@@--toggle-roundness: percentage;@@
}
[[/div]]
[[/div]]
------
[[collapsible show="+ Show component code" hide="- Hide component code"]]
[[code type="CSS"]]
:root {
--sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
--body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 48.0625rem) {
#side-bar .close-menu {
display: block;
position: fixed;
top: 0.5rem;
left: 0.5rem;
width: 3rem;
height: 3rem;
background: unset;
opacity: 1;
pointer-events: all;
z-index: -1;
}
#side-bar .close-menu img {
color: transparent;
}
#side-bar .close-menu::before,
#side-bar .close-menu::after {
content: "";
box-sizing: border-box;
position: fixed;
display: block;
top: 0.5rem;
left: 0.5rem;
width: 3rem;
height: 3rem;
padding: 0;
margin: 0;
text-align: center;
pointer-events: all;
cursor: pointer;
transition:
opacity var(--sidebar-transition-timing);
}
#side-bar .close-menu::before {
--mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
z-index: -1;
background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-size: 60%;
mask-size: 60%;
}
#side-bar .close-menu::after {
z-index: -2;
background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
border-radius: var(--toggle-roundness, 50%);
border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
}
#side-bar:focus-within .close-menu,
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
pointer-events: none;
}
#side-bar:focus-within .close-menu::before,
#side-bar:focus-within .close-menu::after {
opacity: 0;
pointer-events: none;
}
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
opacity: 0;
pointer-events: none;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: calc(var(--sidebar-width-on-desktop)*-1);
z-index: 10;
transition:
left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
margin-top: 0;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover {
left: 0;
}
#side-bar .side-block {
margin-top: 1rem;
background-color: rgb(0, 0, 0, 0);
border-radius: 0;
border-left-width: 0px;
border-right-width: 0px;
}
#main-content::before {
content: "";
display: block;
position: fixed;
top: 0;
right: 0;
z-index: -1;
opacity: 0;
transition:
opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
margin-left: var(--sidebar-width-on-desktop);
background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
padding-right: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 99;
}
#side-bar:focus-within ~ #main-content::before {
width: calc(100% - var(--sidebar-width-on-desktop));
opacity: 1;
pointer-events: all;
}
#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
width: calc(100% - var(--sidebar-width-on-desktop));
opacity: 1;
pointer-events: all;
}
@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
padding: inherit;
} }
#content-wrap {
display: flex;
flex-direction: row;
width: calc(100vw - (100vw - 100%));
min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
flex-grow: 2;
height: auto;
position: relative;
margin: 0 auto;
max-width: inherit;
}
#main-content {
width: 100%;
position: initial;
max-height: 100%;
padding: 2rem 1rem;
max-width: var(--body-width-on-desktop, 45.75rem);
margin: 0 auto;
}
#page-content {
max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
}
@supports (-webkit-hyphens:none) {
#side-bar {
transition:
left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
padding-right: 0;
background-color: rgb(0, 0, 0, 0);
pointer-events: all;
overflow-x: visible;
overflow-y: visible;
z-index: 999;
}
#side-bar::-webkit-scrollbar {
opacity: 0;
-webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
#side-bar .close-menu::before {
z-index: 999;
}
#side-bar .close-menu::after {
z-index: 998;
}
#side-bar:hover .close-menu::before,
#side-bar:hover .close-menu::after {
opacity: 0;
}
#side-bar:hover {
left: 0;
background-color: rgba(var(--swatch-menubg-color), 1);
padding-right: 0;
}
#side-bar:hover::-webkit-scrollbar {
opacity: 1;
}
#side-bar:hover~#main-content::before {
width: calc(100% - var(--sidebar-width-on-desktop));
opacity: 1;
pointer-events: all;
}
}
}
[[/code]]
[[/collapsible]]
[[/iftags]]
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Atoggle-sidebar-bhl/1")
[[/module]]
/*
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:uiu-bhl-theme/UIU_Logo.svg");
--header-title: "ACIID";
--header-subtitle: "Text ";
--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("");
margin: 0;
margin-left: 4em;
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;
}
#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;
}
div#extra-div-1,
div#extra-div-2 {
position: absolute;
top: 2.5rem;
width: 6rem;
height: 1rem;
border-radius: 0.0625rem;
}
div#extra-div-1 {
--light-on: -1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 0 0.0625rem 1.5rem rgba(255, 0, 0, 1) inset;
--light-off: -0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0 0.0625rem 0.125rem rgba(255, 0, 0, 0.2) inset;
left: 55%;
background-color: rgba(255, 0, 0, 0.75);
-webkit-animation: flash-1 1s infinite;
animation: flash-1 1s infinite;
}
@-webkit-keyframes flash-1 {
0% {
opacity: 0.2;
box-shadow: var(--light-off);
}
12.5% {
opacity: 1;
box-shadow: var(--light-on);
}
25% {
opacity: 0.2;
box-shadow: var(--light-off);
}
37.5% {
opacity: 1;
box-shadow: var(--light-on);
}
50% {
opacity: 0.2;
box-shadow: var(--light-off);
}
100% {
opacity: 0.2;
box-shadow: var(--light-off);
}
}
@keyframes flash-1 {
0% {
opacity: 0.2;
box-shadow: var(--light-off);
}
12.5% {
opacity: 1;
box-shadow: var(--light-on);
}
25% {
opacity: 0.2;
box-shadow: var(--light-off);
}
37.5% {
opacity: 1;
box-shadow: var(--light-on);
}
50% {
opacity: 0.2;
box-shadow: var(--light-off);
}
100% {
opacity: 0.2;
box-shadow: var(--light-off);
}
}
div#extra-div-2 {
--light-on: -1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 0 0.0625rem 1.5rem rgba(0, 0, 255, 1) inset;
--light-off: -0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0 0.0625rem 0.125rem rgba(0, 0, 255, 0.2) inset;
left: calc(55% + 6.25rem);
background-color: rgba(0, 0, 255, 0.75);
-webkit-animation: flash-2 1s infinite;
animation: flash-2 1s infinite;
}
@-webkit-keyframes flash-2 {
0% {
opacity: 0.2;
box-shadow: var(--light-off);
}
50% {
opacity: 0.2;
box-shadow: var(--light-off);
}
62.5% {
opacity: 1;
box-shadow: var(--light-on);
}
75% {
opacity: 0.2;
box-shadow: var(--light-off);
}
87.5% {
opacity: 1;
box-shadow: var(--light-on);
}
100% {
opacity: 0.2;
box-shadow: var(--light-off);
}
}
@keyframes flash-2 {
0% {
opacity: 0.2;
box-shadow: var(--light-off);
}
50% {
opacity: 0.2;
box-shadow: var(--light-off);
}
62.5% {
opacity: 1;
box-shadow: var(--light-on);
}
75% {
opacity: 0.2;
box-shadow: var(--light-off);
}
87.5% {
opacity: 1;
box-shadow: var(--light-on);
}
100% {
opacity: 0.2;
box-shadow: var(--light-off);
}
}page revision: 4, last edited: 20 Dec 2023 00:15