Здесь должен был быть рабочий пример authorbox
. Обратитесь к подсекции Sidebox'ы за подробностями.
Flopstyle: DARK |
---|
Это рабочий пример sidebox . |
Это flavorbox
Обратитесь к подсекции Sidebox'ы за подробностями.
Что это?
Это тема, созданная
Lt Flops. Она предназначена для широкого применения в любой статье, где желательна тёмная тема.
Используйте данную тему, только если понимаете, что вы делаете.
Данная тема несовместима с Black Highlighter, BASALT и Sigma+.
Как использовать
Основы
Пожалуйста, ознакомьтесь с этим введением прежде чем добавлять Flopstyle: DARK в свою статью.
ШАГ 1. ПОДКЛЮЧИТЕ ТЕМУ Скопируйте этот код и вставьте его в начало своей статьи:
[[include theme:flopstyle-dark]]
ШАГ 2. УСТАНОВИТЕ ЗАГОЛОВОК СТРАНИЦЫ Скопируйте этот код и вставьте его в начало текста своей статьи:
[[div class="meta-title"]]
Сюда заголовок
[[/div]]
В целях улучшения доступности, это необходимо обязательно делать на любой странице, использующей Flopstyle: DARK.
ШАГ 3. СОЗДАЙТЕ НАВИГАЦИОННУЮ ЦЕПОЧКУ Скопируйте код ниже и вставьте его прямо под предыдущим блоком с заголовком статьи:
[[div class="pseudocrumbs"]]
[[[parent-page-url1|Заголовок первой страницы-родителя]]] » Заголовок дочерней страницы
[[[parent-page-url2|Заголовок второй страницы-родителя]]] » Заголовок дочерней страницы
[[/div]]
‼️ Если вы создаёте статью с использованием ListPages, не беспокойтесь — вы всё ещё можете устанавливать родителя своим фрагментам как обычно, но делать это обычным способом. В данном случае функциональность важнее внешнего вида.

