Lumina Crash Theme

Link to article: Lumina Crash Theme.

@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css');

@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Alumina/1');

background-color: #00ff3644; padding: .15rem 1rem; border-inline: dashed green .175rem; margin-top: 1rem; text-align: center

background-color: #c5ff0044; padding: .15rem 1rem; border-inline: dashed yellow .175rem;

background-color: #c5ff0044; padding: .15rem 1rem; border-inline: dashed yellow .175rem; text-align: end

background-color: #ffd10044; padding: .15rem 1rem; border-inline: dashed yellow .175rem; text-align: center

background-color: #ff730044; padding: .15rem 1rem; border-inline: dashed red .175rem;

background-color: #ff730044; padding: .15rem 1rem; border-inline: dashed red .175rem; text-align: end

background-color: #ff120044; padding: .15rem 1rem; border-inline: dashed red .175rem; margin-bottom: 1rem; text-align: center

```
font-family: var(--UI-font)
```

```
breakout-start
```
```
breakout-end
```
```
breakout
```
```
full-width-start
```
```
full-width-end
```
```
full-width
```
```
filebox
```
```
filebox
```

[[iftags +theme]]
[[module css]]
@import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css');
@import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css');
[[/module]]

[[>]]
**Rating:**
[[module Rate]]
[[/>]]

**Lumina Crash** is a [[[theme:bedrock|Bedrock]]]-based theme created by [[*user EstrellaYoshte]], for personal use.

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

> {{@@[[include :scp-wiki:theme:bedrock]]@@}}
> {{@@[[include :scp-wiki:theme:lumina]]@@}}

------

Lumina Crash is generally not meant for easy, drop-in use — it may break layouts for some pre-existing components.

