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.
タイトルは行の最初に1~6個の"+"を置くことで作成できます。
Titles can be created by putting between one and six plus "+" at the start of the line.
第1タイトル First Title
第2タイトル Second Title
第3タイトル Third Title
第4タイトル Fourth Title
第5タイトル Fifth Title
第6タイトル Sixth Title
- タブレーター Tabulator
- タブレーション Tabulation
- Long Tab
- このタブの名前はなぜだかとても長いです。何でしょうか?とても奇妙ですね。 This tab has a really long name for some odd reason. I wonder why? It is very strange.
- 空のタブ 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 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"]]
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://japan-backrooms-storage.wdfiles.com/local--files/file%3A9466112-5-0dm2/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://japan-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); /* Credit Module */ @import url("https://br-jpwiki.github.io/files/util/common/credit/style/style.css"); /* 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("https://japan-backrooms-wiki.wdfiles.com/local--files/start/logo.svg"); --header-title: "The Backrooms JP"; --header-subtitle: "ようこそ、再訪の空間へ。"; --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); } }

