On any page:[[include theme:basalt]]
Info
Basalt is an aesthetic theme for the SCP Wiki by Пользователь 'Liryn' не существует and Пользователь 'Placeholder McD' не существует functioning as an extension of Bedrock, a base theme created specifically for this project. Visit Bedrock's wiki page or its home on GitHub for more info, including all of the CSS variables it offers.Theme settings
Add theme settings to your [[include]] module to modify aspects of Basalt.[[include :scp-wiki:theme:basalt themesetting]]
[[include :scp-wiki:theme:basalt themesetting|another-themesetting]]
All theme settings as of the current version:darkmode=a
Applies dark modewide=a
Widens pagehidetitle=a
Removes page titlecentertitle=a
Centers page titleacs-itemnum=a
Restores ACS "ITEM#:" textdisable-acs-anim=a
Disables ACS Animation component
Included with Basalt
- BetterFootnotes by Пользователь 'EstrellaYoshte' не существует
- ACS Animation by Пользователь 'EstrellaYoshte' не существует
Fonts
Header and UI font is Sofia Sans.
Body font is Inter.Monospace font is JetBrains Mono.
On any page:[[include theme:admo]]
Info
Эта тема сделана специально для хаба НАЗИДАНИЕ. Было бы очень странно увидеть её где-нибудь ещё. It is built on top of the Basalt theme framework.Astral Variant
[[include theme:admo astral=a]]
[[span class="cond"]][[span class="ctrl"]] ADMO
FEATURING LIRYN
MORE STUFF HERE
[[div class="admo-end_card"]] [[div class="admo-credits"]] [[div]] + [[span class="ctrl"]]ADMO[[/span]] [[/div]] [[div]] [[span class="cond"]]FEATURING @@ @@ **AUTHOR**[[/span]] [[/div]] [[/div]] [[/div]]
Usage
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. To learn more go here.
On any wiki:[[include theme:black-highlighter-theme]]
[[include theme:penumbra-bhl]]
CSS Variables are identical to the original theme for easy(ish) replacement, if desired. [See Below]
EXCEPT the --accentColor
will need to be converted to rgb. For instance #1EB5E8
will have to be converted to 30, 181, 232
. Useful tool for this here.
DO NOT include rgb( )
when converting the hex color. Just the three numbers.
:root {
--header-title: "BIG HEADER TITLE";
--header-subtitle: "small header subtitle";
--lgurl: url("your url here");
--accentColor: COLOR HERE;
}
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
This is a tab view.
Hey look, more text here.
How quaint.
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.
This is a blockquote, created by putting "> " at the start of each line.
More textThat's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
[[div class="darkbox"]]
[[div class="lightbox"]]
The
sidebox
div is set up as follow:[[div class="limit"]] <— Set the start limit of the anchor
[[div class="anchor"]] <— Set sidebox's sticky position
[[div class="sidebox"]]
Some sidebox text here.
[[/div]]
[[/div]]
Text where sidebox scroll past.
[[/div]] <— Set the end limit of the anchor
With some finesse, it is possible
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
to have multiple sideboxes
Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.
Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.
act like this.
Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.
Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.
limit
div, the anchor
will be stickied across the entire page content once past its sticky position.Note that the sidebox
div minimizes on mobile, or screenwidth of 1290px and below.The header font is Jost.
The body font is Roboto.
The monospace font is Fira Code.
Использование
На этой вики:
[[include theme:black-highlighter-theme]]
Дополнения
Тёмная боковая панель
[[include component:bhl-dark-sidebar]]
Скрывающаяся боковая панель
[[include component:collapsible-sidebar]]
Центрируемая шапка
[[include component:centered-header-bhl]]
Что это
Компонент позволяющий иcпользовать Black Highlighter для ваших статей.Данный компонент пока что находится в разработке, возможны ошибки.Сообщение об ошибках
Чтобы сообщить об ошибке, свяжитесь с MrNereof.Цвета темы
Примеры
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.
Первый заголовок
Второй заголовок
Третий заголовок
Четвёртый заголовок
Пятой заголовок
Шестой заголовок
- Табло
- Табло
- Большое табло
- Это пустое табло с длинным названием. Очень длинным. Очень очень длинным.
- Пустое табло
- Пустое табло
- Пустое табло
- Пустое табло
- Пустое табло
Это таблица.
Смотри, здесь больше текста.
Ещё больше.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это длинное табло. Оно содержит много текста.
Это цитата, её можно создать поставив "> " в начале строки.
Больше текстаЭто горизонтальная линия.
Глубокая цитата.
Это | Таблица |
---|---|
Ты уже должен знать | как это |
сделать |
Шрифт в интерфейсе PT Root UI.
Моноширинный шрифт Recursive.
Все шрифты лицензированы по лицензии SIL Open Font, версия 1.1
Theme Colors
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. To learn more go here.
On any wiki:[[include theme:black-highlighter-theme]]
[[include theme:dustjacket]]
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.An alternative horizontal rule is available as well if the "-----" is enclosed in a "fancyhr" class div, like so:
Resulting in this:[[div_ class="fancyhr"]]
-----
[[/div]]
content goes here
[[/div]]
This is a tab view.
Hey look, more text here.
How quaint.
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.
This is a blockquote, created by putting "> " at the start of each line.
More textThat's a horizontal rule
Nested blockquotes
This is a | table |
---|---|
You should know | how to make these |
already |
The body font is Alegreya, because Texturina doesn't have Cyrillic
The Header and Title font is EB Garamond.
The monospace font used is Recursive.
/** Wanderers' Dust Jacket Theme * Developed by Woedenaz * Built on Black Highlighter by Woedenaz and Croquembouche * Version: 1.00 * TOC: * !IMPT: Imports * !ROOT: Root Variables * !GLOB: Global * !HEAD: Header * !TOPB: Top Bar * !SIDE: Side Bar * !MAIN: Main Content * !FRMS: Forums * !WDGT: Page Widgets * !MOBL: Mobile Coding * !MHDR: Mobile Header * !MSRC: Mobile Search Bar * !MSDB: Mobile Side Bar * !MOMN: Mobile Main Content * !MOMN: Mobile Page Widgets * !KFMS: Animation Keyframess * ***************************************************************************/ /* Imports (!IMPT) ==============================================================================*/ @import url("https://scpfoundation.net/local--files/theme:dustjacket/1.css"); @import url("https://fonts.googleapis.com/css2?family=Texturina:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap"); /* Root Variables (!ROOT) ==============================================================================*/ :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "nuscp"; /* must be either "nuscp" or "sigma9" */ --theme-id: "nuWL-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "Wanderers' Library Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scpfoundation.net/local--files/theme:dustjacket/wl_logo.png"); --header-title: "Библиотека Странников"; --header-subtitle: " "; /* Typefaces */ --body-font: Alegreya, Texturina, Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif; --header-font: zuijinregular, Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif; --title-font: "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif; --UI-font: "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif; --mono-font: Recursive, Consolas, monaco, monospace; --header-h1-font-size: calc(var(--base-font-size) * 3); /* ===VARIABLE FONT SETTINGS=== */ /* SETTING | ============== Weight for UI | UI: 100 - 700 */ --ui-wght: 600; /* SETTING | ============== Hover Weight for UI | UI: 100 - 700 */ --ui-hvr-wght: 600; /* ===VARIABLE FONT SETTINGS=== */ /* ===VARIABLE MONO FONT SETTINGS=== */ --MONO: 0; --CASL: 1; --CRSV: 1; /* ===STANDARD THEME COLORS=== */ --white-monochrome: 252, 252, 252; --pale-gray-monochrome: 173, 193, 177; --light-pale-gray-monochrome: 255, 250, 215; /* v light green for blockquotes and stuff */ --very-light-gray-monochrome: 220, 230, 220; --light-gray-monochrome: 130, 160, 135; /* light accent green for login status */ --gray-monochrome: 45, 70, 45; /* green */ --dark-gray-monochrome: 30, 55, 30; /* dark green gray for sidebar background */ --black-monochrome: 12, 12, 12; /* black */ --bright-accent: 255, 219, 90; /* bright yellow */ --medium-accent: 228, 180, 28; /* medium yellow */ --dark-accent: var(--dark-gray-monochrome); /* dark yellow */ --alt-accent: 221, 102, 17; /* pale orange */ /* ===PRIMARY COLORS=== */ /* ===GENERAL COLORS=== */ --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--dark-accent); --swatch-border-color: var(--medium-accent); /* ===GENERAL TEXT COLORS=== */ --swatch-text-dark: var(--black-monochrome); --swatch-text-light: var(--white-monochrome); --swatch-important-text: var(--bright-accent); /* ===BACKGROUND & HEADER COLORS=== */ /* General Background Color */ --swatch-background: var(--white-monochrome); /* Header H1 and H2 colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); /* ===MENU COLORS=== */ /* ===MENU BACKGROUND COLORS=== */ --swatch-menubg-color: var(--dark-gray-monochrome); /* ===MENU TEXT COLORS=== */ --swatch-menutxt-dark-color: var(--dark-gray-monochrome); --swatch-menutxt-light-color: var(--bright-accent); /* ===TOPBAR MENU BACKGROUND COLORS=== */ /* Colors used in the --gradient-topmenu var to give the topbar its color */ --swatch-topmenu-bg-color: var(--dark-gray-monochrome); --swatch-topmenu-border-color: var(--bright-accent); /* ===LINK COLORS=== */ --link-color: var(--dark-gray-monochrome); --visited-link-color: var(--gray-monochrome); --hover-link-color: var(--dark-gray-monochrome); /* ===RATING MODULE COLORS=== */ --rating-module-text-color: var(--bright-accent); /* ===PRIMARY GRADIENTS=== */ /* Creates the header image at top of page */ --gradient-header: url("https://scpfoundation.net/local--files/theme:dustjacket/wl-headerbg.png"); /* Diagonal Strikes placed on top of header image */ --diagonal-stripes: unset; /* ===STRUCTURAL SPACING ELEMENTS=== */ /* ===HEADER MEASUREMENTS=== */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 7.5rem; /* ===TOPBAR MEASUREMENTS=== */ --topbar-height-on-desktop: 1.625rem; --body-width-on-desktop: 61.25rem; } #header { /* ===SEARCH ELEMENT=== */ --search-icon-hover-color: var(--swatch-menubg-dark-color); --search-icon-focus-color: var(--swatch-menubg-dark-color); /* ===LOGIN BOX ELEMENT=== */ --login-dropdown-text-hover-color: var(--swatch-menutxt-dark-color); } #top-bar { /* ===TOPBAR ELEMENTS=== */ --dropdown-links-hover-color: var(--swatch-text-tertiary-color); } #interwiki, #side-bar { /* ===SIDE-BAR ELEMENTS=== */ --sidebar-links-text: var(--swatch-menutxt-light-color); --sidebar-links-hover-text-color: var(--swatch-text-tertiary-color); } /* ===PAGE ELEMENTS COLORS=== */ /* Colors for Buttons, Tabs, Tables, & Footnotes Hover/Modal */ #main-content { /* ===UI ICONS=== */ /* ===PAGE OPTIONS ICONS=== */ --ui-icon-color: var(--swatch-text-tertiary-color); --ui-icon-hover-color: var(--swatch-text-tertiary-color); /* ===TEXT EDITOR ICONS=== */ --editor-icon-hover-color: var(--swatch-text-tertiary-color); /* ===TABS=== */ --tabs-hover-txt: var(--swatch-text-tertiary-color); --tabs-selected-txt: var(--swatch-text-tertiary-color); /* ===PAGE TAGS=== */ --pagetags-text-hover-color: var(--swatch-text-tertiary-color); } /* ===GLOBAL ELEMENTS=== */ :root { /* ===UI BUTTONS=== */ --ui-button-hover-txt: var(--swatch-text-tertiary-color); /* ===RATING MODULE=== */ --rating-module-bottom-border-color: 0, 0, 0, 0; /* ===MODALS COLORS=== */ --modal-bg: var(--swatch-background); /* h1/h2/h3/h4/h5/h6 */ --modal-body-header-txt: var(--swatch-primary-darkest); --modal-header-bg: var(--swatch-primary-darkest); --modal-header-txt: var(--swatch-primary); --modal-header-stripe: var(--light-gray-monochrome); /* ===FOOTNOTES HOVER BLOCK COLORS=== */ --hoverblock-bg: var(--swatch-primary-darkest); --hoverblock-txt: var(--swatch-text-secondary-color); --hoverblock-header-bg: var(--swatch-primary); --hoverblock-header-txt: var(--swatch-text-tertiary-color); /* ===LISTPAGES PAGER=== */ --pager-text: var(--swatch-text-general); --pager-link-hover: var(--swatch-text-tertiary-color); --pager-hover-bg: var(--swatch-primary-darker); --pager-selected-link: var(--swatch-text-tertiary-color); } /* Global (!GLOB) ==============================================================================*/ ::-moz-selection { background: rgba(255, 219, 90, 0.5); background: rgba(var(--bright-accent), 0.5); text-shadow: none; } ::selection { background: rgba(255, 219, 90, 0.5); background: rgba(var(--bright-accent), 0.5); text-shadow: none; } @supports (font-variation-settings: inherit) { *, *::before, *::after { font-variation-settings: "wght" var(--wght, 300), "ital" var(--ital, 0), "slnt" var(--slnt, 0), "CASL" var(--CASL, 0), "CRSV" var(--CRSV, 0), "MONO" var(--MONO, 0), "FLAR" var(--FLAR, 0); } } hr { height: 0.125rem; border: 0; border-top: 0.0625rem solid transparent; background: url(https://scpfoundation.net/local--files/theme:dustjacket/goldfoil.png); background-color: rgba(255, 219, 90); background-color: rgba(var(--bright-accent)); background-size: cover; } #page-title, .meta-title { --wght: 900; font-weight: var(--wght); } #page-title::before, .meta-title::before, #page-title::after, .meta-title::after { background-color: rgb(var(--swatch-primary)); background-image: url("https://scpfoundation.net/local--files/theme:dustjacket/goldfoil.png"); } #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } h1, h2, h3, h4, h5, h6 { --wght: 600; } textarea { letter-spacing: 0.02em; } /* Header (!HEAD) ==============================================================================*/ #header { /* ===HEADER ELEMENTS=== */ /* ===SEARCH ELEMENT=== */ --search-icon-hover-bg-color: var(--swatch-primary); /* Focus is when the search box has been clicked on */ --search-focus-textbox-text-color: var(--swatch-text-tertiary-color); } div#extra-div-1 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height-on-desktop); } div#extra-div-1 { z-index: -2; background: linear-gradient( to bottom, rgba(30, 55, 30, 1) 0%, rgba(30, 55, 30, 1) 30%, rgba(255, 219, 90, 1) 100% ); background: var(--gradient-header); background-repeat: repeat; background-size: var(--header-background-image-size); } #header { position: -webkit-sticky; position: sticky; top: calc((var(--header-height-on-desktop) + 0.125rem) * -1); background-image: initial; -webkit-filter: inherit; filter: inherit; } #header::before { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: var(--header-height-on-desktop); opacity: 0.75; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center center; background-size: auto 8rem; pointer-events: none; } #header h1, #header h1 a, #header h1 a::before, #header h1 a::after { --wght: 700; display: flex; position: absolute; z-index: 0; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: var(--header-height-on-desktop); max-height: inherit; margin: 0; padding: 0; } #header h1 a, #header h1 a::before, #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); line-height: 0.8; text-align: center; overflow-wrap: normal; } #header h1 a::before, #header h1 a::after { content: "Библиотека Странников"; content: var(--header-title); } @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { #header h1 a::after { display: -webkit-box !important; } } } #header h1 a::after { background: url(https://scpfoundation.net/local--files/theme:dustjacket/goldfoil.png); -webkit-background-clip: text; background-clip: text; background-size: cover; -webkit-text-fill-color: transparent; } #header h1 a::before { text-shadow: rgba(var(--dark-gray-monochrome), 0.5) 0.125rem 0rem 0, rgba(var(--gray-monochrome), 0.5) 0.0675rem 0.1052rem 0, rgba(var(--gray-monochrome), 0.5) -0.052rem 0.1137rem 0, rgba(var(--dark-gray-monochrome), 0.5) -0.1237rem 0.0176rem 0, rgba(var(--dark-gray-monochrome), 0.5) -0.0817rem -0.0946rem 0, rgba(var(--dark-gray-monochrome), 0.5) 0.0355rem -0.1199rem 0, rgba(var(--dark-gray-monochrome), 0.5) 0.12rem -0.0349rem 0; } #header > h1 > a > span { top: 0; left: 0; width: 100%; max-width: inherit; height: var(--header-height-on-desktop); } #header h2 { display: none; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media only screen and (min-width: 56.25rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--swatch-menutxt-light-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } /* Top Bar (!TOPB) ==============================================================================*/ /* Sticky Top-Bar BG */ div#extrac-div-1 { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } div#extrac-div-1 span { display: flex; position: -webkit-sticky; position: sticky; top: calc(-1 * (var(--header-height-on-desktop) + 0.125rem)); right: 0; left: 0; box-sizing: inherit; align-items: center; width: 100%; height: var(--final-header-height-on-desktop); margin: 0; margin-top: 0; padding: 0; background: var(--gradient-topmenu); background-size: 100% var(--final-header-height-on-desktop); } #top-bar br { display: none; } #header div[class*="top-bar"] li a { transition: font-weight 300ms cubic-bezier(0.4, 0, 0.2, 1), font-variation-settings 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* Hiding Random Anchor Link Prior to New Page Module Will need to change :nth-child if position ever moves.*/ #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type > a, #top-bar > div.mobile-top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type > a { display: none; } /* New Page Dropdown Form Box Styling */ #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type, #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type { height: auto; } #top-bar > div.top-bar > ul > li.newpage > ul:first-of-type > li:first-of-type:hover { background: transparent; } #top-bar div.top-bar div.newpage_dropdown { display: flex; box-sizing: content-box; width: 100%; margin: 0; padding: 0; } #top-bar div.top-bar div.newpage_dropdown > .new-page-box { width: 100%; height: 70%; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.mobile-top-bar div.newpage_dropdown div.new-page-box form { flex-direction: column; padding: 0 1rem; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.mobile-top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.top-bar div.newpage_dropdown div.new-page-box input { display: flex; align-items: center; justify-content: center; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input { box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0.25rem; background-color: rgba(30, 55, 30); background-color: rgba(var(--swatch-topmenu-bg-color)); color: rgba(255, 219, 90); color: rgba(var(--swatch-menutxt-light-color)); font-family: "zuijinregular", "Poppins", sans-serif; font-family: var(--header-font); font-size: calc(var(--base-font-size) * 1.1); } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.text { height: 2rem !important; margin-bottom: -0.0625rem !important; background-color: rgba(30, 55, 30, 0.25); background-color: rgba(var(--swatch-menubg-dark-color), 0.25); } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button { border: unset !important; } #top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button:hover { background: rgba(252, 252, 252, 0.15); background: rgba(var(--swatch-menubg-color), 0.15); cursor: pointer; } /* Side Bar (!SIDE) ==============================================================================*/ #side-bar { background: rgba(var(--swatch-menubg-dark-color), 1); } #interwiki { background-color: transparent; } .side-block div:nth-of-type(1) form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0.6rem 1rem; } .side-block div:nth-of-type(1) input.button, .side-block div:nth-of-type(1) input.text { width: 100%; margin: 0 !important; padding: 0.25rem; background-color: rgba(30, 55, 30); background-color: rgba(var(--swatch-topmenu-bg-color)); color: rgba(255, 219, 90); color: rgba(var(--swatch-menutxt-light-color)); font-family: "zuijinregular", "Poppins", sans-serif; font-family: var(--header-font); font-size: calc(var(--base-font-size) * 1.1); } #side-bar div.menu-item input.text { height: 3rem !important; margin-bottom: -0.0625rem !important; background-color: rgba(30, 55, 30, 0.25) !important; background-color: rgba(var(--swatch-topmenu-bg-color), 0.25) !important; font-family: adelle-sans, "Lato", sans-serif; font-family: var(--body-font); cursor: text; } .side-block div:nth-of-type(1) input.button { justify-content: center; margin-top: 0.25rem; padding: 0.25rem; transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1); border: 0.125rem solid rgba(255, 219, 90, 1); border: 0.125rem solid rgba(var(--swatch-primary), 1); border-radius: 0.25rem; background-color: rgba(30, 55, 30, 1); background-color: rgba(var(--swatch-menubg-dark-color), 1); color: rgba(var(--swatch-primary), 1); font-family: var(--title-font); cursor: pointer; will-change: background-color, color; } .side-block div:nth-of-type(1) input.button:hover, .side-block div:nth-of-type(1) input.button:active { background-color: rgba(255, 219, 90, 1); background-color: rgba(var(--swatch-primary), 1); color: rgba(30, 55, 30, 1); color: rgba(var(--swatch-menubg-dark-color), 1); } #interwiki .heading, #side-bar .heading, #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded { display: flex; align-items: flex-end; justify-content: center; min-height: 2rem; box-shadow: 0 0.125rem 0 0 rgb(var(--swatch-primary-darker)); font-family: var(--title-font); letter-spacing: 0.1em; text-transform: uppercase; } #interwiki .heading p, #side-bar .heading p, #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded p { font-size: 1.1em; letter-spacing: 0; text-align: center; text-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(var(--swatch-border-color), 0); } #interwiki div.menu-item, #side-bar div.menu-item { height: auto; } #interwiki div.menu-item a, #side-bar div.menu-item .text, #side-bar div.menu-item a { box-shadow: inset 0 0.0625rem 0 0 rgb(var(--swatch-primary-darkest)); } #interwiki .heading + #interwiki div.menu-item a, #side-bar .heading + #side-bar div.menu-item .text, #side-bar .heading + #side-bar div.menu-item a { box-shadow: initial; } #interwiki div.menu-item a, #side-bar div.menu-item .text, #side-bar div.menu-item a { padding: 0.125em 0; font-size: calc(var(--base-font-size) * 1.2); text-indent: 0.5em; } /* TOGGLE SIDEBAR */ @media only screen and (min-width: 56.25rem) { #side-bar .close-menu { display: block; position: fixed; top: 0.25rem; left: 0.5rem; width: 3rem; opacity: 1; pointer-events: all; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; display: block; position: fixed; top: 0.25rem; left: 0.5rem; box-sizing: border-box; width: 3rem; height: 3rem; margin: 0; padding: 0; transition: opacity var(--sidebar-transition-timing); text-align: center; cursor: pointer; pointer-events: all; } #side-bar .close-menu::before { --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%3E%3C/svg%3E"); z-index: -1; background-color: var( --toggle-icon-color, rgb(var(--sidebar-links-text)) ) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; border: var(--toggle-border-color, rgb(var(--swatch-border-color))) var(--toggle-border-width, 0.25rem) solid; border-radius: var(--toggle-roundness, 50%); background-color: var( --toggle-button-bg, rgb(var(--swatch-menubg-color)) ) !important; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; } #side-bar { display: block; position: fixed; z-index: 10; top: 0; left: calc(var(--sidebar-width-on-desktop) * -1); height: 100%; margin-top: 0; overflow-x: hidden; overflow-y: auto; transition: left var(--sidebar-transition-timing); } #side-bar:focus-within { left: 0; } #side-bar .side-block { margin-top: 1rem; overflow: visible; border-right-width: 0rem; border-left-width: 0rem; border-radius: 0; background-color: rgb(0, 0, 0, 0); } #main-content::before { content: ""; display: block; position: fixed; z-index: -1; z-index: 99; top: 0; right: 0; width: 100%; height: 100vh; margin-left: var(--sidebar-width-on-desktop); padding-right: 0; transition: opacity var(--sidebar-transition-timing), width var(--sidebar-transition-timing); opacity: 0; background: rgba(var(--swatch-menubg-black-color), 0.3) 0.0625rem 0.0625rem repeat; pointer-events: none; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #main-content { position: initial; width: 100%; width: var(--body-width-on-desktop); max-width: var(--body-width-on-desktop); max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { #side-bar { position: fixed; z-index: 999; padding-right: 0; overflow-x: visible; overflow-y: visible; transition: left var(--sidebar-transition-timing), background-color var(--sidebar-transition-timing); background: rgba(var(--swatch-menubg-light-color), 0); pointer-events: all; } #side-bar::-webkit-scrollbar { -webkit-transition: opacity var(--sidebar-transition-timing); transition: opacity var(--sidebar-transition-timing); opacity: 0; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before { opacity: 0; } #side-bar:hover { left: 0; padding-right: 0; background: rgba(var(--swatch-menubg-light-color), 1); } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } } /* Main Content (!MAIN) ==============================================================================*/ html, body { scrollbar-color: rgb(var(--medium-accent)) rgb(var(--dark-gray-monochrome)); } ::-webkit-scrollbar, #side-bar:hover::-webkit-scrollbar { background-color: rgb(var(--dark-gray-monochrome)); } ::-webkit-scrollbar-thumb, #side-bar:hover::-webkit-scrollbar-thumb { background-color: rgb(var(--medium-accent)); } /* ACTUALLY HIDE HIDDEN TAGS */ #main-content .page-tags a[href^="/system:page-tags/tag/_"] { display: none; } div#page-title, .meta-title { text-align: center; } /* Centered Main Content */ @media only screen and (min-width: 48.0625rem) { #main-content { position: initial; width: 100%; max-height: 100%; margin: 0 auto; padding: 2rem 1rem; } } #content-wrap { grid-template-areas: "content content content"; grid-template-columns: 1fr; } #main-content .page-tags span { justify-content: flex-start; } #main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) { --wght: 500; display: inline; position: relative; flex-grow: 0; width: -webkit-max-content; width: max-content; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--swatch-menutxt-light-color)); font-size: 0.6875rem; line-height: 0.8125rem; text-decoration: none; -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); } #main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"]) { --wght: 500; display: inline; position: relative; flex-grow: 0; width: -moz-max-content; width: max-content; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--swatch-menutxt-light-color)); font-size: 0.6875rem; line-height: 0.8125rem; text-decoration: none; clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); } #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) { --wght: 500; display: inline; position: relative; flex-grow: 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; height: 1.175em; margin: 0 0 0 0.5125rem; padding: 0.1875rem 0.3125rem 0.1875rem 1rem; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; background: rgb(var(--swatch-menubg-dark-color)); color: rgb(var(--swatch-menutxt-light-color)); font-size: 0.6875rem; line-height: 0.8125rem; text-decoration: none; -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%); } #main-content .page-tags span a:hover:not([href^="/system:page-tags/tag/_"]), #main-content .page-tags span a:active:not([href^="/system:page-tags/tag/_"]) { color: rgb(var(--swatch-menutxt-dark-color)); } #main-content .page-tags span a:focus-within:not([href^="/system:page-tags/tag/_"]) { color: rgb(var(--swatch-menutxt-dark-color)); } #main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"])::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color)); } #main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"])::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color)); } #main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after { content: ""; position: absolute; top: 50%; left: 0.5rem; width: 0.25rem; height: 0.25rem; transform: translateY(-50%); border-radius: 50%; background: rgb(var(--swatch-background)); box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color)); } #page-content { --MONO: 1; --CRSV: 0; --CASL: 0; } .page-tags span { border-top: 0.5rem solid transparent; } #breadcrumbs { margin: -1em 0 1em; font-weight: 85%; } blockquote, .blockquote, div.blockquote, [class*="blockquote"] { border: 0.1875rem outset rgb(var(--medium-accent)); background-color: rgb(var(--very-light-gray-monochrome)); } div.page-watch-options a:hover, div.page-watch-options a:active { color: rgb(var(--hover-link-color)); } div.page-watch-options a:focus-within { color: rgb(var(--hover-link-color)); } /* Forums (!FRMS) ==============================================================================*/ .forum-thread-box .description-block { border: 0.125rem solid rgb(228, 180, 28); border: 0.125rem solid rgb(var(--swatch-primary-darker)); background: url("https://scpfoundation.net/local--files/theme:dustjacket/wlheader_bg.png"), rgba(var(--pale-gray-monochrome), 1); background-size: cover; box-shadow: inherit; font-size: 110%; font-weight: 700; } @supports (background-blend-mode: screen) { .forum-thread-box .description-block { background-blend-mode: screen; } } .thread-container .post .long { border: 0.0625rem solid rgba(228, 180, 28, 0.5); border: 0.0625rem solid rgba(var(--swatch-primary-darker), 0.5); } div.post-container div.post-container { padding-left: 0.5rem; border-left: 0.25rem double rgb(228, 180, 28); border-left: 0.25rem double rgb(var(--swatch-primary-darker)); } /* Page Widgets (!WDGT) ==============================================================================*/ /* Buttons & User Input */ div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn { box-shadow: inset 2em 0 0 0 rgb(var(--bright-accent)); } :not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .button, :not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input, :not(.page-rate-widget-box):not(#search-top-box-form) > input.button, :not(.page-rate-widget-box):not(#search-top-box-form) > button, :not(.page-rate-widget-box):not(#search-top-box-form) > .btn { border-radius: 0.5rem; } /* Tabs */ .yui-navset .yui-nav a { --wght: 400; --MONO: 0; } .yui-navset .yui-nav li, .yui-navset .yui-nav li a, .yui-navset .yui-nav li a::before { border-radius: 1rem 1rem 0 0; } /* Tables */ table.wiki-content-table th { border-top-color: rgba(var(--swatch-menutxt-dark-color), 1) !important; border-right-color: rgba(var(--swatch-menutxt-light-color), 1) !important; border-bottom-color: rgba(var(--swatch-menutxt-light-color), 1) !important; border-left-color: rgba(var(--swatch-menutxt-light-color), 1) !important; background: rgb(var(--swatch-menubg-dark-color)); box-shadow: 0 0.125rem 0 0 rgb(var(--swatch-menutxt-light-color)); color: rgb(var(--swatch-menutxt-light-color)); font-family: var(--title-font); font-weight: 400; text-shadow: none; } table.wiki-content-table th:first-of-type { border-left-color: rgba(var(--swatch-menutxt-dark-color), 1) !important; } table.wiki-content-table th:last-of-type { border-right-color: rgba(var(--swatch-menutxt-dark-color), 1) !important; } /* Table of Contents */ #toc { border: 0.25rem outset rgb(var(--medium-accent)); background-color: rgb(var(--dark-gray-monochrome)); } #toc .title { color: rgb(var(--bright-accent)); } /* Misc Divs */ .oldblock { margin: 1.25rem; padding: 0.75rem; border: solid 0.125rem rgb(var(--gray-monochrome)); background: rgb(var(--light-pale-gray-monochrome)); } .newblock { margin: 1.25rem; padding: 0.75rem; border: 0.25rem outset rgb(var(--medium-accent)); background-color: rgb(var(--dark-gray-monochrome)); color: rgb(var(--medium-accent)); } .newblock h1 h2 h3 h4 h5 h6 { color: rgb(var(--medium-accent)); } /* Imageblock */ .wl-image-block { width: 18.75rem; border: solid 0.0625rem rgb(var(--light-gray-monochrome)); box-shadow: 0 0.0625rem 0.375rem rgba(0, 0, 0, 0.25); } .wl-image-block.block-right { margin: 0 2em 1em 2em; float: right; clear: right; } .wl-image-block.block-left { margin: 0 2em 1em 0; float: left; clear: left; } .wl-image-block.block-center { margin-right: auto; margin-left: auto; } .wl-image-block img { width: 18.75em; border: 0; } .wl-image-block .wl-image-caption { width: 18.75rem; padding: 0.125rem 0; border-top: solid 0.0625rem rgb(var(--light-gray-monochrome)); background-color: rgb(var(--gray-monochrome)); color: rgb(var(--bright-accent)); font-size: 80%; font-weight: bold; text-align: center; } .wl-image-block > p { margin: 0; } .wl-image-block .scp-image-caption > p { margin: 0; padding: 0 0.625rem; } /* Translation Module */ .wl-translations { box-sizing: border-box; margin: 0.5rem; padding: 0.625rem; float: right; border: 0.25rem outset rgb(var(--medium-accent)); border-radius: 0.0625rem; background-color: rgb(var(--dark-gray-monochrome)); } .wl-translations a { color: rgb(var(--bright-accent)); } /* Navbar */ .footer-wikiwalk-nav { font-size: 90%; font-weight: bold; } .wlnavbar { --text-shadow: rgba(var(--black-monochrome), 0.35); --box-shadow: rgb(var(--gray-monochrome)); --border-color: rgb(var(--medium-accent)); margin: 0.625rem 0 0.938rem; margin-bottom: 1.25rem; padding: 0.125rem; border: outset 0.188rem var(--border-color); border-radius: 0.0625rem; background-color: rgb(var(--dark-gray-monochrome)); box-shadow: 0.09375rem 0.09375rem 0.188rem var(--box-shadow); color: rgb(var(--medium-accent)); text-shadow: 0.0625rem 0.0625rem 0.125rem var(--text-shadow); } .wlnavbar a { display: inline-block; position: relative; width: 100%; height: 100%; padding-top: 0.45em; padding-bottom: 0.35em; color: rgb(var(--bright-accent)); } .wlnavbar a::before { display: flex; position: absolute; top: 0; align-items: center; height: 100%; font-size: calc(var(--base-font-size) * 1.1); font-weight: 800; line-height: calc(var(--base-font-size) * 0.8); } .wlnavbar .footer-wikiwalk-nav { display: flex; align-items: center; justify-content: center; font-size: 90%; font-weight: 400; letter-spacing: 0.025em; } .wlnavbar .footer-wikiwalk-nav * { line-height: 1em; } .wlnavbar .footer-wikiwalk-nav .center { flex-basis: content; padding: 0.15rem 0.3rem; text-align: center; } .wlnavbar .footer-wikiwalk-nav .left, .wlnavbar .footer-wikiwalk-nav .right { display: inline-flex; position: relative; flex-basis: calc(40% - 3em); align-items: center; font-size: calc(var(--base-font-size) * 0.8); } .wlnavbar .footer-wikiwalk-nav .left { justify-content: flex-end; margin: 0.35em 0 0.35em 0.35em; padding-right: 0.5em; padding-left: 1em; border-right: 0.0625rem solid rgb(var(--dark-accent)); text-align: right; } .wlnavbar .left > a::before { content: "↫"; left: -0.75em; transition: left 1s ease-in-out; will-change: left; -webkit-animation: bounce-left 1.7s infinite; animation: bounce-left 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .wlnavbar .left > a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } .wlnavbar .footer-wikiwalk-nav .right { justify-content: flex-start; margin: 0.35em 0.35em 0.35em 0; padding-right: 1em; padding-left: 0.5em; border-left: 0.0625rem solid rgb(var(--dark-accent)); text-align: left; } .wlnavbar .right > a::before { content: "↬"; right: -0.75em; transition: right 1s ease-in-out; will-change: right; -webkit-animation: bounce-right 1.7s infinite; animation: bounce-right 1.7s infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } .wlnavbar .right > a:hover::before { -webkit-animation-play-state: running; animation-play-state: running; } /* Collection Box / More By This Author */ .collection .articlecolumn .list-pages-item, .collection .articlecolumn .list-pages-item > div, .collection .articlecolumn .list-pages-item > p { display: inline; } .collection .articlecolumn .list-pages-item p { margin: 0 !important; } .collection > .collapsible-block { display: block; padding: 0.15em; border: 0.0625rem solid black; background-color: white; text-align: center; } .collection .collapsible-block-unfolded-link { margin: auto; border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); } .collection .collapsible-block-folded { margin: auto; border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); } .collection .collapsible-block-unfolded-link a, .collection .collapsible-block-folded a { color: rgb(var(--dark-accent)); font-weight: bold; } .collection > .collapsible-block .collapsible-block-content { text-align: left; } .authorname { margin: 0 auto; border: 0.125rem solid rgb(var(--white-monochrome)); border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); color: rgb(var(--black-monochrome)); color: rgba(0, 0, 0, 1); font-weight: bold; text-align: center; } .authorname a { color: rgb(var(--medium-accent)); } .authorname p { margin: 0 !important; } .titlecolumn { width: 15%; padding: 0.375rem; border: 0.125rem solid white; background-color: rgba(var(--pale-gray-monochrome), 0.5); text-align: right; } .articlecolumn { width: 85%; padding: 0.1875rem; background-color: rgb(var(--white-monochrome)); font-size: 85%; font-weight: normal; } .collectiondot { padding: 0 0.25rem; } .articlecolumn .list-pages-item:last-child .collectiondot { display: none; } /* Rating Module */ .page-rate-widget-box { background: linear-gradient( to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100% ); background: linear-gradient( to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100% ); letter-spacing: 0.05em; } .page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a { font-family: var(--body-font); line-height: 2ch; --wght: 500; } .fancyhr hr { box-sizing: border-box; height: 0; border-top: 2vw solid transparent; background: none; background-color: rgba(255, 219, 90, 0); background-color: rgba(var(--bright-accent), 0); border-image-source: url("https://scpfoundation.net/local--files/theme:dustjacket/wl_hr.png"); border-image-repeat: round round; border-image-slice: 80 500 80 500 fill; border-image-width: 10em 80em 10em 80em; } .fancyborder { box-sizing: border-box; padding: 2vw; border: 2vw solid rgba(0, 0, 0, 0.5); border-image: url("https://scpfoundation.net/local--files/theme:dustjacket/wl_border.png") 600 round; border-image-width: 6; } div.introbox, div.inner, div.inner > div, div.aboutouter, div.aboutinner { display: flex; flex-direction: column; padding: 0.5em; } div.inner, div.inner > div, div.aboutinner { background: rgba(var(--pale-gray-monochrome), 0.15); } div.introbox, div.inner, div.aboutouter { border: solid 0.125rem rgba(var(--swatch-primary-darker), 1); } div.inner > div, div.aboutinner { border: solid 0.0625rem rgba(var(--swatch-primary-darker), 1); } div.introbox, div.aboutouter { background: rgba(var(--swatch-primary-darker), 0.25); } div.inner > div { flex-grow: 2; align-items: center; } div.book div.title a, div.book div.title a:hover, div.book div.title a:active, div.book div.title a:visited { color: rgb(var(--swatch-primary)); } #main-content ol { list-style-position: inside; } div.inner.shelf { position: relative; flex-direction: row; flex-wrap: wrap; align-items: stretch; } div.inner.shelf div.left-side > * { flex-basis: auto; flex-grow: 0; flex-shrink: 2; } div.inner.shelf > div { display: flex; flex-basis: 48%; flex-grow: 1; align-items: center; justify-content: center; width: 48%; } div.inner.shelf > div * { box-sizing: border-box; } div.inner.shelf[id*="toc"], div.inner.shelf [id*="toc"] { width: 100%; text-align: center; } div.left-side table a { color: rgb(var(--bright-accent)); font-family: var(--header-font); font-size: 150%; } div.left-side table th { border: 0.5rem double rgba(var(--swatch-menubg-medium-dark-color), 0.25) !important; } div.inner.shelf div.left-side img.image { width: auto; height: 40%; min-height: 30vh; object-fit: cover; object-position: 50% 0; } div.inner.shelf div.left-side div.description:first-letter { margin-top: -0.25em; margin-bottom: -0.25em; padding-right: 0.25rem; padding-left: 1.15rem; float: left; color: rgb(var(--gray-monochrome)); font-family: var(--header-font); font-size: 400%; line-height: 100%; } div.inner.shelf div.left-side div.description { padding: 0 2em 1em; font-size: 95%; line-height: 165%; text-align: justify; text-indent: -0.25em; text-justify: inter-character; } div.right-side blockquote { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; } div.right-side div.bookshelf { position: relative; height: 100%; padding: 2em; overflow: hidden; border-radius: 0.5em; background-image: linear-gradient( rgb(30, 55, 30) 0%, rgb(30, 55, 30) 30%, rgb(255, 219, 90) 100% ); background-size: 100% 200%; } @supports (background-blend-mode: screen) { div.right-side div.bookshelf { background-image: url("https://scpfoundation.net/local--files/theme:dustjacket/goldfoil.png"), linear-gradient( rgb(30, 55, 30) 0%, rgb(30, 55, 30) 30%, rgb(255, 219, 90) 100% ); background-blend-mode: overlay, normal; background-size: cover, 100% 200%; } } div.right-side div.bookshelf::before { content: " "; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; transform: rotateX(180deg); opacity: 0.25; background: linear-gradient( rgb(30, 55, 30) 0%, rgb(30, 55, 30) 30%, rgb(255, 219, 90) 100% ); background-size: 100% 200%; pointer-events: none; mix-blend-mode: overlay; } div.bookshelf div.list-pages-box { display: flex; position: relative; flex-grow: 0; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; margin-bottom: 2em; transform: perspective(500rem); transform-origin: top center; transform-style: preserve-3d; } div.bookshelf div.list-pages-box::after, div.ibookshelf div.list-pages-box::before { content: " "; position: absolute; width: 100%; height: 1em; } div.bookshelf div.list-pages-box::after { bottom: -1em; transform: translateZ(2em) translateY(0.1em); border-radius: 0 0 0.25rem 0.25rem; background-color: rgb(var(--dark-accent)); } @supports (background-blend-mode: screen) { div.bookshelf div.list-pages-box::after { background-image: url("https://scpfoundation.net/local--files/theme:dustjacket/goldfoil.png"); background-blend-mode: overlay; } } div.bookshelf div.list-pages-box::before { bottom: -1.2em; left: -2%; width: 104%; margin: 0 auto; transform: rotateX(92deg) scaleY(35) translateZ(-0.5em) translateY(-1em); background-color: rgb(30, 55, 30); } div.inner.shelf div.book { display: flex; position: relative; width: 95%; height: auto; margin: 0.05em auto; overflow: hidden; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0.5em; box-shadow: 0.6875rem 0.375rem 0.875rem rgba(var(--dark-gray-monochrome), 0.25), 0.1875rem 0em 0.3125rem rgba(var(--dark-gray-monochrome), 0.22); will-change: transform; } div.inner.shelf div.book:hover { transform: translateZ(10rem) translateY(-0.35em) rotateY(5deg); } div.book div.title { height: 100%; border-left: 0.25rem double rgb(var(--swatch-primary-darker)); font-family: var(--header-font); font-weight: 900; } div.title * { display: block; } div.book > * { display: inline-flex; align-items: center; margin: 0.25rem; padding: 0.25rem; } div.book div.author { flex-grow: 2; justify-content: flex-end; padding-right: 1em; border-right: 0.25rem double rgb(var(--swatch-primary-darker)); color: rgb(var(--pale-gray-monochrome)); font-size: 75%; font-weight: 700; text-align: right; } div.inner.shelf div.book::before { content: " "; position: absolute; z-index: -1; top: 0.25rem; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(var(--pale-gray-monochrome)) 0%, rgba(var(--gray-monochrome)) 4%, rgba(var(--gray-monochrome)) 4%, rgba(var(--gray-monochrome)) 95%, rgba(var(--dark-gray-monochrome)) 100% ); pointer-events: none; } div.inner.shelf div.book::after { content: " "; position: absolute; z-index: -1; top: -0.125rem; left: 0; width: 100%; height: 100%; background: linear-gradient( 179.5deg, rgba(252, 252, 252) 0%, rgba(45, 70, 45) 10%, rgba(45, 70, 45) 10%, rgba(45, 70, 45) 97%, rgba(12, 12, 12) 100% ); background-size: 100% 100%; pointer-events: none; } @supports (background-blend-mode: screen) { div.inner.shelf div.book::after { background: linear-gradient( 179.5deg, rgba(var(--white-monochrome)) 0%, rgba(var(--gray-monochrome)) 10%, rgba(var(--gray-monochrome)) 10%, rgba(var(--gray-monochrome)) 97%, rgba(var(--black-monochrome)) 100% ), url("https://scpfoundation.net/local--files/theme:dustjacket/wlheader_bg.png"); mix-blend-mode: screen; background-blend-mode: color-dodge; background-size: 100% 100%, contain; } } @media only screen and (max-width: 56.25rem) { div.inner.shelf { flex-direction: row; flex-wrap: wrap; max-height: 100%; } div.description { padding: 0.5em; } div.inner.shelf > div { flex-basis: 100%; } div.inner.shelf div.list-pages-box::after { bottom: -1em; transform: translateZ(2em) translateY(0.5em); background-color: rgb(var(--dark-accent)); } div.inner.shelf div.list-pages-box::before { bottom: -1em; left: -1.5%; width: 103%; transform: rotateX(92deg) scaleY(35) translateZ(-0.5em) translateY(-1em); background-color: rgb(var(--black-monochrome)); } } /* Mobile Coding (!MOBL) ==============================================================================*/ @media only screen and (max-width: 48rem) { /* Mobile Header (!MHDR) ==============================================================================*/ :root { --header-height-on-desktop: var(--header-height-on-mobile); --topbar-height-on-desktop: var(--topbar-height-on-mobile); } #header h1 a { line-height: 1; } #header h2 span { margin-top: calc(3.4rem + var(--offset-from-page-top)); } div#extra-div-1 { -webkit-filter: initial; filter: initial; } #search-top-box-form { top: 0; } } /* Mobile Search Bar (!MSRC) ==============================================================================*/ @media only screen and (max-width: 48rem) { search-top-box { width: 12.5rem; } #search-top-box-form { top: 0; right: 0; align-items: initial; } #search-top-box form[id="search-top-box-form"] { top: 0; } #search-top-box:not(:focus-within)::before { color: rgb(var(--bright-accent)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { background-color: rgb(var(--dark-gray-monochrome)); } /* Mobile Side Bar (!MSDB) ==============================================================================*/ #side-bar { left: calc(var(--sidebar-width-on-mobile) * -1); width: var(--sidebar-width-on-mobile); min-width: var(--sidebar-width-on-mobile); transition: left var(--sidebar-transition-timing), opacity var(--sidebar-transition-timing); will-change: left, opacity; } #side-bar, #side-bar:target { display: flex; } #side-bar:target { width: var(--sidebar-width-on-mobile); } #side-bar .close-menu { visibility: visible; margin-left: 0; padding-right: var(--sidebar-width-on-mobile); transition: margin-left var(--sidebar-transition-timing), padding-right var(--sidebar-transition-timing), background-color var(--sidebar-transition-timing), opacity var(--sidebar-transition-timing); opacity: 1; background-color: rgba(var(--swatch-menubg-black-color), 0); will-change: margin-left, padding-right, background-color, opacity; } #side-bar .close-menu, #side-bar:target .close-menu { width: calc(100% - var(--sidebar-width-on-mobile)); } #side-bar:target .close-menu { margin-left: var(--sidebar-width-on-mobile); opacity: 1; background-color: rgba(var(--swatch-menubg-black-color), 0.3); } /* Mobile Main Content (!MOMN) ==============================================================================*/ body { background: inherit; } #main-content { margin-left: inherit; } div#page-options-bottom { width: 90%; } /* Mobile Page Widgets (!MPGW) ==============================================================================*/ .yui-navset { z-index: inherit; } .scp-image-block, .scp-image-block img { width: 100% !important; } } /* Tablet Size Fix */ @media (max-width: 61.1875rem) and (min-width: 56.25rem) { #main-content { margin-left: calc(50vw - (44.25rem / 2) - 2rem); margin-left: calc(50vw - (var(--body-width-on-desktop / 2) - 2rem)); } } /* Animation Keyframes (!KFMS) ==============================================================================*/ @-webkit-keyframes tab-active { 0% { margin-top: 0; margin-right: 0; padding-top: 0; } 100% { margin-top: -0.5em; margin-right: 0.0625rem; padding-top: 0.5em; } } @keyframes tab-active { 0% { margin-top: 0; margin-right: 0; padding-top: 0; } 100% { margin-top: -0.5em; margin-right: 0.0625rem; padding-top: 0.5em; } } @-webkit-keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; } }