Site Teması (Gorilla Orange)

Included page "template:kong" does not exist (create it now)

Yazılı Örnekler:


Başlık - 1

Başlık - 2

Başlık - 3

Başlık - 4

Başlık - 5
Başlık - 6
1614686467394.png

Logo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam lacus ut convallis imperdiet. Aenean at pellentesque dolor. Donec mi lectus, eleifend maximus velit et, rhoncus facilisis justo. Sed tempus nulla vel diam ullamcorper consectetur. Suspendisse feugiat vehicula pulvinar. Aliquam eu sapien convallis, rutrum magna id, condimentum tellus. Etiam hendrerit purus eu lacinia varius. Etiam quis orci sed diam eleifend luctus a vel nibh. Duis pellentesque scelerisque leo, et molestie erat viverra vitae.

Donec ac venenatis lorem. Aenean euismod quam vitae libero elementum, vel facilisis sem volutpat. Fusce pellentesque orci vitae velit blandit, in ornare ex congue. Morbi malesuada eu massa in fringilla. Phasellus auctor ex euismod vestibulum eleifend. Proin nec hendrerit orci. Sed vitae quam quam. Sed ligula ipsum, dignissim sed luctus et, facilisis maximus lectus. Vivamus fermentum mi eu justo tempus ornare. Phasellus condimentum lectus quis posuere placerat. Ut nibh orci, tincidunt id libero vitae, faucibus eleifend purus.

In efficitur risus in semper commodo. Nullam sed lacinia velit. Cras ut blandit mi. Sed pharetra enim vel turpis ultricies posuere. Cras pulvinar arcu vitae venenatis imperdiet. Pellentesque interdum dignissim erat. Vivamus turpis urna, mattis nec lacus interdum, semper viverra magna.

Blockquote - Nullam dapibus, felis sit amet pretium tincidunt, ante eros maximus mi, id congue lacus diam ac mi. Integer sollicitudin quam fringilla, ullamcorper libero ut, scelerisque elit. Phasellus tempor risus vitae quam mollis, eget sollicitudin metus accumsan. Fusce interdum ultrices tellus, eget suscipit mauris dictum eu. Aliquam diam nisl, tempor quis nisi eget, dictum pulvinar enim. Curabitur consectetur venenatis porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris porttitor ante non ultricies consequat. Donec gravida ex pharetra, mollis ligula eu, accumsan libero. Praesent eget ornare lacus, et rutrum est. Pellentesque at turpis turpis. In eleifend eros sed dolor tempus elementum. Quisque ultrices nulla vel turpis molestie, eu iaculis erat auctor.


Herhangi Bir Sitede Kullanmak İçin:

[[include template:kong]]

Tema

[[iftags +theme]]
[[module CSS]]
.color {
    font-weight: bold;
    text-align: center;
    color: white;
    border: 1px solid black;
    margin: 0.25em;
    padding: 1em;
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
    -webkit-animation-duration: 1s;
}

.footnotes-footer {
    display: none;
}
[[/module]]

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

= [[size 110%]]This theme is currently ##green|**ACTIVE**##.[[/size]]

[[div style="border: 1px solid #ddd; padding: 1em;"]]

+ What this is

A component that applies the [[[component:theme|Sigma-9]]] theme, the preferred choice for thousands of articles.

Used by notable articles like [[[SCP-173]]], [[[SCP-682]]], [[[SCP-096]]], [[[/|main]]], and [[[SCP-9731]]] (doesn't exist yet but it'll be great trust me I just need two greenlights please)

What are you waiting for? Add it today and we'll slash the price by 20%!
[[/div]]

+ Usage

This is a [[[theme:black-highlighter-theme|Black Highlighter]]]-based theme. So make sure to include it as well:

