Last Frontier Theme

Look at him go!

Vivarium

Hey there! You should read some of the other stuff I made… or not!
I'm not the boss of you, do whatever you want!

More by Vivarium

Adapted by Vivarium from Yossipossi's Shattered Thoughts Theme for use on the Into the Void Hub, and articles in that setting.

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

[[include :scp-wiki:theme:last-frontier]]

Here is the typical spiel that comes with a theme page.

Look at him go!

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

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.

Collapsible!

A blockquote!

Another blockquote!

Oh my god there is another blockquote!

Make it stop… please!

Content Tab

Words

Empty Tab

Long Content Tab

So many words

So many words

So many words

So many words

So many words

So many words

So many words

So many words

So many words

So many words

Stuff In Tabs Tab

Header in the Tabber

Header in the Tabber But Smaller

Text — Link

---

Quote One

(Quote Two)

Tables	How
do	they
do this?!

/*
    Last Frontier Theme
    [2021 Wikidot Theme]
    Created by Vivarium
    Based on Shattered Thoughts Theme created by Yossipossi.
*/
 
 body {
    background-color: #150100;
}
 
/* -=- HEADER -=- */
 
#header h1 a::before {
    content: "The Beholder Program";
}
 
#header h2::before {
    content: "Re-Discovering Space.";
    text-shadow: 0rem 0rem 0.3125rem #000000;
}
 
/* -=- HEADER BACKGROUND -=- */
 
div#container-wrap {
    background: url(https://scp-wiki.wikidot.com/local--files/theme:last-frontier/Earth.jpg) top left repeat-x;
    background-size: 100%;
}
 
div#header {
    background-image: url('http://scptestwiki.wikidot.com/local--files/sigma:vivarium-test-page/ITTV_LOGO.png');
    background-size: 7.3rem;
    background-position: 3px 29px;
}
/* -=- LINKS -=- */
 
a, a.newpage {
    color: #e3647c;
}
 
a:visited {
    color: #d2647c;
}
 
/* -=- BLOCKQUOTE -=- */
 
div.blockquote,
blockquote {
    background: rgba(135, 0, 9, 0.11);
    border: 0.125rem dotted #865757;
}
 
/* -=- RATING MODULE -=- */
 
.page-rate-widget-box .rate-points,
.page-rate-widget-box > *,
.rate-box-with-credit-button {
    background-color: rgba(107, 22, 22, 255) !important;
}
 
/* -=- PAGE TITLE AND H1 -=- */
 
#page-title,
#action-area h1 {
    color: #ffffff;
    font-weight: bold;
 
}
 
/* -=- SEARCH BAR -=- */
 
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus {
    background-color: #150100;
}
 
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: #61000d;
 
}
 
/* -=- TOP BAR -=- */
 
#top-bar {
    background: linear-gradient(to right, transparent 25%, transparent 50%, #6b1616 75%, transparent 100%);
}
 
#top-bar ul li ul {
    border: 0.0625rem solid #2477ac;
}
 
#top-bar ul li a {
    color: #ffffff;
    text-shadow: 0rem 0rem 0.3125rem #000000;
}
 
#top-bar ul li:hover a,
#top-bar ul li:hover ul li a {
    background-color: #611e2c;
}
 
#top-bar ul li:hover a:hover {
    background: #8c465a;
}
 
#top-bar .open-menu a {
    background-color: #611e2c;
    border-color: #e3647c;
    color: #ffffff;
}
 
/* -=- SIDEBAR -=- */
 
#side-bar .heading {
     color: #ffffff;
}
 
#side-bar div.menu-item img {
    background: url("http://scp-wiki.wikidot.com/local--files/theme:last-frontier/Diamond.png");
}
 
#side-bar div.side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources {
    background: #2b1d1d;
    border: 0.3125rem double #000000;
    box-shadow: 0 0.125rem 0.375rem #000000;
    opacity: 0.9;
}
 
#side-bar a,
#side-bar a:visited {
    color: #ff7a98;
}
 
/* -=- TABBERS -=- */
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: #8c465a;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: #360e0b;
}
 
.yui-navset .yui-content {
    background-color: #110500;
    border: 0.125rem dotted #865757;
}
 
/* -=- USER INFO -=- */
 
#login-status,
#login-status a {
    color: #e3647c;
}
 
#account-options li a,
#account-options li a:hover {
    color: #e3647c;
}
 
#account-options ul {
    background-color: #150100;
    border: solid 0.0625rem #e3647c;
    opacity: 1.0;
}
 
