Eigenvector Theme

Link to article: Eigenvector Theme.

@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css');

@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Aeigenvector/1');

@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Aeigenvector/2');

font-family: var(--header-font);font-size: 1.25em;

```
pseudocrumbs
```
```
oheader
```
```
oheader
```
```
red
```
```
oheader
```
```
orange
```
```
oheader
```
```
pink
```
```
oheader
```
```
storm
```
```
wikibox
```
```
wikibox
```
```
capt
```
```
grey
```
```
capt
```
```
storm
```
```
capt
```
```
lavender
```
```
capt
```
```
cyan
```
```
s-title
```
```
s-title
```

[[iftags +theme]]
[[module css]]
@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css');
[[/module]]

[[div class="pseudocrumbs"]]
//See also: [[[theme:scpedia|SCPedia Theme]]]//
[[/div]]

[[>]]
**Rating:**
[[module Rate]]
[[/>]]

This is a [[[theme:bedrock|Bedrock]]]-based theme created by [[*user EstrellaYoshte]], as an adaptation of [https://www.mediawiki.org/wiki/Skin:Vector/2022 MediaWiki Vector 2022] skin.

To import this theme to your page, put the following text anywhere inside it:

> {{@@[[include :scp-wiki:theme:bedrock]]@@}}
> {{@@[[include :scp-wiki:theme:eigenvector]]@@}}
Insert the following parameter for dark mode:
> {{@@[[include :scp-wiki:theme:eigenvector darkmode=a]]@@}}
------

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme:scpedia/raisa.png|caption=Image.|width=240px]]

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.

[[collapsible show="Collapsible - Click me" hide="Collapsible - Click me"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@
~~~~

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.[[footnote]] This is a footnote. [[/footnote]]

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.
[[/tab]]

[[tab Longer Tab]]
This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.
[[/tab]]

[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

@@ @@

> 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 ||

[[footnoteblock]]

[[div class="oheader"]]
{{oheader}} div
[[/div]]
[[div class="oheader red"]]
{{oheader red}} div
[[/div]]
[[div class="oheader orange"]]
{{oheader orange}} div
[[/div]]
[[div class="oheader pink"]]
{{oheader pink}} div
[[/div]]
[[div class="oheader storm"]]
{{oheader storm}} div
[[/div]]

[[div class="wikibox"]]
= {{**@@[[div class="wikibox"]]@@**}}

[[image https://scp-wiki.wdfiles.com/local--files/estrellayoshte/u.png]]

----
Horizontal rule inside {{wikibox}} div.
[[span class="capt grey"]]{{capt grey}} span[[/span]]
[[span class="capt storm"]]{{capt storm}} span[[/span]]
[[span class="capt lavender"]]{{capt lavender}} span[[/span]]
[[span class="capt cyan"]]{{capt cyan}} span[[/span]]
||This is a ||table ||
||inside || wikibox ||

[[/div]]

[[span class="s-title"]]s-title span[[/span]]

{{oheader}} and {{capt}} class is colored by the additional {{grey, lavender, green, pink, cyan, orange, red, jean}} and {{storm}} class.

[[span class="s-title"]]s-title span again[[/span]]

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. 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.

~~~~

------

[[=]]
[[span style="font-family: var(--header-font);font-size: 1.25em;"]]**The header font is Libertinus Serif.**[[/span]]

The body font is Roboto.
@@ @@
{{The monospace font is Inconsolata.}}
[[/=]]

+ Source Code
[[collapsible]]
[[code type="CSS"]]
@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Aeigenvector/libertinus-serif.css');
@import url('https://api.fonts.coollabs.io/css2?family=Roboto&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Inconsolata:wght@400;700&display=swap');

:root {
    --basalt-primary-color: 255,255,255;
    --basalt-secondary-color: 248,249,250;
    --basalt-tertiary-color: 200,204,209;
    --basalt-main-text-color: 0,0,0;
    --basalt-bright-element-color: 51,102,204;
    --basalt-dark-element-color: 121,92,178;
    --basalt-alternate-color: 250,167,0;
    --basalt-overtone: 32,33,34;
    --basalt-undertone: var(--basalt-bright-element-color);

    --vector-midtone: 234,236,240;
    --link-active-color: var(--basalt-alternate-color);
    --link-newpage-color: 211,51,51;

    --header-font-primary: 'Libertinus Serif';
    --UI-font: var(--body-font);
    --body-font-primary: 'Roboto';
    --mono-font-primary: 'Inconsolata';
    --base-font-size: 0.975rem;

    --header-logo: url(https://scp-wiki.wdfiles.com/local--files/theme:scpedia/raisa.png);
    --header-subtitle: "Source - Catalog - Profile";
    --title-size: 1.75rem;
    --subtitle-size: 1.15rem;
    --header-background-color: var(--basalt-background-color);
    --header-border-color: var(--header-background-color);
    --header-UI-font-size: calc(var(--true-font-size)*0.875);
    --header-UI-dropdown-font-size: calc(var(--header-UI-font-size) * 1.125);
    --user-button-width: 3.175rem;

    --side-bar-link-color: var(--link-color);
    --side-bar-resources-background-color: var(--basalt-alternate-color), 0;

    --main-content-width: 64rem;
    --main-content-top-margin: 0.5rem;
    --main-content-side-margin: 1.5rem;
    --main-content-bottom-margin: 1rem;

    --h-border-color: 172,172,172;
    --title-border-color: var(--h-border-color);
    --hr-color: var(--h-border-color);
    --blockquote-border-color: var(--vector-midtone);
    --image-caption-background-color: var(--basalt-secondary-color);
    --footnote-background-color: var(--basalt-background-color);

    --bottom-area-background-color: var(--basalt-background-color);
    --bottom-area-padding: var(--true-font-size));
    --license-area-divider-thickness: 0.05rem;
    --license-area-logo-size: 3.75rem;
}

a:not(#header a, #side-bar a):active { color: rgb(var(--link-active-color)); }

#header h1 a span { line-height: 0.95; }
#top-bar div[class*="top-bar"] > ul > li > a {
    text-transform: initial;
}

/*------- Top Bar -------*/
#top-bar div[class*=top-bar] ul li ul {
    border-block-end: solid 0.05rem rgb(var(--general-border-color));
    border-inline-end: solid 0.05rem rgb(var(--general-border-color));
    box-sizing: border-box;
}

/*------- Side Bar -------*/

#side-bar {
    padding: 0.325rem 0.875rem;
}
:is(#side-bar, #interwiki) .heading {
    background-color: transparent;
    padding: 0.125em 0;
    text-align: left;
    text-transform: initial;
    font-weight: normal;
    font-size: .775em;
    font-family: var(--UI-font);
    color: inherit;
    border-bottom: solid 0.05rem rgb(var(--general-border-color));
}
:is(#side-bar, #interwiki) .menu-item a {
    padding: 0.275em;
}

/*------- Page Tags -------*/

#main-content > .page-tags {
    border: solid 0.05rem rgb(var(--general-border-color));
    background-color: rgb(var(--basalt-secondary-color));
    padding: 0.325rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
#main-content > .page-tags::before {
    content: "Tag";
    font-size: 0.75em;
    font-weight: bold;
    background-color: rgb(var(--vector-lavender));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .75em;
    margin-inline-end: 0.75em;
}
#main-content > .page-tags > span {
    align-items: center;
    width: 100%;
    padding-top: 0;
}
#main-content > .page-tags > span a {
    flex-grow: 0;
    border-radius: 0;
}