[[div class="code"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
@@[[include :scp-wiki:theme:sigma]]@@
[[/div]]

Then delete it because that's for nerds.

[[div class="code"]]
--@@[[include :scp-wiki:theme:black-highlighter-theme]]@@--
@@[[include :scp-wiki:theme:sigma]]@@
[[/div]]

Actually, your wiki probably already uses Sigma-9 (that's how great it is). So delete the second line too.

[[div class="code"]]
--@@[[include :scp-wiki:theme:black-highlighter-theme]]@@--
--@@[[include :scp-wiki:theme:sigma]]@@--
[[/div]]

Congratulations, you are now using the latest and greatest of CSS technology!

-----

+ Theme Colors

[[div_ class="color" style="background-color: #d61"]]
Sunny-D Orange
[[/div]]

[[div_ class="color" style="background-color: #901"]]
Sour Grapes
[[/div]]

[[div_ class="color" style="background-color: #700"]]
Liver
[[/div]]

[[div_ class="color" style="background-color: #333"]]
Threat Level: Black
[[/div]]

[[div_ class="color" style="background-color: #ddd; color: black"]]
[[span class="blink"]]You have a new message[[/span]] Gray
[[/div]]

+ Examples

[[div class="image-block block-right" style="width:300px;"]]
[[image https://scp-wiki.wdfiles.com/local--files/component%3Atheme/logo.png style="width:300px;" link=#]]
[[div class="image-caption" style="width:300px;"]]
SCP Foundation Logo
[[/div]]
[[/div]]

A horizontal rule can be created with 4 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.

----

Titles can be created by putting between one and six plus "+" at the start of the line

[[collapsible show="+ Titles" hide="- Titles"]]
+ King

++ President

+++ Senator

++++ Representative

+++++ Member of Parliament

++++++ The Right Honourable Lord Mayor
[[/collapsible]]

@@@@
@@@@
@@@@
@@@@
@@@@
@@@@
@@@@
@@@@

[[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]]
Ha! I lied!
[[/tab]]
[[/tabview]]

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

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already[[footnote]]Unless you don't, in which case you do "{{@@|| contents || of || table ||@@}}", with "{{@@||~ name ||@@}}" for headers.[[/footnote]] ||

[[div class="sexy-box"]]
This is a sexy box. Yes, this is a real class offered by Sigma-9!

It can be created using the following code:

[[code]]
[[div class="sexy-box"]]

... contents ...

[[/div]]
[[/code]]

Remember to add the "{{adult}}" tag to any articles you use this div on!
[[/div]]

+ Testimonials

> **[[*user Elenee FishTruck]] says:**
> 
> This should replace the current theme!

> **[[*user NatVoltaic]] says:**
> 
> im crying

> **[[*user Smapti]] says:**
> 
> I don't care for it. Is there any way to make the [/forum/t-766406/new-site-theme#post-1943647 classic layout] appear on my screen?

> **[[*user Ellie3]] says:**
> 
> this is {{!important}}
> 
> now sigma balls

> **[[*user pxdnbluesoul]] says:**
> 
> look guys, i kind of have a lot of stuff going on, can you just like make this work for a little while longer?

> **[[*user Uncle Nicolini]] says:**
> 
> what a colossal waste of time

[[=]]
[[span style="font-family: verdana, arial;"]]The body font is Verdana.[[/span]]
[[span style="font-family: BauhausLTDemi;"]]The header font is LTDemi.[[/span]]
[[span style="font-family: 'Trebuchet MS', Trebuchet;"]]The subheader font is Trebuchet MS.[[/span]]
[[span style="font-family: 'Andale Mono', 'Courier New', Courier;"]]The monospace font is Andale Mono.[[/span]]
[[/=]]
[[/iftags]]

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

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

[[iftags +theme -nobhl]]
[[module css]]
.scp-image-block.block-right {
    padding: 1em !important;
    background: var(--gradient-header);
}

.scp-image-block img {
    padding-bottom: 1em;
}

.status {
    font-family: var(--title-font);
    font-weight: 900;
    font-size: 200%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
}

.status span.active {
    color: rgb(var(--white-monochrome));
    margin-left: 0.5rem;
    -webkit-box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
        0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        -0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        -0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
       -moz-box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
        0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        -0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        -0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
            box-shadow: 
    inset 100vw 0 0 0 rgb(var(--rating-module-button-plus-color)), 
        0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        -0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        -0.25rem 0.25rem 0 rgb(var(--rating-module-button-plus-color)), 
        0.25rem -0.25rem 0 rgb(var(--rating-module-button-plus-color));
}

.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]]
[[>]]
[[module Rate]]
[[/>]]
[[image https://scp-wiki.wdfiles.com/local--files/component%3Ablack-highlighter-theme-dev/black-highlighter-logo.svg]]

[[=]]
[[div_ class="status"]]
This component is currently [[span class="active"]]ACTIVE[[/span]]
[[/div]]
[[/=]]
 _
[[div style="border: 1px solid #ddd; padding: 1em; text-align: center;"]]

+ Usage

On any wiki:

[[div class="code" style="text-align: center;"]]
@@[[include :scp-wiki:theme:black-highlighter-theme]]@@
[[/div]]

[[div class="blockquote" style="text-align: center;"]]
++ [[[black-highlighter-themes | ]]]
------
++ Optional Addons
+++ [[[component:bhl-dark-sidebar|Dark Sidebar]]]
[[div class="code"]]
@@[[include :scp-wiki:component:bhl-dark-sidebar]]@@
[[/div]]

+++ [[[component:collapsible-sidebar|Collapsible Sidebar]]]
[[div class="code"]]
@@[[include :scp-wiki:component:collapsible-sidebar]]@@
[[/div]]

+++ [[[component:toggle-sidebar-bhl|Toggle Sidebar]]]
[[div class="code"]]
@@[[include :scp-wiki:component:toggle-sidebar-bhl]]@@
[[/div]]

+++ [[[component:centered-header-bhl|Centered Header]]]
[[div class="code"]]
@@[[include :scp-wiki:component:centered-header-bhl]]@@
[[/div]]
[[/div]]

[[/div]]

+ What this is

A component that applies the [http://scptestwiki.wikidot.com/ Black Highlighter] theme to your article.

This component will apply a stable version of the Black Highlighter theme, but it might break sometimes as it's updated. 

+ Reporting problems

If you've got a Github account, create an Issue [https://github.com/Nu-SCPTheme/Black-Highlighter/issues here] 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 PM to preferably [[*user Woedenaz]] or, if he does not respond, [[*user Croquembouche]].
-----

[[=]]
+ 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);
}

.colors-container .subcolors .color {
  height: 4rem;
  min-width: 4rem;
  font-size: 75%;
  text-align: center;
  flex-basis: calc((100% / 6) - 2rem);
}

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

+ Examples

[[div class="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="image-caption" style="width:200px;"]]
SCP Foundation Logo
[[/div]]
[[/div]]

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.

-----

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

> This is a blockquote, created by putting "> " at the start of each line.
> 
> More text
> -----
> That's a horizontal rule
> 
>> Nested blockquotes

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

[[=]]
[[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");
div.blockquote {
    padding-top: 0.5em;
}
div.blockquote tt {
    margin: 0.5em 1em 1em 1em;
    display: block;
    background-color: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-monochrome));
    padding: 0.5em;
}
[[/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]]
[[div_ class="blockquote"]]

Pretty self explanatory.
For anyone who //really// wants the dark sidebar from the O.G. BHL on their articles.
Just add this include **AFTER** the BHL include:
{{[[include :scp-wiki:component:bhl-dark-sidebar]]}}
[[/div]]
[[/=]]
-----
[[collapsible show="+ Show component code" hide="- Hide component code"]]

[[code type="css"]]
#interwiki, 
#side-bar {
    /* ===SECONDARY & TERTIARY COLORS=== */
    /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */

    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-color);
    --swatch-alternate-color: var(--swatch-menubg-light-color);

    /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
    --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
    --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);

    /* ===SIDE-BAR ELEMENTS=== */

    /* ===SIDE-BAR GENERAL=== */
    --sidebar-bg-color: var(--swatch-menubg-dark-color);
    --sidebar-resources-bg-color: 0, 0, 0, 0;
    --sidebar-media-bg-color: 0, 0, 0, 0;

    /* ===SIDEBLOCK MENU=== */
    --sideblock-heading-border-color: var(--bright-accent);
    --sideblock-heading-bg-color: 0, 0, 0, 0;
    /* Transparent */
    --sideblock-heading-text-color: var(--swatch-text-tertiary-color);

    /* ===MENU-ITEMS=== */
    --sidebar-border-color: var(--swatch-primary), 0.08;
    --sidebar-subtext-color: var(--swatch-text-tertiary-color);

    --sidebar-links-text: var(--swatch-text-tertiary-color);
    --sidebar-links-hover-bg-color: var(--bright-accent);
    --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color);

    /* ===SIDEBAR COLLAPSIBLES=== */
    /*Folded Colors */
    --sidebar-collapsible-fld-link-bg: var(--swatch-primary), 0.25;
    --sidebar-collapsible-fld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-text-tertiary-color);

    /*Unfolded Colors */
    --sidebar-collapsible-ufld-link-bg: var(--swatch-primary-darker), 0.25;
    --sidebar-collapsible-ufld-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--swatch-text-tertiary-color);

    /* Unfolded Body Colors */
    --sidebar-collapsible-link-color: var(--swatch-text-tertiary-color);
    --sidebar-collapsible-link-hover-color: var(--swatch-text-tertiary-color);

    scrollbar-color:
        rgba(var(--swatch-primary-darker), 0.1)
        /* Thumb */
        rgba(var(--swatch-secondary-color), 0.05);
    /* Track */

    border-color: rgba(var(--swatch-secondary-color), 0.4);
}

