版式：世界观里的后室维基

著作信息

---

本版式由Liurd制作，感谢Eltrac，hoah2333为版式制作提供的帮助！
这自然是我的作者页

---

著作信息

---

---

欢迎你，新晋的“眼”，此页面为“伊瑟尔之视”运营的后室维基的全局版式，同时为你展示了一些方便你编辑与上传后室档案的语法以及示例，请继续阅读。

引用：

在页面中加入此代码保证版式的应用：

[[include :backrooms-wiki-cn:theme:the-backrooms-wiki-in-the-world]]

你不应当引用至其它页面。

非常好。

标题与分割线

使用一到六个“+”来创建标题，像这样：

1

2

3

4

5

6

非常好，接下来使用四到六个“-”来创建分割线：

---

非常好。

图片框

像这样：

我们尚未得知这个层级的具体信息…

[[include component:image-block
|name=URL|caption=描述|width=200px]]

非常好。

引用块：

用一个“>”加空格创建引用块，像这样：

引用块

嵌套引用块

非常好。

表格：

使用“|| ||”创建表格，加上“~”创建表格头，像这样：

表格头	表格
跨列表格

非常好。

分页

分页

无需赘述。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

这是一个长的 tab，它有很多文字。¹

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

更长的 Tab

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

空 Tab

空 Tab

这里的空 tab 有着一个特别特别长的名字，我想知道为什么会有这么长？

空 Tab

空 Tab

空 Tab

我们存在
我们探索不存在
我们观察
我们记录
我们传播
这是我们的职责

块

[[div class="lightblock"]]

[[/div]]

[[div class="darkblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

[[div class="dark-styled-quote"]]

[[/div]]

[[div class="styled-quote alert"]]

[[/div]]

[[div class="styled-quote safe"]]

[[/div]]

把以上块放入这个 div 里可以让它们无间隙排列。

[[div class="block-group"]]

[[div class="styled-quote"]]

[[/div]]

[[div class="styled-quote alert"]]

[[/div]]

[[div class="styled-quote safe"]]

[[/div]]

[[/div]]

你可能想知道的...

div#container-wrap{
  background-image:linear-gradient(to bottom,#aaa,#fff);
  background-size: 100% 600px;
}
 
div#header{
  background-image:url('');
  width:100vw;
}
 
#header h1,#header h2{
margin-left: 20px;
}
 
#header h1 a {
    color: transparent;
    text-shadow: none;
}
 
#header h1 a::before {
    content: "后室维基";
    color: #333;
}
 
#header h2 span {
    color: transparent;
    text-shadow: none;
}
#header h2 span::before {
    content: "The Backrooms Wiki";
    color: #333;
}
 
#login-status,
#login-status .printuser,
#login-status #my-account {
    color: #333;
}
 
#login-status ul {
  background:#fff;
  box-shadow: 0px 5px 5px #00000088;
}
 
#login-status ul a {
    color: #333;
}
 
#login-status ul a:hover {
  color: #fff;
  background: #06f;
  box-shadow: inset 0px 5px 5px #00000088;
}
 
.login-status a[href="https://www.wikidot.com/account/messages"]:not(#account-options a){
  color:#333;
}
 
#search-top-box-input {
    border: solid 1px #333;
    color: #fff;
    background-color: #666;
    box-shadow: inset 0px 5px 5px #00000088;
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    background-color: #06f;
}
 
#search-top-box-form input[type=submit] {
    border: solid 1px #666;
    color: #fff;
    background: #666;
    box-shadow: inset 0px -5px 5px #00000088;
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border: solid 1px #ccc;
    background: #06f;
    color: #fff;
    box-shadow: inset 0px 5px 5px #00000088;
}
 
#top-bar{
  background: #999;
  height:31px;
  box-shadow: inset 0px -10px 20px #00000088;
  border-radius:15.5px;
}
 
#top-bar ul{
  float:left;
  line-height:30px;
  margin-left:16px;
}
 
#top-bar ul li{
  border-left: none;
  border-right: none;
  line-height:30px;
}
 
#top-bar ul li a{
  border-left: none;
  border-right: none;
  padding-top:15px;
  padding-bottom:15px;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #06f;
    color: #fff;
    border-left: none;
    border-right: none;
    box-shadow: inset 0px 5px 5px #00000088;
}
 
#top-bar ul li:hover a:hover{
    background: #06f;
    color: #fff;
}
 
#top-bar ul li:hover ul li a{
  box-shadow: none;
    background: #ddd;
    color: #333;
}
 
#top-bar ul li:hover ul li a:hover{
  box-shadow: inset 0px 5px 5px #00000088;
  color:#fff;
  background-color:#06f;
}
 
#top-bar .open-menu a{
  color:#333;
  border: 4px solid #333;
  box-shadow: inset 0px -10px 10px #00000088;
}
 
#top-bar .open-menu a:hover{
  color:#fff;
  background:#06f;
  box-shadow: inset 0px 10px 10px #00000088;
}
 
