Theme Darkcode

评分：

评分模块与著作信息模块：

著作信息

---

页面信息

---

更多

更多

---

更多页面信息

---

著作信息模块：

著作信息

---

页面信息

---

更多

更多

---

更多页面信息

---

这是由 hoah2333 制作的美学版式，不与任何 SCP、故事、GoI 格式、设定所挂钩。在设计上参考了 Croquembouche 的安德森机器人版式、Azamo 的玄武岩版式以及 EstrellaYoshte 的单色型版式。

若需使用本版式，请在所需使用的文章开头加上以下代码：

[[include :scp-vn:theme:darkcode]]

你可以在 [[include]] 之后使用如下 CSS 模块来修改标题、副标题和标志。亦可单独修改侧边栏的副标题，默认与页眉副标题相同。

:root {
--title: "页眉大标题";
--subtitle: "页眉副标题";
--sidesubtitle: "侧边栏副标题";
--logo: url("自定义标志 url");
}

---

示例

图像。

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

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

一个普通的下划加粗斜体删除等宽字

另一个普通的 下划 加粗 斜体 删除 等宽 字

| 这是一个链接！ | 一个空链接！ | 一个普通的下划加粗斜体删除等宽链接 | 另一个普通的 下划 加粗 斜体 删除 等宽 链接

折叠 - 点击这里

要注意到，本版式中的折叠前会自带一个箭头，所以你不需要手动输入“+”或“-”来表示折叠状态。

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 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

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

---

一条分割线

嵌套引用块

---

嵌套引用块里的分割线

嵌套嵌套引用块

---

嵌套嵌套引用块里的分割线

够了，禁止套娃

这是	表格
你应该老早	就知道怎么
做这个了吧
1	2
3	4
谁是这里	最厉害的？
#十六进制	#至高无上

---

[[div class="dcbox"]]

这是 dcbox，是暗码版式自带的一个 div 框。

---

上面是 dcbox 里的分割线，跟普通的分割线没什么不同

在 dcbox 外面套一层 dcflex2，可使 dcbox 的宽度缩减为原来的二分之一，并使另一个 dcbox 容纳且并排。

代码如右所示。

[[div class="dcflex2"]]
[[div class="dcbox"]]
在 {{dcbox}} 外面套一层 {{dcflex2}}，可使 {{dcbox}} 的宽度缩减为原来的二分之一，并使另一个 {{dcbox}} 容纳且并排。

代码如右所示。
[[/div]]

[[div class="dcbox"]]
禁止套娃。
[[/div]]
[[/div]]

展开更多 dcflex 示例

这是 dcflex3，可使 dcbox 的宽度缩减为原来的三分之一。

这是 dcflex3，可使 dcbox 的宽度缩减为原来的三分之一。

dcbox 可以嵌套，这可能会对你有所帮助。

这是 dcflex3，可使 dcbox 的宽度缩减为原来的三分之一。

dcbox 也可以嵌套 dcflex，这也可能会对你有所帮助。

就像这个一样。

这是 dcflex4，可使 dcbox 的宽度缩减为原来的四分之一。

如你所见，只需修改 dcflex 后的数字，即可插入更多的 dcbox。

这是 dcflex4，可使 dcbox 的宽度缩减为原来的四分之一。

在宽度过窄的设备中，dcflex 数大于 3 的 dcbox 将固定为只能同时并排 3 个。所以你所做的某些花哨操作可能不能被某些手机党看到。

这是 dcflex4，可使 dcbox 的宽度缩减为原来的四分之一。

这是 dcflex4，可使 dcbox 的宽度缩减为原来的四分之一。

这是 dcflex5，可使 dcbox 的宽度缩减为原来的五分之一。

dcflex5 可能会使得每个 dcbox 变得过窄，所以不推荐使用，同时也不会有 dcflex6。

这是 dcflex5，可使 dcbox 的宽度缩减为原来的五分之一。

这是 dcflex5，可使 dcbox 的宽度缩减为原来的五分之一。

这是 dcflex5，可使 dcbox 的宽度缩减为原来的五分之一。

这是 dcflex5，可使 dcbox 的宽度缩减为原来的五分之一。

[[div class="dcimg"]]

这是 dcimg，它会将其内包含的第一张图片当作框体左上角的标志。

图片可以随意选择，但最好是一个正方形。

展开更多 dcimg 示例

