Flop 风格:暗色
2022年10月6日
修订 16
评分
23
↑ 24
↓ 1
支持率
96%
总票数 25
Wilson 95% 下界
80.5%
在相同票数下更稳健的支持率估计
争议指数
0.154
评分趋势
按周聚合 加载图表中...
最近修订
1 / 6
SOURCE_CHANGED
9 天前
似乎是因为[[/iftags]]位置放错了导致了版式出问题的原因。在此进行修改,可通过对比版本检视原/iftags位置
SOURCE_CHANGED
12 天前
捉虫
修改标签
12 天前
移除标签:需更新。
最近投票
1 / 3
2025-09-06
2025-09-06
2025-08-29
2025-05-16
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2024-09-03
相关页面
暂无推荐
页面源码
[[iftags -版式]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]
[[/div]]
[[/div]]
[[/div]]
[[/iftags]]
[[iftags +版式]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="authorbox tableb"]]
||~ Flop 风格:暗色 ||
||= [[span class="bt bb"]]作者[[/span]] [[*user Lt Flops]] ||
||~ 发布于 2022 年 04 月 05 日 ||
[[div class="flavorbox"]]
这是 {{authorbox}} 的一个使用例。请查阅[#Sideboxes 侧框栏]子节段以获取更多信息。
[[/div]]
[[div class="flavorbox sml"]]
[[collapsible folded="no" show="展开" hide="收合"]]
= **导航**
**I.** [#What 这是什么?]
**II.** [#How 使用方法]
@@ @@**1.** [#Cmpts 预加载组件]
@@ @@**2.** [#CVars 自定义变量]
@@ @@**3.** [#FlopsHdr Flops 版头]
@@ @@**4.** [#Sideboxes 侧框栏]
@@ @@**5.** [#Misc 可修改部分杂项]
@@ @@**6.** [#TVars 版式变体]
**III.** [#GenFrmt 示例格式(常规)]
**IV.** [#AdvFrmt 示例格式(高级)]
[[/collapsible]]
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[/iftags]]
[[iftags +版式]]
[[div style="display: none"]]
[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wdfiles.com/local--files/theme:flopstyle-dark/alt_logo_tyrian.png
|caption=.]]
[[/div]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidebox table1 tableb"]]
||~ Flop 风格:暗色 ||
||= 这是 {{sidebox}} 的一个使用例。 ||
||~ [[image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/scp_foundation_logo.png]] ||
[[div class="flavorbox centered"]]
这是一个 {{flavorbox}}。
请查阅[#Sideboxes 侧框栏]子节段以获取更多信息。
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[# BTT]]
[[div class="meta-title"]]
Flop 风格:[[span class="DARK-title"]]暗色[[/span]]
[[/div]]
[[div class="pseudocrumbs"]]
[[[sigma-9-themes|Sigma 版式中心]]] >> Flop 风格:暗色
[[/div]]
[[=image https://scp-wiki.wdfiles.com/local--files/theme:flopstyle-dark/alt_logo_tyrian.png style="width: 200px; padding: 2.5rem"]]
= **评分模块**
[[module Rate]]
= **评分模块 + 信息模块**
[[include :scp-wiki-cn:credit:start]]
+++++* [[[floppyphoenix|如果你喜欢这个版式的话,来看看我的作者页吧!]]]
[[include :scp-wiki-cn:credit:end]]
= **独立的信息模块**
[[include :scp-wiki-cn:credit:start-standalone]]
[[include :scp-wiki-cn:credit:end-standalone]]
@@ @@
[[div class="templateInfo"]]
[[# What]]
+* 这是什么?
----
这是由 [[*user Lt Flops]] 制作的版式。其被制作于广泛运用在任何偏好使用暗色模式或夜晚模式的文章。
仅在知道你在做什么的情况下使用该版式。
该版式**__不兼容于__****黑色标记笔**、**玄武岩**和**Sigma+**。
[[/div]]
[[div class="templateInfo"]]
[[collapsible show="著作信息" hide="著作信息"]]
Flop 风格:暗色是以下版式的分支:
* [[[theme:flopstyle|]]] [[size 80%]]作者:[[user Lt Flops]][[/size]]
* [[[theme:penumbra|]]] [[size 80%]]作者:[[user EstrellaYoshte]][[/size]]
主要归功于制作了[*https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png 版式][*https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png 标志]([*https://creativecommons.org/licenses/by-sa/3.0/ CC BY-SA 3.0])的 [[user JackalRelated]]。
最后但并非最不重要的是,感谢审查了整个版式的 [[user stormbreath]],以及在多个区域提供意见的 [[user Croquembouche]]。
[[/collapsible]]
[[/div]]
[[div class="templateInfo"]]
+++++* >> [[[*https://scp-wiki.wikidot.com/forum/t-14594014/theme:flopstyle-dark#post-5253227|更新补丁记录]]] <<
[[/div]]
@@ @@
[[div class="templateInfo"]]
[[# How]]
+* 使用方法
+++* 基本信息
----
= 请在你页面中设定 Flop 风格:暗色之前阅读此介绍节段。
[[/div]]
[[div class="templateInfo"]]
@@ @@[[span class="bt bb"]]第一步,引用版式[[/span]] 复制此代码并将其黏贴至你页面的顶部:
[[div class="code terminal terminal--dark"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo templatePadding"]]
@@ @@[[span class="terminal-span"]][可选][[/span]] [[span class="bt bb"]]第二步,添加署名[[/span]] 复制此代码并将其黏贴至评分模块的正下方——如下所示:
[[div class="code terminal terminal--dark" style="padding-bottom: 1rem"]]
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|Rate##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"byline"##**##var(--c-keyword)|]]##**
**##var(--c-builtin)|@@[[span]]@@##**作者:作者链接**##var(--c-builtin)|@@[[/span]]@@##**[[span class="pointer"]](A)[[/span]]
**##var(--c-builtin)|@@[[span]]@@##**#**##var(--c-builtin)|@@[[/span]]@@##**[[span class="pointer"]](B)[[/span]]
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
@@ @@**2.(A)**用作者/合著者的名字替换{{作者链接}},并且链接至相应的作者页。
@@ @@**2.(B)**用预计读者阅读你的文章所用时间(以**分钟**为单位)替换 {{#}}。若需预计你文章的阅读时间,你可以复制文章文本并将其黏贴至 [*https://niram.org/read/ Read-o-Meter][[span class="fnnum"]].[[/span]][[span class="fncon"]]**译注:**仅适用于英语文章。中文阅读时间预测推荐使用[http://www.wenpipi.com/ 此工具]。[[/span]]工具中,然后四舍五入至最近的分钟数。[[span class="fnnum"]].[[/span]][[span class="fncon"]][[span class="bt bb"]]声明[[/span]] Read-o-Meter 并不会记录或储存你的数据。[[/span]]
@@ @@[[size 120%]]‼️[[/size]] 请确保在包含这些 span 的行之间没有空行,否则其将不会如预期般运作!
[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/hCGnFsp.png
|caption=,,第二步实装时的一个示例。,,
|width=200px
|align=center
]]
[[/div]]
[[/div]]
[[div class="templateInfo"]]
@@ @@[[span class="bt bb"]]第三步,设置页面标题[[/span]] 复制此代码并将其黏贴至你想要标记文章开始的地方:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"meta-title"##**##var(--c-keyword)|]]##**
这里是你的标题
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
由于无障碍的原因,你**必须**在每个使用 Flop 风格:暗色的页面中都设置一遍页面标题。
[[/div]]
[[div class="templateInfo templatePadding"]]
@@ @@[[span class="bt bb"]]第四步,设置[https://zh.wikipedia.org/wiki/%E9%9D%A2%E5%8C%85%E5%B1%91%E5%AF%BC%E8%88%AA 面包屑导航][[/span]] 复制此代码并将其黏贴至页面标题正下方:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"pseudocrumbs"##**##var(--c-keyword)|]]##**
@@[[[parent-page-url1|第一个父页面标题]]] » 子页面标题@@
@@[[[parent-page-url2|第二个父页面标题]]] » 子页面标题@@
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
@@ @@[[size 120%]]‼️[[/size]] 如果你在创建一个需要使用 [[[listpages-magic-and-you|ListPages]]] 的文章,别担心——你依然可以[[[listpages-magic-and-you#toc20|如常设置段落页的父页面]]],但是你必须要以通常的方式设置。在这种情况下,功能比形式重要得多。
[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/uKmDCe1.png
|caption=,,第三步与第四步实装时的示例。,,
|width=100%
|align=center
]]
[[/div]]
[[/div]]
[[div class="templateInfo"]]
现在……如果你在 Flop 风格:暗色里所想要的只有基础美学设计的话,那你就可以随意收下代码然后溜之大吉了!但如果你想继续往下翻动的话,我就能给你看看,这兔洞到底有多深。
[[/div]]
@@ @@
@@ @@
@@ @@
[[div class="templateInfo"]]
= [[span class="tb"]]Flop 风格:暗色在设计的时候考虑到了以下组件……[[/span]]
[[/div]]
@@ @@
@@ @@
@@ @@
[[div class="templateInfo templateMargin"]]
[[# Cmpts]]
+++* 1. 预加载组件
----
该版式预先打包了以下六个组件:
@@ @@**1.1.** [[[component:acs-animation|ACS 动画]]] [[size 80%]]作者:[[user EstrellaYoshte]][[/size]]
@@ @@**1.2.** [[[component:betterfootnotes|更好的脚注]]] [[size 80%]]作者:[[user EstrellaYoshte]][[/size]]
@@ @@**1.3.** [[[component:croqstyle|Croq 风格 CSS]]] [[size 80%]]作者:[[user Croquembouche]][[/size]]
@@ @@**1.4.** [[[component:fade-in|渐显]]](设置了 {{speed=1}})[[size 80%]]作者:[[user Croquembouche]][[/size]]
@@ @@**1.5.** [[[component:text-style|短信样式]]] [[size 80%]]作者:[[user JaonHax]][[/size]]
@@ @@**1.6.** [[[component:toggle-sidebar|切换侧边栏]]] [[size 80%]]作者:[[user EstrellaYoshte]][[/size]]
[[/div]]
[[div class="templateInfo"]]
[[# CVars]]
+++* 2. 自定义变量
++++++* (仅在知道你自己在做什么的时候修改这些变量)
----
所有的变量修改都必须被包裹在 CSS 模块,{{[[module CSS]]}} 内。所有列于下方的变量亦必须被包裹在 {{:root}} 选择器内。
@@ @@[[span class="bt bb"]]2.1. 颜色[[/span]] 你可以根据需要改变各种版式颜色。只要复制以下任何一条变量(但也只需复制你需要的变量)然后按照需求编辑该变量:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|CSS##**##var(--c-keyword)|]]##**
@@ @@##var(--c-symbol)|:root##{
[[/div]]
[[div class="code terminal terminal--dark"]]
@@ @@##var(--c-comment)|@@/* -- 颜色 -- */@@##
@@ @@##var(--c-builtin)|@@--@@accentColor##: ##var(--c-value)|强调色##;
@@ @@##var(--c-builtin)|@@--@@accentColorLite##: ##var(--c-value)|较亮强调色##;
@@ @@##var(--c-builtin)|@@--@@hue##: ##var(--c-value)|色度##;
[!--@@ @@##var(--c-builtin)|@@--@@textColor##: ##var(--c-value)|text_color##;
@@ @@##var(--c-builtin)|@@--@@fgColor##: ##var(--c-value)|foreground_color##;
@@ @@##var(--c-builtin)|@@--@@bgColor##: ##var(--c-value)|background_color##;--]
##var(--c-comment)|/* 默认值(请勿复制):##
##var(--c-comment)|@@ * @@__accentColor:__## [[span class="col_box" style="background: var(--accentColor); border-color: hsl(325, 88%, 81%)"]]
[[/span]] **Bright Tyrian pink** hsl(325, 80%, 60%)##var(--c-comment)|.##
##var(--c-comment)|@@ * @@__accentColorLite:__## [[span class="col_box" style="background: var(--accentColorLite); border-color: hsla(325, 88%, 91%, .5)"]]
[[/span]] **Soft Tyrian pink** hsla(325, 80%, 70%, .5)##var(--c-comment)|.##
##var(--c-comment)|@@ * @@__hue:__## 325deg##var(--c-comment)|.##
##var(--c-comment)|@@**/@@##
[[/div]]
{{accentColor}}(强调色)是最广泛被使用的页面变量。对比起所有的其它变量,修改 accentColor 通常是该版式的用户最倾向于做出的唯一改动。
如果你修改了 {{accentColor}},那么你也必须修改另外两条变量:
@@ @@**2.1. (A)** {{accentColorLite}}[[span class="bt bb"]][[size 0%]]:[[/size]][[/span]] 这一变量必须比你的 accentColor 有着**更高**的亮度以及**更低**的透明度值。我推荐亮度值比你所选择的 accentColor 高出**至少 10%**,然后透明度值调为 **0.5**。
@@ @@**2.1. (B)** {{hue}}[[span class="bt bb"]][[size 0%]]:[[/size]][[/span]] 这一变量必须合乎你所选择的 accentColor 的色度值。
若需选择你的颜色,我推荐使用 [*https://hslpicker.com/ HSL 颜色选择器]。**HSL** 是一种人类友好型颜色系统,三个字母分别代表[[span class="ruby"]]色度[[span class="rt"]]**H**ue[[/span]][[/span]]、[[span class="ruby"]]饱和度[[span class="rt"]]**S**aturation[[/span]][[/span]]、[[span class="ruby"]]亮度[[span class="rt"]]**L**ightness[[/span]][[/span]]。这一系统可以被扩展成 HSL**A**,包含了 **A**lpha 值(透明度)。
若需确认你所选择的 {{accentColor}} 是否符合[*https://www.w3.org/TR/WCAG/#contrast-minimum 网络内容可及性参考标准(Web Content Accessibility Guidelines,WCAG)],那么就看看它的[*https://contrast-ratio.com/ 对比度比率]。在 “Background”(背景)栏中填入[[span class="col_box" style="background: var(--bgColor); border-color: hsl(222, 62%, 63%)"]]
[[/span]] [[span class="wt"]]**hsl(222, 12%, 21%)**[[/span]],并在 “Text color”(文本颜色)栏中填入你所选择的 {{accentColor}}。WCAG 需求标题文本的对比度比率**大于等于 3**。
[[/div]]
[[div class="templateInfo"]]
@@ @@[[span class="bt bb"]]2.2. 标志与字体[[/span]] 你可以修改标志、字体等:
[[div class="code terminal terminal--dark"]]
@@ @@##var(--c-comment)|@@/* -- 标志 -- */@@##
@@ @@##var(--c-builtin)|@@--@@lgurl##: ##var(--c-builtin)|url##(##var(--c-string)|@@此处填写链接@@##);
[[/div]]
[[div class="code terminal terminal--dark"]]
@@ @@##var(--c-comment)|@@/* -- 字体 -- */@@##
@@ @@##var(--c-builtin)|@@--@@header-font##: ##var(--c-string)|"你的字体", sans-serif##;
@@ @@##var(--c-builtin)|@@--@@body-font##: ##var(--c-string)|"你的字体", sans-serif##;
##var(--c-comment)|/* 默认值(请勿复制):##
##var(--c-comment)|@@ * @@[[span style="font-family: var(--header-font)"]]__header-font:__ Montserrat, sans-serif[[/span]]##
##var(--c-comment)|@@ * @@[[span style="font-family: var(--body-font)"]]__body-font:__ Inter, sans-serif[[/span]]##
##var(--c-comment)|@@**/@@##
[[/div]]
[[/div]]
[[div class="templateInfo templateMargin"]]
@@ @@[[span class="bt bb"]]2.3. 页眉标题[[/span]] 你亦可以修改标题、副标题、标题颜色以及副标题颜色:
[[div class="code terminal terminal--dark"]]
@@ @@##var(--c-comment)|@@/* -- 标题 -- */@@##
@@ @@##var(--c-builtin)|@@--@@header-title##: ##var(--c-value)|"标题"##;
@@ @@##var(--c-builtin)|@@--@@header-subtitle##: ##var(--c-value)|"副标题"##;
@@ @@##var(--c-builtin)|@@--@@titleColor##: ##var(--c-value)|标题颜色##;
@@ @@##var(--c-builtin)|@@--@@subtitleColor##: ##var(--c-value)|副标题颜色##;
##var(--c-comment)|/* 默认值(请勿复制):##
##var(--c-comment)|@@ * @@__titleColor:__## [[span class="col_box" style="background: var(--accentColor); border-color: hsl(325, 88%, 81%)"]]
[[/span]] **Bright Tyrian pink** hsl(325, 80%, 60%)##var(--c-comment)|.##
##var(--c-comment)|@@ * @@__subtitleColor:__## [[span class="col_box" style="background: var(--accentColor); border-color: hsl(325, 88%, 81%)"]]
[[/span]] **Bright Tyrian pink** hsl(325, 80%, 60%)##var(--c-comment)|.##
##var(--c-comment)|@@**/@@##
[[/div]]
[[div class="code terminal terminal--dark"]]
}
**##var(--c-keyword)|[[/module]]##**
[[/div]]
[[/div]]
[[div class="templateInfo templateMargin templatePadding"]]
[[# FlopsHdr]]
+++* 3. [[[component:flops-header|Flops 版头]]]
----
Flop 风格:暗色提供了一个暗色模式友好版本的 Flops 版头:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:component:flops-header##
**##var(--c-keyword)||####var(--c-builtin)|item####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|containment####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|level####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|security####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|disruption-bg-color####var(--c-keyword)|=##**
**##var(--c-keyword)|]]##**
[[/div]]
[[div class="tableb"]]
[[include :scp-wiki:component:image-block
|name=https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/cGbnRpP.png
|caption=,,Flops 版头实装时的示例。,,
|width=100%
|align=center
]]
[[/div]]
[[/div]]
[[div class="templateInfo templateMargin"]]
[[# Sideboxes]]
+++* 4. 侧框栏
----
[[span class="ruby"]]侧框栏[[span class="rt"]]Sideboxes[[/span]][[/span]]构建为以下两种形式的组件:
* [[span class="bt bb"]]A 型[[/span]] {{authorbox}} 与 [[span class="table1"]]{{sidebox}}[[/span]]
* [[span class="bt bb"]]B 型[[/span]] {{sidecontainer}}
用法根据类型的不同而有所区别。
* {{authorbox}} 与 [[span class="table1"]]{{sidebox}}[[/span]] 不会在 {{width=1280px}} 及以下的屏幕上显示,包括了移动端的屏幕。这两个侧框栏可以设定为显示页面与作者信息。
* {{sidecontainer}} 会在 {{width=1280px}} 及以下的屏幕上收合到页面边缘处。在这些屏幕上,你可以通过用手指点击它或将光标悬停到其上来查看其内容。它可以被设定为显示额外的叙事性信息。
在设定这些内容前先考虑这种情况——一大部分的 SCP 维基用户都是通过移动端设备浏览的。[[/div]]
[[div class="templateInfo"]]
++++* [[span class="bt bh"]]A 型[[/span]] Authorbox 与 Sidebox
++++++* (见左上角与右上角)
----
= ,,//调整自 [[user EstrellaYoshte]] 所作的[[[theme:penumbra|半影版式]]]//,,
默认情况下,{{authorbox}} 是**强制使用**的。它会在所有引用了 Flop 风格:暗色的页面上预加载。如果你想//移除//这一框体,请将这个:
[[div class="code terminal terminal--dark"]]
= **##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##**##var(--c-keyword)|]]##**
[[/div]]
替换成这个:
[[div class="code terminal terminal--dark centered"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|style####var(--c-operator)|=####var(--c-string)|"display: none;"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
@@ @@[[span class="bt bb"]]替代选项 1[[/span]] 在移除了 {{authorbox}} 之后,你可以将其//替换//成一个自定义的版本,可以显示任何你希望显示的信息。这一功能在合著、重写或翻译页面之中格外有用。为供参考,这里是创建 {{authorbox}} 的代码:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"anchor"##**##var(--c-keyword)|]]##**[[span class="pointer"]]设定 authorbox 的粘附位置。[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"authorbox tableb"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|ListPages## ##var(--c-builtin)|name####var(--c-operator)|=####var(--c-string)|"="##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|%%title%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||=## ##var(--c-keyword)|[[span##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"bt bb"##**##var(--c-keyword)|]]##**作者**##var(--c-keyword)|@@[[/span]]@@##** ##var(--c-symbol)|%%created_by_linked%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|发布于 %%created_at|%Y 年 %m 月 %d 日%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|[[/module]]##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"flavorbox"##**##var(--c-keyword)|]]##**[[span class="pointer"]]创建 authorbox 的 flavorbox。[[/span]]
这里是所需的[[span class="ruby"]]{{调味}}[[span class="rt"]]{{flavor}}[[/span]][[/span]]文本。
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**[[span class="pointer"]]设定限制锚点的结束位置。[[/span]]
[[/div]]
默认情况下,{{authorbox}} 会使用 ListPages 来自动显示归属资料。理论上你可以复制 {{authorbox}} 内部的 ListPages 模块并将其黏贴至//任何//维基页面中,这些字段将以该页面独特的样式填充。当然了,你也可以随你所需修改这里任何的字段。
你也可以编辑你自己的 {{authorbox}} 来显示你页面专属的调味文本,比如给读者的一条提示。
**记住** -- {{flavorbox}} 的使用是可选的。但这是你在 {{authorbox}} 内应该使用的唯一一个 div 块。
[[/div]]
[[div class="templateInfo templateMargin"]]
@@ @@[[span class="bt bb"]]替代选项 2[[/span]] 如果你想的话,你可以通过将 {{authorbox}} 替换成 [[span class="table1"]]{{sidebox}}[[/span]] 的方式将其移动到页面的右手边。若需创建 [[span class="table1"]]{{sidebox}}[[/span]],复制以下代码并将其黏贴至你页面顶部的 CSS 模块之中:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"anchor"##**##var(--c-keyword)|]]##**[[span class="pointer"]]设定 sidebox 的粘附位置[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"sidebox tableb"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[module##** ##var(--c-builtin)|ListPages## ##var(--c-builtin)|name####var(--c-operator)|=####var(--c-string)|"="##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|%%title%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||=## ##var(--c-keyword)|[[span##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"bt bb"##**##var(--c-keyword)|]]##**作者**##var(--c-keyword)|@@[[/span]]@@##** ##var(--c-symbol)|%%created_by_linked%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|||~##** ##var(--c-symbol)|发布于 %%created_at|%Y 年 %m 月 %d 日%%## **##var(--c-keyword)|||##**
**##var(--c-keyword)|[[/module]]##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"flavorbox"##**##var(--c-keyword)|]]##**[[span class="pointer"]]创建 sidebox 的 flavorbox。[[/span]]
这里是所需的 [[span class="ruby"]]{{调味}}[[span class="rt"]]{{flavor}}[[/span]][[/span]] 文本。
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**[[span class="pointer"]]设定限制锚点的结束位置。[[/span]]
[[/div]]
如果你想要在你的页面内插入 {{sidecontainers}},那么我强烈建议使用 {{authorbox}} 而不是 [[span class="table1"]]{{sidebox}}[[/span]]。原因是,当 [[span class="table1"]]{{sidebox}}[[/span]] 与 {{sidecontainer}} 并列出现时,它们会相互重叠起来,造成视觉上的混乱。这可能会给读者造成困惑,所以,最好还是稳妥一点。
你可以配置 [[span class="table1"]]{{sidebox}}[[/span]] 来传递与 {{authorbox}} 相同的信息。或者——就像我在此展示的例子一样——你可以加一句精炼的文章标语以及一个独特的标志。
与其它的表格类似,你也可以给它应用一个独特的底色——比如说现在的绿色,是用 [[span class="table1"]]{{table1}}[[/span]] 来实现的。请参考[#GenFrmt 示例格式(通用)]节段内的**表格格式**折叠以获取更多信息。
[[/div]]
[[div class="templateInfo"]]
++++* [[span class="bt bh"]]B 型[[/span]] Sidecontainer
++++++* (见下文)
----
= ,,//由 [[user Woedenaz]] 提供//,,
{{sidecontainer}} 是一个**可选项**。它可由此代码设置:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"limit"##**##var(--c-keyword)|]]##**[[span class="pointer"]]设定限制锚点的开始位置。[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"anchor"##**##var(--c-keyword)|]]##**[[span class="pointer"]]设定 sidecontainer 的粘附位置。[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"sidecontainer"##**##var(--c-keyword)|]]##**
此处为所需的 {{sidecontainer}} 文本。
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
与 {{sidecontainer}} 有关联的文本。
**##var(--c-keyword)|@@[[/div]]@@##**[[span class="pointer"]]设定限制锚点的结束位置。[[/span]]
[[/div]]
我推荐在与 {{sidecontainer}} 有关联的文本后方插入一个常规的换行符。你可以通过用两组 {{@@}} 将一个空格包起来(两边各一组)的形式来换行。{{sidecontainer}} 将在你滚过此文本的时候显示在其侧边。
[[/div]]
@@ @@
[[collapsible hideLocation="both" show="展开示例" hide="收起示例"]]
[[div class="justified"]]
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidecontainer"]]
有了技巧,就可以
[[/div]]
[[/div]]
术路一么内业需查放进称,感置示要相包看离消林,义回询走第标众林过。整电步毛使儿马头这用市级,化支状化露保段所质。指干它飞走机知方对圆活,院快可适如计其龙作,往参任丽度九刺须。到道或金京身然价有发飞,结拉际采色明专图老改,题养询没信七书两周。照地工传七之上来活查七,张电影华情组京与和交,两时五丽如十直持。收调位线市导第,活战拉或第厂,意更葡查关。
程所法油花后话报又,话本做石路热路,便否路品须前。
手圆包包率调那被,价见精养治清断,品辰较社了。科约引思约九如人些,根线却心价政人土以,号图九卖学际。
[[/div]]
----
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidecontainer"]]
有多个 sidecontainer,
[[/div]]
[[/div]]
器识样儿任主选断此,分周据政头进油,完制增报分织。动方管再当看物同及,少影以转中年且太,油离更电万些秀。儿人越商会导中生张斗,花难按如金县规委展按,员员直丽别该承。果于除段受种同品导入任,龙公论据带严研属式,社府如展在英候效。为许便委基约青始上度安,节关有据每位养持年作,及声半门豆新质东。
如应回省眼看者八,效民立委快市较,每医壳芦呆。总养科自年将会点每局表,率八例流况传文需从,快济史杏精林秀。
方研压总料类,空外政想量几,式刷车。术委定生算把县全开教查据,龙去南调真须次维决门说,被值写参投枪院常。在效验克下次度,原放程工白两,办求我文。学新写认立三济才结表别,看了劳任马三空气近真,真小适西商及学育。
[[/div]]
----
[[div class="limit"]]
[[div class="anchor"]]
[[div class="sidecontainer"]]
效果就是这样的。
[[/div]]
[[/div]]
军育自即事公提次做,边斗只主界已飞义,院较积次你水。济般革级位根进东争,住同务号如。解正位头因分斯圆面每员设,为场干种说展广公认据,身元水名其隶呜。转满际角同北水信素大深包验象准进验,量土金着生图正照辰强而豆写农。把六影五习许二十少如手结几二还达复,无市书段意规意E长往者呈材。
动程革活斯制选等每育总用指,地思东起技花争保万近。中好已中林百建这加联,标口几基计名根叫极,容观心束青造。往热才期节集形极示证习,必家查部图石头技连,总素及往如画值。
等头主严价科增西拉原,进然维器转参强场团,有家壳中凝时任。属五都价再选为级或,般切认同能候金,名且度起及。取来代科管流用好更品局车,识而调而基区民旱马。再群车精们半龙,具身众计形状,林址先小。见它先得必色建代养育十,器感维领隶府下杏。
[[/div]]
[[/div]]
@@ @@
[[/collapsible]]
@@ @@
[[div class="templateInfo templateMargin"]]
**记住**——没有了 {{limit}} div 块,{{anchor}} 就会在你滚过其起始点之后始终停留在页面内。
[[/div]]
[[div class="templateInfo"]]
[[# Misc]]
+++* 5. 各种各样的可修改部分
----
如果有需要的话,你同样可以修改这里的任何 CSS 属性以更好地适应你的页面。
[[/div]]
[[div class="templateInfo templateMargin"]]
+++++* 修改标志透明度
----
[[div class="code terminal terminal--dark"]]
@@ @@##var(--c-symbol)|#extra-div-1##{
@@ @@##var(--c-builtin)|filter##: ##var(--c-builtin)|opacity##(##var(--c-value)|百分数##);
}
[[/div]]
= 默认透明度 = **33%**
[[/div]]
[[div class="templateInfo"]]
[[# TVars]]
+++* 6. 版式变体
----
如果你在版式引用块中插入不同的变量,你就可以给你的页面应用一个预先构建好的版式变体。
[[/div]]
[[module CSS]]
.code.terminal:is(.variant, .subvariant) p {
text-align: left;
}
div.bookshelf {
display: flex;
flex-flow: column wrap;
gap: 0 1rem;
justify-content: center;
}
div.bookshelf > * {
flex-basis: 0;
}
div.bookshelf > * > .image-container {
padding: 0 0 .5rem;
}
@media (max-width: 767.9px) {
.code.terminal.variant p {
padding: 0;
}
}
@media (min-width: 768px) {
.code.terminal.variant p {
padding: 0 7rem;
}
div.bookshelf {
flex-flow: row wrap;
}
div.bookshelf > * {
flex: 1 20.5rem;
}
}
[[/module]]
@@ @@
[[=]]
[[collapsible hideLocation="both" show="展开元基金会变体" hide="收起元基金会变体"]]
[[div class="centered"]]
[[div class="templateInfo"]]
+++++* 炼狱变体
----
,,//为 “[[[from-120-s-archives-hub|120 站档案馆]]]”设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/7jPETa7.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|inferno=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 枫叶变体
----
,,//为“[[[on-guard-43-hub|值守 43]]]” 设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/127EKin.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|maple=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* [[span class="ruby"]]塑料[[span class="rt"]]PLASTIC[[/span]][[/span]]变体
----
,,//为 “[[[the-s-c-plastics-hub|S & C 塑料]]]”设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/22ggZBm.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|plastic=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 草原变体
----
,,//为即将到来的“所选之路”设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/Y8qtAEM.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|prairie=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 海沫变体
----
,,//为故事系列“[[[the-fishing-council|钓鱼议会]]]”所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/Mj34X93.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|seafoam=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 先锋变体
----
,,//为“[[[no-return-hub|无悔之道]]]”设定——先锋分支所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/z8blxcV.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|threshold=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 门槛变体
----
,,//为“[[[no-return-hub|无悔之道]]]”设定——门槛分支所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/GDhZ8V0.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|vanguard=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[/div]]
[[/collapsible]]
[[collapsible hideLocation="both" show="展开巫师变体" hide="收起巫师变体"]]
[[div class="templateInfo"]]
+++++* [[span class="ruby"]]巫师[[span class="rt"]]WITCH[[/span]][[/span]]变体
----
= ,,//为“[[span class="ruby"]]编织难可觉察之线[[span class="rt"]]Weaving Imperceptible Threads[[/span]][[/span]]”设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/0bxdPMM.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##**##var(--c-keyword)|]]##**
[[/div]]
= 使用下述代码中的任何一个来启用[[span class="ruby"]]巫师[[span class="rt"]]WITCH[[/span]][[/span]]主题的替用变体。
[[div class="bookshelf"]]
[[div]]
++++++* 灰烬之书变体
----
[[=image https://i.postimg.cc/RF9vwH9X/ASHES-Subvariant.png class="demo" style="outline-width: 3px"]]
[[div class="code terminal terminal--dark subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|ashes=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div]]
++++++* 光明之书变体
----
[[=image https://i.postimg.cc/MGJw8Qcq/LIGHT-Subvariant.png class="demo" style="outline-width: 3px"]]
[[div class="code terminal terminal--dark subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|light=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div]]
++++++* 原野之书变体
----
[[=image https://i.postimg.cc/0jF3dTDP/VELDT-Subvariant.png class="demo" style="outline-width: 3px"]]
[[div class="code terminal terminal--dark subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|veldt=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div]]
++++++* 未尽的线索变体
----
[[=image https://i.postimg.cc/G2qnYgXm/LOOSE-THREADS-Subvariant.png class="demo" style="outline-width: 3px"]]
[[div class="code terminal terminal--dark subvariant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witch=a##
**##var(--c-keyword)||##**##var(--c-string)|loose-threads=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 乳石变体
----
,,//为乳酸异常部门所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/dQceHmg.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|galaxias=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 教学之道变体
----
,,//为国际统合奇术研究中心所作//,,
[[=image https://i.postimg.cc/5yjyY4Wk/PEDAGOGY-Variant.png class="demo" style="outline-color: hsl(215, 73%, 63%)"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|pedagogy=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[/collapsible]]
[[collapsible hideLocation="both" show="展开其他变体" hide="收起其他变体"]]
[[div class="templateInfo"]]
+++++* 意式卷饺变体
----
,,//为2024愚人节所作// 🎭,,
[[=image https://i.postimg.cc/QNkv0JK4/CALZONE-Variant.png class="demo" style="outline-color: hsl(30, 26%, 53%)"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|calzone=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 冥府变体
----
,,//为“[[[pieklo-cycow-hub|地狱齐楚夫]]]“设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/gFR4r88.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|chthonian=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 怪物变体
----
,,//为万圣节所作// 🎃,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/eNH5IeC.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|rhizome=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 星象联珠变体
----
,,//为三重月倡议会所作//,,
[[=image https://i.postimg.cc/fbcCHSky/SYZYGY-Variant.png class="demo" style="outline-color: hsl(345, 6%, 10%)"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|syzygy=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 巫术时刻变体
----
,,//为“[[[nightfall-hub|夜幕降临]]]”设定所作//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/oGNA52f.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|witching-hour=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo"]]
+++++* 尿影变体
----
,,//搞笑变体//,,
[[=image https://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/lqQ0kZx.png class="demo"]]
[[div class="code terminal terminal--dark variant"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki-cn:theme:flopstyle-dark##
**##var(--c-keyword)||##**##var(--c-string)|peenumbra=a##**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[/collapsible]]
[[/=]]
@@ @@
[[div class="templateInfo"]]
[[# GenFrmt]]
+* 示例格式 [常规]
----
[[/div]]
@@ @@
[[collapsible hideLocation="both" show="展开常规格式" hide="收起常规格式"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
= **粗体** | //斜体// | __下划线__ | --删除线-- | [[span style="font-family: var(--mono-font)"]]打字机体[[/span]] | ^^上标^^,,下标,,
= 键入 4 个连字符 {{[[span style="letter-spacing: .3rem"]]@@----@@[[/span]]}} 以创建一条分割线。
----
[[toc]]
[[div class="code"]]
@@ 假代码选择器 {@@
@@ 假代码属性: 假代码值;@@
@@}@@
[[/div]]
[https://scp-wiki-cn.wikidot.com/# 一个链接]([https://baidu.com 一个你可能已经访问过的链接])
# 有序列表
# 列表项目
# 列表项目
* 无序列表
* 列表项目
* 列表项目
[[tabview]]
[[tab 分页]]
此为分页(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]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
[[/collapsible]]
[[collapsible hideLocation="both" show="展开插图格式" hide="收起插图格式"]]
= ,,//插图方块//,,
[[div class="FL_parent"]]
[[div class="FL_child"]]
[[include :scp-wiki-cn:component:image-block
|name=https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png
|caption=标准插图方块
|width=150px
|align=center
]]
[[/div]]
[[div class="FL_child"]]
[[include :snippets:bs-image
|heading=Bootstrap 插图方块
|image=https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png
|caption=花哨又可自定义的插图方块
|link=/local--files/theme:flopstyle-dark/alt_logo_tyrian.png
|alt=Flop 风格:暗色的标志
|width=150px
|float=middle
|kind=primary
]]
[[/div]]
[[/div]]
----
[[div class="templateInfo centered"]]
++* Bootstrap 插图方块
----
作为标准插图方块的替代方案,Flop 风格:暗色采用了由 [[*user Timothy Foster]] 开发的 “Bootstrap 插图方块” 修改版本,该组件的源代码托管于 Wikidot Snippets 站点。您可在 [*https://snippets.wikidot.com/code:bootstrap-image-box 此处] 查看其文档。
以下是对该组件的简要概述:
[[/div]]
@@ @@
[[div class="templateInfo templateSetup"]]
++++* 设置说明
[[/div]]
[[div class="templateInfo templateSetup"]]
= [[span class="bt bb"]]步骤 1[[/span]] 将这个复制并黏贴到你的页面中:
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:snippets:bs-image##
**##var(--c-keyword)||####var(--c-builtin)|image####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|heading####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|caption####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|link####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|alt####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|width####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|float####var(--c-keyword)|=##**
**##var(--c-keyword)||####var(--c-builtin)|kind####var(--c-keyword)|=##**
**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[div class="templateInfo templateSetup"]]
= [[span class="bt bb"]]步骤 2[[/span]] 参考这条短指导:
[[/div]]
[[div_ class="help"]]
> [[span style="font-variant: all-small-caps"]]引用块开头[[/span]] ↦
>
> 图片文件**(//必要!//)** ↦
>
> 图片标题 ↦
>
> 图片描述 ↦
>
> 图片链接 ↦
>
> 替代文本**(参照下方的解释)** ↦
>
> 数量与单位 ↦
>
> 这个插图方块要放在哪一边 ↦
>
> 插图方块颜色**(//全都试一试!//)** ↦ **推荐 primary**
>
> [[span style="font-variant: all-small-caps"]]引用块结尾[[/span]] ↦
>
> [[include :snippets:bs-image
>
> |image={{文件名.png}}
>
> |heading=**标题**
>
> |caption=**描述性文本**
>
> |link={{链接.名}}
>
> |alt=**替代文本**
>
> |width={{长度}}
>
> |float={{left}}/{{middle}}/{{right}}(左/中/右)
>
> |kind={{primary}}/{{warning}}/{{danger}}/{{info}}/{{success}}/{{none}}(主要/警告/危险/信息/成功/无)
>
> ]]
>
[[/div]]
[[div class="templateInfo templateSetup"]]
= [[span class="bt bb"]]步骤 3[[/span]] 在每一个 = 符号后面填入字段。
[[/div]]
----
= ,,//替代文本//,,
由于无障碍的原因,我强烈建议在你的图片中使用**替代文本**。如果你需要详细了解替代文本及其与无障碍的关联,那么我推荐阅读[*https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/ 这篇由 The Big Hack 所写的文章]。
要点就是:当你设置一个图片的时候,会有几率有某些读者——不如那些有视力障碍的人或盲人——无法看到这个图片。那么替代文本所作的就是给上述图片提供一个屏幕阅读器可以轻易解析的简要描述。替代文本亦将会在图片文件/链接变得不可用时出现。
若需给一个图片设置替代文本,你所需要引用的就是 **Bootstrap 插图方块**内的 {{alt}} 字段,或是**[*https://www.wikidot.com/doc-wiki-syntax:images 维基语法插入图片]**。[[span class="fnnum"]].[[/span]][[span class="fncon"]][[span class="bt bb"]]注意[[/span]] 标准插图方块并不支持替代文本。[[/span]]
演示:
[[div class="templateInfo templateSetup"]]
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:snippets:bs-image##
**##var(--c-keyword)||####var(--c-builtin)|image####var(--c-keyword)|=##**@@https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/Larry_the_cat.jpg@@
**##var(--c-keyword)||####var(--c-builtin)|heading####var(--c-keyword)|=##**猫猫 Larry
**##var(--c-keyword)||####var(--c-builtin)|caption####var(--c-keyword)|=##**他真软和。
**##var(--c-keyword)||####var(--c-builtin)|link####var(--c-keyword)|=##**@@https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/Larry_the_cat.jpg@@
**##var(--c-keyword)||####var(--c-builtin)|alt####var(--c-keyword)|=##Larry,一只米色的猫,警惕地坐在花园内的木制草坪躺椅旁。**
**##var(--c-keyword)||####var(--c-builtin)|width####var(--c-keyword)|=##**300px
**##var(--c-keyword)||####var(--c-builtin)|float####var(--c-keyword)|=##**middle
**##var(--c-keyword)||####var(--c-builtin)|kind####var(--c-keyword)|=##**primary
**##var(--c-keyword)|]]##**
[[/div]]
[[/div]]
[[include :snippets:bs-image
|image=https://scp-wiki.wdfiles.com/local--files/theme:flopstyle-dark/Larry_the_cat.jpg
|heading=猫猫 Larry
|caption=他真软和。
|link=https://scp-wiki.wdfiles.com/local--files/theme:flopstyle-dark/Larry_the_cat.jpg
|alt=Larry,一只米色的猫,警惕地坐在花园内的木制草坪躺椅旁。
|width=300px
|float=middle
|kind=primary
]]
= 注意 {{alt}} 字段。这就是屏幕阅读器将要给它的用户所传达的内容。
----
[[=]]
,,//图片 div//,,
,,//抄袭自 [[user Placeholder McD]] 与 [[user HarryBlank]] 所作的[[[theme:blankstyle|空白风格 CSS]]]//,,
[[div style="overflow: hidden"]]
[[div class="imagediv"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/base_image_frame.png]]
{{@@[[div class="imagediv"]]@@}}
{{@@[[=image 这里填链接]]@@}}
{{@@[[/div]]@@}}
[[/div]]
[[/div]]
[[/=]]
[[/collapsible]]
[[collapsible hideLocation="both" show="展开表格格式" hide="收起表格格式"]]
[[div class="centered"]]
,,//标准表格//,,
[[div class="tableb"]]
[[include :scp-wiki-cn:component:image-block
|name=https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png
|caption=被 {{tableb}} div 断开的插图方块。
|width=125px
|align=right
]]
[[/div]]
||~ 标题 ||~ 标题 ||~ 标题 ||~ 标题 ||
|| 单元格内容 || 单元格内容 || 单元格内容 || 单元格内容 ||
[[div class="tableb"]]
||||~ 一个表格,有着非常酷的 hcell 样式 ||
||= 而它的单元格已被 ||= {{tableb}} div 所分割开! ||
[[/div]]
@@ @@
----
,,//ACS 色表格//,,
,,//抄袭自 [[user Placeholder McD]] 与 [[user HarryBlank]] 所作的[[[theme:blankstyle|空白风格 CSS]]]//,,
[[div class="table1"]]
||~ 这是一个绿色的表格; ||
||= 这个测试很好玩。 ||
[[/div]]
[[span class="table1"]]{{@@[[div class="table1"]]@@}}[[/span]]
[[div class="table2"]]
||~ 这是一个蓝色的表格; ||
||= 这个测试一样很好玩。 ||
[[/div]]
[[span class="table2"]]{{@@[[div class="table2"]]@@}}[[/span]]
[[div class="table3"]]
||~ 这是一个黄色的表格; ||
||= 这个测试一样很好玩。 ||
[[/div]]
[[span class="table3"]]{{@@[[div class="table3"]]@@}}[[/span]]
[[div class="table4"]]
||~ 这是一个橙色的表格; ||
||= 这个测试一样很好玩。 ||
[[/div]]
[[span class="table4"]]{{@@[[div class="table4"]]@@}}[[/span]]
[[div class="table5"]]
||~ 这是一个红色的表格; ||
||= 这个测试没那么好玩。 ||
[[/div]]
[[span class="table5"]]{{@@[[div class="table5"]]@@}}[[/span]]
[[div class="table6"]]
||~ 这是一个紫色的表格; ||
||= 这//就是//测试。 ||
[[/div]]
[[span class="table6"]]{{@@[[div class="table6"]]@@}}[[/span]]
[[div class="table0"]]
||~ 这是一个白色的表格; ||
||= 这里没有测试。 ||
[[/div]]
[[span class="table0"]]{{@@[[div class="table0"]]@@}}[[/span]]
将编号表格 span 和粗体文本结合起来可以创造出彩色的粗体文本:
[[span class="table1"]] **绿色** [[/span]]
@@[[span class="table1"]] **绿色** [[/span]]@@
[[span class="table2"]] **蓝色** [[/span]]
@@[[span class="table2"]] **蓝色** [[/span]]@@
[[span class="table3"]] **黄色** [[/span]]
@@[[span class="table3"]] **黄色** [[/span]]@@
[[span class="table4"]] **橙色** [[/span]]
@@[[span class="table4"]] **橙色** [[/span]]@@
[[span class="table5"]] **红色** [[/span]]
@@[[span class="table5"]] **红色** [[/span]]@@
[[span class="table6"]] **紫色** [[/span]]
@@[[span class="table6"]] **紫色** [[/span]]@@
[[span class="table0"]] **白色** [[/span]]
@@[[span class="table0"]] **白色** [[/span]]@@
[[/div]]
[[/collapsible]]
@@ @@
[[div class="templateInfo"]]
[[# AdvFrmt]]
+* 示例格式 [高级]
----
[[/div]]
@@ @@
[[collapsible hideLocation="both" show="展开内容警告标题模块" hide="收起内容警告标题模块"]]
由于该标题的特殊性质(并非用于美观目的,而是对作者和读者均具有重要实用功能),它已被与其他 div 块隔离。
{{内容警告}}是置于文章开头前的提示,用于警示读者文中包含可能引发不适的内容。此类通知会(简要)列出文章中存在的敏感主题。
= 另请参阅 -- [[[adult-content-warning-guide|]]]。
[[div class="content-warning-alt"]]
本 **[SCP / GOI格式 / 故事 / 艺术作品 / 中心页]** 包含 **[可能令人不安的内容]** ,或对部分读者造成心理影响。
{{@@[[div class="content-warning-alt"]]@@}}
[[/div]]
[[/collapsible]]
[[collapsible hideLocation="both" show="展开自定义 div 块" hide="收起自定义 div 块"]]
[[note]]
+++* 每一个 div 块示例都包含:
[[<]]
* div 外观。
* 用法格式。
* 有些可能还包括预期用法的概要。
[[/<]]
[[/note]]
[[note]]
💡 **记住**——每一个 div 都要用 {{@@[[/div]]@@}} 包裹。
[[/note]]
[[div class="centered"]]
[[div class="classification-header"]]
你最诚挚的,
Jean Karlyle Aktus,USINBL Site-81 主管
{{@@[[div class="classification-header"]]@@}}
[[/div]]
[[div class="ethics-header"]]
落款,
Odongo Tejani,伦理委员会主席
{{@@[[div class="ethics-header"]]@@}}
[[/div]]
[[div class="miscomm-header"]]
-- Eli Forkley,误传部主管
{{@@[[div class="miscomm-header"]]@@}}
[[/div]]
[[div class="oracle-header"]]
-- Kazuo Natsumi,胆大包天集会复殴者
{{@@[[div class="oracle-header"]]@@}}
[[/div]]
[[div class="overwatch-header"]]
-- ~ --
经监督者们的一致同意
{{@@[[div class="overwatch-header"]]@@}}
[[/div]]
[[div class="raisa-header"]]
-- Maria Jones, Director, RAISA
{{@@[[div class="raisa-header"]]@@}}
[[/div]]
[[div class="warning-header"]]
你现在正能察觉呼吸。
{{@@[[div class="warning-header"]]@@}}
[[/div]]
[[div class="log-header"]]
+++* 记录标题
//为以上采访/事故/探索记录所用//
----
{{@@[[div class="log-header"]]@@}}
@@+++* 标题@@
@@----@@
文本
{{@@[[/div]]@@}}
[[/div]]
----
[[div class="blockquote"]]
引用块
{{@@[[div class="blockquote"]]@@}}
[[/div]]
[[div class="blockquote"]]
> 嵌套引用块
[[/div]]
[[div class="blockquote dashed"]]
替代引用块 1 ——虚线
{{@@[[div class="blockquote dashed"]]@@}}
[[/div]]
[[div class="blockquote classic"]]
替代引用块 2 ——经典
{{@@[[div class="blockquote classic"]]@@}}
[[/div]]
[[div class="blockquote classic curved"]]
替代引用块 3 ——经典圆角
{{@@[[div class="blockquote classic curved"]]@@}}
[[/div]]
[[div class="blockquote lightweight"]]
替代引用块 4 ——轻量
{{@@[[div class="blockquote lightweight"]]@@}}
[[/div]]
[[div class="blockquote simple"]]
替代引用块 5 ——简明
{{@@[[div class="blockquote simple"]]@@}}
[[/div]]
[[div class="blockquote simple larger"]]
大号引用块
[[span style="font-size: 85%"]]{{@@[[div class="blockquote simple larger"]]@@}}[[/span]]
“larger” 类同样可以被应用至暗色框、亮色框以及报告框 div,以及它们的变体中。
[[/div]]
[[div class="darkbox"]]
暗色框
{{@@[[div class="darkbox"]]@@}}
[[/div]]
[[div class="lightbox"]]
亮色框
{{@@[[div class="lightbox"]]@@}}
[[/div]]
[[div class="report-box"]]
+++* 报告框
//内部文档//
----
{{@@[[div class="report-box"]]@@}}
@@+++* 标题@@
@@----@@
文本
{{@@[[/div]]@@}}
[[/div]]
//报告框变体//
[[div class="report-box red-tint"]]
+++* 红
[[/div]]
{{@@[[div class="report-box red-tint"]]@@}}
[[div class="report-box orange-tint"]]
+++* 橙
[[/div]]
{{@@[[div class="report-box orange-tint"]]@@}}
[[div class="report-box yellow-tint"]]
+++* 黄
[[/div]]
{{@@[[div class="report-box yellow-tint"]]@@}}
[[div class="report-box green-tint"]]
+++* 绿
[[/div]]
{{@@[[div class="report-box green-tint"]]@@}}
[[div class="report-box cyan-tint"]]
+++* 青
[[/div]]
{{@@[[div class="report-box cyan-tint"]]@@}}
[[div class="report-box blue-tint"]]
+++* 蓝
[[/div]]
{{@@[[div class="report-box blue-tint"]]@@}}
[[div class="report-box magenta-tint"]]
+++* 紫
[[/div]]
{{@@[[div class="report-box magenta-tint"]]@@}}
[[div class="report-box grey-tint"]]
+++* 灰
[[/div]]
{{@@[[div class="report-box grey-tint"]]@@}}
[[div class="overwatch-box"]]
监督者框
{{@@[[div class="overwatch-box"]]@@}}
[[/div]]
[[div class="page-source"]]
页面源代码
{{@@[[div class="page-source"]]@@}}
[[/div]]
[[div class="narration justified"]]
= [[span style="text-indent: 0"]]旁白块[[/span]]
[[div class="indented"]]
//结响人他技意建,拉整管开还则类,特秧传门。正期对照他连叫应族队北物,论数快状真北花断它养写想,思农蠢护思确叫帐住。也出去面少多风真快并,便的路话体结话门样层,物算身但色容分。小正矿支自规些济时解,历己保究美做半物按,今单否邮由着僚严。//
//生得达完除度化养,机意们便件务,运教露覆领何。深流取华现种代层何容就,率为特又组及求就状候,须空辰体带相再则处。化具总但至头准情义报层,品动厂克务持取光用题,后光建先串万资律属。系体权还派还行事手,群名油太府行带手,断世更素六护例。或却形劳主条向切,正存义老深条石,研材杆我投记。//
[[/div]]
= {{@@[[div class="narration justified indented"]]@@}}
[[/div]]
[[div class="journal"]]
**日记块**
@@ @@
{{@@[[div class="journal"]]@@}}
@@ @@
[[span class="highlighter"]] 高亮文本。 [[/span]]
@@ @@
{{@@[[span class="highlighter"]]@@}}
[[/div]]
[[div class="journal"]]
__**注意:__** 这一 div 限制了双换行符的创建。若需换行,请如下所做:
@@ @@
[[<]]
1. 在每一行末尾的文本处按下回车键。
2. 在那新的一行中,用两对 {{@@}} 包围一个空格(两侧各一对)。
3. 再次按下回车键并继续写作。
[[/<]]
[[/div]]
----
[[div class="text-container-wrap"]]
[[module ListUsers users="."]]
+++ %%title%%
[[/module]]
[[div class="text-container"]]
[[div class="sent"]]
[[span class="text"]]这是由 JaonHax 所作的短信样式 div。[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]真的吗?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]对。[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]但是,你要怎么使用这个呢?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]][[[component:text-style|我们有一篇指导。]]][[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]][[[component:text-style|指导?]]]这是个链接?[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text"]]猜对了![[/span]]
[[span class="text"]]请查阅指导——它能完全告诉你怎样将这个设置好。[[/span]]
[[/div]]
[[div class="recv"]]
[[span class="text"]]将我们安排好……[[/span]]
[[span class="text" style="font-size: 125%"]]😳[[/span]]
[[/div]]
[[div class="sent"]]
[[span class="text" style="font-size: 125%"]]😳[[/span]]
[[/div]]
[[/div]]
[[/div]]
----
[[div class="hazard-box hazard-box-6"]]
[[div class="hazard-box-image"]]
[[div class="hazard-box-image-6"]]
[[image https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/QQcBcvK.png]]
[[/div]]
[[/div]]
[[div class="hazard-box-text"]]
+++* 叙事危害警告
你所希望访问的文件,“[[span style="font-family: var(--mono-font)"]]**SCP-████**[[/span]]”,描述了一个无法预测的与多个次叙事层交叉的叙事性异常。由于此档案包含了数个嵌入式叙事危害,因此必须拥有叙事性接种。未拥有反此异常接种的人员可能会遭遇到一次叙事性改写事件。
你确定要继续访问吗?
[[/div]]
[[/div]]
[[<]]
[[div class="code terminal terminal--dark"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box hazard-box-#"##**##var(--c-keyword)|]]##**[[span class="pointer"]]1[[/span]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box-image"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box-image-#"##**##var(--c-keyword)|]]##**[[span class="pointer"]]2[[/span]]
**##var(--c-keyword)|[[image##** ##var(--c-symbol)|图片链接.png##**##var(--c-keyword)|]]##**[[span class="pointer"]]3[[/span]]
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"hazard-box-text"##**##var(--c-keyword)|]]##**
@@+++* 标题@@
在这随便放什么都行。
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]
# 对于 {{hazard-box-#}} 来说,数字 {{1-5}} 已与[[[anomaly-classification-system-guide|异常分类系统]]]的颜色配对,并加上了紫色({{6}})以及白色({{@@0@@}})。这些颜色数字的组合细分如下:
# {{hazard-box-1}} = 绿色
# {{hazard-box-2}} = 蓝色
# {{hazard-box-3}} = 黄色
# {{hazard-box-4}} = 橙色
# {{hazard-box-5}} = 红色
# {{hazard-box-6}} = 紫色
* {{hazard-box-0}} = 白色
# 对于 {{hazard-box-image-#}} 来说,选择与前一节相同的数字。
# 在此,将占位的链接换成由 [[user EstrellaYoshte]] 所创作的在[[[desk-of-junior-designer-s-yvonne|其艺作页]]]中精选出的危害符号。我已经在这里列出了五个危害符号的链接。那就是说,我强烈鼓励你去参观一下他的艺作页并给他一个好评,因为他的图片在美化此版式一方面发挥了无与伦比的作用!
* [https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/A9Rn1ly.png 认知危害警告]
* [https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/qIbCuxa.png 信息危害警告]
* [https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/bxjTJcI.png 促动危害警告]
* [https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/QQcBcvK.png 叙事危害警告]
* [https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/vpwoqdr.png 符号危害警告]
[[/<]]
[[/div]]
[[/collapsible]]
[[collapsible hideLocation="both" show="展开特殊格式" hide="收起特殊格式"]]
[[note]]
+++* 每一个特殊格式示例都包含:
[[<]]
* 格式外观。
* 用法格式。
* 有些可能还包括预期用法的概要。
[[/<]]
[[/note]]
[[note]]
💡 **记住**——每一个 div 都要用 {{@@[[/div]]@@}} 包裹,而每一个 span 都要用 {{@@[[/span]]@@}} 包裹。
[[/note]]
[[div class="centered"]]
,,//居中文本//,,
[[div class="centered"]]
平证又级感当那气,便地百达标再,得书该工口坝。当速北间见好象起半统现单,体认铁厂了说题青作土,日细许解后克就罐呈。很例领的心当严农角建立组起,约类适可标给材杨易。向有通六想声受真权分同性,集响把明候受半完金向现,将规辰伸火奔且格伴。你年劳活算资术不维已以,主片标构种知学决,矿团具松么太军三。低论式中成越越,热制其到军铁,称露历打。长石听华治土年于史,群员按海切起理劳,候内居男战支作。
[[/div]]
{{@@[[div class="centered"]]@@}}
----
,,//对齐文本//,,
[[div class="justified"]]
只般则道级斗教须主时动,他据头分却住酸指响际所,院政蠢器扮抗码三。情量己火切大,使区下场支但,从须她。由细好清心听油无关积除飞济常压,律六由京选六两L调导露合坊。选变量万开己入选,是型些状月正但,写口目志目。线要图大治看式片,体集过原花角,命对否呀坝。如飞难及变花实好治铁,定回得社音情么的,照飞丽具杨受全气。新识法按领口,易交是路,反安励。接社之展八记别步,多人风油还权个,情眼定人积非,承找见再较。
[[/div]]
{{@@[[div class="justified"]]@@}}
----
,,//缩进文本//,,
[[div class="indented" style="text-align: left"]]
长石听华治土年于史,群员按海切起理劳,候内居男战支作。派民系导感都文因计,子委运展此将将所,个再改级油型。选育长来建世得还千,有增回整二行的研,始术皂想。史它为机厂号定,通不人史至会,计计隶住连样。五单安百利引导感可劳,近感变风院育单建,业命求葬处过往类。美文工少斯规该为对采决快时,对使次基管束芽下京孟。多也劳百十西取,能主劳格目引,常苗足期。
[[/div]]
{{@@[[div class="indented"]]@@}}
----
,,//结束标记//,,
[[div class="end-mark" style="text-align: left"]]
“**[*https://en.wiktionary.org/wiki/end_mark 结束标记(end mark)]:**一种印刷元素,标志一篇文章的结束。通常其仅为黑圆点,但也可以是较复杂的符号。”
{{@@[[div class="end-mark"]]@@}} 在其 div 内最后一个自然段的末尾放置一个结束标记(比如下一段的末尾!)。将其与任何额外特殊文本格式结合使用。这一版式使用的默认结束标记符号是以 ‘X’ 分割的白色菱形。
结束标记是一个经典的印刷俗例。在 SCP 维基中,结束标记可能会最适合在故事写作中使用。
[[/div]]
----
,,//红色文档修订文本//,,
[[span class="rev-red"]] 接种已散布。 [[/span]]
{{@@[[span class="rev-red"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//黄色文档修订文本//,,
[[span class="rev-yellow"]] 载入已暂停。刷新? [[/span]]
{{@@[[span class="rev-yellow"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//绿色文档修订文本//,,
[[span class="rev-green"]] 已过期信息将以__绿色__标示。 [[/span]]
{{@@[[span class="rev-green"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//蓝色文档修订文本//,,
[[span class="rev-blue"]] 接种已完成! [[/span]]
{{@@[[span class="rev-blue"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//计算机终端文本//,,
[[span class="terminal-span"]] [编辑] [[/span]]
[[span class="terminal-span"]] [删除] [[/span]]
[[span class="terminal-span"]] [数据丢失] [[/span]]
{{@@[[span class="terminal-span"]]@@}} [文本] {{@@[[/span]]@@}}
----
,,//粗体文本//,,
[[span class="bt"]]示例[[/span]]
{{@@[[span class="bt"]]@@}} 文本 {{@@[[/span]]@@}}
或者,你仍然可以通过使用 Wikidot 语法创建粗体文本。不过这个 span 对于以下两个特殊格式来说是必要的。
----
,,//粗体文本 + 大分隔条//,,
[[span class="bt bb"]]示例[[/span]]
{{@@[[span class="bt bb"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//粗体文本 + 分隔条标题//,,
+++* [[span class="bt bh"]]示例[[/span]]
@@+++*@@ {{@@[[span class="bt bh"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//粗体文本 + 文本颜色//,,
[[span class="tb"]]示例[[/span]]
{{@@[[span class="tb"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//粗体文本 + 文本颜色 + 大分隔条//,,
[[span class="tb bb"]]示例[[/span]]
{{@@[[span class="tb bb"]]@@}} 文本 {{@@[[/span]]@@}}
----
,,//闪烁文本光标//,,
[[div id="append-blink-bar"]]
{{@@[[div id="append-blink-bar"]]@@}} 在其 div 内最后一个自然段的末尾放置一个闪烁的“全方块”字符。这模拟了老式的闪烁光标,即可以在命令提示符末尾看到的那个。
[[/div]]
----
,,//花哨分割线//,,
[[div class="fancyhr"]]
-----
[[/div]]
{{@@[[div class="fancyhr"]]@@}}
@@----@@
{{@@[[/div]]@@}}
----
,,//花哨边框//,,
[[div class="fancyborder"]]
[[/div]]
{{@@[[div class="fancyborder"]]@@}}
----
,,//特殊标题区域 1//,,
[[div class="lite-heading"]]
----
++* 标题
+++* 子标题
----
[[/div]]
{{@@[[div class="lite-heading"]]@@}}
@@----@@
@@++* 标题@@
@@+++* 子标题@@
@@----@@
{{@@[[/div]]@@}}
----
,,//特殊标题区域 2//,,
[[div class="lite-heading"]]
----
++* 附加材料
----
[[/div]]
{{@@[[div class="lite-heading"]]@@}}
@@----@@
@@++* 附加材料@@
@@----@@
{{@@[[/div]]@@}}
----
,,//替代图片展示框//,,
[[div class="image-showcase"]]
[[=image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/base_image_frame.png]]
[[/div]]
{{@@[[div class="image-showcase"]]@@}}
{{@@[[=image 这里是链接]]@@}}
{{@@[[/div]]@@}}
----
,,//情节间断//,,
[[=image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/scp_foundation_logo.png class="scene-break"]]
{{@@[[=image 这里是链接 class="scene-break"]]@@}}
{{scene-break}}(情节间断)是一个装饰性的符号,“为读者标记了停顿与叙事的过渡。”
情节间断是一种经典的印刷俗例。这里有一个来自《[https://en.wikipedia.org/wiki/Section_(typography)#/media/File:Section_break_01_by_Pengo.jpg 爱丽丝梦游仙境]》的示例。[[span class="fnnum"]].[[/span]][[span class="fncon"]]**译注:**图源维基百科,需自备梯子。转载图片见[http://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/Section_break_01_by_Pengo.jpg 此]。[[/span]]在 SCP 维基上,{{scene-break}} 可能会最适合在故事写作中使用。
----
,,//情节间断 + 着色标志//,,
[[=image https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/scp_foundation_logo.png class="scene-break icon-tint"]]
{{@@[[=image 这里是链接 class="scene-break icon-tint"]]@@}}
@@ @@
{{icon-tint}}(标志着色)应仅与黑色标志一同使用。可以在 {{[[module CSS]]}} 内修改 {{@@--@@hue}}(色调)变量以控制标志的颜色:
[[div class="code terminal terminal--dark"]]
##var(--c-builtin)|@@--@@hue##: ##var(--c-value)|#deg##;
[[/div]]
将 {{#}} 替换为你期望的正整数。默认为 {{325deg}}。
----
,,//ListPages 导航——首个页面//,,
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[# 下一迭代 ▷]
[[/div]]
[[/div]]
@@ @@
{{@@[[div class="listPagesNav"]]@@}}
{{@@[[div class="listPagesNav-next"]]@@}}
@@[/offset/1 下一迭代 ▷]@@
{{@@[[/div]]@@}}
{{@@[[/div]]@@}}
----
,,//ListPages 导航——后续页面//,,
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[# 下一迭代 ▷]
[[/div]]
[[div class="listPagesNav-prev"]]
[# ◁ 返回]
[[/div]]
[[/div]]
{{next}} 必须放在前面:
{{@@[[div class="listPagesNav"]]@@}}
{{@@[[div class="listPagesNav-next"]]@@}}
@@[/offset/1 下一迭代 ▷]@@
{{@@[[/div]]@@}}
{{@@[[div class="listPagesNav-prev"]]@@}}
@@[/offset/0 ◁ 返回]@@
{{@@[[/div]]@@}}
{{@@[[/div]]@@}}
----
,,//渐变至黑色//,,
[[div class="fade-away"]]
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
[[/div]]
{{@@[[div class="fade-away"]]@@}}
若需控制渐变长度,只要根据需要在 div 内插入多组 {{@@}} 即可。
----
,,//渐变至白色//,,
[[div class="whiteout"]]
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
[[/div]]
{{@@[[div class="whiteout"]]@@}}
若需控制渐变长度,只要根据需要在 div 内插入多组 {{@@}} 即可。
----
,,//页脚//,,
[[div class="footing"]]
[[/div]]
{{@@[[div class="footing"]]@@}}
----
,,//推荐文章框//,,
[[div class="related-flex"]]
[[div class="related"]]
* [[[/|首页 - SCP 基金会]]]
[[/div]]
[[/div]]
{{@@[[div class="related-flex"]]@@}}
{{@@[[div class="related"]]@@}}
@@* **[[[页面链接|自定义文本]]]**@@
{{@@[[/div]]@@}}
{{@@[[/div]]@@}}
----
,,//故事系列导航//,,
[[div class="series-nav"]]
<< [# 前一页面] | [[size 120%]][# 当前页面][[/size]] | [# 后一页面] >>
[[/div]]
{{@@[[div class="series-nav"]]@@}}
<< 前一页面 | @@[[size 120%]]当前页面[[/size]]@@ | 后一页面 >>
{{@@[[/div]]@@}}
----
,,//Earthworm 故事系列导航//,,
,,//作者:[[user Croquembouche]]//,,
[[=image http://hoah-lab.wikidot.com/local--files/theme:flopstyle-dark/454cbGP.png]]
[[[component:earthworm|查阅组件页]]]以获取设置说明。
----
,,//切换式评分模块//,,
[[span id="activeRate"]]
[[module Rate]]
[[/span]]
{{@@[[span id="activeRate"]]@@}}
{{@@[[module Rate]]@@}}
{{@@[[/span]]@@}}
所有被指定的评分模块默认处于 “半隐藏” 状态,并在鼠标悬停时转为 “显示” 状态。
⚠️ 依据 [[[css-policy#toc1|CSS守则]]] 的相关规定,你只能在 **__页面底部__** 使用该模块。
@@ @@
[[/div]]
[[/collapsible]]
@@ @@
[[div class="templateInfo"]]
[[# Src]]
+* 源代码
----
[[/div]]
[[collapsible hideLocation="both" show="展开CSS代码" hide="收起CSS代码"]]
[[code type="CSS"]]
/* ==== FONTS ==== */
/**
* Montserrat
*
* By
* Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly
* License
* Open Font License (OFL)
* Source Link
* https://fonts.google.com/specimen/Montserrat/about
**/
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap);
/**
* Comic Neue
*
* By
* Craig Rozynski, Hrant Papazian
* License
* Open Font License (OFL)
* Source Link
* https://fonts.google.com/specimen/Comic+Neue/about
**/
@import url(https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap);
/* == YUI TAB BASE == */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css);
[[/code]]
[[code type="CSS"]]
/* ==== Flopstyle: DARK ==== */
/**
* [2022 Wikidot Theme]
* Created by Lt Flops
*
* Forked From
* Flopstyle: LITE by Lt Flops
* Penumbra Theme [Original] by EstrellaYoshte
* Based On
* Ad Astra Theme by stormbreath, NatVoltaic
* Basalt Theme [Original] by Placeholder McD, Liryn, EstrellaYoshte
* BLANKSTYLE CSS by Placeholder McD, HarryBlank
* Foxtrot Theme [Original] by Liryn
* Night Rush Theme by Nagiros
* Paperstack Theme by EstrellaYoshte
**/
/* ==== HEADER AREA ==== */
/* == SCROLLBAR + SELECTION == */
/* = Cross-Browser Supports = */
::-webkit-scrollbar {
width: 1rem;
}
#side-bar::-webkit-scrollbar {
width: .4rem;
}
::-webkit-scrollbar-thumb {
background: var(--accentColor);
}
::-webkit-scrollbar-track {
background: var(--fgColor);
}
::selection {
color: var(--keyColor);
background: var(--accentColor);
}
/* == COMMON == */
:root {
/* = THESE VARIABLES MAY BE CHANGED = */
--accentColor: hsl(325, 80%, 60%);
--accentColorLite: hsla(325, 80%, 70%, .5);
--hue: 325deg;
--titleColor: var(--accentColor);
--subtitleColor: var(--accentColor);
--bgColor: hsl(222, 12%, 21%);
background: var(--bgColor);
--fgColor: hsl(222, 16%, 15%);
/* == */
/* = THESE VARIABLES SHOULD NOT BE CHANGED = */
--tint: calc(var(--hue) - 40deg);
--alphaColor: hsl(0, 0%, 100%);
--keyColor: hsl(0, 0%, 5%);
--bright-red: hsl(360, 89%, 62%);
--strong-lime-green: hsl(120, 80%, 40%);
--dark-grayish-blue: hsl(212, 15%, 63%);
--textColorHigh: var(--textColor);
--textColorMid: var(--textColorAlt);
--textColorLow: hsla(0, 0%, 100%, .68);
--textColorIdle: hsla(0, 0%, 100%, .34);
/* == */
/* = DEPRECATED = */
--textColor: hsla(0, 0%, 100%, .8);
--textColorAlt: hsla(0, 0%, 100%, .74);
/* == */
/* = LOGO = */
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png);
/* = FONTS = */
--header-font: "Montserrat", "Noto Sans SC", sans-serif;
--body-font: "Inter", "Noto Sans SC", sans-serif;
--script-font: "Comic Neue", "Ma Shan Zheng", cursive;
--glyphs: "case", "ss01", "ss04";
--mono-font: "Fira Code", 幼圆, "Noto Serif SC", Cousine, monospace;
/* = MISCELLANEOUS = */
/**
* Courtesy of EstrellaYoshte
**/
--side-bar-width: 17em;
--content-wrap-width: 1080px;
scroll-behavior: smooth;
scrollbar-color: var(--accentColor) var(--fgColor);
}
body {
accent-color: var(--accentColor);
color: var(--textColor);
background-color: var(--bgColor);
background-image:
linear-gradient(
var(--fgColor) 0 90px,
var(--bgColor) 200px 100%);
background-repeat: no-repeat;
font-family: var(--body-font);
font-size: 15px;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
/* == ACS COLORS == */
/**
* Courtesy of Nagiros
**/
/* = Green = */
--one-color: 40, 159, 107;
/* = Blue = */
--two-color: 117, 167, 242;
/* = Yellow = */
--three-color: 255, 226, 82;
/* = Orange = */
--four-color: 255, 141, 54;
/* = Red = */
--five-color: 255, 34, 67;
/* = Violet = */
--six-color: 161, 73, 248;
/* = White = */
--white-bar: 205, 206, 208;
--lg-bar: 118, 118, 130;
--gray-bg: 66, 66, 72;
}
#content-wrap {
max-width: var(--content-wrap-width);
margin: 2.65em auto 0;
}
#side-bar {
width: var(--side-bar-width);
}
#main-content {
top: -.8em;
}
@media (max-width: 767px) {
#main-content {
margin: 0 5%;
}
#page-content {
font-size: calc(15px * .95);
}
}
@media (min-width: 768px) {
#page-content {
font-size: calc(15px * 1.05);
}
}
/* == SITE BANNER == */
div#container-wrap,
#header {
background: 0;
}
#header h1,
#header h2 {
float: none;
margin: 0;
text-align: center;
}
#header h2 {
margin-top: .5em;
}
#header h1 span,
#header h2 span {
/* = Hides the Existing Text = */
display: none;
}
#header h1 a::before {
/* = Sets the New Text's Content From Variable = */
content: var(--header-title, "SCP FOUNDATION");
color: var(--titleColor);
font-size: 1.1em;
}
#header h2::before {
content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
color: var(--subtitleColor);
font-size: 1.25em;
}
#header h1 a::before,
#header h2::before {
/* = Styles the New Text = */
font-family: var(--header-font);
letter-spacing: 2px;
text-shadow: none;
}
@media (max-width: 767px) {
#header h2 {
margin-top: 0;
}
#header h1 a::before {
font-size: calc(110% * .7);
}
#header h2::before {
font-size: calc(125% * .7);
}
}
#extra-div-1 {
position: absolute;
top: 0;
width: 100%;
height: 11.67em;
background: var(--lgurl) center no-repeat;
background-size: contain;
filter: opacity(.33);
z-index: 1;
}
/* == SEARCH == */
#search-top-box {
top: 0;
right: 0;
width: 0;
padding: 1em 0;
}
@media (max-width: 767px) {
#search-top-box {
top: 1.85em;
}
}
#search-top-box::after {
content: "\1F50E\FE0E";
position: absolute;
padding: 0 .2em;
color: var(--accentColor);
font-variant-emoji: text !important;
transition: all .2s ease-in-out;
z-index: -1;
}
#search-top-box:active {
cursor: pointer;
}
#search-top-box-form input.button {
margin: 0;
}
#search-top-box-form input[type=submit] {
background: var(--fgColor) !important;
transition: color .2s ease-in-out;
}
#search-top-box-input,
#search-top-box-input:is(:hover, :focus),
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:is(:hover, :focus) {
position: absolute;
border-radius: 0;
box-shadow: none;
font-family: var(--body-font);
font-size: calc(15px * 1.05);
}
#search-top-box:hover::after {
color: var(--keyColor);
background: var(--accentColor);
}
#search-top-box-form {
opacity: 0;
}
#search-top-box-form input {
width: 1.6em;
}
#search-top-box-form input[type=submit]:hover {
color: var(--accentColor);
border-color: var(--accentColor);
}
#search-top-box-form > input[type=text] {
display: none;
}
/* == TOP-BAR == */
#top-bar {
display: flex;
justify-content: center;
right: 0;
}
.top-bar::before {
position: absolute;
top: -.5em;
left: calc(100% / 4);
width: calc(100% / 2);
height: 5px;
content: "";
background:
linear-gradient(
to right,
transparent,
var(--accentColor) 50%,
transparent 100%);
}
#top-bar,
#top-bar a {
color: var(--textColor);
transition: 0;
}
#top-bar ul li a {
font-family: var(--header-font);
font-size: 1.05rem;
font-variant: all-small-caps;
}
#top-bar ul li ul {
border-color: var(--accentColor);
}
#top-bar ul li ul li a {
color: var(--textColor);
font-family: var(--body-font);
font-size: 100%;
font-variant: normal;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
color: var(--textColorAlt);
background: var(--fgColor);
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
border-top-color: var(--bgColor);
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
color: var(--accentColor);
/* = Top-Bar Hover Background-Color = */
background: var(--fgColor);
transition: color .2s ease-in-out;
}
@media (max-width: 767px) {
.mobile-top-bar{
display: flex;
justify-content: center;
min-width: 100%;
top: 0;
left: 0;
}
.mobile-top-bar::before {
position: absolute;
top: -.425em;
width: calc(100% / 1.2909);
height: 5px;
content: "";
background:
linear-gradient(
to right,
transparent,
var(--accentColor) 50%,
transparent 100%);
}
}
/* == LOGIN == */
#login-status {
top: 1.1em;
right: initial;
color: var(--textColor);
z-index: 1;
}
@media (max-width: 767px) {
#login-status{
top: 0;
right: 0;
z-index: 20;
}
}
#login-status a {
color: var(--accentColor);
}
#login-status ul a {
color: var(--textColorAlt);
background: var(--fgColor);
}
#login-status ul a:hover {
color: var(--accentColor);
background: var(--bgColor);
}
@media (max-width: 767px) {
#header .printuser{
font-size: 0;
}
}
.printuser a {
margin: 0;
}
.printuser img.small {
width: 18px;
height: 18px;
padding: 1px 4px 0 0;
background-image: none !important;
}
@media (max-width: 767px) {
#header .printuser img.small{
transform: translate(0, 4px);
}
}
#my-account {
display: none;
}
#account-topbutton {
padding: 0 3px;
border-color: var(--accentColor);
font-size: 1.067em;
}
@media (max-width: 767px) {
#account-topbutton {
margin: 0 0 0 5px;
}
}
#account-topbutton:hover {
color: var(--fgColor);
background: var(--accentColor);
}
/* == SIDE-BAR == */
#top-bar .open-menu a {
top: .4em;
left: .4em;
color: var(--accentColor);
background: var(--fgColor);
border: thin solid var(--accentColor);
border-radius: 0;
box-shadow: none;
}
#top-bar .open-menu a:hover {
padding: 0;
color: var(--fgColor);
background: var(--accentColor);
}
@supports (-moz-appearance: none) {
#top-bar .open-menu a:hover {
color: var(--fgColor);
background: var(--accentColor);
}
}
#side-bar {
padding: 1em 0;
background: var(--fgColor);
}
#side-bar .side-block {
background: var(--fgColor);
border: 0;
box-shadow: none;
}
#side-bar .side-block.media {
background: var(--fgColor);
}
.side-block.media a:hover {
padding: 0;
}
#side-bar .side-block.resources {
background: var(--fgColor);
}
.side-block.media > * {
display: flex;
justify-content: space-evenly;
}
.menu-item > .image {
display: none;
}
#side-bar .heading {
color: var(--textColorAlt);
border-bottom-color: var(--textColor);
font: bold 95% "Josefin Sans", sans-serif;
}
@media (max-width: 767px) {
#top-bar .open-menu a:hover {
box-shadow: none;
}
#side-bar .heading {
margin-left: -1em;
padding-left: 1em;
}
#side-bar:target {
border: 0;
}
#side-bar .close-menu {
position: fixed;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, .3);
background-position: 17em 50%;
opacity: 0;
transition:
width .5s ease-in-out .1s,
opacity 1s ease-in-out 0s;
pointer-events: none;
z-index: -1;
}
#side-bar:target .close-menu {
right: 0;
left: auto;
width: calc(100% - var(--side-bar-width));
opacity: 1;
pointer-events: auto;
}
#side-bar:target .close-menu:hover {
background: unset;
}
}
/* ==== CONTENT AREA ==== */
/* ---- SIDEBOXES | TYPE 'A' ----
* Adapted From:
* Penumbra Theme by EstrellaYoshte
**/
.anchor{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 5;
}
.authorbox,
.sidebox,
.sidecontainer{
position: absolute;
width: calc((100vw - 870px) / 2);
max-height: calc(100vh - 15rem);
padding: .33rem 1.6rem;
box-sizing: border-box;
z-index: 5;
}
.authorbox,
.sidebox{
font-size: 90%;
}
.authorbox{
right: 103.5%;
max-width: calc((100vw - 921.2px) / 2) !important;
margin-right: .53rem;
padding-right: 1rem;
}
.sidebox,
.sidecontainer{
left: 103.5%;
}
@media (max-width: 1280px){
.authorbox,
.sidebox{
display: none;
}
}
.authorbox .wiki-content-table,
.sidebox .wiki-content-table{
max-width: 20em !important;
}
.sidebox img{
width: 7.5em;
}
.authorbox tr th,
.authorbox tr td,
.sidebox tr th,
.sidebox tr td{
padding: .27rem !important;
}
.flavorbox{
width: 75%;
margin: auto auto .33rem;
padding: 0 1rem;
color: var(--textColorAlt);
background: var(--fgColor);
border: solid transparent;
}
/* ---- SIDEBOXES | TYPE 'B' ----
* Courtesy Of Woedenaz
**/
.limit{
line-height: 1.5;
}
.limit br{
display: block;
}
.sidecontainer{
margin-left: .53rem;
color: var(--textColorAlt);
background-color: var(--fgColor);
border-top: medium solid var(--accentColor);
overflow: auto;
}
@media (max-width: 1280px){
.sidecontainer{
top: 1rem;
right: calc(((100vw - 45.8rem) / 2) * -1);
left: initial;
width: auto;
max-width: 65vw !important;
padding-right: .4rem;
padding-left: .4rem;
background-color: hsla(0, 0%, 0%, 0);
border: 0;
-webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem));
clip-path: inset(-.125rem -.25rem 0 calc(100% - 1rem));
-webkit-transition:
color .2s ease-in-out .1s,
-webkit-box-shadow .4s ease-in-out .1s,
-webkit-clip-path .4s ease-in-out .1s;
transition:
color .2s ease-in-out .1s,
-webkit-box-shadow .4s ease-in-out .1s,
-webkit-clip-path .4s ease-in-out .1s;
-o-transition:
color .2s ease-in-out .1s,
box-shadow .4s ease-in-out .1s,
clip-path .4s ease-in-out .1s;
transition:
color .2s ease-in-out .1s,
box-shadow .4s ease-in-out .1s,
clip-path .4s ease-in-out .1s;
transition:
color .2s ease-in-out .1s,
box-shadow .4s ease-in-out .1s,
clip-path .4s ease-in-out .1s,
-webkit-box-shadow .4s ease-in-out .1s,
-webkit-clip-path .4s ease-in-out .1s;
overflow-x: hidden;
overflow-y: hidden;
scrollbar-width: thin;
}
.sidecontainer::-webkit-scrollbar{
width: .5rem;
}
.sidecontainer::before,
.sidecontainer::after{
position: absolute;
right: 0;
content: "";
}
.sidecontainer::before{
top: calc(50% - .75rem);
width: 0;
height: 0;
border-top: 11px solid transparent;
border-right: 11px solid var(--accentColor);
border-bottom: 11px solid transparent;
transition: border .2s ease-in-out .1s;
z-index: 10;
}
.sidecontainer::after{
top: 0;
width: 100%;
max-width: .75rem;
height: 100%;
max-height: calc(100vh - 15rem);
background: var(--fgColor);
box-shadow: .125rem 0 0 0 var(--accentColor);
transition:
box-shadow .4s ease-in-out .1s,
max-width .4s ease-in-out .1s;
z-index: -1;
}
.sidecontainer > *{
opacity: 0;
-webkit-transition: opacity .2s ease-in-out .2s;
-o-transition: opacity .2s ease-in-out .2s;
transition: opacity .2s ease-in-out .2s;
}
.sidecontainer:hover,
.sidecontainer:active{
background-color: var(--fgColor);
-webkit-clip-path: inset(-.125rem -.25rem 0 0);
clip-path: inset(-.125rem -.25rem 0 0);
-webkit-transition:
color .4s ease-in-out .2s,
right .4s ease-in-out .1s,
-webkit-clip-path .4s ease-in-out .1s,
-webkit-box-shadow .4s ease-in-out .1s;
transition:
color .4s ease-in-out .2s,
right .4s ease-in-out .1s,
-webkit-clip-path .4s ease-in-out .1s,
-webkit-box-shadow .4s ease-in-out .1s;
-o-transition:
color .4s ease-in-out .2s,
right .4s ease-in-out .1s,
clip-path .4s ease-in-out .1s,
box-shadow .4s ease-in-out .1s;
transition:
color .4s ease-in-out .2s,
right .4s ease-in-out .1s,
clip-path .4s ease-in-out .1s,
box-shadow .4s ease-in-out .1s;
transition:
color .4s ease-in-out .2s,
right .4s ease-in-out .1s,
clip-path .4s ease-in-out .1s,
box-shadow .4s ease-in-out .1s,
-webkit-clip-path .4s ease-in-out .1s,
-webkit-box-shadow .4s ease-in-out .1s;
overflow-y: scroll;
}
.sidecontainer:hover::before,
.sidecontainer:active::before{
border: 0;
}
.sidecontainer:hover::after,
.sidecontainer:active::after{
right: 0;
max-width: 100%;
box-shadow: 0 -.125rem 0 0 var(--accentColor);
}
.sidecontainer:hover > *,
.sidecontainer:active > *{
opacity: 1;
transition: opacity .4s ease-in-out .1s;
}
}
@media (max-width: 767px){
.sidecontainer,
.sidecontainer:hover,
.sidecontainer:active{
right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1.6rem);
}
}
/* ---- FANCY COLLAPSIBLES ---- */
/* Base */
.collapsible-block-folded,
.collapsible-block-unfolded-link{
margin: 1rem auto;
padding: .53rem 1rem;
background: var(--fgColor);
transition: all .2s cubic-bezier(.77, 0, .18, 1);
text-align: center;
}
.collapsible-block-unfolded-link{
border-top: thick solid var(--accentColor);
transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
.collapsible-block-unfolded > *:nth-child(3){
border-top: 0;
border-bottom: thick solid var(--accentColor);
}
.collapsible-block-link{
font: 1.25rem/1.5 var(--header-font);
letter-spacing: 1px;
white-space: normal;
}
@media (max-width: 767px){
.collapsible-block-link{
font-size: 100%;
}
}
/* Pseudo-elements */
.collapsible-block-link::before{
content: "+ ";
}
.collapsible-block-link::after{
content: " +";
}
.collapsible-block-unfolded .collapsible-block-link::before,
.collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::before{
content: "− "
}
.collapsible-block-unfolded .collapsible-block-link::after,
.collapsible-block-unfolded > *:nth-child(3) .collapsible-block-link::after{
content: " −"
}
.collapsible-block-folded:hover,
.collapsible-block-unfolded-link:hover{
background-color: var(--accentColorLite);
transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
.collapsible-block-link:hover{
padding: .067rem !important;
color: var(--alphaColor);
border-bottom: thin solid var(--alphaColor) !important;
transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
/* Licensebox Collapsible */
.licensebox .collapsible-block-content {
text-align: center;
}
.licensebox blockquote,
.licensebox div.blockquote {
text-align: left;
}
/* == INFO BAR == */
.info-container {
--barColour: var(--fgColor);
--linkColour: var(--accentColor);
}
.info-container .collapsible-block-link {
font-size: 100%;
}
#page-content .info-container .collapsible-block-unfolded {
border-color: var(--accentColorLite);
}
.info-container .collapsible-block-unfolded-link {
border: 0;
}
.info-container div.collapsible-block-content {
padding: 0 .53rem 3rem;
}
@media (max-width: 767px) {
.info-container div.collapsible-block-content div{
margin-right: 0;
margin-left: 0;
}
}
.info-container .wiki-content-table {
width: 90%;
}
.info-container .collapsible-block-folded,
.info-container .collapsible-block-unfolded-link {
padding: 0;
}
.info-container .collapsible-block-folded:hover,
.info-container .collapsible-block-unfolded-link:hover {
background-color: var(--accentColor);
--linkColour: var(--fgColor);
}
#u-author_block > p > a,
#u-author_block > p > a:hover {
border-bottom: thin solid var(--accentColor);
box-shadow: none !important;
transition: all .2s cubic-bezier(.77, 0, .18, 1) !important;
font-weight: bold;
}
#u-author_block > p > a:hover {
padding: .8rem;
color: var(--barColour);
background: var(--linkColour);
}
/* == INFO BAR PATCH ==
* Courtesy Of Monkatraz
**/
.info-container .collapsible-block-link,
.info-container .collapsible-block-link:hover,
.info-container .collapsible-block-unfolded-link,
.info-container .collapsible-block-unfolded-link:hover {
padding: 0 !important;
}
.info-container .collapsible-block-link::before,
.info-container .collapsible-block-unfolded-link::before,
.info-container .collapsible-block-link::after,
.info-container .collapsible-block-unfolded-link::after {
display: none;
}
/* ---- PAGE RATING ---- */
.page-rate-widget-box{
display: flex;
width: max-content;
margin: .53rem auto;
padding: .2rem;
background: var(--fgColor);
border-radius: 0;
box-shadow:
3px 0 0 0 var(--accentColor),
-3px 0 0 0 var(--accentColor);
}
div.page-rate-widget-box .rate-points{
color: var(--textColorAlt);
background: transparent !important;
border: 0;
text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel{
background: transparent;
border: 0;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a{
color: var(--textColorAlt);
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover{
color: var(--keyColor);
}
.page-rate-widget-box .rateup a:hover{
background-color: var(--strong-lime-green);
}
.page-rate-widget-box .ratedown a:hover{
background-color: var(--bright-red);
}
.page-rate-widget-box .cancel a:hover{
background-color: var(--dark-grayish-blue);
border-radius: 0;
}
/* == INFO MODULE == */
#page-content .creditRate {
float: none;
display: flex;
width: max-content;
margin: auto;
}
#page-content .rate-box-with-credit-button {
padding: .2rem 0;
background: var(--fgColor);
border: 0;
border-radius: 0;
box-shadow:
3px 0 0 0 var(--accentColor),
-3px 0 0 0 var(--accentColor);
}
.creditRate .page-rate-widget-box {
display: inline;
}
#page-content .creditButton p a {
padding: 0;
border: 0;
font-size: .9rem;
}
.creditButton p a,
.creditButtonStandalone p a {
/* Affects creditButton + creditButtonStandalone */
color: var(--textColorAlt);
}
.rate-box-with-credit-button .fa-info:hover {
color: var(--strong-lime-green);
}
#page-content .modalbox {
padding: .53rem;
background: var(--bgColor);
box-shadow: none;
}
#page-content .modalbox .page-rate-widget-box {
margin: auto;
}
.close-credits,
.credit-back {
filter: invert(.4) sepia(.5) saturate(500%) hue-rotate(var(--tint));
}
#page-content .close-credits {
width: 4rem;
}
/* == INFO MODULE CONTENT WARNING == */
#page-content .content-warning {
padding-left: .6rem;
}
/* ---- STANDALONE INFO MODULE ---- */
#page-content .creditButtonStandalone p a{
padding: .2rem 0 !important;
background: var(--fgColor);
border-radius: 0;
box-shadow:
3px 0 0 0 var(--accentColor),
-3px 0 0 0 var(--accentColor);
font-size: .9rem;
}
#page-content .creditButtonStandalone p a:hover{
padding: .2rem 0 !important;
color: var(--keyColor);
background: var(--accentColor);
}
/* ---- BYLINE ---- */
.byline {
display: flex;
margin-top: -.33rem;
font-size: 85%;
text-align: center;
}
.byline p {
display: flex;
flex-direction: column;
max-width: 55%;
margin: auto;
line-height: 0;
}
@media (max-width: 767px) {
.byline p {
max-width: unset;
}
}
.byline span:nth-of-type(1):before,
.byline span:nth-of-type(2):before {
padding-right: .27rem;
color: var(--accentColor);
font: 135%/1 "Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", sans-serif;
}
.byline span:nth-of-type(1):before {
content: "✎"
}
.byline span:nth-of-type(2):before {
content: "⧗"
}
.byline span:nth-of-type(2):after {
content: "-min read"
}
/* ---- FORMATTING | [GENERAL] ---- */
h1, h2, h3, h4, h5, h6{
display: flex;
justify-content: center;
font-family: var(--header-font);
line-height: 1.2;
text-align: center;
text-underline-offset: 25%;
}
h1, h2, h3, h4{
color: var(--accentColor);
}
h5, h6{
color: var(--textColorAlt);
}
h1{ font-size: 1.95rem; }
h2{ font-size: 1.55rem; }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.25rem; }
h5{ font-size: 1.05rem; }
h6{ font-size: .95rem; }
#page-title{
display: none;
}
.meta-title,
#breadcrumbs,
.pseudocrumbs{
text-align: center;
}
.meta-title{
margin: 0;
color: var(--accentColor);
border: 0;
font: 1.95rem var(--header-font);
letter-spacing: 1px;
}
.meta-title p{
border-bottom: thin solid var(--accentColorLite);
}
hr{
height: 0;
margin: 1rem 0;
background: transparent;
border-top: thin solid var(--accentColorLite);
}
@media (max-width: 767px){
.meta-title p{
margin: 0 -5.5%;
}
#page-content > hr,
#page-content > .list-pages-box > .list-pages-item > hr{
margin: 3rem -5.5%;
}
}
*, a, span{
/* No Line Breaks Mid-Word */
word-break: normal;
}
ul {
list-style-type: "➤ ";
}
li, p{
line-height: 1.5;
text-decoration-color: var(--textColor);
text-underline-offset: 30%;
}
ol li, ul li{
margin: .27rem 0 .53rem;
}
#toc{
background: var(--fgColor);
border: 0;
border-top: thick solid var(--accentColor);
}
#toc .title{
color: var(--accentColor);
}
strong{
color: var(--accentColor);
text-decoration-color: inherit;
}
#page-content h2,
#page-content h3,
#page-content h4{
filter: saturate(.85) brightness(1.15);
}
/* Links */
a,
a.newpage,
a:visited,
#side-bar a{
color: var(--accentColor);
transition: color .2s ease-in-out;
}
a.newpage{
filter: hue-rotate(30deg);
}
a:hover,
a.newpage:hover,
a:visited:hover,
#side-bar a:hover{
padding-bottom: .13rem;
color: var(--keyColor);
background-color: var(--accentColor);
text-decoration: none;
}
#page-content a{
padding-bottom: .067rem;
border-bottom: thin solid var(--accentColorLite);
}
#page-content a:hover{
padding-bottom: .13rem;
}
#page-content a:hover,
#page-content .rateup a, #page-content .ratedown a, #page-content .cancel a,
#page-content .pseudocrumbs a,
#page-content .creditButtonStandalone p a,
#page-content a.disruptionHeader,
#page-content .yui-nav li a,
#page-content #toc a{
border: 0;
}
#page-content a.disruptionHeader{
padding: .33rem 0;
}
#page-content .yui-nav li a{
padding: 0;
}
/* ---- FOOTNOTES ---- */
sup{
top: -.375em;
}
#page-content a.footnoteref{
border: 0;
font-size: .9rem;
font-weight: bold;
}
#page-content a.footnoteref:hover{
color: var(--keyColor);
}
.hovertip{
font-size: 1rem;
background: var(--fgColor) !important;
border: thin solid var(--accentColor) !important;
}
.footnotes-footer,
.equation .e-footer,
.footnote .f-footer,
.reference .r-footer{
display: none;
}
/* ---- IMAGE BLOCK ---- */
/* -- STANDARD -- */
.scp-image-block{
border-color: var(--accentColorLite);
box-shadow: none;
box-sizing: border-box;
}
.scp-image-block .scp-image-caption{
color: var(--textColorAlt);
background: var(--fgColor);
border-color: var(--accentColorLite);
font-size: 100%;
}
.scp-image-block.block-right{
margin-right: 0;
}
@media (max-width: 540px){
.scp-image-block.block-right,
.scp-image-block.block-left{
float: none;
margin-right: auto;
margin-left: auto;
}
}
@media only screen and (max-width: 600px){
.scp-image-block.block-right{
float: none;
}
}
/* -- BOOTSTRAP IMAGE BOX --
* by Timothy Foster
**/
.image-box{
background: var(--fgColor) !important;
}
.image-box-heading{
color: var(--keyColor) !important;
font: 1.25rem var(--header-font) !important;
}
.image-box-link{
padding: 0 !important;
border: 0 !important;
}
.image-box-caption{
font-size: 100% !important;
}
/* Primary */
.image-box-primary .image-box-link:hover{ background: var(--accentColorLite); }
.image-box-primary{ border-color: var(--accentColorLite) !important; }
.image-box-primary .image-box-heading{ background: var(--accentColor) !important; }
.image-box-primary .image-box-caption{ color: var(--textColorAlt) !important; }
/* Info */
.image-box-info .image-box-link:hover{ background: hsla(194, 66%, 71%, .5); }
.image-box-info{ border-color: hsl(194, 66%, 61%) !important; }
.image-box-info .image-box-heading{ background: hsl(194, 66%, 61%) !important; }
/* Success */
.image-box-success .image-box-link:hover{ background: hsla(120, 39%, 64%, .5); }
.image-box-success{ border-color: hsl(120, 39%, 54%) !important; }
.image-box-success .image-box-heading{ background: hsl(120, 39%, 54%) !important; }
/* Danger */
.image-box-danger .image-box-link:hover{ background: hsla(2, 64%, 68%, .5); }
.image-box-danger{ border-color: hsl(2, 64%, 58%) !important; }
.image-box-danger .image-box-heading{ background: hsl(2, 64%, 58%) !important; }
/* Warning */
.image-box-warning .image-box-link:hover{ background: hsla(35, 84%, 72%, .5); }
.image-box-warning{ border-color: hsl(35, 84%, 62%) !important; }
.image-box-warning .image-box-heading{ background: hsl(35, 84%, 62%) !important; }
/* None */
.image-box-none .image-box-link:hover{ background: hsla(0, 0%, 95%, .5); }
.image-box-none .image-box-heading{ background: var(--textColorAlt) !important; }
.image-box-none .image-box-caption{ color: var(--textColorAlt) !important; }
/* -- CENTERED IMAGES ON MOBILE ----
* Courtesy Of:
* EstrellaYoshte
* PeppersGhost
**/
.imagediv{
float: right;
margin: 1rem;
}
@media (max-width: 540px){
.imagediv{
float: none;
text-align: center;
}
}
/* ---- TABLE STYLING ----
* Adapted From:
* BLANKSTYLE CSS by Placeholder McD, HarryBlank
**/
.table1{ /* Green */
--accentColor: rgb(var(--one-color, 40, 159, 107));
--accentColorLite: hsla(154, 60%, 49%, .5);
}
.table2{ /* Blue */
--accentColor: rgb(var(--two-color, 117, 167, 242));
--accentColorLite: hsla(216, 83%, 80%, .5);
}
.table3{ /* Yellow */
--accentColor: rgb(var(--three-color, 255, 226, 82));
--accentColorLite: hsla(50, 100%, 76%, .5);
}
.table4{ /* Orange */
--accentColor: rgb(var(--four-color, 255, 141, 54));
--accentColorLite: hsla(26, 100%, 71%, .5);
}
.table5{ /* Red */
--accentColor: rgb(var(--five-color, 255, 34, 67));
--accentColorLite: hsla(351, 100%, 67%, .5);
}
.table6{ /* Violet */
--accentColor: rgb(var(--six-color, 161, 73, 248));
--accentColorLite: hsla(270, 93%, 73%, .5);
}
.table0{ /* White */
--accentColor: rgb(var(--white-bar, 205, 206, 208));
--accentColorLite: hsla(212, 3%, 91%, .5);
}
.table1 strong, .table2 strong, .table3 strong,
.table4 strong, .table5 strong, .table6 strong,
.table0 strong{
filter: saturate(.85) brightness(1.15);
}
#page-content .wiki-content-table tr th{
padding: .4rem;
color: var(--keyColor);
background: var(--accentColor);
border-color: var(--accentColor);
}
#page-content .wiki-content-table tr th a{
color: var(--alphaColor);
border-color: var(--textColorAlt);
}
#page-content .wiki-content-table tr th a:hover{
color: var(--keyColor);
background-color: var(--alphaColor);
}
#page-content .wiki-content-table tr td{
padding: .8rem;
color: var(--textColorAlt);
background: var(--fgColor);
border-color: var(--accentColor);
line-height: 1.5;
}
/* ---- CELL SEPARATOR ----
* Adapted From:
* BLANKSTYLE CSS by Placeholder McD, HarryBlank
**/
.tableb table,
.tableb .wiki-content-table{
border-collapse: separate;
border-spacing: .4rem;
}
.tableb .scp-image-block{
border: 0;
}
.tableb .scp-image-block img,
.tableb .scp-image-block .scp-image-caption{
border: thin solid var(--accentColor);
}
.tableb .scp-image-block .scp-image-caption{
margin-top: .4rem;
}
/* == CONTENT WARNING HEADER == */
.content-warning-alt {
/* Warns Readers About Potentially Disturbing Content Contained in the Article */
--accentColorMid: var(--accentColorAlt);
--accentColorLow: hsla(357, 100%, 65%, .35);
--accentColor: hsla(51, 100%, 50%, .85);
--accentColorAlt: hsla(51, 100%, 50%, .6);
min-width: 75%;
width: fit-content;
margin: 1rem auto 2rem;
padding: .33rem 1.2rem .2rem;
color: var(--textColorMid);
background: var(--fgColor);
border: thick solid var(--accentColorMid);
border-radius: 9rem;
text-align: center;
}
@media (max-width: 767px) {
.content-warning-alt {
border-radius: 3rem;
}
}
.content-warning-alt p:nth-child(1)::before {
display: flex;
width: fit-content;
margin: 0 auto 1.13rem;
padding: .6rem 1.13rem .73rem;
content: "⚠️ 内容警告";
color: var(--textColor);
background: var(--accentColorLow);
border-radius: 2rem;
font: bold 1.55rem var(--body-font);
font-feature-settings: var(--glyphs);
text-shadow:
-1.75px -1.75px var(--keyColor),
0 -1.75px var(--keyColor),
1.75px -1.75px var(--keyColor),
1.75px 0 var(--keyColor),
1.75px 1.75px var(--keyColor),
0 1.75px var(--keyColor),
-1.75px 1.75px var(--keyColor),
-1.75px 0 var(--keyColor);
}
.content-warning-alt strong {
filter: none;
}
/* ---- CUSTOM DIV BLOCKS ---- */
.classification-header, .ethics-header, .miscomm-header,
.oracle-header, .overwatch-header, .raisa-header,
.warning-header{
margin: 1rem 0;
padding: 0 .53rem;
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
text-align: center;
}
.classification-header > p:nth-child(1)::before, .ethics-header > p:nth-child(1)::before,
.miscomm-header > p:nth-child(1)::before, .oracle-header > p:nth-child(1)::before,
.overwatch-header > p:nth-child(1)::before, .raisa-header > p:nth-child(1)::before{
display: flex;
justify-content: center;
margin: .53rem 0;
padding: 0 0 .8rem;
font-family: var(--header-font);
font-size: 1.35rem;
letter-spacing: 1px;
}
.classification-header{
/* -- Classification Committee Header -- */
color: var(--keyColor);
background-image:
linear-gradient(
hsla(11, 30%, 85%, .7),
hsla(11, 30%, 85%, .7)),
url(https://i.imgur.com/wkUri0y.png);
border: thick solid hsl(360, 26%, 26%);
outline: 7px solid hsl(360, 0%, 76%);
}
.classification-header > p:nth-child(1)::before{
content: "FOUNDATION CLASSIFICATION COMMITTEE MEMO";
color: hsl(360, 26%, 26%);
border-bottom: medium solid hsl(360, 26%, 26%);
}
.classification-header hr{
border-color: hsl(360, 26%, 26%);
}
.ethics-header{
/* -- Ethics Committee Header -- */
color: var(--keyColor);
background-image:
linear-gradient(
hsla(212, 7%, 87%, .7),
hsla(212, 7%, 87%, .7)),
url(https://i.imgur.com/CQCcN7e.png);
border: thick solid var(--keyColor);
}
.ethics-header > p:nth-child(1)::before{
content: "OFFICIAL ETHICS COMMITTEE MEMORANDUM";
color: var(--fgColor);
border-bottom: medium solid var(--fgColor);
}
.ethics-header hr{
border-color: var(--fgColor);
}
.classification-header strong, .ethics-header strong{
color: var(--keyColor);
}
.miscomm-header{
/* -- Miscommunications Notice -- */
color: hsl(57, 98%, 68%);
background-image:
linear-gradient(
hsla(9, 84%, 58%, .7),
hsla(9, 84%, 58%, .7)),
url(https://scp-wiki.wdfiles.com/local--files/desk-of-junior-designer-s-yvonne/miscdept.png);
border: thin solid hsl(57, 98%, 68%);
outline: 7px solid hsl(9, 51%, 47%);
}
.miscomm-header strong{
color: hsl(57, 98%, 68%);
}
.miscomm-header > p:nth-child(1)::before{
content: "NOTICE FROM THE FOUNDATION DEPARTMENT OF MISCOMMUNICATIONS";
border-bottom: thin solid hsl(57, 98%, 68%);
}
.miscomm-header hr{
border-color: hsl(57, 98%, 68%);
}
.oracle-header{
/* -- ORACLE Header -- */
color: var(--textColor);
background-image:
url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/spc_logo.png),
url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/water_ripples.webp);
background-position:
top center,
bottom center;
background-size:
contain,
100%;
border: thick solid var(--keyColor);
}
.oracle-header > p:nth-child(1)::before{
content: "FROM THE DESK OF ORACLE";
border-bottom: medium solid var(--textColorAlt);
}
.oracle-header hr{
border-color: var(--textColor);
}
.overwatch-header{
/* -- Overwatch Header -- */
color: var(--textColor);
background-image:
linear-gradient(
hsla(205, 28%, 27%, .7),
hsla(205, 28%, 27%, .7)),
url(https://i.imgur.com/Q2TCZnd.png);
border: thick solid hsl(205, 36%, 5%);
}
.overwatch-header > p:nth-child(1)::before{
content: "BY ORDER OF THE OVERWATCH COUNCIL";
border-bottom: medium solid hsl(205, 36%, 5%);
}
.overwatch-header hr{
border-color: hsl(205, 36%, 5%);
}
.raisa-header{
/* -- RAISA Notice Header -- */
color: var(--textColor);
background-image:
linear-gradient(
hsla(60, 18%, 36%, .7),
hsla(60, 18%, 36%, .7)),
url(https://i.imgur.com/4uLBoQ3.png);
border: thick solid hsl(0, 0%, 60%);
}
.raisa-header > p:nth-child(1)::before{
content: "NOTICE FROM THE FOUNDATION RECORDS AND INFORMATION SECURITY ADMINISTRATION";
border-bottom: medium solid hsl(0, 0%, 60%);
}
.raisa-header hr{
border-color: hsl(0, 0%, 60%);
}
.warning-header{
/* -- Warning Header (Adapted From 'SCP-3143' & 'SCP-5664') -- */
color: var(--textColorAlt);
background-attachment: fixed;
background-color: hsl(356, 98%, 16%);
background-image:
url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_trans.png);
background-position: center;
background-size: 400px;
border: thick solid var(--keyColor);
}
.warning-header p:nth-child(1)::before{
display: flex;
justify-content: center;
margin: .53rem 0;
padding: 0 0 .8rem;
content: "⚠ WARNING ⚠";
border-bottom: medium solid var(--keyColor);
filter: saturate(.85) brightness(1.15);
font: 1.95rem var(--header-font);
}
.warning-header hr{
border-color: var(--keyColor);
}
.oracle-header strong, .raisa-header strong, .warning-header strong{
color: var(--textColorAlt);
}
.classification-header h2, .ethics-header h2, .miscomm-header h2,
.oracle-header h2, .overwatch-header h2, .raisa-header h2,
.classification-header h3, .ethics-header h3, .miscomm-header h3,
.oracle-header h3, .overwatch-header h3, .raisa-header h3,
.classification-header h4, .ethics-header h4, .miscomm-header h4,
.oracle-header h4, .overwatch-header h4, .raisa-header h4,
.warning-header h2, .warning-header h3, .warning-header h4{
color: inherit;
}
.log-header, .report-box, .narration{
margin: 1rem 0;
padding: .02rem 1rem;
}
.log-header{
/* -- Interview/Incident/Exploration Log Header -- */
color: var(--textColorAlt);
background: var(--fgColor);
border: thick dashed var(--accentColor);
border-radius: 2rem;
}
div.blockquote.larger, .darkbox.larger, .lightbox.larger, .report-box.larger {
/* -- Larger Quote Size -- */
font-size: 125%;
}
blockquote, div.blockquote {
/* = Quote Block = */
margin: 1rem 3rem;
padding: .02rem 1rem;
color: var(--textColorAlt);
background-color: var(--fgColor);
border: 0;
border-left: 7px solid var(--accentColor);
box-shadow: 5px 5px var(--bgColor);
}
@media (max-width: 767.9px) {
blockquote, div.blockquote {
margin: 1rem 0;
}
}
div.blockquote.dashed {
/* -- Alternative Quote 1 | Dashed -- */
border-left-style: dashed;
}
div.blockquote.classic {
/* -- Alternative Quote 2 | Classic -- */
border: medium solid var(--accentColor);
}
div.blockquote.classic.curved {
/* -- Alternative Quote 3 | Classic Curved -- */
border-radius: 1.27rem;
}
div.blockquote.lightweight {
/* -- Alternative Quote 4 | Lightweight -- */
border-left: 0;
}
div.blockquote.simple {
/* -- Alternative Quote 5 | Simple -- */
margin: 1rem 0;
padding: 0 1rem;
color: var(--textColor);
background: 0;
border-left-style: solid;
}
.darkbox, .lightbox{
margin: 1rem 0;
border-right: 7px solid var(--accentColor);
border-left: 7px solid var(--accentColor);
}
.darkbox{
color: var(--textColorAlt);
background: var(--fgColor);
padding: .4rem .6rem;
}
.lightbox{
color: var(--fgColor);
background: var(--textColorAlt);
padding: .8rem;
}
.lightbox hr{
border-color: var(--keyColor);
}
.lightbox h1, .lightbox h2, .lightbox h3,
.lightbox h4, .lightbox h5, .lightbox h6{
color: var(--fgColor);
}
.lightbox strong,
.lightbox a{
font-weight: bold;
filter: saturate(1.5) brightness(.5);
}
.lightbox a:hover{
color: var(--alphaColor);
filter: unset;
}
.report-box{
/* -- Report Box -- */
color: var(--textColorAlt);
background: var(--fgColor);
border-top: 11px solid var(--accentColor);
}
.red-tint, .orange-tint, .yellow-tint,
.green-tint, .cyan-tint,
.blue-tint, .magenta-tint, .grey-tint{
color: var(--textColor);
background: var(--fgColor);
border: thick solid var(--accentColor);
}
.red-tint, .red-tint hr, .red-tint h3{
/* -- Alternative Report Block Colors -- */
--fgColor: hsl(360, 48%, 45%);
--accentColor: hsl(360, 62%, 75%);
--accentColorLite: hsla(360, 62%, 85%, .5);
}
.orange-tint, .orange-tint hr, .orange-tint h3{
--fgColor: hsl(30, 48%, 35%);
--accentColor: hsl(30, 50%, 73%);
--accentColorLite: hsla(30, 50%, 83%, .5);
}
.yellow-tint, .yellow-tint hr, .yellow-tint h3{
--fgColor: hsl(60, 48%, 26%);
--accentColor: hsl(60, 56%, 76%);
--accentColorLite: hsla(60, 56%, 86%, .5);
}
.green-tint, .green-tint hr, .green-tint h3{
--fgColor: hsl(120, 48%, 29%);
--accentColor: hsl(120, 56%, 76%);
--accentColorLite: hsla(120, 56%, 86%, .5);
}
.cyan-tint, .cyan-tint hr, .cyan-tint h3{
--fgColor: hsl(180, 48%, 28%);
--accentColor: hsl(180, 56%, 76%);
--accentColorLite: hsla(180, 56%, 86%, .5);
}
.blue-tint, .blue-tint hr, .blue-tint h3{
--fgColor: hsl(240, 48%, 54%);
--accentColor: hsl(240, 56%, 76%);
--accentColorLite: hsla(240, 56%, 86%, .5);
}
.magenta-tint, .magenta-tint hr, .magenta-tint h3{
--fgColor: hsl(300, 48%, 41%);
--accentColor: hsl(300, 56%, 76%);
--accentColorLite: hsla(300, 56%, 86%, .5);
}
.grey-tint, .grey-tint hr, .grey-tint h3{
--fgColor: hsl(210, 24%, 39%);
--accentColor: hsl(210, 12%, 75%);
--accentColorLite: hsla(210, 12%, 85%, .5);
}
.red-tint ::selection, .orange-tint ::selection, .yellow-tint ::selection,
.green-tint ::selection, .cyan-tint ::selection,
.blue-tint ::selection, .magenta-tint ::selection, .grey-tint ::selection{
color: var(--keyColor);
}
.overwatch-box,
.overwatch-header{
--accentColor: hsl(207, 65%, 65%);
--accentColorLite: hsla(207, 65%, 75%, .5);
--fnColor: var(--accentColor);
}
.overwatch-box{
/* -- Overwatch Document Box -- */
margin: 1rem 6rem;
padding: .02rem 1rem;
background: hsl(207, 24%, 25%);
border: thick solid hsl(205, 36%, 5%);
}
@media (max-width: 479px){
.overwatch-box{
margin: 1rem 0;
}
}
@media (min-width: 480px) and (max-width: 580px){
.overwatch-box{
margin: .53rem;
}
}
.overwatch-box hr{
border-color: hsl(205, 36%, 5%);
}
.narration{
/* -- Mimics the Pages of a Book -- */
border: 7px solid var(--fgColor);
}
.journal{
/* -- Page (Adapted From 'RAISA-007710') -- */
margin: 1rem 0;
padding: .73rem 1.33rem 1.33rem;
background:
linear-gradient(
to top,
hsl(225, 2%, 28%) 0%,
hsl(0, 0%, 19%) 8%) 0 8px;
background-size: 100% 1.33rem;
border: thin solid gray;
}
.journal p{
margin: 0;
font: 1.33rem/1.33rem var(--script-font);
}
.journal strong{
color: var(--textColor);
}
.highlighter,
.journal ::selection{
padding: 0 .27rem;
background: hsla(30, 99%, 59%, .3);
}
/* -- TEXT STYLE --
* by JaonHax
**/
/* External box */
.text-container-wrap{
background: var(--fgColor);
border-color: var(--keyColor);
pointer-events: all !important;
}
.text-container-wrap h1, .text-container-wrap h2,
.text-container-wrap h3, .text-container-wrap h4{
color: var(--accentColor);
}
.text-container-wrap h5, .text-container-wrap h6{
color: var(--textColor);
}
/* Internal box */
.text-container{
background: var(--bgColor);
box-shadow: none;
}
/* Messages */
.recv .text{
color: var(--textColorAlt);
background: var(--fgColor);
}
.sent .text{
color: var(--alphaColor);
}
.recv .text strong, .sent .text strong{
color: var(--textColorAlt);
}
.recv .text a{
color: hsl(213, 94%, 58%);
border-color: hsl(213, 94%, 58%) !important;
}
.sent .text a{
color: unset;
border-color: var(--textColor) !important;
}
.recv .text a:hover{
color: var(--keyColor);
background: hsl(213, 94%, 58%);
}
.sent .text a:hover{
background: hsl(214, 94%, 34%);
}
/* Selection */
.text-container-wrap *::selection{
background: hsla(214, 80%, 34%, .8) !important;
}
/* -- HAZARD BOX -- */
.hazard-box{
/* -- Overall -- */
display: flex;
align-items: center;
margin: 1rem 0;
background: var(--fgColor);
}
.hazard-box-image{
/* -- Image -- */
width: calc(100% * .2);
padding: .13rem 0 .13rem .53rem;
}
.hazard-box-text{
/* -- Text -- */
width: 95%;
margin: .27rem 0;
padding: .27rem .53rem;
color: var(--textColorAlt);
}
.hazard-box-1{ border-left: 11px solid rgb(var(--one-color)); } /* Green */
.hazard-box-image-1{
filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(100deg) brightness(1.25);
}
.hazard-box-2{ border-left: 11px solid rgb(var(--two-color)); } /* Blue */
.hazard-box-image-2{
filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(178deg) brightness(1.25);
}
.hazard-box-3{ border-left: 11px solid rgb(var(--three-color)); } /* Yellow */
.hazard-box-image-3{
filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(12deg) brightness(1.75);
}
.hazard-box-4{ border-left: 11px solid rgb(var(--four-color)); } /* Orange */
.hazard-box-image-4{
filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(341deg) brightness(1.25);
}
.hazard-box-5{ border-left: 11px solid rgb(var(--five-color)); } /* Red */
.hazard-box-image-5{
filter: invert(.4) sepia(.5) saturate(1000%) hue-rotate(303deg);
}
.hazard-box-6{ border-left: 11px solid rgb(var(--six-color)); } /* Violet */
.hazard-box-image-6{
filter: invert(.4) sepia(.5) saturate(750%) hue-rotate(221deg) brightness(1.25);
}
.hazard-box-0{ border-left: 11px solid rgb(var(--white-bar)); } /* White */
.hazard-box-image-0{
filter: invert(.81);
}
/* ---- FORMATTING | [SPECIAL] ---- */
.centered {
/* -- Center-Aligns Text -- */
text-align: center;
}
.justified {
/* -- Justify-Aligns Text -- */
text-align: justify;
}
.indented {
/* -- Indents Block by ⅜-inch (Use Within Other Divs) -- */
text-indent: 2rem;
}
.indented .bibcite,
.indented .bibitems,
.indented .footnoteref,
.indented .scp-image-block,
.indented h1, .indented h2, .indented h3,
.indented h4, .indented h5, .indented h6,
.indented .image-container,
.indented ol,
.indented ul,
.indented .centered,
.indented .fncon,
.indented .fncon::before {
text-indent: 0;
}
.end-mark > p:last-of-type::after {
content: "❖";
margin-left: .2rem;
color: var(--accentColor);
filter: saturate(.85) brightness(1.15);
font-size: 1.35rem;
line-height: 0;
}
.rev-red {
/* -- Red Document Revision Text -- */
color: hsl(360, 80%, 70%);
}
.rev-yellow {
/* -- Yellow Document Revision Text -- */
color: hsl(40, 80%, 45%);
}
.rev-green {
/* -- Green Document Revision Text -- */
color: hsl(120, 40%, 55%);
}
.rev-blue {
/* -- Blue Document Revision Text -- */
color: hsl(240, 80%, 80%);
}
.terminal-span {
/* -- Computer Terminal Text -- */
font: 110%/1.5 var(--mono-font);
letter-spacing: 1px;
}
.rev-red, .rev-yellow,
.rev-green, .rev-blue,
.terminal-span {
font-weight: bold;
}
.bt {
/* Bold-Text = Bold + accentColor */
color: var(--accentColor);
font-weight: bold;
text-decoration-color: inherit;
}
.tb { /* Bold-Text + textColor */
color: var(--textColor);
filter: unset;
font-weight: bold;
}
div .tb { color: var(--textColorAlt); }
.bt.bb, /* Big-Bar = Bold + accentColor + Vertical Bar [Body Text] */
.bt.bh, /* Header-Bar = Bold + accentColor + Vertical Bar [Header Text] */
.tb.bb { /* Big-Bar = Bold + textColor + Vertical Bar [Body Text] */
border-right: 2px solid;
}
.bt.bb,
.bt.bh {
border-color: var(--accentColor);
}
.tb.bb {
border-color: var(--textColor);
}
div .tb.bb { color: var(--textColorAlt); }
.bt.bh {
border-right-width: medium;
}
.bt.bb::after,
.bt.bh::after,
.tb.bb::after {
content: ":";
visibility: hidden;
}
/* -- Blinking Text Cursor ----
* Adapted From:
* Word Processor Theme by stormbreath
**/
#u-append-blink-bar p:last-child::after {
position: relative;
bottom: .067rem;
left: .07rem;
content: "█";
animation: blink 1.5s infinite;
}
@keyframes blink {
to {
opacity: 0;
}
}
/* Adapted From:
* Dustjacket Theme by Woedenaz
**/
.fancyhr hr {
border-top: 2vw solid;
border-image-repeat: round;
border-image-slice: 80 500 80 500 fill;
border-image-source: url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_hr.png);
border-image-width: 10rem 80rem;
filter: hue-rotate(var(--tint));
}
.fancyborder {
padding: 2vw;
border: 2vw solid;
border-image: url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_border.png) 600 round;
border-image-width: 6;
}
.lite-heading {
/* -- Special Heading Area -- */
margin: 3rem -5.5%;
padding: 0 5.5%;
background: var(--fgColor);
}
.lite-heading hr {
margin: 0 -5.5%;
border: medium solid var(--accentColor);
}
.lite-heading h3 {
color: var(--textColorAlt);
filter: unset !important;
}
.image-showcase {
/* -- Alternative Image Showcase -- */
width: 21rem;
margin: 1rem auto;
background: var(--bgColor);
border: 7px solid var(--fgColor);
}
.scene-break {
/* = Fancy Scene Break = */
width: 5rem;
margin: 2rem;
}
.icon-tint {
filter: invert(.4) sepia(.5) saturate(1500%) hue-rotate(var(--tint));
}
/* -- ListPages Navigator ----
* Adapted From:
* SCP-5552 by Captain Kirby
**/
.listPagesNav {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
margin: 0 0 3rem;
}
.listPagesNav-prev, .listPagesNav-next {
width: 45%;
padding: 0 1%;
background: var(--fgColor);
}
.listPagesNav-prev {
float: left;
border-left: thick solid var(--accentColor);
text-align: left;
}
.listPagesNav-next {
float: right;
border-right: thick solid var(--accentColor);
text-align: right;
}
.listPagesNav-prev p, .listPagesNav-next p {
font: 1.25rem var(--header-font);
letter-spacing: 1px;
}
@media (max-width: 767px) {
.listPagesNav-prev p, .listPagesNav-next p {
font-size: .95rem;
}
}
.fade-away {
/* -- Fades to Black -- */
background:
linear-gradient(
transparent,
var(--keyColor));
}
.whiteout {
/* -- Fades to White -- */
background:
linear-gradient(
transparent,
var(--textColor));
}
.footing,
.footing::after {
position: relative;
}
.footing {
/* = Page Content Footing = */
margin: 1rem 0;
padding-top: 1.6rem;
}
.footing::before,
.footing::after {
content: "";
}
.footing::before {
position: absolute;
right: 0;
bottom: .2rem;
left: 0;
border-bottom: 4px solid var(--accentColor);
}
.footing::after {
display: block;
top: .2rem;
border-bottom: 2px solid var(--accentColorLite);
}
@media (max-width: 767.9px) {
.footing::before, .footing:after {
margin: 0 -5%;
}
}
.related-flex {
/* -- Related Articles Box -- */
display: flex;
justify-content: center;
}
.related {
margin: 1rem 0;
padding: .02rem 1rem;
color: var(--textColorAlt);
background: var(--fgColor);
border: thick solid var(--accentColor);
font-weight: bold;
}
.related > p:nth-child(1)::before,
.related > ol:nth-child(1)::before,
.related > ul:nth-child(1)::before,
.related > a:nth-child(1)::before {
display: flex;
padding: 0 0 .53rem;
content: "See Also:";
color: var(--accentColor);
font: 1.25rem var(--header-font);
letter-spacing: 1px;
}
.related > ol:nth-child(1)::before,
.related > ul:nth-child(1)::before {
margin-left: -2rem;
}
.series-nav {
/* -- Series Navigator -- */
display: flex;
justify-content: center;
margin: 1rem 0;
padding: .02rem 1rem;
color: var(--textColorAlt);
background: var(--fgColor);
border-top-right-radius: .67rem;
border-top-left-radius: .67rem;
border-bottom: 2px solid var(--accentColor);
font: 85% var(--header-font);
}
/* -- Earthworm Series Navigator --
* by Croquembouche
**/
.earthworm p {
cursor: text;
}
#page-content .earthworm a {
border-bottom: 0;
}
#page-content .earthworm a[href="/"] {
color: var(--textColorAlt);
filter: unset;
}
#page-content .earthworm .first,
#page-content .earthworm .hub,
#page-content .earthworm .last,
#page-content .earthworm .first:not(.true) img,
#page-content .earthworm .last:not(.true) img {
background: var(--fgColor);
border-color: var(--accentColorLite);
}
@media (max-width: 767px) {
#page-content .earthworm {
font-size: .85rem;
}
#page-content .earthworm .hub {
font-size: .95rem;
}
}
@media (min-width: 768px) {
#page-content .earthworm .hub {
font-size: 1.15rem;
}
}
.bt,
.listPagesNav-prev p, .listPagesNav-next p,
.related > p:nth-child(1)::before,
.related > ol:nth-child(1)::before,
.related > ul:nth-child(1)::before,
.related > a:nth-child(1)::before,
#page-content .earthworm a,
#toc .title,
strong {
filter: saturate(.85) brightness(1.15);
}
/* == RATING MODULE ACTIVITY TOGGLE == */
#u-activeRate {
/* = Rating module remains inactive unless interacted with = */
opacity: calc(1 / 3);
transition: all .25s ease-in-out;
}
#u-activeRate:hover {
opacity: 1;
}
/* ==== YUI TABS ==== */
/* == YUI TAB CUSTOMIZATION == */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav{
display: flex;
flex-wrap: wrap;
width: calc(100% - .13rem);
margin: 0 auto;
border-color: var(--accentColor);
}
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li{ /* -- Listitem Modifier -- */
display: flex;
flex-grow: 2;
margin: 0;
padding: 0;
background: var(--fgColor);
font-size: 1.05rem;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a{ /* -- Link Modifier -- */
/* -- Tab | [UNSELECTED] -- */
color: var(--textColorAlt);
background: var(--fgColor);
transition: all .2s cubic-bezier(.77, 0, .18, 1);
font-family: var(--header-font);
}
.yui-navset .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset-bottom .yui-nav li a{
width: 100%;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
/* -- Tab | [HOVER] -- */
color: var(--alphaColor);
background: var(--accentColor);
transition: all .2s cubic-bezier(.77, 0, .18, 1);
}
.yui-navset .yui-nav li em{
border: 0;
}
.yui-navset .yui-nav a em,
.yui-navset .yui-navset-top .yui-nav a em{
padding-top: .47rem;
padding-bottom: .47rem;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected{ /* -- Selection Modifier -- */
/* -- Tab | [SELECTED] -- */
flex-grow: 2;
margin: 0;
padding: 0;
background: var(--accentColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em{
border: 0;
}
.yui-navset .yui-nav .selected a em{
padding-top: .47rem;
padding-bottom: .47rem;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:active,
.yui-navset .yui-nav .selected a:focus{
color: var(--fgColor);
}
.yui-navset .yui-content{
color: var(--textColorAlt);
background: var(--fgColor);
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content{
padding: .53rem;
border: 0;
line-height: 1.5;
}
/* -- YUI TAB ANIMATION --
* Courtesy Of Croquembouche
**/
.yui-navset .yui-content > div{
display: block;
transform-origin: 0 0;
overflow: hidden;
}
#page-content .yui-navset .yui-content > div[style*="none"]{
display: block !important;
flex: 0;
max-height: 0;
padding: 0 .53rem;
border-width: 0;
/* Next Transition Affects the One That DISAPPEARS */
transition:
padding 0s ease-in-out .5s,
border-width 0s ease-in-out .5s,
flex .4s cubic-bezier(.18, .51, .54, .9) 0s;
animation: tab-disappear .4s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"]{
display: block !important;
flex: 1;
max-height: 9999rem;
/* Next Transition Affects the One That APPEARS */
transition:
padding 0s ease-in-out .5s,
border-width 0s ease-in-out .5s,
flex .4s cubic-bezier(.18, .51, .54, .9) .5s;
animation: tab-appear .4s ease-in-out .5s 1 both;
}
@keyframes tab-disappear{
0%{
max-height: 9999rem;
}
1%{
max-height: 100vh;
}
100%{
max-height: 0;
}
}
@keyframes tab-appear{
0%{
max-height: 0;
}
99%{
max-height: 100vh;
}
100%{
max-height: 9999rem;
}
}
/* ---- WIKIWALK NAVIGATOR ---- */
.footer-wikiwalk-nav{
width: max-content;
margin: 1rem auto;
padding: .067rem 1rem;
color: var(--textColorAlt);
background: var(--fgColor);
border-radius: .53rem;
font-size: 85%;
}
/* ---- INTERWIKI ---- */
div.scpnet-interwiki-wrapper{
margin-bottom: 2rem;
}
iframe.scpnet-interwiki-frame{
background: var(--accentColorLite);
}
#interwiki{
--fgColor: none;
background: 0;
}
#interwiki body{
overflow: hidden;
}
#interwiki .side-block{
background: 0;
border: 0;
box-shadow: none;
}
#interwiki .heading{
color: var(--textColorAlt);
border-bottom-color: var(--textColor);
font: bold .95rem "Josefin Sans", sans-serif;
}
#interwiki .menu-item img{
display: none;
}
#interwiki .menu-item a{
color: var(--alphaColor);
transition: color .2s ease-in-out;
}
#interwiki .menu-item a:hover{
color: var(--keyColor);
background-color: var(--alphaColor);
text-decoration: none;
}
/* ==== CROQSTYLE ALTERATIONS ==== */
#edit-page-textarea {
font-family: unset;
}
tt {
background: unset;
font-size: 110%;
}
/* General Patches For:
* ACS
* Collapsibles
* Info Bar
* Info Module
* Side-Bar Media
* So Link Doesn't Override
**/
.danger-diamond a:hover,
.collapsible-block-folded a:hover,
.collapsible-block-unfolded-link a:hover,
.rate-box-with-credit-button .fa-info:hover,
#side-bar .side-block.media a:hover{
background: 0;
}
.info-container .collapsible-block-link,
.info-container .collapsible-block-folded .collapsible-block-link{
background: var(--linkColour) !important;
}
/* ---- ACS PATCH ----
* Courtesy Of Nagiros
**/
.anom-bar > .bottom-box{
/* Horizontal Bar */
-webkit-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
-moz-box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
box-shadow: 0 -.5rem 0 0 hsl(212, 3%, 81%) !important;
-webkit-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
-moz-box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
box-shadow: 0 -.5rem 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
}
.bottom-box > .diamond-part{
/* Vertical Bar */
-webkit-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
-moz-box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
box-shadow: -.5rem 0 0 0 hsl(212, 3%, 81%) !important;
-webkit-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
-moz-box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
box-shadow: -.5rem 0 0 0 rgb(var(--white-bar, 205, 206, 208)) !important;
}
.anom-bar-container.esoteric .text-part .main-class,
.anom-bar-container.explained .text-part .main-class,
.anom-bar-container.neutralized .text-part .main-class,
.anom-bar-container.pending .text-part .main-class{
background-color: hsl(240, 4%, 27%, .5) !important;
border-left-color: hsl(240, 5%, 49%) !important;
background-color: rgba(var(--gray-bg, 66, 66, 72), .5) !important;
border-left-color: rgb(var(--lg-bar, 118, 118, 130)) !important;
}
.danger-diamond > .arrows,
.danger-diamond > .bottom-icon::before{
/* Inverted Arrows + Esoteric Icons */
-webkit-filter: invert(.9) !important;
filter: invert(.9) !important;
}
.danger-diamond > .quadrants > .bottom-quad, /* Transparent Bottoms + Top Icon Backgrounds */
.anom-bar-container.explained .danger-diamond > .quadrants > .top-quad,
.anom-bar-container.neutralized .danger-diamond > .quadrants > .top-quad,
.anom-bar-container.pending .danger-diamond > .quadrants > .top-quad{
/* Body Background-Color */
background-color: hsl(0, 0%, 10%) !important;
}
.danger-diamond > .bottom-icon, /* Esoteric + Pending Icon Backgrounds */
.anom-bar-container.pending .danger-diamond > .top-icon::before{
background-color: hsl(0, 0%, 1%) !important;
}
.anom-bar > .bottom-box::before{
background-color: rgb(var(--white-bar, 205, 206, 208));
}
.top-left-box > .item{
display: none;
}
/* ---- AUTHOR LABEL PATCH ---- */
#page-content .authorlink-wrapper{
margin-top: -.13rem;
--author-right-adjust: 0;
}
/* == BETTERFOOTNOTES PATCH == */
:root {
--posX: calc(50% - 358px - 13rem);
--fnLinger: 1.5s;
--fnColor: var(--accentColor);
}
.fnnum {
filter: saturate(.85) brightness(1.15);
font-size: .9rem;
}
.fnnum:hover::after {
color: var(--keyColor);
}
.fnnum:hover + .fncon {
right: calc(-8vw - 4rem);
}
.fncon {
color: var(--textColorAlt);
background: var(--fgColor);
border-color: var(--accentColor);
}
.fncon::before {
color: var(--keyColor);
}
.lightbox .fnnum::after {
color: var(--keyColor);
}
.lightbox .fncon a {
filter: unset;
}
/* == FLOPS HEADER PATCH == */
.itemInfo, a.disruptionHeader {
font-family: var(--header-font);
}
.itemInfo.darkbox {
margin: 0 0 1.6rem;
padding: .8rem 1.13rem;
}
table.darkbox tr td {
padding: 0;
}
.alignL span {
margin-right: .13rem;
}
.infofield_1, .infofield_2 {
font-size: 0;
}
.infofield_1::before {
content: "ITEM #";
font-size: 1.25rem;
}
.infofield_2::before {
content: "CLASS";
font-size: 1.25rem;
}
@media (max-width: 767.9px) {
.itemInfo.darkbox {
margin: 0 0 1.25rem;
padding: 0 .75rem;
font-size: 1.05rem;
}
.infofield_3 {
font-size: 0;
}
.infofield_1::before,
.infofield_2::before,
.infofield_3::before {
font-size: 1.05rem;
}
.infofield_3::before {
content: "LVL";
}
#page-content a.disruptionHeader {
font-size: 1.25rem;
}
}
/* ---- VOID POST PATCH ---- */
div.void.dark{
color: var(--textColorAlt);
background: var(--fgColor);
border-color: hsl(222, 20%, 9%);
}
.vusermod{
color: var(--textColorAlt) !important;
}
.vui{
color: hsl(0, 0%, 60%) !important;
}
.vactivity{
color: hsl(240, 100%, 69%) !important;
}
/* ---- PAGE TAGS ---- */
#main-content .page-tags{
border-top: thin solid var(--accentColorLite);
}
#main-content .page-tags span{
max-width: 100%;
border-top: 9px solid transparent;
}
#main-content .page-tags a{
height: 1.108rem;
margin: .18rem 0 .5rem 1rem;
padding: .1875rem .3125rem .1875rem 0;
background: var(--fgColor);
border-top-right-radius: .27rem;
border-bottom-right-radius: .27rem;
font: bold .95rem/1.108rem var(--body-font);
font-feature-settings: var(--glyphs);
letter-spacing: .033rem;
}
#main-content .page-tags a::before,
#main-content .page-tags a::after{
position: relative;
float: left;
content: "";
}
#main-content .page-tags a::after{
top: .3836rem;
left: -.6818rem;
width: .341rem;
height: .341rem;
background: var(--bgColor);
border-radius: .1705rem;
}
#main-content .page-tags a::before{
top: -.1875rem;
left: -.7501rem;
border-color: transparent var(--fgColor) transparent transparent;
border-style: solid;
border-width: .75rem .75rem .75rem 0;
}
#main-content .page-tags a:hover{
color: var(--keyColor);
background: var(--accentColor);
}
#main-content .page-tags a:hover::before{
border-color: transparent var(--accentColor) transparent transparent;
}
/* ==== SITE FOOTER ==== */
#footer,
#footer a {
color: var(--textColor);
background: 0;
}
#license-area {
color: var(--textColor);
}
/* ==== BREAKPOINTS ==== */
/* == BREAKPOINTS KEY == */
/**
* Dbl-Extra-Small: ≤383.9px
* Extra-Small: 384px … 575.9px
* Small: 576px … 767.9px
* Medium: 768px … 983.9px
* Large: 984px … 1199.9px
* Extra-Large: 1200px … 1391.9px
* Dbl-Extra-Large: ≥1392px
**/
/* == EXTRA-SMALL MEDIA QUERY == */
@media (max-width: 575.9px) {
#search-top-box {
top: 1.15em;
right: 1.5em;
}
}
/* == SMALL MEDIA QUERY == */
@media (min-width: 576px) and (max-width: 767.9px) {
#search-top-box {
top: 1.15em;
right: .6em;
}
#login-status {
right: -1em;
}
}
/* == MEDIUM MEDIA QUERY == */
@media (min-width: 768px) and (max-width: 983.9px) {
#search-top-box {
right: 3em;
}
}
/* == LARGE MEDIA QUERY == */
@media (min-width: 984px) and (max-width: 1199.9px) {
#search-top-box {
right: 2em;
}
}
/* == EXTRA-LARGE MEDIA QUERY == */
@media (min-width: 1200px) and (max-width: 1391.9px) {
#search-top-box {
right: 0;
}
}
/* == DBL-EXTRA-LARGE MEDIA QUERY == */
@media (min-width: 1392px) {
#search-top-box {
right: 0;
}
}
[[/code]]
[[code type="CSS"]]
/* ==== BACKEND ==== */
@import url(https://scp-wiki.wikidot.com/local--files/theme%3Aflopstyle-dark/backend.css);
[[/code]]
[[module CSS]]
/* ==== DOCUMENTATION ==== */
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/documentation.css);
:root {
--header-title: "FLOP 风格:暗色";
--header-subtitle: "颠覆性的 CSS 哲学体系";
--lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_tyrian.png) !important;
}
/* == BACK TO TOP BUTTON == */
span.top {
display: flex;
font-size: 1.05rem;
}
span.top a {
margin: .4rem auto -.4rem;
padding: 5px 9px 5px 8px !important;
color: var(--alphaColor);
background: var(--accentColor);
border: 0 !important;
border-radius: 50%;
font-weight: bold;
}
span.top a:hover {
color: var(--keyColor);
}
[[/module]]
[[/collapsible]]
[[/iftags]]
[[iftags +版式]]
@@ @@
[[div class="centered"]]
+++* 标题字体为 [*https://fonts.google.com/specimen/Montserrat Montserrat] / [*https://fonts.google.com/noto/specimen/Noto+Sans+SC 思源黑体简中]。
正文字体为 [*https://fonts.google.com/specimen/Inter Inter] / [*https://fonts.google.com/noto/specimen/Noto+Sans+SC 思源黑体简中]。
[[span style="font-family: var(--mono-font)"]]打字机体为 [*https://fonts.google.com/specimen/Fira+Code Fira Code] / 幼圆 / [https://fonts.google.com/noto/specimen/Noto+Serif+SC 思源宋体简中]。[[/span]]
[[span style="font-family: var(--script-font); font-size: 1.3rem"]]草稿体为 [*https://fonts.google.com/specimen/Comic+Neue Comic Neue] / [https://fonts.google.com/specimen/Ma+Shan+Zheng 马善政毛笔楷体]。[[/span]]
[[/div]]
@@ @@
[[span class="top"]] [#BTT 🡹] [[/span]]
= [[span class="tb"]] 回到页面顶端 [[/span]]
@@ @@
[[include :scp-wiki-cn:component:license-box-theme
|author=Lt Flops]]
=====
[[div class="blockquote"]]
**文件名:**alt_loader.gif
**图像名:**Loading-3-box
**图像作者:**[https://commons.wikimedia.org/wiki/User:FNDE FNDE]
**授权协议:**[https://creativecommons.org/publicdomain/zero/1.0/deed.zh CC0 1.0 通用(CC0 1.0)公共领域贡献]
**来源链接:**[https://commons.wikimedia.org/wiki/File:Loading-3-box.gif 维基共享]
[[/div]]
[[div class="blockquote"]]
**文件名:**[https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/alt_logo_bw.png alt_logo_bw.png]、[https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/alt_logo_trans.png alt_logo_trans.png]、[https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/alt_logo_tyrian.png alt_logo_tyrian.png]
**图像作者:**[[*user JackalRelated]]
**授权协议:**[https://creativecommons.org/licenses/by-sa/3.0/deed.zh 署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)]
**来源链接:**自作
[[/div]]
[[div class="blockquote"]]
**文件名:**Larry_the_cat.jpg
**图像名:**Larry the cat sitting besides a wooden lawn chair in Auderghem, Belgium (DSCF2368)
**图像作者:**[https://commons.wikimedia.org/wiki/User:Trougnouf Benoît Brummer]
**授权协议:**[https://creativecommons.org/licenses/by/4.0/deed.zh 署名 4.0 国际(CC BY 4.0)]
**来源链接:**[https://commons.wikimedia.org/wiki/File:Larry_the_cat_sitting_besides_a_wooden_lawn_chair_in_Auderghem,_Belgium_(DSCF2368).jpg 维基共享]
[[/div]]
[[div class="blockquote"]]
**文件名:**spc_logo.png
**图像作者:**[[*user GreenGolem]] 与 [[*user JackalRelated]]
**授权协议:**[https://creativecommons.org/licenses/by-sa/3.0/deed.zh 署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)]
**来源链接:**[[[theme:shark-punching-centre-bhl|SPC 黑色标记笔 - SCP 基金会]]]
**备注:**由 [[*user Lt Flops]] 编辑。反相并修改了透明度。
[[/div]]
[[div class="blockquote"]]
**文件名:**water_ripples.webp
**图像名:**Water ripples texture 3 of 3
**图像作者:**[https://www.flickr.com/photos/junctions/ Juan Tello]
**授权协议:**[https://creativecommons.org/licenses/by/2.0/ 署名 2.0 通用(CC BY 2.0)]
**来源链接:**[https://flic.kr/p/5tAqGp Flickr]
**备注:** 由 [[*user Lt Flops]] 编辑。应用了混合模式“差分”、“遮罩”。添加了低透明度蓝色填充。
[[/div]]
[[div class="blockquote"]]
**文件名:**[https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_border.png wl_border.png]、[https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/wl_hr.png wl_hr.png]
**图像作者:**[[*user Woedenaz]]
**授权协议:**[https://creativecommons.org/licenses/by-sa/3.0/deed.zh 署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)]
**来源链接:**[http://wanderers-library.wikidot.com/component:theme 被放逐者之护封版式 - 被放逐者之图书馆]
[[/div]]
[[div class="blockquote"]]
**文件名:**pumpkin.png
**图像名:**Twemoji13 1f383
**图像作者:**Twitter
**授权协议:**[https://creativecommons.org/licenses/by/4.0/ 署名 4.0 国际(CC BY 4.0)]
**来源链接:**[https://commons.wikimedia.org/wiki/File:Twemoji13_1f383.svg 维基共享]
[[/div]]
[[div class="blockquote"]]
**文件名:** spirograph.png
**图像名:** Homestuck Spirograph Logo
**图像作者:** Clockingbird
**授权协议:** 公共领域贡献
**来源链接:** [*https://commons.wikimedia.org/wiki/File:Homestuck_Spirograph_Logo.png 维基共享]
**备注:** 由 [[*user Lt Flops]] 编辑。将配色调整为黑白配色。
[[/div]]
[[*user EstrellaYoshte]] 的标志被在这一版式中广泛运用:
[[div class="blockquote"]]
**文件名:**[https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witch.png witch.png]、[https://i.imgur.com/QQcBcvK.png QQcBcvK.png]、[https://i.imgur.com/wkUri0y.png wkUri0y.png]、[https://i.imgur.com/CQCcN7e.png CQCcN7e.png]、[https://i.imgur.com/Q2TCZnd.png Q2TCZnd.png]、[https://i.imgur.com/4uLBoQ3.png 4uLBoQ3.png]
**图像作者:**[[*user EstrellaYoshte]]
**授权协议:**[https://creativecommons.org/licenses/by-sa/3.0/deed.zh 署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)]
**来源链接:**[[[desk-of-junior-designer-s-yvonne|初级设计师 S. Yvonne 的办公桌]]]
[[/div]]
=====
[[include :scp-wiki-cn:component:license-box-end]]
[[/iftags]]
>[[ift{$acs}gs +版式]]
[[include :scp-wiki:component:acs-animation]]
>[[/ift{$acs}gs]]
[[include :scp-wiki:component:betterfootnotes]]
[[include :scp-wiki:component:croqstyle]]
[[include :scp-wiki:component:fade-in speed=1]]
[[include :scp-wiki:component:text-style]]
[[include :scp-wiki:component:toggle-sidebar]]
[[module css]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aflopstyle-dark/1");
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aflopstyle-dark/2");
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme%3Aflopstyle-dark/3");
[[/module]]
[[include :scp-wiki-cn:component:interwiki-style
|type=sidebar
|priority=2
|theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aflopstyle-dark/2
]]
>[[ift{$inferno}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/inferno.css);
:root {
--header-subtitle: "以火攻火";
}
[[/module]]
>[[/iftags]]
>[[/ift{$inferno}gs]]
>[[ift{$maple}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/maple.css);
:root {
--lgurl: url(http://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/xGEezVe.png);
--header-subtitle: "颠覆 常规 模式";
}
[[/module]]
>[[/iftags]]
>[[/ift{$maple}gs]]
>[[ift{$plastic}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/plastic.css);
:root {
--header-title: "S\0026 C 塑料";
--header-subtitle: "SITE-87,叙事与枢纽学研究";
}
[[/module]]
>[[/iftags]]
>[[/ift{$plastic}gs]]
>[[ift{$prairie}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/prairie.css);
:root {
--header-title: "AREA-150";
--header-subtitle: "一致 培植 突发";
}
#header h1 a::after {
content: "美国怀俄明州,提顿县";
}
[[/module]]
>[[/iftags]]
>[[/ift{$prairie}gs]]
>[[ift{$seafoam}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/seafoam.css);
:root {
--header-title: "钓鱼议会";
}
[[/module]]
>[[/iftags]]
>[[/ift{$seafoam}gs]]
>[[ift{$threshold}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/threshold.css);
:root {
--lgurl: url(http://czyesperanza.wikidot.com/local--files/pictures/overwatchheaderthreshold_cn.svg);
}
[[/module]]
>[[/iftags]]
>[[/ift{$threshold}gs]]
>[[ift{$vanguard}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/vanguard.css);
:root {
--lgurl: url(http://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/tslbdWm.png);
--header-title: "先锋";
--header-subtitle: "庇护 - 常化 - 通报";
}
[[/module]]
>[[/iftags]]
>[[/ift{$vanguard}gs]]
>[[ift{$witch}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/witch.css);
:root {
--header-subtitle: "编织难可觉察之线";
}
[[/module]]
>[[/iftags]]
>[[/ift{$witch}gs]]
>[[ift{$ashes}gs -版式]]
>[[iftags]]
[[module CSS]]
/* BOOK OF ASHES */
:root {
--accentColor: hsl(360, 65%, 65%);
--accentColorLite: hsla(360, 65%, 75%, .5);
--hue: 360deg;
--bgColor: hsl(360, 6%, 21%);
--fgColor: hsl(360, 8%, 15%);
}
#header h1 a::after {
content: "灰烬之书";
}
[[/module]]
>[[/iftags]]
>[[/ift{$ashes}gs]]
>[[ift{$light}gs -版式]]
>[[iftags]]
[[module CSS]]
/* BOOK OF LIGHT */
:root {
--accentColor: hsl(45, 50%, 50%);
--accentColorLite: hsla(45, 50%, 60%, .5);
--hue: 45deg;
--bgColor: hsl(45, 1.5%, 21%);
--fgColor: hsl(45, 2%, 15%);
}
#header h1 a::after {
content: "光明之书";
}
[[/module]]
>[[/iftags]]
>[[/ift{$light}gs]]
>[[ift{$veldt}gs -版式]]
>[[iftags]]
[[module CSS]]
/* NOTES FROM THE GREEN YONDER */
:root {
--accentColor: hsl(135, 55%, 55%);
--accentColorLite: hsla(135, 55%, 65%, .5);
--hue: 135deg;
--bgColor: hsl(135, 3%, 21%);
--fgColor: hsl(135, 4%, 15%);
}
#header h1 a::after {
content: "原野之书";
margin-top: -2.25em;
font: 1.067rem/0 var(--header-font);
}
@media (max-width: 575.9px) {
#header h1 a::after {
content: "THE GREEN YONDER";
}
}
[[/module]]
>[[/iftags]]
>[[/ift{$veldt}gs]]
>[[ift{$loose-threads}gs -版式]]
>[[iftags]]
[[module CSS]]
/* LOOSE THREADS */
:root {
--accentColor: hsl(225, 65%, 65%);
--accentColorLite: hsla(225, 65%, 75%, .5);
--hue: 225deg;
--bgColor: hsl(225, 6%, 21%);
--fgColor: hsl(225, 8%, 15%);
}
#header h1 a::after {
content: "未尽的线索";
}
[[/module]]
>[[/iftags]]
>[[/ift{$loose-threads}gs]]
>[[ift{$galaxias}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/galaxias.css);
:root {
--header-subtitle: "乳酸异常部门";
}
[[/module]]
>[[/iftags]]
>[[/ift{$galaxias}gs]]
>[[ift{$pedagogy}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/pedagogy.css);
:root {
--header-title: "国际统合奇术研究中心";
--header-subtitle: "其内如何,其外亦然。寰宇如何,心魂亦然。";
}
[[/module]]
>[[/iftags]]
>[[/ift{$pedagogy}gs]]
>[[ift{$calzone}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/calzone.css);
:root {
--header-title: "SPICY CRUST PIZZERIA";
--header-subtitle: "SUBS, CHICKEN-WINGS, \0026 PANZEROTTI";
}
#header h1 a::after {
content: "EST. 1976";
}
[[/module]]
>[[/iftags]]
>[[/ift{$calzone}gs]]
>[[ift{$chthonian}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/chthonian.css);
:root {
--lgurl: url(http://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/m76qsGD.png);
--header-title: "地狱齐楚夫";
--header-subtitle: "在此,恶魔说出晚安,恶狗向背狂吠";
}
[[/module]]
>[[/iftags]]
>[[/ift{$chthonian}gs]]
>[[ift{$monster}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/monster.css);
@font-face { font-family: 'PFanHuTuTi';
font-style: normal; font-weight: 400;font-display: swap;
src: url('https://fastly.jsdelivr.net/gh/Etinjat/FONT@00_ART/PF频凡胡涂体.woff2') format('woff2');
}
:root {
--header-font: "Jolly Lodger", "PFanHuTuTi", cursive;
--header-subtitle: "恐惧 ~ 惊悚 ~ 萦绕";
}
[[/module]]
>[[/iftags]]
>[[/ift{$monster}gs]]
>[[ift{$rhizome}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/rhizome.css);
:root {
--header-title: "SITE-89";
--header-subtitle: "Ab Incunabulis Terrae";
}
[[/module]]
>[[/iftags]]
>[[/ift{$rhizome}gs]]
>[[ift{$syzygy}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/syzygy.css);
:root {
--header-title: "☽☽☽倡议会";
--header-subtitle: "你被注视着 • 你被保护着 • 你被爱着";
}
[[/module]]
>[[/iftags]]
>[[/ift{$syzygy}gs]]
>[[ift{$witching-hour}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/witching-hour.css);
:root {
--header-title: "夜幕降临";
--header-subtitle: "人皆死于黑暗";
}
[[/module]]
>[[/iftags]]
>[[/ift{$witching-hour}gs]]
>[[ift{$peenumbra}gs -版式]]
>[[iftags]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/peenumbra.css);
:root {
--lgurl: url(http://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/yzBOtZe.png);
--header-title: "尿影";
--header-subtitle: "嘿,你个小尿鬼";
}
[[/module]]
>[[/iftags]]
>[[/ift{$peenumbra}gs]]