См. также: theme:scpedia, theme:eigenvector
Это - вариант темы Eigenvector от Пользователь 'EstrellaYoshte' не существует, созданный Пользователь 'Billith' не существует предназначенный для общего пользования. Базовый вариант темы ассоциируется с SCP-объектами Центра П.М., но его можно настроить под большое множество других потребностей.
Для подключения этой темы к своей статье, добавьте в неё этот текст:
[[include theme:eigenmachine]]
Добавьте этот параметр для оформления отдела удалений:
[[include theme:eigenmachine delete=a]]
(Посмотреть на неё в действии)
Добавьте этот параметр для светлого варианта темы:
[[include theme:eigenmachine light=a]]
(Посмотреть на неё в действии)
Каждая вариация предоставляет уникальный набор окрашенных блоков, не забудьте заценить их! Также в разработке находится ретро-вариант.
Основы
Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки
Это цитата, её можно создать поставив "> " в начале строки.
Больше текстаЭто горизонтальная линия.
Вложенная цитата.
Продолжаем вкладывать
Сколько душе угодно
вот | система | клеток |
---|---|---|
связанных | внутри | |
клеток | связанных | внутри |
единой таблицы1 |
Специальные блоки
Эта тема расширяет классы oheader
/capt
из Eigenvector, добавляя новые цвета и детали:
div class oheader
div class capt
Класс блоков logger
используется для оформления разговоров. Его можно отличить по едва заметному круглому узору на фоне:
Пользователь 'billith' не существует
(555-0123)
у горизонтальных линий тоже есть свои цвета!
[КОНТАКТНАЯ ИНФОРМАЦИЯ УДАЛЕНА]
пожалуйста, хватит писать мне о своей новой теме.
Пользователь 'billith' не существует
(555-0123)
:(
[[div class="wikibox"]]
Изображение внутри wikibox.
span class capt red
span class capt sandy
span class capt orange
span class capt enki
span class capt desertblue
span class capt mimosa
span class capt dark
span class capt vanta
это | таблица |
внутри | wikibox |
span class s-title
Идеален для подразделов.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque felis eu vulputate suscipit. Vestibulum dui elit, ornare eget eros ut, gravida finibus velit. Pellentesque et diam vel turpis semper ullamcorper. Integer scelerisque malesuada enim, a semper risus molestie eget. Fusce luctus ex in ante feugiat fermentum. In nec sodales nibh. Suspendisse potenti. Aenean in volutpat turpis, in dictum sapien. Quisque vehicula turpis nec ligula feugiat commodo. Maecenas ornare lorem vel commodo mattis. Sed egestas dignissim sapien nec pulvinar.
В этой секции используется div class box
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque felis eu vulputate suscipit. Vestibulum dui elit, ornare eget eros ut, gravida finibus velit. Pellentesque et diam vel turpis semper ullamcorper. Integer scelerisque malesuada enim, a semper risus molestie eget. Fusce luctus ex in ante feugiat fermentum. In nec sodales nibh. Suspendisse potenti. Aenean in volutpat turpis, in dictum sapien. Quisque vehicula turpis nec ligula feugiat commodo. Maecenas ornare lorem vel commodo mattis. Sed egestas dignissim sapien nec pulvinar.
В этой секции используется div class dashbox bubblegum medium
.
In ligula ipsum, posuere sit amet turpis in, cursus euismod tellus. Maecenas vestibulum nunc in euismod auctor. Donec ultrices tempor felis sit amet ornare. Nam nec lectus sit amet nisl bibendum condimentum. Morbi eu arcu quis mi pulvinar fringilla. Ut fringilla interdum urna, at porta sapien vulputate quis. Integer eu scelerisque urna. Morbi luctus, justo eget viverra feugiat, leo quam egestas velit, sit amet feugiat nisi nibh molestie metus. Phasellus ut blandit ex. Ut aliquam, nisl ut aliquam volutpat, sem lorem tempor mi, sit amet ultricies nunc ante eu libero. Aenean lacinia porta nisi, in finibus quam. Aliquam erat volutpat. Aliquam malesuada libero id dapibus efficitur. Cras bibendum, dolor sit amet sagittis scelerisque, lorem magna ornare purus, vel accumsan leo tortor sit amet dolor. Maecenas finibus ante eget purus ullamcorper, vel elementum purus auctor. Quisque sagittis, leo et pretium efficitur, orci nulla interdum enim, in dignissim enim quam in neque.
Другие блоки
razer
, типа как "raiser", потому что как бы поднимает:
div class razer
inter
, который меняет цвет текста в зависимости от класса цвета:
div class inter
div class inter purp
lightpanel
и darkpanel
— настраиваемые альтернативные блоки:
div class lightpanel
background color --light-color
font color --dark-color
link color --dark-link
div class darkpanel
background color --dark-color
font color --light-color
link color --light-link
Классы цветов на них тоже работают:
div class lightpanel bubblegum
Сами по себе, блоки space
просто изменяют пространство под нужды, не более:
Lorem ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Multum refert patienti medicum imitari, sed tempus edax et dolorosum, quia nemo pulchrius opus facit quam lucrum. Ludere velit, cupiditate velit obcaecati. Errat. Item hoc est "Lorem Ipsum", sed per interpretem centies currite. Cogitavi modo te scire velle. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Добавляйте классы цвета/размера/направления/блоков чтобы настраивать вышеупомянутые элементы как вам надо. Можете поэкспериментировать:
Плашки
Для использования в статьях Отдела удалений:
div class deletions_memo
Для использования в статьях с участием Совета Подсмотрителей:
div class underwatch_memo
Если включена функция минимизации анимаций, гифка на фоне заменится на статичное изображение.
Для использования в чём угодно:
div class custom_memo
Для редактирования содержимого используйте переменные --custom-header
, --custom-logo
, и --custom-color
. Также можно использовать классы цветов. Пример:
div class custom_memo deep
Продвинутые штучки
Fading
add classes fade-in1
, fade-in2
, and fade-in3
to make individual elements fade in on load or interaction.
Likewise, fade-out1
, fade-out2
, and fade-out3
can be used to do the opposite, though fade-out1
shares --scale1
, --delay1
and --loop1
with fade-in1
, so keep that in mind (See below for more info).
WARNING: If you want to blink an element repeatedly, use class blinkenlights
!
If reduced motion is enabled, this animation will not play.
Label
Cursor (desktop only)
The standard cursor is the arrow. Certain features, by default, have different cursors. For example:
This should be a crosshair. |
---|
This should be an hourglass. |
Customize using cursor classes:
Asterisks*
* is not actually an asterisk.
Asterisks are used in place of/in conjunction with horizontal rules to separate sections of an article. For example, you might use these outside of divs, and horizontal rules inside. They make good icons and loading graphics as well.
Placing an image inside div class asterisk
will format said image to appropriate size, which you can also set with --astersize
. It functions as a wrapper for certain animations appended to the div. Use supplementary class inverse
to invert the asterisk for darker palettes.
Use additional class spinner
(affected by --scale1
and --loop2
), to add a spinning effect (surround with container class contain-aster
):
Use additional class rotator
(affected by --scale2
and --loop2
), to add a rotating effect (surround with container class contain-aster
):
Use responsibly. If reduced motion is enabled, these animations will not play.
Root Variables
To change a root variable, add a CSS module to your article like so.
[[module CSS]]
[[/module]]
Then add a :root
pseudo-class.
[[module CSS]]
:root {
}
[[/module]]
And add the appropriate variable, along with the value you'd like to use.
[[module CSS]]
:root {
--variable-name: value;
}
[[/module]]
the most relevant root variables:
variable | default | unit |
---|---|---|
--scale | 3 | seconds (s) |
Dictates duration of fade-in1 , fade-out1 , spinner , rotator , and blinkenlights | ||
--scale2 | 1 | seconds (s) |
Dictates duration of fade-in2 and fade-out2 | ||
--scale3 | 2 | seconds (s) |
Dictates duration of fade-in3 and fade-out3 | ||
--delay | 0 | seconds (s) |
Determines timed delay of fade-in1 , fade-out1 , spinner , and rotator | ||
--delay2 | 3 | seconds (s) |
Determines timed delay of fade-in2 and fade-out2 | ||
--delay3 | 5 | seconds (s) |
Determines timed delay of fade-in3 and fade-out3 | ||
--loop1 | 1 | count (accepts infinite, unset, decimals, & more) |
Dictates the number of times fade-in1 , fade-out1 , rotator , and spinner will repeat before stopping | ||
--loop2 | 1 | count (accepts infinite, unset, decimals, & more) |
Dictates the number of times fade-in2 andfade-out2 will repeat before stopping | ||
--loop3 | 1 | count (accepts infinite, unset, decimals, & more) |
Dictates the number of times fade-in3 and fade-out3 repeat before stopping | ||
--light-color | 237, 237, 237 | RGB values |
Sets the background of the lightpanel and the text/border color of the darkpanel | ||
--dark-color | 15, 2, 16 | RGB values |
Sets the background of the darkpanel and the text/border color of the lightpanel | ||
--astersize | 50 | pixels (px) |
Sets the size of your asterisk | ||
--header-logo | Included logo | url("x") |
Sets top-of-page logo | ||
--logger-bg | Included pattern | url("x") |
Sets the background image of logger | ||
--backdrop | Included pattern | url("x") |
Sets the overall background image | ||
--tilesize | 0.2 (Base) 45 (Deletions) | percent |
Sets the size of the --backdrop . Set to 100 for full size, anything less will repeat | ||
--header-title | "P.M. CENTER" | "text" |
Sets top-of-page header title | ||
--header-subtitle | "MULTIDISCIPLINARY STUDIES" | "text" |
Sets top-of-page header subtitle | ||
--author-triangle | 0 | pixels (px) |
Changes/Removes the triangle thingy above the author label box | ||
--custom-header | "custom memo - your header here" | "text" |
Sets the text of the custom_memo . | ||
--custom-logo | Included logo | url("x") |
Sets the background image of the custom_memo | ||
--custom-color | 36, 31, 36 | RGB values |
Sets the background/border colors of the custom_memo , works with all color classes above | ||
--text-decor | uppercase | any "text-transform" value |
Adds additional designs to links and interactables on the article | ||
--abstractor | visible | accepts visible , hidden |
Toggles the identity (title) of the page |
to view a full list, please see the source code. |
---|
Шрифты
--header-font-primary
— Roboto, потому что Poppins не поддерживает кириллицу.
А ещё класс bd, заголовки, компоненты СКА и ссылки.
--body-font-primary
— Zen Kaku Gothic Antique.
--mono-font-primary
— Fragment Mono
. Также доступен полноширный формат при использовании⠀span class wide
Альтернативный моноширный шрифт — Chixa, потому что VT323 не поддерживает кириллицу. Активируется так же, как и в оригинале — при помощи класса VT323
.