@import url("https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap");
:root {
--global-white-color: 255, 252, 250;
--global-pale-color: 250, 240, 230;
--global-light-color: var(--global-dark-color);
--global-dark-color: 140, 25, 0;
--global-black-color: 60, 0, 0;
--global-accent-1: 255, 25, 0;
--global-accent-2: 180, 25, 0;
--global-accent-3: var(--global-dark-color);
--alt-color: 255, 120, 0;
--light-ui-txt: var(--global-dark-color);
--dark-ui-bg: 90, 15, 0;
--bright-ui-bg: var(--global-dark-color);
--bright-ui-txt: 255, 220, 140;
--paper-bg: var(--bright-ui-txt);
--paper-txt: var(--bright-ui-bg);
--global-border-width: 0.145rem;
--body-bg: 60, 25, 15;
--header-bg: var(--bright-ui-bg);
--header-txt: var(--bright-ui-txt);
--header-hover-bg: var(--paper-bg);
--header-hover-txt: var(--paper-txt);
--topbar-hover-bg: var(--header-hover-bg);
--topbar-hover-txt: var(--header-hover-txt);
--dropdown-bg: var(--header-hover-bg);
--dropdown-txt: var(--header-hover-txt);
--dropdown-hover-bg: var(--header-bg);
--dropdown-hover-txt: var(--header-txt);
--openmenu-hover-txt: 0, 0, 0, 0;
--sidebar-bg: var(--paper-bg);
--heading-bg: var(--bright-ui-bg);
--heading-txt: var(--bright-ui-txt);
--menu-bg: 0, 0, 0, 0;
--menu-txt: var(--paper-txt);
--menu-hover-bg: var(--bright-ui-bg);
--menu-hover-txt: var(--bright-ui-txt);
--rate-bg: var(--global-bg);
--rate-txt: var(--global-txt);
--tabview-hover-bg: var(--dark-ui-bg);
--tabview-selected-bg: var(--bright-ui-bg);
--tabview-selected-txt: var(--bright-ui-txt);
--toc-bg: var(--global-bg);
--toc-txt: var(--global-txt);
--toc-heading-bg: var(--bright-ui-bg);
--toc-heading-txt: var(--bright-ui-txt);
--toc-heading-hover-bg: var(--dark-ui-bg);
--dark-block-bg: var(--global-black-color);
--btn-txt: var(--link-primary);
--btn-hover-bg: var(--bright-ui-bg);
--btn-hover-txt: var(--bright-ui-txt);
--bottombar-bg: var(--header-bg);
--bottombar-txt: var(--header-txt);
--banner-height: 19rem;
--sidebar-width: 14rem;
--content-width: 52rem;
--dropdown-border-width: 0;
--banner-title-size: 7rem;
--banner-subtitle-size: .85rem;
--page-title-size: 2.5rem;
--header-title: "The Backrooms中文维基";
--banner-title-1: "异途";
--banner-title-2: "道门";
--banner-subtitle-1: "一粒金丹吞入腹";
--banner-subtitle-2: "始知我命不由天";
--sidebar-ui: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_sidebar-icon.svg");
--body-font: "Noto Serif SC", "Noto Serif TC", serif;
--banner-font: "Zhi Mang Xing", "Zhuque Fangsong (technical preview)", var(--body-font);
--header-font: var(--body-font);
--title-font: var(--body-font);
--ui-font: var(--body-font);
--mono-font: "PT Mono", "Noto Sans SC", "Noto Sans TC", Consolas, monaco, monospace;
}
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a {
display: flex;
align-items: center;
}
#login-status #account-options ul {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
width: 100%;
height: 100%;
}
#login-status #account-options ul li {
width: var(--user-drop-column-width);
height: var(--user-drop-row-height);
background: rgba(var(--user-drop-bg), .8);
color: rgba(var(--user-drop-txt));
transition: background var(--global-duration), color var(--global-hover-duration);
}
#login-status #account-options ul li:is(:hover, :focus, :active) {
background-color: rgba(var(--user-hover-drop-bg));
color: rgba(var(--user-hover-drop-txt));
transition: background var(--global-hover-duration), color var(--global-hover-duration);
}
#login-status #account-options ul li a {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
}
#login-status :is(.login-status-create-account, .login-status-sign-in) {
display: flex;
position: absolute;
top: 100%;
right: 0;
height: var(--user-drop-height);
width: var(--user-drop-width);
font-size: var(--global-font-size);
color: rgb(var(--user-drop-txt));
text-align: center;
text-decoration: none;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: opacity var(--global-duration), background var(--global-duration);
}
#login-status:is(:hover, :focus,:focus-within) :is(.login-status-create-account, .login-status-sign-in) {
pointer-events: auto;
opacity: 1;
transition: opacity var(--global-hover-duration), background var(--global-duration);
}
#login-status .login-status-create-account {
right: var(--user-drop-width);
}
#login-status :is(.login-status-create-account, .login-status-sign-in):is(:hover, :focus) {
background: rgb(var(--user-hover-drop-bg));
color: rgb(var(--user-hover-drop-txt));
transition: opacity var(--global-hover-duration), background var(--global-hover-duration);
}
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em;}
h6 { font-size: 1em; }
table[style^="margin:0;"],
table[style^="margin:0;"] :is(tbody, tr, td) {
display: contents;
}
#toc {
display: block;
width: fit-content;
margin: .5rem 0;
padding: 0;
}
#toc.floatleft {
margin: .5rem 1rem .5rem 0;
}
#toc.floatright {
margin: .5rem 0 .5rem 1rem;
}
#toc .title, #toc #toc-list {
margin: 0;
}
.achbox-medals, .achbox-plaques {
--wrap-bgcl-000: rgb(var(--global-pale-color));
--wrap-bgcl-111: var(--wrap-bgcl-000);
--wrap-bgcl-222: var(--wrap-bgcl-000);
--text-shadow111: rgb(var(--global-dark-color));
--text-shadow222: rgb(var(--global-light-color));
}
.sd-container {
--sd-border: var(--global-txt);
--sd-symbol: var(--sd-border);
--sd-bullets: var(--sd-border);
--sd-text: var(--dark-ui-txt);
}
.extrabox {
--box-border: var(--global-border);
--box-shadow: var(--global-border);
}
.wrapper {
--cecs-dark: var(--global-dark-color);
--cecs-light: var(--global-pale-color);
--swatch-text-general: var(--global-txt);
}
#container-wrap-wrap {
position: relative;
}
#extra-div-1, #extra-div-2, #extra-div-3, #extra-div-4 {
position: absolute;
z-index: -1;
width: 50%;
height: 80vh;
background: rgb(var(--dark-ui-bg));
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: auto 100%;
mask-repeat: repeat-x;
mask-size: auto 100%;
}
#extra-div-1 {
top: 0;
left: 0;
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
}
#extra-div-2 {
top: 0;
right: 0;
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2a.svg");
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2a.svg");
}
#extra-div-3 {
bottom: 0;
left: 0;
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
rotate: 180deg;
}
#extra-div-4 {
bottom: 0;
right: 0;
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg-2b.svg");
rotate: 180deg;
}
#header {
grid-template-rows: auto auto;
top: calc(0px - var(--header-height) - var(--topbar-height));
transition: top var(--global-duration);
}
#header:is(:hover, :focus-within) {
top: 0;
transition: top var(--global-hover-duration);
}
#header h1, #top-bar, #search-top-box, #login-status {
position: relative;
top: 0;
}
#header-extra-div-3 {
pointer-events: auto;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1rem;
}
#header-extra-div-1 {
background: rgb(var(--header-bg));
border: none;
box-shadow: 0 0 6rem rgb(var(--global-black-color));
}
#header h2 {
display: none;
}
#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li a {
background: rgb(var(--dropdown-bg));
}
#side-bar {
--global-border-width: 0;
padding-top: var(--sidebar-width);
}
#side-bar::before {
width: calc(var(--header-ui-size) * 0.7);
}
:is(#side-bar, #side-bar:hover, #side-bar:focus-within)::after {
position: absolute;
left: 0;
width: 100%;
height: var(--sidebar-width);
background: rgba(var(--menu-txt));
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_sidebar.svg");
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 80%;
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_sidebar.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: 80%;
}
#side-bar .side-block.media > div > a {
overflow: hidden;
}
#side-bar .side-block.media > div > a > img {
position: relative;
transform: translateX(-20rem);
filter: drop-shadow(rgb(var(--menu-txt)) 20rem 0);
}
:is(#side-bar, #interwiki) .heading,
#side-bar .collapsible-block a.collapsible-block-link {
padding: 0 .25rem;
font-size: 1rem;
font-weight: 900;
}
#side-bar :is(.collapsible-block-folded, .collapsible-block-unfolded-link) .collapsible-block-link:is(:hover, :focus) {
background: rgb(var(--dark-ui-bg));
}
#content-wrap {
width: var(--content-width);
max-width: 100%;
margin: 0 auto;
background: rgb(var(--light-ui-bg));
padding: var(--banner-height) 1rem 1rem;
box-sizing: border-box;
}
#main-content {
width: 100%;
background: rgb(var(--global-bg));
}
#extra-div-6 {
writing-mode: vertical-rl;
font-family: var(--banner-font);
font-size: var(--banner-title-size);
line-height: 1;
letter-spacing: -.15em;
position: absolute;
top: calc(var(--header-height) + var(--topbar-height));
left: 0;
width: 100%;
height: var(--banner-height);
}
#extra-div-6 span {
font-size: var(--banner-subtitle-size);
letter-spacing: -.15em;
}
#extra-div-6::before {
content: var(--banner-title-1);
display: block;
position: absolute;
left: 50%;
top: calc(50% - 8rem);
}
#extra-div-6::after {
content: var(--banner-title-2);
display: block;
position: absolute;
right: 50%;
bottom: calc(50% - 8rem);
}
#extra-div-6 span::before {
content: var(--banner-subtitle-1);
display: block;
position: absolute;
left: calc(50% - var(--banner-title-size));
top: calc(50% - 6.25rem);
}
#extra-div-6 span::after {
content: var(--banner-subtitle-2);
display: block;
position: absolute;
left: calc(50% - var(--banner-title-size) - var(--banner-subtitle-size));
top: calc(50% - 6.25rem);
}
#breadcrumbs {
text-align: center;
}
#page-title, .meta-title {
font-family: var(--title-font);
font-size: var(--page-title-size);
font-weight: 900;
line-height: 1;
letter-spacing: 0.1rem;
padding: 0;
border: none;
position: relative;
z-index: 1;
width: fit-content;
max-width: calc(100% - 7rem);
margin: 1.5rem auto 2.5rem;
}
.meta-title {
max-width: calc(100% - 5rem);
}
.meta-title p {
display: contents;
}
#page-title::after,
.meta-title::after {
content: "";
display: block;
position: absolute;
top: 100%;
left: -2.5rem;
right: -2.5rem;
height: 0;
border-top: 1.8rem solid transparent;
border-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line.svg") 100% 25% 0 /1.8rem 3.375rem 0;
}
#page-content {
padding: 0 1rem 4rem;
box-sizing: border-box;
position: relative;
}
.seal {
position: absolute;
background: rgb(var(--bright-ui-bg));
-webkit-mask-image: var(--seal-mask);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-image: var(--seal-mask);
mask-repeat: no-repeat;
mask-size: 100%;
pointer-events: none;
}
.seal-1 {
--seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-1.svg");
width: 7.5rem;
height: 7.5rem;
bottom: -6rem;
right: 1rem;
rotate: -17deg;
}
.seal-2 {
--seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-2.svg");
width: 2rem;
height: 4rem;
bottom: -3.5rem;
left: 0;
rotate: 24deg;
}
.seal-3 {
--seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-3.svg");
width: 3rem;
height: 5.5rem;
bottom: -1.5rem;
right: -0.75rem;
rotate: 0deg;
}
.seal-4 {
--seal-mask: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-4.svg");
width: 3rem;
height: 7.5rem;
bottom: -6rem;
left: 2.5rem;
rotate: -3deg;
}
div.page-rate-widget-box .rate-points {
font-weight: 900;
}
.creditBottomRate .page-rate-widget-box {
border: none;
}
:is(.image-block,.scp-image-block) :is(.image-caption,.scp-image-caption) {
background: rgb(var(--bright-ui-bg));
color: rgb(var(--bright-ui-txt));
}
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
border: none;
}
:is(blockquote, .blockquote, div.blockquote, [class*=blockquote], .quote) {
background: rgb(var(--global-bg));
color: rgb(var(--global-txt));
border: var(--global-border-width) solid rgb(var(--global-border));
}
.shadow {
box-shadow: 0 .2rem .5rem rgba(var(--global-dark-color), .4);
}
.dropshadow {
box-shadow: 0 .2rem 1rem rgba(var(--global-dark-color), .3);
}
.warn {
background: rgb(var(--bright-ui-bg));
color: rgb(var(--bright-ui-txt));
}
.pattern {
position: relative;
z-index: 0;
}
.pattern::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
pointer-events: none;
background: rgba(var(--bright-ui-bg), .05);
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg.svg");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 3rem;
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_bg.svg");
mask-repeat: repeat;
mask-size: 3rem;
}
.line {
box-shadow: inset 0 0 0 0.08rem rgb(var(--global-border)), inset 0 0 0 0.16rem rgb(var(--global-bg)), inset 0 0 0 0.24rem rgb(var(--global-border));
}
.seal-hr {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
.seal-hr hr {
width: 3rem;
height: 3rem;
margin: 0;
border: none;
background: rgb(var(--bright-ui-bg));
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-1.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_seal-1.svg");
mask-repeat: no-repeat;
mask-size: 100%;
}
.seal-hr::before, .seal-hr::after {
content: "";
display: block;
flex: 1;
height: 0;
border-top: var(--global-border-width) solid rgb(var(--global-border));
}
.double-hr hr {
margin: 0.2rem 0;
height: 0.08rem;
border: var(--global-border-width) solid rgb(var(--global-border));
}
.kong {
margin-top: 3rem;
}
#main-content .page-tags,
#page-info-break,
#page-options-container,
#action-area {
background: rgb(var(--light-ui-bg));
margin: 0;
}
#main-content #page-content + div {
padding-top: 4rem;
}
#main-content .page-tags span {
border: none;
}
#page-options-container {
padding-top: .5rem;
}
#page-info {
width: 100%;
}
.page-watch-options {
margin-bottom: 1rem;
}
#page-options-container .page-options-bottom,
#page-options-container .page-options-bottom a,
#page-options-container .page-options-bottom a#more-options-button {
border: none;
font-size: inherit;
}
#action-area {
padding: 2rem 0;
}
a.action-area-close {
top: 2rem;
}
#edit-page-form, #new-post-form {
--light-ui-bg: var(--global-bg);
--light-ui-txt: var(--global-txt);
--btn-bg: var(--global-bg);
--btn-txt: var(--global-txt);
background: rgb(var(--global-bg));
color: rgb(var(--global-txt));
border: none;
}
.preview-message {
top: 0;
z-index: 9;
}
#footer {
position: relative;
border: none;
box-shadow: 0 0 6rem rgb(var(--global-black-color));
}
#license-area {
position: relative;
--link-primary: var(--bottombar-txt);
--link-hover: var(--bottombar-txt);
--link-visited: var(--bottombar-txt);
}
/* 纹样标题-通用 */
h1, h2, h3, h4, h5, h6, :is(.bibitems, .footnotes-footer) .title {
font-weight: 900;
}
.styled-title :is(h1, h2, h3, h4, h5, h6),
.styled-title :is(.bibitems, .footnotes-footer) .title {
margin: 1rem 0;
line-height: 1;
border-left: var(--global-border-width) solid rgb(var(--bright-ui-bg));
padding-left: 0.125em;
box-sizing: border-box;
width: fit-content;
}
.styled-title :is(.bibitems, .footnotes-footer) .title {
margin-top: 1.25rem;
}
.styled-title.center :is(h1, h2, h3, h4, h5, h6),
.styled-title.center :is(.bibitems, .footnotes-footer) .title {
border: none;
padding: 0;
margin-left: auto;
margin-right: auto;
max-width: calc(100% - 5.445em);
}
.styled-title.right :is(h1, h2, h3, h4, h5, h6),
.styled-title.right :is(.bibitems, .footnotes-footer) .title {
border-left: none;
padding-left: 0;
border-right: var(--global-border-width) solid rgb(var(--bright-ui-bg));
padding-right: 0.125em;
margin-left: auto;
}
/* 纹样标题-H1 */
.styled-title h1,
.styled-title :is(.bibitems, .footnotes-footer) .title {
position: relative;
max-width: calc(100% - 2.7225em);
}
.styled-title.center h1
.styled-title.center :is(.bibitems, .footnotes-footer) .title {
max-width: calc(100% - 5.445em);
}
.styled-title h1::after,
.styled-title :is(.bibitems, .footnotes-footer) .title::after,
.styled-title.center h1::before,
.styled-title.center :is(.bibitems, .footnotes-footer) .title::before {
content: "";
display: block;
width: 2.66em;
height: 1.5em;
position: absolute;
top: -0.125em;
left: calc(100% + 0.0625em);
background: rgb(var(--bright-ui-bg));
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-r.svg");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: auto 100%;
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-r.svg");
mask-repeat: no-repeat;
mask-size: auto 100%;
}
.styled-title:is(.center, .right) h1::after,
.styled-title:is(.center, .right) :is(.bibitems, .footnotes-footer) .title::after {
left: auto;
right: calc(100% + 0.0625em);
-webkit-mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-l.svg");
mask-image: url("https://fastly.jsdelivr.net/gh/bleuboat/br@main/images/ytdm_line-l.svg");
}
@media only screen and (max-width: 768px) {
:root {
--page-title-size: 2rem;
}
.seal-1 {
width: 5.5rem;
}
.styled-title h1,
.styled-title :is(.bibitems, .footnotes-footer) .title {
max-width: calc(100% - 2em);
}
.styled-title.center h1,
.styled-title.center :is(.bibitems, .footnotes-footer) .title {
max-width: calc(100% - 4em);
}
.styled-title h1::after,
.styled-title :is(.bibitems, .footnotes-footer) .title::after,
.styled-title.center h1::before,
.styled-title.center :is(.bibitems, .footnotes-footer) .title::before {
width: 2em;
height: 1.125em;
top: 0;
}
}
