Это рабочий пример authorbox. Обратитесь к подсекции Sideboxes за информацией.
⮤ Это flavorbox ⮥
Для его создания, скопируйте блок ниже
и вставьте его в свой authorbox:
[[div class="flavorbox"]]
Рейтинг:
Пример форматирования
В каждом примере блоков div представлено:
- Визуальное оформление.
- Синтаксис для использования.
- Некоторые могут также включать краткое описание для чего они предназначены.
Заголовок уведомления АПАИБ
— Мария Джонс, директор АПАИБ
[[div class="raisa-header"]]
++++* Заголовок
----
Текст
[[/div]]
Красивый заголовок
— Мария Джонс, директор невероятная ✧・゚: *✧・゚:*
[[div class="pink-header"]]
++++* Заголовок
----
Текст
[[/div]]
От собрания ОРАКУЛ
— Нэйтан Джонс, комиссар, ЦУРОРП
[[div class="oracle-header"]]
[[div class="img-resize"]]
[[image URL_СЮДА]]
[[/div]]
++++* Заголовок
----
Текст
[[/div]]
УВЕДОМЛЕНИЕ ОТ ЦЕНТРАЛЬНОГО УПРАВЛЕНИЯ РАЗВЕДЫВАТЕЛЬНЫМИ ОПЕРАЦИЯМИ И РЕАЛИЗАЦИЕЙ ПРОЕКТОВ
[[div class="cicapoco-header"]]
[[div class="img-resize"]]
[[image URL_СЮДА]]
[[/div]]
++++* УВЕДОМЛЕНИЕ ОТ ЦЕНТРАЛЬНОГО УПРАВЛЕНИЯ РАЗВЕДЫВАТЕЛЬНЫМИ ОПЕРАЦИЯМИ И РЕАЛИЗАЦИЕЙ ПРОЕКТОВ
----
Текст
[[/div]]
⚠️ ПРЕДУПРЕЖДЕНИЕ ⚠️
[[div class="content-warning"]]
⚠️ **ПРЕДУПРЕЖДЕНИЕ** ⚠️
Текст
[[/div]]
Обычный блок с цитатой
[[div class="blockquote"]]
Текст
[[/div]]
Дополнительный блок с цитатой
[[div class="alt-blockquote"]]
Текст
[[/div]]
Минималистичный блок с цитатой
[[div class="lightweight"]]
Текст
[[/div]]
Красивый блок с цитатой
[[div class="card-block"]]
Текст
[[/div]]
Заголовок записи
Для использования перед записями интервью или журналами исследований
[[div class="log-header"]]
+++* Заголовок
----
Текст
[[/div]]
Блок отчёта
Для внутренней документации
[[div class="report-box"]]
+++* Заголовок
----
Текст
[[/div]]
Блок отчёта, но с тенью
[[div class="report-box realistic-shadow"]]
Альтернативные блоки отчёта:
[[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="o5-box"]]
Текст
[[/div]]
Фальшивый блок "Исходник страницы"
[[div class="faux-source"]]
Текст
[[/div]]
Блок с закадровым текстом
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]]
ПРЕДУПРЕЖДЕНИЕ: БЛОК УВЕДОМЛЕНИЯ
Для вызова сердечного приступа у читателя
[[div class="warning-notice"]]
+* ПРЕДУПРЕЖДЕНИЕ
----
Текст
[[/div]]
Субъект: Блок дневника
Для аутентичности
[[div class="journal"]]
Текст
[[/div]]
Учтите: Этот блок не позволяет делать двойной перенос строки. Для этого вам необходимо сделать следующее:
1. После каждой строки текста нажать enter.
2. На новой строке напишите [[lines 1]].
3. Снова нажмите enter и можете продолжать.
Блок в виде SMS 😳
[[div class="sms-message"]]
Текст
[[/div]]
Если SMS-блок один, вставьте код ниже после него.
Если SMS-блоков несколько, вставьте код ниже после последнего блока.
[[div style="clear: left;"]]
[[/div]]
В каждом примере особого форматирования представлено:
- Визуальное оформление.
- Синтаксис для использования.
Красный текст
Прививка распространена.
[[span class="rev-red"]] Текст [[/span]]
Зелёный текст
Устаревшая информация помечается зелёным.
[[span class="rev-green"]] Текст [[/span]]
Синий текст
Прививка завершена!
[[span class="rev-blue"]] Текст [[/span]]
Жёлтый текст
Загрузка остановлена. Обновить?
[[span class="rev-yellow"]] Текст [[/span]]
Текст в компьютерном терминале
[РЕДАКТИРОВАНИЕ]
[ИСКЛЮЧЕНИЕ]
[ДАННЫЕ УТЕРЯНЫ]
[[span class="terminal-span"]] [ТЕКСТ] [[/span]]
Мигающий текстовый курсор
_
или
|
[[span class="blinkbar"]]|[[/span]]
Особый блок с заголовком 1
ЗАГОЛОВОК
ПОДЗАГОЛОВОК
[[div class="lite-heading"]]
----
++* ЗАГОЛОВОК
+++* ПОДЗАГОЛОВОК
----
[[/div]]
Особый блок с заголовком 2
МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
[[div class="lite-heading"]]
----
++* МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
----
[[/div]]
Альтернативный показ изображения