/*------- Page Options -------*/

#page-info { color: rgb(var(--basalt-sub-text-color)); }
#page-options-container {
    padding: 0.325rem 0.475rem 0.475rem;
    background-color: rgb(var(--basalt-secondary-color));
    border: solid 0.05rem rgb(var(--general-border-color));
}
div[id*="page-options-bottom"] {
    --po-padding: 0.325rem;
    background: transparent;
}

/*--------------------------------*/

#page-title, .meta-title {
    font-size: 2.125em;
    border-bottom-width: 0.05rem;
}
#breadcrumbs, .pseudocrumbs {
    font-weight: normal;
    font-size: 1em;
}

div.page-rate-widget-box, div.rate-box-with-credit-button {
    border: solid 0.1em rgb(var(--general-border-color));
    padding: 0.1em;
}
div.page-rate-widget-box span.btn > a {
    border-bottom-width: 0;
}

#page-content :is(h1,h2,h3,h4,h5,h6) {
    display: flow-root;
    border-bottom: solid 0.05rem rgb(var(--h-border-color));
}
#page-content :is(h3,h4,h5,h6) {
    border-bottom-style: dotted;
    border-bottom-color: rgb(var(--general-border-color));
    font-family: var(--body-font);
    margin-bottom: 0.425em;
}
#page-content :is(h1,h2) > span { font-size: 91.25%; }
#page-content :is(h3,h4,h5,h6) > span { font-size: 77.5%; }

blockquote, div.blockquote {
    background: transparent;
    border-width: 0;
    border-left-width: 0.25rem;
    padding: 0.325rem 1.25rem;
    margin: 0.25rem auto;
}

