简黑版式

著作信息

标题: SIMPLE BLACK THEME
作者: ©︎SealBaby-V, terukami
创作年份: 2025

SIMPLE BLACK
简黑
版式

这是什么？

这是一个不和任何设定、系列作品或GoI挂钩，可自由使用的自定义版式。

要使用版式，请将以下代码插入到文章的顶部。

[[include :scp-wiki-cn:theme:simple-black-theme]]

版式设置

隐藏页面标题

[[include :scp-wiki-cn:theme:simple-black-theme hidetitle=a]]

切换侧边栏

[[include :scp-wiki-cn:theme:simple-black-theme toggle-sidebar=a]]

暗黑模式

[[include :scp-wiki-cn:theme:simple-black-theme darkmode=a]]

如果要组合使用版式设置，请按以下方式操作。

[[include :scp-wiki-cn::theme:simple-black-theme hidetitle=a|toggle-sidebar=a|darkmode=a]]

自定义

:root {
    --title: '页眉标题';
    --sub-title: '页眉副标题';
    --accent-color: 强调色;
    --bg-color: 背景色;
    --sb-btn: url("侧边栏按钮图标");
}

示例

海

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

Table of Contents

1级标题
- 2级标题
  - 3级标题
    - 4级标题
      - 5级标题
        6级标题

标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。

▶︎ 展开▼ 关闭

1级标题

2级标题

3级标题

4级标题

5级标题

6级标题

分页

长Tab

空Tab

此为分页。1

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块

这是	表格
你应该老早	就知道怎么
做这个了吧

自定义引用块

在使用引用块（blockquote）时，通过按以下方式添加属性，可以更改块引用的外观。

虚线引用块

[[div class="blockquote dashed-block"]]
[[/div]]

双线边框引用块

[[div class="blockquote double-block"]]
[[/div]]

自定义分割线

通过用以下代码包围分割线（-----），可以改变其外观。

虚线分割线

[[div class="dashed-hr"]]
-----
[[/div]]

双线分割线

[[div class="double-hr"]]
-----
[[/div]]

自定义div块

通过以下代码使用特殊的div块。

通知

[[div class="notice-box"]]
[[/div]]

文档

[[div class="document-box"]]
[[/div]]

记录

[[div class="record-box"]]
[[/div]]

将div块设置为圆角样式。除了引用块之外也适用。

[[div class="blockquote round"]]
[[/div]]

EARTHWORM

通过输入以下代码，可显示EARTHWORM导航。

上一故事

中心

下一故事

[[div class="earthworm"]]
[[div class="earthworm-item"]]
[上一故事的URL 标题]
[[/div]]
[[div class="earthworm-item"]]
[中心页的URL 标题]
[[/div]]
[[div class="earthworm-item"]]
[下一故事的URL 标题]
[[/div]]
[[/div]]

▶ 源代码▼ 关闭

css

:root {
    --title: '基金会';
    --sub-title: '控制 - 收容 - 保护';
    --accent-color: #008CC8;
    --sb-btn: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A6903570-58-pj4z/simple-black-side-icon.svg");
}

body {
    color: #000000;
    background: #EDEDED;
}
#content-wrap{
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    padding-top: 0;
    margin: 0 auto;
    word-break: break-all;
}
#content-wrap::after{
    width: max(calc(100vw - 14rem - 55.53rem));
    max-width: 14rem;
    content: "";
}
@media(min-width: 767px) {
  #main-content {
    max-width: 767px;
    width: 70%;
    margin: 0 auto !important;
    padding: 0;
  }
}
@media(max-width: 767px) {
  #main-content {
    max-width: 90%;
  }
}
a {
    color: var(--accent-color);
}

/* HEADER */
#top-bar {
    display: flex;
    justify-content: center;
    top: 61px;
    right: 0;
    max-width: unset;
}
#header {
    background: #000000;
    max-width: unset;
    width: 100%;
    height: 60px;
}
div#container-wrap {
    background: #000000;
    height: 61px;
}
#header h1, #header h2 {
    font-size: 0;
}
#header h1 a span::before {
    content: var(--title);
    font-size: 30px;
    color: #FFFFFF;
    font-family: serif;
    text-align: center;
    position: absolute;
    top: 23px;
    right: 0;
    left: 0px;
    bottom: 0;
}
#header h2 span::before {
    content: var(--sub-title);
    font-size: 16px;
    color: var(--accent-color);
    font-family: serif;
    text-align: center;
    position: absolute;
    top: 51px;
    right: 0;
    left: 0px;
    bottom: 0;
}
@media (max-width: 767px) {
  #header h1 a span::before {
    text-align: left;
    left: 10px;
  }
  #header h2 span::before {
    text-align: left;
    left: 10px;
  }
}

