Hallprint
This theme was created by scutoid studios, based on the Black Highlighter by Woedenaz, licensed under CC-BY-SA-3.0. Colour help from the awesomest user on this site aka The Beach aka BUBBLINGBEACH!
The icons for the options at the bottom of the page are from the Backrooms Chinese Wiki, licensed under CC-BY-SA-3.0.
This theme is the default theme for all pages, you don't need to import it to your pages.
This page shows the way the theme looks with no collapsible sidebar. If you want this on your page, use Show Sidebar to do so.
Examples

This is the Image Block component.
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
This is a tab view.
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 class="darkblock"]]
[[/div]]
[[div class="dark-styled-quote"]]
[[/div]]
[[div class="lightblock"]]
[[/div]]
[[div class="styled-quote"]]
[[/div]]
To add a title which looks like a page title, use:
[[div class="meta-title"]]
+ Theme Code
- Close
This is all of the theme code normally running on the site, except for the fact that the theme page also imports the user-flairs page to give fancy names to staff. This code doesn't do that so it can be imported by other branches, which will want to have their staff highlighted.
/* Remove Default Wikidot Styles */
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
 
 /* Base BHL Theme */ 
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
 
/* Fantasque Sans Mono Font */
@import url("https://backrooms-wiki.wikidot.com/component:fantasque-sans-mono/code/1");
 
/* Public Sans Font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
/* Fancy Forums */
@import url("https://backrooms-wiki.wikidot.com/component:forum-theme/code/1");
 
/* Mask Icons */
@import url("https://backrooms-wiki.wikidot.com/component:mask-icons/code/1");
 
