@media screen and (prefers-reduced-motion: no-preference) {
#page-title, #breadcrumbs, #page-content > * {
animation-name: fadeIn;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-fill-mode: backwards;
}
}
#page-title { animation-delay: 0s; }
@keyframes fadeIn {
from {
opacity: 0;
transform: translate(0,30px);
}
to {
opacity: 1;
transform: translate(0,0);
}
}
@import url('https://fontlibrary.org/face/fantasque-sans-mono');
@import url("http://backrooms-wiki.wdfiles.com/local--files/component%3Atheme/normalize-archived.css");
@import url("http://backrooms-wiki.wdfiles.com/local--files/component%3Atheme/bhl-archived.css");
@import url("http://backrooms-wiki.wikidot.com/local--files/component:theme/sidebar.css");
@import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700');
@import url('https://fastly.jsdelivr.net/gh/scp-cn-tech/sigma9@cn/modules/colstyle.min.css');
:root {
--theme-base: "black-highlighter";
--theme-id: "green-liminal";
--theme-name: "3 Green Liminal Theme";
--logo-image: url("https://t.tutu.to/img/Ky1n");
--header-title: "The Backrooms Three";
--header-subtitle: "你是否来过这里?";
--body-font: proxima-nova, sans-serif;
--header-font: 'IBM Plex Mono', '等线', sans-serif;
--title-font: 'Fantasque Sans Mono', monospace;
--mono-font: 'Fantasque Sans Mono', monospace;
--white-monochrome: 248, 250, 252;
--pale-gray-monochrome: 230, 233, 237;
--light-pale-gray-monochrome: var(--pale-gray-monochrome);
--very-light-gray-monochrome: 164, 170, 178;
--light-gray-monochrome: 192, 198, 204;
--lost-green-monochrome: 110, 164, 180;
--purple-monochrome: 124, 118, 138;
--gray-monochrome: 62, 90, 104;
--dark-gray-monochrome: 32, 50, 58;
--black-monochrome: 14, 22, 26;
--pale-accent: 122, 174, 192;
--bright-accent: 82, 134, 152;
--medium-accent: 50, 92, 106;
--dark-accent: 26, 52, 60;
#header,
#header::after,
#top-bar,
#top-bar::before,
#top-bar::after,
#skrollr-body,
#container {
background-image: none !important;
background-repeat: no-repeat !important;
}
/* 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);
--toc-body-bg-color: var(--white-monochrome);
--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.5;
}
/* 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;
}
/* 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: "记住:后室维基用户可以重命名/移动自己创建的页面,但请谨慎使用该功能(最好仅在名称中出现错误时使用)。只有工作人员允许删除页面,包括你自己创建的页面。若需自删,请在页面名称前面加上 deleted: 前缀,以方便工作人员追踪与核查。";
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);
}
}