/* Hover Scrollbar Behavior */
#side-bar:hover,
#side-bar:active {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}

#side-bar:focus-within {
    scrollbar-color:
        rgb(var(--swatch-primary-darker), 1)
        /* Thumb */
        rgb(var(--swatch-menubg-dark-color), 1);
    /* Track */
}

#side-bar::-webkit-scrollbar-track {
    background-color: rgba(var(--swatch-tertiary-color), 0.8);
}

#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
    background-color: rgba(var(--swatch-menubg-dark-color), 0);
}

#side-bar .side-block.media a:-webkit-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}

#side-bar .side-block.media a:-moz-any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}

#side-bar .side-block.media a:any-link {
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}

#side-bar .side-block.media a::before {
    background: rgb(var(--social-color));
}

#side-bar .side-block.media a[href*="tiktok"]::before,
#side-bar .side-block.media a[href*="tiktok"]::after {
    transition:
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        background-image 200ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#side-bar .side-block.media a[href*="tiktok"]:hover::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
}

#side-bar .side-block.media a[href*="tiktok"]:hover::before,
#side-bar .side-block.media a[href*="tiktok"]:active::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}

#side-bar .side-block.media a[href*="tiktok"]:focus-within::before {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background-image: var(--tiktok-icon-gradient);
    background-size: contain;
}

