版式：绅士
这个主题版式由
soybean-hy 创建，导入了
Etinjat制作的scp黑标适配。
背景纹理图源，版头图源
如果想要在你的页面上使用这个主题，请将如下文本放置其中：
[[include :backrooms-wiki-cn:theme:gentlemen]]
版式示例

我们的归宿
可以使用五个连字符"-----" 创建水平线，如果未将其放置在任何内容（例如引用块）中，则可以扩展到整个页面。分隔本文档各部分的行是水平线。
可以通过在行首加上1-6个之间的"+"字符来创建标题。
标题示例
从未如此美妙的版式，请为我欢呼，为我喝彩
这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字

一条分割线

嵌套块引用¹
这是一个	表格
你应该早就	知道怎么
制作它	了吧
脚²
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起^来是
怎么_运作
包括那些不存在
 以及存在的链接！
还有特殊警告
或者风险更低的
或者安全的！
标题示例
[[div class="titleblock"]]
[[span class="titlebox"]]标题示例[[/span]]
[[/div]]
[[div class="styled-quote"]]
[[/div]]
由于不可抗力，请使用“blackblock”而不是“darkblock”
[[div class="black-styled-quote"]]
[[/div]]
[[div class="lightblock"]]
[[/div]]
[[div class="blackblock"]]
[[/div]]
[[div class="logoblock"]]
[[/div]]
[[div class="border-logoblock"]]
[[/div]]
+ 版式代码
- 关闭
[[module css]]
    :root {
        /* S-CSS-P Integration */
        /* If you're making a new CSS theme, please include the following three variables at minimum. */
        --theme-base: "black-highlighter";
        /* must be either "nuscp" or "sigma9" */
        --theme-id: "-bhl-theme";
        /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
        --theme-name: "BHL Theme";
        /* set this to your theme's full name */
 
        /* Header */
        --logo-image: url("https://cdn.pixabay.com/photo/2014/03/24/13/43/couple-294135_960_720.png");
 
        /* Standard Colors */
        --white-monochrome: 34, 34, 34;
        /* off-blue white */
        --pale-gray-monochrome: 87, 83, 67;
        --menubg-color:  228, 212, 146;
        /* v light blue for blockquotes and stuff */
        --light-gray-monochrome: 240, 224, 58;
        /* light accent blue for login status */
        --gray-monochrome: 50, 50, 50;
        /* blue */
        --dark-gray-monochrome: 171, 90, 5;
        /* deep blue */
        --black-monochrome: 228, 212, 146;
        /* off-blue black */
        --bright-accent: 209, 202, 153;
        /* bright yellow */
        --medium-accent: 227, 159, 53;
        /* medium red */
        --dark-accent: 230, 176, 16;
        /* deep red */
        --newpage-color: var(--bright-accent);
        /* pale orange */
 
        /* Primary Theme Colors */
        --swatch-background: var(--white-monochrome);
        --swatch-primary: var(--bright-accent);
        --swatch-primary-darker: var(--medium-accent);
        --swatch-primary-darkest: var(--dark-accent);
        /* Primary Text Colors */
        --swatch-text-dark: var(--black-monochrome);
        --swatch-text-light: var(--white-monochrome);
        --swatch-important-text: var(--bright-accent);
 
        /* Primary Menu Colors */
        --swatch-menubg-color: var(--white-monochrome);
        --swatch-menubg-light-color: var(--pale-gray-monochrome);
        --swatch-menubg-medium-color: var(--light-gray-monochrome);
        --swatch-menubg-medium-dark-color: var(--gray-monochrome);
        --swatch-menubg-dark-color: var(--dark-gray-monochrome);
        --swatch-menubg-black-color: var(--black-monochrome);
        --swatch-menubg-hover-color: var(--black-monochrome);
        --swatch-menutxt-dark-color: var(--black-monochrome);
        --swatch-menutxt-light-color: var(--white-monochrome);
        --swatch-border-color: var(--black-monochrome);
        /* Primary Header Colors */
        --header-gradient-color-bottom: var(--black-monochrome);
        --header-gradient-color-middle: var(--dark-gray-monochrome);
        --header-gradient-color-top: var(--dark-gray-monochrome);
        --swatch-headerh1-color: var(--white-monochrome);
        --swatch-headerh2-color: var(--white-monochrome);
        --swatch-topmenu-border-color: var(--black-monochrome);
        --swatch-topmenu-bg-color: var(--menubg-color);
 
        --link-color: var(--dark-accent);
        --visited-link-color: var(--medium-accent);
        --hover-link-color: var(--medium-accent);
 
        --rating-module-button-color: var(--black-monochrome);
        --rating-module-text-color: var(--swatch-menutxt-dark-color);
 
        /* Header Gradients */
        --gradient-header: linear-gradient(35deg,
                rgb(var(--header-gradient-color-bottom)) 0,
                rgb(var(--header-gradient-color-middle)) 90%,
                rgb(var(--header-gradient-color-top)) 100%);
 
        --gradient-topmenu: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-border-color)) var(--header-height-on-desktop),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem),
                rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(100% - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 100%);
 
        --gradient-topmenu-mobile: linear-gradient(to bottom,
                rgba(var(--swatch-topmenu-border-color), 1) 0,
                rgba(var(--swatch-topmenu-bg-color), 1) .125rem,
                rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - .125rem),
                rgba(var(--swatch-topmenu-bg-color), 0) calc(3rem - .125rem),
                rgba(var(--swatch-topmenu-border-color), 0) 3rem);
 
        --diagonal-stripes: inherit;
 
        --header-height-on-desktop: 12.25rem;
        --header-height-on-mobile: var(--header-height-on-desktop);
        --header-background-image-size: 100% var(--header-height-on-desktop);
        /* ===TOPBAR MEASUREMENTS=== */
        --topbar-height-on-mobile: 2.5rem;
    }
     @supports (background-blend-mode: screen) {
 
     div#extra-div-1 {
     width: 100%;
     height: calc(100% - var(--final-header-height-on-desktop));
     position: absolute;
     top: calc(var(--final-header-height-on-desktop));
     left: 0;
     z-index: -1;
     background-color: rgba(252, 252, 252, 1);
     background-color: rgba(var(--swatch-background), 1);
     mask: var(--gradient-background);
     -webkit-mask: var(--gradient-background);
     background-image: url("http://marginal-terminal.wikidot.com/local--files/3/gothic-756211_960_720.png"), var(--gradient-background);
     background-size: 10%, 100% var(--background-gradient-distance);
     background-blend-mode: difference;
     background-repeat: repeat, repeat-x;
     pointer-events: none;
     }
 
    }
 
    #header {
     background-repeat: no-repeat;
     background-position: left 0 top 0.25rem;
     background-clip: border-box;
     -webkit-background-size: auto calc(var(--header-height-on-desktop) - 1rem);
     background-size: auto calc(var(--header-height-on-desktop) - 1rem);
     filter: initial;
    }
 
    #header h1 a {
     font-size: 200%;
     overflow-wrap: normal;
     padding: 0;
     margin-top: calc((var(--header-height-on-desktop) - 0.5em)/2);
     margin-left: calc(var(--header-height-on-desktop) - .75rem);
    }
 
