Highlighter
This theme was created by
Liurd. The theme isn't bound to any group or canon, so feel free to import it!
To import this theme to your page, put the following text anywhere inside it:
[[include :backrooms-wiki:theme:highlighter]]
Customization

The theme allows you to customize your page in a rather easy way by add the following code to your page¹:
[[module CSS]]
:root{
--bright-accent:r,g,b;/*The main color and accent color of the theme.*/
--header-title:"Title";
--header-subtitle:"Subtitle";
--logo-image:url("URL link");
}
[[/module]]
+ Show code
- Hide code
:root {
                  --theme-base: "Black Highlighter";
                  --theme-id: "highlighter-bhl";
                  --theme-name: "Highlighter";
 
                  --logo-image: url("https://files.en.backrooms-wiki.ru/local--files/component%3Atheme/pridelogo.png");
                  --header-title: "The Backrooms";
                  --header-subtitle: "You've been here before.";
 
                  --white-monochrome: 252, 252, 252;
                  --pale-gray-monochrome: var(--white-monochrome);
                  --light-pale-gray-monochrome: var(--bright-accent);
                  --very-light-gray-monochrome: var(--bright-accent);
                  --light-gray-monochrome: var(--bright-accent);
                  --gray-monochrome: var(--bright-accent);
                  --dark-gray-monochrome: var(--white-monochrome);
                  --black-monochrome: 12, 12, 12;
                  --pale-accent: var(--bright-accent);
                  --bright-accent: 255, 88, 88;
                  --medium-accent: var(--bright-accent);
                  --dark-accent: var(--bright-accent);
                  --alt-accent: 242, 122, 8;
 
                  --swatch-text-dark: var(--black-monochrome);
                  --swatch-text-light: var(--black-monochrome);
                  --swatch-important-text: var(--bright-accent);
 
                  --swatch-headerh1-color: var(--black-monochrome);
                  --swatch-headerh2-color: var(--black-monochrome);
                  --swatch-topmenu-border-color: var(--bright-accent);
                  --swatch-topmenu-bg-color: var(--white-monochrome);
                  --swatch-menutxt-light-color: var(--black-monochrome);
 
                  --rating-module-button-color: var(--black-monochrome);
                  --rating-module-button-plus-color: var(--bright-accent);
                  --rating-module-button-negative-color: var(--bright-accent);
                  --rating-module-button-cancel-color: var(--bright-accent);
                  --rating-module-button-credit-color: var(--bright-accent);
                  --rating-module-text-color: var(--black-monochrome);
                  --rating-module-text-hover-color: var(--black-monochrome);
 
                  --toggle-roundness: 0.2rem;
 
                  --gradient-header: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#fcfcfc,#fcfcfc);
                  --gradient-topmenu-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#fcfcfc,#fcfcfc);
                  --diagonal-stripes: linear-gradient(transparent 0);
 
    --lh-paper-bg: var(--white-monochrome);
    --lh-book-color: var(--black-monochrome);
    --lh-tape-color: var(--black-monochrome),0.1;
    --lh-white-bg: var(--white-monochrome);
    --lh-dark-bg: var(--black-monochrome);
 
    --fnColor: rgb(var(--bright-accent));
}
 
::selection {
    background-color: rgb(var(--bright-accent));
}
 
::-moz-selection {
    background-color: rgb(var(--bright-accent));
}
 
#page-title {
  animation: fadeIn 2s;
}
 
#header {
  background-position: 0 2rem;
  background-size: auto 4rem;
  animation: logo 2.5s;
}
 
#header h1 a:before,#top-bar {
  animation: header 3s;
}
 
#header h2, #header h2 span, #header h2 span::before {
  animation: header2 3.5s;
}
 
#header h1 a:before,#header h2 span::before {
  background: rgba(var(--bright-accent),1);
}
 
  @keyframes fadeIn {
  0% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
  100% {clip-path: polygon(0% 0%,110% 0%, 100% 100%,0% 100%);}
  }
 
