test
Name: test
Author: (user deleted)
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags:
Supports top bar menu *: no
Supports side bar menu *: no
* depends on tags: topbar and sidebar
Description:
Testing a theme
How to install
- go to: your wiki admin panel » appearance » themes
- choose External CSS theme
- supply the following URL as the CSS location
http://themes.wdfiles.com/local--code/testCode
[[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="error-block"]] Included page "component:image-block" does not exist ([/component:image-block/edit/true create it now]) [[/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 +theme]] [[module css]] @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css"); @import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css"); :root { --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg"); } .scp-image-block.block-right { margin: 1em 0 1em 2em; } .scp-image-block a { width: 100%; min-width: 100%; } .scp-image-block img { min-width: 100%; border: 0.5rem solid rgba(var(--pale-gray-monochrome)); box-sizing: border-box; } #page-content > div.scp-image-block.block-right > a { background-color: rgb(var(--gray-monochrome)); } #page-content > div.scp-image-block.block-right > a > img { padding: 1em; } [[/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]] [[/>]] [[=]] + 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"]] Jumbo[[span class="css-variable"]]@@--gray-monochrome@@[[/span]][[span class="css-variable"]](127,127,127)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--bright-accent));" data-variable="--bright-accent" data-has-light-text="1"]] Envy[[span class="css-variable"]]@@--bright-accent@@[[/span]][[span class="css-variable"]](145,179,153)[[/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(--pale-gray-monochrome));" data-variable="--pale-gray-monochrome" data-has-light-text="{$subcolor1-has-light-text}"]] Orange White[[span class="css-variable"]]@@--pale-gray-monochrome@@[[/span]][[span class="css-variable"]](233,231,204)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--light-gray-monochrome));" data-variable="--light-gray-monochrome" data-has-light-text="{$subcolor2-has-light-text}"]] Suva Gray[[span class="css-variable"]]@@--light-gray-monochrome@@[[/span]][[span class="css-variable"]](147,147,147)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--dark-gray-monochrome));" data-variable="--dark-gray-monochrome" data-has-light-text="1"]] Dove Gray[[span class="css-variable"]]@@--dark-gray-monochrome@@[[/span]][[span class="css-variable"]](101,101,101)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--white-monochrome));" data-variable="--white-monochrome" data-has-light-text="{$subcolor4-has-light-text}"]] White Rock[[span class="css-variable"]]@@--white-monochrome@@[[/span]][[span class="css-variable"]](238,238,216)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--black-monochrome));" data-variable="--black-monochrome" data-has-light-text="1"]] Zeus[[span class="css-variable"]]@@--black-monochrome@@[[/span]][[span class="css-variable"]](25,20,16)[[/span]] [[/div]] [[div_ class="color" style="background-color: rgb(var(--dark-accent));" data-variable="--dark-accent" data-has-light-text="1"]] Viridian Green[[span class="css-variable"]]@@--dark-accent@@[[/span]][[span class="css-variable"]](105,133,111)[[/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]] [[div class="scp-image-block block-right" style="max-width:300px;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg width="300px"link="https://scp-wiki.wikidot.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg"]] [[div class="scp-image-caption" style="max-width: 300px;"]] SCP Offices Theme [[/div]] [[/div]] + Usage [[div_ style="display:flex;"]] [[image https://scp-wiki.wdfiles.com/local--files/theme%3Ablack-highlighter-theme/black-highlighter-logo.svg]] [[/div]] ++ Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. [[[theme:black-highlighter-theme|To learn more go here]]]. On any wiki: [[div class="code"]] @@[[include :scp-wiki:theme:black-highlighter-theme]]@@ @@[[include :scp-wiki:theme:scp-offices-theme]]@@ [[/div]] + Examples A horizontal rule can be created with 5 hyphens "@@-----@@" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules. ----- Titles can be created by putting between one and six plus "+" at the start of the line [[collapsible show="+ Titles" hide="- Titles"]] + First Title ++ Second Title +++ Third Title ++++ Fourth Title +++++ Fifth Title ++++++ Sixth Title [[/collapsible]] @@ @@ [[tabview]] [[tab Tabulator]] 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 Empty Tab]] [[/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 || [[=]] [[span style="font-family: var(--header-font);"]]The Body, Header, Title, and monospace font is IBM Plex Mono.[[/span]] [[/=]] @@ @@ [[collapsible show="+ Show theme code" hide="- Hide theme code"]] [[code type="css"]] @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); @supports(display: grid) { :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighter"; /* must be either "black-highlighter" or "sigma9" */ --theme-id: "SCP-Offices-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "SCP Offices Theme"; /* set this to your theme's full name */ /* Typefaces */ --body-font: "JetBrains Mono", Recursive, Consolas, monaco, monospace; --header-font: var(--header-font); --title-font: var(--header-font); --mono-font: var(--header-font); --UI-font: var(--header-font); /* Standard Colors */ --white-monochrome: 238, 238, 216; --pale-gray-monochrome: 233, 231, 204; --light-gray-monochrome: 147, 147, 147; --gray-monochrome: 127, 127, 127; --dark-gray-monochrome: 101, 101, 101; --black-monochrome: 25, 20, 16; --bright-accent: 145, 179, 153; --medium-accent: 145, 179, 153; --dark-accent: 105, 133, 111; --swatch-text-general: var(--swatch-text-dark); --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:scp-offices-theme/scpoffices_logo.svg"); --background-gradient-color: 215, 215, 215; --background-gradient-distance: 40rem; /* Link Colors */ --link-color: var(--bright-accent); --visited-link-color: var(--dark-accent); --hover-link-color: var(--dark-accent); --newpage-color: 221, 102, 17; } #container-wrap-wrap { background-image: repeating-linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh), linear-gradient(to bottom, rgba(var(--black-monochrome), 1) var(--header-height-on-desktop), rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%); background-repeat: no-repeat; background-size: 100% var(--header-height-on-desktop), 100% var(--final-header-height-on-desktop); } a { --wght: 900; font-weight: 900; } #header h2 span::before { color: rgb(var(--bright-accent)); } #header h1 *, #top-bar *, #page-title * { will-change: opacity; transition: opacity 0.2s ease-in-out; } #header h1 a:hover::before, #header h1 a:hover::after, #top-bar a:hover, #page-title:hover, #search-top-box-form input[type="submit"]:hover, #search-top-box-form input[type="submit"]:focus { -webkit-animation: flicker 20s linear infinite; animation: flicker 20s linear infinite; } #side-bar .collapsible-block-unfolded { background: unset; } #side-bar div.menu-item a.collapsible-block-link, #side-bar .side-block>.collapsible-block a.collapsible-block-link { background: rgba(var(--medium-accent), 0.5); } #side-bar .close-menu::before { line-height: 0.85em !important; } #interwiki .heading p, #side-bar .heading p, #side-bar .collapsible-block .collapsible-block-link { color: rgb(var(--swatch-primary-darkest)) } #interwiki div.menu-item a, #side-bar div.menu-item a, #side-bar div.menu-item .text { --wght: 900; font-weight: 900; } #interwiki div.menu-item a:hover, #interwiki div.menu-item a:active, #side-bar div.menu-item a:hover, #side-bar div.menu-item a:active { -webkit-animation: flicker 20s linear infinite; animation: flicker 20s linear infinite; color: rgb(var(--swatch-text-tertiary-color)); } #interwiki div.menu-item a:focus-within, #side-bar div.menu-item a:focus-within { -webkit-animation: flicker 20s linear infinite; animation: flicker 20s linear infinite; color: rgb(var(--swatch-text-tertiary-color)); } .info-container .collapsible-block-folded, .info-container .collapsible-block-unfolded-link { background: rgb(var(--bright-accent)) !important; } div[id*="page-options-bottom"] { --ui-wght: 600; --ui-hvr-wght: 600; font-size: calc(var(--base-font-size) * 0.75); } div[id*=page-options-bottom]:not(:is(.page-rate-widget-box, #search-top-box-form)) > a.btn { --min-font-size: 0.7rem; } @media only screen and (max-width: 56.25rem) { #header { background-repeat: no-repeat, repeat; background-position: left calc(5vw + 5.5rem - 10.4rem) top calc(4% - var(--offset-from-page-top) / 2), top center; background-size: calc(8.75rem + var(--offset-from-page-top)), 100% var(--header-height-on-desktop); } } @-webkit-keyframes flicker { 0% { opacity: 1; } 5% { opacity: .9; } 6% { opacity: .8; } 11% { opacity: .4; } 11.25% { opacity: .6; } 11.5% { opacity: .4; } 18% { opacity: 1; } 18.5% { opacity: .9; } 22% { opacity: 1; } 38.5% { opacity: 1; } 39% { opacity: .8; } 42% { opacity: 1; } 60% { opacity: 1; } 60.5% { opacity: 0; } 62% { opacity: 0; } 63% { opacity: .2; } 63.25% { opacity: 0; } 65% { opacity: 1; } 73% { opacity: 1; } 75% { opacity: .8; } 79% { opacity: 1; } 100% { opacity: 1; } } @keyframes flicker { 0% { opacity: 1; } 5% { opacity: .9; } 6% { opacity: .8; } 11% { opacity: .4; } 11.25% { opacity: .6; } 11.5% { opacity: .4; } 18% { opacity: 1; } 18.5% { opacity: .9; } 22% { opacity: 1; } 38.5% { opacity: 1; } 39% { opacity: .8; } 42% { opacity: 1; } 60% { opacity: 1; } 60.5% { opacity: 0; } 62% { opacity: 0; } 63% { opacity: .2; } 63.25% { opacity: 0; } 65% { opacity: 1; } 73% { opacity: 1; } 75% { opacity: .8; } 79% { opacity: 1; } 100% { opacity: 1; } } } [[/code]] [[/collapsible]] [[footnoteblock]] [[/iftags]] [[module css]] @import url("https://scp-wiki.wdfiles.com/local--code/theme%3Ascp-offices-theme/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=3&theme=https://scp-wiki.wdfiles.com/local--code/theme%3Ascp-offices-theme/1&css={$css}" style="display: none"></iframe> [[/embed]]
Notes
Similar themes |
Browse themes by tag
2.0
3d
3d-buttons
610nm
and
and/or
ardeol
articles
band
base
beige
black
blog
bloo
blue
bmc
border
boring
brown
business
camo
cat
chocholate
christian
christmas
city
clan
claret
claus
clay
clean
coffe
coke
colorful
company
contest
contest-win
corperate
corporate
corporation
creative
crimson
cross
css3
css3-buttons
curved
d14
dark
dashed
deep
|
Comments
Show Comments