Stargazer Theme

Stargazer

On any page:
[[include :scp-wiki:theme:basalt]]
[[include :scp-wiki:theme:stargazer]]

Info

Stargazer is an aesthetic theme for the SCP Wiki by AstralNavigator which extends the Basalt theme. Visit Basalt's wiki page to see what theme settings are available to use. Please note that Stargazer is a darkmode theme by default, so there is no need to set "darkmode=a" in your Basalt import. Other Basalt theme settings should work normally.

Page elements

[[div class="blockquote"]]

[[div class="notation"]]

[[div class="jotting"]]

[[div class="modal"]]

[[div class="smallmodal"]]

[[div class="papernote"]]

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. In ligula ipsum, posuere sit amet turpis in, cursus euismod tellus.

[[div class="floatbox"]]

This is a floatbox. You can put all kinds of content inside them (except BetterFootnotes, for now). They'll float at one side of the page relative to what's around them.

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.

[[div class="floatbox right"]]

Curabitur sed dui nec libero fringilla placerat. Pellentesque imperdiet ac dolor et sagittis. Vestibulum rhoncus justo magna, vel ornare eros iaculis et. Praesent suscipit massa eu urna convallis molestie. Vestibulum molestie faucibus eleifend. Nullam ut felis ac sapien aliquet consequat a sit amet ipsum. Sed rutrum diam quis urna ullamcorper, sit amet tristique lacus faucibus. Cras facilisis consequat sem, et egestas elit blandit ut. Cras sagittis velit ut posuere semper. Vestibulum in ipsum orci.

[[div class="document"]]

[[div class="darkdocument"]]

[[div class="raisa_memo"]]

+ More memos

With icons by EstrellaYoshte (see here)

[[div class="classification_memo"]]

[[div class="ettra_memo"]]

[[div class="ethics_memo"]]

[[div class="temporal_memo"]]

[[div class="overwatch_memo"]]

[[div class="miscomm_memo"]]

---

Image block.

A horizontal rule can be created with 6 hyphens "------" and extends across the whole page if it's not placed inside anything (eg a blockquote).¹

Titles can be created by putting between one and six pluses "+" at the start of a line.

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.

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 tab has a really long name for some odd reason. I wonder why? It is very strange.

This is a tab with footnote²

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

I miss when we could trust each other.

This is a	table
You should know	how to make these
already
But do you?

Footnotes

1. This is a footnote

2. This is another footnote.

Coloring

Some elements can be colored with tableX classes.
This system is designed to connect with the Anomaly Classification System; each color signifies a different security clearance level.

.table1

.table1
Text here
Text here
Text here

.table2

.table2
Text here
Text here
Text here

.table3

.table3
Text here
Text here
Text here

.table4

.table4
Text here
Text here
Text here

.table5

.table5
Text here
Text here
Text here

.table6

.table6
Text here
Text here
Text here

Included with Stargazer (via Basalt):

• BetterFootnotes by EstrellaYoshte
• ACS Animation by EstrellaYoshte

Header and UI font is Sofia Sans.
Body font is Inter.
Monospace font is JetBrains Mono.

+ Theme Source Code

/*  __ _                                      */
/* / _\ |_ __ _ _ __ __ _  __ _ _______ _ __  */
/* \ \| __/ _` | '__/ _` |/ _` |_  / _ \ '__| */
/* _\ \ || (_| | | | (_| | (_| |/ /  __/ |    */
/* \__/\__\__,_|_|  \__, |\__,_/___\___|_|    */
/*                  |___/                     */
/*                                            */
/* [2026 Wikidot Theme]                       */
/* Version 1.0.0                              */
/*                                            */
/* by AstralNavigator                         */
/*                                            */
/* Built on Basalt                            */
/*                                            */
 