/* Material Icons */
@import url(https://backrooms-wiki.wdfiles.com/component:material-icons/code/1);
 
/* Root Variables: When making a new theme, see: https://github.com/Nu-SCPTheme/Black-Highlighter/blob/master/src/css/parts/root.css */
 :root {
    /* S-CSS-P */
     --theme-base: "black-highlighter";
     --theme-id: "nuliminal";
     --theme-name: "NuLiminal Theme";
 
    /* Header */
     --logo-image: url("http://backrooms-wiki.wdfiles.com/local--files/component%3Atheme/logo.svg");
     --header-title: "The Backrooms";
     --header-subtitle: "You've been here before.";
     --swatch-headerh1-color: var(--white-monochrome);
     --swatch-headerh2-color: var(--white-monochrome);
 
    /* Typefaces */
     --body-font: 'Public Sans', Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica", sans-serif;
     --UI-font: "Fantasque Sans Mono", Courier New, Ubuntu Mono, Consolas, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --header-font: 'Fantasque Sans Mono', Courier New, Ubuntu Mono, Consolas, monospace;
     --title-font: var(--header-font);
     --mono-font: 'Fantasque Sans Mono', Recursive, Consolas, monaco, monospace;
 
    /* Colors */
     --white-monochrome: 252, 252, 252;
     --pale-gray-monochrome: 237, 233, 223;
     --light-pale-gray-monochrome: 237, 233, 223;
     --very-light-gray-monochrome: 220, 215, 210;
     --light-gray-monochrome: 165, 160, 155;
     --gray-monochrome: 77, 67, 54;
     --dark-gray-monochrome: 60, 56, 42;
     --black-monochrome: 31, 28, 20;
     --pale-accent: 230, 23, 68;
     --bright-accent: 161, 147, 112;
     --medium-accent: 122, 109, 82;
     --dark-accent: 122, 109, 82;
     --alt-accent: 221, 102, 17;
 
    /* Liminal Variables */
     --header-text-shadow: 0px 2px 3px rgba(0,0,0,0.8);
     --header-text-shadow-hover: 0px 5px 3px rgba(0,0,0,0.3);
     --quote-shadow: 0 2px 4px rgba(var(--black-monochrome),0.25);
     --footer-message: var(--header-subtitle);
 
    /* MOST THEMES SHOULDN'T CHANGE THIS: makes editing consistent across themes, adds programming ligatures */
 
     --editor-font: 'Fantasque Sans Mono', Recursive, Consolas, monaco, monospace;
 
    /* Swatches */
     --swatch-secondary-color: var(--white-monochrome);
     --swatch-menubg-color: var(--white-monochrome);
     --rating-module-bg-color: var(--swatch-menubg-color);
     --swatch-sidebar-collapsible-tab-bg: var(--swatch-primary-darkest);
     --swatch-topmenu-bg-color: var(--gray-monochrome);
     --swatch-topmenu-border-color: var(--swatch-topmenu-bg-color);
     --gradient-header: linear-gradient( to bottom, rgb(var(--bright-accent)) 0%, rgb(var(--dark-accent)) 100%);
     --gradient-background: linear-gradient( to bottom, rgb(var(--swatch-background)), rgb(var(--swatch-background)));
     --diagonal-stripes: transparent;
     --background-gradient-distance: 40rem; /* will not go further than 100vh */
     --background-gradient-color: var(--gray-monochrome); /* This will display at low opacity */
 
    /* Measurements */
     --scrollbar-width: 0.7rem;
     --swatch-background: var(--pale-gray-monochrome);
     --sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
     --body-width-on-desktop: 45.75rem;
     --header-height-on-desktop: 9rem;
     --header-height-on-mobile: 9rem;
 
    /* Wallpaper Mask */
     --wallpaper-mask: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22windows-1252%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22106.667%22%20height%3D%22154.667%22%3E%3Cpath%20d%3D%22M72.547%201158.57H5.074V-6.465h67.473V1158.57M119.027%20710.25v-58.977l126.95%20154.438L363.43%20654.77v61.476L246.477%20865.688%20119.027%20710.25%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M119.027%20951.652V790.715l125.45%20153.441L363.43%20792.715v166.933L247.477%201108.09l-128.45-156.438M763.27%201158.57h-63.473l63.473-80.97ZM472.387%201158.57h-67.473V-6.465h67.473V1158.57M518.867%20995.133v-58.977L645.816%201090.6%20763.27%20939.656v61.474l-116.954%20149.44-127.449-155.437M763.27%20657.27%20647.316%20805.711%20518.867%20649.273V488.336l125.449%20153.441L763.27%20490.336V657.27M518.867%201158.57v-82.97l67.973%2082.97z%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M763.27%20413.867%20646.316%20563.309%20518.867%20407.867v-58.972l126.949%20154.437L763.27%20352.391v61.476M363.43%20128.98%20246.477%20278.422l-127.45-155.438V64.008l126.95%20154.437L363.43%2067.504v61.476%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3Cpath%20d%3D%22M363.43%20205.449v166.934L247.477%20520.824l-128.45-156.437V203.449l125.45%20153.442L363.43%20205.449M518.867%2071.504V-6.465h67.973l57.476%2070.473%2055.481-70.473h63.473V79.5L647.316%20227.941%20518.867%2071.504%22%20style%3D%22fill%3A%23333%3Bfill-opacity%3A1%3Bfill-rule%3Anonzero%3Bstroke%3Anone%22%20transform%3D%22matrix%28.13305%200%200%20-.13255%20-.633%20153.92%29%22%2F%3E%3C%2Fsvg%3E);
     --wallpaper-mask-size: 2.3rem;
}
 