由于 dcimg 也是一种 dcbox（因为它长得跟 dcbox 一模一样），所以它同样可以在外面套上一层 dcflex 以供并排展示。

我好看吗？

---

上图出自 Kcorena 的上下左右。

---

Mindows BowerShell
版权没有（N） Wicrosoft Corporation。不保留任何权利。

安装最新的 BowerShell，了解新功能和改进！http://scp-wiki-cn.wikidot.com/theme:darkcode

PS C:\Users\hoah2333> echo 这是一个终端，你可以使用 [[div class="dcterminal"]] 来应用这个样式。

这是一个终端，你可以使用
[[div
class=dcterminal]]
来应用这个样式。

PS C:\Users\hoah2333> echo 使用 [[span class="cursor"]] 包裹某一句以在其后方加上一个光标，就像下面一样。

使用
[[span
class=cursor]]
包裹某一句以在其后方加上一个光标，就像下面一样。

PS C:\Users\hoah2333> rm -rf /*

上面的一段的代码如下：

展开

[[div class="dcterminal"]]
Mindows BowerShell
版权没有（N） Wicrosoft Corporation。不保留任何权利。

安装最新的 BowerShell，了解新功能和改进！http://scp-wiki-cn.wikidot.com/theme:darkcode

PS C:\Users\hoah2333> ##F9F1A5|echo## 这是一个终端，你可以使用 [[div class="dcterminal"]] 来应用这个样式。

这是一个终端，你可以使用
[[div
class=dcterminal]]
来应用这个样式。

PS C:\Users\hoah2333> ##F9F1A5|echo## 使用 [[span class="cursor"]] 包裹某一句以在其后方加上一个光标，就像下面一样。

使用
[[span
class=cursor]]
包裹某一句以在其后方加上一个光标，就像下面一样。

[[span class="cursor"]]PS C:\Users\hoah2333> rm -rf /*[[/span]]
[[/div]]

代码

展开

/*
    Darkcode Theme
    [2021 Wikidot Theme]
    By hoah2333
    Based on:
      Anderson Robotics Theme by Croquembouche
      BASALT Theme by AZAMO
      Monotypical Theme by EstrellaYoshte
*/
 
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
/* -----变量----- */
 
:root {
    --dark-bg: #1E1F26;
    --darker-bg: #060606;
    --sidebar-bg: var(--dark-bg);
    --topbar-bg: var(--darker-bg);
    --main-bg: #131417;
    --code-bg: #3c4252;
    --text-color: #bcc9c7;
    --strong-text-color: #9ea9b7;
    --header-color: #aaaebc;
    --link-color: #F9F9F9;
    --link-hover-color: #9b9dad;
    --border-color: #444857;
    --main-blue: #0ebeff;
    --main-green: #47cf73;
    --dark-green: #117a28;
    --main-red: #f74545;
    --dark-red: #703232;
    --main-yellow: #F9F1A5;
    --dark-bg-trans: rgba(120, 124, 152, 0.1);
    --title: "Tổ Chức SCP";
    --subtitle: "Quản Thúc · Lưu Trữ · Bảo Vệ";
    --sidesubtitle: var(--subtitle);
    --logo: url('https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg');
    --sidelogo: var(--logo);
    --scrollbar-color: var(--border-color);
    --terminal-bg: #222333;
    --terminal-text-color: #F4F4F4;
}
 
/* -----全局改动----- */
 
body {
    color: var(--text-color);
}
 
div#container-wrap {
    background: var(--main-bg);
}
 
#content-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 100vw;
    margin: 0 auto;
}
 
/* -----顶栏改动----- */
 
#header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 70px;
    max-width: calc(100vw - 18em);
    width: 100%;
    margin: 0 0 0 auto;
    background: none;
    padding: 0;
}
 
#extra-div-1 {
    z-index: 9;
    position: fixed;
    top: 0;
    right: 0;
    max-width: calc(100vw - 17em);
    width: 100%;
    height: 65px;
    background: var(--topbar-bg);
    border-bottom: solid 1px var(--border-color);
}
 
#extra-div-2 {
    z-index: 9;
    position: fixed;
    top: 0;
    right: 0;
    max-width: calc(100vw - 17em);
    width: 100%;
    height: 5rem;
}
 
#extra-div-1::before {
    content: var(--title);
    position: fixed;
    margin-left: 3rem;
    top: 0.2rem;
    color: var(--link-color);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 27.45px;
}
 