#side-bar .side-block{
  background:transparent;
  border:none;
  box-shadow:none;
  color:#333;
}
 
#side-bar:target .close-menu{
  background:transparent;
}
 
#side-bar .heading{
  color:#333;
  border-color:#333;
}
 
#side-bar:target{
  background:#fff;
}
 
#side-bar a{
  color:#333;
}
 
#page-title{
  color:#333;
  font-weight:bolder;
  text-align:left;
  border-bottom: 1px solid #333;
}
 
#page-title:before{
  content:"》"
}
 
h1{
  color:#333;
}
 
a {
color:#0000ff;
}
 
a:hover{
color:#06f;
}
 
a:visited{
color:#888;
}
 
a.newpage{
color:#f0f;
}
 
blockquote,div.blockquote,.code,#toc,
.styled-quote, .dark-styled-quote {
  border: 1px solid #999;
}
 
.styled-quote {
    border-left: 6px solid #333;
}
 
.dark-styled-quote {
    border-left: 6px solid #bbb;
}
 
.styled-quote.alert {
    border-left-color: red
}
 
.styled-quote.safe {
    border-left-color: green
}
 
.lightblock, .styled-quote {
    background-color: #eee;
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.darkblock, .dark-styled-quote {
    background-color: #333;
    color: #fff;
    padding: 0.1rem 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
 
.darkblock a, .dark-styled-quote a {
    color: #bbb;
}
 
.block-group .styled-quote,
.block-group .darkstyled-quote,
.block-group blockquote,
.block-group .blockquote {
    margin: 0
}
 
.footnotes-footer, .bibitems{
    background-color: #eee;
    padding:4px;
    border: 2px solid #333;
    border-left: 8px solid #333
}
 
.footnotes-footer .title, .bibitems .title{
    background: #333;
    color:#fff;
    padding:4px;
}
 
.page-rate-widget-box {
    margin: unset;
    margin-bottom: 4px;
    border-radius: 0;
    border: solid 2px #333;
}
 
.page-rate-widget-box .rate-points {
    background-color: #fff !important;
    color: #333 !important;
    border: solid 1px #fff;
    border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #fff;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #333;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #06f;
    box-shadow: inset 0px 5px 5px #00000088;
}
 
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #fff;
    border: solid 1px #fff;
    border-radius: 0;
}
 
.page-rate-widget-box .cancel a {
    color: #333;
}
.page-rate-widget-box .cancel a:hover {
    background: #06f;
    border-radius: 0;
    box-shadow: inset 0px 5px 5px #00000088;
}
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 4px;
}
#page-content .rate-box-with-credit-button {
    background-color: #fff;
    border: solid 1px #fff;
    border-radius: 0;
    padding: 2px;
    border: solid 2px #333;
}
 
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: #333;
}
 
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: #06f;
    color: #fff;
    box-shadow: inset 0px 5px 5px #00000088;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px #fff;
}
 
.rate-box-with-credit-button .page-rate-widget-box {
    border: none;
}
 
#page-content .creditButtonStandalone p a {
    background-color: #fff;
    box-shadow: inset 0px -3px 3px #00000088;
    padding: 2px;
    border: solid 2px #333;
    color: #333;
}
#page-content .creditButtonStandalone p a:hover {
    background-color: #06f;
    color: #fff;
    box-shadow: inset 0px 3px 3px #00000088;
}
 
#page-content .modalbox {
    border: solid 2px #333;
    box-shadow: 0px 3px 3px #00000088;
}
 
/* 直接从纸堆偷的代码 */
 
/* ---- YUI TAB BASE——用来清除原本的属性的 ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 4px;
     border-color: tansparent;
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #fff;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #999;
     border: none;
     border-radius: 4px;
     box-shadow: inset -5px -5px 5px #00000088;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ffffff;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: #06f;
     box-shadow: inset 5px 5px 5px #00000088;
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 2px 4px;
     padding: 0;
     color: #ffffff;
     background-color: #ffffff;
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 2px 4px;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: #06f;
     border-radius: 4px;
}
 
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #ffffff;
}
 
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #ffffff;
     background-color: #06f;
}
 .yui-navset .yui-content {
    background-color: #ffffff;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
     border-bottom: 2px solid #333;
}
 
#page-options-bottom a, #page-options-bottom-2 a,
div.buttons input, input.button, button, file, a.button {
  display: inline-block;
  background-color: #fff;
  color: #333;
  border: 2px solid #333;
  border-radius:20px;
  padding:2px 8px;
  cursor: pointer;
  font-weight:bolder;
  box-shadow: inset -5px -5px 10px #00000088;
}
#page-options-bottom a:hover, #page-options-bottom-2 a:hover,
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover {
  background-color: #06f;
  color:#fff;
  text-decoration: none;
  box-shadow: inset 5px 5px 10px #00000088;
}
 
@media screen and (min-width: 768px) {
  #page-options-bottom a { display: table-cell }
  #page-options-bottom, #page-options-bottom-2 {
  display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.25rem;
    text-align: center
  }
}

脚注

1. 这是一个脚注。