{{#page-content}} has been converted into grid layout, with the following column tracks:

[[div style="background-color: #00ff3644; padding: .15rem 1rem; border-inline: dashed green .175rem; margin-top: 1rem; text-align: center"]]
{{content}}
[[/div]]
[[div class="breakout-start" style="background-color: #c5ff0044; padding: .15rem 1rem; border-inline: dashed yellow .175rem;"]]
{{breakout-start}}
[[/div]]
[[div class="breakout-end" style="background-color: #c5ff0044; padding: .15rem 1rem; border-inline: dashed yellow .175rem; text-align: end"]]
{{breakout-end}}
[[/div]]
[[div class="breakout" style="background-color: #ffd10044; padding: .15rem 1rem; border-inline: dashed yellow .175rem; text-align: center"]]
{{breakout}}
[[/div]]
[[div class="full-width-start" style="background-color: #ff730044; padding: .15rem 1rem; border-inline: dashed red .175rem;"]]
{{full-width-start}}
[[/div]]
[[div class="full-width-end" style="background-color: #ff730044; padding: .15rem 1rem; border-inline: dashed red .175rem; text-align: end"]]
{{full-width-end}}
[[/div]]
[[div class="full-width" style="background-color: #ff120044; padding: .15rem 1rem; border-inline: dashed red .175rem; margin-bottom: 1rem; text-align: center"]]
{{full-width}}
[[/div]]

By default, children of {{#page-content}} live in the content zone. To change grid tracks, add the stated classes respectively.

For maximum compatibility to use as a normal theme, you can contain everything in a wrapper div, optionally with the above classes. Otherwise, expect a lot of manual styling.

+++ Custom Syntax

[[div class="filebox" data-title="Personnel Dossier"]]

{{@@[[div class="filebox" data-title="Personnel Dossier"]]@@}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[[/div]]

[[=]]
+++* Header font is Space Grotesk.

Body font is Inter.

[[span style="font-family: var(--UI-font)"]]UI font is Barlow Semi Condensed.[[/span]]

{{Monospace font is JetBrains Mono.}}
[[/=]]

------

+++ Source Code
[[collapsible]]
[[code type="CSS"]]
/*
    Lumina Crash Theme
    [2023 Wikidot Theme]
    By EstrellaYoshte
 
    Based on:
    Generic Space Theme by EstrellaYoshte
*/

@import url('https://api.fonts.coollabs.io/css2?family=Barlow+Semi+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Space+Grotesk:wght@300;400;700&display=swap');

:root {
    --header-font-primary: 'Space Grotesk';
    --UI-font-primary: 'Barlow Semi Condensed';

    --basalt-primary-color: 20,28,34;
    --basalt-secondary-color: 102,114,130,.1325;
    --basalt-tertiary-color: 18,22,24;
    --basalt-main-text-color: 248,248,248;
    --basalt-sub-text-color: 190,213,216;
    --basalt-undertone: 252,248,222;
    --basalt-overtone: 16,17,19;
    --basalt-bright-element-color: 72,182,255;
    --basalt-dark-element-color: 20,120,233;
    --basalt-UI-opacity: .375;
    --basalt-UI-blur: .1125rem;

    --base-header-height: min(calc(14.5rem + 16.5vmin), 27.5rem);
    --header-border-width: 0rem;
    --search-button-width: 2.325rem;
    --user-button-width: 3.25rem;
    --top-bar-link-color-hover: var(--basalt-undertone);
    --login-status-text-color: var(--basalt-main-text-color);
    --login-status-text-color-hover: var(--basalt-light-text-color);
    --search-icon-color-hover: var(--basalt-light-text-color);
    --side-bar-background-color: var(--basalt-secondary-color);
    --side-bar-button-color-hover: var(--basalt-undertone);
    --side-bar-button-background-hover: var(--basalt-tertiary-color),.375;
    --side-bar-heading-text-color: var(--basalt-undertone);
    --side-bar-button-width: 3.625rem;
    --main-content-width: 500rem;
    --main-content-side-margin: calc(1.5rem + 2.5vw);
    --main-content-bottom-margin: .325rem;
    --code-background-color: var(--basalt-tertiary-color);
    --rate-module-background-color: var(--basalt-primary-color);
    --rate-module-info-icon-color: var(--basalt-undertone);
    --rate-module-cancel-color: var(--basalt-undertone);
    --tab-focus-text-color: var(--basalt-focus-color);
    --tab-background-color: initial;
    --footnote-background-color: var(--basalt-background-color),.875;
    --bottom-area-background-color: var(--basalt-tertiary-color);
    --license-area-font-size: calc(var(--true-font-size) *.875);
    --button-background-color: var(--basalt-tertiary-color);

    --lumina-background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Alumina/bg-galaxy.jpg);
    --lumina-header-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Alumina/moon.png);
    --lumina-header-top-gap: 1.5rem;
    --lumina-top-bar-height: 3.75rem;
    --lumina-footer-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Alumina/earth.png);

    --header-title: "LUNAR AREA-32";
    --header-subtitle: "Database Archive";
    --title-size: min(calc(1.5rem + 3.75vw), 4.25rem);
    --subtitle-size: min(calc(1.25rem + 2.75vw), 3.75rem);
    --header-logo: var(--lumina-header-image);
    --side-bar-button-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 419.8 419.8'%3E%3Cpath d='M209.9 300.6c0-44-46.7-90.8-90.7-90.8 44 0 90.7-46.6 90.7-90.5 0 44 46.7 90.6 90.7 90.6-44 0-90.8 46.7-90.8 90.7z'/%3E%3C/svg%3E");
}

body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100lvw;
    height: 100lvh;
    transform: translate(-50%, -50%);
    background: var(--lumina-background) no-repeat center;
    background-size: cover;
    opacity: .575;
    z-index: -1;
    pointer-events: none;
}


/*----------------------------------*/
/*-------- HEADER --------*/
/*----------------------------------*/

#header {
    contain: initial;
    height: auto;
    min-height: var(--header-final-height);
    position: static;
    background-color: transparent;
    grid-template-areas:
        '. . . . .'
        '. search line top-bar user'
        'h-link h-link h-link h-link h-link';
    grid-template-columns: var(--side-bar-button-width) var(--search-button-width) 1fr max-content var(--user-button-width);
    grid-template-rows: var(--lumina-header-top-gap) var(--lumina-top-bar-height) 1fr;
}

