Eigenvector Theme

See also: SCPedia Theme

Rating:

This is a Bedrock-based theme created by EstrellaYoshte, as an adaptation of 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]]

---

Image.

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

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

This is a tab view.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

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

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

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

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

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

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

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

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

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.

Empty Tab

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

Footnotes

1. This is a footnote.

oheader div

oheader red div

oheader orange div

oheader pink div

oheader storm div

[[div class="wikibox"]]

---

Horizontal rule inside wikibox div.
capt grey span
capt storm span
capt lavender span
capt cyan span

This is a	table
inside	wikibox

s-title span

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

s-title span again

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.

---

The header font is Libertinus Serif.

The body font is Roboto.

The monospace font is Inconsolata.

Source Code

+ show block

@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 1.5rem;
}
 
.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: 0.5rem 0 0.5rem 1rem;
    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;
}

: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;
}