暗码 版式

[[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]]