#header h1 { grid-template-columns: minmax(0,1fr); }
#header h1 a {
    justify-content: center;
    width: auto; height: auto;
    flex-wrap: wrap;
    pointer-events: none;
    gap: 1rem calc(var(--base-header-height) *.125);
    padding: 1rem;
    box-sizing: border-box;
}
#header h1 a::before, #header h1 a span { height: auto; pointer-events: auto; }
#header h1 a::before {
    width: calc(var(--base-header-height) *.75);
    aspect-ratio: 1;
    min-width: unset;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(45deg, transparent 20%, white 70%);
    mask-image: linear-gradient(45deg, transparent 20%, white 70%);
}

#header h1 a span::before { font-weight: 300; }
#header h1 a span::after{ font-weight: 700; }

#header-extra-div-1 {
    grid-area: line;
    height: .025rem;
    background-color: rgb(var(--basalt-main-text-color),.575);
    align-self: center;
}

#login-status span.printuser>a {
    background-color: rgb(var(--basalt-overtone),.325);
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}

#login-status a:is(.login-status-create-account,.login-status-sign-in):is(:hover,:focus) {
    color: rgb(var(--basalt-light-text-color));
}

#top-bar div[class*=top-bar]>ul {
    justify-content: flex-end;
    position: relative;
    z-index: 4;
}
#top-bar div[class*=top-bar]>ul::before {
    content: "";
    position: absolute;
    inset: 0; width: 100%; height: 100%;
    background-color: rgb(var(--header-background-color));
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}

#top-bar div[class*=top-bar]>ul>li>a {
    padding-inline: calc(var(--header-UI-font-size) *1.875);
    font-weight: normal;
    font-size: 1.05em;
}
#top-bar div[class*=top-bar]>ul>li>a::after {display: none; }
#top-bar div[class*=top-bar]>ul>li>a::before {
    top: initial; bottom: 0; left: initial; right: 0;
    width: 0; height: .175rem;
    transition: width var(--header-link-transition-2nd);    
}
#top-bar div[class*=top-bar]>ul>li.sfhover>a::before,
#top-bar div[class*=top-bar]>ul>li:focus-within>a::before,
#top-bar div[class*=top-bar]>ul>li>a:focus::before,
#top-bar div[class*=top-bar]>ul>li>a:hover::before {
    width: 100%;
    height: .175rem;
    transition: width var(--header-link-transition-2nd);    
}

#top-bar div[class*=top-bar] ul li ul {
    right: 0;
    left: unset;
}
#top-bar div[class*=top-bar]>ul>li>ul::before { all: unset; }
#top-bar div[class*=top-bar] ul li ul li a::before { all: unset; }


/*----------------------------------*/
/*-------- SIDEBAR --------*/
/*----------------------------------*/

@media not screen and (max-width: 1024px) {

#side-bar {
    height: 100%;
    margin-top: 0;
}
#side-bar::before, #side-bar::after {
    inset: initial;
    left: 0;
    top: var(--lumina-header-top-gap);
    height: var(--lumina-top-bar-height);
    transition: left var(--side-bar-transition);
}
#side-bar::before {
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}
#side-bar:is(:hover,:focus-within)::before {
    height: var(--lumina-top-bar-height);
}
#side-bar:is(:hover,:focus-within)::before,
#side-bar:is(:hover,:focus-within)::after {
    left: var(--side-bar-width);
}

}

#top-bar div.mobile-top-bar>.open-menu {
    z-index: 8;
}

