Blinding Lights

LIED AGAIN, BABY. LET'S GO. KARAOKE BARS AT 12:00 AM WHERE YA AT?

Stole some code from my very own Corporate theme (which steals code from TrailmixNCocoa's M.E.G. theme), chrono72's Repository theme, w3schools, and SnomWriting's Blanche toggle button to make another theme because why the heck not? The sequel to Aesthetic is now here! The button makes everything have a glowing animation. Header has the glowing animation on this page by default, but this will for some reason fix itself once you actually include the theme on your page.

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

[[include :backrooms-wiki:theme:blinding-lights]]

Was originally going to call it the neon theme, but turns out that's taken, so here's an alternative name that's totally not a reference to a certain hit song.

Because people told me to (I did not consent to this), I will add a bunch of references to a certain Canadian in this page.

Examples:

Oh wow, this glows too.

A horizontal rule can be created with 4 hyphens "----" and extends acro— Wait, is that line glowing?

Titles can be created by putting between one and six plus "+" at the start of the line. They also glow in true neon fashion. I also don't recommend bolding the headers — it won't break anything, but it removes part of that neon sign feel. It's also stupidly bright if you bold the text.

Titles

Not to be confused with the novel House of Leaves.
Only difference is that this happy house has balloons while the other has… disappointing leaves. Duh.
Of course, if there's balloons, you know it's going to be fun.
Wait a minute. Balloons?
This better not be partyg—

This is a blockquote, created by putting "> " at the start of each line.
You guessed it — it glows.

Now let's go deeper.

How many layers?

Poopity	Scoop
Scoop di-di	Whoop
Whoop di Scoop di Poop

I said¹
Very normal (and very unoriginal) text.
How are your eyes doing?
Perhaps it's time for a little tilt.
oh wow it's even more thiqq now.
This has a line going through it.
It's so thin.
Made in the^AM?
Came for the_FM
Clicking this allows you to listen to a secret version of Rick Astley's Never Gonna Give You Up.
Clicking this takes you to the early morning hours of 12:00 AM. Literally.

Quotes and Blocks:

[[div class="lightblock"]]

[[/div]]

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

[[/div]]

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

[[/div]]

Special Div

AUDIO LOG

Preface: Two weirdos decided to go to a karaoke bar at 12:00 AM.

Person 1:	I think we should sing "Blinding Lights" this time around.
	Person 2 stares at Person 1 in disgust.
Person 2:	That's not the only song in the world, you know.

Aftermath: Person 1 was ultimately blinded by the lights, eventually succumbing to permanent vision damage.

How to implement this log?

The header font is Beon.
The title font is La Chata.
The page title font is Righteous.
The body font is Radis Sans.
The mono and topbar font is Comfortaa.
The rating module font is Nova Round.
The additional log font is Hezaedrus.

Enter the Code

Hide the Code

@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
@import url("https://fontlibrary.org//face/beon");
@import url("https://fontlibrary.org//face/radis-sans");
@import url("https://fontlibrary.org//face/la-chata");
@import url("https://fontlibrary.org//face/hezaedrus");
@import url("https://fonts.googleapis.com/css2?family=Nova+Round&display=swap");
 
:root {
   --theme-base: "black-highlighter";
   --theme-id: "blinding-lights";
   --theme-name: "Blinding Lights Theme";
 
   --logo-image: url("");
   --header-title: "Blinding Lights";
   --header-subtitle: "Shining and Mesmerizing";
 
    --body-font: 'Radis Sans', monospace;
    --header-font: 'Beon', monospace;
    --title-font: 'La Chata', monospace;
    --mono-font: 'Comfortaa', monospace;
    --top-font: 'Righteous', display;
    --additional-font: 'Hezaedrus', monospace;
    --rate-font: 'Nova Round', monospace;
 
   --white-monochrome:  35, 35, 55;
   --text-white-monochrome: 255,175,220;
   --swatch-text-secondary-color: 255,255,255;
   --pale-gray-monochrome: 230, 101, 168;
   --light-gray-monochrome: 250,80,162;
   --gray-monochrome: 219,131,175;
   --black-monochrome: 255, 255, 255;
   --bright-accent: 255, 200, 230;
   --medium-accent: 30, 30, 60;
   --dark-accent: 245, 125, 186;
   --pale-accent: 215,160,210;
   --alt-accent: 218, 111, 235;
   --midnight: 30,30,70;
   --bubblegum-pink: 255,192,224;
   --neon-pink: 255,77,166;
   --dark-purple: 97,50,87;
 
   --swatch-topmenu-border-color: var(--neon-pink);
   --swatch-headerh1-color: 255, 200, 240;
   --swatch-headerh2-color: 255,200,240;
 
   --link-color: 245, 125, 186;
   --hover-link-color: 251, 190, 222;
   --visited-link-color: 239,90,133;
 
   --background-gradient-distance: 0rem;
 
   --gradient-header: linear-gradient(to top,
      rgba(var(--medium-accent)) 0%,
      rgba(var(--medium-accent), 0.90) 0%
   );
   --diagonal-stripes: linear-gradient(transparent 0);
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
#skrollr-body {
   background-image:
    radial-gradient(circle, black 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
#container {
   background-image: radial-gradient(circle, rgb(var(--dark-accent), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > ul > li > a,
#top-bar div.top-bar > ul > li > ul > li > a {
   color: white;
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 0.2em;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
   font-size: 2em;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   top: 2rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   font-size: 1em;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
.yui-navset .yui-nav .selected a {
   color: rgb(var(--bright-accent)) !important;
   background-color: rgb(var(--dark-purple)) !important;
}
 
table.wiki-content-table th {
   background-color: rgb(var(--bubblegum-pink));
   color: rgb(var(--white-monochrome));
}
 
#login-status {
   color: rgb(var(--bright-accent));
}
 
#login-status a {
   color: rgb(var(--bright-accent));
}
 
#search-top-box input.empty {
   color: rgb(var(--bright-accent));
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--alt-accent))
}
 