@keyframes logo {
  0% {background-position: -6rem 2rem;}
  75% {background-position: -6rem 2rem;}
  100% {background-position: 0 2rem;}
}
 
@keyframes header {
  0% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
  75% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
  100% {clip-path: polygon(0% 0%,110% 0%, 100% 100%,0% 100%);}
}
 
@keyframes header2 {
  0% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
  75% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
  100% {clip-path: polygon(0% 0%,110% 0%, 100% 100%,0% 100%);}
}
 
div#extra-div-1 {
    content: "";
    position: fixed;
    top:0;
    left: 0;
    width:100vw;
    height:100vh;
    background-color: #fcfcfc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}
 
    #top-bar {
    --dropdown-border-color: var(--bright-accent), 0.5;
}
 
    #side-bar,
    #side-bar:hover {
    background-color: #fcfcfc;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    padding-left: 0;
    }
 
 #page-content ul {
        list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIiA/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgd2lkdGg9IjFyZW0iIGhlaWdodD0iMXJlbSIgdmlld0JveD0iMCAwIDM1IDM1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGRlc2M+Q3JlYXRlZCB3aXRoIEZhYnJpYy5qcyA0LjYuMDwvZGVzYz4KPGRlZnM+CjwvZGVmcz4KPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSAxNy41IDE3Ljc1KSIgaWQ9IlZ5YlMtT3lmWS1tWVRQX3ZwaTVWcSIgID4KPHBhdGggc3R5bGU9InN0cm9rZTogcmdiKDAsMCwwKTsgc3Ryb2tlLXdpZHRoOiAwOyBzdHJva2UtZGFzaGFycmF5OiBub25lOyBzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiA0OyBmaWxsOnJnYih2YXIoLS1icmlnaHQtYWNjZW50KSkgcmdiKDI1Miw4OCw4OCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMC42OyIgdmVjdG9yLWVmZmVjdD0ibm9uLXNjYWxpbmctc3Ryb2tlIiAgdHJhbnNmb3JtPSIgdHJhbnNsYXRlKDAsIDApIiBkPSJNIC02LjQ3NDM1IC0xMS4wODcxNCBDIC0xMS4wOTkzNTAwMDAwMDAwMDEgLTkuNTAzODEgLTE4LjcyNDM1IDAuMjQ2MTkwMDAwMDAwMDAwMzUgLTE1LjE4MjY4MDAwMDAwMDAwMSA0Ljk1NDUzIEMgLTExLjY0MTAxMDAwMDAwMDAwMSA5LjY2Mjg2IC0wLjE4MjY4MDAwMDAwMDAwMTI5IDE2LjkxMjg2MDAwMDAwMDAwMiAyLjE5MjMxOTk5OTk5OTk5ODcgMTEuODI5NTMgQyA0LjU2NzMxOTk5OTk5OTk5OSA2Ljc0NjIgMjEuNDAwNjUgLTAuMDAzODAwMDAwMDAwMDAwMDI1NiAxNC40MDA2NDk5OTk5OTk5OTkgLTguNDYyMTQgQyA3LjQwMDY0OTk5OTk5OTk5OSAtMTYuOTIwNDcgLTEuODQ5MzUwMDAwMDAwMDAxMiAtMTIuNjcwNDcgLTYuNDc0MzUwMDAwMDAwMDAxIC0xMS4wODcxNCB6IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+CjwvZz4KPC9zdmc+');
    }
 
 #page-content a:not([href*="javascript:;"]) {
        color: rgba(var(--swatch-primary), 1);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        box-shadow: inset 0 0 0 0 rgba(var(--swatch-primary), 1);
        transition:
            box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border-radius:10px 8px 12px 6px;
    }
 
    #page-content a:not([href*="javascript:;"]):hover {
        box-shadow: inset 45rem 0 0 0 rgba(var(--swatch-primary), 1);
        text-decoration: none;
        color: rgb(var(--black-monochrome))
    }
 
 .collapsible-block a {
        color: rgba(var(--swatch-primary), 1);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        box-shadow: inset 0 0 0 0 rgba(var(--swatch-primary), 1);
        transition:
            box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border-radius:10px 8px 12px 6px;
    }
 
    .collapsible-block a:hover {
        box-shadow: inset 45rem 0 0 0 rgba(var(--swatch-primary), 1);
        text-decoration: none;
        color: rgb(var(--black-monochrome))
    }
 
 #page-content a:visited {
        color: rgba(120,120,120);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        box-shadow: inset 0 0 0 0 rgba(var(--black-monochrome));
        transition:
            box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border-radius:10px 8px 12px 6px;
    }
 
    #page-content a:visited:hover {
        box-shadow: inset 45rem 0 0 0 rgb(var(--black-monochrome));
        text-decoration: none;
        color: rgb(var(--black-monochrome));
    }
 
 #page-content a.newpage {
        color: rgba(var(--alt-accent), 1);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        box-shadow: inset 0 0 0 0 rgb(var(--alt-accent));
        transition:
            box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
            color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        border-radius:10px 8px 12px 6px;
    }
 
    #page-content a.newpage:hover {
        box-shadow: inset 45rem 0 0 0 rgb(var(--alt-accent));
        text-decoration: none;
        color: rgb(var(--black-monochrome));
    }
 
    .yui-navset .yui-nav li a::before {
        --clip-path:
            polygon(0 0,
                -0.25rem 0,
                -1rem 100%,
                0 100%);
    }
 
    .yui-navset .yui-nav li:hover a::before,
    .yui-navset .yui-nav li:active a::before,
    .yui-navset .yui-nav li:focus a::before {
        --clip-path:
            polygon(0 0,
                calc(100% + 1rem) 0,
                calc(100% + 0.75rem) 100%,
                0 100%);
    }
 