#extra-div-2::before {
    content: var(--subtitle);
    position: fixed;
    font-size: 0.8rem;
    margin-left: 3rem;
    top: 2.5rem;
    color: var(--link-hover-color);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}
 
#header h1 {
    position: fixed;
    margin-left: 10px;
    font-size: 100%;
    opacity: 0;
    width: 10rem;
    height: 65px;
}
 
#header h1 a {
    padding: 1em 0;
    font-family: 'Roboto', sans-serif;
}
 
#header h2 span {
    display: none;
}
 
#top-bar {
    position: fixed;
    top: 0;
    left: 45em;
}
 
#top-bar ul li a {
    height: 65px;
    padding: 32.5px 2em;
    color: var(--link-color);
    font-family: 'Roboto', sans-serif;
}
 
#top-bar .top-bar>ul>li.sfhover>a,
#top-bar .top-bar>ul>li:hover>a,
#top-bar .mobile-top-bar>ul>li.sfhover>a,
#top-bar .mobile-top-bar>ul>li:hover>a,
#top-bar ul li.sfhover a:hover,
#top-bar ul li a:hover {
    color: var(--link-hover-color);
    background: var(--dark-bg);
    text-decoration: none;
    border-color: transparent;
}
 
#top-bar ul li ul {
    border-color: var(--border-color);
    border-width: 0 1px;
}
 
#top-bar .top-bar ul li.sfhover ul li a,
#top-bar .mobile-top-bar ul li.sfhover ul li a {
    background: var(--darker-bg);
    border: solid var(--border-color);
    border-width: 1px 1px 1px 0;
    color: var(--link-color);
}
 
#top-bar .top-bar ul li.sfhover ul li.sfhover a,
#top-bar .top-bar ul li.sfhover ul li:hover a,
#top-bar .mobile-top-bar ul li.sfhover ul li.sfhover a,
#top-bar .mobile-top-bar ul li.sfhover ul li:hover a {
    color: var(--link-hover-color);
    background: var(--dark-bg);
}
 
#top-bar ul {
    float: left;
}
 
#top-bar .top-bar ul li:last-of-type ul,
#top-bar .mobile-top-bar ul li:last-of-type ul {
    left: 0;
}
 
#search-top-box {
    position: fixed;
    top: 35px;
    right: 2rem;
    width: auto;
}
 
#search-top-box-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
 
#search-top-box #search-top-box-form>input[type=submit],
#search-top-box #search-top-box-form>input[type=submit]:hover,
#search-top-box #search-top-box-form>input[type=submit]:focus,
#search-top-box #search-top-box-form>input[type=submit]:target {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E") 50%/1rem no-repeat, var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0;
    height: 1.5rem;
    width: 1.5rem;
}
 
#search-top-box #search-top-box-form>input[type=text],
#search-top-box #search-top-box-form>input[type=text]:hover,
#search-top-box #search-top-box-form>input[type=text]:focus,
#search-top-box #search-top-box-form>input[type=text]:target {
    background: var(--dark-bg);
    border-radius: 0;
    border: 1px solid var(--border-color);
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 1.4rem;
    width: 10rem;
    color: var(--link-color);
    padding: 0;
    margin: 0;
}
 
#login-status {
    position: fixed;
    top: 3px;
    right: 2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 0.78em;
    text-align: center;
    color: var(--text-color);
}
 
#login-status>a>strong {
    margin-right: 0.7rem;
    font-size: 0.7rem;
}
 
#login-status>span {
    color: var(--link-color);
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
 
#login-status span.printuser img {
    font-size: 0;
    -webkit-transform: translate(6px, 5px);
    -ms-transform: translate(6px, 5px);
    transform: translate(6px, 5px);
}
 
#account-topbutton {
    border: none;
    margin-left: -0.25rem;
}
 
#account-options {
    background-color: var(--dark-bg);
    border-color: var(--border-color);
    text-align: left;
}
 
#account-options ul li a {
    color: var(--link-color);
}
 
#account-options ul li a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
    background: var(--darker-bg);
}
 
/* -----侧边栏改动----- */
 
#side-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: scroll;
    left: 0;
    top: 0;
    background: var(--sidebar-bg);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 100;
}
 
#side-bar::before {
    content: var(--sidesubtitle);
    background: var(--sidelogo);
    background-size: auto 4.5rem;
    background-repeat: no-repeat;
    background-position: center 0.5rem;
    padding-bottom: 0.3rem;
    padding-top: 5rem;
    display: inline-block;
    font-weight: 800;
    text-align: center;
    width: 100%;
    text-transform: none
}
 