/* -=- IMAGES -=- */
 
.scp-image-block .scp-image-caption {
    background-color: #394046;
}
 
/* -=- TABLES -=- */
 
table.wiki-content-table td {
    border: 0.0625rem dotted #865757;
}
 
table.wiki-content-table th {
    background-color: #394046;
}
 
/* -=- MISCELLANEOUS -=- */
 
/* Changes the top border of the tags section, which is typically colored #888, to match the theme better. */
.page-tags span {
    border-top: solid 0.0625rem #f15c7d;
}
 
/* Changes the colors of the layout in the History tab of the page, which constrasts heavily with the background theme. */
.pager a,
.pager a:hover,
.optionstd a,
.optionstd a:hover {
    background: #83303f;
    border: solid 0.0625rem #f15c7d;
}
 
/* While the page is saving and loading, there is a popup on the screen. This popup was difficult to read due to the body's properties (color being white), so this changed the background to be more thematically appropriate and legible. */
.owait,
.osuccess {
    background-color: #83303f;
    border: solid 0.0625rem #f15c7d;
}
 
/* -=- FOOTNOTES -=- */
 
.hovertip {
  background: rgba(17, 0, 5, 255) !important;
  border: solid 0.0625rem #865757 !important;
 
}
 
/* -=- MEDIA SELECTORS -=- */
 
@media screen and (max-width: 50rem) {
 
    #side-bar {
        background-color: rgba(21, 1, 0, .93);
    }
 
}

All normal life, Peter, consciously or otherwise, resent domination. If the domination is by an inferior, or by a supposed inferior, the resentment becomes stronger.

And so it goes, and so it goes
This primal thing had been indisposed
Its tomb had been sealed
Its coffin now closed

Once eternal, its end came swift
And the scales towards Order did drift
Yet Its day will come

A Paradigm Shift

---

This theme was made for the Shattered Thoughts series, beginning with SCP-3426.

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

[[include :scp-wiki:theme:shattered-thoughts]]

Below are examples of different properties of this theme.

A spooky image with a spooky caption.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

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.

Collapsible!

One Fish

Two Fish

Dead Fish

Blue Fish

Content Tab

Once I have gone, they will return to their slumber, and madness shall end until the cycle repeats.

Empty Tab

Long Content Tab

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

I thought about

Stuff In Tabs Tab

Header in the Tabber

Header in the Tabber But Smaller

Text — Link

---

Quote One

(Quote Two)

The Tables	Mason
what	do they
mean?!

Footnotes

1. Footnote

2. Footnote

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
body {
    background-color: #363940;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}
 
#content-wrap {
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
}
 
/* -=- HEADER -=- */
 
#header {
    background-image: none;
    padding-bottom: 1.875rem;
}
 
#header h1 a span, 
#header h2 span {
    display: none;
}
 
#header h1 a::before {
    color: #ffffff;
    content: "Shattered Thoughts";
    font-family: 'Open Sans', sans-serif;
    font-size: 2.3rem;
    text-shadow: 0rem 0rem 0.3125rem #000000;
}
 
#header h2::before {
    color: #ffffff;
    content: "Broken Minds";
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: bold;
    margin-left: 2.5rem;
    position: relative;
    top: 0.625rem;
}
 
/* -=- HEADER BACKGROUND -=- */
 
div#container-wrap {
    background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ashattered-thoughts/shatteredthoughtsbackground_smaller.png) top left repeat-x;
    background-size: 100%;
}
 
/* -=- LINKS -=- */
 
a, a.newpage {
    color: #0eadf7;
}
 
a:visited {
    color: #2f96ff;
}
 
/* -=- BLOCKQUOTE -=- */
 
div.blockquote,
blockquote {
    background: rgba(9, 0, 135, 0.11);
    border: 0.125rem dotted #a0c7ff;
}
 
/* -=- OWINDOWS -=- */
 
.owindow, 
.owindow h1, 
.owindow .button-bar a {
    color: #000000;
    text-shadow: none;
}
 
/* This simply changed the karma bar colors in that user info pop-up menu. No functional purpose besides it looks neat, really. */
.modal-body td img[src*="userkarma.php"] {
    filter: hue-rotate(150deg);
}
 
.owindow ::selection {
    background: #cfeaff;
}
 
/* -=- RATING MODULE -=- */
 
.page-rate-widget-box {
    box-shadow: 0.0625rem 0.0625rem 0.1875rem #000000;
    margin-top: 0.625rem;
}
 