/* SEARCH BOX */
#search-top-box-input {
    border: solid 1px #ffffff;
    border-radius: 0px;
    background-color: #000000;
    box-shadow: none;
    color: #ffffff;
}
#search-top-box-input:hover, #search-top-box-input:focus {
    border: solid 1px #ffffff;
    background-color: #000000;
    box-shadow: none;
}
#search-top-box-form input[type=submit] {
    background: none;
    background-color: #ffffff;
    border: none;
    border-radius: 0px;
    box-shadow: none;
    color: #000000;
    position: relative;
}
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background: none;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 1px 3px #000000;
    color: #000000;
    text-shadow: none;
}
#search-top-box {
    position: absolute;
    top: auto;
    bottom: 23px;
    right: 8px;
    width: 200px;
    text-align: right;
}

/* TOP BAR */
#top-bar a {
    color: #ffffff;
}
#top-bar ul li ul {
    border: unset;
    border: unset;
    box-shadow: none;
    overflow: hidden;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #737373;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #000000 !important;
    color: #ffffff;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-top: unset;
}

/* LOGIN STATUS */
#login-status, #login-status a {
    color: #FFFFFF;
}
@media (max-width: 767px) {
    #header .printuser {
     font-size: 0;
    }
}
.printuser a {
    margin: 0;
}
.printuser img.small {
    width: 18px;
    height: 18px;
    padding: 1px 4px 0 0;
    background-image: none !important;
}
@media (max-width: 767px) {
    #header .printuser img.small {
     transform: translate(0, 4px);
    }
}
#my-account {
    display: none;
}

/* SIDE BAR */
#side-bar{
    padding: 0;
    z-index: 9;
    width: 14rem;
    position: sticky;
    font-family: serif;
    background-color: transparent;
}
#side-bar .side-block {
    border-bottom-color: #000000;
    border: none;
    margin-bottom: 0;
    padding: 12px 0px;
    background: none;
    background-color: transparent !important;
    box-shadow: none;
}
#side-bar .side-block a, #side-bar .collapsible-block-unfolded-link .collapsible-block-link{
    color: #000000;
    font-size: 9pt;
}
#side-bar .collapsible-block-link {
    margin-left: 17px;
}
#side-bar .side-block a:hover, #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover{
    color: #000000;
    text-decoration: none;
}
#side-bar .side-block+ .side-block {
    border-top: 1px solid #a0a0a0;
    border-radius: 0;
}
#side-bar .side-block hr {
    display: none;
}
#side-bar hr {
    margin: 0;
    background-color: transparent;
    border-top: solid 1px #000000;
}
#side-bar .heading {
    border-bottom: solid 1px #000000;
    margin-top: 12px;
    padding-left: unset;
    padding-bottom: 3px;
    color: #000000;
    font-size: 9pt;
    text-align: center;
}
#side-bar div.menu-item {
    margin: unset;
    padding-left: 8px;
}
#side-bar div.menu-item a {
    font-size: 9pt;
    font-weight: bold;
    line-height: 23px;
}
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #000000;
    padding-bottom: 12px;
}
.side-block .menu-item > img {
    display: none;
}

@media (max-width: 767px) {
  #side-bar {
    position: fixed;
    width: 14rem;
    background-color: #FFFFFF;
  }
  #side-bar:target {
    width: 14rem;
    border: none;
  }
  #side-bar:target .close-menu {
    width: calc(100% - 14rem);
    left: unset;
    right: 0;
  }
  #top-bar .open-menu a {
    color: transparent !important;
    background-color: #000000 !important;
    border: solid 3px #000000 !important;
    width: 1.325em;
    height: 1.325em;
    top: unset;
    bottom: 0.5em;
  }
  .open-menu a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--sb-btn) 3px no-repeat;
    background-size: calc(1.325em - 3px);
    background-position: center;
    width: 100%;
    height: 100%;
  }
}
@media (min-width: 767px){
  #side-bar{
    top: -1px;
    left: 0;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
#footer{
    margin-top: 0;
}