:root {
    --header-logo: url(https://scp-wiki.wdfiles.com/local--files/theme%3Abasalt/basalt_scp_logo-for_darkmode.svg);
 
    /* ---- STARGAZER VARIABLES ---- */
 
    /* Sky colors */
    --sky-0: 0, 1, 7;
    --sky-1: 1, 4, 13;
    --sky-2: 3, 8, 21;
    --sky-3: 6, 14, 32;
    --glow: 111, 168, 255;
    --glow-strong: 147, 196, 255;
 
    /* Starfield colors */
    --star-white-opaque: rgba(255, 255, 255, 0.95);
    --star-white-medium: rgba(255, 255, 255, 0.7);
    --star-white-light: rgba(255, 255, 255, 0.55);
    --star-white-verylight: rgba(255, 255, 255, 0.45);
    --star-white-dim: rgba(255, 255, 255, 0.4);
    --star-white-overlay: rgba(255, 255, 255, 0.12);
    --star-glow-opaque: rgba(177, 212, 255, 0.8);
    --star-glow-medium: rgba(195, 224, 255, 0.7);
    --star-glow-medium-alt: rgba(160, 205, 255, 0.6);
    --star-glow-light: rgba(193, 222, 255, 0.5);
    --star-glow-lighter: rgba(210, 231, 255, 0.45);
    --star-glow-overlay: rgba(184, 217, 255, 0.10);
 
    /* ---- BASALT VARIABLES ---- */
 
    /* Core Color Palette */
    --basalt-UI-dark-palette: 7, 15, 32;
    --basalt-primary-color: 7, 15, 32;
    --basalt-secondary-color: 10, 21, 43;
    --basalt-tertiary-color: 16, 31, 61;
    --basalt-bright-element-color: 111, 168, 255;
    --basalt-dark-element-color: 20, 42, 79;
    --basalt-undertone: 42, 78, 144;
    --basalt-alternate-color: 131, 188, 255;
    --basalt-positive-color: 113, 188, 255;
    --basalt-negative-color: 214, 108, 144;
 
    /* Text Colors */
    --basalt-main-text-color: 231, 239, 255;
    --basalt-sub-text-color: 163, 184, 220;
    --basalt-light-text-color: 244, 248, 255;
    --link-visited-color: 154, 190, 229;
 
    /* General UI Elements (borders, scrollbars, selection) */
    --basalt-UI-background-color: var(--basalt-primary-color);
    --general-border-color: 53, 82, 129;
    --title-border-color: var(--glow);
    --hr-color: var(--general-border-color);
    --scrollbar-track-color: 11, 22, 45;
    --scrollbar-thumb-color: var(--basalt-dark-element-color);
    --selection-text-color: var(--basalt-light-text-color);
    --selection-background-color: var(--basalt-dark-element-color);
 
    /* Edit Area/Form Elements */
    --edit-area-ancillary-background-color: 9, 19, 38;
    --edit-area-toolbar-background-color: 12, 23, 46;
    --edit-area-main-background-color: 6, 13, 28;
 
    /* Buttons */
    --button-background-color: 15, 31, 61;
    --button-border-color: var(--general-border-color);
    --button-outline-color: var(--basalt-bright-element-color);
    --button-text-color: var(--basalt-main-text-color);
    --button-hover-text-color: var(--basalt-light-text-color);
    --button-hover-background-color: 51, 98, 183;
    --button-hover-border-color: 129, 177, 255;
 
    /* Header & Top Navigation */
    --header-title-color: var(--basalt-light-text-color);
    --header-subtitle-color: 175, 199, 235;
    --top-bar-link-color: 224, 235, 255;
    --top-bar-link-color-hover: var(--basalt-light-text-color);
    --top-bar-link-background-hover: var(--basalt-undertone);
    --top-bar-link-background-hover-alt: var(--basalt-dark-element-color);
    --top-bar-dropdown-background: var(--basalt-primary-color);
    --top-bar-dropdown-background-hover: var(--basalt-undertone);
    --top-bar-dropdown-link-color: var(--basalt-main-text-color);
    --top-bar-dropdown-link-color-hover: var(--basalt-light-text-color);
 
    /* Search Box */
    --search-background-color: 6, 13, 28;
    --search-icon-color: 198, 222, 255;
    --search-icon-color-hover: var(--basalt-light-text-color);
 
    /* Login/User Status */
    --login-status-background-color: var(--basalt-primary-color);
    --login-status-text-color: var(--basalt-main-text-color);
    --login-status-text-color-hover: var(--basalt-light-text-color);
    --login-status-link-background-hover: var(--basalt-undertone);
 
    /* Sidebar */
    --side-bar-link-color: 223, 235, 255;
    --side-bar-link-color-hover: var(--basalt-light-text-color);
    --side-bar-link-background-hover: var(--basalt-undertone);
    --side-bar-heading-background-color: 16, 31, 61;
    --side-bar-heading-text-color: var(--basalt-main-text-color);
    --side-bar-heading-text-color-hover: var(--basalt-light-text-color);
    --side-bar-unfolded-heading-background-color: var(--basalt-dark-element-color);
    --side-bar-unfolded-heading-text-color: var(--basalt-light-text-color);
 
    /* Content Blocks (blockquotes, code) */
    --blockquote-background-color: var(--basalt-secondary-color);
    --blockquote-border-color: var(--general-border-color);
    --code-background-color: 8, 17, 34;
 
    /* Table of Contents */
    --toc-background-color: var(--basalt-secondary-color);
    --toc-border-color: var(--general-border-color);
 
    /* Tabs */
    --tab-background-color: 12, 23, 46;
    --tab-hover-background-color: var(--basalt-undertone);
    --tab-selected-background-color: var(--basalt-dark-element-color);
    --tab-focus-text-color: var(--basalt-light-text-color);
 
    /* Tables */
    --basalt-th-background-color: 28, 55, 102;
    --basalt-th-text-color: var(--basalt-dark-text-color);
 
    /* Images & Captions */
    --image-caption-background-color: 8, 17, 34;
    --image-caption-text-color: var(--basalt-light-text-color);
 
    /* Footnotes */
    --footnote-background-color: 9, 18, 38;
 
    /* Tags */
    --tag-background-color: 14, 27, 53;
 
    /* Rating Module */
    --rate-module-background-color: var(--basalt-secondary-color);
    --rate-module-text-color: var(--basalt-main-text-color);
    --rate-module-upvote-color: var(--basalt-bright-element-color);
    --rate-module-downvote-color: var(--basalt-negative-color);
    --rate-module-cancel-color: var(--basalt-alternate-color);
    --rate-module-info-background-color: 16, 31, 61;
    --rate-module-info-icon-color: var(--basalt-dark-text-color);
 
    /* Modals */
    --modal-fader-background-color: 5, 10, 24;
 
    /* Special Content Boxes */
    --authorbox-background-color: var(--basalt-secondary-color);
    --floatbox-background-color: 9, 18, 38;
 
    /* Document & Memo Styles */
    --document-background-color: 122, 164, 222;
    --darkdocument-background-color: 18, 34, 62;
    --document-text-color: 16, 27, 49;
    --memo-text-color: var(--basalt-light-text-color);
    --memo-shadow: rgba(0, 0, 0, 0.35);
    --raisa-memo-color: 38, 59, 103;
    --classification-memo-color: 30, 67, 106;
    --ettra-memo-color: 56, 60, 109;
    --ethics-memo-color: 58, 77, 120;
    --temporal-memo-color: 42, 69, 112;
    --overwatch-memo-color: 34, 44, 84;
    --miscomm-memo-color: 50, 58, 117;
 
    /* Page Content */
    --page-content-gradient-top: 8, 17, 34;
    --page-content-gradient-bottom: 6, 13, 28;
    --page-content-border: 84, 120, 179;
    --page-content-shadow: rgba(0, 0, 0, 0.24);
 
}
 
html {
    background-color: rgb(var(--sky-0));
}
 
body {
 
    background:
        radial-gradient(circle at 11% 23%, var(--star-white-opaque) 0 1.1px, transparent 1.9px),
        radial-gradient(circle at 79% 14%, var(--star-glow-opaque) 0 1.3px, transparent 2px),
        radial-gradient(circle at 37% 71%, var(--star-white-light) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 68% 62%, var(--star-glow-medium) 0 1px, transparent 1.7px),
        radial-gradient(circle at 24% 82%, var(--star-white-verylight) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 92% 48%, var(--star-glow-medium-alt) 0 0.9px, transparent 1.6px),
        radial-gradient(circle at 8% 64%, var(--star-white-medium) 0 1px, transparent 1.7px) 0 0 / 19rem 17rem,
        radial-gradient(circle at 63% 18%, var(--star-glow-light) 0 0.9px, transparent 1.6px) 0 0 / 23rem 21rem,
        radial-gradient(circle at 42% 53%, var(--star-white-dim) 0 0.8px, transparent 1.4px) 0 0 / 27rem 25rem,
        radial-gradient(circle at 87% 76%, var(--star-glow-lighter) 0 0.9px, transparent 1.5px) 0 0 / 31rem 29rem,
        linear-gradient(
            180deg,
            rgb(var(--sky-0)) 0%,
            rgb(var(--sky-1)) 38%,
            rgb(var(--sky-2)) 68%,
            rgb(var(--sky-3)) 100%
        );
    background-attachment: fixed;
}
 
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, var(--star-white-overlay) 0 1.4px, transparent 2.4px) 0 0 / 34rem 30rem,
        radial-gradient(circle at 74% 58%, var(--star-glow-overlay) 0 1.2px, transparent 2.2px) 0 0 / 41rem 37rem;
    z-index: 0;
}
 