.page-rate-widget-box .rate-points, 
.page-rate-widget-box > *,
.rate-box-with-credit-button {
    background-color: rgba(0, 0, 132, 0.4) !important;
    border: none !important;
}
 
.page-rate-widget-box .rateup a, 
.page-rate-widget-box .ratedown a, 
.page-rate-widget-box .cancel a {
    background: transparent;
    color: #ffffff;
    transition-duration: 1s;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover {
    background: rgba(226, 238, 255, 0.1);
    transition-duration: 1s;
}
 
/* For the info module on some pages. */
.modalbox {
    text-shadow: none;
    color: #000000;
}
 
/* -=- PAGE TITLE AND H1 -=- */
 
#page-content h1, 
#page-title, 
#action-area h1 {
    color: #e0ebff;
}
 
#page-title, 
#action-area h1 {
    margin: auto;
    text-align: center;
}
 
/* -=- SEARCH BAR -=- */
 
#search-top-box-input, 
#search-top-box-input:hover, 
#search-top-box-input:focus {
    background-color: #00235e;
    border-color: #333333;
    border-radius: 0.3125rem;
    color: #3f87ff;
    opacity: 0.8;
    padding: 0.125rem;
}
 
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background-color: #002970;
    border: none;
    border-radius: 0rem;
    color: #ffffff;
    background-image: none;
}
 
/* -=- TOP BAR -=- */
 
#top-bar {
    background: linear-gradient(to right, transparent 60%, #0b1d51 85%, transparent 100%);
    padding-right: 3.125rem;
}
 
#top-bar ul li a {
    border: none;
    color: #4bb1ff;
}
 
#top-bar ul li:hover a, 
#top-bar ul li:hover ul li a {
    background: rgba(0, 85, 155, 0.9);
    border: none;
    color: #ffffff;
}
 
#top-bar ul li:hover a:hover {
    background: #00559b;
    color: #e6e6e6;
}
 
#top-bar ul li:hover ul li a {
    padding-bottom: 0.0938rem;
    padding-top: 0.0938rem;
}
 
#top-bar ul li ul {
    border: 0.0625rem solid #2477ac;
}
 
#top-bar .open-menu a {
    background-color: #e4e9ff;
    border-color: #6677a8;
    color: #6677a8;
}
 
/* -=- SIDEBAR -=- */
 
#side-bar .heading {
     color: #cce7ff;
     font-size: 130%;
     border-color: #000000;
}
 
#side-bar div.menu-item img { 
    background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ashattered-thoughts/diamondblue.png");
    box-sizing: border-box;
    padding-left: 0.8125rem;
}
 
#side-bar div.side-block, 
#side-bar .side-block.media, 
#side-bar .side-block.resources {
    background: #494c56;
    border: 0.3125rem double #1d2124;
    box-shadow: 0 0.125rem 0.375rem #1d2124;
    opacity: 0.8;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
}
 
#side-bar a,
#side-bar a:visited {
    color: #00c2ff;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #cce7ff;
}
 
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #000000;
}
 
#interwiki .side-block {
    background: #494c56;
    border: 0.3125rem double #1d2124;
    box-shadow: 0 0.125rem 0.375rem #1d2124;
    opacity: 0.8;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
}
 
#interwiki .side-block .heading {
     color: #cce7ff;
     font-size: 130%;
     border-color: #000000;
}
 
#interwiki .side-block .menu-item a,
#interwiki .side-block .menu-item a:visited {
    color: #00c2ff;
}
 
#interwiki .side-block .menu-item img { 
    background: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ashattered-thoughts/diamondblue.png");
    box-sizing: border-box;
    padding-left: 0.8125rem;
}
 
/* -=- TABBERS -=- */
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background-color: rgb(69, 171, 249, 0.7);
    background-image: none;
    border: none;
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background-color: #0074ff4f;
    background-image: none;
    border: none;
    color: #ffffff;
}
 
.yui-navset .yui-content {
    background: rgba(9, 0, 135, 0.11);
    border: 0.125rem dotted #5878b2;
}
 
.yui-navset .yui-nav {
    border: none;
    padding-bottom: 0.0625rem;
}
 
.yui-navset .yui-nav a em {
    border: none;
}
 
/* -=- USER INFO -=- */
 
#login-status, 
#login-status a {
    color: #12b4ff;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
    font-weight: bold;
}
 