/* SCROLL BAR */
::-webkit-scrollbar {
    border: none;
}
::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
}
::-webkit-scrollbar-track {
    background-color: #000000;
}

/* RATE */
div.page-rate-widget-box,
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel {
    background-color: #000000 !important;
    border: solid 1px #000000 !important;
    border-radius: unset !important;
}
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    border: solid #000000 !important;
    border-width: 1px 0 !important;
}
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel a,
div.page-rate-widget-box span.cancel a:hover {
    color: #ffffff;
}
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    background-color: #ffffff !important;
}
div.page-rate-widget-box span.rateup a,
div.page-rate-widget-box span.ratedown a {
    color: #000000 !important;
}
div.page-rate-widget-box span.cancel a:hover,
div.page-rate-widget-box span.rateup a:hover,
div.page-rate-widget-box span.ratedown a:hover {
    background: transparent !important;
    color: #A5A5A5 !important;
}
#page-content .page-rate-widget-box .cancel a,
#page-content .page-rate-widget-box .cancel a,
#action-area .page-rate-widget-box .cancel a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
}

/* CREDIT */
#page-content .rate-box-with-credit-button .creditButton {
    background-color: #000000 !important;
    border: solid 1px #000000 !important;
    border-radius: unset !important;
    padding: 1px 0;
}
#page-content .rate-box-with-credit-button .creditButton a:hover {
    color: #ffffff;
}
#html-body .modalbox .modalbox-title {
    border-radius: unset;
    background: #000000;
    color: #ffffff;
}
#html-body .modalbox {
    border-radius: unset;
    color: #000000;
    background: #ffffff;
    box-shadow: none;
}

/* INFO MODULE */
.rate-box-with-credit-button {
    background-color: #000000 !important;
    border: unset !important;
    border-radius: unset !important;
    box-shadow: unset !important;
}
.creditButton p a {
    border-left: solid 1px #FFFFFF !important;
}

/* HEADING */
h1 {
    color: #000000;
}
h2 {
    font-weight: bold;
}

/* BREADCRUMBS */
#breadcrumbs {
    text-align: center;
    margin-top: 1em;
}

/* PAGE TITLE */
#page-title {
    font-family: serif;
    padding: 0;
    border-bottom: solid 1px #000000;
    color: #000000;
    text-align: center;
}
#header h2 span {
    padding: 0;
}
#header h1 a {
    padding: 0;
}
@media (min-width: 767px) {
  #header h2 span {
    padding: 0;
  }
}

/* TOC */
#toc {
    border: solid 2px #CCCCCC;
    background: #FFFFFF;
}

/* BLOCKQUOTE */
blockquote, div.blockquote{
    border: solid 2px #CCCCCC;
    background: #FFFFFF;
}

/* IMAGE BLOCK */
.scp-image-block {
    border: solid 1px #000000;
    box-shadow: none;
}
.scp-image-block img {
    width: 100%;
}
.scp-image-block .scp-image-caption {
    width: 100%;
    border-top: unset;
    background: #1E1E1E;
    color: #ffffff;
}

/* SUP */
sup {
    position: relative;
    top: -0.5em;
    vertical-align: top;
}

/* HR */
hr {
    background: transparent;
    border-top: solid 2px #A5A5A5;
}

/* TABLE */
table.wiki-content-table th {
    background: #1E1E1E;
    color: #ffffff;
}
table.wiki-content-table td {
    background: #FFFFFF;
}

/* TAB */
.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: #FFFFFF;
    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, .yui-navset .yui-navset-top .yui-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    border: none;
    box-shadow: none;
}
.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
    color: #d7d7d7;
    background-color: #000000;
    border: unset;
    box-shadow: none;
    box-shadow: none;
    padding: 8px 0 6px;
}
.yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus {
    color: #f0f0f0;
    background-color: #1E1E1E;
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
    position: relative;
    display: flex;
    flex-grow: 2;
    max-width: 100%;
    margin: 0;
    padding: 0;
    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, .yui-navset .yui-navset-top .yui-nav .selected {
    flex-grow: 2;
    margin: 0;
    padding: 0;
    background-color: #3C3C3C;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    border: none;
}
.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: #3C3C3C;
}
.yui-navset .yui-content {
    background-color: #ffffff;
    box-shadow: none;
    border: solid #000000 1px !important;
}
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    padding: 0 1em;
    box-sizing: border-box;
}

