暗码 版式
2021年10月15日
修订 7
核心指标
评分
67
↑ 67
↓ 0
支持率
100%
总票数 67
Wilson 95% 下界
94.6%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
加载图表中...
最近修订
1 / 3
最近投票
1 / 7
2025-09-18
2025-08-30
2025-08-16
2025-07-10
2025-05-31
2025-05-15
2025-04-04
2025-02-19
2024-11-12
2024-09-04
页面源码
源码字符数 39279文字字数 11106
[[module css]]
@import url('https://scp-wiki-cn.wikidot.com/theme:darkcode/code/1');
[[/module]]
[[div_ style="display: none"]]
[[embed]]
<iframe src="//scp-wiki-cn.wdfiles.com/local--files/nav%3Aside/styleFrame.html?%40import%20url('https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Ffont-awesome%2F4.3.0%2Fcss%2Ffont-awesome.min.css')%3B%3Aroot%7B--dark-bg%3A%20%231E1F26%3B--sidebar-bg%3A%20var(--dark-bg)%3B--main-bg%3A%20%23131417%3B--header-color%3A%20%23aaaebc%3B--link-color%3A%20%23F9F9F9%3B--link-hover-color%3A%20%239b9dad%3B--main-blue%3A%20%230ebeff%3B--main-green%3A%20%2347cf73%3B%7D.side-block%20div.menu-item%20a%7Bcolor%3A%20var(--link-color)%3B%7D.side-block%20div.menu-item%20a%3Ahover%7Bcolor%3A%20var(--link-hover-color)%3Btext-decoration%3A%20none%3B%7D.side-block%7Bbackground%3A%20var(--sidebar-bg)%3Bborder%3A%20none%3B-webkit-box-shadow%3A%20none%3Bbox-shadow%3A%20none%3B%7D.side-block%20.heading%7Bcolor%3A%20var(--header-color)%3Bborder%3A%20none%3Bposition%3A%20relative%3B%7D.side-block%20.heading%3A%3Aafter%7Bcontent%3A%20%22%22%3Bposition%3A%20absolute%3Bbottom%3A%20-0.1rem%3Bheight%3A%203px%3Bleft%3A%200%3Bright%3A%200%3Bbackground%3A%20-o-linear-gradient(20deg%2Cvar(--main-blue)%2Cvar(--main-green))%3Bbackground%3A%20linear-gradient(70deg%2Cvar(--main-blue)%2Cvar(--main-green))%3B%7D.side-block%20.heading%20p%3Aafter%7Bcontent%3A%20%22%5Cf107%22%3Bwidth%3A%201rem%3Bmargin-right%3A%20-0.2rem%3Bfloat%3A%20right%3Bfont-family%3A%20FontAwesome%3Btext-align%3A%20center%3B%7D.side-block%20.menu-item%3Ahover%7Bbackground%3A%20var(--main-bg)%3B-webkit-transition%3A%200.2s%20ease%3B-o-transition%3A%200.2s%20ease%3Btransition%3A%200.2s%20ease%3B%7D.side-block%20.menu-item%20img%7Bopacity%3A%200%3B%7D" name="styleFrame"></iframe>
[[/embed]]
[[/div]]
[[iftags +版式]]
[[>]]
**评分：**
[[module Rate]]
[[/>]]
[[>]]
**评分模块与著作信息模块：**
[[/>]]
[[include :scp-wiki-cn:credit:start]]
页面信息
[[include :scp-wiki-cn:credit:more]]
更多页面信息
[[include :scp-wiki-cn:credit:end]]
[[>]]
**著作信息模块：**
[[/>]]
[[include :scp-wiki-cn:credit:start-standalone]]
页面信息
[[include :scp-wiki-cn:credit:more-standalone]]
更多页面信息
[[include :scp-wiki-cn:credit:end-standalone]]
这是由 [[*user hoah2333]] 制作的美学版式，不与任何 SCP、故事、GoI 格式、设定所挂钩。在设计上参考了 [[*user Croquembouche]] 的[[[theme:ar|安德森机器人版式]]]、[[*user Liryn]] 的[[[theme:BASALT|玄武岩版式]]]以及 [[*user EstrellaYoshte]] 的[[[theme:monotypical|单色型版式]]]。
若需使用本版式，请在所需使用的文章开头加上以下代码：
> {{@@[[include :scp-wiki-cn:theme:darkcode]]@@}}
你可以在 [[include]] 之后使用如下 CSS 模块来修改标题、副标题和标志。亦可单独修改侧边栏的副标题，默认与页眉副标题相同。
[[div class="blockquote"]]
:root {
@@ --title: "页眉大标题";@@
@@ --subtitle: "页眉副标题";@@
@@ --sidesubtitle: "侧边栏副标题";@@
@@ --logo: url("自定义标志 url");@@
}
[[/div]]
----
+ 示例
[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/tb.png|caption=图像。|width=200px]]
可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
一个普通的__下划__**加粗**//斜体//--删除--{{等宽}}__**//--{{字}}--//**__
另一个普通的 __下划__ **加粗** //斜体// --删除-- {{等宽}} __**//--{{字}}--//**__
| [https://www.baidu.com/ 这是一个链接！] | [[[4o4-n0t-f0und|一个空链接！]]] | [[a href="http://scp-wiki-cn.wikidot.com/"]]一个普通的__下划__**加粗**//斜体//--删除--{{等宽}}__**//--{{链接}}--//**__[[/a]] | [[a href="http://scp-wiki-cn.wikidot.com/"]]另一个普通的 __下划__ **加粗** //斜体// --删除-- {{等宽}} __**//--{{链接}}--//**__[[/a]]
@@ @@
@@ @@
@@ @@
@@ @@
[[collapsible show="折叠 - 点击这里" hide="折叠 - 点击这里"]]
要注意到，本版式中的折叠前会自带一个箭头，所以你不需要手动输入“+”或“-”来表示折叠状态。
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
~~~~
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。[[footnote]]这是一个脚注。[[/footnote]]
这是一个长的 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]]
[[/tab]]
[[tab 这里的空 tab 有着一个特别特别长的名字，我想知道为什么会有这么长？]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
@@ @@
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
>> -----
>> 嵌套引用块里的分割线
>>
>>> 嵌套嵌套引用块
>>> -----
>>> 嵌套嵌套引用块里的分割线
>>>
>>>> 够了，禁止套娃
@@ @@
||~ 这是 ||~ 表格 ||
|| 你应该老早 || 就知道怎么 ||
|||| 做这个了吧 ||
|| 1 || 2 ||
|| 3 || 4 ||
|| 谁是这里 || 最厉害的？ ||
|| #十六进制 || #至高无上 ||
----
[[div class="dcbox"]]
{{@@[[div class="dcbox"]]@@}}
这是 {{dcbox}}，是暗码版式自带的一个 div 框。
----
上面是 {{dcbox}} 里的分割线，跟普通的分割线没什么不同
[[/div]]
[[div class="dcflex2"]]
[[div class="dcbox"]]
在 {{dcbox}} 外面套一层 {{dcflex2}}，可使 {{dcbox}} 的宽度缩减为原来的二分之一，并使另一个 {{dcbox}} 容纳且并排。
代码如右所示。
[[/div]]
[[div class="dcbox"]]
[[div class="code"]]
@@[[div class="dcflex2"]]@@
@@[[div class="dcbox"]]@@
@@在 {{dcbox}} 外面套一层 {{dcflex2}}，可使 {{dcbox}} 的宽度缩减为原来的二分之一，并使另一个 {{dcbox}} 容纳且并排。@@
@@代码如右所示。@@
@@[[/div]]@@
@@[[div class="dcbox"]]@@
禁止套娃。
@@[[/div]]@@
@@[[/div]]@@
[[/div]]
[[/div]]
[[/div]]
[[collapsible show="展开更多 dcflex 示例" hide="收起 dcflex 示例"]]
[[div class="dcflex3"]]
[[div class="dcbox"]]
这是 {{dcflex3}}，可使 {{dcbox}} 的宽度缩减为原来的三分之一。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex3}}，可使 {{dcbox}} 的宽度缩减为原来的三分之一。
[[div class="dcbox"]]
{{dcbox}} 可以嵌套，这可能会对你有所帮助。
[[/div]]
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex3}}，可使 {{dcbox}} 的宽度缩减为原来的三分之一。
[[div class="dcflex2"]]
[[div class="dcbox"]]
{{dcbox}} 也可以嵌套 {{dcflex}}，这也可能会对你有所帮助。
[[/div]]
[[div class="dcbox"]]
就像这个一样。
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="dcflex4"]]
[[div class="dcbox"]]
这是 {{dcflex4}}，可使 {{dcbox}} 的宽度缩减为原来的四分之一。
如你所见，只需修改 {{dcflex}} 后的数字，即可插入更多的 {{dcbox}}。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex4}}，可使 {{dcbox}} 的宽度缩减为原来的四分之一。
在宽度过窄的设备中，{{dcflex}} 数大于 3 的 {{dcbox}} 将固定为只能同时并排 3 个。所以你所做的某些花哨操作可能不能被某些手机党看到。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex4}}，可使 {{dcbox}} 的宽度缩减为原来的四分之一。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex4}}，可使 {{dcbox}} 的宽度缩减为原来的四分之一。
[[/div]]
[[/div]]
[[div class="dcflex5"]]
[[div class="dcbox"]]
这是 {{dcflex5}}，可使 {{dcbox}} 的宽度缩减为原来的五分之一。
{{dcflex5}} 可能会使得每个 {{dcbox}} 变得过窄，所以不推荐使用，同时也不会有 {{dcflex6}}。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex5}}，可使 {{dcbox}} 的宽度缩减为原来的五分之一。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex5}}，可使 {{dcbox}} 的宽度缩减为原来的五分之一。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex5}}，可使 {{dcbox}} 的宽度缩减为原来的五分之一。
[[/div]]
[[div class="dcbox"]]
这是 {{dcflex5}}，可使 {{dcbox}} 的宽度缩减为原来的五分之一。
[[/div]]
[[/div]]
[[/collapsible]]
[[div class="dcimg"]]
[[image http://darry.wikidot.com/local--files/upload/%E7%A6%B9%E7%8E%8B%E4%B8%8D%E6%AD%BB]]
{{@@[[div class="dcimg"]]@@}}
这是 {{dcimg}}，它会将其内包含的第一张图片当作框体左上角的标志。
图片可以随意选择，但最好是一个正方形。
[[/div]]
[[collapsible show="展开更多 dcimg 示例" hide="收起 dcimg 示例"]]
[[div class="dcflex2"]]
[[div class="dcimg"]]
[[image http://darry.wikidot.com/local--files/upload/%E7%A6%B9%E7%8E%8B%E4%B8%8D%E6%AD%BB]]
由于 {{dcimg}} 也是一种 {{dcbox}}（因为它长得跟 {{dcbox}} 一模一样），所以它同样可以在外面套上一层 {{dcflex}} 以供并排展示。
[[/div]]
[[div class="dcimg"]]
[[image http://darry.wikidot.com/local--files/upload/%E7%A6%B9%E7%8E%8B%E4%B8%8D%E6%AD%BB]]
我好看吗？
----
上图出自 [[[kcorena-s-artwork-2|Kcorena 的上下左右]]]。
[[/div]]
[[/div]]
[[/collapsible]]
----
[[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]]
[[div class="dcterminal"]]
上面的一段的代码如下：
[[collapsible show="展开" hide="收起"]]
[[div class="code"]]
@@[[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]]@@
[[/div]]
[[/collapsible]]
@@@@
[[/div]]
+ 代码
[[collapsible show="展开" hide="隐藏"]]
[[code type="css"]]
/*
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=Noto+Sans+SC&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);
--scrollbar-color: var(--border-color);
--terminal-bg: #222333;
--terminal-text-color: #F4F4F4;
--title: "SCP基金会";
--subtitle: "控制 · 收容 · 保护";
--sidesubtitle: var(--subtitle);
--logo: url('https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg');
--sidelogo: var(--logo);
--body-font: verdana, arial, helvetica, sans-serif; /* Wikidot 默认字体 */
--ui-font: 'Noto Sans SC', sans-serif;
--mono-font: 'Fira Code', '幼圆', Cousine, monospace;
}
/* -----全局改动----- */
body {
color: var(--text-color);
}
body,
input,
textarea,
select,
button,
meter,
progress,
input.text,
input.checkbox,
div.note,
#lock-info {
font-family: var(--body-font);
}
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: 80px;
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: var(--ui-font);
font-weight: 700;
font-size: 27.45px;
}
#extra-div-2::before {
content: var(--subtitle);
position: fixed;
font-size: 0.9rem;
margin-left: 3rem;
top: 2.5rem;
color: var(--link-hover-color);
font-family: var(--ui-font);
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: var(--ui-font);
}
#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: var(--ui-font);
}
#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: var(--ui-font);
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: var(--ui-font);
}
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: var(--ui-font);
}
.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: "标签";
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: var(--ui-font);
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: var(--mono-font);
max-width: calc(100vw - 26em) !important;
}
tt {
font-family: var(--mono-font);
background: var(--code-bg);
}
strong:not(a strong) {
color: var(--strong-text-color);
}
pre {
font-family: var(--mono-font);
}
.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: var(--mono-font);
}
.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;
}
}
[[/code]]
[[/collapsible]]
[[/iftags]]