#side-bar::-webkit-scrollbar {
    max-width: 5px;
    width: 5px;
    height: 5px;
}
 
#side-bar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
}
 
#side-bar a,
#side-bar a.newpage,
#side-bar a:visited {
    color: var(--link-color);
}
 
#side-bar a:hover {
    color: var(--link-hover-color);
}
 
#side-bar .side-block,
#side-bar .side-block[style*="background-color"] {
    background: none !important;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
 
#side-bar .side-block .heading {
    color: var(--header-color);
    border: none;
    position: relative;
}
 
#side-bar .collapsible-block-unfolded-link::after,
#side-bar .side-block .heading::after {
    content: "";
    position: absolute;
    bottom: -0.1rem;
    height: 3px;
    left: 0;
    right: 0;
    background: -o-linear-gradient(20deg, var(--main-blue), var(--main-green));
    background: linear-gradient(70deg, var(--main-blue), var(--main-green));
}
 
#side-bar .heading p:after,
#side-bar .collapsible-block-folded .collapsible-block-link:after,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:after {
    content: "\f107";
    width: 1rem;
    margin-right: -0.2rem;
    float: right;
    font-family: FontAwesome;
    text-align: center;
}
 
#side-bar .collapsible-block-folded .collapsible-block-link:after {
    content: "\f104";
}
 
#side-bar .collapsible-block-folded:hover,
#side-bar .menu-item:hover {
    background: var(--main-bg);
    -webkit-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}
 
#side-bar .menu-item img {
    opacity: 0;
}
 
#side-bar .collapsible-block-folded .collapsible-block-link,
#side-bar .menu-item a:hover {
    text-decoration: none;
}
 
#side-bar .menu-item a img {
    opacity: 1;
}
 
#side-bar .collapsible-block-folded {
    background: none;
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: var(--header-color);
}
 
#side-bar .collapsible-block-unfolded-link {
    border: none;
    position: relative;
    padding-bottom: 2px;
}
 
/* -----页面内容----- */
 
#main-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 2em 0 19em;
    width: 100%;
}
 
#page-title {
    color: var(--link-color);
    border-color: var(--border-color);
    font-family: 'Roboto', sans-serif;
}
 
a,
a.newpage,
a:visited {
    color: var(--link-color);
}
 
a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
    background: var(--dark-bg);
}
 
a.newpage:hover {
    color: var(--link-color);
    background: transparent;
}
 
hr {
    background-color: var(--border-color);
    height: 2px;
}
 
.footnotes-footer .title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--link-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: 'Roboto', sans-serif;
}
 
.footnotes-footer .title>,
h1 span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
 
.footnotes-footer .title::after,
h1::after {
    content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 2px;
    margin: auto auto auto 0.5em;
    background-color: var(--border-color);
}
 
/* -----页底----- */
 
#page-options-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
 
.page-options-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    white-space: nowrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: 100%;
    margin: 0;
}
 
#main-content .page-tags::before {
    content: "Tag";
    font-size: 80%;
    display: block;
    padding: 0 0.25em 0.25em 0.25em;
    border-bottom: 1px solid var(--border-color);
}
 
#main-content .page-tags span {
    border-top: none;
}
 
#main-content .page-tags a::before {
    content: "/";
    color: var(--link-hover-color);
}
 
#action-area .action-area-close:hover {
    background: var(--dark-bg);
}
 
#footer {
    background-color: var(--dark-bg);
    color: var(--text-color);
}
 
#license-area {
    color: var(--text-color);
}
 
/* -----杂项----- */
 
.page-rate-widget-box {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 0;
    margin-right: 1.0625rem;
    border: solid 1px var(--link-hover-color);
    background-color: var(--darker-bg);
    height: 1.25rem;
}
 
.page-rate-widget-box .rate-points {
    background-color: var(--dark-bg) !important;
    border: solid var(--link-hover-color);
    border-width: 0 0.125rem 0 0;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    border-radius: 0;
    color: var(--link-color);
    padding: 0 0.625rem 0.065rem 0.625rem;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: var(--darker-bg);
    border: none;
    height: 1.1875rem;
    padding: 2px 0;
}
 
