Darker Endless Theme

This theme was created by AWriterOn.

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

[[include :backrooms-wiki:theme:darker-endless]]

Examples

The (New) Endless Backrooms Logo

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

+ Titles

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

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

Div Blocks

Title Test
[[div class="titleblock"]]
[[span class="titlebox"]]Title Test[[/span]]
Re-creation
[[/div]]

Title Test
[[div class="titleblock-light"]]
[[span class="titlebox-light"]]Title Test[[/span]]
Re-creation
[[/div]]

[[div class="document"]]
Text
[[/div]]

[[div class="dark-document"]]
Text
[[/div]]

[[div class="borderblock"]]
Text
[[/div]]

[[div class="borderblock-dark"]]
Text
[[/div]]

[[div class="warningbox"]]
Text
[[/div]]

[[div class="styled-quote"]]
Text
[[/div]]

[[div class="dark-styled-quote"]]
Text
[[/div]]

[[div class="dark-featurebox"]]

[[/div]]

[[div class="dark-featureflavor"]]

[[/div]]

[[div class="dark-newsbox"]]

[[/div]]

[[div class="darkblock"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="logoblock"]]

[[/div]]

[[div class="border-logoblock"]]

[[/div]]

[[div class="borderblock"]]

[[/div]]

[[div class="old-border-logoblock"]]

[[/div]]

[[div class="old-logoblock"]]

[[/div]]

---

Theme codes:

+ Theme Code

@import url(https://backrooms-wiki.wdfiles.com/local--code/component%3Apatch/1);
@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
 
@media screen and (prefers-reduced-motion: no-preference) {
    #page-title, #breadcrumbs, #page-content > * {
      animation-name: fadeIn;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-timing-function: ease-out;
      animation-fill-mode: backwards;
    }
  }
  #page-title { animation-delay: 0s; }
 
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(0,30px);
    }
    to {
      opacity: 1;
      transform: translate(0,0);
    }
  }
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "endless";
    --theme-name: "Endless Theme";
 
   --logo-image: url(https://backrooms-sandbox-2.wdfiles.com/local--files/collab:awriteron0/New-Endless-Logo.gif);
   --header-title: "Endless Backrooms";
   --header-subtitle: "An Endless Expanse of Rooms";
 
/* Typefaces */
    --body-font: 'Roboto Slab', serif;
    --header-font: 'Eczar', serif;
    --title-font: 'Eczar', serif;
    --mono-font: "IBM Plex Mono", monospace;
    --font-family: 'Eczar', serif;
    --font-family: 'Fantasque Sans Mono', monospace;
 
    /* Standard Colors */
    --white-monochrome: 250, 250, 250;
     /* white*/
    --black-monochrome: 17, 17, 17;
    /* black. Fact, is dark gray */
    --bright-accent: 0, 0, 139;
    /* the bright blue */
    --medium-accent: 29, 161, 192;
     /* the bright blue, again */
    --dark-accent: 31, 81, 255;
    /* dark blue for background*/
    --alt-accent: 15, 82, 186;
    /* alternative accent of blue */
    --dark-alt-accent: 0, 0, 28;
    /* alternative accent of dark blue*/
    --dark-gray-monochrome: 26,26,26;
    /* darker color of gray */
 
    /* Primary Theme Colors */
    --background-gradient-color: var(--bright-accent);
    --swatch-background: var(--dark-alt-accent);
    --swatch-primary: var(--alt-accent);
    --swatch-primary-darker: var(--medium-accent);
    --swatch-primary-darkest: var(--black-monochrome);
    --swatch-secondary-color: var(--alt-accent);
    --gradient-background: linear-gradient( to bottom, rgb(var(--bright-accent)), rgb(var(--swatch-background)));
 
    /* Primary Text Colors */
    --swatch-text-general: var(--swatch-text-light);
    --swatch-important-text: var(--bright-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--dark-alt-accent);
    --swatch-menubg-light-color: var(--pale-gray-monochrome);
    --swatch-menubg-medium-color: var(--light-gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--alt-accent);
    --swatch-menubg-dark-color: var(---hite-monochrome);
    --swatch-menubg-black-color: var(--black-monochrome);
    --swatch-menubg-hover-color: var(--black-monochrome);
    --swatch-menutxt-dark-color: var(--white-monochrome);
    --swatch-menutxt-light-color: var(--white-monochrome);
    --swatch-border-color: var(--dark-accent);
 
    /* Primary Header Colors */
    --swatch-headerh1-color: var(--white-monochrome);
    --swatch-headerh2-color: var(--white-monochrome);
    --swatch-topmenu-border-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--black-monochrome);
    --gradient-header: linear-gradient( to bottom, rgb(var(--black-monochrome)), rgb(var(--bright-accent)));
 
    /* Link Colors */
    --link-color: 56, 149, 211;
    --visited-link-color: 88, 204, 237;
    --hover-link-color: var(--bright-accent);
    --newpage-color: darkred;
    --sidebar-links-text: var(--bright-accent);
    --link-color-bright: var(--bright-accent);
    --gray-monochrome: 36, 36, 36;
}
 
