By: (user deleted)
Published on 01 Sep 2021 08:21
rating: +115+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; }


Item No: SCP-6186

Containment Class: Euclid


SCP-6186 in containment.

Special Containment Procedures: SCP-6186 is held in an airtight chamber constructed from glass to enable observation of the anomaly. This chamber is to be checked daily for any damage and repaired without delay if any are found. Currently, tests involving the anomaly have not yet been conducted.

Description: SCP-6186 is an amorphous cloud of smoke. This cloud does not disperse and appears to freely transform. Following observation and its discovery, the entity is believed to be sentient and possibly sapient. However, the extent of its intelligence is currently undetermined as testing has not yet been initiated.

Logs of its behaviour following containment have been attached below:


SCP-6186 was caught and transferred to its containment chamber. The entity immediately moved towards the wall where researchers were observing the entity. After twelve seconds the cloud manifested an appendage, vaguely resembling an arm, and started knocking on the glass pane for two minutes before ceasing activity. SCP-6186 drifted to the centre of its chamber and stayed stationary. Several minutes later, SCP-6186 manifested a second appendage and began moving towards each wall and slowly drifted across them as if it were feeling the confines of the chamber.


For the majority of the day SCP-6186 appeared to traverse the walls of its chamber. No other notable behaviour was recorded.


SCP-6186 began growing outwards. It had expanded to fill the entirety of its chamber and increased the smoke's concentration in several areas. When the chamber's exterior was examined, these areas were discovered to have faults capable of affecting the chamber's integrity and possibly enabling a containment breach. Containment specialists are unsure if they were caused by the entity. SCP-6186's containment procedures have been updated to include a daily investigation of the chamber's exterior.


SCP-6186 was stationary in its chamber. Researchers believed they saw vague symbols forming through the smoke. Later on, the entity once again pressed against the glass and began creating indiscernible symbols and shapes. However, the entity stopped after several attempts and stayed motionless against a corner of its chamber.


SCP-6186 seemed to be unusually frantic. It was banging itself against the walls of its chamber. After an hour, it was motionless in a corner. Throughout the day, SCP-6186 began to level out and sink on the floor. It remained unmoving for the rest of the day.

Discovery: SCP-6186 came to the Foundation's attention on August 27, 2021. Firefighters had been dispatched to the scene following reports of a growing forest fire. While responding to the incident, they had allegedly witnessed an unnatural column of smoke. This cloud of smoke was said to have "flown against the wind" and taken unnatural shapes instead of rising or dispersing into the air. After being picked up by local Foundation agents, MTF Epsilon-6 ("Village Idiots") was deployed to track and contain the anomaly. The task force had found the cloud had entered the Waltzen residence and had supposedly begun "harassing" the family present at the time (Mrs Waltzen and their two children). The entity was captured using a modified industrial vacuum cleaner. After proper amnestication procedures were followed, SCP-6186 was brought to Site-19 and contained.

Later analysis of the fire indicated signs of arson. The remains of Jack Waltzen, the paternal figure of the Waltzen family, were discovered at the site with apparent signs of a bludgeoned skull. Further away from the scene a heavy-duty bicycle lock covered with traces of DNA matching Mr Waltzen's and an empty portable gasoline container were found hastily buried underneath some foliage. The perpetrator of this incident is currently unknown and a police investigation is still underway.

rating: +115+x
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License