:root {
--NP-yellow-white: 243, 239, 231;
--NP-yellow-pale: 223, 216, 204;
--NP-yellow-light: 143, 113, 84;
--NP-yellow-dark: 83, 64, 46;
--NP-yellow-accent: 115, 79, 44;
--NP-yellow-black: 35, 31, 27;
--NP-grey-white: 247, 246, 243;
--NP-grey-pale: 235, 234, 232;
--NP-grey-light: 179, 175, 168;
--NP-grey-dark: 91, 88, 86;
--NP-grey-accent: 123, 123, 123;
--NP-grey-black: 35, 31, 27;
--NP-{$custom-color-name}-white: {$custom-color-white};
--NP-{$custom-color-name}-pale: {$custom-color-pale};
--NP-{$custom-color-name}-light: {$custom-color-light};
--NP-{$custom-color-name}-dark: {$custom-color-dark};
--NP-{$custom-color-name}-accent: {$custom-color-accent};
--NP-{$custom-color-name}-accent: {$custom-color-black};
--NP-white: var(--NP-{$color}-white);
--NP-pale: var(--NP-{$color}-pale);
--NP-light: var(--NP-{$color}-light);
--NP-dark: var(--NP-{$color}-dark);
--NP-accent: var(--NP-{$color}-accent);
--NP-black: var(--NP-{$color}-black);
--header-title: "The Backrooms";
--header-subtitle: "你曾经来过这里";
--logo-image: url("https://github.backroomswiki.cn/New_BHL/image/logo.svg");
--body-font: Inter, "Noto Serif SC", Courier New, serif;
--header-font: Inter, "Noto Serif SC", Courier New, serif;
--mono-font: Recursive, "Noto Sans SC", Consolas, monaco, monospace;
--white-monochrome: var(--NP-pale);
--pale-gray-monochrome: var(--NP-pale);
--light-pale-gray-monochrome: var(--NP-pale);
--very-light-gray-monochrome: var(--NP-light);
--light-gray-monochrome: var(--NP-light);
--gray-monochrome: var(--NP-dark);
--dark-gray-monochrome: var(--NP-dark);
--black-monochrome: var(--NP-black);
--pale-accent: var(--NP-accent);
--bright-accent: var(--NP-accent);
--medium-accent: var(--NP-accent);
--dark-accent: var(--NP-accent);
--alt-accent: var(--NP-accent);
--gradient-header: none;
--gradient-topmenu: linear-gradient(to bottom,
hsla(0, 0%, 100%, 0) 0%,
hsla(0, 0%, 100%, 0) calc(100% - 0.125rem),
rgba(var(--NP-light), .5) calc(100% - 0.125rem),
rgba(var(--NP-light), .5) 100%);
--gradient-topmenu-mobile: linear-gradient(to bottom,
rgba(var(--NP-pale), 1) 0,
rgba(var(--NP-pale), 1) calc(var(--topbar-height-on-mobile) - 0.125rem),
rgba(var(--NP-light), .5) calc(var(--topbar-height-on-mobile) - 0.125rem),
rgba(var(--NP-light), .5) var(--topbar-height-on-mobile));
--header-height-on-desktop: 10rem;
--header-height-on-mobile: 10rem;
}
/* base */
h1, h2, h3, h4, h5, h6 {font-weight: 900;}
:is(h1, h2, h3, h4, h5, h6) span {font-size: 150%;}
.code {
border: 1px solid rgb(var(--NP-black));
background-color: rgb(var(--NP-white));
width: auto;
margin: 1rem auto;
word-break: break-all;
}
#skrollr-body {background: none;}
#header::before {filter: brightness(.6);}
#main-content::before {background-color: rgb(var(--NP-light));}
#header h1,
#header h1 a {top: 1.75rem;}
#header h2,
#header h2 span,
#header h2 span::before {top: 2.3rem;}
#top-bar div.mobile-top-bar > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li:focus,
#top-bar div.mobile-top-bar > ul > li:focus-within,
#top-bar div.top-bar > ul > li:hover,
#top-bar div.top-bar > ul > li:focus,
#top-bar div.top-bar > ul > li:focus-within {background-color: rgba(0,0,0,0);}
#top-bar div.mobile-top-bar > ul > li > a::before,
#top-bar div.top-bar > ul > li > a::before {display: none;}
#top-bar div.mobile-top-bar > ul > li > a,
#top-bar div.top-bar > ul > li > a {color:rgb(var(--NP-black))}
#top-bar div.mobile-top-bar > ul > li > a:hover,
#top-bar div.top-bar > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > a:focus,
#top-bar div.top-bar > ul > li > a:focus {color:rgb(var(--NP-light));}
#top-bar div.mobile-top-bar > ul > li > a::after,
#top-bar div.top-bar > ul > li > a::after {right: initial;}
#top-bar div.mobile-top-bar > ul > li > a::before,
#top-bar div.mobile-top-bar > ul > li > a::after,
#top-bar div.top-bar > ul > li > a::before,
#top-bar div.top-bar > ul > li > a::after {height: 0.15rem;}
#login-status a {color:rgb(var(--NP-black))}
#account-options {
border-color: rgb(var(--NP-black));
background: rgb(var(--NP-white));
}
#header h1 a > span {top: -3.5rem;}
#header h2 span::before, #header h1 a::before {
color: rgb(var(--NP-black));
text-shadow: none;
}
#top-bar div.mobile-top-bar > ul > li > ul,
#top-bar div.top-bar > ul > li > ul {rgba(var(--NP-black), 0.93)}
.lightblock,
.styled-quote,
.yui-navset .yui-content,
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a,
blockquote {background: rgb(var(--NP-white));}
.lightblock,
.styled-quote,
.darkblock,
.blockquote {
box-shadow: none;
filter: drop-shadow(1px 1px 4px grey);
}
hr {
height: 0;
border-top: 2px solid rgb(var(--NP-black));
}
a.collapsible-block-link {
color: rgb(var(--NP-black));
font-size: 1.5rem;
font-weight: 900;
text-decoration: none;
margin: auto;
display: table;
padding: .25rem .5rem;
transition: .5s all;
}
.collapsible-block-folded a.collapsible-block-link:hover,
.collapsible-block-folded a.collapsible-block-link:focus {
letter-spacing: 5px;
color: rgb(var(--NP-white));
background: rgb(var(--NP-dark));
}
.collapsible-block-unfolded a.collapsible-block-link {
letter-spacing: 5px;
color: rgb(var(--NP-white));
background: rgb(var(--NP-dark));
}
.collapsible-block-unfolded a.collapsible-block-link:hover,
.collapsible-block-unfolded a.collapsible-block-link:focus {
letter-spacing: normal;
color: rgb(var(--NP-black));
background: rgba(0,0,0,0);
}
.collapsible-block-folded a.collapsible-block-link:before {content:"▶"}
.collapsible-block-folded a.collapsible-block-link:after {content:"◀"}
.collapsible-block-unfolded a.collapsible-block-link:before,
.collapsible-block-unfolded a.collapsible-block-link:after {content:"▼"}
/* title */
#page-title, .NP-meta-title {
font-size: 3rem;
font-weight: 900;
border: 0;
display: flex;
justify-content: center;
}
#page-title:after,
#page-title:before,
.NP-meta-title:after,
.NP-meta-title:before {
content: " ";
flex-grow: 1;
height: 1px;
margin: auto 0.375rem;
background-color: rgb(var(--NP-black));
background-clip: content-box;
border-radius: .5rem;
}
#page-title:before, .NP-meta-title:before {
padding: .7rem .5rem .7rem 0;
border-right: 2px solid;
}
#page-title:after, .NP-meta-title:after {
padding: .7rem 0 .7rem .5rem;
border-left: 2px solid;
}
.NP-title {
font-family: "Noto Serif SC", Courier New, serif;
font-size: 2rem;
font-weight: 900;
margin-bottom: 2rem;
}
.NP-title.A, .NP-title.C {display: flex;}
.NP-title.A:after,
.NP-title.A.Center:before,
.NP-title.A.Right:before {
content: " ";
flex-grow: 1;
height: 1px;
margin: auto 0.375rem;
background-color: rgb(var(--NP-black));
}
.NP-title.B {
display: block;
border-bottom: 1px solid #a5a5a585;
}
.NP-title.C>p {
margin: 0;
display: flex;
flex-direction: column;
}
.NP-title.C .MainTitle {
font-size: 2.75rem;
font-weight: 900;
}
.NP-title.C .SubTitle {
font-size: 1rem;
margin-top: -.5rem;
}
.NP-title.A.Center, .NP-title.C.Center {justify-content: center;}
.NP-title.A.Right, .NP-title.C.Right {justify-content: right;}
.NP-title.A.Right:after {display: none;}
.NP-title.B.Center {text-align: center;}
.NP-title.B.Right {text-align: right;}
.NP-title.C.Center>p {align-items: center;}
.NP-title.C.Right>p {align-items: end;}
/* horizonline */
.NP-horizonline {
margin: 1.5rem 0;
border-color: rgb(var(--NP-black));
}
.NP-horizonline.A {
display: block;
width: 100%;
border: solid;
border-width: 2px 0;
height: 2px;
}
.NP-horizonline.B {
display: block;
width: 100%;
border: dashed;
border-width: 2px 0;
}
.NP-horizonline.C {
display: flex;
margin: 0;
min-height: 48px;
}
.NP-horizonline.C:after,
.NP-horizonline.C:before {
content: " ";
flex-grow: 1;
height: 2px;
margin: auto 0.375rem;
background-color: rgb(var(--NP-black));
}
.NP-horizonline.C img {
filter: brightness(0);
width: 3rem;
}
/* imageblock */
.NP-image-nonborder.NoCaption .scp-image-caption,
.NP-image-clip.NoCaption .scp-image-caption,
.NP-image-tape.NoCaption .scp-image-caption {display:none};
.NP-image-nonborder {
margin-top: .5rem;
margin-bottom: .5rem;
}
.NP-image-nonborder .scp-image-block {
box-shadow: none;
border: 0;
}
.NP-image-nonborder .scp-image-block .scp-image-caption,
.NP-image-clip .scp-image-caption,
.NP-image-tape .scp-image-caption {
background: none;
border: 0;
font-size: 1rem;
padding: .5rem;
}
.NP-image-clip .scp-image-block img,
.NP-image-tape .scp-image-block img {
transform: rotate(358deg);
-webkit-transform: rotate(358deg);
padding: 0;
filter: drop-shadow(1px 1px 4px grey);
border: 1rem solid rgb(var(--NP-white));
background: rgb(var(--NP-white));
min-width:0;
}
.NP-image-clip .scp-image-block,
.NP-image-tape .scp-image-block {
background: none;
border: 0;
box-shadow: none;
min-width:0;
position: relative;
}
.scp-image-block .scp-image-caption p {font-weight: 100;}
.scp-image-block .scp-image-caption strong {font-weight: 700;}
.NP-image-clip .scp-image-caption,
.NP-image-tape .scp-image-caption {padding-top: .5rem;}
/* textblock */
.NP-text {
width: 17rem;
padding: 1rem;
margin: 1rem;
filter: drop-shadow(1px 1px 4px grey);
min-height: 10rem;
position: relative;
}
.NP-text.Left {
float: left;
clear: left;
margin: 0 2em 1em 0;
}
.NP-text.Right {
float: right;
clear: right;
margin: 0 0 1em 2em;
}
.NP-text.Center {
margin-right: auto;
margin-left: auto;
}
.NP-text.Note {
background: linear-gradient(33deg, transparent 27px, rgb(var(--NP-white)) 0);
}
.NP-text.Note:after {
content: "";
display: block;
background-image: linear-gradient(54deg, transparent 28px, rgb(var(--NP-white)) 0);
position: absolute;
bottom: -6px;
left: 6px;
margin: 0;
height: 45px;
width: 36px;
filter: drop-shadow(1px 1px 4px grey);
transform: rotate(339deg);
}
.NP-text.Clip,
.NP-text.Tape {background: rgb(var(--NP-white));}
.NP-text-block {
min-height: 5rem;
margin: 1rem 2rem;
}
.NP-text-block.Title {
display: block;
padding: .5rem 1rem;
margin-top: 1.5rem;
background: rgb(var(--NP-white));
clear: both;
border-left: 10px solid;
position: relative;
filter: drop-shadow(1px 1px 4px grey);
}
.NP-text-block.Title .Title {
position: absolute;
display: block;
top: -10px;
left: 0;
height: fit-content;
padding: 0 1rem;
background: rgb(var(--NP-black));
color: white;
font-size: 1.5rem;
font-weight: 900;
}
.NP-text-block.Title .Title:before {
content: "";
position: absolute;
background-image: linear-gradient(135deg, transparent 7px, rgb(var(--NP-black)) 0);
height: 10px;
width: 10px;
left: -10px;
}
.NP-text-block.Colume {
padding: 1rem;
-webkit-column-count: 2;
-webkit-column-gap: 2rem;
column-count: 2;
column-gap: 2rem;
background: rgba(var(--NP-white),.75);
box-shadow: 1px 1px 4px grey;
}
.NP-text-block.Colume p {margin-top: 0;}
.NP-text-block.Colume img {margin-bottom: 1rem;}
.NP-text-block.Topic {font-size: 1rem;}
.scp-image-block {z-index: 2;}
.NP-text-block.Topic .Url a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
opacity: 0;
}
.NP-text-block.Topic .NP-image-clip.NoCaption {
position: relative;
width: fit-content;
margin: auto;
}
.NP-text-block.Topic {
filter: brightness(1) drop-shadow(1px 1px 4px grey);
transition: .5s filter;
}
.NP-text-block.Topic:has(.Url a:hover) {
filter: brightness(1.1) drop-shadow(1px 1px 10px grey);
}
.NP-text-block.Topic .NP-text {width: 70%;}
.NP-text-block.Topic .Comment {
margin: auto;
width: 60%;
padding: .5rem;
font-size: 110%;
line-height: 1.7;
}
/* textandimageblock */
.NP-image-clip .scp-image-block:before,
.NP-image-clip .scp-image-block:after,
.NP-text.Clip:before,
.NP-text.Clip:after {
content: '';
position: absolute;
pointer-events: none;
border: solid 0.25rem #3a3a3a;
transform: rotate(25deg);
filter: drop-shadow(1px 3px 3px black);
}
.NP-image-clip .scp-image-block:before,
.NP-text.Clip:before {
right: -10px;
height: 36px;
width: 9px;
top: -10px;
border-radius: 0 0 2rem 2rem;
border-top: 0;
z-index: 1;
}
.NP-image-clip .scp-image-block:after,
.NP-text.Clip:after {
top: -20px;
right: -19px;
height: 16px;
width: 14px;
border-radius: 2rem 2rem 0 0;
border-bottom: 0;
z-index: -1;
}
.NP-text.Clip:before,
.NP-text.Clip:after {transform: rotate(0);}
.NP-text.Clip:before {
right: 6px;
height: 34px;
width: 9px;
top: -1px;
}
.NP-text.Clip:after {
top: -13px;
right: 6px;
height: 9px;
width: 14px;
}
.NP-image-tape .scp-image-block:before {
left: -53px;
top: 5px;
}
.NP-image-tape .scp-image-block:after {
bottom: 35px;
right: -51px;
}
.NP-text.Tape:before {
left: -28px;
top: 5px;
}
.NP-text.Tape:after {
bottom: -1px;
right: -30px;
}
.NP-image-tape .scp-image-block:before,
.NP-image-tape .scp-image-block:after,
.NP-text.Tape:before,
.NP-text.Tape:after {
content: '';
position: absolute;
pointer-events: none;
width: 70px;
height: 25px;
background: #63858524;
border-radius: 0;
border: 2px groove #2b5a5b24;
transform: rotate(306deg);
-webkit-transform: rotate(306deg);
z-index: 1;
}
/* mobile */
@media only screen and (max-width: 768px) {
#header::before {top: 1rem;}
#page-title, .NP-meta-title {font-size: 1.75rem;}
a.collapsible-block-link {font-size: 1.25rem}
#top-bar > div.mobile-top-bar > div.open-menu > p > a {color:rgb(var(--NP-black))!important}
#top-bar > div.mobile-top-bar > div.open-menu > p > a:hover,
#top-bar > div.mobile-top-bar > div.open-menu > p > a:focus {color:rgb(var(--NP-light))!important}
.code {max-width: 80vw !important;}
.NP-title {font-size: 1.5rem;}
.NP-title.C .MainTitle {font-size: 2.25rem;}
.NP-title.C .SubTitle {font-size: .75rem;}
.NP-text {max-width: 13rem !important;}
.NP-text.Right,
.NP-text.Left {
margin-right: auto;
margin-left: auto;
float: none;
}
.NP-text-block {
width: auto;
margin-right: 0;
margin-left: 0;
}
.NP-text-block.Colume {
margin: 1rem 0;
padding: 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
}
.NP-text-block.Topic .NP-text {
width: 85%;
max-width: 100%!important;
}
.NP-text-block.Colume .NP-text {width: 80%;}
.NP-text-block.Title .Title {font-size: 1.2rem;}
.NP-text-block.Topic .Comment {width: 80%;}
#search-top-box:not(:focus-within)::before {background-color: rgb(var(--NP-black));}
.scp-image-block.block-left,
.scp-image-block.block-right {
width: 300px;
margin-right: auto;
margin-left: auto;
float: none;
max-width: none !important;
}
}
/* toc */
.NP-toc {
position: sticky;
height: 0;
top: 9rem;
z-index: 10;
}
#toc {
position: absolute;
top: -8rem;
right: -16rem;
border: 0 solid rgb(var(--NP-black));
border-width: 0 10px;
width: 10rem;
max-width: 10rem!important;
min-height: 1.65rem;
background: rgb(var(--NP-white));
}
#toc .title {
position: absolute;
top: -10px;
left: 0;
height: fit-content;
padding: 0 1rem;
background: rgb(var(--NP-black));
color: white;
font-size: 0;
}
#toc .title:after {
content: "目录";
font-size: 1.5rem;
font-weight: 900;
}
#toc .title:before {
content: "";
position: absolute;
background-image: linear-gradient(135deg, transparent 7px, rgb(var(--NP-black)) 0);
height: 10px;
width: 10px;
left: -10px;
}
#toc #toc-action-bar {
position: absolute;
bottom: -10px;
right: 0;
padding: 0 1rem;
background: rgb(var(--NP-black));
color: white;
}
#toc #toc-action-bar a {
font-size: 0;
color: rgb(var(--NP-white));
}
#toc #toc-action-bar a:first-child:after {content: "折叠";}
#toc #toc-action-bar a:last-child:after {content: "展开";}
#toc #toc-action-bar a:after {
font-size: 1.5rem;
font-weight: 900;
}
#toc #toc-action-bar:after {
content: "";
position: absolute;
background-image: linear-gradient(315deg, transparent 7px, rgb(var(--NP-black)) 0);
height: 10px;
width: 10px;
right: -10px;
bottom: 0;
}
#toc-list {
margin: 2em 0;
display: block;
max-height: 25rem;
overflow-y: auto;
}
#toc:has(#toc-list[style*="display: none;"]) {background: rgb(var(--NP-black));}
@media only screen and (max-width: 1230px) {
.NP-toc {
position: fixed;
right: 10px;
top: initial;
bottom: 12rem;
}
#toc:has(#toc-list[style*="display: none;"]) {
width: 3.5rem;
height: 1rem;
}
#toc-list {
max-height: 13rem;
height: 13rem;
}
.NP-toc:has(#toc-list[style*="display: none;"]) {bottom: 0rem;}
#toc .title:after, #toc #toc-action-bar a:after {font-size: 1rem;}
#toc {
right: 0;
opacity: .5;
transition: .5s opacity;
}
#toc:hover,
#toc:focus {opacity: 1;}
}
@media only screen and (max-width: 768px) {
#toc-list {
margin: 1.5em 0;
max-height: 10rem;
height: 10rem;
}
#toc {width: 8rem;}
.NP-toc:has(#toc-list[style*="display: none;"]) {bottom: -2rem;}
.NP-toc {bottom: 7rem;}
}
/* firefox */
@-moz-document url-prefix() {
.NP-toc #toc .title {left: 10px !important;}
.NP-toc #toc #toc-action-bar {right: 10px !important;}
}