#side-bar .side-block.media a[href*="tiktok"]::after {
    --clip-path:
        polygon(0 0,
            0 0,
            0 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}

#side-bar .side-block.media a[href*="tiktok"]:hover::after,
#side-bar .side-block.media a[href*="tiktok"]:active::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}

#side-bar .side-block.media a[href*="tiktok"]:focus-within::after {
    --clip-path:
        polygon(-15% 0,
            115% 0,
            100% 100%,
            0 100%
        );
    background: rgba(var(--swatch-menubg-light-color), 0.75) !important;
}

#side-bar .side-block.media a img {
    -webkit-filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
            filter: drop-shadow(0 0 0 rgba(var(--swatch-alternate-color), 0));
    transition: -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

#side-bar .side-block.media a:hover img,
#side-bar .side-block.media a:active img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}

#side-bar .side-block.media a:focus-within img {
    -webkit-filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
            filter: drop-shadow(0.1875rem 0.1875rem 0 rgb(var(--swatch-alternate-color)));
}

html:not(:lang(cn)) div.scpnet-interwiki-wrapper p::before {
    box-shadow: inherit;
}

#side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
#side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
    background-color: rgb(var(--swatch-menubg-dark-color));
}

[[/code]]
[[/collapsible]]
[[/iftags]]
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Abhl-dark-sidebar/1");
[[/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=4&theme=https://scp-wiki.wdfiles.com/local--code/component%3Abhl-dark-sidebar/1&css={$css}" style="display: none"></iframe>
[[/embed]]

[[module css]]
@import url("https://use.typekit.net/nxg5itx.css");

@supports(display:grid) {

    :root {
        /* Header */
        --logo-image: url("https://cdn.discordapp.com/attachments/625712937624928281/816279048443265044/1614686467394.png");
                --header-title: "GKB";
                --header-subtitle: "Goril Kontrol Birliği";
        /* Typefaces */
        --body-font: commuters-sans, serif;
        --header-font: base-12-sans, sans-serif;
        --title-font: base-12-sans, sans-serif;
        --mono-font: courier-std, monospace;

        /* Standard Colors */
        --white-monochrome: 252, 252, 252;
        /* white */
        --pale-gray-monochrome: 244, 244, 244;
        /* v light gray for blockquotes and stuff */
        --light-pale-gray-monochrome: 244, 244, 244;
        /* very light pale gray for misc. use */
        --very-light-gray-monochrome: 215, 215, 215;
        --light-gray-monochrome: 215, 215, 215;
        /* light accent gray for login status */
        --gray-monochrome: 179, 130, 77;
        /* gray */
        --dark-gray-monochrome: 115, 78, 55;
        /* dark accent gray for sidebar background */
        --black-monochrome: 26, 28, 28;
        /* black */
        --bright-accent: 252, 201, 135;
        /* bright red */
        --medium-accent: 207, 107, 45;
        /* medium red */
        --dark-accent: 69, 35, 14;
        /* dark red */
        --newpage-color: 221, 143, 17;
        /* pale orange */

        /* Primary Text Colors */
        --swatch-text-general: var(--swatch-text-light);

        /* Primary Menu Colors */
        --swatch-menubg-color: var(--black-monochrome);
        --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
        --swatch-border-color: var(--swatch-menubg-dark-color);
        --sidebar-links-text: var(--swatch-menutxt-light-color);

        /* Primary Theme Colors */
        --swatch-background: var(--black-monochrome, 26, 25, 24);

        /* Rating Module Colors */
        --rating-module-button-color: var(--bright-accent);
        --rating-module-button-plus-color: 45, 65, 25;
        --rating-module-button-negative-color: 70, 35, 30;
        --rating-module-button-cancel-color: 50, 45, 50;
        --rating-module-button-credit-color: 50, 45, 50;
        --rating-module-text-color: var(--bright-accent);
        --rating-module-text-hover-color: var(--swatch-menutxt-light-color);

        /* Background and Header Colors */
        --background-gradient-color: var(--dark-accent, 33, 70, 63);
        --header-gradient-color-bottom: var(--dark-accent);
        --header-gradient-color-middle: var(--black-monochrome);
        --header-gradient-color-top: var(--black-monochrome);

        --gradient-header: linear-gradient(30deg,
            rgb(var(--header-gradient-color-bottom)) 0%,
            rgb(var(--header-gradient-color-middle)) 90%,
            rgb(var(--header-gradient-color-top)) 100%);

        --scrollbar-width: 0.5rem;

        /* header measurements */
        --header-height-on-desktop: 12rem;
        --header-height-on-mobile: 12rem;
        --topbar-height-on-desktop: 1.875rem;
        --topbar-height-on-mobile: 3rem;

        scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }

    html,
    body {
        color: rgb(var(--swatch-text-light));
    }

    a {
        color: rgb(var(--swatch-primary-darker));
    }

    @supports (background-blend-mode: screen) {
        #extrac-div-1 {
            width: 100%;
            height: var(--header-height-on-desktop);
            position: absolute;
            top: 0;
            left: 0;
            background-image: var(--gradient-header), url(http://www.scp-wiki.net/local--files/theme:old-money-theme/deco-pattern.png);
            background-size: var(--header-background-image-size) 100%, 100% 100%;
            background-blend-mode: color-burn;
            pointer-events: none;
        }

        div#extra-div-1 {
            width: 100%;
            height: calc(100% - var(--final-header-height-on-desktop));
            position: absolute;
            top: calc(var(--final-header-height-on-desktop));
            left: 0;
            z-index: -1;
            background-color: rgba(252, 252, 252, 1);
            background-color: rgba(var(--swatch-background), 1);
            mask: var(--gradient-background);
            -webkit-mask: var(--gradient-background);
            background-image: url(https://cdn.discordapp.com/attachments/625712937624928281/816322988181553212/Adsz_tasarm_26.png), var(--gradient-background);
            background-size: 10%, 100% var(--background-gradient-distance);
            background-blend-mode: difference;
            background-repeat: repeat, repeat-x;
            pointer-events: none;
        }
    }

    #header {
        background-repeat: no-repeat;
        background-position: left 0 top 0.25rem;
        background-clip: border-box;
        -webkit-background-size: auto calc(var(--header-height-on-desktop) - 1rem);
        background-size: auto calc(var(--header-height-on-desktop) - 1rem);
        filter: initial;
    }

    #header h1 a {
        font-size: 200%;
        overflow-wrap: normal;
        padding: 0;
        margin-top: calc((var(--header-height-on-desktop) - 0.5em)/2);
        margin-left: calc(var(--header-height-on-desktop) - .75rem);
    }

    #header h1 a::before {
        color: rgb(255, 219, 90);
        color: rgb(var(--bright-accent));
        text-shadow: inherit;
        background: url("https://cdn.discordapp.com/attachments/625712937624928281/816589993199140874/unknown.png");
        -webkit-background-size: cover;
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow-wrap: normal;
    }

    #header h2 span {
        margin-left: calc(var(--header-height-on-desktop) + 0.75rem);
    }

    #header h2 {
        font-size: 150%;
    }

    #side-bar:hover {
        background-color: rgb(var(--black-monochrome), 0.5);
        scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }

    #side-bar {
        background-color: rgb(var(--black-monochrome));
        scrollbar-color: rgba(var(--dark-gray-monochrome), 0) rgba(var(--black-monochrome), 0);
    }

    #side-bar div.menu-item {
        border-bottom: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
        border-top: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
        margin-top: -0.0625rem;
    }

    #side-bar div.menu-item > :not(:nth-child(2)):not(.collapsible-block) {
        border-left: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
    }

    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        color: rgb(var(--swatch-menutxt-light-color));
    }

    #side-bar .heading,
    #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded {
        background: initial;
    }

    #side-bar .heading p,
    #side-bar .side-block > .collapsible-block .collapsible-block-link {
        color: rgb(var(--swatch-menutxt-dark-color));
        text-shadow: inherit;
        letter-spacing: 0.05rem;
        font-weight: 900;
        font-size: 1.25rem;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 1rem 0 1rem 0.5rem;
        color: rgb(255, 219, 90);
        color: rgb(var(--bright-accent));
        text-shadow: inherit;
        background: url("https://media2.s-nbcnews.com/i/newscms/2020_13/3283416/200325-mountain-gorilla-se-140p_f83864c7c67947347d3b3be1054cd00e.jpg");
        -webkit-background-size: cover;
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow-wrap: normal;
        font-family: var(--header-font);
        text-transform: none;
    }

    #side-bar .heading p::after,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::after,
    #side-bar .heading p::before,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 0.35rem;
        background-image: url("https://cdn.discordapp.com/attachments/625712937624928281/816314739952320512/PicsArt_03-02-05.23.10.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #side-bar .side-block[style*="background-color:"] * {
        margin-left: 0 !important;
    }

    #side-bar > div[style="background-color: #e5e5ff;"] > div.menu-item > div {
        background-color: rgb(var(--black-monochrome));
    }

    #side-bar .side-block[style*="background-color:"] .heading {
        margin-top: .25rem;
    }

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

    #side-bar .heading p::before,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::before {
        top: -0.6rem;
    }

    #side-bar div.menu-item .sub-text {
        color: rgba(var(--swatch-primary-darker), 1);
    }

    iframe.scpnet-interwiki-frame {
         filter: invert(0.9) hue-rotate(222deg) saturate(1.5) contrast(1);
    }

    #page-title {
        color: rgb(var(--swatch-menutxt-light-color));
    }

    blockquote {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .yui-navset .yui-content {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .yui-navset .yui-content,
    .yui-navset .yui-navset-top .yui-content {
        border-color: rgb(var(--swatch-menubg-dark-color));
    }

    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
        background-color: rgb(var(--swatch-menubg-black-color));
        color: rgb(var(--swatch-text-light));
    }

    table.wiki-content-table th {
        background: rgb(var(--swatch-primary-darkest));
    }

    .code {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .hl-main {
        filter: invert(1) hue-rotate(180deg);
    }

    .image-block .image-caption {
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }

    .image-block img {
        border: 0.5rem solid rgba(var(--black-monochrome));
    }

    a:visited {
        color: rgb(var(--swatch-primary-darker));
    }

    h1 {
        color: rgb(var(--swatch-primary)) !important;
    }

    hr {
        border-top: none;
        position: relative;
        height: 0.35rem;
        background: rgba(0, 0, 0, 0);
        display: flex;
    }

    hr::before {
        content: " ";
        position: absolute;
        top: 0.1125rem;
        left: 0;
        border-top: none;
        width: 100%;
        height: 0.125rem;
        background: -webkit-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
        background: -o-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
        background: -moz-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
        background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
        background-position: center center;
        -webkit-filter: blur(0.04rem);
        filter: blur(0.04rem);
    }

    hr::after {
        content: " ";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 10%;
        height: 0.35rem;
        background-image: url("http://scp-wiki.wikidot.com/local--files/component:old-money-theme/OldMoney_Divider.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .page-rate-widget-box {
        background: linear-gradient(to top, rgba(var(--swatch-primary), 0.25) 0, rgba(var(--swatch-primary-darker), 0.15) 100%) !important;
    }

    form#edit-page-form {
        background-color: rgba(var(--dark-accent), 0.25);
    }

    textarea,
    input.text {
        background-color: rgb(var(--black-monochrome));
        color: rgb(var(--white-monochrome));
        padding: 0.5em;
    }

    #lock-info {
        background-color: rgb(var(--dark-accent));
    }

    div.buttons input,
    input.button,
    button,
    file,
    a.button {
        background-color: rgb(var(--medium-accent));
        color: rgb(var(-black-monochrome));
        border-color: rgb(var(--black-monochrome))
    }

    div.buttons input:hover,
    input.button:hover,
    button:hover,
    a.button:hover {
        background-color: rgb(var(--bright-accent));
    }

    div#page-info,
    div.page-watch-options {
        padding: 0 1em;
    }

    div#page-options-bottom {
        width: 90%;
        margin-bottom: 2.125rem;
        margin-left: auto;
        margin-right: auto;
    }

    div#page-options-bottom-2 {
        width: 90%;
        margin-top: -2.125rem;
        margin-left: auto;
        margin-right: auto;
    }

    div#page-options-bottom,
    div#page-options-bottom-2 {
        text-align: left;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    div#page-options-bottom,
    div#page-options-bottom-2,
    div#page-options-bottom > a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }

    div#page-options-bottom > a,
    div#page-options-bottom-2 > a {
        -webkit-box-flex: 2;
        -webkit-flex-grow: 2;
        -moz-box-flex: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        padding: .25rem;
        -webkit-border-radius: .25rem;
        border-radius: .25rem;
        background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
        border: 0.0625rem solid rgba(var(--swatch-primary), 0.25);
        font-weight: 700;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    div#page-options-bottom-2 > a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }

    div#page-options-bottom > a:hover,
    div#page-options-bottom > a:active,
    div#page-options-bottom-2 > a:hover,
    div#page-options-bottom-2 > a:active {
        text-decoration: none;
        background-color: rgba(var(--swatch-menubg-dark-color), 1);
        color: rgba(var(--swatch-primary), 1);
        border: 0.0625rem solid rgba(var(--swatch-primary-darkest),1);
    }

    .owindow .title {
        background-color: rgb(var(--swatch-menubg-dark-color));
    }

    #odialog-container,
    .title.modal-header,
    .owindow,
    .hovertip {
        background-color: rgb(var(--swatch-primary-darkest));
    }

    .owindow .button-bar a {
        background-color: rgb(var(--swatch-menubg-dark-color));
        color: rgb(var(--white-monochrome));
    }

    @media only screen and (max-width: 768px) {
        #header {
            --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
            --y-offset: 1.5rem;
            background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
            background-repeat: no-repeat, repeat;
        }

        #header > h1 > a > span {
            height: var(--header-height-on-mobile);
        }

        #header h1 a {
            line-height: 1;
        }

        #header h2 span {
            line-height: 1.1;
        }
    }

    @media only screen and (min-width: 600px) and (max-width: 768px) {
        #header {
            --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
            --y-offset: 1.5rem;
            background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) 
                calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
            background-size: var(--size), 100% var(--header-height-on-mobile);
            background-repeat: no-repeat, repeat;
        }

        #header h1 a {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 0.75em);
            line-height: 1;
            font-size: 300%;
        }

        #header h2 span {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
            line-height: 1.1;
            font-size: 120%;
        }
    }

    @media only screen and (min-width: 400px) and (max-width: 600px) {
        #header h1 a {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
            font-size: 140%;
        }

        #header h2 span {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
            font-size: 60%;
        }
    }

    @media only screen and (max-width: 400px) {
        #header h1 a {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
            font-size: 125%;
        }

        #header h2 span {
            margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
            margin-top: calc(((var(--header-height-on-mobile) / 2) + 3.5em));
            font-size: 35%;
        }
    }
}
[[/module]]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License