:is(#side-bar,#interwiki) .side-block {
    -webkit-backdrop-filter: blur(calc(var(--basalt-UI-blur)*3.5));
    backdrop-filter: blur(calc(var(--basalt-UI-blur)*3.5));
}

:is(#side-bar,#interwiki) .heading {
    background-color: transparent;
    display: flex;
    padding: .5em;
    gap: .375em;
    font-size: 1.05em;
}
:is(#side-bar,#interwiki) .heading::after {
    content: "";
    display: block;
    background-color: currentColor;
    flex-grow: 1;
    height: .05rem;
    align-self: center;
}

#interwiki {background: transparent; }
#interwiki body::before { all: unset; }

/*----------------------------------*/
/*-------- MAIN --------*/
/*----------------------------------*/

#main-content,
body.print-body #main-content {
    max-width: 100%;
}

#breadcrumbs, .pseudocrumbs {
    --_gap: .875rem;
    position: relative;
    font-family: var(--UI-font);
    font-size: 1.05em;
    width: max-content;
    gap: var(--_gap);
    padding: var(--_gap);
    margin-inline-start: var(--main-content-side-margin);
    box-sizing: border-box;
    max-width: calc(100% - var(--main-content-side-margin)*2)!important;
}
:is(#breadcrumbs, .pseudocrumbs)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--basalt-secondary-color));
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
    z-index: -1;
}
:is(#breadcrumbs, .pseudocrumbs)::after {
    content: "";
    position: absolute;
    inset-inline-end: 100%;
    display: block;
    background-color: rgb(var(--basalt-main-text-color),.575);
    width: var(--main-content-side-margin);
    height: .05rem;
}

:is(#breadcrumbs,.pseudocrumbs) a {
    display: block;
    position: relative;
    text-decoration: none;
}
:is(#breadcrumbs,.pseudocrumbs) a::before {
    content: "";
    position: absolute;
    width: 0; height: .175rem;
    background-color: currentColor;
    inset-inline-start: 0;
    inset-block-end: calc(var(--_gap)*-1);
    transition: width .125s ease-out;
}
:is(#breadcrumbs,.pseudocrumbs) a:is(:hover,:focus)::before { width: 100%; }

#page-title {
    display: none;
}

#page-content {
    display: grid;
    grid-template-columns: [full-width-start] var(--main-content-side-margin) [breakout-start] minmax(0,1fr) [content-start] minmax(0,4.5fr) [content-end] minmax(0,1fr) [breakout-end] var(--main-content-side-margin) [full-width-end];
    min-height: unset;
}

