
.
Flop 风格:暗色
Sigma-9 版式中心 » Flop 风格:暗色

评分模块
评分模块 + 信息模块
独立的信息模块
著作信息
这是什么?
这是由 Lt Flops 制作的版式。其被制作于广泛运用在任何偏好使用暗色模式或夜晚模式的文章。
Flop 风格:暗色的存在意义就是让我能轻易地更新它,独立于所有引用了它的页面之外。预计随着时间的推移 CSS 会发生微妙的变化。
仅在知道你在做什么的情况下使用该版式。
该版式不兼容于黑色标记笔及玄武岩,请勿使用该版式,否则将会产生严重错误。
Flop 风格:暗色是以下版式的分支:
主要归功于制作了版式标志(CC BY-SA 3.0)的 JackalRelated。
最后但并非最不重要的是,感谢审查了整个版式的 stormbreath,以及在多个区域提供意见的 Croquembouche。
» 查看更新补丁记录 «
第一步,引用版式 复制此代码并将其黏贴至你页面的顶部:
[[include :scp-wiki-cn:theme:flopstyle-dark]]
[可选] 第二步,添加署名 复制此代码并将其黏贴至评分模块的正下方——如下所示:
[[module Rate]]
[[div class="byline"]]
[[span]]作者:作者链接[[/span]](A)
[[span]]#[[/span]](B)
[[/div]]
2.(A)用作者/合著者的名字替换作者链接,并且链接至相应的作者页。
2.(B)用预计读者阅读你的文章所用时间(以分钟为单位)替换 #。若需预计你文章的阅读时间,你可以复制文章文本并将其黏贴至 Read-o-Meter.译注:仅适用于英语文章。中文阅读时间预测推荐使用此工具。工具中,然后四舍五入至最近的分钟数。.声明 Read-o-Meter 并不会记录或储存你的数据。
‼️ 请确保在包含这些 span 的行之间没有空行,否则其将不会如预期般运作!

第二步实装时的一个示例。
第三步,设置页面标题 复制此代码并将其黏贴至你想要标记文章开始的地方:
[[div class="meta-title"]]
这里是你的标题
[[/div]]
由于无障碍的原因,你必须在每个使用 Flop 风格:暗色的页面中都设置一遍页面标题。
第四步,设置面包屑导航 复制此代码并将其黏贴至页面标题正下方:
[[div class="pseudocrumbs"]]
[[[parent-page-url1|第一个父页面标题]]] » 子页面标题
[[[parent-page-url2|第二个父页面标题]]] » 子页面标题
[[/div]]
‼️ 如果你在创建一个需要使用 ListPages 的文章,别担心——你依然可以如常设置段落页的父页面,但是你必须要以通常的方式设置。在这种情况下,功能比形式重要得多。