.blackblock {
   background-color:rgb(var(--gray-monochrome));
   color:rgb(var(--black-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.blackblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
.black-styled-quote {
   background-color:rgb(var(--gray-monochrome));
   border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
   color:rgb(var(--black-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
.black-styled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}
:root:lang(cn){
     --logo-image: url("https://cdn.pixabay.com/photo/2014/03/24/13/43/couple-294135_960_720.png");
     --header-title:"Backrooms";
     --header-subtitle:"你曾来过此处";
}
[[/module]]
 
[!--------------------------------------------------
---------------------------------------------------
CODE - 序号
1 - 调整主要代码
2 - 侧边栏图标代码
3 - 居中版头
---------------------------------------------------
---------------------------------------------------]
 
[[iftags [[#ifexpr {$header} == (true) | - ]]]]
[[module CSS]]
:root:lang(cn){
     --header-title:"Backrooms";
     --header-subtitle:"你曾来过此处";
     --logo-image: var(--backrooms-image);
}
[[/module]]
[[/iftags]]
 
[!---sigma9--]
[[iftags [[#ifexpr {$sigma} == (true) | - ]]]]
[[module ThemePreviewer noUi="true" theme_url="https://etinjat.wikidot.com/theme:bhl-base/code/4"]]
[[/iftags]]
[!---sigma9-blank--]
[[iftags [[#ifexpr {$sigma-swap} == (true) | - ]]]]
[[module ThemePreviewer noUi="true" theme_url="https://etinjat.wikidot.com/theme:bhl-base/code/4"]]
[[/iftags]]
[!---后室阈限版式--]
[[iftags [[#ifexpr {$liminal-theme} == (true) | - ]]]]
[[module ThemePreviewer noUi="true" theme_url="https://etinjat.wikidot.com/theme:bhl-base/code/5"]]
[[/iftags]]
 
[!---旧--]
[[iftags [[#ifexpr {$old} == (true) | - ]]]]
[[module ThemePreviewer noUi="true" theme_url="https://etinjat.wikidot.com/theme:bhl-base/code/1"]]
[[module CSS]]
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/1");
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/2");
 
#header #login-status {color:rgb(var(--swatch-text-light));}
#login-status ul a{color:rgb(var(--swatch-text-light));}
@media (max-width: 767px){ #search-top-box{ display: none; }  #login-status{right: 0.5rem};}
[[/module]]
[[/iftags]]
 
[!---新--]
[[iftags [[#ifexpr true == (true) | - ]]]]
[[module ThemePreviewer noUi="true" theme_url="https://etinjat.wikidot.com/theme:bhl-base/code/2"]]
[[module CSS]]
@import url("https://etinjat.wikidot.com/backrooms:new-bhl-icon/code/1");
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/1");
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/2");
 
#side-bar .side-block:first-child div{display: flex;}
#side-bar .heading {width: 100%;}
#side-bar .heading .menu-item a:hover:before {transform: translateX(0rem)}
#side-bar  div.menu-item a[style*="secondary-color"]{background: var(--gradient-sidemenu-header);text-align: center;}
#side-bar:lang(cn) {grid-template-columns: 0rem 1fr; padding-left: 0;}
#side-bar:lang(cn) div.side-block.media{grid-column: span 2;}
#side-bar:lang(cn) div.side-block.media a{--social-color:none; height: var(--sidebar-icon-size);  width: var(--sidebar-icon-size);}
#side-bar:lang(cn) div.side-block.media a:before {display: none;}
[[/module]]
[[/iftags]]
 
[!---图书馆--]
[[iftags [[#ifexpr {$wanderers} == (true) | - ]]]]
[[module ThemePreviewer noUi="true" theme_url="https://etinjat.wikidot.com/theme:bhl-base/code/3"]]
[[module CSS]]
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/2");
@import url("https://etinjat.wikidot.com/backrooms:new-bhl-icon/code/1");
 
#side-bar .side-block div[style*="text-align: center;"] {display: flex;}
[[/module]]
[[/iftags]]
 
[!-------------------------------- 侧边栏图标 -------------------------------------------------]
[[iftags [[#ifexpr {$sidebar} == (true) | - ]]]]
[[module CSS]]
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/2");
[[/module]]
[[/iftags]]
 
[!-------------------------------- 折叠侧边栏 -------------------------------------------------]
[[iftags [[#ifexpr {$sidebar} == (true) | - ]]]]
[[module CSS]]
@import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Theme/Component_collapsible-sidebar_adjust.CSS");
[[/module]]
[[/iftags]]
 
[!---------------------------------- 居中版头 -----------------------------------------------]
[[iftags [[#ifexpr {$mid} == (true) | - ]]]]
[[module CSS]]
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/3");
[[/module]]
[[/iftags]]
 
[!---------------------------------- 全部使用 -----------------------------------------------]
[[iftags [[#ifexpr {$all} == (true) | - ]]]]
[[module CSS]]
@import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Theme/Component_collapsible-sidebar_adjust.CSS");
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/3");
[[/module]]
[[/iftags]]
 
[!---------==============
示例aaaaaaaaaaaaaaaaaaaaaaaaaaaa
===================--------]
[[iftags +源代码]]
[[module ThemePreviewer noUi="true" theme_url="http://etinjat.wikidot.com/theme:bhl-base/code/2"]]
[[module CSS]]
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/1");
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/2");
@import url("https://etinjat.wikidot.com/backrooms:fit-bhl/code/3");
@import url("https://etinjat.wikidot.com/backrooms:new-bhl-icon/code/1");
#side-bar .side-block:first-child div{display: flex;}
#side-bar:lang(cn) {grid-template-columns: 0rem 1fr; padding-left: 0;}
#side-bar .heading {width: 100%;}
#side-bar .heading .menu-item a:hover:before {transform: translateX(0rem)}
#side-bar  div.menu-item a[style*="secondary-color"]{background: var(--gradient-sidemenu-header);text-align: center;}
[[/module]]
 
++ 用法
* 必选项，选择一下之一
 * **新旧黑标**：二选一，只用保留 old 或 new 一栏。
 * **sigma-swap：**基金会的默认版式，填此可以使用基于sigma9的基金会版式。
 * **wanderers：**被放逐者之图书馆的护封版式。
* 可选项，不填则不开启。
 * **版头居中：** |mid=true 
 * **折叠侧边栏：** |sidebar=true
 * **版头标题文本：**注意文本要用半角双引号括起来。
 
ps：后室旧黑标部分移植新黑标效果，可与后室版式叠加，[http://backrooms-wiki-cn.wikidot.com/theme:halfnew-liminal 详情见此]。
 
+++ 示例
@@[[include :etinjat:backrooms:fit-bhl@@
|old=true
|new=true
|sigma-swap=true
|wanderers=true
|mid=true 
|sidebar=true
|header-title="版头大标题文本"
|header-subtitle="版头次标题文本"
|mob-title="手机下的版头大标题文本"
|mob-subtitle="手机下版头次标题文本"
|logo-image=url('标志图片地址')
]]
@@ 这里插入SCP的版式@@
 
+++ 快速复制用
@@[[include :etinjat:backrooms:fit-bhl@@
|new=true
|mid=true 
|sidebar=true
]]
@@ 这里插入SCP的黑标版式@@
 
PS：插入的黑标版式不需要再额外复制这代码
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:black-highlighter-theme]]@@
[[/div]]
 
++ 侧边栏图片修复组件
* 可以不引用黑标，而是单纯地令侧边栏图标颜色，随着后室现有版式颜色而变化。
* 新旧黑标都已嵌入使用。
@@[[include :etinjat:backrooms:fit-bhl@@
|sidebar-icon=true
|sidebar-icon-bg=url('xxxxxxx')  //选填，填入衬图图片地址
|sidebar-icon-color= xxxx //选填，填入颜色代码
]]
 
注意，由于本组件使用了mask代码，如果你在其他地方使用而导致图标缺失的话，请把图标上传到[https://smms.app/ 像这个]支持https的图库，然后再修改以下变量，从01~09分别是自左数起的图标：
[[div class="code"]]
:root{
--sidebar-01-icon: url('图标地址');
}
[[/div]]
 
[!--------------------------------------------------
---------------------------------------------------
111111111111111111111111
---------------------------------------------------
---------------------------------------------------]
[[collapsible show="+ 代码" hide="- 代码"]]
**图标数据：**
[[[backrooms:sidebar-icon|]]]
[[[backrooms:new-bhl-icon|]]]
 
[[code type="CSS"]]
/*=====================
黑标适配后室的根元素 11111111111111111111111
=====================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
@import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
 
:root, :root:lang(cn){
     --header-title:"Backrooms";
     --header-subtitle:"你曾来过此处";
  --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
  --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
  --topbar-height-on-mobile:2rem;
 --logo-image: var(--backrooms-image);
 
     --body-font: 'Roboto Slab', Inter, 'IBM Plex Mono', proxima-nova,  'Noto Sans TC',  'Noto Sans SC', '微软雅黑', '等线', sans-serif;
  --header-font: 'IBM Plex Mono', 'Noto Sans TC',  'Noto Sans SC', 'Roboto Slab', '微软雅黑', '等线',  sans-serif;
  --title-font:   'Noto Serif TC', 'Noto Serif SC', '华文中宋', 'Roboto Slab',  monospace;
  --mono-font: 'IBM Plex Mono', 'Ubuntu Mono', 'Fantasque Sans Mono', 'ZCOOL XiaoWei',  '仿宋', 'LXGW WenKai', 'Noto Serif TC', 'Noto Serif SC', '微软雅黑', '等线', 'Roboto Slab',  monospace;
}
 
/*
=====================
主体
=====================
*/
 
#header h1 a,
#header h2 span  {
  letter-spacing: 2px;
}
#header h1  {
  top:0.2rem;
}
#header h2  {
  top: 0.1rem;
}
 
/*------------- 侧栏 -------------------*/
#side-bar .side-block{
    margin-top: -0.1rem;
}
 
#side-bar .heading .menu-item{
   margin-left: 0 !important;
}
 
#side-bar .heading .menu-item a:before {
        transform: translateX(calc(-100% - 8rem));
} 
#side-bar .heading .menu-item a:hover:before {
        transform: translateX(-8rem)
 }
 
#side-bar div.menu-item.small a {
    justify-content: center;
    width: auto;
    padding: 0 0.25em;
    text-indent: 0;
    white-space: nowrap;
}
 
#side-bar div.menu-item a {
    justify-content: flex-start;
    padding: 0 0 0 calc(var(--base-font-size)*.93333);
}
 
#side-bar div.menu-item,
#side-bar div.menu-item>p {
    display: flex;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    height: 1.5rem;
    min-height: 1.5rem;
    margin: 0;
    padding: 0;
    box-shadow: inset 0 calc(var(--sidebar-internal-border-thickness)*-1) 0 0 rgba(var(--sidebar-border-color));
    font-size: 0;
}
 
#side-bar div.menu-item>:last-child {
    flex-grow: 2;
}
 
#side-bar div.menu-item a:not(a:first-child) {
    border-left: var(--sidebar-internal-border-thickness) solid rgba(var(--swatch-border-color), .08)
}
 
#side-bar div.scpnet-interwiki-wrapper {
    min-height: 300px;
}
 
.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;
}
iframe.scpnet-interwiki-frame {
    border: inherit;
    width: 100%;
    height: 230px;
}
 
@media (min-width:768px) {
    div.scpnet-interwiki-wrapper,
    iframe.scpnet-interwiki-frame {
        width: 100%;
    }
}
 
/*
======================================
引用块
======================================
*/
blockquote {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.styled-quote {
   background-color:rgb(var(--pale-gray-monochrome));
   border-left: 0.5rem solid rgba(var(--gray-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote {
   background-color:rgb(var(--gray-monochrome));
   border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);
}
 
.dark-styled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}
 
.lightblock {
   background-color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(var(--gray-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}
 
.dark-styled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}
 
.borderblock {
    background-color:rgb(var( --gray-monochrome));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--bright-accent));
 }
 
 .alt-borderblock {
    background-color:rgb(var(--bright-accent));
    color:rgb(var(--black-monochrome));
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--gray-monochrome));
 }
 
.dark-borderblock {
    background-color:rgb(var( --darker-legacy-accent));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--legacy-accent));
 }
 
 .border-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color:rgb(255, 255, 255);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--gray-monochrome));
     border: solid 0.3rem rgb(var(--bright-accent));
    }
 
    .border-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: var(--meg-image) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
 .dark-border-logoblock{
    padding: 0.01rem 1rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    color:rgb(255, 255, 255);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--darker-legacy-accent));
     border: solid 0.3rem rgb(var(--legacy-accent));
    }
 
    .dark-border-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: var(--meg-image) center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
    .logoblock{
    padding: 0.01rem 1rem;
    color:rgb(255, 255, 255);
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--gray-monochrome));
    }
 
    .logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: var(--meg-image)  center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
    .dark-logoblock{
    padding: 0.01rem 1rem;
    color:rgb(255, 255, 255);
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    margin: 0.5rem 0 0.5rem 0.25rem;
    display: block;
    position: relative;
    background-color: rgb(var(--darker-legacy-accent));
    }
 
    .dark-logoblock::after{
    content: "";
    float: center;
    border: solid 2px #0000;
    background: var(--meg-image)  center/25% no-repeat;
    opacity: 0.25;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    }
 
.titleblock {
        background-color: rgb(var(--gray-monochrome));
        color:rgb(var(--text-white-monochrome));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--bright-accent)) 2px;
     }
 
     .titlebox{
       color: rgb(var(--gray-monochrome));
       position: relative;
       top: -1.6rem;
       background-color: rgb(var(--bright-accent));
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.dark-titleblock {
        background-color: rgb(var(--darker-legacy-accent));
        color:rgb(var(--text-white-monochrome));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--legacy-accent)) 2px;
     }
 
     .dark-titlebox{
       color: rgb(var(--darker-legacy-accent));
       position: relative;
       top: -1.6rem;
       background-color: rgb(var(--legacy-accent));
       padding: 0.25rem 1rem;
       line-height: 0.1rem;
     }
 
.border-block {
    background-color:rgb(var(--gray-monochrome));
    color:rgb(255, 255, 255);
    padding: 0.01rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border: solid 0.3rem rgb(var(--gray-monochrome));
 }
[[/code]]
[!--------------------------------------------------
22222222222222222
---------------------------------------------------]
 
[[code type="CSS"]]
/*=====================
后室 - 侧边栏图标 22222222222
=====================*/
 
:root{
/* ---------------侧边栏--------------------- */
  --sb-bg-color:rgba(var(--sidebar-bg-color),1);
  --sidebar-icon-bg:none;
  --sidebar-icon-color:rgba(var(--swatch-primary-darkest,100,3,15),1);
  --sidebar-icon-size:3rem;
 
/* ---------------标志图标--------------------- */
--backrooms-image: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/LOGO_Backrooms.svg');
--meg-image: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/LOGO_MEG.svg');
 
/* ---------------侧边栏图标--------------------- */
--bilibili-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_bilibili.svg');
--tieba-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_tieba.svg');
--fandom-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_fandom.svg');
--discord-icon: url('https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/ICON_discord.svg');
 
     --sidebar-01-icon:var(--unset-icon);
    --sidebar-02-icon:var(--unset-icon);
    --sidebar-03-icon:var(--unset-icon);
    --sidebar-04-icon:var(--unset-icon);
    --sidebar-05-icon:var(--unset-icon);
    --sidebar-06-icon:var(--unset-icon);
    --sidebar-07-icon:var(--unset-icon);
    --sidebar-08-icon:var(--unset-icon);
    --sidebar-09-icon:var(--unset-icon);
}
 
#side-bar .side-block:first-child a img{
  display:none; 
}
 
#side-bar .side-block:first-child a:not([href="javascript:;"]):after{
  content: '  ';
  display: inline-block !important;
  width:var(--sidebar-icon-size);
  height:var(--sidebar-icon-size);
  background-image: var(--sidebar-icon-bg);
  background-color:  var(--sidebar-icon-color);
 
 -webkit-mask-image:var(--unset-icon);
 -webkit-mask-size: contain;
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: center;
    mask-image:var(--unset-icon);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}
 
@media (max-width: 500px) {
 #side-bar .side-block:first-child a:after{
  width:var(--sidebar-icon-sizeMOB);
  height:var(--sidebar-icon-sizeMOB);
  }
}
/* 手动 */
#side-bar .side-block:first-child a:nth-child(1):after{
  mask-image:var(--sidebar-01-icon);
 -webkit-mask-image:var(--sidebar-01-icon);
}
#side-bar .side-block:first-child a:nth-child(2):after{
  mask-image:var(--sidebar-02-icon);
 -webkit-mask-image:var(--sidebar-02-icon);
}
#side-bar .side-block:first-child a:nth-child(3):after{
  mask-image:var(--sidebar-03-icon);
 -webkit-mask-image:var(--sidebar-03-icon);
}
#side-bar .side-block:first-child a:nth-child(4):after{
  mask-image:var(--sidebar-04-icon);
 -webkit-mask-image:var(--sidebar-04-icon);
}
#side-bar .side-block:first-child a:nth-child(5):after{
  mask-image:var(--sidebar-05-icon);
 -webkit-mask-image:var(--sidebar-05-icon);
}
#side-bar .side-block:first-child a:nth-child(6):after{
  mask-image:var(--sidebar-06-icon);
 -webkit-mask-image:var(--sidebar-06-icon);
}
#side-bar .side-block:first-child a:nth-child(7):after{
  mask-image:var(--sidebar-07-icon);
 -webkit-mask-image:var(--sidebar-07-icon);
}
#side-bar .side-block:first-child a:nth-child(8):after{
  mask-image:var(--sidebar-08-icon);
 -webkit-mask-image:var(--sidebar-08-icon);
}
#side-bar .side-block:first-child a:nth-child(9):after{
  mask-image:var(--sidebar-09-icon);
 -webkit-mask-image:var(--sidebar-09-icon);
}
 
/* 自动 */
#side-bar .side-block:first-child a[href*="twitter.com"]:after{
  mask-image:var(--twitter-icon);
 -webkit-mask-image:var(--twitter-icon);
}
 
#side-bar .side-block:first-child a[href*="tieba"]:after{
  mask-image:var(--tieba-icon);
 -webkit-mask-image:var(--tieba-icon);
}
 
#side-bar .side-block:first-child a[href*="fandom"]:after{
  mask-image:var(--fandom-icon);
 -webkit-mask-image:var(--fandom-icon);
}
 
#side-bar .side-block:first-child a[href*="discord"]:after{
  mask-image:var(--discord-icon);
 -webkit-mask-image:var(--discord-icon);
}
 
#side-bar .side-block:first-child a[href*="bili"]:after{
  mask-image:var(--bilibili-icon);
 -webkit-mask-image:var(--bilibili-icon);
}
 
#side-bar .side-block:first-child a[href*="backrooms-wiki-cn"]:after{
  mask-image:var(--brcn-icon);
 -webkit-mask-image:var(--brcn-icon);
}
 
#side-bar .side-block:first-child a[href*="twitter"]:after{
  mask-image:var(--twitter-icon);
 -webkit-mask-image:var(--twitter-icon);
}
 
#side-bar .side-block:first-child a[href*="reddit"]:after{
  mask-image:var(--reddit-icon);
 -webkit-mask-image:var(--reddit-icon);
}
 
#side-bar .side-block:first-child a[href*="youtube"]:after{
  mask-image:var(--ytb-icon);
 -webkit-mask-image:var(--ytb-icon);
}
 
#side-bar .side-block:first-child a[href*="instagram"]:after{
  mask-image:var(--instagram-icon);
 -webkit-mask-image:var(--instagram-icon);
}
 
#side-bar .side-block:first-child a[href*="facebook"]:after{
  mask-image:var(--facebook-icon);
 -webkit-mask-image:var(--facebook-icon);
}
 
