The Liminal Space Organization Light Theme

Info

Hello! This is a popup info box!

Close

This theme was created by Abdallah Amr

The theme is the light version of the LSO Theme made by Super-Robot14 that is intended for the Liminal Space Organization GOI, and the Spacetime Canon, which is currently being written.except the logo is centered, filled out and stretched here; the font is different… yeah this is just not the same anymore
To import this theme into your page, put the following code anywhere inside it:

[[include :backrooms-wiki:theme:lso-light]]

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (ex. 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 (you really shouldn't need to use more than 4 in most circumstances).

+ Titles

First Title

Second Title

Third Title

Fourth Title (pretty tiny)

Fifth Title (literally tiny)

Sixth Title (can you even see it?)

Tabulator

create all your amazing stuff here.

Tabulation

Greetings form this Tab!

:)

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.
no
This is a long tab. It contains a lot of text.
why?
This is a long tab. It contains a lot of text.
idk
This is a long tab. It contains a lot of text.
…
This is a long tab. It contains a lot of text.
sorry
This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

nope sorry, not empty lol

Long Tab

very longo boi ain't it?

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule
wow.

Nested blockquotes

And another¹

This is a	table
You should know	how to make these
already. hopefully that is

---

This is in the left.

This is in the middle. =)

Aaand This is in the right, never in the wrong!

---

Foot²
this text
is here
so you can
see how
everything looks
with different
formats^and
other_stuff
including links that do not link
like this useless thing here; trust me this will never exist
And links that do exist!

---

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

[[/div]]

---

[[div class="lightblock"]]

[[/div]]

---

[[div class="accentblock"]]

[[/div]]

---

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

[[/div]]

---

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

[[/div]]

---

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

[[/div]]

---

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

[[/div]]

---

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

[[/div]]

---

[[div class="stripe-block animated"]]

[[/div]]

---

[[div class="borderblock"]]

[[/div]]

---

INSERT TEXT
[[div class="titleblock"]]
[[span class="titlebox"]]INSERT TEXT[[/span]]

[[/div]]

---

[[div class="lightblock true-dark"]]

[[/div]]

---

[[div class="darkblock"]]

[[/div]]

---

[[div class="lightstyled-quote true-dark"]]

[[/div]]

---

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

[[/div]]

---

[[div class="logoblock true-dark"]]

[[/div]]

---

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

[[/div]]

---

[[div class="stripe-block true-dark"]]

[[/div]]

---

[[div class="stripe-block true-dark animated"]]

[[/div]]

---

[[div class="borderblock true-dark"]]

[[/div]]

---

INSERT TEXT
[[div class="titleblock true-dark"]]
[[span class="titlebox"]]INSERT TEXT[[/span]]

[[/div]]

---

Show Source Code

@import url(https://backrooms-wiki.wdfiles.com/local--code/theme%3Also);
@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap');
 
:root {
    --logo-image: url("http://abdallah-backrooms-wiki.wikidot.com/local--files/theme:lso-light/LSOlogoFilled.png");
    --wire-logo: url("http://abdallah-backrooms-wiki.wikidot.com/local--files/theme:lso-light/Logo.svg");
    --wire-logo-inverted: url("http://backrooms-wiki.wikidot.com/local--files/theme:lso/Logo");
    --ctv-background-color: 235, 235, 235;
    --ctv-main-color: 164, 128, 185;
    --ctv-accent-color: 255, 187, 0;
    --ctv-text-color: 17, 23, 15;
 
    --swatch-primary: 164, 128, 185;
    --swatch-primary-darker: 156, 122, 176;
    --swatch-primary-darkest: 145, 113, 163;
    --swatch-text-light: var(--ctv-background-color);
    --swatch-menutxt-light-color: var(--ctv-background-color);
    --swatch-topmenu-bg-color: var(--swatch-primary);
 
    --modal-bg: var(--ctv-background-color);
 
    --wallpaper-mask: none;
 
    --body-font: 'Tektur', monospace;
    --UI-font: 'Tektur', monospace;
    --title-font: 'Tektur', monospace !important;
 
    --min-font-size: .9375rem;
    --max-font-size: 1.0817rem;
 
    --sidebar-width-on-desktop: calc(var(--base-font-size) * 19);
 
    letter-spacing: 0.5px;
 
}
 
#header {
    --login-dropdown-text-color: var(--swatch-text-general);
}
 
#top-bar {
    --dropdown-links-color: var(--swatch-text-general);
}
 
#main-content {
    --ui-button-hover-txt: var(--gray-monochrome);
    --ui-icon-hover-color: var(--gray-monochrome);
    --ui-icon-hover-bg: var(--alt-accent);
    --ui-button-hover-bg: var(--alt-accent);
}
 