.yui-navset .yui-nav li.selected {
    transform: unset;
}
 
tbody {
    background-color: rgba(var(--white-monochrome),.05);
}
 
table.wiki-content-table {
    border-spacing: 0;
    overflow: auto;
    min-width: 100%
}
#main-content table.wiki-content-table th {
    color: rgba(var(--black-monochrome));
    background: rgba(var(--bright-accent),.6);
}
#main-content table.wiki-content-table td, table.wiki-content-table th {
    padding: 6px 13px
}
table.wiki-content-table tr {
    background-color: rgba(var(--white-monochrome),.05);
}
table.wiki-content-table tr:nth-child(odd) {
    background-color: rgba(var(--bright-accent),.05);
}
 
#page-content table.wiki-content-table th, #page-content table.wiki-content-table td, #page-content div.b-tables table.wiki-content-table th, #page-content div.b-tables table.wiki-content-table td {
    border: 0.15rem solid rgba(var(--tables-border),.6) !important;
}
 
#page-content hr{
display:grid;
margin: .5rem;
height:15px;
background:rgb(var(--bright-accent));
opacity:0.6;
border:none;
transform:skew(-15deg);
border-radius:3px 8px 10px 6px;
}
 
code,.code{
    background:rgba(var(--pale-gray-monochrome),.6);
}
 