.page-rate-widget-box .cancel {
    background-color: var(--dark-bg);
    border-width: 0 0 0 2px;
    border-radius: 0;
    border-color: var(--link-hover-color);
    padding: 2px 0;
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
    color: var(--link-color);
    padding: 2px unset;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background-color: var(--dark-bg);
    color: var(--link-hover-color);
    border: solid var(--dark-bg);
    border-width: 2px 0 1px 0;
}
 
.page-rate-widget-box .cancel a:hover {
    border-radius: 0;
    background-color: var(--darker-bg);
    color: var(--link-hover-color);
    border: solid var(--darker-bg);
    border-width: 2px 0 1px 0;
    border-left-color: var(--link-hover-color);
}
 
#page-content .creditRate {
    margin: 0;
}
 
.creditRate .rate-box-with-credit-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--dark-bg);
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
 
.rate-box-with-credit-button .creditButton {
    border: solid var(--link-hover-color);
    border-width: 1px 1px 1px 0;
    width: 1.0625rem;
    height: 1.25rem;
}
 
.rate-box-with-credit-button .creditButton p a {
    margin: 0;
    border: solid var(--link-hover-color);
    border-width: 0;
    color: var(--link-color);
    line-height: 1.25rem;
}
 
.creditRate .creditButtonStandalone p a {
    background-color: var(--dark-bg);
    border: solid 1px var(--link-hover-color);
    border-radius: 0;
    color: var(--link-color);
    -webkit-box-shadow: none;
    box-shadow: none;
}
 
.rate-box-with-credit-button .creditButton p a:hover,
.creditRate .creditButtonStandalone p a:hover {
    background-color: var(--darker-bg);
    color: var(--link-hover-color);
}
 
#u-credit-otherwise .modalcontainer .modalbox,
.modalcontainer .modalbox {
    background: var(--dark-bg) !important;
    border-color: var(--border-color);
    border-radius: 0;
    border-width: 2px;
}
 
.scp-image-block {
    border-color: var(--border-color);
    border-width: 2px;
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--dark-bg);
    border-color: var(--border-color);
    border-width: 2px;
}
 
#page-content .collapsible-block .collapsible-block-folded a.collapsible-block-link::before {
    content: "\f105";
    margin-right: 0.5rem;
    font-family: FontAwesome;
    width: 1rem;
}
 
#page-content .collapsible-block .collapsible-block-unfolded a.collapsible-block-link::before {
    content: "\f107";
    margin-right: 0.5rem;
    font-family: FontAwesome;
    width: 1rem;
}
 
.yui-navset {
    width: calc(100% - 15em);
    margin: 0 auto;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0;
    width: calc(100% - 0.1rem);
    border: solid var(--border-color);
    border-width: 0;
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.yui-navset .yui-navset-bottom .yui-nav li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    margin: 0 -2px -2px 0;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
}
 
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-navset-bottom .yui-nav .selected {
    margin: 0 -2px -2px 0;
}
 
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    padding: 0.35rem 0.75rem;
}
 
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    background: none;
    background: var(--dark-bg);
    color: var(--text-color);
    border: solid var(--border-color);
    border-width: 2px;
}
 
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: none;
    background: var(--darker-bg);
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: none;
    background: var(--border-color);
    color: var(--link-color);
    border: solid var(--border-color);
    border-width: 2px;
}
 
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border: none;
}
 
.yui-navset .yui-content {
    background-color: var(--main-bg);
    border: solid 2px var(--border-color);
}
 
/* 分页动画 by Croquembouche */
 
.yui-navset .yui-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
 