#side-bar .side-block:first-child a[href*="tiktok"]:after{
  mask-image:var(--tiktok-icon);
 -webkit-mask-image:var(--tiktok-icon);
}
 
[[/code]]
 
[!--------------------------------------------------
3333333333333
---------------------------------------------------]
 
[[code type="CSS"]]
/*
=====================
后室 - 版头居中 33333333333333333333
=====================
*/
:root{
  /* 版头标志 */
--hdlg-top: 0rem;
--hdlg-bgsz-pc:   auto calc(var(--header-height-on-desktop) * 1.8 ) ;
--hdlg-bgsz-mob: auto 14rem;
}
 
/*==========================================
版头居中 by  Woedenaz
============================================*/
@supports(display: grid) {
   :root {
        /* header measurements */
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
     #login-status::before {
     --mask-image: none;
     background-color: transparent;
     }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
     #search-top-box:focus-within ~ #login-status {
     opacity: 1;
     }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}
 
/*==========================================
后室调整
============================================*/
/*------------------- 版头标题 -------------------*/
#header h1  {
  top: 0rem;
}
 
#header h2  {
  top: 1rem;
}
 
#container #header h1 a::after,
#container #header h2 span::after,
#container #header h1 a,
#container  #header h1 a::before,
#container  #header h2 span,
#container  #header h2 span::before {
        display: inline-flex;
  justify-content: center;
 }
 