/* Interwiki module styling */
 
html#interwiki {
    --basalt-UI-background-color: 7, 15, 32;
    --basalt-main-text-color: 231, 239, 255;
    --basalt-light-text-color: 244, 248, 255;
    --side-bar-link-background-hover: 42, 78, 144;
    background: rgb(var(--basalt-UI-background-color));
}
 
html#interwiki body {
    background: rgb(var(--basalt-UI-background-color));
    color: rgb(var(--basalt-main-text-color));
    border: none;
}
 
html#interwiki body::before {
    display: none;
}
 
html#interwiki body * {
    border: none;
}
 
html#interwiki body a:is(:hover, :focus) {
    color: rgb(var(--basalt-light-text-color));
    background: rgb(var(--side-bar-link-background-hover));
}
 
/* Page content styling */
 
#page-content {
    margin-top: 0.5rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(var(--page-content-gradient-top), 0.90) 0%, rgba(var(--page-content-gradient-bottom), 0.88) 100%);
    border: 3px solid rgba(var(--page-content-border), 0.35);
    border-radius: 1rem;
    box-shadow: 0 1.2rem 2.4rem var(--page-content-shadow);
    backdrop-filter: blur(0.3rem);
}
 
/* Floatbox styling */
 
div.document div.floatbox {
    color: rgb(var(--basalt-light-text-color));
}
 
/* Memo Styling */
 
div[class$="_memo"] {
  color: rgb(var(--memo-text-color));
  text-shadow: 0 1px 0 var(--memo-shadow);
}
 
div.raisa_memo { --memo-color: var(--raisa-memo-color); }
div.classification_memo { --memo-color: var(--classification-memo-color); }
div.ettra_memo { --memo-color: var(--ettra-memo-color); }
div.ethics_memo { --memo-color: var(--ethics-memo-color); }
div.temporal_memo { --memo-color: var(--temporal-memo-color); }
div.overwatch_memo { --memo-color: var(--overwatch-memo-color); }
div.miscomm_memo { --memo-color: var(--miscomm-memo-color); }
 
/* Table header text for .table3 only */
.table3 th {
    color: #000 !important;
}
 
/* Media Queries */
 
@media only screen and (max-width: 1024px) {
    #page-content {
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }
}

‡ Licensing / Citation

Cite this page as:

"Stargazer Theme" by AstralNavigator, from the SCP Wiki. Source: https://scpwiki.com/theme:stargazer. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Filename: stargazer_logo.svg
Author: AstralNavigator
License: CC BY-SA 3.0
Source Link: SCP Foundation Wiki