作者 hoah2333hoah2333
发布于 01 Sep 2022 06:21
评分: +1+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(';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: */
#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: -20em;
        width: 17.75em;
        height: 100%;
        margin: 0;
        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;


项目编号:項目編號:SCP-7272 1/7272
收容等级:收容等級:Keter 公开



图 1:SCP-7272 以及两只 SCP-7272-1 实例。

特殊收容措施:SCP-7272 不得被普通家猫感知到。所有感知到 SCP-7272 的家猫都必须被隔离,直至其肢体与眼睛数量回到基准现实值1,此后其可被释放。若一只被 SCP-7272 影响的猫被不当隔离且与其它受影响实例接触,则新制造的融合体将被标记为 SCP-7272-1-X,且将被永久收容。

描述:SCP-7272 为一个异常毛线球,最初于伊斯坦布尔的巴赫切利耶夫莱尔区发现。当普通家猫感知到 SCP-7272 时,其将显现出物理性畸形,严重程度随观测时间而增加。当被人类对象目视时,SCP-7272 将拥有一种显著的认知效应,每个对象都会将其感知为不同的颜色。

暴露于 SCP-7272 的家猫将遭遇肢体与器官的体外生长,此些肢体与器官由棉花、涤纶以及内部的肌肉组织组成。然而,并非所有的家猫都会经历此种效应;有主的家猫将完全不受影响,其甚至会拒绝感知项目的存在。野生的家猫会经历最为严重的 SCP-7272 效应,通常会在生长时增加十倍以上的重量。

当多只家猫同时观察到 SCP-7272 时,SCP-7272-1 的变形将在随后增大,造成前述的体外肢体、器官以及血肉成倍变大。当多只家猫以身体接触的形式受到 SCP-7272 的影响时,实例会开始通过以法式辫子的形式缠绕其额外肢体以将其融合起来。经观察,此过程对双方来说都是无痛的,且通常将导致形成单只混合型猫实体。

只要 SCP-7272-1 实例仍位于 SCP-7272 附近,新连体的猫都将保持自满状态;然而,若主异常被移走,实例将出现剧烈反应且将尝试解开自身。此过程通常将导致对 SCP-7272-1 实例造成巨大损伤——外部与内部损伤均会造成,且可导致致命伤害。在此过程中,SCP-7272-1 实体将尝试去碰触 SCP-7272,可本能地知道其位置。SCP-7272-1 实例将在此时对携带该异常的个体展现出十分强烈的敌意,且将展现出类似于蜂群思维的行为,其将包围并埋伏携带者,在携带者尝试进入任何可达孔洞前将其扑向地面。

在此之后,主 SCP-7272-1 实例的部分组织与纤维将脱落,且仍遗留在受害者的身体内,融入并整合到受害者的内部神经系统中。至此,此行为已导致总共有 23 个此种系统走失,逃离基金会的监禁,并成为伊斯坦布尔内的一个显要的犯罪组织;据信,直至写作时,SCP-7272-1 实例与全城 15% 的食物偷窃案有直接关联。

虽然首次观察到 SCP-7272-1 实例的行为在本质上是纯粹兽性的,但上述实例所犯的罪行越来越能够展示出与基准人类相当的谋划与智慧水平。尽管如此,对与 SCP-7272-1 有关的犯罪现场的法医调查确认,此些实例仍然会表现出与猫科动物的特征相似的习性,包括对毛发与胆汁的反刍、过度使用以磨锐指甲充当的爪子,以及使用大量人类唾液进行自我清洁。

SCP-7272-1 犯罪集团的行动背后动机似乎主要是给在伊斯坦布尔内的流浪猫群提供充足的食物;需要注意的是,SCP-7272-1 已在 SCP-7272 周边组建了一个保护警戒线,且会积极尝试阻止大多数家猫目视该异常。

注意:在事件 7272-1 后,所有的野生 SCP-7272-1 示例都被认为对人类生命有敌意,且需要带着偏见将其消除。

SCP-7272-1 实例被称为 “Dilara”——是已知的事件 7272 煽动者——需要被无效化或收容于高安保等级独立站点并在此审讯。所有由 Dilara 所创造的物品都具有高度致命的视觉认知危害,且需要在发现时摧毁。暴露于此些物品的人员需要进行外科手术,切除所有后续生长的部位,且在必要情况下,需要进行安乐死并焚毁因此生长出的毛线。对 Dilara 的收容与无效化应被考虑为最高基金会优先级,而对待被 Dilara 影响的个体则为第二优先级。

若 Dilara 无法被迅速处决,或前述被影响个体开始解体与/或死亡,则产生的实例需要被强制隔离以防止进一步扩散,增加 SCP-7272-1 的感染率,特别是正在追捕目标 Dilara 的基金会特工。

Daniel Asheworth 博士、Athenodora Cat 以及 Sheldon Katz 已被发现免疫于 Dilara 造物的信息危害属性,可理论上遏制其多态异常及其伪猫性质,且其已被招募以特作为追踪 Dilara 以及收容 SCP-7272 的顾问。

附录 7272.01:事件 7272-23

2006 年 07 月 03 日,一只温顺的 SCP-7272-1 实例2接近了 Site-133,反复请求着要面见 Asheworth 博士。SCP-7272-1 实例以可疑行为为由被拒绝进入,且事实上 Asheworth 博士并未被 Site-133 定期雇用,且已被站点安保拘留。

然而,为确保对异常 SCP-7272-1 实例进行合理研究。在做出首次请求的三小时后,Asheworth 博士通过基金会制传送门抵达了站点内;不久后,他开始与 SCP-7272-1 实体进行了长时间的交互,导致发现了个体事实上就是被辨识为 Dilara 的人。此次交谈同时也对整个 SCP-7272 案例产生了巨大的科学进步。

Dilara 的无效化指示已于 2006 年 07 月 06 日被撤除,以认可其在操纵视觉认知危害方面的能力,且是对其深层意图的误解;Dilara 未曾接受过认知危害操纵方面的正规指导或教育,根本就不知道如何减轻其造物的影响,令其有不那么严重的效应。

一份 Asheworth 博士第三次与 Dilara 谈话的书面转录稿已附于此附录中,以提供有关 SCP-7272 及其已制造的 SCP-7272-1 实例的意图与目标的必要背景信息。


Asheworth:你们更喜欢被称作 Dilara,对吧?

Dilara 发出一种人类喉音尖啸以及猫类的嘶嘶声,不过嘶嘶声有点被盖住了,发声持续 10 秒钟。


Dilara 把身体摆出了一个更为放松的姿势,开始发出嘶嘶声,偶然也会发出点呼噜声,持续 15 秒。


Dilara 扭了扭自己的头,然后从它的腕关节处射出一股清澈液体。它咳出了一个用毛线制成的毛球。

Asheworth:你们当然有权利让那些像你们一样的拥有一个家,以及一个更好的世界……但是你们只是几只操纵着人皮傀儡的猫而已。你们是理解为什么 O4 会犹豫要不要授权予我给你们让步的。

Dilara 发出嘶嘶声,并有节奏地尖叫着,同时在桌子上刻出一个认知危害符号。Asheworth 的异常医疗效应开始显现。




图 2:Sparky 二世。

在此次采访后,Dilara 被迁移到了一处高安保收容室内,其将被非有机人工智能征召体单独监控,并由自动无人机进行清理,以移除任何认知危害符号。为了安抚残暴的 SCP-7272-1 实例,并防止继续出现食物偷窃案,Asheworth 博士建议修改基金会现行的有关伊斯坦布尔内流浪猫的政策。包括有:

  • 定期向当地的动物收容所以及流浪动物运送食物;
  • 在伊斯坦布尔以及当地区域展开推广动物收养的基金会活动;
  • 向全球为动物权利与保护而奋斗的组织进行多次大额捐款;
  • 令包括 Asheworth 博士自身在内的基金会人员收养多只流浪猫,而 Asheworth 博士现正照料一只两岁大的黑猫,名字是“Sparky 二世”。

截至写作之时,Sparky 二世以及多只其它动物已在基金会被照料了四个月,由 SCP-7272-1 实例引起的犯罪相关活动也已显著减少。

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