By: vxeovvxeov
Published on 11 Mar 2020 05:50
评分: +4+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, 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.


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; }
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Nanum Gothic', san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    #top-bar .mobile-top-bar li {
        display: none;
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    #side-bar:target {
        left: 0;
    #side-bar:focus-within:not(:target) {
        left: 0;
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 19.75em;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    #side-bar:not(:target) .close-menu { display: none; }
    #top-bar .open-menu a:hover {
        text-decoration: none;
    @supports (-moz-appearance:none) {
    #top-bar .open-menu a {
        pointer-events: none;
    #side-bar:not(:target) .close-menu {
        display: block;
        pointer-events: none;
        user-select: none;
    /* This pseudo-element is meant to overlay the regular sidebar button
    so the fixed positioning (top, left, right and/or bottom) has to match */
    #side-bar .close-menu::before {
        content: "";
        position: fixed;
        z-index: 5;
        display: block;
        top: 0.5em;
        left: 0.5em;
        border: 0.2em solid transparent;
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 0.9em;
        pointer-events: all;
        cursor: pointer;
    #side-bar:focus-within {
        left: 0;
    #side-bar:focus-within .close-menu::before {
        pointer-events: none;



殴鲨员应将所有目击的红幽冥RED NETHER实体报告给CICAPOCO,随后将授权海洋战斗小组前往与异常战斗。红幽冥为EPSILON–绿级优先级实体,在求爱期间优先级将上升至OMEGA–绿级。

须不惜一切代价打败白幽冥WHITE NETHER鲨类威胁。

——Nathan Jones,CICAPOCO委员长

项目编号: SPC-507 STATUS: 活跃



1. 红幽冥

威胁描述: “红幽冥”指能影响临近的宇宙的鲨类威胁实体,它们准备为差错巨兽Mistaken Beast最终的降临做准备。在第七次异常斗争Seventh Deviant Crusade中,发现远古鲨鱼教手稿中记载了红幽冥,将其称为“天使”或“侍从”。红幽冥实体在发情期间极具危险性,能够引发雷电,甚至能在宇宙中制造出真空。

2. 白幽冥

鲨鱼威胁描述: “白幽冥”指一种巨型鲨类威胁实体,它们能够随意穿梭于宇宙之间。白幽冥通常被描述为具有“嗜食ontovoric”倾向,即会在捕猎时摄入极大量的物质。这种行为的目的未知,猜测是为生存需要、运动需要或是单纯地为了享乐。
鲨鱼教的圣书记载大多避免提及白幽冥,提及时改用“伟大半神The Great Daemon”来称呼。目前白幽冥的最终行动目标未知,因中心与白幽冥的一切通讯尝试均已被其吞噬。所有曾与白幽冥的交战的中心殴鲨员均于交战期间失踪。



部分名称 功能
分形适应/空间启发式设备Fractal Acclimation/Spatial Heuristic device(“FASH”) 一种长距离探测器,能够定位周边宇宙的异常鲨类威胁;与波塞冬实验室合作开发。
泰森本质殴打器Tyson Ontic Pugnātor 一种实验性异常科技,通过“拳击”维度的边界,从而在宇宙间打开一道传送门。由麦克·泰森博士,PhD研发。
“浩瀚深蓝”"CERULEAN EXPANSE" 与中心结盟的异常鲸类实体。每只鲸都受过专门的异常拳击训练。鲸类动物解放联盟(LCU)批准中心使用“浩瀚深蓝”作为它们的称呼。
海洋战斗小组(MFT)“卡律布狄斯” 一支特殊战斗单元,成员经生物化学和机械控制改造。为面对海洋战斗小组“斯库拉”蛙人与白幽冥之间不可避免的决战,因而设立此小组。MFT卡律布狄斯目前驻扎在迈锡尼王国的科多尼亚,代号为“盐水修道院”的水下网格球顶建筑内。



浩瀚深蓝(学名为Supramagnum musculus atlanto)是地球上最大的异常鲸类种群,个体能够借助身上的十二个冲压喷气式括约肌,进行在大气层内和在地球外的飞行。中心对浩瀚深蓝一名个体样本(“深邃之Gægr Kemdulnim”)进行了观测,测出其身长45米,重量超过18万千克。

Gægr已部署于一内部货运码头中,用于单独运送海洋战斗小组、补给品、一组鱼条级低温设备和为内部提供氧气的皮下植入物。Gægr身上装置了一组额外的推进设备,以超导矿石1能量提取器供能,能够使其飞行速度达到12马赫(14,800 km/h)。Gægr是鲸类拳击手中的佼佼者——曾参加第七次异常斗争——还修炼过Yzylvin Xa的武功秘籍。Gægr说英语、鲸语、鲨语和鲸类歌唱语言“Balooga”都很流利。






1. 对象SPC-507

2. 任期4月5日 - 8月2日,2018年

3. 队伍海洋战斗小组“卡律布狄斯”

4. 成员

  1. C-1 队长Quinn Griffith ——团队领导
  2. C-2 Jaedan Traviss ——潜行殴鲨员
  3. C-3 Leah Řezník ——超殴鲨员
  4. C-4 Haruki Nakahara ——技术专员
  5. C-0 深邃之Gægr Kemdulnim ——运输代理员

内容: 以下为SPC-507值得关注的部署清单。部署格式包括部分如:任务编号、宇宙编号、有关个体和提要。





到达后,“卡律布狄斯”进入了一地球大小的岩石行星的轨道,该行星约99%的表面被水覆盖。“卡律布狄斯”检测到实体位于8000千米外的星球同步轨道上。实体为一无沟双髻鲨(学名为Sphyrna mokarran),长度为4米。

CICAPOCO提示: 任务前分析中,技术人员发现鲨类实体会间歇发出若干低频无线电信号。解码翻译将在有需要时放出。


[记录开始于C-0 Gægr歌唱期间。]

C-0 Gægr: 宇宙尘埃被挡在我们身下,朋友们团结起来,让它们付出代价!

C-3 Leah:噢,Gægr,你的歌唱真是太好听了![陶醉]

C-1 Quinn:好的。队员们,Gægr30秒内就要张开口了,对吧,C-0?

C-0 Gægr:[欣喜地咆哮]

C-1 Quinn:到达之后,C-4你转移到侧翼,之后自由行动。C-2,你定点防守。C-3,掩护C-2。明白了吗?

C-3 Leah:遵命,队长!

C-4 Haruki:准备好了,长官。

C-2 Jaedan:[咕哝了一下]

[MFT“卡律布狄斯”离开C-0 Gægr,躲避开轨道上的碎石,前进了500米。C-4展开大范围扫描,在远处分析鲨类的情况。]

C-4 Haruki(通话):啊,这个异常王八蛋要准备防御我们了!我提议使用改良版殴鲨技术63号,第11升级版。你们懂我意思的。

C-2 Jaedan(通话):Leah,抓紧我的手,我要把你甩去前面了。你到那里的时候,就狠狠的给那个异常的嘴巴来一拳!

C-3 Leah(通话):你确定要这么做吗,Ruki?63号技术明确规定只能在极端情况或紧急混乱时使用,而且一下打不死它的话也没有太大作用。Ruki你是不是又迟看鲨鱼月刊了,Jae你说对不对?

[C-2 Jaedan笑]

C-4 Haruki(通话):这个时间不宜讨论,Leah。准备攻击!

[C-2 Jaedan抓住C-3 Leah的手,用他的火箭推进器加至高速,将她甩向鲨类实体。在接触之前,实体向右转向,让她正好错过了鲨类实体]


C-2 Jaedan(通话):真他妈丑陋,对不对!Leah,保持距离,我在准备用21号技术。

[Jaedan以115 km/h的速度冲向鲨类实体,猛击它的颈部]



C-1 Quinn:大伙们干得漂亮。然后,虽然这种事情违反规定……我们不如下去看看这个星球上有什么吧?下面说不定会有海牛呢?






“卡律布狄斯”被部署到一个有人形生物栖息的星球上,前进至一城市内,发现红幽冥实体正在袭击该城市。 将实体殴打至投降后,城市举行了一场庆祝活动。


[记录开始于一洞穴状的宴会厅,C-1 Quinn与推测是人形生物的领袖的冲突中。]

C-1 Quinn:所以你们以消灭蜜蜂为生?


C-1 Quinn:听好了,你要是再说废话,我就把你拉到拳台上打一架。关于蜜蜂的问题——我闻过你们这的空气!你们这城市至少十年没种过一朵花了!


[在房间的另一侧,C-4 Haruki正与多个人形生物交谈。个体们随着techno音乐翩翩起舞。Haruki从聚苯乙烯杯子种抿了一口深褐色饮料。]

C-4 Haruki:卧槽,你们告诉我这里面是什么。这杯东西好上天了!


C-4 Haruki:[眨眼]其实就是咖啡,不是吗?好吧。[又抿一口]你们这有什么蜂蜜吗?我比较喜欢甜口的东西。

第二个未知人形生物:[个体指着C-4 Haruki,尖叫着]她跟害虫有一腿!条纹黄色恶魔!赶快抓住这个巫婆!

[所有实体将饮料摔到地上,径直冲向战斗小组。人形生物领袖赤手空拳将Captain Quinn逼入角落。舞蹈音乐继续播放。]

C-1 Quinn:C-4,你妈的,干什么呢?[通话至“卡律布狄斯”其余队员]代号意外夜间恐怖奶昔!撤退!





提要: 于2018年8月2日上午7:51,队伍的FASH设备检测到宇宙前—Mih:“SCP基金会总部”的白幽冥实体。


«0:00:00» MFT“卡律布狄斯”在一颗与地球十分相似的星球上空400千米出现。白幽冥显现出噬人鲨(学名为Carcharodon carcharias)的形态,吞噬了经过的一个人造卫星。

«0:29:47» 进食后,白幽冥实体下降进入大气层。C-0 Gægr激活超导矿石引擎,从后方跟随该实体。

«01:51:55» 白幽冥实体飞至类似地球“欧纽约Olde New York3”的城市上空。

«01:57:08» 白幽冥实体注意到了自由女神像。值得注意:雕像表现出若干物理反常现象,“女神”身上长出了鸟喙、羽翼和鸟爪。录像放大后发现雕像下方的标语牌上写着“自由鸟神像STATUE OF LIBIRDY”。白幽冥实体开始进食雕像。

C-1 Quinn:[呼喊]狗屎异常,敢破坏自由鸟神像!操你妈的逼!


C-0 Gægr:今晚我与野兽共跳华尔兹!

C-1 Quinn:那才吗!好了,所有人出发!

«01:59:40» C-1、-2、-3和-4从Gægr张开的嘴中出现,在周围盘旋。

«02:00:23» Gægr一边旋转一边高速冲向白幽冥。实体转过身,从雕像上敲下一些碎片,砸到了下方的人形生物。实体尖叫,开始躲避攻击。

«02:01:16» Gægr踉跄地转过身,给白幽冥实体来了一记头槌。鲨鱼回头反击,用它那攻城锤似的尾巴,将Gægr撞入海中。

«02:01:58» 白幽冥俯冲下落。Gægr咬住了鲨鱼的尾部。之后,实体惊慌地从水中跳起,并不断抽打Gægr,但它始终没有松口。

«02:05:18» 白幽冥以200 km/h的速度带着Gægr冲入城市。鲨鱼与一摩天大楼的顶部擦肩而过,Gægr巨大的身躯撞毁了城市的建筑和纪念碑,但也没有放过鲨类实体。白幽冥向城市居民区中心教堂冲去。

«02:07:09» Gægr张开下颌,与白幽冥分离,双双以250 km/h的速度撞入教堂。教堂的巨钟往下坠落在白幽冥身上,使其无法动弹。

«02:09:36» 一怒之下,Gægr将自己的胸鳍转至白幽冥上,快速地攻击了15下。白幽冥趁机咬下了Gægr的左胸鳍,将其分成两半并吞入口中。惊慌中,Gægr把白幽冥推过教堂,击穿了另一边的墙壁,来到街道上。

«02:10:31» Gægr再一次咬住白幽冥的尾部,将其从尾骨上拔了下来。白幽冥实体颜色变为亮红色。

C-2 Jaedan:操,它要狂怒了!

C-4 Haruki:也不是很危险吧。

C-2 Jaedan:110%肯定这很危险。

C-4 Haruki:[拍一下自己的护具] 你不能——不是这个道理,你个智障!

C-1 Quinn:C-2、C-4,现在干这事了![向Gægr通话] Gægr,赶紧出来!

«02:12:44» 白幽冥夹住C-0的尾部。Gægr转过身,将自己的超导矿石引擎对准异常实体,激活的引擎摧毁了鲨鱼的背鳍。白幽冥开始失去控制地攻击,损坏了超导矿石引擎,使其无法运行。Gægr掉落至附近的一栋建筑中,失去意识。“卡律布狄斯”包围了Gægr和鲨鱼。

«02:13:49» 引擎不稳定地向鲨鱼喷射出过热的化学物质。实体将建筑砸为碎片,创造出路径逃跑了。所有五个视听设备同时停止运作。




除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License