#container #header h1 a::after,
#container #header h1 a,
#container  #header h1 a::before {
 position: absolute;
 }
 
/*------------------- 标志 -------------------*/
#header::before {
  top: var(--hdlg-top);
  background-size: var(--hdlg-bgsz-pc);
    background-position:50%;
  height: var(--header-height-on-desktop);
  opacity: 0.7;
}
 
/*------------------- 手机-------------------*/
@media only screen and (max-width: 500px){
#header::before {
  height: var(--header-height-on-mobile);
    background-size: var(--hdlg-bgsz-mob);
}  
}
[[/code]]
[[/collapsible]]
[[/iftags]]
 
[!----------------=======================================
尾部 xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
==========================---------------]
 
[!-------------------------------------------------
自定义项qqqqqqqqqqqqqqqq
----------------------------------------------------]
[[module CSS]]
@import url("https://arandintday.github.io/thebackhubscn/banlist.css");
 
.side-block.media{
margin-left: 0 !important;
}
 
#container #header h1 a::before, 
#container #header h1 a::after {
  content: var(--new-header-title, "Backrooms") ;
  content: {$header-title} ;
}
 
#container #header h2 span::before, 
#container #header h2 span::after {
  content: var(--new-header-subtitle, "你曾来过此处") ;
  content: {$header-subtitle} ;
}
 
