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
- Tabulator
- Tabulation
- Long Tab
- 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 tab view.
Hey look, more text here.
How quaint.
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 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:
@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; }