#header::before {
    background-size: 25rem 10rem;
    background-position: center;
    opacity: 0.75;
    background-blend-mode: overlay;
    top: 0;
}
 
#header h1 a::before,
#header h2 span::before {
    color: rgb(var(--ctv-background-color));
}
 
#skrollr-body::before {
    -webkit-mask-image: var(--wallpaper-mask);
    mask-image: var(--wallpaper-mask);
}
 
#main-content {
    --wallpaper-mask: url("");
    --wallpaper-mask-size: 0rem;
    --tabs-selected-bg: var(--swatch-primary-darkest);
    --tabs-selected-outline: var(--swatch-primary-darkest);
 
}
 
#main-content::after {
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%20206%22%20version%3D%221.1%22%20id%3D%22svg55%22%20sodipodi%3Adocname%3D%22sidebar-arrows.svg%22%20inkscape%3Aversion%3D%221.1.2%20%280a00cf5339%2C%202022-02-04%29%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cdefs%20id%3D%22defs59%22%2F%3E%0A%3Csodipodi%3Anamedview%20id%3D%22namedview57%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20borderopacity%3D%221.0%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Apageopacity%3D%220.0%22%20inkscape%3Apagecheckerboard%3D%220%22%20showgrid%3D%22false%22%20inkscape%3Azoom%3D%223.1504854%22%20inkscape%3Acx%3D%227.9352851%22%20inkscape%3Acy%3D%22103%22%20inkscape%3Awindow-width%3D%221600%22%20inkscape%3Awindow-height%3D%22840%22%20inkscape%3Awindow-x%3D%220%22%20inkscape%3Awindow-y%3D%220%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Acurrent-layer%3D%22svg55%22%2F%3E%0A%3Ctitle%20id%3D%22title43%22%3Esidebar-tab%3C%2Ftitle%3E%0A%3Cpolygon%20points%3D%2213%20100%208%20100%208%2098%203%20102%208%20106%208%20104%2013%20104%2013%20100%22%20fill%3D%22%23000000%22%20id%3D%22polygon49%22%2F%3E%0A%3Cpolygon%20points%3D%2213%2040%208%2040%208%2038%203%2042%208%2046%208%2044%2013%2044%2013%2040%22%20fill%3D%22%23000000%22%20id%3D%22polygon51%22%2F%3E%0A%3Cpolygon%20points%3D%2213%20160%208%20160%208%20158%203%20162%208%20166%208%20164%2013%20164%2013%20160%22%20fill%3D%22%23000000%22%20id%3D%22polygon53%22%2F%3E%0A%3C%2Fsvg%3E");
}
 
.stripe-block {
    background: repeating-linear-gradient(60deg, rgba(var(--ctv-background-color),.25), rgba(var(--ctv-main-color),.75) 125px) rgb(var(--bright-accent));
}
 
@media screen and (prefers-reduced-motion: no-preference) {
    .stripe-block.animated {
        animation-name: stripeMove;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-direction: reverse;
        background-size: calc(125px/sin(60deg)) 100%;
    }
 
    @keyframes stripeMove{
        from {
            background-position-x: calc(125px/sin(60deg));
        }
    }
}
 
.borderblock, .border-logoblock, .logoblock {
    color: rgb(var(--text-monochrome));
}
 
.border-logoblock::after, .logoblock::after {
    background: var(--wire-logo) center / 35% no-repeat;
    opacity: 0.125;
}
 
.master-quote {
    font-family: var(--title-font);
}
 
.titlebox {
    color: var(--swatch-text-light);
}
 
.lightblock, .lightstyled-quote {
    background-color: rgb(var(--dark-gray-monochrome));
}
 
.lightstyled-quote {
    border-left: 0.5rem solid rgba(var(--bright-accent));
}
 
.accentblock {
    background-color: rgb(var(--swatch-primary));
    color:rgb(var(--text-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25) inset;
    border-radius: 10px;
}
 
.accentstyled-quote {
    width: 80%;
    max-width: 90%;
    background-color: rgb(var(--swatch-primary));
    color: rgb(var(--text-monochrome));
    border-left: 0.5rem solid rgba(var(--dark-gray-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) inset;
    border-radius: 10px;
}
 
.true-dark:is(.lightblock, .lightstyled-quote, .logoblock, .border-logoblock, .borderblock, .titleblock, .stripe-block), .darkblock, .darkstyled-quote {
    background-color: rgb(20, 20, 20);
    color: rgb(var(--swatch-text-light));
}
 
.true-dark:is(.logoblock, .border-logoblock):after {
    background: var(--wire-logo-inverted) center / 35% no-repeat;
    opacity: 0.125;
}
 
::selection {
    background: rgba(var(--swatch-primary-darker), .5);
}

Footnotes

1. And here's a footnote!

2. the original theme said this is a scientific note or something. I don't really understand tho ;)