[[div class="image-showcase block-center"]]
[[=image АДРЕС_СЮДА]]
[[/div]]
Красивый разделитель сцен/секций

[[=image АДРЕС_СЮДА class="scene-break"]]
Навигационные элементы для ListPages
Следующая итерация ▷
◁ Назад
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[[>]]
**Следующая итерация ▷**
[[/>]]
[[/div]]
[[div class="listPagesNav-prev"]]
**◁ Назад**
[[/div]]
[[/div]]
Исчезающий градиент
[[div class="fade-away"]]
[[/div]]
Конец страницы
[[div class="footing"]]
[[/div]]
Блок с связанными статьями
См. также:
[[div class="related-flex"]]
[[div class="related"]]
**__См. также:__**
* **[[[ссылка-на-страницу|Пользовательский текст]]]**
[[/div]]
[[/div]]
Навигация по циклу
« Предыдущая статья | Текущая статья | Следующая статья »
[[div class="series-nav"]]
« Предыдущая статья | [[size 120%]]Текущая статья[[/size]] | Следующая статья »
[[/div]]
ЗАГОЛОВОК / ПРЕДУПРЕЖДЕНИЕ
ПОДЗАГОЛОВОК / ТОЛЬКО ЛИЧНО СОТРУДНИКАМ ПОДРАЗДЕЛЕНИЯ / ТИП ДОКУМЕНТА
Данный файл требует уровня допуска Уровень-X/XXXX.
Неавторизованный доступ запрещён.
НОМЕР ОБЪЕКТА / НАЗВАНИЕ ПРОЕКТА
Исходный код
----
[[div class="orderwrapper"]]
[[div class="council"]]
[[/div]]
[[div class="ordertitle"]]
+* ЗАГОЛОВОК / ПРЕДУПРЕЖДЕНИЕ
[[/div]]
[[div class="orderdescription"]]
_
+* ПОДЗАГОЛОВОК / ТОЛЬКО ЛИЧНО СОТРУДНИКАМ ПОДРАЗДЕЛЕНИЯ / ТИП ДОКУМЕНТА
Данный файл требует уровня допуска Уровень-X/XXXX.
Неавторизованный доступ запрещён.
[[/div]]
[[div class="itemno"]]
+* НОМЕР ОБЪЕКТА / НАЗВАНИЕ ПРОЕКТА
[[/div]]
[[/div]]
----
Что это?
Это тема, созданная Lt Flops. Она является эстетическим улучшением Sigma-101, на которой основана.
Используйте данную тему, только если понимаете, что вы делаете.
Данная тема несовместима с Black Highlighter, BASALT или Sigma+.
Как использовать
Для подключения этой темы, пожалуйста, скопируйте данный синтаксис и вставьте его в самое начало своей статьи:
[[include theme:flopstyle]]
Если вы хотите использовать эту тему с другой темой, основанной на Sigma-9 или Sigma-10, сначала вставьте Flopstyle, а потом уже выбранную вами тему. Также может потребоваться тонкая настройка визуальной темы.
Прошу также учесть, что данная тема включает в себя следующие компоненты:
- Набор визуальных элементов Croqstyle CSS за авторством Croquembouche
- Визуальный элемент Fade In (с параметром speed=1) за авторством Croquembouche
- Визуальный элемент Toggle Sidebar за авторством EstrellaYoshte
Эта тема была создана с учётом следующих компонентов…
Центрированный заголовок Sigma-9
Для использования этого компонента, вставьте код ниже после подключения Flopstyle. Если ваша статья использует тему на базе Sigma-9 помимо Flopstyle, вставьте этот код после подключения второй темы:
[[include component:centered-header-sigma-9]]
Вы можете по своему желанию изменить заголовок, подзаголовок, их цвета и логотип в хедэре. Просто вставьте этот код после include с компонентом заголовка, а затем отредактируйте соответствующим образом:
[[module CSS]]
:root {
--header-title: "ЗАГОЛОВОК";
--header-subtitle: "ПОДЗАГОЛОВОК";
--titleColor: цвет_заголовка;
--subtitleColor: цвет_подзаголовка;
--lgurl: url(АДРЕС_ЛОГОТИПА);
}
[[/module]]
Плашка Flops
[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]
Sidebox'ы
Адаптированы из темы Penumbra за авторством EstrellaYoshte.
Sidebox'ы - встроенные компоненты, которые бывают двух типов:
- authorbox
- sidebox
Инструкции по использованию зависят от типа.
- authorbox не отображается на экранах с шириной меньше width=1200px, включая мобильные устройства. Его можно использовать для отображения информации о статье и авторе.
- sidebox сворачивается за границу страницы на экранах с шириной меньше width=1200px. На таких экранах он доступен при нажатии на него или наведении курсора. Его можно использовать для отображения дополнительной информации.
Учтите эти ограничения перед тем как добавлять эти компоненты в свою статью — большая часть аудитории SCP вики просматривает сайт с мобильных устройств.
1. Authorbox
(См. верхний левый угол страницы)
По умолчанию, authorbox включён на всех страницах, что используют Flopstyle: LITE. Если вы хотите убрать его, замените:
[[include theme:flopstyle]]
На это:
[[div style="display: none;"]]
[[include theme:flopstyle]]
[[/div]]
Альтернатива 1: После удаления authorbox, вы можете заменить его собственной версией, которая будет отображать ту информацию, которую вы хотите. Этот функционал может быть особенно полезен для совместных, переписанных или переведённых статей. Для примера, вот код для создания authorbox:
[[div class="anchor"]]Устанавливает позицию authorbox'а.
[[div class="authorbox"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= **Автор:** %%created_by_linked%% ||
||~ Опубликовано %%created_at|%d %b %Y%% ||
[[/module]]
|| Опциональный текст ||
[[/div]]
[[/div]]Устанавливает конец якоря.
По умолчанию, authorbox использует ListPages для автоматического отображения метаданных. В теории, можно было бы скопировать часть authorbox с ListPages на любую страницу на вики и эти поля отображали бы корректную информацию. Вы, конечно же, можете менять эти поля как вам угодно.
Вы также можете отредактировать свой пользовательский authorbox, чтобы в нём отображался специфический для вашей страницы текст. Например, заметка для читателей.
Обратитесь к левой части этой страницы за примером рабочего authorbox.
Внутри authorbox вы можете использовать только flavorbox и никакие другие блоки.
Альтернатива 2: Если хотите, вы можете переместить authorbox на правую часть страницы. Для этого вставьте код ниже в модуль CSS в начале вашей статьи:
.authorbox {
right: unset;
left: 103.5%;
padding: 0 0 0 1em;
}
Если вы используете это на своей странице, я настоятельно рекомендую не добавлять дополнительных sideboxов на той же странице, иначе всё может поломаться.
Если вы планируете добавить на свою страницу sidecontainerы, я настоятельно рекомендую использовать стандартное расположение authorbox, по той причине, что когда правосторонний authorbox используется вместе с sidecontainer, происходит визуальное наложение элементов, что будет выглядеть очень некрасиво. Это может запутать читателей, так что лучше оставить всё на безопасной стороне.
2. Sidebox
sidebox по умолчанию выключен. Создать его можно следующим образом:
[[div class="limit"]] Устанавливает начало якоря.
[[div class="anchor"]] Устанавливает позицию sidebox'а.
[[div class="sidebox"]]
Тут пишется желаемый текст для sidebox.
[[/div]]
[[/div]]
А тут уже текст, рядом с которым должен висеть sidebox.
[[/div]] Устанавливает конец якоря.
Я рекомендую вручную ставить перенос строки после текста, рядом с которым висит sidebox. Это можно сделать, добавив [[lines 1]] на пустой строке. sidebox появится возле этого текста, когда вы прокрутите мимо него.
С определённой хитростью вполне возможно
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.
создать несколько блоков sidebox
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. Без limit, anchor заставит sidebox висеть на протяжении всей статьи, после того как вы прокрутите мимо точки начала якоря.
Прочие изменяемые секции
При надобности вы можете также изменить любые из этих свойств CSS, чтобы они лучше подходили под ваши нужды. Этот список не покрывает все стили Flopstyle, однако он является хорошей отправной точкой.
Изменить свойства компонента Info
.info-container {
/* = Изменяйте цвет в соответствии с темой сайта = */
--barColour: цвет_полосы;
}
#u-author_block {
display: none;
}
Изменить цвет подзаголовка lite-heading
.lite-heading h3 {
/* = Изменяйте цвет в соответствии с темой сайта = */
color: цвет_lite_heading;
}
Изменить цвет левого края card-block и sidebox
:root {
--accentColor: акцентный_цвет;
}
Изменить логотип простого блока-предупреждения
(Изображение должно быть прозрачным)
.warning-notice {
background-image: url(АДРЕС_ЛОГОТИПА);
background-size: 400px;
}
Изменить логотип продвинутого блока-предупреждения
(Изображение должно быть прозрачным)
.council {
background-image: url(АДРЕС_ЛОГОТИПА);
}
Изменить фон навигации по циклу
.series-nav {
background:
linear-gradient(
to bottom right,
hsla(0, 0%, 100%, 1),
ЦВЕТ_СЮДА);
}
Скрыть заголовок страницы
#page-title {
display: none;
}
Скрыть футер со сносками
.footnotes-footer {
display: none;
}
Цвета темы
Предупреждение: Эта тема основана на Black Highlighter. Однако вам не надо дополнительно подключать Black Highlighter в коде статьи. Узнать больше о BHL можно здесь.
На этой вики:
[[include theme:dustjacket]]
Примеры
Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.
Альтернативную горизонтальную линию можно создать, обернув "-----" в div с классом "fancyhr":
[[div_ class="fancyhr"]]
-----
[[/div]]
В результате получится это:
сюда вписывается содержимое
[[/div]]
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.
Первый заголовок
Второй заголовок
Третий заголовок
Четвёртый заголовок
Пятой заголовок
Шестой заголовок
- Вкладка
- Вкладка
- Большая вкладка
- Это пустая вкладка с длинным названием. Очень длинным. Очень очень длинным.
- Пустая вкладка
- Пустая вкладка
- Пустая вкладка
- Пустая вкладка
- Пустая вкладка
Это вкладки.
Смотри, здесь больше текста.
Ещё больше.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это цитата, её можно создать поставив "> " в начале строки.
Больше текстаЭто горизонтальная линия.
Вложенная цитата.
Это | Таблица |
---|---|
Ты уже должен знать | как это |
сделать |
Шрифт тела статьи - Alegreya, потому что Texturina не поддерживает кириллицу.
Шрифт названий и заголовков - EB Garamond.
Моноширный шрифт - 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 - 1rem); 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; } }