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

[[iframe https://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"]]

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

[[iframe https://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"]]

[[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");

a[rel="license"]::after {
    content: ".";

#content-wrap {
    max-width: 1240px;
}
}

/* ====== Чето из этого работает, плз не трогать, а не то руки откушу! - еноты ====== */

:root:lang(ru) {
   --body-width-on-desktop: 938px !important;
}

:root {
   --body-width-on-desktop: 938px !important;
}

table.form > tbody {
  display: inherit !important;
}

#history-form-1 > table > tbody > tr:first-child > td:nth-of-type(2) input {
  margin-left: 0%;
}

#history-form-1 > table > tbody > tr:first-child > td:nth-of-type(2) {
  display: inherit !important;
}

.interwiki {
  border: none !important;
}

#header div.open-menu > p > a {
  font-size: xx-large !important;
}

#header div[class*="top-bar"] > ul {
  flex-wrap: wrap !important;
}

#edit-page-form>.form>tbody>tr {
  min-width: max-content;
  grid-area: title-box;
}

#edit-page-comments {
  min-width: 90%;
  background-color: #f4f1f1;
}

#source-code>textarea {
  text-align: left;
}

.w-stars-rate-popularity {
  font-weight: bold;
}

.w-stars-rate-cancel {
  font-size: .8em;
  line-height: initial;
}

.diff-box>table {
  display: flex;
  flex-wrap: wrap;
  max-width: 1240px;
}

.diff-box>table tbody {
  overflow: hidden;
  width: inherit;
  word-break: break-all;
  text-align: left;
}

@media (max-width: 479px) {
.w-stars-rate-cancel {
  font-size: .9em;
  line-height: normal;
}
}

/* ====== Чето из этого работает, плз не трогать, а не то руки откушу! - еноты ====== */

:root {
  --logo-image: url(https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg);
}

#top-bar ul li a {
  max-height: none;
}
#side-bar hr {
  height: auto;
}
#side-bar div.collapsible-block a.collapsible-block-link::after {
  display: none;
}
[[/module]]

[[iftags +визуальная_тема]]
[[module css]]
.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);
}
.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: flex:
    align-content: center;
    justify-items: center;
    text-align: center;
}

.status span.active {
    color: rgb(var(--white-monochrome));
    -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));
}

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

[[image http://scpfoundation.net/local--files/theme:black-highlighter-theme/black-highlighter-logo.svg]]

[[=]]
[[div_ class="status"]]
Этот компонент теперь [[span class="active"]]АКТИВЕН[[/span]] на ру-филиале.
[[/div]]
[[/=]]
 _
[[div style="border: 1px solid #ddd; padding: 1em;"]]

+ Использование

На этой вики:

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

[[div class="blockquote"]]
++ Дополнения
----
+++ [http://www.scp-wiki.net/component:bhl-dark-sidebar Тёмная боковая панель]
[[div class="code"]]
@@[[include component:bhl-dark-sidebar]]@@
[[/div]]

+++ [http://www.scp-wiki.net/component:collapsible-sidebar Скрывающаяся боковая панель]
[[div class="code"]]
@@[[include component:collapsible-sidebar]]@@
[[/div]]

+++ [http://www.scp-wiki.net/component:centered-header-bhl Центрируемая шапка]
[[div class="code"]]
@@[[include component:centered-header-bhl]]@@
[[/div]]
[[/div]]

[[/div]]

+ Что это

Компонент позволяющий иcпользовать [http://scptestwiki.wikidot.com/ Black Highlighter] для ваших статей.

Данный компонент пока что находится в разработке, возможны ошибки.

+ Сообщение об ошибках

Чтобы сообщить об ошибке, свяжитесь с [[*user MrNereof]].

-----

[[=]]
+ Цвета темы
[[/=]]

[[iftags +визуальный_элемент]]
[[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 **Woedenaz** and componentised by **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 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 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;
}