.image-block, .scp-image-block {
    border: solid 0.05rem rgb(var(--general-border-color));
    background-color: rgb(var(--image-caption-background-color));
    padding: 0.25rem;
}
:is(.image-block, .scp-image-block) :is(.image-caption, .scp-image-caption) {
    padding: 0.25rem;
    text-align: left;
}
:is(.image-block, .scp-image-block) img {
    border: inherit;
}

hr { height: 0.05rem; }

:is(#page-content table:not(.form), table.wiki-content-table) th {
    background-color: rgb(var(--vector-midtone));
    border-color: rgb(var(--general-border-color));
    color: rgb(var(--basalt-main-text-color));
    font-family: var(--body-font);
}
:is(#page-content table:not(.form), table.wiki-content-table) td {
    background-color: rgb(var(--basalt-secondary-color));
}

.hovertip .content .footnote::before, .hovertip .content .reference::before {
    content: none;
}
.hovertip .content .footnote .f-heading, .hovertip .content .reference .r-heading {
    background-color: transparent;
    color: inherit;
    font-family: var(--header-font);
    border-bottom: solid 0.05rem rgb(var(--h-border-color));
    width: auto;
    padding: 0;
    position: static;
}
.hovertip .content .footnote .f-content, .hovertip .content .reference .r-content {
    padding-left: 0;
    margin: 0.125rem 0 0;
}

.bibitems, .footnotes-footer {
    padding: 0.75rem 0;
    border-left: none;
}
.bibitems::before, .footnotes-footer::before { content: unset; }
.bibitems .title, .footnotes-footer .title {
    display: flow-root;
    width: auto;
    font-family: var(--header-font);
    padding: 0;
    background-color: transparent;
    color: rgb(var(--basalt-main-text-color));
    font-size: 1.6em;
    text-transform: capitalize;
    font-weight: bold;
    border-bottom: solid 0.05rem rgb(var(--h-border-color));
}
.bibitems .bibitem, .footnotes-footer .footnote-footer {
    margin-inline-start: 1.25rem;
    font-size: 0.875em;
}
.footnotes-footer .footnote-footer > a:first-child {
    inset-inline-end: calc(100% + 0.175ch);
    inset-block-start: 0.05em;
}
a.footnoteref::before, a.bibcite::before { content:"["; }
a.footnoteref::after, a.bibcite::after  { content:"]"; }


/*------------------------------------*/
/*----DESKTOP QUERY----*/
/*------------------------------------*/

@media not all and (max-width: 1024px) {
    :root {
        --side-bar-button-width: 1.5rem;
        --side-bar-width: 16rem;
        --main-content-side-margin: 2.5rem;
    }

    #header {
        position: relative;
    }

    #content-wrap {
        display: flex;
        grid-gap: var(--main-content-side-margin);
        margin-block: .5rem 2.75rem;
    }
    #content-wrap::after {
        content: "";
        display: block;
        height: 100%;
        flex-basis: calc((var(--side-bar-width)*1.75 - var(--main-content-side-margin))/4);
        flex-shrink: 3;
    }

    #side-bar::before, #side-bar::after { display: none; }
    #side-bar {
        --scrollbar-track-color: var(--basalt-background-color);
        --scrollbar-thumb-color: var(--basalt-background-color);
        position: sticky;
        height: calc(100vh - var(--main-content-top-margin)*2);
        top: var(--main-content-top-margin);
        margin-top: var(--main-content-top-margin);
        margin-bottom: var(--main-content-bottom-margin);
        margin-left: 0.625rem;
        --true-font-size: 0.8rem;
        flex-shrink: 0;
        z-index: 8;
        transition: scrollbar-color 0.125s linear;
    }
    #side-bar:is(:hover, :focus-within) {
        --scrollbar-track-color: var(--basalt-tertiary-color);
        --scrollbar-thumb-color: var(--basalt-undertone);
    }

    #main-content {
        width: initial;
        max-width: min(var(--main-content-width), calc(100% - var(--side-bar-width) - var(--main-content-side-margin)*2));
        flex-basis: var(--main-content-width);
    }
}

/*---------------------------------*/
/*----MOBILE QUERY----*/
/*---------------------------------*/

@media only screen and (max-width: 1024px) {
    #header h1 {
        grid-column: 1/5;
    }
    #header h1 a {
        margin: 0 auto;
    }
}

/*---------------------------------*/
/*----PRINT----*/
/*---------------------------------*/
body.print-body #content-wrap::after { content: unset; }

/*-------------------------------------*/
/*----CUSTOM SYNTAX----*/
/*-------------------------------------*/