#account-options li a, 
#account-options li a:hover {
    color: #e4f7ff;
    text-shadow: none;
}
 
#account-options {
    border: none;
}
 
#account-options ul {
    background-color: #1f68d2;
    opacity: 0.8;
}
 
/* -=- IMAGES -=- */
 
.scp-image-block .scp-image-caption {
    background-color: #747474;
}
 
/* -=- TABLES -=- */
 
table.wiki-content-table td {
    border: 0.0625rem dotted #a0c7ff;
    background: rgba(9, 0, 135, 0.11);
}
 
table.wiki-content-table th {
    border: 0.0625rem solid #bbb;
    background: #747474;
}
 
/* -=- CODE MODULE -=- */
 
.code {
    text-shadow: none;
}
 
/* -=- MISCELLANEOUS -=- */
 
/* In the files, when the menu is expanded, .highlight's background is #EEE, which gives poor constrast with the link color. */
table.page-files .highlight {
    background-color: transparent;
}
 
/* Changes the top border of the tags section, which is typically colored #888, to match the theme better. */
.page-tags span {
    border-top: solid 0.0625rem #2477ac;
}
 
/* Changes the colors of the layout in the History tab of the page, which constrasts heavily with the background theme. */
.pager a, 
.pager a:hover, 
.optionstd a, 
.optionstd a:hover {
    color: #ffffff;
    background: rgba(0, 85, 155, 0.9);
    border: solid 0.0625rem #2477ac;
}
 
/* While the page is saving and loading, there is a popup on the screen. This popup was difficult to read due to the body's properties (color being white), so this changed the background to be more thematically appropriate and legible. */
.owait, 
.osuccess {
    background-color: #00559b;
    color: #ffffff;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
    border: solid 0.0625rem #2477ac;
    opacity: 0.95;
}
 
/* Similar to above, but required an !important and different target apparently. */
.owait div.modal-body {
    color: #ffffff !important;
}
 
/* The text below the editing menu, specifically "Max 200 characters [...]" and "You have an exclusive 15-minute lock[...]" */
form div.sub {
    color: #b7b7b7;
}
 
/* Specifically the "You have an exclusive[...]" text box. Changes color and text-shadow for legibility. */
#lock-info {
    color: #3d3d3d;
    text-shadow: none;
}
 
/* The grow/shrink buttons on the bottom right of the editor. Changes to be more legible. */
.change-textarea-size a.btn {
    color: #000000;
    text-shadow: none;
}
 
/* Changes color of aforementioned buttons on hover. */
.change-textarea-size a:hover {
    text-decoration: none;
    background: #ffffff;
}
 
/* When a page is parented, its parent is listed as a "breadcrumb" for some reason. This modifies the parented page backlink near the top. Can be seen here: https://scp-wiki.wikidot.com/exploration-log-3426 */
#breadcrumbs {
    margin: 0.5em 0 1em;
    font-size: 80%;
    text-align: center;
}
 
/* Changes selection color. */
::selection { 
    background: #004777;
}
 
/* Changes seleciton color for specific menus to increase legibility of highlighted text. */
textarea::selection, 
input.text::selection, 
#lock-info::selection, 
span#lock-timer::selection, 
.code span::selection {
    background-color: #8ac8f9;
}
 
/* Preview message when previewing a page in the upper-right corner. */
.preview-message {
    background-color: #00559b;
    color: #ffffff;
    text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
    border: solid 0.0625rem #2477ac;
    opacity: 0.95;
}
 
/* Changes the color of the text at the very bottom of the page. */
#license-area {
    color: #ffffff;
}
 
/* -=- FOOTNOTES -=- */
 
.hovertip {
  background: #00559b !important;
  border: solid 0.0625rem #2477ac !important;
  color: #ffffff;
  text-shadow: 0.0625rem 0.0625rem 0.0625rem #000000;
  opacity: 0.94;
}
 
/* -=- MEDIA SELECTORS -=- */
 
@media screen and (max-width: 50rem) {
 
    #header h1 a::before {
        font-size: 1.7rem;
    }
 
    #header h1 {
        margin-left: 0rem;
    }
 
    #header h2 {
        margin-left: 0.75rem;
    }
 
    #top-bar {
        background: linear-gradient(to right, transparent 0%, #0b1d51 5%, #0b1d51 60%, transparent 85%);
        padding-right: 0rem;
    }
 
    #side-bar {
        position: fixed;
        z-index: 30;
        background-color: rgba(11, 29, 81, 0.93);
    }
 
}