blockquote {
   background-color: rgb(var(--midnight));
   border: 0.2rem solid white;
   border-radius: 10px;
   box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
}
 
.border-block {
   background-color: rgb(var(--midnight));
   border: 0.2rem solid white;
   border-radius: 10px;
   padding: 0.01rem 1rem;
   box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
}
 
code,
.code {
   background-color: rgb(var(--midnight));
}
 
:root{
  --base-color: rgb(215,125,175);
  --hover-color: rgb(255,182,225);
  --click-color: rgb(239,152,199);
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 15px 15px 0px 0px;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    transition: background 0.1s linear;
    background: var(--base-color);
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .collapsible-block-link {
    color: white;
    font-weight: bold;
    text-decoration: none;
}
 
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
 
#page-content .collapsible-block-content {
    transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear;
    border-top: solid var(--base-color) 5px;
    border-top-right-radius: 3px;
    border-bottom: solid var(--base-color) 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
 
#page-content .collapsible-block-folded {
    max-width: 100%;
}
#page-content .collapsible-block-unfolded-link{
    width: min-content;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
 
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--hover-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{
    border-top-color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}
 
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content::after {
    background: var(--hover-color);
}
 
#page-content .collapsible-block-folded:active, #page-content .collapsible-block-unfolded-link:active, #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content::after {
    transition: background 0s, max-width 0s;
    background: var(--click-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:active + .collapsible-block-content {
    transition: border-top-color 0s, border-bottom-color 0s;
    border-top-color: var(--click-color);
    border-bottom-color: var(--click-color);
}
 
#page-content .unfolded-collapse {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: var(--base-color);
    color: white;
    font-weight: bold;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
#page-content .unfolded-collapse::before {
    content: "▽";
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
 
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid var(--base-color) 5px;
}
 
#page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{
    margin:auto;
    margin-top: 10px;
}
 
#page-content .addendumfooter{
    display: block;
    border-bottom: solid 3px var(--base-color);
    margin: auto;
    text-align: center;
}
 
#page-content .info-container .collapsible-block {
    counter-increment: none;
}
 
#page-title{
    font-family: var(--top-font);
    border-bottom: 2px double rgb(var(--text-white-monochrome));
    text-align: center;
    color: rgb(var(--text-white-monochrome));
}
 
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    transition: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
    background: var(--barColour);
}
 
#page-content .info-container .collapsible-block-folded::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: "";
    display: none;
}
 
#page-content .info-container .collapsible-block-content {
    border-bottom: none;
    transition: none;
    border-top: none;
}
 
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded, #page-content .unfolded-collapse{
    line-height: 1.4;
}
 