第三步与第四步实装时的示例。
现在……如果你在 Flop 风格:暗色里所想要的只有基础美学设计的话,那你就可以随意收下代码然后溜之大吉了!但如果你想继续往下翻动的话,我就能给你看看,这兔洞到底有多深。
Flop 风格:暗色在设计的时候考虑到了以下组件……
1. 预加载组件
该版式预先打包了以下六个组件:
1.1. ACS 动画 作者:EstrellaYoshte
1.2. 更好的脚注 作者:EstrellaYoshte
1.3. Croq 风格 CSS 作者:Croquembouche
1.4. 渐显(设置了 speed=1)作者:Croquembouche
1.5. 短信样式 作者:JaonHax
1.6. 切换侧边栏 作者:EstrellaYoshte
2. 自定义变量
(仅在知道你自己在做什么的时候修改这些变量)
所有的变量修改都必须被包裹在 CSS 模块,[[module CSS]] 内。所有列于下方的变量亦必须被包裹在 :root 选择器内。
2.1. 颜色 你可以根据需要改变各种版式颜色。只要复制以下任何一条变量(但也只需复制你需要的变量)然后按照需求编辑该变量:
[[module CSS]]
:root{
/* -- 颜色 -- */
--accentColor: 强调色;
--accentColorLite: 较亮强调色;
--hue: 色度;
/* 默认值(请勿复制):
* accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
* hue: 325deg.
**/
accentColor(强调色)是最广泛被使用的页面变量。对比起所有的其它变量,修改 accentColor 通常是该版式的用户最倾向于做出的唯一改动。
如果你修改了 accentColor,那么你也必须修改另外两条变量:
2.1. (A) accentColorLite: 这一变量必须比你的 accentColor 有着更高的亮度以及更低的透明度值。我推荐亮度值比你所选择的 accentColor 高出至少 10%,然后透明度值调为 0.5。
2.1. (B) hue: 这一变量必须合乎你所选择的 accentColor 的色度值。
若需选择你的颜色,我推荐使用 HSL 颜色选择器。HSL 是一种人类友好型颜色系统,三个字母分别代表色度Hue、饱和度Saturation、亮度Lightness。这一系统可以被扩展成 HSLA,包含了 Alpha 值(透明度)。
若需确认你所选择的 accentColor 是否符合网络内容可及性参考标准(Web Content Accessibility Guidelines,WCAG),那么就看看它的对比度比率。在 “Background”(背景)栏中填入
hsl(222, 12%, 21%),并在 “Text color”(文本颜色)栏中填入你所选择的 accentColor。WCAG 需求标题文本的对比度比率大于等于 3。
2.2. 标志与字体 你可以修改标志、字体等:
/* -- 标志 -- */
--lgurl: url(此处填写链接);
/* -- 字体 -- */
--header-font: "你的字体", sans-serif;
--body-font: "你的字体", sans-serif;
/* 默认值(请勿复制):
* header-font: Montserrat, sans-serif
* body-font: Inter, sans-serif
**/
2.3. 页眉标题 你亦可以修改标题、副标题、标题颜色以及副标题颜色:
/* -- 标题 -- */
--header-title: "标题";
--header-subtitle: "副标题";
--titleColor: 标题颜色;
--subtitleColor: 副标题颜色;
/* 默认值(请勿复制):
* titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/
}
[[/module]]
3. Flops 版头
Flop 风格:暗色提供了一个暗色模式友好版本的 Flops 版头:
[[include :scp-wiki-cn:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

Flops 版头实装时的示例。
4. 侧框栏
侧框栏Sideboxes构建为以下两种形式的组件:
- A 型 authorbox 与 sidebox
- B 型 sidecontainer
用法根据类型的不同而有所区别。
- authorbox 与 sidebox 不会在 width=1280px 及以下的屏幕上显示,包括了移动端的屏幕。这两个侧框栏可以设定为显示页面与作者信息。
- sidecontainer 会在 width=1280px 及以下的屏幕上收合到页面边缘处。在这些屏幕上,你可以通过用手指点击它或将光标悬停到其上来查看其内容。它可以被设定为显示额外的叙事性信息。
在设定这些内容前先考虑这种情况——一大部分的 SCP 维基用户都是通过移动端设备浏览的。
A 型 Authorbox 与 Sidebox
(见左上角与右上角)
调整自 EstrellaYoshte 所作的半影版式
默认情况下,authorbox 是强制使用的。它会在所有引用了 Flop 风格:暗色的页面上预加载。如果你想移除这一框体,请将这个:
[[include :scp-wiki-cn:theme:flopstyle-dark]]
替换成这个:
[[div style="display: none;"]]
[[include :scp-wiki-cn:theme:flopstyle-dark]]
[[/div]]
替代选项 1 在移除了 authorbox 之后,你可以将其替换成一个自定义的版本,可以显示任何你希望显示的信息。这一功能在合著、重写或翻译页面之中格外有用。为供参考,这里是创建 authorbox 的代码:
[[div class="anchor"]]设定 authorbox 的粘附位置。
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]
[[div class="flavorbox"]]创建 authorbox 的 flavorbox。
这里是所需的调味flavor文本。
[[/div]]
[[/div]]
[[/div]]设定限制锚点的结束位置。
默认情况下,authorbox 会使用 ListPages 来自动显示归属资料。理论上你可以复制 authorbox 内部的 ListPages 模块并将其黏贴至任何维基页面中,这些字段将以该页面独特的样式填充。当然了,你也可以随你所需修改这里任何的字段。
你也可以编辑你自己的 authorbox 来显示你页面专属的调味文本,比如给读者的一条提示。
记住 — flavorbox 的使用是可选的。但这是你在 authorbox 内应该使用的唯一一个 div 块。
替代选项 2 如果你想的话,你可以通过将 authorbox 替换成 sidebox 的方式将其移动到页面的右手边。若需创建 sidebox,复制以下代码并将其黏贴至你页面顶部的 CSS 模块之中:
[[div class="anchor"]]设定 sidebox 的粘附位置
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]]作者[[/span]] %%created_by_linked%% ||
||~ 发布于 %%created_at|%Y 年 %m 月 %d 日%% ||
[[/module]]
[[div class="flavorbox"]]创建 sidebox 的 flavorbox。
这里是所需的 调味flavor 文本。
[[/div]]
[[/div]]
[[/div]]设定限制锚点的结束位置。
如果你想要在你的页面内插入 sidecontainers,那么我强烈建议使用 authorbox 而不是 sidebox。原因是,当 sidebox 与 sidecontainer 并列出现时,它们会相互重叠起来,造成视觉上的混乱。这可能会给读者造成困惑,所以,最好还是稳妥一点。
你可以配置 sidebox 来传递与 authorbox 相同的信息。或者——就像我在此展示的例子一样——你可以加一句精炼的文章标语以及一个独特的标志。
与其它的表格类似,你也可以给它应用一个独特的底色——比如说现在的绿色,是用 table1 来实现的。请参考示例格式(通用)节段内的表格格式折叠以获取更多信息。
B 型 Sidecontainer
(见下文)
由 Woedenaz 提供
sidecontainer 是一个可选项。它可由此代码设置:
[[div class="limit"]]设定限制锚点的开始位置。
[[div class="anchor"]]设定 sidecontainer 的粘附位置。
[[div class="sidecontainer"]]
此处为所需的 sidecontainer 文本。
[[/div]]
[[/div]]
与 sidecontainer 有关联的文本。
[[/div]]设定限制锚点的结束位置。
我推荐在与 sidecontainer 有关联的文本后方插入一个常规的换行符。你可以通过用两组 @@ 将一个空格包起来(两边各一组)的形式来换行。sidecontainer 将在你滚过此文本的时候显示在其侧边。
有了技巧,就可以
术路一么内业需查放进称,感置示要相包看离消林,义回询走第标众林过。整电步毛使儿马头这用市级,化支状化露保段所质。指干它飞走机知方对圆活,院快可适如计其龙作,往参任丽度九刺须。到道或金京身然价有发飞,结拉际采色明专图老改,题养询没信七书两周。照地工传七之上来活查七,张电影华情组京与和交,两时五丽如十直持。收调位线市导第,活战拉或第厂,意更葡查关。
程所法油花后话报又,话本做石路热路,便否路品须前。
手圆包包率调那被,价见精养治清断,品辰较社了。科约引思约九如人些,根线却心价政人土以,号图九卖学际。
有多个 sidecontainer,
器识样儿任主选断此,分周据政头进油,完制增报分织。动方管再当看物同及,少影以转中年且太,油离更电万些秀。儿人越商会导中生张斗,花难按如金县规委展按,员员直丽别该承。果于除段受种同品导入任,龙公论据带严研属式,社府如展在英候效。为许便委基约青始上度安,节关有据每位养持年作,及声半门豆新质东。
如应回省眼看者八,效民立委快市较,每医壳芦呆。总养科自年将会点每局表,率八例流况传文需从,快济史杏精林秀。
方研压总料类,空外政想量几,式刷车。术委定生算把县全开教查据,龙去南调真须次维决门说,被值写参投枪院常。在效验克下次度,原放程工白两,办求我文。学新写认立三济才结表别,看了劳任马三空气近真,真小适西商及学育。
效果就是这样的。
军育自即事公提次做,边斗只主界已飞义,院较积次你水。济般革级位根进东争,住同务号如。解正位头因分斯圆面每员设,为场干种说展广公认据,身元水名其隶呜。转满际角同北水信素大深包验象准进验,量土金着生图正照辰强而豆写农。把六影五习许二十少如手结几二还达复,无市书段意规意E长往者呈材。
动程革活斯制选等每育总用指,地思东起技花争保万近。中好已中林百建这加联,标口几基计名根叫极,容观心束青造。往热才期节集形极示证习,必家查部图石头技连,总素及往如画值。
等头主严价科增西拉原,进然维器转参强场团,有家壳中凝时任。属五都价再选为级或,般切认同能候金,名且度起及。取来代科管流用好更品局车,识而调而基区民旱马。再群车精们半龙,具身众计形状,林址先小。见它先得必色建代养育十,器感维领隶府下杏。
记住——没有了 limit div 块,anchor 就会在你滚过其起始点之后始终停留在页面内。
修改标志透明度
#extra-div-1{
filter: opacity(百分数);
}
默认透明度 = 33%
巫师WITCH变体
为即将到来的“编织难可觉察之线Weaving Imperceptible Threads”设定所作

[[include :scp-wiki-cn:theme:flopstyle-dark witch=a]]
草原变体
为即将到来的“所选之路”设定所作

[[include :scp-wiki-cn:theme:flopstyle-dark prairie=a]]
怪物变体
为万圣节所作 🎃

[[include :scp-wiki-cn:theme:flopstyle-dark monster=a]]
乳石变体
为乳酸异常部门所作

[[include :scp-wiki-cn:theme:flopstyle-dark galaxias=a]]
尿影变体
搞笑变体

[[include :scp-wiki-cn:theme:flopstyle-dark peenumbra=a]]
1 级标题
2 级标题
3 级标题
4 级标题
5 级标题
6 级标题
粗体 | 斜体 | 下划线 | 删除线 | 打字机体 | 上标下标
键入 4 个连字符 ---- 以创建一条分割线。
假代码选择器 {
假代码属性: 假代码值;
}
- 有序列表
- 列表项目
- 列表项目
- 无序列表
- 列表项目
- 列表项目
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
插图方块
BS 插图方块
BS 插图方块
设置说明
步骤 1 将这个复制并黏贴到你的页面中:
[[include :snippets:bs-image
|heading=
|link=
|image=
|caption=
|width=
|float=
|alt=
|kind=
]]
步骤 2 参考这条短指导:
引用块开头 ↦
图片标题 ↦
图片链接 ↦
图片文件 ↦
图片描述 ↦
数量与单位 ↦
这个插图方块要放在哪一边 ↦
替代文本(参照下方的解释) ↦
插图方块颜色(全都试一试!) ↦ 推荐 primary // 留空 = 默认
引用块结尾 ↦
[[include :snippets:bs-image
|heading=标题
|link=链接.名
|image=文件名.png
|caption=描述性文本
|width=长度
|float=left/middle/right(左/中/右)
|alt=替代文本
|kind=primary/info/success/danger/warning/none(主要/信息/成功/危险/警告/无)
]]
步骤 3 在每一个 = 符号后面填入字段。
替代文本
由于无障碍的原因,我强烈建议在你的图片中使用替代文本。如果你需要详细了解替代文本及其与无障碍的关联,那么我推荐阅读这篇由 The Big Hack 所写的文章。
要点就是:当你设置一个图片的时候,会有几率有某些读者——不如那些有视力障碍的人或盲人——无法看到这个图片。那么替代文本所作的就是给上述图片提供一个屏幕阅读器可以轻易解析的简要描述。替代文本亦将会在图片文件/链接变得不可用时出现。
若需给一个图片设置替代文本,你所需要引用的就是 BS 插图方块内的 alt 字段,或是维基语法插入图片。.注意 标准插图方块并不支持替代文本。
演示:
[[include :snippets:bs-image
|heading=猫猫 Larry
|link=https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/Larry_the_cat.jpg
|image=https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/Larry_the_cat.jpg
|caption=他真软和。
|width=300px
|float=middle
|alt=Larry,一只米色的猫,警惕地坐在花园内的木制草坪躺椅旁。
|kind=primary
]]
注意 alt 字段。这就是屏幕阅读器将要给它的用户所传达的内容。
图片 div
抄袭自 Placeholder McD 与 HarryBlank 所作的空白风格 CSS

[[div class="imagediv"]]
[[=image 这里填链接]]
[[/div]]
标准表格

被 tableb div 断开的插图方块。
标题 | 标题 | 标题 | 标题 |
---|---|---|---|
单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 |
一个表格,有着非常酷的 hcell 样式 | |
---|---|
而它的单元格已被 | tableb div 所分割开! |
ACS 色表格
抄袭自 Placeholder McD 与 HarryBlank 所作的空白风格 CSS
这是一个绿色的表格; |
---|
这个测试很好玩。 |
[[div class="table1"]]
这是一个蓝色的表格; |
---|
这个测试一样很好玩。 |
[[div class="table2"]]
这是一个黄色的表格; |
---|
这个测试一样很好玩。 |
[[div class="table3"]]
这是一个橙色的表格; |
---|
这个测试一样很好玩。 |
[[div class="table4"]]
这是一个红色的表格; |
---|
这个测试没那么好玩。 |
[[div class="table5"]]
这是一个紫色的表格; |
---|
这就是测试。 |
[[div class="table6"]]
这是一个白色的表格; |
---|
这里没有测试。 |
[[div class="table0"]]
将编号表格 span 和粗体文本结合起来可以创造出彩色的粗体文本:
绿色
[[span class="table1"]] **绿色** [[/span]]
蓝色
[[span class="table2"]] **蓝色** [[/span]]
黄色
[[span class="table3"]] **黄色** [[/span]]
橙色
[[span class="table4"]] **橙色** [[/span]]
红色
[[span class="table5"]] **红色** [[/span]]
紫色
[[span class="table6"]] **紫色** [[/span]]
白色
[[span class="table0"]] **白色** [[/span]]
每一个 div 块示例都包含:
- div 外观。
- 用法格式。
- 有些可能还包括预期用法的概要。
💡 记住——每一个 div 都要用 [[/div]] 包裹。
你最诚挚的,
Jean Karlyle Aktus,USINBL Site-81 主管
[[div class="classification-header"]]
落款,
Odongo Tejani,伦理委员会主席
[[div class="ethics-header"]]
— Eli Forkley,误传部主管
[[div class="miscomm-header"]]
— Kazuo Natsumi,胆大包天集会复殴者
[[div class="oracle-header"]]
— ~ —
经监督者们的一致同意
[[div class="overwatch-header"]]
— Maria Jones, Director, RAISA
[[div class="raisa-header"]]
你现在正能察觉呼吸。
[[div class="warning-header"]]
记录标题
为以上采访/事故/探索记录所用
[[div class="log-header"]]
+++* 标题
----
文本
[[/div]]
引用块
[[div class="blockquote"]]
嵌套引用块
替代引用块 1 ——实线
[[div class="blockquote solid"]]
替代引用块 2 ——经典
[[div class="blockquote classic"]]
替代引用块 3 ——经典圆角
[[div class="blockquote classic curved"]]
替代引用块 4 ——轻量
[[div class="blockquote lightweight"]]
替代引用块 5 ——简明
[[div class="blockquote simple"]]
大号引用块
[[div class="blockquote simple larger"]]
“larger” 类同样可以被应用至暗色框、亮色框以及报告框 div,以及它们的变体中。
暗色框
[[div class="darkbox"]]
亮色框
[[div class="lightbox"]]
报告框
内部文档
[[div class="report-box"]]
+++* 标题
----
文本
[[/div]]
报告框变体
红
[[div class="report-box red-tint"]]
橙
[[div class="report-box orange-tint"]]
黄
[[div class="report-box yellow-tint"]]
绿
[[div class="report-box green-tint"]]
青
[[div class="report-box cyan-tint"]]
蓝
[[div class="report-box blue-tint"]]
紫
[[div class="report-box magenta-tint"]]
灰
[[div class="report-box grey-tint"]]
监督者框
[[div class="overwatch-box"]]
页面源代码
[[div class="page-source"]]
旁白块
结响人他技意建,拉整管开还则类,特秧传门。正期对照他连叫应族队北物,论数快状真北花断它养写想,思农蠢护思确叫帐住。也出去面少多风真快并,便的路话体结话门样层,物算身但色容分。小正矿支自规些济时解,历己保究美做半物按,今单否邮由着僚严。
生得达完除度化养,机意们便件务,运教露覆领何。深流取华现种代层何容就,率为特又组及求就状候,须空辰体带相再则处。化具总但至头准情义报层,品动厂克务持取光用题,后光建先串万资律属。系体权还派还行事手,群名油太府行带手,断世更素六护例。或却形劳主条向切,正存义老深条石,研材杆我投记。
[[div class="narration justified indented"]]
日记块
[[div class="journal"]]
高亮文本。
[[span class="highlighter"]]
注意: 这一 div 限制了双换行符的创建。若需换行,请如下所做:
1. 在每一行末尾的文本处按下回车键。
2. 在那新的一行中,用两对 @@ 包围一个空格(两侧各一对)。
3. 再次按下回车键并继续写作。

叙事危害警告
你所希望访问的文件,“SCP-████”,描述了一个无法预测的与多个次叙事层交叉的叙事性异常。由于此档案包含了数个嵌入式叙事危害,因此必须拥有叙事性接种。未拥有反此异常接种的人员可能会遭遇到一次叙事性改写事件。
你确定要继续访问吗?
[[div class="hazard-box hazard-box-#"]]1
[[div class="hazard-box-image"]]
[[div class="hazard-box-image-#"]]2
[[image 图片链接.png]]3
[[/div]]
[[/div]]
[[div class="hazard-box-text"]]
+++* 标题
在这随便放什么都行。
[[/div]]
[[/div]]
- 对于 hazard-box-# 来说,数字 1-5 已与异常分类系统的颜色配对,并加上了紫色(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-# 来说,选择与前一节相同的数字。
- 在此,将占位的链接换成由 EstrellaYoshte 所创作的在其艺作页中精选出的危害符号。我已经在这里列出了五个危害符号的链接。那就是说,我强烈鼓励你去参观一下他的艺作页并给他一个好评,因为他的图片在美化此版式一方面发挥了无与伦比的作用!
* 认知危害警告
* 信息危害警告
* 促动危害警告
* 叙事危害警告
* [https://hoah-lab.wdfiles.com/local--files/theme:flopstyle-dark/vpwoqdr.png 符号危害警告]
每一个特殊格式示例都包含:
- 格式外观。
- 用法格式。
- 有些可能还包括预期用法的概要。
💡 记住——每一个 div 都要用 [[/div]] 包裹,而每一个 span 都要用 [[/span]] 包裹。
居中文本
平证又级感当那气,便地百达标再,得书该工口坝。当速北间见好象起半统现单,体认铁厂了说题青作土,日细许解后克就罐呈。很例领的心当严农角建立组起,约类适可标给材杨易。向有通六想声受真权分同性,集响把明候受半完金向现,将规辰伸火奔且格伴。你年劳活算资术不维已以,主片标构种知学决,矿团具松么太军三。低论式中成越越,热制其到军铁,称露历打。长石听华治土年于史,群员按海切起理劳,候内居男战支作。
[[div class="centered"]]
对齐文本
只般则道级斗教须主时动,他据头分却住酸指响际所,院政蠢器扮抗码三。情量己火切大,使区下场支但,从须她。由细好清心听油无关积除飞济常压,律六由京选六两L调导露合坊。选变量万开己入选,是型些状月正但,写口目志目。线要图大治看式片,体集过原花角,命对否呀坝。如飞难及变花实好治铁,定回得社音情么的,照飞丽具杨受全气。新识法按领口,易交是路,反安励。接社之展八记别步,多人风油还权个,情眼定人积非,承找见再较。
[[div class="justified"]]
缩进文本
长石听华治土年于史,群员按海切起理劳,候内居男战支作。派民系导感都文因计,子委运展此将将所,个再改级油型。选育长来建世得还千,有增回整二行的研,始术皂想。史它为机厂号定,通不人史至会,计计隶住连样。五单安百利引导感可劳,近感变风院育单建,业命求葬处过往类。美文工少斯规该为对采决快时,对使次基管束芽下京孟。多也劳百十西取,能主劳格目引,常苗足期。
[[div class="indented"]]
结束标记
“结束标记(end mark):一种印刷元素,标志一篇文章的结束。通常其仅为黑圆点,但也可以是较复杂的符号。”
[[div class="end-mark"]] 在其 div 内最后一个自然段的末尾放置一个结束标记(比如下一段的末尾!)。将其与任何额外特殊文本格式结合使用。这一版式使用的默认结束标记符号是以 ‘X’ 分割的白色菱形。
结束标记是一个经典的印刷俗例。在 SCP 维基中,结束标记可能会最适合在故事写作中使用。
红色文档修订文本
接种已散布。
[[span class="rev-red"]] 文本 [[/span]]
黄色文档修订文本
载入已暂停。刷新?
[[span class="rev-yellow"]] 文本 [[/span]]
绿色文档修订文本
已过期信息将以绿色标示。
[[span class="rev-green"]] 文本 [[/span]]
蓝色文档修订文本
接种已完成!
[[span class="rev-blue"]] 文本 [[/span]]
计算机终端文本
[编辑]
[删除]
[数据丢失]
[[span class="terminal-span"]] [文本] [[/span]]
粗体文本
示例
[[span class="bt"]] 文本 [[/span]]
或者,你仍然可以通过使用 Wikidot 语法创建粗体文本。不过这个 span 对于以下两个特殊格式来说是必要的。
粗体文本 + 大分隔条
示例
[[span class="bt bb"]] 文本 [[/span]]
粗体文本 + 分隔条标题
示例
+++* [[span class="bt bh"]] 文本 [[/span]]
粗体文本 + 文本颜色
示例
[[span class="tb"]] 文本 [[/span]]
粗体文本 + 文本颜色 + 大分隔条
示例
[[span class="tb bb"]] 文本 [[/span]]
闪烁文本光标
[[div id="append-blink-bar"]] 在其 div 内最后一个自然段的末尾放置一个闪烁的“全方块”字符。这模拟了老式的闪烁光标,即可以在命令提示符末尾看到的那个。
花哨分割线
[[div class="fancyhr"]]
----
[[/div]]
花哨边框
[[div class="fancyborder"]]
特殊标题区域 1
标题
子标题
[[div class="lite-heading"]]
----
++* 标题
+++* 子标题
----
[[/div]]
特殊标题区域 2
附加材料
[[div class="lite-heading"]]
----
++* 附加材料
----
[[/div]]
替代图片展示框

[[div class="image-showcase"]]
[[=image 这里是链接]]
[[/div]]
情节间断

[[=image 这里是链接 class="scene-break"]]
scene-break(情节间断)是一个装饰性的符号,“为读者标记了停顿与叙事的过渡。”
情节间断是一种经典的印刷俗例。这里有一个来自《爱丽丝梦游仙境》的示例。.译注:图源维基百科,需自备梯子。转载图片见此。在 SCP 维基上,scene-break 可能会最适合在故事写作中使用。
情节间断 + 着色标志

[[=image 这里是链接 class="scene-break icon-tint"]]
icon-tint(标志着色)应仅与黑色标志一同使用。可以在 [[module CSS]] 内修改 --hue(色调)变量以控制标志的颜色:
--hue: #deg;
将 # 替换为你期望的正整数。默认为 325deg。
ListPages 导航——首个页面
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 下一迭代 ▷]
[[/div]]
[[/div]]
ListPages 导航——后续页面
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="whiteout"]]
若需控制渐变长度,只要根据需要在 div 内插入多组 @@ 即可。
页脚
[[div class="footing"]]
推荐文章框
[[div class="related-flex"]]
[[div class="related"]]
* **[[[页面链接|自定义文本]]]**
[[/div]]
[[/div]]
故事系列导航
[[div class="series-nav"]]
« 前一页面 | [[size 120%]]当前页面[[/size]] | 后一页面 »
[[/div]]
Earthworm 故事系列导航
作者:Croquembouche

查阅组件页以获取设置说明。
/* FONTS */ @import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap); @import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap); @import url(https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;700;900&display=swap'); /* YUI TAB BASE */ @import url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/tabview.css); @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
/* Flopstyle: DARK * [2022 Wikidot Theme] * Created by Lt Flops * Forked From: * Flopstyle CSS by Lt Flops * PLACESTYLE CSS by Placeholder McD * Based On: * Ad Astra Theme by NatVoltaic, stormbreath * AZASTYLE CSS by Azamo * BASALT Theme by Azamo, Placeholder McD * BLANKSTYLE CSS by Placeholder McD, HarryBlank * Night Rush Theme by Nagiros * Paperstack Theme by EstrellaYoshte * Penumbra Theme by EstrellaYoshte **/ /* -------- HEADER AREA -------- */ /* ---- COMMON ---- */ :root { /* -- CHANGEABLE COLORS -- */ --accentColor: hsl(325, 80%, 60%); --accentColorLite: hsla(325, 80%, 70%, .5); --hue: 325deg; --tint: calc(var(--hue) - 40deg); --titleColor: var(--accentColor); --subtitleColor: var(--accentColor); /* -- STATIC COLORS -- */ --textColor: hsl(212, 3%, 85%); --textColorAlt: hsl(212, 3%, 79%); --bgColor: hsl(222, 12%, 21%); background: var(--bgColor); --fgColor: hsl(222, 16%, 15%); --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%); /* -- 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; --mono-font: "Fira Code", 幼圆, "Noto Serif SC", Cousine, monospace; /* -- MISCELLANEOUS -- * Courtesy Of EstrellaYoshte */ --side-bar-width: 17em; --content-wrap-width: 1080px; } body { /* -- ACS COLORS -- * Courtesy of Nagiros **/ --one-color: 40, 159, 107; /* Green */ --two-color: 117, 167, 242; /* Blue */ --three-color: 255, 226, 82; /* Yellow */ --four-color: 255, 141, 54; /* Orange */ --five-color: 255, 34, 67; /* Red */ --six-color: 161, 73, 248; /* Violet */ --white-bar: 205, 206, 208; /* White */ --lg-bar: 118, 118, 130; --gray-bg: 66, 66, 72; color: var(--textColor); background-image: linear-gradient(var(--fgColor) 0 90px, var(--bgColor) 200px 100%); background-repeat: no-repeat; font-family: var(--body-font); font-size: 15px; text-rendering: optimizeLegibility; overflow-wrap: break-word; } #content-wrap { max-width: var(--content-wrap-width); margin: 2.5em auto 0; } #side-bar { width: var(--side-bar-width); } #main-content { top: -.8em; } @media (max-width: 767px) { #main-content { margin: 0 5%; } } @media (min-width: 768px) { #page-content { font-size: calc(15px * 1.05); } } /* ---- SCROLLBAR + SELECTION ---- */ html { scroll-behavior: smooth; scrollbar-color: var(--accentColor) var(--fgColor); } /* Cross-Browser Supports */ ::-webkit-scrollbar { width: 1rem; } ::-webkit-scrollbar-thumb { background: var(--accentColor); } ::-webkit-scrollbar-track { background: var(--fgColor); } ::selection { color: var(--keyColor); background: var(--accentColor); } /* ---- 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基金会"); color: var(--titleColor); font-size: 1.1em; } #header h2::before { content: var(--header-subtitle, "控制 - 收容 - 保护"); 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: 1em; right: 0; } @media (max-width: 767px) { #search-top-box { top: 1.85em; } } #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:hover, #search-top-box-input:focus, #search-top-box-form input[type=submit], #search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus { border-radius: 0; box-shadow: none; font-family: var(--body-font); font-size: calc(15px * 1.05); } #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 ul { border-color: var(--accentColor); } #top-bar ul li ul a { color: var(--textColor); } #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 { border-color: var(--accentColor); font: unset; } @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 { 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: thin solid var(--accentColor); } /* ---- 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.35rem var(--header-font); letter-spacing: 1px; white-space: nowrap; word-break: break-all; } @media (max-width: 767px) { .collapsible-block-link { font-size: .8rem; } } /* 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); } /* Side-bar Collapsible */ #side-bar .collapsible-block-link { font-size: unset; } #side-bar .collapsible-block-unfolded-link { border-bottom: 0; } #side-bar .collapsible-block-unfolded-link .collapsible-block-link { color: var(--accentColor); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: var(--alphaColor); } /* 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%; } .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: 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: var(--fgColor) !important; border: 0; text-transform: capitalize; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel { background: var(--fgColor); 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: .53rem 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; } /* ---- 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: 50%; margin: auto; line-height: 0; } .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: "分钟 - 预计阅读时间" } /* ---- 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; } ol li::marker { font-weight: bold; } #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:visited { 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:visited: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 { padding: 0 .13rem; 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(--accentColor); box-shadow: none; box-sizing: border-box; } .scp-image-block .scp-image-caption { color: var(--textColorAlt); background: var(--fgColor); border-color: var(--accentColor); 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; } } /* -- BS IMAGE -- * 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(--accentColor) !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; } /* ---- 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: medium solid hsl(360, 26%, 26%); outline: 7px solid hsl(360, 0%, 76%); } .classification-header>p:nth-child(1)::before { content: "基金会分级委员会备忘"; 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: "伦理委员会正式备忘录"; 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: "来自基金会误传部门的通知"; 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: "来自神谕之桌"; 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: "依据监督者议会的命令"; 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: "来自基金会记录与信息安保管理部门的通知"; 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: "⚠ 警告 ⚠"; 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, .overwatch-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; } div.blockquote.simple{ margin: 1rem 0; padding: 0 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 -- */ padding: .02rem 1rem; color: var(--textColorAlt); background-color: var(--fgColor); border: 0; border-left: 7px dashed var(--accentColor); box-shadow: 5px 5px var(--bgColor); } div.blockquote.solid { /* -- Alternative Quote 1 | Solid -- */ border-left-style: solid; } 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 -- */ 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: medium 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 Document Box -- */ margin: 1rem 6rem; padding: .02rem 1rem; background: hsl(207, 24%, 25%); border: medium 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 strong { color: var(--textColorAlt); } .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) -- */ /* -- Modified to 2rem to adapt Chinese texts -- */ 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 { margin-left: .2rem; content: "❖"; font-size: 1.25rem; line-height: 1; } .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 var(--accentColor); } .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: 6rem; 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: .85rem; } } .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 Footing -- */ margin: 1rem 0; } .footing::before { position: absolute; right: 0; bottom: .13rem; left: 0; content: ""; border-bottom: 2px solid var(--accentColor); } .footing:after { display: block; top: .07rem; content: ""; border-bottom: thin solid var(--accentColorLite); } @media (max-width: 767px) { .footing::before, .footing:after { margin: 0 -5.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: "亦请参见:"; 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 **/ #page-content .earthworm .first, #page-content .earthworm .first:not(.true) img, #page-content .earthworm .hub, #page-content .earthworm .last, #page-content .earthworm .last:not(.true) img { background: var(--fgColor); border-color: var(--accentColor); } .earthworm .hub { font-size: 1.05rem; } #page-content .earthworm a { border-bottom: 0; } #page-content .earthworm a[href="/"] { color: var(--textColorAlt); filter: unset; } .earthworm p { cursor: text; } .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); } /* ---- 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 ---- */ 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 { padding: unset; background: unset; font-size: 110%; } .terminal, .terminal>.code { background: var(--c-bg) !important; border: thick solid var(--c-comment) !important; } /* 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; } .lightbox .fnnum::after { color: var(--keyColor); } .fnnum:hover::after { padding: 0 .13rem; } .fncon { color: var(--textColorAlt); background: var(--fgColor); border-color: var(--accentColor); } .fncon::before { color: var(--keyColor); } .fnnum:hover+.fncon { right: calc(-8vw - 4rem); } .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; } .alignL .itemInfoHeading { margin-right: .63rem; } .infofield_1, .infofield_2 { font-size: 0; } .infofield_1::before { content: "项目编号"; font-size: 1.25rem; } .infofield_2::before { content: "项目等级"; 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; font-weight: bold; } .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); 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); }
/* BACKEND */ @import url(https://scp-wiki.wikidot.com/local--files/theme:flopstyle-dark/backend.css);
请按如下方式引用此页:
“Flop 风格:暗色”,作者 Lt Flops,来自 SCP 维基。原文链接:https://www.scpwiki.com/theme:flopstyle-dark。译者 hoah2333,来自 SCP-CN 维基。译文链接:http://scp-wiki-cn.wikidot.com/theme:flopstyle-dark。遵循 CC-BY-SA 协议。
更多详情请参阅授权指南。
授权信息
文件名:alt_loader.gif
图像名:Loading-3-box
图像作者:FNDE
授权协议:CC0 1.0 通用(CC0 1.0)公共领域贡献
来源链接:维基共享
文件名:alt_logo_bw.png、alt_logo_trans.png、alt_logo_tyrian.png
图像作者:JackalRelated
授权协议:署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)
来源链接:自作
文件名:Larry_the_cat.jpg
图像名:Larry the cat sitting besides a wooden lawn chair in Auderghem, Belgium (DSCF2368)
图像作者:Benoît Brummer
授权协议:署名 4.0 国际(CC BY 4.0)
来源链接:维基共享
文件名:spc_logo.png
图像作者:GreenGolem 与
JackalRelated
授权协议:署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)
来源链接:SPC 黑色标记笔 - SCP 基金会
备注:由 Lt Flops 编辑。反相并修改了透明度。
文件名:water_ripples.webp
图像名:Water ripples texture 3 of 3
图像作者:Juan Tello
授权协议:署名 2.0 通用(CC BY 2.0)
来源链接:Flickr
备注:由 Lt Flops 编辑。应用了混合模式“差分”、“遮罩”。添加了低透明度蓝色填充。
文件名:wl_border.png、wl_hr.png
图像作者:Woedenaz
授权协议:署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)
来源链接:被放逐者之护封版式 - 被放逐者之图书馆
文件名:pumpkin.png
图像名:Twemoji13 1f383
图像作者:Twitter
授权协议:署名 4.0 国际(CC BY 4.0)
来源链接:维基共享
EstrellaYoshte 的标志被在这一版式中广泛运用:
文件名:witch.png、QQcBcvK.png、wkUri0y.png、CQCcN7e.png、Q2TCZnd.png、4uLBoQ3.png
图像作者:EstrellaYoshte
授权协议:署名-相同方式共享 3.0 未本地化版本(CC BY-SA 3.0)
来源链接:初级设计师 S. Yvonne 的办公桌
更多维基文档信息,请见版权信息总览。
What this is
A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, use on a bunch of pages because I think it makes them easier to deal with.
The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.
I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.
This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.
Usage
On any wiki:
[[include :scp-wiki:component:croqstyle]]
This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.
Related components
Other personal styling components (which change just a couple things):
Personal styling themes (which are visual overhauls):
CSS changes
Reasonably-sized footnotes
Stops footnotes from being a million miles wide, so that you can actually read them.
.hovertip { max-width: 400px; }
Monospace edit/code
Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap'); :root { --mono-font: "Fira Code", Cousine, monospace; } #edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); } .code pre * { white-space: pre; } .code *, .pre * { font-feature-settings: unset; }
Teletype backgrounds
Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.
tt { background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4); font-size: 85%; padding: 0.2em 0.4em; margin: 0; border-radius: 6px; }
No more bigfaces
Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.
.avatar-hover { display: none !important; }
Breaky breaky
Any text inside a div with class nobreak has line-wrapping happen between every letter.
.nobreak { word-break: break-all; }
Code colours
Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.
Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.
Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link
:root { --c-bg: #393939; --c-syntax: #e0e0e0; --c-comment: #999999; --c-error: #f2777a; --c-value: #f99157; --c-symbol: #ffcc66; --c-string: #99cc99; --c-operator: #66cccc; --c-builtin: #70a7df; --c-keyword: #cc99cc; } .terminal, .terminal > .code { color: var(--c-syntax); background: var(--c-bg); border: 0.4rem solid var(--c-comment); border-radius: 1rem; }
Debug mode
Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.
You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.
…like this!
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after { outline: 1px solid var(--debug-colour, red); position: relative; } .debug-info { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Fira Code', monospace; font-size: 1rem; white-space: nowrap; } .debug-info.over { top: -2.5rem; } .debug-info.under { bottom: -2.5rem; } .debug-info p { margin: 0; }