/* Wallpaper */
/* Header Wallpaper */
 #skrollr-body::before {
     background-color: rgba(var(--swatch-topmenu-bg-color),0.2);
     background-repeat: repeat;
     background-size: 0.25em 0.25em;
     width: 100%;
     height: 9rem;
     position: absolute;
     top: 0;
     left: 0;
     content: "";
     -webkit-mask-image: var(--wallpaper-mask);
     mask-image: var(--wallpaper-mask);
     -webkit-mask-repeat: repeat;
     mask-repeat: repeat;
     -webkit-mask-size: var(--wallpaper-mask-size);
     mask-size: var(--wallpaper-mask-size);
     -webkit-mask-position: center;
     mask-position: center;
}
 #skrollr-body::before {
     background-color: rgba(var(--swatch-topmenu-bg-color),0.2);
     background-repeat: repeat;
     background-size: 0.25em 0.25em;
     width: 100%;
     height: var(--header-height-on-desktop);
     position: absolute;
     top: 0;
     left: 0;
     content: "";
     -webkit-mask-image: var(--wallpaper-mask);
     mask-image: var(--wallpaper-mask);
     -webkit-mask-repeat: repeat;
     mask-repeat: repeat;
     -webkit-mask-size: var(--wallpaper-mask-size);
     mask-size: var(--wallpaper-mask-size);
     -webkit-mask-position: center;
     mask-position: center;
}
 #skrollr-body {
     height: var(--header-height-on-desktop);
     width: 100vw;
}
 
/* Header Wallpaper */
 #content-wrap::before, #content-wrap::after {
     content: "";
     width: 100%;
     height: var(--background-gradient-distance);
     top: var(--final-header-height-on-desktop);
     left: 0;
     position: absolute;
     z-index: -1;
     display: block;
     max-height: 100vh;
     background-image: linear-gradient( to top, rgba(var(--background-gradient-color), 0) 0%, rgba(var(--background-gradient-color), 0.013) 8.1%, rgba(var(--background-gradient-color), 0.049) 15.5%, rgba(var(--background-gradient-color), 0.104) 22.5%, rgba(var(--background-gradient-color), 0.175) 29%, rgba(var(--background-gradient-color), 0.259) 35.3%, rgba(var(--background-gradient-color), 0.352) 41.2%, rgba(var(--background-gradient-color), 0.45) 47.1%, rgba(var(--background-gradient-color), 0.55) 52.9%, rgba(var(--background-gradient-color), 0.648) 58.8%, rgba(var(--background-gradient-color), 0.741) 64.7%, rgba(var(--background-gradient-color), 0.825) 71%, rgba(var(--background-gradient-color), 0.896) 77.5%, rgba(var(--background-gradient-color), 0.951) 84.5%, rgba(var(--background-gradient-color), 0.987) 91.9%, rgb(var(--background-gradient-color)) 100%);
}
 #content-wrap::before {
     opacity: 0.04;
     -webkit-mask-image: var(--wallpaper-mask);
     mask-image: var(--wallpaper-mask);
     -webkit-mask-repeat: repeat;
     mask-repeat: repeat;
     -webkit-mask-size: var(--wallpaper-mask-size);
     mask-size: var(--wallpaper-mask-size);
     -webkit-mask-position: center;
     mask-position: center;
}
 #content-wrap::after {
     opacity: 0.1;
}
 #container-wrap-wrap::before {
     background: linear-gradient(
         to bottom,
         rgba(var(--swatch-topmenu-bg-color), 0) 0%,
         rgba(var(--swatch-topmenu-bg-color), 0.013) 5%,
         rgba(var(--swatch-topmenu-bg-color), 0.049) 10.1%,
         rgba(var(--swatch-topmenu-bg-color), 0.104) 15.2%,
         rgba(var(--swatch-topmenu-bg-color), 0.175) 20.5%,
         rgba(var(--swatch-topmenu-bg-color), 0.259) 25.9%,
         rgba(var(--swatch-topmenu-bg-color), 0.352) 31.6%,
         rgba(var(--swatch-topmenu-bg-color), 0.45) 37.5%,
         rgba(var(--swatch-topmenu-bg-color), 0.55) 43.8%,
         rgba(var(--swatch-topmenu-bg-color), 0.648) 50.4%,
         rgba(var(--swatch-topmenu-bg-color), 0.741) 57.4%,
         rgba(var(--swatch-topmenu-bg-color), 0.825) 64.9%,
         rgba(var(--swatch-topmenu-bg-color), 0.896) 72.8%,
         rgba(var(--swatch-topmenu-bg-color), 0.951) 81.3%,
         rgba(var(--swatch-topmenu-bg-color), 0.987) 90.3%,
         rgb(var(--swatch-topmenu-bg-color)) 100%
     );
     z-index: -1;
     content: "";
     top: 0;
     left: 0; 
     position: absolute; 
     width: 100%; 
     height: var(--header-height-on-desktop);
}
 