:where(#page-content) > * { grid-column: content; }
:where(#page-content) > p {
    margin-block: .5em;
}
.breakout-start { grid-column-start: breakout-start; }
.breakout-end { grid-column-end: breakout-end; }
.breakout { grid-column: breakout; }

.full-width { grid-column: full-width; }
.full-width-start { grid-column-start: full-width-start; }
.full-width-end { grid-column-end: full-width-end; }

/*----------------------------------*/
/*-------- PAGE ELEMENTS --------*/
/*----------------------------------*/

div.creditButtonStandalone>p>a:is(:hover,:focus)::after,
div.rate-box-with-credit-button .creditButton>p>a:is(:hover,:focus)::after {
    background-color: rgb(var(--basalt-light-text-color));
}

:is(#u-credit-view,div#u-credit-otherwise) .modalbox {
    --basalt-light-text-color: var(--basalt-main-text-color);
}

/*----------------------------------*/

:where(#page-content) :is(h1, h2, h3, h4, h5, h6) {
    margin-block: .675em;
}

:where(#page-content) :is(h1, h2, h3, h4, h5, h6)::before {
    content: "";
    display: inline-block;
    width: 1.325em; height: 1.325em;
    box-sizing: border-box;
    border: solid .1rem rgb(var(--basalt-main-text-color),.75);
    position: relative;
    top: -.125em;
    vertical-align: middle;
    margin-inline: -.6em -.725em;
    transform: rotate(45deg);
    -webkit-mask-image: linear-gradient(45deg, white 15%, transparent 75%);
    mask-image: linear-gradient(45deg, white 15%, transparent 75%);
}


blockquote, div.blockquote {
    background: transparent;
    border: none;
    border-inline-start: solid 0.175rem rgb(var(--basalt-undertone));
    width: 100%;
}

hr {
    background-color: rgb(var(--basalt-main-text-color),.575);
    height: .05rem;
    margin: 1rem 0;
}

.image-block, .scp-image-block {
    background: rgb(var(--image-caption-background-color),.325);
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}
:is(.image-block,.scp-image-block) :is(.image-caption,.scp-image-caption) {
    background: transparent;
}

:is(:where(#page-content) table:not(.form),table.wiki-content-table) th {
    color: rgb(var(--basalt-undertone));
}
:is(:where(#page-content) table:not(.form),table.wiki-content-table) tr {
    background-color: rgb(var(--basalt-secondary-color));
}
:is(:where(#page-content) table:not(.form),table.wiki-content-table) tr:where(:nth-child(2n)) {
    background-color: rgb(var(--basalt-background-color),.125);
}

/*----------------------------------*/

.yui-navset.yui-navset-top>ul.yui-nav {
    background: none;
    gap: 0;
    font-family: var(--UI-font);
    font-size: 1.25em;
}
.yui-navset.yui-navset-top>ul.yui-nav li {
    flex-grow: 0;
}
.yui-navset.yui-navset-top>ul.yui-nav li::before,
.yui-navset.yui-navset-top>ul.yui-nav li.selected::after {
    all: unset;
}
.yui-navset.yui-navset-top>ul.yui-nav li a {
    position: relative;
    padding: .75em;
}
.yui-navset.yui-navset-top>ul.yui-nav li a::before {
    content: "";
    position: absolute;
    width: 0;
    height: .175rem;
    inset-block-end: 0;
    inset-inline-start: 0;
    background-color: currentColor;
    transition: width .175s ease-out;
}
.yui-navset.yui-navset-top>ul.yui-nav li a:is(:hover,:focus)::before,
.yui-navset.yui-navset-top>ul.yui-nav li.selected a::before {
    width: 100%;
}

.yui-navset.yui-navset-top .yui-content {
    border: none;
    padding-inline: 0;
}

/*----------------------------------*/

.hovertip {
    --general-border-color: 0,0,0,0;
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}
.bibitems .title, .footnotes-footer .title,
.hovertip .content .footnote .f-heading, .hovertip .content .reference .r-heading {
    font-family: var(--mono-font);
    --basalt-light-text-color: var(--basalt-main-text-color);
}

/*-------- CODE COLORS --------*/

.code {
    --_special: 106,152,255;
    --_string: 106,152,255;
    --_number: var(--basalt-negative-color);
    --_var: var(--basalt-positive-color);
    --_reserved: var(--basalt-undertone);
}

/*----------------------------------*/

.filebox {
    --dir: to right;
    position: relative;
    padding: .5rem 1.75rem;
    margin-block: .75rem;
}
.filebox::before {
    content: attr(data-title);
    position: absolute;
    background-color: rgb(var(--basalt-overtone));
    font-family: var(--UI-font);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    padding: .125em .5em;
    inset-inline-start: 0;
    inset-block-end: 100%;
    transform: translateY(50%);
}
.filebox::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--basalt-secondary-color));
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    -webkit-mask-image: linear-gradient(var(--dir), white 40%, transparent);
    mask-image: linear-gradient(var(--dir), white 40%, transparent);
    z-index: -1;
}

/*----------------------------------*/

#main-content > .page-tags {
    flex-direction: row-reverse;
    margin-block: 1rem;
}