/* PAGE OPTIONS */
div.page-options-bottom {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
}
div.page-options-bottom a.btn-default {
    flex-grow: 1;
    text-align: center;
    margin: 0 2px !Important;
    margin-bottom: 4px !Important;
    color: #FFFFFF;
    padding: 4px 10px;
    background: #1A1A1A;
    border: 2px solid #cccccc;
    transition: 0.5s;
}
div#page-options-bottom {
    margin-top: 3px;
}
div.page-options-bottom a.btn-default:hover {
    text-decoration: none;
}

/* EDIT AREA */
@media (max-width: 479px) {
  #edit-page-title {
    max-width: 80vw;
  }
}
table.form {
    width: 100%;
}

/* FOOTER */
#footer {
    background: #000000;
}

/* CUSTOM */
/* MORE BLOCKQUOTE */
blockquote.dashed-block, div.blockquote.dashed-block {
    border-style: dashed;
}
blockquote.double-block, div.blockquote.double-block {
    border-style: double;
    border-width: 5px;
}

/* MORE HR */
.double-hr hr {
    background: transparent;
    border-top: double 6px #A5A5A5;
}
.dashed-hr hr {
    background: transparent;
    border-top: dashed 2px #A5A5A5;
}

/* ELEMENT BOX */
.notice-box {
    margin: 1em 2em;
    padding: 1em;
    border: double 3px #A5A5A5;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 0px #A5A5A5;
}
.document-box {
    margin: 1em 0;
    padding: 1em;
    border-left: solid 3px #A5A5A5;
    border-right: solid 3px #A5A5A5;
    background: #FFFFFF;
}
.record-box {
    margin: 1em 1em;
    padding: 10px;
    border-top: dashed 2px #A5A5A5;
    border-bottom: dashed 2px #A5A5A5;
    background: #FFFFFF;
}
.round {
    border-radius: 1em;
}

/* EARTHWORM */
.earthworm{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0rem;
    font-family: serif;
    font-weight: bold;
}
.earthworm-item {
    display: inline-flex;
    height: 2em;
    margin: 2px;
    padding: 3px 6px;
    border: solid 2px #A5A5A5;
    background: #FFFFFF;
    text-align: center;
    align-items: center;
}
.earthworm-item a:hover {
    text-decoration: none;
}

/* 中分Sigma9适配 */

#side-bar .collapsible-block-folded {
    background: none;
}

#side-bar .collapsible-block-link {
    margin-left: 8px;
}

css

/* INTERWIKI */
@media (max-width: 767px) {
  #side-bar .side-block, #interwiki .side-block {
    padding: unset;
    margin: unset;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
    background: unset;
  }
}
#side-bar .heading, #interwiki .heading {
    color: #000000;
    border-bottom: solid 1px #000000;
    padding-left: unset;
    font-size: 9pt;
    font-family: serif;
    text-align: center;
}
#side-bar div.menu-item, #interwiki .menu-item  {
    margin: unset;
}
#side-bar div.menu-item img, #interwiki .menu-item img {
    display: none;
}
#side-bar div.menu-item, #interwiki .menu-item a {
    color: #000000;
    font-family: serif;
}

[[ift{$hidetitle}gs -版式]][[iftags]]

[[/iftags]]
[[/ift{$hidetitle}gs]]

[[ift{$toggle-sidebar}gs -版式]][[iftags]]

[[/iftags]]
[[/ift{$toggle-sidebar}gs]]

[[ift{$darkmode}gs -版式]][[iftags]]

[[/iftags]]
[[/ift{$darkmode}gs]]

Footnotes

1.这是脚注。

jp 合著版式

页面版本：⁨0⁩, 最后编辑于: ⁨2025/7/29 08:00:47⁩ (⁨⁨414⁩ 日前⁩), 现时评分: 17

历史附件 + 选项