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.
.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; }
WARNING: THIS DOCUMENT
SCP-MC-903
IS CLASSIFIED
项目编号：SCP-MC-903
项目等级：Esoteric
特殊收容措施
在本文档及其强关联项目以外，SCP-MC-903不应被提及。针对项目的实验应在相应VI级权限负责人正式许可下进行。收集到的项目与其所有复制品被保存于当前世界内Site-418-M哨站方块实体收容单元高危扇区。
描述
SCP-MC-903是一种方块实体/恒久物体，显示名称为一串乱码（使用任何方法命名时，可以查看其实际名称：§kRandom Block）。
对于项目的任何直接指代性命名都会导致该名称被覆盖为乱码，但抽象指代（如“项目”）和方块名称示意（如“Random Block”）则不在此列。
| 稀有度颜色 |
史诗 |
| 透明 |
否 |
| 亮度 |
0 |
| 爆炸抗性 |
3,600,000 |
| 开采工具 |
⛏镐 |
| 可再生 |
否 |
| 可堆叠 |
是（64） |
| 可燃尽 |
否（但点燃后有几率无尽燃烧） |
| 可被熔岩点燃 |
否 |
| 命名空间ID |
未知 |
获取
挖掘
项目只能用下界合金镐（或挖掘等级更高的工具）开采，使用其他方式破坏不会掉落任何东西。
| 方块 |
 Random Block |
| 硬度 |
50 |
| 工具 |
⛏镐 |
项目的挖掘时间与下界合金块相似，但其特性使得这一值并不稳定。
自然生成
生成世界时，约有1/4096的几率开始尝试生成项目。项目会在主世界坐标(x=0, y=-31, z=0)处尝试生成，若该位置为空气、水源以外的方块，则项目将尝试在y坐标更高处生成，直到y=0时停止尝试。若成功生成，项目周围会无视原有方块生成一个由6个强化深板岩方块和12个深板岩方块构成的结构。
由于强化深板岩方块的存在，该结构难以被破坏，因此在生存模式中获取项目非常困难。在此结构中生成的深板岩方块和强化深板岩方块破坏所需时间都是其他情况的两倍左右，强化深板岩被破坏时会掉落其自身，因此这也是生存模式中获取物品形式强化深板岩的唯一途径。
以下为周围生成结构的示意图：
人工生成
当世界内不存在项目及其附带生成结构时，项目及其附带生成结构可用指令/setrandom生成，生成规则与上述相同。当不存在符合条件的位置时，项目将不再生成。
箱子战利品
尽管项目不存在于任何结构的箱子战利品表中，其自身仍可能在受其影响的结构中找到。在箱子中找到项目的可能性随时间推移而增大，部分存放有项目的箱子会被末影箱替换，若出现此情况，该处箱子原本的内容物会在该末影箱被打开时进入玩家的物品栏。
当前的记录中，找到项目次数最多的结构是村庄铁匠铺。
用途
项目被用于制造随机事件。对项目效应的一切检测都表现出真随机性。这些随机变化出现在几乎所有存在规律的机制中：生物行为、掉落物、战斗、合成、烧炼、酿造等。具体来讲，事件会以区块为单位受到项目影响，此类影响被初步分为0～5共6个等级。项目本身所在的区块（若项目处于区块边缘，则包括与之相邻的区块）受影响等级为6，向外的相邻区块逐级递减。
状态效果
项目倾向于为靠近的实体赋予影响概率事件的状态效果，如“幸运”和“不幸”，即使所处的世界存档版本不含有这些效果。项目也会产生原版游戏中不存在的状态效果，详细列表难以统计，以下列出部分常见的状态效果与其影响，以供参考。
