By: notgullnotgull
Published on 27 May 2018 22:53
rating: +165+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;

rating: +165+x

Item #: SCP-3362

Object Class: Audiovisual

Containment Class: Euclid

Special Containment Procedures: CONTAINMENT PROCEDURES INACTIVE AS OF 07/25/2018

Outside of regular testing, SCP-3362 is to be contained in a standard item locker. Biological and memetic countermeasures are to be put into place to restrict access to Level 3 supervisors or approved handlers.

Once a week, a member of D-class personnel is to be selected to view SCP-3362. The selection process is to include a background check to ensure that the subject has no ties to any Groups of Interest, organized crime rings, or any other group where they could hold a position of authority. Viewing of SCP-3362 is to be presented to subjects under the guise of testing; in order to facilitate this facade, subjects are to be shown a non-anomalous copy of It’s a Wonderful Life and instructed to note any differences between it and SCP-3362.

Observation of this testing is to take place in monitoring rooms placed appropriately so that observing personnel cannot make visual contact of any kind with the screen displaying SCP-3362. As a precaution, only research assistants fulfilling the following conditions are allowed to supervise testing:

  • Has a clearance level of Level 1 or less.
  • Has a salary of less than 65,000 yearly.
  • Is subordinate to Researcher Evereds, who is understood to be directly subordinate to SCP-3362-1.

A redundant chain of command is to be maintained to reduce the impact of Eta Incidents. The HMCL Supervisor of SCP-3362, currently Dr. Jack Simpson, is considered the superior of SCP-3362-1. A redundant “HMCL Director” is considered the superior of Dr. Simpson, a “Materials Director” is considered the superior of the HMCL Director, and Project Head/3362 is considered the superior of the Materials Director. After an Eta Incident, the HMCL Director will be demoted to HMCL Supervisor, the Materials Director will be demoted to HMCL Director, and a new member of Foundation personnel is to be selected to take the position of the Materials Director.

The current instance of SCP-3362-1 is Dr. Laurel Shepherd, who will look at the audience and give the standard “OK” signal at all times. Any major deviations in behavior are to be reported to the HMCL supervisor.

Description: SCP-3362 is a VHS tape of the 1946 movie It’s a Wonderful Life. It is physically indistinguishable from a non-anomalous copy of the tape.

The primary anomalous properties of SCP-3362 manifest when viewed. SCP-3362-1 is an individual that appears in viewings of SCP-3362. SCP-3362-1 is able to interact with the scene, though no deviations in dialogue or plot has been reported. It is confirmed that SCP-3362-1 is conscious and fully aware of its current situation.

The secondary anomalous effects of SCP-3362 activate when viewed by a human subject. If the subject is of a higher economic, social, or political standing than SCP-3362-1, they will spontaneously disappear five to ten hours after first viewing SCP-3362. In subsequent viewings of SCP-3362, the subject that disappeared will replace SCP-3362-1. Two to four hours after this disappearance, the previous instance of SCP-3362-1 will reappear in the vicinity of the former location of the new instance of SCP-3362-1.

The tertiary anomalous effects of SCP-3362-1 activate when it is not viewed by any human subject for a period of one month. At this point, an Eta Incident will occur. SCP-3362 will lose its anomalous properties, and the superior of SCP-3362-1 at the time of the Eta Incident will disappear. Of the visual media currently owned by the supervisor, one will become the new instance of SCP-3362, with the supervisor as an instance of SCP-3362-1. It is of note that the previous instance of SCP-3362-1 will not reappear after an Eta Incident.

It is believed that, following Eta Incidents, SCP-3362 tends to relocate itself to Christmas movies produced before 1980.

Addendum: History and Discovery

SCP-3362 was originally recovered after the disappearance of Mr. Sherrams, an office worker for the Adacron corporation. After his disappearance, Officer Williams took the original instance of SCP-3362, believed to be a VHS tape of The Star Wars Holiday Special, and eventually viewed it himself, becoming the next instance of SCP-3362-1. It was speculated that these disappearances were related, and the Las Vegas Police Department began to investigate this phenomena.

Roughly one month after the start of the investigation, Detective Sheryl was reported to have disappeared while investigating a potential lead. This was interpreted as a deliberate action of the party that was responsible for the disappearances, and Sheryl’s assets were seized as evidence.

The Foundation was alerted to the presence of SCP-3362 when the chief of police of the Las Vegas Police Department viewed SCP-33621 during the course of the investigation and became subject to its secondary anomalous effects, resulting in his spontaneous disappearance. MTF Gamma-7 (“Red Herrings”) administered amnestics to all appropriate civilians and officers and confiscated security footage of the event.

Further testing elucidated the anomalous properties of SCP-3362. However, due to improper handling during testing, Dr. Redmond became the SCP-3362-1 subject.

Addendum: Incident 3362-8

A catastrophic containment breach on 09/05/2008 caused Site-45 to become inaccessible for several weeks. During this period of time, SCP-3362 underwent an Eta Incident, leading to the disappearance of Dr. Carrion, a Level 2 supervisor monitoring testing for several SCP objects, and the relocation of SCP-3362 to a VHS tape of Frosty the Snowman. SCP-3362 has since been relocated to Safe-class Site-49, due to the low possibility of a containment breach.

Addendum: Incident 3362-9

After a scheduled viewing session of SCP-3362, D-4578 spontaneously disappeared. Testing with D-5572 confirms that D-4578 had become the next instance of SCP-3362-1.

A later background check of D-4578 revealed that he had connections to the American Mafia, and during his time with the group, he had amassed a considerable amount of influence and offshore wealth.

Due to the American Mafia’s lack of cooperation in the containment of SCP-3362, an Eta Incident was allowed to occur for the purposes of experimentation. However, the next instance of SCP-3362-1 was Global Occult Coalition Director Claras, who was later determined to have connections to the American Mafia.

The Global Occult Coalition then discovered SCP-3362, and attempted to destroy it. However, this triggered an immediate Eta Incident that caused the disappearance of Dr. Grayson, a director of the GOC’s PHYSICS department. The Foundation then purchased SCP-3362, now a VHS tape of It’s a Wonderful Life, from the GOC for a sum of 500,000 USD.

SPECIAL ADDENDUM 3362.1: Incident 3362-Omega

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License