eigenmachine theme


Примечание:

Эта страница содержит визуальную тему, используемую на данной вики.

Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы):

 [[include theme:eigenmachine]]

Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.

рейтинг: 
0/0%
This is a variant of the Eigenvector theme by Пользователь 'EstrellaYoshte' не существует, created by Пользователь 'Billith' не существует for general use. Its basic flavor is associated with P.M. Center SCPs, but can be customized to fit a wide variety of needs.To import this theme to your page, put the following text anywhere inside it:

[[include :scp-wiki:theme:bedrock]]
[[include :scp-wiki:theme:eigenmachine]]

Insert the following parameter for deletions mode:

[[include :scp-wiki:theme:eigenmachine delete=a]] (See it in action)

The Basics

PM.svg

Image.

A horizontal rule can be created with 5 hyphens "- - - - -" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.Titles can be created by putting between one and six plus "+" at the start of the line.

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.

More text


That's a horizontal rule

Nested blockquotes

Keep on nestin'

As much as ya like

asystemof
cellsinterlinked
withincellsinterlinked
within one stem1

Custom Divs/Spans

This theme includes an expansion of the oheader/capt classes from Eigenvector, with new colors and details:

div class oheader

div class capt

div class logger is used to wrap conversations. It is identified by a faint radial pattern in the background:

Пользователь 'billith' не существует

(555-0123)


horizontal rules also get special coloration!

[CONTACT INFORMATION REMOVED]


please stop texting me about your new theme.

Пользователь 'billith' не существует

(555-0123)


:(

[[div class="wikibox"]]

PMW.svg
This image is inside a 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

this is atable
insidewikibox
span class s-title Good for subsections.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.

This section uses 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.

This section uses 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.

Other Divsrazer, like "raiser", 'cos it's raised up:

div class razer

inter, which changes text color with color class:

div class inter

div class inter purp

lightpanel and darkpanel, customizable alternating divs:

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

Color class also affects these:

div class lightpanel bubblegum

On their own, space divs change space to fit the need, nothing more:

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.

Add color/size/orientation/div classes to customize each of these in different ways, try experimenting:

Memos

For use in Department of Deletions articles:

div class deletions_memo

For use in articles featuring the Underwatch Council:

div class underwatch_memo

If reduced motion is enabled, this animation will be replaced with a still image. For use in anything you want:

div class custom_memo

Affected by --custom-header, --custom-logo, and --custom-color. You can also use the above color-modifying classes. For example:

div class custom_memo deep

Advanced Technology

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
рейтинг: 
0/0%

Вставленная страница ":scp-wiki:component:author-label-source" не существует (создать её сейчас)

also comes with custom styling for the author label component! Toggle the box manifesting on mouseover with --label-maker (see ROOT VARIABLES for more info).

Вставленная страница ":scp-wiki:component:author-label-source" не существует (создать её сейчас)

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 any contained image 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.

asterisk_scp.svg

asterisk_scp.svg

[[collapsible show="view asterisks" hide="close"]] included options: Use additional class spinner (affected by --scale1 and --loop2), to add a spinning effect (surround with container class contain-aster):

asterisk_blackbox.svg

Use additional class rotator (affected by --scale2 and --loop2), to add a rotating effect (surround with container class contain-aster):

asterisk_cube.svg

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:
variabledefaultunit
--scale3seconds (s)
Dictates duration of fade-in1, fade-out1, spinner, rotator, and blinkenlights
--scale21seconds (s)
Dictates duration of fade-in2 and fade-out2
--scale32seconds (s)
Dictates duration of fade-in3 and fade-out3
--delay0seconds (s)
Determines timed delay of fade-in1, fade-out1, spinner, and rotator
--delay23seconds (s)
Determines timed delay of fade-in2 and fade-out2
--delay35seconds (s)
Determines timed delay of fade-in3 and fade-out3
--loop1count (accepts infinite, unset, decimals, & more)
Dictates the number of times fade-in1, fade-out1, rotator, and spinner will repeat before stopping
--loop21count (accepts infinite, unset, decimals, & more)
Dictates the number of times fade-in2 andfade-out2 will repeat before stopping
--loop31count (accepts infinite, unset, decimals, & more)
Dictates the number of times fade-in3 and fade-out3 repeat before stopping
--light-color237, 237, 237RGB values
Sets the background of the lightpanel and the text/border color of the darkpanel
--dark-color15, 2, 16RGB values
Sets the background of the darkpanel and the text/border color of the lightpanel
--astersize50pixels (px)
Sets the size of your asterisk
--header-logoIncluded logourl("x")
Sets top-of-page logo
--logger-bgIncluded patternurl("x")
Sets the background image of logger
--backdropIncluded patternurl("x")
Sets the overall background image
--tilesize0.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-triangle0pixels (px)
Changes/Removes the triangle thingy above the author label box
--label-makerautoaccepts none, auto
Toggles the author label box showing up on mouseover
--custom-header"custom memo - your header here""text"
Sets the text of the custom_memo.
--custom-logoIncluded logourl("x")
Sets the background image of the custom_memo
--custom-color36, 31, 36RGB values
Sets the background/border colors of the custom_memo, works with all color classes above
--text-decoruppercaseany "text-transform" value
Adds additional designs to links and interactables on the article
--abstractorvisibleaccepts visible, hidden
Toggles the identity (title) of the page
to view a full list, please see the source code.

Fonts

The --header-font-primary is Poppins.

Same with class bd, titles, acs components and links.

The --body-font-primary is Zen Kaku Gothic Antique.

The --mono-font-primary is Fragment Mono. Try it in fullwidth using⠀span class wide

The alt monospace font is VT323, and is invoked with class VT323.



Структурные: визуальная_тема
версия страницы: 27, Последняя правка: 17 Сен. 2024, 05:08 (4 дня назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.