.yui-navset .yui-content>div {
    display: block;
    top: 0;
    overflow: hidden;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content>div>* {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content>div[style*="none"] {
    display: block !important;
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    -webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    -o-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -ms-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
    -webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
 
#page-content .yui-navset .yui-content>div[style*="block"] {
    display: block !important;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 9999rem;
    -webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    -o-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -ms-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
    -webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@-webkit-keyframes tab-disappear {
    0% {
        max-height: 9999rem;
    }
    1% {
        max-height: 100vh;
    }
    100% {
        max-height: 0;
    }
}
 
@keyframes tab-disappear {
    0% {
        max-height: 9999rem;
    }
    1% {
        max-height: 100vh;
    }
    100% {
        max-height: 0;
    }
}
 
@-webkit-keyframes tab-appear {
    0% {
        max-height: 0;
    }
    99% {
        max-height: 100vh;
    }
    100% {
        max-height: 9999rem;
    }
}
 
@keyframes tab-appear {
    0% {
        max-height: 0;
    }
    99% {
        max-height: 100vh;
    }
    100% {
        max-height: 9999rem;
    }
}
 
blockquote,
div.blockquote {
    border: 2px solid var(--border-color);
    background-color: var(--dark-bg-trans);
    width: calc(100% - 15em);
    margin: 1em auto;
}
 
table.wiki-content-table th {
    border: 2px solid var(--border-color);
    background-color: var(--border-color);
    color: var(--link-color);
}
 
table.wiki-content-table td {
    border: 2px solid var(--border-color);
    background-color: var(--main-bg);
}
 
#page-content .wiki-content-table tr:nth-child(2n-1),
#page-content .wiki-content-table tr:nth-child(2n-1) td {
    background-color: var(--dark-bg);
}
 
#edit-page-form #edit-page-title,
#edit-page-form #edit-page-textarea,
#edit-page-form #edit-page-comments,
#edit-page-form .change-textarea-size a,
#file-upload-form #upload-userfile,
#file-upload-form #upload-dfilename,
#file-upload-form #file-comments,
#rename-option-rename #move-new-page-name {
    border: 2px solid var(--border-color);
    background-color: var(--dark-bg);
    color: var(--link-color);
}
 
#edit-page-form #edit-page-textarea {
    height: 80vh;
}
 
#lock-info,
.owindow {
    background-color: var(--dark-bg);
    border: 2px solid var(--border-color);
}
 
.owindow .title {
    background-color: var(--main-bg);
}
 
.owindow .button-bar a {
    background-color: var(--main-bg);
    color: var(--link-color);
    border: 2px solid var(--border-color);
}
 
.owindow .button-bar a:hover {
    background-color: var(--dark-bg);
    color: var(--link-hover-color);
}
 
.owindow .content.modal-body img {
    background-color: transparent !important;
}
 
.hovertip {
    background-color: var(--dark-bg) !important;
    border: 2px solid var(--border-color) !important;
}
 
.code {
    border: 2px solid var(--border-color);
    background-color: var(--dark-bg);
    font-family: 'Fira Code', '幼圆', Cousine, monospace;
    max-width: calc(100vw - 26em) !important;
}
 
tt {
    font-family: 'Fira Code', '幼圆', Cousine, monospace;
    background: var(--code-bg);
}
 
strong:not(a strong) {
    color: var(--strong-text-color);
}
 
pre {
    font-family: 'Fira Code', '幼圆', Cousine, monospace;
}
 
.code pre span[class*="hl-"] {
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg);
}
 
.inline-diff ins {
    background-color: var(--dark-green);
}
 
.inline-diff ins::before {
    color: var(--main-green);
}
 
.inline-diff del {
    background-color: var(--dark-red);
}
 
.inline-diff del::before {
    color: var(--main-red);
}
 
::-webkit-scrollbar {
    max-width: 5px;
    width: 5px;
    height: 5px;
}
 
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
}
 
* {
    scrollbar-color: #444857 #1b1c22;
    scrollbar-width: thin;
}
 
/* -----移动端适应----- */
 
#top-bar .open-menu a {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 5;
    font-family: 'Nanum Gothic', san-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    background-color: var(--darker-color);
    color: var(--link-color);
    border: none;
    border-radius: 0;
}
 
@media (max-width: 1350px) {
    #top-bar {
        left: 35em;
    }
}
 
@media (max-width: 1250px) {
    #header,
    #extra-div-1,
    #extra-div-2 {
        max-width: 100%;
    }
    #extra-div-1::before,
    #extra-div-2::before {
        margin-left: 4.7rem;
    }
    #top-bar {
        left: 20em;
    }
    #header h1 {
        left: 4.7em;
    }
    #main-content {
        max-width: calc(100vw - 10em);
        margin: 0 auto;
    }
    .yui-navset,
    blockquote,
    .blockquote {
        width: calc(100% - 5em);
    }
    .code {
        max-width: calc(100vw - 2em) !important;
    }
    #side-bar {
        display: block;
        position: fixed;
        top: 66px;
        left: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        -webkit-transition: left 0.4s ease-in-out;
        -o-transition: left 0.4s ease-in-out;
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    }
    #side-bar:target {
        left: 0;
    }
    #top-bar .close-menu {
        margin-left: 19.75em;
        opacity: 0;
    }
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}
 