Пример работы шагов 3 и 4.
А теперь... Если от Flopstyle: DARK вам нужна только базовая эстетика, можете взять код выше и свалить. Но если продолжите чтение, я покажу вам насколько глубока эта кроличья нора.
Flopstyle: DARK разрабатывался с учётом следующих компонентов...
2. Переменные темы
(Меняйте их только если понимаете, что делаете)
Любые переменные должны находиться в модуле CSS — [[module CSS]]
. Все перечисленные переменные необходимо помещать в селектор :root
.
2.1. ЦВЕТА Вы можете менять большинство цветов темы по своему вкусу. Просто скопируйте нужные вам переменные из блока ниже и измените их значение:
/* -- ЦВЕТА -- */
--accentColor: акцентный_цвет;
--accentColorLite: светлый_акцентный_цвет;
--hue: тон;
/* Значения по умолчанию (не копировать!):
* accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
* hue: 325deg.
**/
Наиболее используемая переменная — accentColor
. Обычно пользователи данной темы меняют лишь эту переменную.
Когда вы меняете значение accentColor
, вы также должны изменить две другие переменные:
2.1. (A) accentColorLite
: У этого цвета светлота должна быть выше, а значение альфа-канала ниже, чем у accentColor. Я рекомендую светлоту как минимум на 10% больше чем у accentColor, а значение альфа-канала 0.5
2.1. (B) hue
: Это значение должно соответствовать тону вашего accentColor.
Для выбора цвета я рекомендую использовать HSL Color Picker. HSL — удобная цветовая модель, которая расшифровывается как Hue (тон), Saturation (насыщенность), Lightness (светлота). Она также может быть расширена до HSLA, которая также включает Alpha-значение (прозрачность).
Чтобы убедиться, что выбранный вами accentColor
отвечает Руководству по доступности веб-контента (WCAG), проверьте его коэффициент контрастности. Просто вставьте
#2F333C в поле "Background" и выбранный вами accentColor
в шестнадцатеричном формате в поле "Text color". Для читабельности текста, согласно WCAG, коэффициент должен быть 3 или выше.
2.2. ЛОГОТИП И ШРИФТЫ Вы можете поменять логотип, шрифты и т.д.:
/* -- ЛОГОТИП -- */
--lgurl: url(URL_ИЗОБРАЖЕНИЯ);
/* -- ШРИФТЫ -- */
--header-font: "вашШрифт", sans-serif;
--body-font: "вашШрифт", sans-serif;
/* Значения по умолчанию (не копировать!):
* header-font: Montserrat, sans-serif
* body-font: Inter, sans-serif
**/
2.3. ЗАГОЛОВКИ В ХЕДЭРЕ Вы можете изменить заголовок, подзаголовок и их цвета:
/* -- ЗАГОЛОВКИ -- */
--header-title: "ЗАГОЛОВОК";
--header-subtitle: "ПОДЗАГОЛОВОК";
--titleColor: цвет_заголовка;
--subtitleColor: цвет_подзаголовка;
/* Значения по умолчанию (не копировать!):
* titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/
Flopstyle: DARK предоставляет тёмный вариант плашки Lt Flops:
[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

Пример плашки Lt Flops в действии.
4. Sidebox'ы
Sidebox'ы - встроенные компоненты, которые бывают двух типов:
- Type-A
authorbox
и sidebox
- Type-B
sidecontainer
Инструкции по использованию зависят от типа.
authorbox
и sidebox
не отображаются на экранах с шириной width=1280px
и меньше, включая мобильные устройства. Их можно использовать для отображения информации о странице и авторе.sidecontainer
сворачивается за границу страницы на экранах с шириной width=1280px
и меньше. На таких экранах он доступен при нажатии на него или наведении курсора. Его можно использовать для отображения дополнительной информации.
Учтите эти ограничения перед тем как добавлять эти компоненты в свою статью — большая часть аудитории SCP вики просматривает сайт с мобильных устройств.
Тип A Authorbox и Sidebox
(См. верхний левый и правый край страницы)
Адаптированы из темы Penumbra за авторством
EstrellaYoshte
Решением АМС authorbox
отключён в русскоязычном филиале.
АЛЬТЕРНАТИВА 1 Для создания sidebox
, скопируйте код ниже и вставьте его в модуль CSS в начале своей страницы:
[[div class="anchor"]]Устанавливает позицию sidebox.
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] Автор: [[/span]] %%created_by_linked%% ||
||~ Опубликовано %%created_at|%d %b %Y%% ||
[[/module]]
[[div class="flavorbox"]]Создаём flavorbox для sidebox.
Здесь текст flavorbox'а
.
[[/div]]
[[/div]]
[[/div]]Устанавливает конец якоря.
Если вы планируете добавлять sidecontainer
'ы на свою страницу, я настоятельно рекомендую использовать authorbox
, а не sidebox
, по той причине, что когда sidebox
используется вместе с sidecontainer
, происходит визуальное наложение элементов, что будет выглядеть очень некрасиво. Это может запутать читателей, так что лучше оставить всё на безопасной стороне.
Вы можете настроить sidebox
для отображения той же информации, что и authorbox
. Или, как я сделал на этой странице, — вы можете добавить остроумный слоган и иконку.
Как и к любой другой таблице, вы можете применить уникальный оттенок — например, текущий зелёный, создаваемый с помощью table1
. За подробностями обратитесь к спойлеру Форматирование таблиц в секции Примеры форматирования (ОБЩИЕ).
Тип B Sidecontainer
(См. ниже)
Предоставлено
Woedenaz
sidecontainer
по умолчанию выключен. Создать его можно следующим образом:
[[div class="limit"]]Устанавливает начало якоря.
[[div class="anchor"]]Устанавливает позицию sidecontainer'а.
[[div class="sidecontainer"]]
Тут пишется желаемый текст для sidecontainer
.
[[/div]]
[[/div]]
Текст, рядом с которым должен висеть sidecontainer
.
[[/div]]Устанавливает конец якоря.
Я рекомендую вручную ставить перенос строки после текста, рядом с которым висит sidecontainer
. Это можно сделать, добавив
на пустой строке. sidecontainer
появится возле этого текста, когда вы прокрутите мимо него.
С определённой хитростью вполне возможно
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.
создать несколько sidecontainer'ов,
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.
которые будут работать так.
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.
ПОМНИТЕ — Без div limit
, anchor
заставит sidecontainer
висеть на протяжении всей статьи, после того как вы прокрутите мимо точки начала якоря..
5. Прочие изменяемые аспекты
При надобности вы можете изменить любые из этих свойств CSS под свою страницу.
Изменить прозрачность логотипа
#extra-div-1{
filter: opacity(процент);
}
Значение прозрачности по умолчанию = 33%
6. Вариации темы
Если вы передадите атрибуты в блок include с темой, вы можете применить заранее созданный вариант темы на свою страницу.
Вариант INFERNO
Для канона "Из архивов 120-ой"
[[include theme:flopstyle-dark
|inferno=a]]
Вариант MAPLE
Для канона "На страже 43-ей"
[[include theme:flopstyle-dark
|maple=a]]
Вариант PLASTIC
Для канона "О. и У. Синтетика"
[[include theme:flopstyle-dark
|plastic=a]]
Вариант PRAIRIE
Для разрабатываемого канона "The Way It Goes"
[[include theme:flopstyle-dark
|prairie=a]]
Вариант SEAFOAM
Для цикла "Рыболовный совет"
[[include theme:flopstyle-dark
|seafoam=a]]
Вариант THRESHOLD
Для канона "Нет возврата" — Ветвь рубежа
[[include theme:flopstyle-dark
|threshold=a]]
Вариант VANGUARD
Для канона "Нет возврата" — Ветвь Авангарда
[[include theme:flopstyle-dark
|vanguard=a]]
Вариант WITCH (не адаптирован)
Для цикла "Weaving Imperceptible Threads"
[[include theme:flopstyle-dark
|witch=a]]
Используйте один из этих атрибутов чтобы получить подвариант темы WITCH.
Подвариант BOOK OF ASHES (не адаптирован)
[[include theme:flopstyle-dark
|witch=a
|ashes=a]]
Подвариант BOOK OF LIGHT (не адаптирован)
[[include theme:flopstyle-dark
|witch=a
|light=a]]
Подвариант BOOK OF VELDT (не адаптирован)
[[include theme:flopstyle-dark
|witch=a
|veldt=a]]
Подвариант LOOSE THREADS (не адаптирован)
[[include theme:flopstyle-dark
|witch=a
|loose-threads=a]]
Вариант GALAXIAS
Для отдела лактозных аномалий
[[include theme:flopstyle-dark
|galaxias=a]]
Вариант PEDAGOGY
Для Международного Центра Исследований Единой Тауматологии
[[include theme:flopstyle-dark
|pedagogy=a]]
Вариант CALZONE (не адаптирован)
На день дурака 2024 🎭
[[include theme:flopstyle-dark
|calzone=a]]
Вариант CHTHONIAN
Для канона "Цицувский ад"
[[include theme:flopstyle-dark
|chthonian=a]]
Вариант MONSTER
На Хэллоуин 2022 🎃
[[include theme:flopstyle-dark
|monster=a]]
Вариант RHIZOME
Для Зоны 89
[[include theme:flopstyle-dark
|rhizome=a]]
Вариант SYZYGY
Для инициативы "Три Луны"
[[include theme:flopstyle-dark
|syzygy=a]]
Вариант WITCHING HOUR
Для канона "СУМЕРКИ"
[[include theme:flopstyle-dark
|witching-hour=a]]
Вариант PEENUMBRA (не адаптирован)
Шуточный вариант
[[include theme:flopstyle-dark
|peenumbra=a]]
Примеры оформления (ОБЩИЕ)
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня
полужирный | курсив | подчёркнутый | зачёркнутый | моноширный | надстрочныйподстрочный
Используйте 4 тире ----
для создания горизонтальной линии.
fake code selector{
fake code property: fake code value;
}
Ссылка (Ссылка, по которой вы скорее всего переходили)
- нумерованный список
- пункт списка
- пункт списка
- ненумерованный список
- пункт списка
- пункт списка
О, гляди, тут ещё текст.
Интересно.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Это длинная вкладка. В ней много текста.
Блоки изображений

Стандартый блок с изображением
Красивый и настраиваемый блок с изображением
Bootstrap Image Box
В качестве альтернативы стандартному блоку с изображением, Flopstyle: DARK использует модифицированную версию сниппета "Bootstrap Image Box" за авторством
Timothy Foster. Документация по данному сниппету доступна здесь.
Вот краткий обзор:
Инструкции по настройке
ШАГ 1 Скопируйте это на свою страницу:
[[include component:bs-image
|image=
|heading=
|caption=
|link=
|alt=
|width=
|float=
|kind=
]]
ШАГ 2 Сверьтесь с этим коротким руководством:
НАЧАЛО БЛОКА INCLUDE ↦
Файл изображения (Обязателен!) ↦
Заголовок изображения ↦
Описание изображения ↦
Ссылка на изображение ↦
Alt-текст (См. ниже) ↦
Ширина (число с единицами измерения) ↦
Выравнивание блока ↦
Цвет блока (Поиграйтесь с этим параметром!) ↦ Рекомендуется Primary
КОНЕЦ БЛОКА INCLUDE ↦
[[include component:bs-image
|image=filename.png
|heading=Заголовок
|caption=Описание
|link=ссыл.ка
/none
|alt=Альтернативный текст
|width=length
|float=left
/middle
/right
|kind=primary
/warning
/danger
/info
/success
/none
]]
ШАГ 3 Заполните все поля после знака =
.
Альтернативный текст (Alt-текст)
В целях повышения доступности контента я настоятельно рекомендую использовать alt-текст в ваших изображениях. Если вы хотите в деталях изучить альтернативные тексты и их роль в доступности контента, я рекомендую ознакомиться с этой статьёй за авторством The Big Hack (англ.).
Суть такова: Когда вы добавляете изображение, есть шанс что некоторые читатели — например, люди с нарушением зрения или слепотой — не смогут его увидеть. Alt-текст позволяет предоставить им краткое описание этого изображения для парсинга экранным диктором. Alt-текст также появляется, если изображение или ссылка на него становится недоступна.
Для установки alt-текста вам просто надо передать атрибут alt
в Bootstrap Image Box или обычному изображению, вставленному через синтаксис вики..ПРИМЕЧАНИЕ Стандартный блок с изображением не поддерживает alt-текст
Демонстрация:
[[include component:bs-image
|image=Larry_the_cat.jpg
|heading=Кот Ларри
|caption=Он очень мягкий.
|link=https://scpfoundation.net/local--files/theme:flopstyle-dark/Larry_the_cat.jpg
|alt=Бежевый кот Ларри сидит во дворе, навострив уши.
|width=300px
|float=middle
|kind=primary
]]
Обратите внимание на поле alt
. В нём содержится информация, которую зачитает экранный диктор.
Обычные таблицы

Блок с изображением, разделённый блоком tableb
.
заголовок | заголовок | заголовок | заголовок |
---|
содержимое ячейки | содержимое ячейки | содержимое ячейки | содержимое ячейки |
Таблица с прикольным оформлением hcell |
---|
Но её ячейки были разделены | |
Таблицы цветов ACS
Спёрты из BLANKSTYLE CSS за авторством
Placeholder McD и
HarryBlank
Это ЗЕЛЁНАЯ таблица; |
---|
её интересно тестировать. |
[[div class="table1"]]
Это СИНЯЯ таблица; |
---|
её тоже интересно тестировать. |
[[div class="table2"]]
Это ЖЁЛТАЯ таблица; |
---|
её тоже интересно тестировать. |
[[div class="table3"]]
Это ОРАНЖЕВАЯ таблица; |
---|
её тоже интересно тестировать. |
[[div class="table4"]]
Это КРАСНАЯ таблица; |
---|
её не так интересно тестировать. |
[[div class="table5"]]
Это ФИОЛЕТОВАЯ таблица; |
---|
она и есть тестирование. |
[[div class="table6"]]
Это БЕЛАЯ таблица; |
---|
нет никакого тестирования. |
[[div class="table0"]]
Совмещайте span'ы с классами таблиц и полужирный текст, чтобы получить цветной полужирный текст:
ЗЕЛЁНЫЙ
[[span class="table1"]] **ЗЕЛЁНЫЙ** [[/span]]
СИНИЙ
[[span class="table2"]] **СИНИЙ** [[/span]]
ЖЁЛТЫЙ
[[span class="table3"]] **ЖЁЛТЫЙ** [[/span]]
ОРАНЖЕВЫЙ
[[span class="table4"]] **ОРАНЖЕВЫЙ** [[/span]]
КРАСНЫЙ
[[span class="table5"]] **КРАСНЫЙ** [[/span]]
ФИОЛЕТОВЫЙ
[[span class="table6"]] **ФИОЛЕТОВЫЙ** [[/span]]
БЕЛЫЙ
[[span class="table0"]] **БЕЛЫЙ** [[/span]]
Примеры оформления (ПРОДВИНУТЫЕ)
В силу особой природы этой плашки (она не для эстетики, а для использования по делу), она была отделена от остальных блоков.
Предупреждение о содержимом/триггере
— предупреждение, располагаемое в начале статьи и предупреждающее читателей о наличии потенциально неприятных материалов в статье. Такое предупреждение кратко перечисляет проблемные темы/триггеры, присутствующие в статье.
СМ. ТАКЖЕ — Руководство по предупреждениям о взрослом содержимом.
Этот [SCP-объект / формат СО / рассказ / арт / хаб] содержит [потенциально неприятный контент], который может нанести вред некоторым читателям.
[[div class="content-warning-alt"]]
В каждом примере блоков div представлено:
- Визуальное оформление.
- Синтаксис для использования.
- Некоторые могут также включать краткое описание для чего они предназначены.
💡 ПОМНИТЕ — каждый div необходимо закрывать с помощью [[/div]]
.
Блок с цитатой
[[div class="blockquote"]]
Альтернативный блок с цитатой 1 — Пунктирный
[[div class="blockquote dashed"]]
Альтернативный блок с цитатой 2 — Классический
[[div class="blockquote classic"]]
Альтернативный блок с цитатой 3 — Классический с закруглением
[[div class="blockquote classic curved"]]
Альтернативный блок с цитатой 4 — Облегчённый
[[div class="blockquote lightweight"]]
Альтернативный блок с цитатой 5 — Простой
[[div class="blockquote simple"]]
Укрупнённый размер цитаты
[[div class="blockquote simple larger"]]
Класс "larger" может также применяться к блокам Darkbox, Lightbox, блоку отчёта и их вариациям.
Darkbox
[[div class="darkbox"]]
Lightbox
[[div class="lightbox"]]
БЛОК ОТЧЁТА
Для внутренней документации
[[div class="report-box"]]
+++* Заголовок
----
Текст
[[/div]]
Вариации блока отчёта
Красный
[[div class="report-box red-tint"]]
Оранжевый
[[div class="report-box orange-tint"]]
Жёлтый
[[div class="report-box yellow-tint"]]
Зелёный
[[div class="report-box green-tint"]]
Бирюзовый
[[div class="report-box cyan-tint"]]
Синий
[[div class="report-box blue-tint"]]
Фиолетовый
[[div class="report-box magenta-tint"]]
Серый
[[div class="report-box grey-tint"]]
Блок смотрителей
[[div class="overwatch-box"]]
Исходник страницы
[[div class="page-source"]]
Блок с закадровым текстом
Lorem ipsum dolor sit amet, quis habeo facilisi eum an. Habeo denique consequuntur nec at, id his agam inciderint. Ex veri doming disputationi quo, error clita eruditi ei quo. Melius labitur comprehensam pro cu. Ut dico veritus assueverit sed.
Duo justo vitae dicant cu, ut his vitae appetere eloquentiam. Repudiare consequat ei eum, ex eam vocibus denique iracundia. Vix vocent minimum sensibus in, ad quando phaedrum intellegam sed. Fastidii argumentum ne vel, ad sint errem.
[[div class="narration justified indented"]]
Блок дневника
[[div class="journal"]]
Выделенный текст.
[[span class="highlighter"]]
Учтите: Этот блок не позволяет делать двойной перенос строки. Для этого вам необходимо сделать следующее:
1. После каждой строки текста нажать enter.
2. На новой строке напишите [[lines 1]]
.
3. Снова нажмите enter и можете продолжать.
Это блок Text Style за авторством JaonHax.
Да!
Пожалуйста, обратитесь к руководству, — оно подскажет вам как подставлять этот блок.
ПРЕДУПРЕЖДЕНИЕ О НАРРАТИВОУГРОЗЕ
Файл, к которому вы пытаетесь получить доступ, “SCP-████”, описывает непредсказуемую нарративную аномалию, пересекающую несколько суб-нарративных слоёв. Требуется нарративная прививка, так как данный документ содержит несколько встроенных нарративоугроз. Непривитый персонал может испытать событие нарративного перефразирования.
Желаете продолжить?
[[div class="hazard-box hazard-box-#"]]1
[[div class="hazard-box-image"]]
[[div class="hazard-box-image-#"]]2
[[image imageLink.png]]3
[[/div]]
[[/div]]
[[div class="hazard-box-text"]]
+++* ЗАГОЛОВОК
Впишите сюда что хотите.
[[/div]]
[[/div]]
- У
hazard-box-#
числа 1–5
соотносятся с цветами Системы классификации аномалий (ACS). Также присутствуют фиолетовый (6
) и белый (0
) варианты. Краткое описание этих соотношений приведено далее:hazard-box-1
= Зелёныйhazard-box-2
= Синийhazard-box-3
= Жёлтыйhazard-box-4
= Оранжевыйhazard-box-5
= Красныйhazard-box-6
= Фиолетовый
- У
hazard-box-image-#
укажите число также, как и в предыдущей секции. - Здесь замените ссылку-заглушку на один из знаков угроз, созданных
EstrellaYoshte и перечисленных на их арт-странице. Далее представлены ссылки на эти пять знаков угроз, однако я рекомендую вам всё-таки заглянуть на арт-страницу, так как эти изображения сыграли бесценную роль в прихорашивании этой темы!
В каждом примере особого форматирования представлено:
- Визуальное оформление.
- Синтаксис для использования.
- Некоторые могут также включать краткое описание для чего они предназначены.
💡 ПОМНИТЕ — каждый div необходимо закрывать с помощью [[/div]]
и каждый span — с помощью [[/span]]
.
Центрированный текст
Nulla egestas risus ac venenatis rhoncus. Nunc imperdiet mattis risus ac iaculis. Etiam egestas est lorem, at vehicula odio convallis eu. Nam condimentum, nisl sed rutrum tempor, sapien nibh elementum justo, non semper leo ante at tortor. Praesent ac enim a nisi luctus commodo. Vivamus et euismod leo, sed volutpat ligula. Fusce nec tempus lacus, a placerat risus. Phasellus luctus.
[[div class="centered"]]
Текст с выравниванием по ширине
Ut ut quam non augue malesuada lacinia. Sed a eros sit amet lacus cursus tempor viverra nec velit. Suspendisse vel ante tincidunt, ultrices metus id, pellentesque odio. Integer sodales enim vel ligula sagittis, quis aliquam mauris tincidunt. Maecenas fringilla turpis vitae luctus tempus. Suspendisse ut mollis lectus. Donec nisi mauris, laoreet ac urna at, semper lobortis turpis. Sed purus elit, scelerisque ut tortor sed, laoreet dapibus odio. In libero mauris.
[[div class="justified"]]
Текст с красной строкой
Aliquam fringilla eleifend tellus, feugiat pellentesque lacus auctor vitae. Praesent volutpat rutrum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at commodo leo. Aliquam sapien eros, bibendum id vulputate in, convallis vestibulum diam. Suspendisse ultricies vel ante eu porttitor. In a massa ante. Sed eu elit.
[[div class="indented"]]
Символ конца статьи
“end mark (или символ конца статьи): Типографический элемент, обозначающий конец статьи. Часто он представлен символом конца доказательства, но он может быть и интересным узором.”
[[div class="end-mark"]]
устанавливает символ конца статьи в конце последнего абзаца внутри блока (как в конце следующего абзаца!). Используйте его совместно с любым особым оформлением текста. Эта тема использует стандартный символ конца статьи в виде ромба, разделённого ‘X’.
Символы конца статьи — классический приём в типографии. На вики SCP, они будут наиболее уместны при написании рассказов.
Красный текст пересмотра документа
Прививка распространена.
[[span class="rev-red"]]
Текст [[/span]]
Жёлтый текст пересмотра документа
Загрузка остановлена. Обновить?
[[span class="rev-yellow"]]
Текст [[/span]]
Зелёный текст пересмотра документа
Устаревшая информация помечается зелёным.
[[span class="rev-green"]]
Текст [[/span]]
Синий текст пересмотра документа
Прививка завершена!
[[span class="rev-blue"]]
Текст [[/span]]
Текст в компьютерном терминале
[РЕДАКТИРОВАНИЕ]
[ИСКЛЮЧЕНИЕ]
[ДАННЫЕ УТЕРЯНЫ]
[[span class="terminal-span"]]
[ТЕКСТ] [[/span]]
Жирный текст
Пример
[[span class="bt"]]
Текст [[/span]]
Вы всё ещё можете создавать полужирный текст стандартным синтаксисом, однако для двух дальнейших вариантов особого форматирования необходим именно такой вариант.
Жирный текст с полосой
Пример
[[span class="bt bb"]]
Текст [[/span]]
Жирный текст с полосой заголовка
ПРИМЕР
+++* [[span class="bt bh"]]
ТЕКСТ [[/span]]
Жирный текст цвета textColor
Пример
[[span class="tb"]]
Текст [[/span]]
Жирный текст цвета textColor с полосой
Пример
[[span class="tb bb"]]
Текст [[/span]]
Мигающая текстовая каретка
[[div id="append-blink-bar"]]
помещает мигающий символ юникода “Full Block” в конце последнего параграфа в рамках блока. Данный блок имитирует старый мигающий курсор в конце командной строки.
Красивая горизонтальная линия
[[div class="fancyhr"]]
----
[[/div]]
Красивая окантовка
[[div class="fancyborder"]]
Особый блок с заголовком 1
ЗАГОЛОВОК
ПОДЗАГОЛОВОК
[[div class="lite-heading"]]
----
++* ЗАГОЛОВОК
+++* ПОДЗАГОЛОВОК
----
[[/div]]
Особый блок с заголовком 2
МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
[[div class="lite-heading"]]
----
++* МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
----
[[/div]]
Альтернативный показ изображения
[[div class="image-showcase"]]
[[=image URL_АДРЕС]]
[[/div]]
Разделитель сцен
[[=image URL_АДРЕС class="scene-break"]]
scene-break
— ажурный символ, “обозначающий паузу для читателя и перемену в нарративе”.
Разделители сцен — классический приём в типографии. Вот пример такого из Приключений Алисы в стране чудес. На вики SCP, scene-break
наиболее уместен при написании рассказов.
Разделитель сцен с оттенком
[[=image URL_АДРЕС class="scene-break icon-tint"]]
icon-tint
следует использовать только с чёрными логотипами. Изменить цвет иконки можно, поменяв значение переменной --hue
в [[module CSS]]
:
Замените #
на желаемое положительное целое число. По умолчанию 325deg
.
Пагинация ListPages — Первая страница
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 Следующая итерация ▷]
[[/div]]
[[/div]]
Пагинация ListPages — Последующие страницы
next
должен всегда быть первым:
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 Следующая итерация ▷]
[[/div]]
[[div class="listPagesNav-prev"]]
[/offset/0 ◁ Назад]
[[/div]]
[[/div]]
Выцветение до чёрного
[[div class="fade-away"]]
Для управления длиной затенения, меняйте число в [[lines 5]]
по своему желанию.
Выцветение до белого
[[div class="whiteout"]]
Для управления длиной затенения, меняйте число в [[lines 5]]
по своему желанию.
Конец содержимого статьи
[[div class="footing"]]
Блок со связанными статьями
[[div class="related-flex"]]
[[div class="related"]]
* **[[[link-to-a-page|Пользовательский текст]]]**
[[/div]]
[[/div]]
Пагинация в цикле
[[div class="series-nav"]]
« Предыдущая страница | [[size 120%]]Текущая страница[[/size]] | Следующая страница »
[[/div]]
Визуальный элемент Earthworm
за авторством
Croquembouche
Обратитесь к странице компонента за инструкциями по установке.
Переключатель активности модуля рейтинга
[[span id="activeRate"]]
[[module Rate]]
[[/span]]
Любой модуль рейтинга будет находиться в "неактивном" состоянии по умолчанию и становиться "активным" при наведении курсора.
⚠️ Согласно политике CSS, это можно размещать только в конце страницы.
Исходный код
Ищите в исходнике страницы.
🡹
Usage
To import this theme to your page, put the following anywhere inside it:
[[include theme:creepypasta]]
The standard CSS @import method won't work. This is intentional (thanks to Пользователь 'stormbreath' не существует for providing the CSS code!). Importing the theme using [[include]] adds your page to a list of Backlinks. This is useful for seeing what pages would be affected when this theme is updated, and allows any errors caused by that to be noticed and corrected much faster.
You can view any page's Backlinks by clicking "+ Options" at the bottom of the page, then "Backlinks".
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
First Title
Second Title
Third Title
Fourth Title
Fifth Title
Sixth Title
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 text
That's a horizontal rule
Nested blockquotes
This is a | table |
---|
You should know | how to make these |
already |
This is a theme for the REDTAPE // ALLCAPS timeline of articles by ROUNDERHOUSE. Please inquire if you'd like to use the theme and contribute!
Theme Colors
Ship Gray--gray-monochrome#424248
Firebrick--bright-accent#c02727
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Persian Plum--medium-accent#711515
Dryblood--dark-accent#460d0d
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
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:redtape
|dark=--] <- This is an optional argument if you would like to use the dark mode version of the theme. If you omit this, it will default to light mode.
|years=XX <- This sets the minutes to midnight in the subheader and the clock. For all articles that subscribe to the REDTAPE timeline, midnight is 2057.
]]
Examples
A horizontal rule can be created with 4 hyphens "----" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
First Title
Second Title
Third Title
Fourth Title
Fifth Title
Sixth Title
Just use your imagination and pretend there's Lorem Ipsum
here.
- Visited link
- Unvisited link
- Missing link
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, or use [[div class="blockquote"]]
.
More text
That's a horizontal rule
Nested blockquotes
And another
This is a | table |
---|
You should know | how to make these |
already |
This article has a number of assorted divs you can use to make your article's formatting pop out. Here's a list:
» Addendum Header
ATTACHED TRANSCRIPT - JUNE 1983
[[div class="doc"]]
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
[[div class="addendum"]]
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
» Header Angled
[[image imagename.png class="angled"]]
» Foundation Divs
FOUNDATION NOTICE
[[div class="foundation"]]
FOUNDATION NOTICE 'SNOW'
[[div class="foundation snow"]]
NOTICE FROM THE FOUNDATION RECORDS, ARCHIVAL, AND INFORMATION SECURITY ADMINISTRATION
[[div class="foundation raisa"]]
FOUNDATION NOTICE 'GUERRE'
[[div class="foundation alt"]]
» GOC div
GLOBAL OCCULT COALITION FILE
[[div class="addendum goc"]]
GLOBAL OCCULT COALITION NOTICE
[[div class="addendum goc notice"]]
» Generic Color Divs
Generic FILESERV Notice
[[div class="generic red"]]
Generic FILESERV Notice
[[div class="generic blue"]]
Generic FILESERV Notice
[[div class="generic yellow"]]
Generic FILESERV Notice
[[div class="generic purple"]]
» Navbar
REDTAPE also has a baked-in sick-ass modular navbar. Check out some of its variants:
001s
Series Entry w/ hub link
First entry in a series
Most Recent entry in a series
The Header and Title font is Secular One.
The Body font is Telex.
The Monospace font used is PT Mono.
/*
REDTAPE Theme
[2022 Wikidot Theme]
Created by ROUNDERHOUSE
Thanks to estrellayoshte, stormbreath, stephlynch, Woedenaz for critique and help.
Based on Black Highlighter Theme created by Woedenaz and Croquembouche.
The clock logo was created by EstrellaYoshte, based off the SCP Foundation logo. Licensed under CC BY SA 3.0.
The topography background was created by Steve Schoger of https://heropatterns.com, licensed under CC BY 4.0.
The red tape design in the header was created by stephlynch, licensed under CC BY SA 3.0.
*/
/* *** FONTS *** */
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Telex&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
/* *** ROOT VARS *** */
:root {
--theme-id: "REDTAPE";
--theme-name: "REDTAPE";
--logo-image: url("https://files.scpfoundation.net/local--files/theme%3Aredtape/midnightwhite.png");
--header-title: "REDTAPE";
--header-subtitle: "{$years} минут до Полуночи;
--header-font: 'Russo One', sans-serif;
--title-font: 'Russo One', sans-serif;
--body-font: 'Telex', sans-serif;
--minutes-to-midnight: {$years};
/* Standard Colors */
--white-monochrome: 252,
252,
252;
/* white */
--pale-gray-monochrome: 244,
244,
244;
/* v light gray for blockquotes and stuff */
--light-gray-monochrome: 170,
170,
170;
/* light accent gray for login status */
--gray-monochrome: 66,
66,
72;
/* gray */
--dark-gray-monochrome: 48,
48,
52;
/* dark accent gray for sidebar background */
--black-monochrome: 12,
12,
12;
/* black */
--pale-accent: 192,
39,
39;
--bright-accent: 192,
39,
39;
/* bright blue */
--medium-accent: 113,
21,
21;
/* pale blue */
--dark-accent: 70,
13,
13;
/* v pale blue */
--newpage-color: 164,
194,
236;
/* ===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(--black-monochrome);
/* ===GENERAL TEXT COLORS=== */
--swatch-text-dark: var(--white-monochrome);
--swatch-text-light: var(--black-monochrome);
--swatch-text-general: var(--swatch-text-light);
--swatch-important-text: var(--bright-accent);
/* ===MENU COLORS=== */
/* ===MENU BACKGROUND COLORS=== */
--swatch-menubg-color: var(--bright-accent);
--swatch-menubg-light-color: var(--pale-gray-monochrome);
--swatch-menubg-medium-color: var(--light-gray-monochrome);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--dark-gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
/* ===MENU TEXT COLORS=== */
--swatch-menutxt-dark-color: var(--black-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
--swatch-background: var(--white-monochrome);
--swatch-headerh1-color: var(--white-monochrome);
--swatch-headerh2-color: var(--bright-accent);
--background-gradient-color: var(--bright-accent);
--background-gradient-distance: 18rem;
--topbar-height-on-desktop: 1.5rem;
--topbar-height-on-mobile: 3.5rem;
--gradient-topmenu: radial-gradient(circle, rgb(var(--bright-accent)) 81%, rgba(var(--medium-accent), 0.1) 94%);
--gradient-topmenu-mobile: none;
--swatch-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--bright-accent);
--swatch-text-tertiary-color: var(--white-accent);
--swatch-text-secondary-color: var(--white-monochrome);
--rating-module-text-color: var(--swatch-secondary-color);
--toggle-border-color: rgb(var(--bright-accent));
--toggle-icon-color: rgb(var(--bright-accent));
--toggle-roundness: 1%;
--toggle-button-bg: rgb(var(--white-monochrome));
--barColour: #c02727 !important;
--tabs-content-bg-color: var(--white-monochrome),
0.25;
--tabs-content-border-color: var(--bright-accent);
--dropdown-bg-color: var(--white-monochrome),
0.9;
--dropdown-border-color: var(--swatch-text-tertiary-color),
0.5;
--dropdown-links-color: var(--bright-accent);
--dropdown-links-bg-color: 0,
0,
0,
0;
/* Transparent */
--dropdown-links-hover-color: var(--white-monochrome);
--dropdown-links-hover-bg-color: var(--swatch-primary);
--modal-bg: var(--swatch-secondary-color);
--modal-body-text: var(--swatch-text-tertiary-color);
--modal-body-header-txt: var(--swatch-text-tertiary-color);
--modal-header-stripe: var(--swatch-primary);
/* ===FOOTNOTES HOVER BLOCK=== */
--hoverblock-bg: var(--white-monochrome);
--hoverblock-txt: var(--bright-accent);
--pagetags-title-bg: var(--bright-accent);
}
/* *** FOOTNOTES *** */
.bibitems,
.footnotes-footer {
background-color: #d3d3d370;
box-shadow: inset .5em 0 0 0 rgba(var(--bright-accent), 1);
border-radius: 5px;
}
.bibitems .title,
.footnotes-footer .title {
width: inherit;
background-color: rgb(var(--bright-accent));
-webkit-clip-path: polygon(94.49% 0px, 100% 43.55%, 100% 100%, 0px 100%, 0px 0px);
clip-path: polygon(94.49% 0px, 100% 43.55%, 100% 100%, 0px 100%, 0px 0px);
border-radius: 5px 0 0;
}
.bibitems .bibitem::after,
.footnotes-footer a[href*="javascript"]::before {
background-color: transparent;
}
/* *** LICENSEBOX *** */
.licensebox {
text-align: center;
}
.licensebox .collapsible-block-content {
text-align: left;
}
.licensebox .collapsible-block-link {
background: rgb(var(--bright-accent));
color: white;
border-radius: 4px;
padding: 4px;
font-family: var(--mono-font);
}
/* *** SIDEBAR *** */
#side-bar .side-block.media a::before {
background-color: rgb(var(--white-monochrome));
}
#side-bar div.menu-item a::before,
#interwiki div.menu-item a::before {
background-color: rgb(var(--dark-accent));
}
.side-block a:hover {
background-color: black;
}
/* *** TABS *** */
.yui-navset .yui-content {
background: rgba(var(--white-monochrome), .75);
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
background: rgb(var(--white-monochrome)) !important;
}
.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em {
color: rgb(var(--bright-accent));
}
.yui-navset .yui-nav a em,
.yui-navset .yui-nav .selected a em {
color: rgb(var(--white-monochrome));
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
background: rgb(var(--black-monochrome));
}
/* *** TOPBAR *** */
#top-bar {
background: rgb(var(--bright-accent));
border-radius: 4px;
}
#header div[class*="top-bar"]>ul>li>ul {
border: none;
}
#header div[class*="top-bar"]>ul>li ul>li {
background-color: rgb(var(--black-monochrome));
}
#header div[class*="top-bar"]>ul>li>ul li>a {
color: rgb(var(--bright-accent));
}
#header div[class*="top-bar"]>ul>li ul>li {
background-color: rgb(var(--white-monochrome));
}
#header div[class*="top-bar"]>ul>li>ul li>a {
color: rgb(var(--bright-accent));
}
/* *** HEADER *** */
#content-wrap:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://files.scpfoundation.net/local--files/theme%3Aredtape/topolight.png);
background-size: contain;
z-index: -1;
}
#content-wrap {
background-color: #ffffffa3;
background-blend-mode: multiply;
}
#header::before {
height: calc(100% - var(--topbar-height-on-desktop));
aspect-ratio: 1;
left: 50%;
top: 0.3rem;
background-image: url(https://files.scpfoundation.net/local--files/theme%3Aredtape/Untitled2.png);
background-size: contain;
transform: translatex(-50%);
-webkit-filter: invert(1);
filter: invert(1);
}
#header::after {
content: "";
display: block;
position: absolute;
background: white;
opacity: 0.75;
height: 25.5%;
width: 0.5rem;
bottom: 53%;
left: calc(50% - 0.25rem);
transform-origin: bottom center;
transform: rotate(calc(360deg - 30deg * var(--minutes-to-midnight)/60));
}
#extra-div-1 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10rem;
background: #f4f4f4;
pointer-events: none;
}
#extra-div-2 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10rem;
background-image: url("https://files.scpfoundation.net/local--files/theme%3Aredtape/topotrans.png");
background-size: cover;
background-position: center;
background-repeat: repeat-x;
pointer-events: none;
filter: invert(70%);
-webkit-filter: invert(70%);
}
#extra-div-3 {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10rem;
background-image: url("https://files.scpfoundation.net/local--files/theme%3Aredtape/redtapes.png");
background-size: 130%;
background-position: center;
background-repeat: repeat-x;
pointer-events: none;
}
/* *** MISC PAGE STYLING *** */
.page-source {
box-shadow: 1px 1px 4px rgba(var(--dark-accent), 0.55);
}
#page-content div.b-tables table.wiki-content-table th,
#page-content table.wiki-content-table th {
background: rgb(var(--bright-accent));
}
#page-content>.collapsible-block {
border-color: rgb(var(--bright-accent));
}
#page-content>h1 span,
#page-content>h2 span,
#page-content>h3 span,
#page-content>h4 span,
#page-content>h5 span,
#page-content>h6 span {
text-transform: uppercase;
}
#login-status #account-options {
background-image: url(https://files.scpfoundation.net/local--files/theme%3Aredtape/topotrans.png);
background-size: contain;
background-color: rgb(var(--bright-accent));
background-blend-mode: multiply;
}
#license-area a:active,
#license-area a:hover,
#footer a:active,
#footer a:hover {
color: rgb(var(--white-monochrome));
}
div.obj {
color: rgb(var(--white-monochrome)) !important;
}
#page-content>a {
color: rgb(var(--bright-accent));
}
#page-title::after,
.meta-title::after,
#page-title::before,
.meta-title::before {
background-color: rgb(var(--bright-accent));
border: 4px solid rgb(var(--bright-accent));
}
form#edit-page-form .wd-editor-toolbar-panel a::before {
background-color: rgb(var(--bright-accent));
}
#odialog-container div.owindow {
background-color: white;
}
blockquote,
.blockquote,
div.blockquote,
[class*="blockquote"] {
border-left: 5px rgb(var(--bright-accent)) solid;
background: rgb(var(--white-monochrome));
box-shadow: 1px 1px 4px rgba(var(--medium-accent), 0.5);
}
#main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) {
background-color: rgb(var(--medium-accent));
color: white;
}
#main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"]) {
background-color: rgb(var(--medium-accent));
color: white;
}
#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) {
background-color: rgb(var(--medium-accent));
color: white;
}
.scp-image-caption {
color: rgb(var(--white-monochrome));
}
.image-block,
.scp-image-block {
box-shadow: 0px 0px 4px rgb(var(--medium-accent))
}
hr {
border-top: none;
height: .07rem;
background: rgb(var(--bright-accent));
border-left: 50px double #f4f4f4;
border-right: 50px double #f4f4f4;
}
.code {
color: white;
}
blockquote hr,
.blockquote hr,
div.blockquote hr,
[class*="blockquote"] hr {
border-left: none;
border-right: none;
}
a.btn {
-webkit-clip-path: polygon(89% 0, 100% 29%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(89% 0, 100% 29%, 100% 100%, 0 100%, 0 0);
color: rgb(var(--white-monochrome)) !important;
}
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:-moz-placeholder-shown) {
color: rgb(var(--bright-accent));
}
form#edit-page-form .edit-page-bottomtable tr>td:first-of-type>div:first-of-type textarea:not(:placeholder-shown) {
color: rgb(var(--bright-accent));
}
/* *** DIVS *** */
.addendum {
border: solid 2px rgb(var(--bright-accent));
background: #F5F5F5;
width: 84%;
padding: 1px 15px;
margin: 10px auto;
}
.label {
background: rgb(var(--bright-accent));
color: white;
padding: 3px;
border-radius: 4px;
font-family: monospace;
white-space: nowrap;
}
.doc {
background-color: rgb(var(--bright-accent));
color: white;
font-family: var(--mono-font);
padding: 0 1.5rem;
font-size: 1.1em;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
position: relative;
top: -2em;
border-radius: 4px;
margin-bottom: -3rem;
}
.addendum {
margin-top: 1.6rem;
}
.angled {
-webkit-clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
border-radius: 5px;
}
.foundation {
border: solid 3px #444;
background: #f2f2c2 url('https://files.scpfoundation.net/local--files/theme%3Aredtape/scp_trans.png') center center no-repeat;
padding: 1.5rem;
margin-bottom: 10px;
color: black;
}
.foundation p {
margin: none;
}
.foundation.snow {
background: #fff url('https://files.scpfoundation.net/local--files/theme%3Aredtape/scp_trans.png') center center no-repeat;
}
.foundation.raisa {
background: #f2f2c2 url('https://files.scpfoundation.net/local--files/theme%3Aredtape/raisa_trans.png') center center no-repeat;
background-size: 29rem;
text-align: center;
}
.foundation.alt {
background: #fff url('https://files.scpfoundation.net/local--files/theme%3Ai57/scp-logo-i57.png') center center no-repeat;
}
.goc {
background: #fff url('https://files.scpfoundation.net/local--files/theme%3Aredtape/goc-fade.png') -5rem -5rem no-repeat !important;
border: none;
border-left: 5px solid #275495;
background-size: 30rem;
box-shadow: 1px 1px 4px #27549582;
color: black;
}
.goc h1,
.goc h2,
.goc h3,
.goc h4,
.goc h5,
.goc h6 {
font-family: 'Russo One', sans-serif;
color: #5c95e6;
}
.goc hr,
.goc .label {
background: #275495 !important;
}
.goc .scp-image-caption {
background-color: #275495;
box-shadow: none;
}
.goc.notice {
width: 80%;
margin: 0.625rem auto;
padding: 0.9375rem;
border: solid 0.125rem #5c95e6;
background: #fff url('https://files.scpfoundation.net/local--files/theme%3Aredtape/goc-fade.png') center no-repeat;
background-size: auto;
text-align: center;
background-position: center !important;
}
.generic {
position: relative;
margin: 0.5em 1.25rem;
padding: 0.825em 1.25em;
clear: both;
-webkit-clip-path: polygon(93% 0px, 100% 15.11%, 100% 100%, 0px 100%, 0px 0px);
clip-path: polygon(93% 0px, 100% 15.11%, 100% 100%, 0px 100%, 0px 0px);
border-left: 4px solid gray;
}
.generic hr {
background: gray;
border: none;
}
.generic h1,
.generic h2,
.generic h3,
.generic h4,
.generic h5,
.generic h6 {
color: #515050;
}
.generic.red {
background: #ff4a4a3d;
}
.generic.blue {
background: #4a80ff3d;
}
.generic.yellow {
background: #fff77f3d;
}
.generic.purple {
background: #a561d536;
}
.flameframe {
background: url('https://cdn.discordapp.com/attachments/1013691157999530004/1017164979906023504/unknown.png');
color: white;
background-size: 100% 100%;
background-position: center;
}
/* *** NAVBAR *** */
.rnb-navbar {
display: flex;
justify-content: center;
align-items: center;
height: 2.7rem;
margin: 3rem 0rem;
}
.rnb-item {
padding: 3px;
text-align: center;
width: 35%;
border: 3px solid rgb(var(--bright-accent));
background-attachment: fixed;
background-size: contain;
}
.rnb-item a {
font-family: var(--header-font);
color: rgb(var(--bright-accent));
font-size: 110%;
}
.rnb-item p {
margin: 3%;
}
.rnb-last {
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/topolight.png');
transition: all 0.25s ease-in-out;
}
.rnb-current {
width: 30%;
border: none;
background-color: rgb(192, 39, 39);
font-size: 140%;
color: white;
font-family: var(--header-font);
letter-spacing: 3px;
box-shadow: 1px 1px 4px rgba(var(--dark-accent), 0.75);
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/logo_SCP.png');
background-size: 12rem;
background-repeat: no-repeat;
background-attachment: initial;
background-position: center;
background-blend-mode: color-burn;
text-shadow: 3px 0px 3px rgb(var(--dark-accent));
}
.rnb-current a {
color: rgb(var(--white-monochrome)) !important;
}
.rnb-current a::before {
content: "[";
}
.rnb-current a::after {
content: "]";
}
.rnb-next {
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/topolight.png');
transition: all 0.25s ease-in-out;
}
.rnb-last:hover,
.rnb-next:hover {
background-color: rgb(var(--bright-accent));
background-blend-mode: hard-light;
}
.rnb-last a,
.rnb-next a {
transition: all 0.25s ease-in-out;
text-decoration: none !important;
}
.rnb-last a:hover,
.rnb-last a:active,
.rnb-next a:hover,
.rnb-next a:active {
text-decoration: none;
text-shadow: #FF6868 1px 0 10px;
}
.rnb-supertitle {
font-family: var(--header-font);
color: rgb(var(--medium-accent));
font-size: 70%;
letter-spacing: 0.5rem;
margin-left: 0.5rem;
}
.rnb-current .rnb-supertitle {
letter-spacing: 0;
}
/* *** NAVBAR VARIANTS *** */
.rnb-item.goldproposal {
background-color: rgba(164, 119, 84, 1);
background-image: url('https://files.scpfoundation.net/local--files/rounderhouse-gold-proposal/AmapiRam.jpg');
background-blend-mode: multiply;
background-size: cover;
background-attachment: local;
border-color: rgb(91, 67, 48);
background-position: center;
}
.rnb-item.goldproposal:hover {
background-color: rgb(var(--bright-accent));
}
.rnb-item.goldproposal .rnb-supertitle,
.goldproposal a {
color: #fdcc0a !important;
}
.rnb-item.goldproposal a:hover {
text-shadow: gold 1px 0 10px;
}
.rnb-item.jadeproposal {
border-color: #37782C;
background-color: #295522;
background-image: url('http://files.scpfoundation.net/local--files/jade/JadeHeader2k.jpg');
background-blend-mode: luminosity;
background-size: 170%;
background-attachment: local;
background-position: center;
}
.rnb-item.jadeproposal a,
.jadeproposal .rnb-supertitle {
color: #78C46C !important;
}
.rnb-item.jadeproposal:hover {
background-color: rgb(var(--bright-accent));
}
.rnb-item.jadeproposal a:hover {
text-shadow: green 1px 0 10px;
}
.rnb-current.gocnav {
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/logo_GOC.png');
}
rnb-.current.raisanav {
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/logo_RAISA.png');
}
.rnb-current.site7nav {
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/logo_SITE7.png');
}
/* *** MOBILE *** */
@media only screen and (max-width: 765px) {
#extra-div-3 {
background-size: 310%;
}
#header::before {
top: 0.75rem;
}
#header::after {
bottom: 51%;
}
#header::after {
width: 0.35rem;
left: calc(50% - 0.19rem);
}
}
:root {
--swatch-text-general: var(--swatch-text-dark);
--swatch-background: var(--black-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--toggle-button-bg: rgb(var(--black-monochrome));
}
div.obj {
color: rgb(var(--white-monochrome)) !important;
}
div.objclass::before {
background-color: rgb(var(--white-monochrome)) !important;
}
#page-content a:visited {
color: #E74E45;
}
#content-wrap:before {
background-image: url(https://files.scpfoundation.net/local--files/theme%3Aredtape/topo.png);
}
#content-wrap {
background-color: #0000005c;
}
#extra-div-1 {
background: #111;
}
#extra-div-2 {
filter: none;
-webkit-filter: none;
}
blockquote,
.blockquote,
div.blockquote,
[class*="blockquote"] {
background-color: #151515;
}
hr {
border-color: #0e0e0e;
}
.bibitems,
.footnotes-footer {
background-color: #5c5a5a70;
}
.image-block,
.scp-image-block {
box-shadow: 0px 0px 4px rgb(var(--medium-accent));
}
.yui-navset .yui-content {
background: rgba(var(--black-monochrome), .75);
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
background: rgb(var(--black-monochrome)) !important;
}
.addendum {
background: #1C1C1C;
color: white;
}
.addendum hr {
border-color: #1C1C1C;
}
.goc {
background-color: #111;
color: #fff;
}
.generic {
border-color: #e4e1e1;
}
.generic hr {
background: #e4e1e1;
}
.generic h1,
.generic h2,
.generic h3,
.generic h4,
.generic h5,
.generic h6 {
color: #e4e1e1;
}
.rnb-next,
.rnb-last {
background-image: url('https://files.scpfoundation.net/local--files/theme%3Aredtape/topo.png');
}
.rnb-supertitle {
color: rgb(var(--white-monochrome));
}