/* container wrap bug */
 #container, #container-wrap, #container-wrap-wrap {
     width: 100vw;
}
 
/* Header Image */
 #header {
     background-image: none;
     z-index: 30;
}
 #header::before {
     content: "";
     position: absolute;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     background-image: var(--logo-image);
     background-size: auto 16rem;
     background-position: center calc(50% - 0.15rem);
     background-repeat: no-repeat;
     opacity: 0.4;
}
 
/* Header Text */
 #header h1 {
     width: 100%;
}
 #header h1 a, #header h1 a:before {
     width: fit-content;
     transition: 0.2s;
     position: relative;
     bottom: 0;
     color: rgb(var(--swatch-headerh1-color));
}
 #header h1 a:hover:before {
     text-shadow: var(--header-text-shadow-hover);
     bottom: 3px;
}
 #header h1, #header h1 a {
     position: absolute;
     top: 1.4rem;
     margin: 0;
     display: flex;
     justify-content: center;
     z-index: 0;
     height: 1.5rem;
}
 #header h2, #header h2 span, #header h2 span::before {
     position: absolute;
     top: 2.05rem;
     margin: 0;
     width: 100%;
     display: flex;
     justify-content: center;
     font-weight: bold;
}
 #header h2 span::before {
     color: rgb(var(--swatch-headerh2-color));
}
 #header h1 a::before, #header h2 span::before {
     text-shadow: var(--header-text-shadow);
}
 
/* Top Bar */
 #header div[class*="top-bar"] > ul > li > a::before {
     display: none;
}
 
/* Main Content */
#main-content {
     --toc-body-bg-color: var(--white-monochrome);
}
 
/* Div Boxes */
 .darkblock {
     color: rgb(var(--white-monochrome));
     background: rgb(var(--dark-gray-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
}
 .lightblock {
     color: rgb(var(--black-monochrome));
     background: rgb(var(--white-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
}
 
/* Div Quotes */
 .styled-quote {
     color: rgb(var(--black-monochrome));
     background: rgb(var(--white-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--dark-gray-monochrome));
}
 .dark-styled-quote {
     color: rgb(var(--white-monochrome));
     background: rgb(var(--gray-monochrome));
     padding: 0.01rem 1rem;
     margin: 0.5rem 0;
     box-shadow: var(--quote-shadow);
     border-left: solid 6px rgb(var(--dark-gray-monochrome));
}
 
/* Headings */
 h1, h2, h3, h4, h5, h6 {
     margin-top: 0.5em;
     margin-left: 0;
}
 
/* Table of Contents */
 #page-content #toc {
     --toc-header-bg-color: var(--gray-monochrome);
     --toc-body-bg-color: var(--pale-gray-monochrome);
}
 
/* Table */
 .wiki-content-table {
     box-shadow: var(--quote-shadow);
}
 
/* Max-Width Fix */
 img, embed, video, object, iframe, table, dark#page-content div, #page-content div table {
     max-width: 100%;
}
 div#footer:after {
     content: var(--footer-message);
     border-left: solid 1px;
     padding-left: 0.5em;
     height: 1.4em;
     display: inline-flex;
     align-items: center;
     margin-left: 0.3em;
}
 
/* Horizontal Rule Fix */
 hr {
     clear: none;
     display: flex;
}
 .bibitems .bibitem:after, .footnotes-footer a[href*=javascript]:before {
     right: -20%;
     width: 140%;
}
 
/* Tab Gap */
 .yui-navset .yui-nav {
     background: rgb(var(--tabs-bottom-border-color));
     column-gap: 4px;
}
 .yui-navset {
     margin-top: 1rem;
}
 
/* Page Title */
 .meta-title p {
     margin: 0;
}
 
/* printuser */
 span.printuser img.small {
     transition: 0.5s;
     transition-timing-function: cubic-bezier (0,1,1,0);
}
 span.printuser img.small:hover {
     transform: scale(2);
     transition-delay: 0.5s;
}
 #avatar-hover-container {
     display: none;
}
 
