By: ashausesallashausesall
Published on 26 Jun 2022 03:04
评分: +3+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;
@media (min-width: 768px) {
    #top-bar .mobile-top-bar {
        display: block;
    #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-6739

项目等级: 异常

特殊收容措施: 因SCP-6739之性质,目前无必要采取收容措施。基金会人员被允许照常访问及使用Site-400自助餐厅。鼓励任何掌握SCP-6739相关信息的人员对现任研究领导人(目前为Dr. Gerald Hogan)报告。



描述: SCP-6739是人类集体理念圈1中一处明显且不可见的特定空缺,其中心点和主要集中地是Site-400人员主餐厅的天花板墙角落。






对象: D-3324

不可知剂量: 3.5毫升

程序: D-3324被指示直接目视并观察墙角落。



对象: D-3324

不可知剂量: 5.2毫升

程序: D-3324被指示与墙角落本身和周围区域进行物理接触。

观察结果: SCP-6739周边区域为白色且粘手,有“毛茸感”。还报告有“知-”以及“不应该这么做”的理念存在。


对象: D-3324

不可知剂量: 7.8毫升

程序: D-3324被指示在墙角落前站立2小时。

观察结果: 起初,SCP-6739非蓄意地令Site-400内大部分、乃至全体基金会人员产生恐惧感。然而,大部分人员开始逐渐对SCP-6739产生喜爱和友好。

附录更新: Dr. Alan McKinley请求Dr. Hogan停止调查和测试SCP-6739,担心此异常可能具有信息危害和/或认知危害性质,且“也许我们根本不记得它才最好”,此请求被拒绝。



对象: D-3324

不可知剂量: 10.3毫升

程序: D-3324被指示尝试与墙角落进行交流。为其提供了标准采访单,D-同时允许3324提出自己的问题。

观察结果: SCP-6739被视为“可爱”,但这一事实不被某些某个基金会人员所接受。根据D-3324所言,没有得到回应,但其报告称在采访过程中没有感到失落或者愤怒,反而感觉愉快且好笑。


对象: D-3324

不可知剂量: 13.7毫升

程序: D-3324被指示用螺丝刀稍微破坏墙角落。

观察结果: SCP-6739非常小巧但有不止两个眼睛和附肢状的胳膊,似乎会以此产出某种白色且粘稠的物质(参见I/T-2)。不知为何有“破碎的挡风玻璃”及“极端罪恶感”的记忆存在。


对象: D-3324

不可知剂: N/A

程序: D-3324被指示在墙角落附近放置一个小型的Doe-Grey非现实稳定锚。

观察结果: 墙角落出现细小的随机蓝光线条。非现实稳定锚产出了一张非特定的反图片,描绘了如下物体:


事故记录: Dr. McKinley被安保人员发现试图利用未授权凭证进入SCP-████-EX3收容间。在审讯 Dr. McKinley对SCP-████-EX具体要做什么时,他再次就SCP-6739的危险及威胁提出担忧,要求立即停止测试。在被问及SCP-████-EX时,Dr. McKinley拒绝进行任何评论。

因此事件,Dr. Hogan最终决定无限期暂停对SCP-6739的调查,直至此情况得到妥善解决为止。Dr. McKinley现已被停职,直至找到合伦理的情报获取办法为止。

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