@supports selector(:focus-within) {
    @media (max-width: 1250px) {
        #top-bar .open-menu a {
            pointer-events: none;
        }
        #side-bar .close-menu {
            display: block;
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            z-index: -1;
        }
        #side-bar .close-menu::before {
            content: "";
            position: fixed;
            z-index: 5;
            display: block;
            top: 0.5em;
            left: 0.5em;
            border: 0.2em solid transparent;
            width: 30px;
            height: 30px;
            font-size: 30px;
            line-height: 0.9em;
            pointer-events: all;
            cursor: pointer;
        }
        #side-bar:focus-within {
            left: 0;
        }
        #side-bar:focus-within .close-menu::before {
            pointer-events: none;
        }
    }
}
 
@media (min-width: 768px) {
    #top-bar .mobile-top-bar {
        display: block;
    }
    #top-bar .mobile-top-bar li {
        display: none;
    }
}
 
@media (max-width: 1100px) {
    #extra-div-1::before {
        font-size: 22px;
        top: 0;
    }
    #extra-div-2::before {
        display: none;
    }
    #top-bar {
        top: 30px;
        left: 4.7rem;
    }
    #top-bar .top-bar>ul>li>a,
    #top-bar .mobile-top-bar>ul>li>a {
        height: 43px;
        padding: 17px 1em 17px 1em;
    }
    #top-bar .mobile-top-bar {
        position: relative;
    }
    #search-top-box #search-top-box-form>input[type=text] {
        display: none;
    }
    #search-top-box {
        top: 4px;
        right: 0.3rem;
    }
}
 
@media (max-width: 767px) {
    #top-bar {
        top: 18px;
    }
    #main-content {
        max-width: calc(100vw - 5em);
    }
}
 
/* -----DLC----- */
 
.dcflex2,
.dcflex3,
.dcflex4,
.dcflex5 {
    /* Safari */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
 
.dcflex2>.dcbox,
.dcflex2>.dcimg {
    -ms-flex-preferred-size: calc(100% / 2 - 0.3%);
    flex-basis: calc(100% / 2 - 0.3%);
}
 
.dcflex3>.dcbox,
.dcflex3>.dcimg {
    -ms-flex-preferred-size: calc(100% / 3 - 0.3%);
    flex-basis: calc(100% / 3 - 0.3%);
}
 
.dcflex4>.dcbox,
.dcflex4>.dcimg {
    -ms-flex-preferred-size: calc(100% / 4 - 0.3%);
    flex-basis: calc(100% / 4 - 0.3%);
}
 
.dcflex5>.dcbox,
.dcflex5>.dcimg {
    -ms-flex-preferred-size: calc(100% / 5 - 0.3%);
    flex-basis: calc(100% / 5 - 0.3%);
}
 
@media (max-width: 767px) {
    .dcflex3>.dcbox,
    .dcflex3>.dcimg {
        -ms-flex-preferred-size: calc(100% / 3 - 3%);
        flex-basis: calc(100% / 3 - 3%);
    }
    .dcflex4>.dcbox,
    .dcflex4>.dcimg {
        -ms-flex-preferred-size: calc(100% / 3 - 3%);
        flex-basis: calc(100% / 3 - 3%);
    }
    .dcflex5>.dcbox,
    .dcflex5>.dcimg {
        -ms-flex-preferred-size: calc(100% / 3 - 3%);
        flex-basis: calc(100% / 3 - 3%);
    }
}
 
.dcbox,
.dcimg {
    background: var(--dark-bg);
    padding: 0.625rem 1.5rem 0.625rem;
    margin: 1rem 0;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
.dcimg {
    margin-top: 2.5rem;
}
 
.dcimg>img:first-of-type {
    margin: -2.5rem 0 1.5rem 1.5rem;
    width: 55px;
    border: 2px solid var(--border-color);
}
 
.dcterminal {
    background: var(--terminal-bg);
    color: var(--terminal-text-color);
    border: 2px solid var(--border-color);
    padding: 0 0.7rem;
    margin: 0.7rem 0;
    font-size: 14px;
    font-family: 'Fira Code', '幼圆', Cousine, monospace;
}
 
.dcterminal .cursor {
    -webkit-animation: blink .5s step-end infinite alternate;
    animation: blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 0.1rem;
    border-right: 1px solid var(--terminal-text-color);
}
 
@-webkit-keyframes blink {
    50% {
        border-color: transparent;
    }
}
 
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

Chú thích

1. 这是一个脚注。