/* Stop the unordered lists being in line with the text, this breaks SD banners! */
 ul {
     padding-inline-start: 2.5rem;
}
 
/* Template options text fix */
 form#edit-page-form #page-templates option, form#edit-post-form #page-templates option, form#new-post-form #page-templates option, form#new-thread-form #page-templates option {
     color: rgb(var(--swatch-menutxt-dark-color));
}
 
/* Message on Delete/Rename/Move */
 #rename-option-rename::before, #rename-option-delete::before {
     content: "Reminder: Backrooms Wiki users can rename/move pages they own, but use this responsibly (preferably only if there is an error with the name). Only staff are allowed to delete pages, even your own pages: ask Backrooms Wiki staff and we will help you!";
     color: red;
     display: block;
     margin-top: 1rem;
}
 
/* Fix Images */
 .scp-image-caption {
     width: inherit !important;
}
 :is(.image-caption, .scp-image-caption) {
     width: unset !important;
}
 :is(div.image-block,div.scp-image-block) {
     align-items: stretch;
}
 :is(div.image-block,div.scp-image-block) img.image {
     width: 100% !important;
     border: 0;
}
 .image-container.floatright {
     float: right;
     margin-left: 0.7em;
}
 
/* Fix Modals */
 #odialog-container .content > h1 ~ table, #odialog-container .modal-body > h1 ~ table {
     grid-auto-rows: auto;
}
 
/* Editor Font */
 #edit-page-textarea {
     font-family: var(--editor-font);
}
 
/* Make some variables editable at :root level */
 #side-bar {
     --sideblock-heading-text-color: inherit;
     z-index: 55 !important;
}
 
/* Inline maths actually inline */
 #MathJax_Message, .math-inline {
     display: inline;
}
 
/* License Box */
 #page-content .licensebox .collapsible-block-link {
     margin-left: .25em;
     padding: .25em;
     font-weight: 700;
     opacity: .5;
     color: rgb(var(--gray-monochrome));
     -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
     transition: opacity .5s ease-in-out;
}
 #page-content .licensebox .collapsible-block-link:hover {
     color: rgb(var(--dark-gray-monochrome));
}
 
/* Unordered Lists */
 #page-content ul:not(.yui-nav) {
     padding-left: 1rem;
     list-style: disc;
     margin: 1rem 0;
}
 
/* Footnote */
 a.bibcite:before, a.footnoteref:before {
     content: "[";
}
 a.bibcite:after, a.footnoteref:after {
     content: "]";
}
 
/* Little Patches */
 html {
     scroll-behavior: smooth;
}
 body {
     max-width: 100vw;
     overflow-x: hidden;
}
 #page-content {
     max-width: var(--body-width-on-desktop);
}
 
/* Mober Phone */
 @media only screen and (max-width: 56.25rem) {
     #side-bar {
         z-index: 55 !important;
    }
     :root {
         --header-height-on-desktop: var(--header-height-on-mobile);
         --final-header-height-on-desktop: var(--final-header-height-on-mobile);
    }
 
    /* MOBILE Header */
     #header::before {
         background-position: center calc(50% + 0.55rem);
    }
}
- Close
site-theme theme
page revision: 9, last edited: 21 Mar 2024 11:40
Edit Rate (+16) Tags Discuss (4) History Files Print Site tools + Options
The Backrooms

You've been here before.

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title