#main-content hr {
  background-color: rgb(var(--white-monochrome));
  border-color: rgb(var(--alt-accent));
}
 
pre { 
  background: black;  
}
 
#page-title {
    color: rgb(var(--white-monochrome))!important;
}
 
 #page-title::after,
 .meta-title::after,
 #page-title::before,
 .meta-title::before {
        background: rgb(var(--swatch-primary));
}
 
#main-content {
    --tabs-bg: var(--black-monochrome);
    --tabs-content-bg-color: none;
    --blockquote-bg-color: var(--black-monochrome);
    --blockquote-border-color: var(--bright-accent);
}
 
/*change user colors*/
#login-status {
    color: rgb(var(--light-gray-monochrome));
}
 
/*self-explanatory*/
hr {
  background-color: rgb(var(--pale-gray-monochrome));
  border-color: rgb(var(--pale-gray-monochrome));
}
 
#login-status a {
    color: rgb(var(--white-monochrome));
}
 
/*top bar options colors*/
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
    color: rgb(var(--white-monochrome)) !important;
}
 
/*searchbox text color*/
#search-top-box input.empty{
    color: rgb(var(--white-monochrome));
}
 
/*3bar thing on mobile*/
#top-bar>div.mobile-top-bar>div.open-menu>p>a{
color:rgb(var(--gray-monochrome))!important;
}
 
/*image block text*/
.scp-image-block .scp-image-caption {
    color: rgb(var(--white-monochrome));
}
 
blockquote {
   box-shadow: 0.2rem 0.4rem 1.2rem rgba(0,0,0,.25);
}
 
/* DIV Blocks */
 
.titleblock .titleblock-light a{
   color: rgb(var(--bright-accent));
}
 
.titleblock {
   background-color: rgb(var(--black-monochrome));
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid rgb(var(--alt-accent)) 2px;
}
 
.titlebox {
  position: relative;
  top: -1.6rem;
  background-color: rgb(var(--alt-accent));
  color: rgb(var(--white-monochrome));
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
  font-style: bold;
}
 
.titleblock-light {
   background-color: rgb(var(--white-monochrome));
   color: black;
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid rgb(var(--bright-accent)) 2px;
}
 
.titlebox-light {
  position: relative;
  top: -1.6rem;
  background-color: rgb(var(--bright-accent));
  color: white;
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
  font-style: bold;
}
 
.document {
    background-color: rgb(var(--white-monochrome));
    color: rgb(var(--black-monochrome));
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
    margin: 3.5rem 0.2rem;
    padding: 0.2rem 1rem;
    position: relative;
}
 
.document:before,
.document:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}
 
.document:before {
    background-color: rgb(var(--white-monochrome));
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
    left: -5px;
    top: 4px;
    transform: rotate(-4deg);
}
 
.document:after {
    background-color: rgb(var(--white-monochrome));
    box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.5);
    right: -3px;
    top: 1px;
    transform: rotate(3deg);
}
 
.dark-document {
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--dark-gray-monochrome));
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
    margin: 3.5rem 0.2rem;
    padding: 0.2rem 1rem;
    position: relative;
}
 
.dark-document:before,
.dark-document:after {
    content: "";
    height: 98%;
    position: absolute;
    width: 100%;
    z-index: -1;
}
 
.dark-document:before {
    background-color: rgb(var(--dark-gray-monochrome));
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5);
    left: -5px;
    top: 4px;
    transform: rotate(-4deg);
}
 