#header h1 a::after,
#header h2 span::after {
 display: none;
}
 
#container #page-title{
  display: {$page-title};
}
 
#content-wrap #side-bar .side-block:first-child a:before{
  width: {$sidebar-icon-size};
  height: {$sidebar-icon-size};
  background-image: {$sidebar-icon-bg};
  background-color: {$sidebar-icon-color};
}
 
@media (max-width: 767px) {
 #container #header h1 a::before {
    content:{$header-title};
    content:{$pad-title};
   }
 
  #container #header h2 span::before {
    content:{$header-title};
    content:{$pad-subtitle};
   }
 
   #header-extra-div-1::before {  
       background-image:{$logo-image};
       background-image: {$logo-image-pad};
    }
}
 
@media (max-width: 500px) {
  #container #header h1 a::before {
    content:{$header-title};
    content:{$pad-title};
    content:{$mob-title};
    }
 
    #container #header h2 span::before {
    content: {$header-subtitle};
    content:{$pad-subtitle};
    content: {$mob-subtitle};
   }
 
   #header-extra-div-1::before {  
       background-image:{$logo-image};
       background-image: {$logo-image-pad};
       background-image: {$logo-image-mob};
    }
}
[[/module]]
- 关闭
原创团体版式版式
页面版本: 7, 最后编辑于: 10 Jan 2025 15:36
编辑评分 (+17) 标签讨论 (2) 历史记录附件打印网站工具 + 选项
The Backrooms中文维基

你曾经来过这里

版式示例

1号标题

2号标题

3号标题

4号标题

5号标题

6号标题