:root {
    --vector-grey: 221,221,221;
    --vector-lavender: 204,204,255;
    --vector-green: 60,179,113;
    --vector-pink: 255,105,180;
    --vector-cyan: 119,204,255;
    --vector-orange: 255,136,34;
    --vector-red: 170,0,68;
    --vector-jean: 76,96,153;
    --vector-storm: 122,176,196;
}

.oheader {
    --active-color: var(--basalt-tertiary-color);
    background-color: rgb(var(--active-color),0.06);
    border-color: rgb(var(--active-color));
    border-style: solid;
    border-width: 0.05rem 0.05rem 0.05rem 0.75rem;
    width: max(67.5%, calc(var(--main-content-width)*0.5));
    margin: 1rem auto;
    clear: both;
    padding: 0.5rem 0.875rem;
    box-sizing: border-box;
}

.capt {
    --active-color: var(--basalt-tertiary-color);
    display: flow-root;
    margin: 0.125rem 0.25rem -0.5rem;
    font-size: 1.05em;
    padding: 0.25rem;
    font-weight: bold;
    text-align: center;
    background-color: rgb(var(--active-color),0.6125);
}

.grey { --active-color: var(--vector-grey); }
.lavender { --active-color: var(--vector-lavender); }
.green { --active-color: var(--vector-green); }
.pink { --active-color: var(--vector-pink); }
.cyan { --active-color: var(--vector-cyan); }
.orange { --active-color: var(--vector-orange); }
.red { --active-color: var(--vector-red); }
.jean { --active-color: var(--vector-jean); }
.storm { --active-color: var(--vector-storm); }

.wikibox {
    background-color: rgb(var(--basalt-secondary-color));
    border: solid 0.05rem rgb(var(--general-border-color));
    margin: .5rem 0 .5rem 1.5rem;
    padding: 0.375rem 0.5rem;
    float: right;
    clear: right;
    font-size: 0.875em;
    width: 17.75rem;
    box-sizing: border-box;
}
@media (max-width: 36rem) {
    .wikibox {
        float: none;
        clear: both;
        margin-left: auto; margin-right: auto;
    }
}
.wikibox hr {
    background-color:  rgb(var(--general-border-color));
    margin: 0.125rem -0.5rem;
}
.wikibox table {
    width: 100%;
    margin: 0;
}
.wikibox table td {
    border: none;
    padding: 0.225em;
}


.s-title {
    font-size: 1.15em;
    font-weight: bold;
    margin: 0.4rem 0;
}

/* ---- Wikimodule Integration ---- */

div.collection .collapsible-block {
    border: solid 0.05rem rgb(var(--general-border-color));
}

div.collection :is(.collapsible-block-unfolded-link, .collapsible-block-folded) a {
    background-color: rgb(var(--vector-lavender));
    color: rgb(var(--link-color));
}
#page-content .collection table { margin: 0; }
#page-content .collection th:is(.titlecolumn, .namerow) {
    border: 0.125rem solid rgb(var(--basalt-background-color));
    background-color: rgb(var(--vector-lavender));
    padding: 0.375rem;
    font-weight: normal;
}
#page-content .collection th.articlecolumn {
    background: transparent;
}
[[/code]]

[[code type="css"]]
:root {
    --header-logo: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aeigenvector/raisa-dark.png);
    --basalt-main-text-color: 248,248,248;
    --basalt-light-text-color: 255,255,255;
    --basalt-sub-text-color: 180, 183, 193;
    --basalt-primary-color: 33,34,40;
    --basalt-secondary-color: 25,29,34;
    --basalt-tertiary-color: 43,47,55;
    --basalt-undertone: 63,174,255;
    --basalt-overtone: 16,17,18;
    --basalt-bright-element-color: var(--basalt-undertone);
    --basalt-dark-element-color: 168,136,230;

    --top-bar-dropdown-background: var(--basalt-secondary-color);
    --basalt-UI-opacity: 0.75;

    --h-border-color: var(--basalt-sub-text-color);
}

:is(#page-content table:not(.form), table.wiki-content-table) th {
    background-color: rgb(var(--basalt-overtone));
}
:is(#page-content table:not(.form), table.wiki-content-table) td {
    background-color: transparent;
}
[[/code]]
[[/collapsible]]
[[/iftags]]

[[div_]]
[[module css]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Aeigenvector/1');
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aeigenvector/1
]]

>[[ift{$darkmode}gs -theme]]
>[[iftags]]
[[module css]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Aeigenvector/2');
[[/module]]
[[include :scp-wiki:component:interwiki-style
| priority=4
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aeigenvector/2
]]
>[[/iftags]]
>[[/ift{$darkmode}gs]]
[[/div]]

Eigenvector Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source