.dark-document:after {
    background-color: rgb(var(--dark-gray-monochrome));
    box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.5);
    right: -3px;
    top: 1px;
    transform: rotate(3deg);
}
 
.borderblock {
   background-color:rgb(var(--alt-accent));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid 0.3rem rgb(var(--medium-accent));
}
 
.borderblock-dark {
   background-color:rgb(var(--bright-accent));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid 0.3rem rgb(var(--alt-accent));
}
 
.styled-quote {
   background-color:rgb(var(--alt-accent));
   border-left: 0.5rem solid rgba(var(--bright-accent));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
   font-style: italic;
}
 
.dark-styled-quote {
   background-color:rgb(17, 17, 17);
   border-left: 0.5rem solid rgba(var(--bright-accent));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
   font-style: italic;
}
 
.warningbox {
    padding: 0.01rem 1rem;
    color: black;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: yellow;
    font-size: 1rem;
    border: solid 0.3rem red;
    border-radius: 10px;
    }
 
    .warningbox::before {
    content: "";
    float: center;
    border: solid 2px red;
    background: url(https://alternate-sandbox.wdfiles.com/local--files/awriteron-1/warning.png) center/25% no-repeat;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
.dark-featurebox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#2D3543;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #F4F4F4;
    box-sizing:border-box;
    color: rgb(var(--white-monochrome));
}
 
.dark-featureflavor{
    padding:0 0.5rem;
    margin:0.5rem 0;
    background:#225079;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #202732;
    box-sizing:border-box;
    transition:0.2s;
    color: rgb(var(--white-monochrome));
}
.dark-newsbox{
    padding:1px 1rem;
    margin:1rem 0;
    background: linear-gradient(90deg, rgba(32,39,50,1) 0%, rgba(214,206,146,0) 100%);
    border-radius:0.8rem;
    color: rgb(var(--white-monochrome));
}
 
.blockquote {
   background-color:rgb(var(--black-monochrome));
   border-color: rgb(var(--bright-accent));
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
  opacity: 0.65;
}
 
blockquote {
   background-color:rgb(var(--black-monochrome));
   border-color: rgb(var(--bright-accent));
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
   opacity: 0.65;
}
 
.blockquote {
   background-color:rgb(var(--black-monochrome));
   border-color: rgb(var(--bright-accent));
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
  opacity: 0.65;
}
 
.styled-quote {
   background-color:rgb(var(--alt-accent));
   border-left: 0.5rem solid rgba(var(--black-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(var(--black-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
.lightblock {
   background-color:rgb(var(--white-monochrome));
   color:rgb(var(--black-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.lightblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
.borderblock {
   background-color:rgb(var(--black-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid 0.3rem rgb(var(--bright-accent));
}
 
.old-logoblock{
padding: 0.01rem 1rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
margin: 0.5rem 0 0.5rem 0.25rem;
display: block;
position: relative;
background-color: black;
}
 
.old-logoblock::after{
content: "";
float: center;
border: solid 2px #000;
background: url(https://backrooms-sandbox-2.wdfiles.com/local--files/collab:awriteron0/Endless_Logo.png) center/50% no-repeat;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
 
.old-border-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset;
    color:rgb(255, 255, 255);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--black-monochrome));
     border: solid 0.3rem rgb(var(--bright-accent));
border-radius: 10px;
    }
 
    .old-border-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://backrooms-sandbox-2.wdfiles.com/local--files/collab:awriteron0/Endless_Logo.png) center/50% no-repeat;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
.border-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color:rgb(var(--white-monochrome));
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: linear-gradient(to bottom, rgb(var(--black-monochrome)), rgb(var(--medium-accent)), 100%);;
    border: solid 0.3rem rgb(var(--bright-accent));
    }
 
    .border-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://backrooms-sandbox-2.wdfiles.com/local--files/collab:awriteron0/New-Endless-Logo.gif) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    }
 
    .logoblock{
    padding: 0.01rem 1rem;
    color:rgb(var(--white-monochrome));
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--black-monochrome));
    }
 
    .logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://backrooms-sandbox-2.wdfiles.com/local--files/collab:awriteron0/New-Endless-Logo.gif) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    }