#page-content .collapsible-block-folded .collapsible-block-link::before, #page-content .collapsible-block-unfolded .collapsible-block-link::before, #page-content .unfolded-collapse::before {
    font-size: 130%;
    margin-left: -0.4em
}
 
.log-top {
    font-family: var(--header-font);
    text-align: center;
    font-size: 2em;
}
 
.presum {
    font-family: var(--title-font);
    padding-left: 10px;
}
 
.presumtext {
    font-family: var(--additional-font);
}
 
table.speak th {
    font-size: 1.05em;
    font-weight: bold;
    border-right: 1px solid white;
    padding:  1.1em 1em 0em 1em;
}
 
table.speak td {
    padding: 1.1em 0em 0em 0.9em;
}
 
table.speak td.act {
    font-family: var(--mono-font);
    color: rgb(var(--bubblegum-pink));
}
 
h1, h2, h3, h4, h5, h6, #header h1 a::before {
font-family: var(--header-font);
font-weight: normal;
color: white;
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6;
}
 
hr {
    border-top: .063rem solid #db83b0;
    box-shadow: 0 0 2px #fff, 0 0 3px #db83b0, 0 0 4px 2px #db83b0;
    background-color: #db83b0;
}
 
.scp-image-block.block-right {
   border: 1px double rgb(var(--bubblegum-pink));
   box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
}
 
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 5px #fff, 0 0 10px #e60073, 0 0 15px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6;
  }
}
 
@-webkit-keyframes hr-glow {
  from {
    box-shadow: 0 0 1px #fff, 0 0 2px #db83b0, 0 0 3px #db83b0, 0 0 4px #db83b0, 0 0 5px #e60073;
  }
  to {
    box-shadow: 0 0 2px #fff, 0 0 3px #db83b0, 0 0 4px 2px #db83b0, 0 0 5px 2px #db83b0;
  }
}
 
@-webkit-keyframes div-glow {
  from {
    box-shadow: 0 0 1px #fff, 0 0 2px #db83b0, 0 0 3px #db83b0, 0 0 4px 1px #db83b0, 0 0 5px 2px #e60073;
  }
  to {
    box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0, 0 0 5px 4px #db83b0;
  }
}
 
.lightblock {
    background-color: rgba(var(--bubblegum-pink), 0.875);
    color: rgb(var(--midnight));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0px 0px 5px 2px #db83b0;
}
 
.styled-quote {
    background-color: rgba(var(--bubblegum-pink),0.1);
    border-left: 0.5rem solid rgb(var(--bubblegum-pink));
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0px 0px 5px 1px #db83b0;
}
 
.border-block hr {
    border-top: .063rem solid white;
    background-color: white;
}
 
.page-rate-widget-box {
    font-family: var(--rate-font);
    background: none;
    border: 0.15rem solid white;
    border-radius: 5px;
    background-color: rgb(var(--midnight));
    box-shadow: 0 0 1px #fff, 0 0 2px 1px #db83b0, 0 0 3px 2px #db83b0;
}
 
.footnotes-footer {
    border-left: 0.5rem solid rgb(var(--bubblegum-pink));
    border-top: 0.1rem solid white;
    border-right: 0.1rem solid white;
    border-bottom: 0.1rem solid white;
    box-shadow: 0 0 2px #fff, 0 0 3px 2px #db83b0, 0 0 4px 3px #db83b0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
 
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form)>a.btn {
    border: 0.15rem solid white;
    border-radius: 5px;
    background-color: var(--base-color);
    color: white;
    box-shadow: 0 0 2px #fff;
}
 
#side-bar .heading,
#interwiki .heading {
    background-color: rgb(var(--bubblegum-pink));
}
 
#header div#top-bar {
    font-family: var(--mono-font);
}
 
#account-options{
    background-color: rgb(var(--dark-purple));
    border: 0.1rem solid white;
    border-radius: 5px;
}

Funny Round Thing

theme

page revision: 5, last edited: 04 Jan 2023 14:01

Edit Rate (+23) Tags Discuss (4) History Files Print Site tools + Options

The Backrooms

You've been here before.

Examples:

Blinding Lights 2: It's Blindin' Time

The above text was not a Morbius reference

OPEN 24 HOURS 7 DAYS A WEEK

Sushi Restaurant & Bar

Call 1-800 to schedule a reservation today!

Oh and come to Vegas please

Quotes and Blocks:

Special Div