.styled-quote {
    background-color: rgba(var(--gray-monochrome),.15);
    border-left: 0.5rem solid rgba(var(--gray-monochrome));
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.dark-styled-quote {
    background-color: rgba(var(--gray-monochrome),.6);
    border-left: 0.5rem solid rgba(var(--gray-monochrome));
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.lightblock {
    background-color: rgba(var(--gray-monochrome),.15);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.darkblock {
    background-color: rgba(var(--gray-monochrome),.6);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.dark-styled-quote a, .darkblock a{
    background-color: rgba(var(--white-monochrome),.6);
    border-radius:10px 8px 12px 6px;
    padding: 2px 0.6rem;
}
 
#page-content .dark-styled-quote hr, #page-content  .darkblock hr{
    background-color: rgba(var(--white-monochrome));
}
 
.marked{
        border-radius:90px 20px 120px 40px;
}
 
.clipped {
    padding-right:3.2rem;
    clip-path: polygon(-100% -100%,100% 0%,calc(100% - 3rem) 50%,100% 100%,0% 100%);
}
 
.clipblock{
    background-color: rgba(var(--white-monochrome));
    margin: 0.5rem 0.25rem;
    padding: 0.01rem 3.2rem 0.01rem 1rem;
    clip-path: polygon(-100% -100%,100% 0%,calc(100% - 3rem) 50%,100% 100%,0% 100%);
    border: 0.3rem solid rgba(var(--gray-monochrome));
}
 
.holeblock {
    background-color: #fcfcfc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-attachment: fixed;
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0rem 0rem 0.6rem 0 inset rgba(var(--black-monochrome),.6);
}
 
.glassblock {
    background-color: rgba(var(--white-monochrome),.2);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0.1rem 0.1rem 0.2rem 0 rgba(var(--black-monochrome),.6),inset 0rem 0rem 0.2rem 0 rgba(var(--black-monochrome),.6);
    border: 0.15rem solid rgba(var(--black-monochrome));
    border-radius: 0.3rem;
    backdrop-filter: blur(1px);
}
 
div.wiki-note {
    background-color: rgb(var(--bright-accent));
}
 
#toc #toc-list a:hover{
        color: rgb(var(--black-monochrome));
}
 
#page-content .top-box:before {
    display: none;
}
 
#page-content .top-box {
    background: rgba(var(--bright-accent),.2);
    border: 0.1rem solid rgb(var(--bright-accent));
    color: rgb(var(--black-monochrome));
}
 
#page-content .top-box .gradient-box {
    background: unset;
    padding: 0.5rem;
}
 
#page-content .header-diamond {
    background: unset;
}
 
#page-content .header-diamond .diamond-pattern {
    background: unset;
}
 
#page-content .header-diamond .diamond-color {
    mask: unset;
    -webkit-mask: unset;
    background: rgba(var(--bright-accent),.2);
    border: 0.1rem solid rgb(var(--bright-accent));
}
 
#page-content .header-diamond .bg {
    mask: unset;
    -webkit-mask: unset;
    background: transparent;
}
 
#page-content .header-diamond .diamond-image {
    background: rgb(var(--black-monochrome));
}
 
#page-content .header-diamond:after {
    display: none;
}
 
#page-content .bottom-box ul li {
    color: rgb(var(--black-monochrome));
}
 
#odialog-container div.owindow {
    border: 0.2rem solid rgba(var(--swatch-alternate-color), 0.25);
    box-shadow: none;
}
 
.footnotes-footer, .bibitems{
    background-color: rgba(var(--white-monochrome),.2);
}
 
.footnotes-footer .title, .bibitems .title{
    border-radius:10px 8px 12px 6px;
}
 
#license-area a:hover{
    color: rgb(var(--black-monochrome));
}
 
#license-area a::before{
    background-color: rgba(var(--bright-accent),.2);
}
 
.fncon {
    background: rgba(var(--bright-accent),.15);
    border:none;
    border-left: 0.5rem solid rgb(var(--bright-accent));
    padding-right: 2rem;
    clip-path: polygon(-100% -100%,100% 0%,95% 50%,100% 100%,0% 100%);
    backdrop-filter: blur(2px);
}
 
.with-string::before{
    clip-path: polygon(-100% -100%,100% 0%,100% 100%,50% 98%,0% 100%);
}
 
.thread-container .post .long .content .image:not(.collapsible-block .image) {
    object-fit: cover;
    max-height: 2em;
    width: 100%;
    transition: max-height 0.5s;
}
 
.thread-container .post .long .content .image:hover:not(.collapsible-block .image) {
    max-height: 100em;
}
 
div.scpnet-interwiki-wrapper {
    margin: 0;
    width: auto;
}
 
@media (min-width:768px) {
 
    div.scpnet-interwiki-wrapper,
    iframe.scpnet-interwiki-frame {
        width: 100%;
    }
}
 