#main-content>.page-tags>span {
    align-items: center;
    padding: .5rem;
    gap: .5rem;
    box-sizing: border-box;
    max-width: calc(100% - var(--main-content-side-margin)*2);
    background-color: rgb(var(--header-background-color));
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}

#main-content > .page-tags::before {
    content: "";
    display: block;
    background-color: rgb(var(--basalt-main-text-color),.575);
    min-width: var(--main-content-side-margin);
    height: .05rem;
    align-self: center;
}

/*----------------------------------*/
/*-------- BOTTOM AREA --------*/
/*----------------------------------*/

#more-options-button { color: rgb(var(--basalt-main-text-color)); }

#action-area, #page-options-container {
    width: auto;
    margin-inline: var(--main-content-side-margin);
}

#history-form-1>table.form>tbody>tr:first-child>td:first-child,
#revision-list .page-history tr[id*=revision-row] td:first-child,
.diff-box table.page-compare th {
    --basalt-light-text-color: var(--basalt-main-text-color);
}

#main-content .pager {
    --basalt-light-text-color: var(--basalt-main-text-color);
}

#action-area .page-source {
    background: rgb(var(--code-background-color));
    padding: .75em 1em;
}

.owindow { --basalt-light-text-color: var(--basalt-main-text-color); }

/*-----------------------------*/

#footer {
   --_img-ratio: 2.8125;
    background: transparent;
    position: relative;
    overflow: visible;
    padding-top: calc(100vw/var(--_img-ratio) - 2.25em);
}
#footer::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: var(--_img-ratio);
    background-image: linear-gradient(to bottom, transparent calc(50% - 1.5rem), rgb(var(--bottom-area-background-color)) calc(100% - .75rem)), var(--lumina-footer-image);
    background-size: cover;
    background-position: top;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 12.5%, white 32.5%);
    mask-image: linear-gradient(to bottom, transparent 12.5%, white 32.5%);
    z-index: -1;
}

div#license-area {
    font-family: var(--mono-font);
    padding: var(--bottom-area-padding);
}
#license-area::before, #license-area::after { all: unset; }

/*----------------------------------*/
/*-------- MOBILE QUERY --------*/
/*----------------------------------*/

@media only screen and (max-width: 1024px) {
:root {
    --lumina-header-top-gap: 0rem;
    --main-content-side-margin: calc(0.25rem + 2.25vw);
}

#header {
    grid-template-areas:
        '. search . user'
        'h-link h-link h-link h-link'
        'top-bar top-bar top-bar top-bar';
    grid-template-columns: var(--side-bar-button-width) var(--search-button-width) 1fr var(--user-button-width);
    grid-template-rows: var(--lumina-top-bar-height) 1fr var(--lumina-top-bar-height);
}

#login-status span.printuser>a { background: transparent; }

#header-extra-div-1 { all:unset; }

#top-bar div[class*=top-bar]>ul::before { all: unset; }

#top-bar div.mobile-top-bar>.open-menu {
    position: fixed;
    left: 0;
    top: var(--lumina-header-top-gap);
    width: var(--side-bar-button-width);
    height: var(--lumina-top-bar-height);
}
#top-bar div[class*=top-bar]>ul>li>a {
    padding-inline: var(--header-UI-font-size);
}

#header div.open-menu a::before {
    height: 100%;
    -webkit-backdrop-filter: blur(var(--basalt-UI-blur));
    backdrop-filter: blur(var(--basalt-UI-blur));
}

#page-content {
    grid-template-columns: [full-width-start] var(--main-content-side-margin) [breakout-start] minmax(0,1fr) [content-start] minmax(0,12fr) [content-end] minmax(0,1fr) [breakout-end] var(--main-content-side-margin) [full-width-end];
    min-height: unset;
}

}
[[/code]]
[[/collapsible]]
[[/iftags]]

[[module css]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Alumina/1');
[[/module]]
[[div_]]
[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Alumina/1
]]
[[/div]]

Lumina Crash Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source