/* Content Warning */
#page-content div#u-adult-warning {
    width: fit-content;
    margin: 0 auto 1.25rem;
    padding: 0.5rem 1rem;
    border: 3px solid #333;
    background: #e4e4e4;
    color: #333;
    text-align: center;
    font-weight: bold;
}
 
#page-content div#u-adult-warning>div#u-adult-header {
    font-size: 300%;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
    color: #901;
}
 
#page-content div#u-adult-warning>div#u-adult-header p {
    margin: 0;
}
 
#page-content div#u-adult-warning>.error-block {
    color: unset;
    padding: unset;
    margin: unset;
    border: unset;
    margin-bottom: 1em;
}
 
/* Remove the white border of the user info php */
#odialog-container .owindow>div.modal-body>img[style*="padding: 2px 8px;"]:first-child {
    background-color: initial !important;
}
 
/* SHORT DESCRIPTION OF CHANGES */
form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before {
    content: "SHORT DESCRIPTION OF CHANGES:";
}
 
table.page-history tr:nth-of-type(2) td:nth-of-type(1)::before {
    content: "REV.";
}
 
table.page-history tr:nth-of-type(2) td:nth-of-type(3)::before {
    content: "FLAGS";
}
 
table.page-history tr:nth-of-type(2) td:nth-of-type(4)::before {
    content: "ACTIONS";
}
 
table.page-history tr:nth-of-type(2) td:nth-of-type(5)::before {
    content: "BY";
}
 
table.page-history tr:nth-of-type(2) td:nth-of-type(6)::before {
    content: "DATE";
}
 
#site-tools-box::before {
    content: "Site tools";
}
 
#main-content .page-tags::before {
    content: "Tags\0021b4";
}
 
#login-status #account-options li>a[href*="/messages"]::after {
    content: "Messages";
}
 
[id*="u-credit"] div.credit-back::before {
    content: "Back";
}
 
#toc #toc-action-bar a::after {
    content: "Content";
}
 
/* Sidebar logo adaption */
#side-bar .side-block.media a[href*="discord"] {
    --social-logo-mask: var(--discord-mask-round);
}
 
#side-bar .side-block.media a[href*="b23.tv"] {
    --social-logo-mask: var(--bilibili-mask-round);
    --social-color: var(--bilibili-icon-color);
}
 
#side-bar .side-block.media a[href*="fandom"] {
    --social-logo-mask: var(--fandom-mask-round);
    --social-color: var(--fandom-icon-color);
}
 
#side-bar .side-block.media a[href*="tieba"] {
    --social-logo-mask: var(--tieba-mask-round);
    --social-color: var(--tieba-icon-color);
}
- Hide code
Examples

Peace and love!
A horizontal rule can be created with 5 hyphens"-----" and extends across the whole page if it's not placed inside anything. 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 tabview.
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
Foot³
this text
is here
so you can
see how
everything looks
with different
formats^and
other_stuff
including links that do not
And links that do exist!
WARNING
CAUTION
SAFE
[[div class="styled-quote"]]
[[/div]]
[[div class="dark-styled-quote"]]
just a link
[[/div]]
[[div class="lightblock"]]
[[/div]]
[[div class="darkblock"]]
just a link
[[/div]]
[[div class="darkblock marked"]]
Add "marked" to get a marked effect!
[[/div]]
[[div class="darkblock clipped"]]
Add "clipped" to get a clipped effect!
[[/div]]
[[div class="clipblock"]]
Or use this!
[[/div]]
[[div class="holeblock"]]
Bloody hell mate, why did you clip my theme?
[[/div]]
[[div class="glassblock"]]
Your eyesight is failing. It won't be long before your world goes completely black.
——Level 668
[[/div]]
[[note]]
[[/note]]
paper-theme theme
page revision: 15, last edited: 30 Jun 2023 22:10
Edit Rate (+28) Tags Discuss (5) History Files Print Site tools + Options
The Backrooms

You've been here before.

Customization

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title
