By: NDHeckfireNDHeckfire
Published on 29 Sep 2022 02:36
rating: +22+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; }

rating: +22+x

Item#: SCP-7417
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:

Assigned Site Site Director Research Head Assigned Task Force
Site-400 Director Adam Desmond N/A N/A

Special Containment Procedures: SCP-7417 is currently housed in a standard humanoid accommodation chamber at Site-400. Request for entertainment amenities such as books, board games, or video games is to be approved, with supervision from her current research head(s), presently Dr. Sebastian Lennox and Dr. Windsor Gladwyn.

Description: SCP-7417 is the designation given to Kristen Claudia, a Caucasian human adolescent female of British descent, currently 166 centimeters in height and possessing green eyes and long brown hair. Prior to containment, SCP-7417 was employed as a local kindergarten school teacher in Newcastle, Northern Ireland.

SCP-7417 possesses a unique form of functional precognition where, upon visually perceiving any object (including living entities), she is capable of viewing their physical appearance as how they are approximately one (1) year later. For example, upon looking at an apple (red delicious variant), SCP-7417 reported seeing it as merely being a pile of assorted fertilized soil.

Testing on how of it's possible to alter the "fate" of perceived objects is still ongoing.

Addendum 7417-1:

Interview Log

Date: 12/09/2018
Present: Dr. Sebastian Lennox

<Begin Log>

Dr. Lennox enters the interview room.

Dr. Lennox: Hello, 7417. My name's Dr. Lennox. I'm just here to ask you some quest-

Upon laying eyes on Dr. Sebastian, SCP-7417 suddenly jumps up from her chair and steps back.

SCP-7417: Oh God! Holy Christh!

Dr. Lennox: Woah, are you alright? What's wro-

SCP-7417: Get away from me! Oh God, ith horrible!

SCP-7417 retreats to a corner of the room and covers her face with both of her hands. Sobbing is audible.

Dr. Lennox: 7417? What's the matter? Why are you-

SCP-7417: (looks up) Your faith! Your fucking faith! Ith fucking gone! Get the fuck away from me!

Silence on recording.

Dr. Lennox exits the interview room.

<End Log>

Debriefing Log

Date: 12/09/2018
Present: Dr. Sebastian Lennox and Dr. Windsor Gladwyn

<Begin Log>

Dr. Lennox enters the observation chamber. Through a camera monitor, SCP-7417 can still be seen sitting in a corner and covering her face.

Dr. Gladwyn: Jesus. The hell was that? (pauses) You good?

Dr. Lennox: Uhhh, yeah, I'm fine. Just… confused?

Dr. Gladwyn: You're not the only one. (looks at the monitor) What was she screaming about anyway?

Dr. Lennox: Something about… my faith being gone? Like… I'm gonna lose my faith?

Dr. Gladwyn: Huh, weird. Are you… religious by any chance?

Dr. Lennox: Yeah. Catholic.

Dr. Gladwyn: Right, okay. (pauses) The doc doesn't say anything about 7417 having spiritual precognition. Might need to look into that more. (looks at Dr. Lennox) You sure you're alright? You don't look too good.

Dr. Lennox: I'm fine, really. A little bit shaken up is all.

Dr. Gladwyn: Hm.

<End Log>

In concern of further distressing SCP-7417, Dr. Windsor Gladwyn has requested the reassignment of Dr. Sebastian Lennox to another project. This request was approved.

Addendum 7417-2: On the 23rd of October, 2019, SCP-4571 breached containment in Site-400, resulting in extensive damage to the West Wing and multiple injured Foundation personnel. During the breach, Dr. Sebastian Lennox (who was assigned to SCP-457 at the time) suffered varying degrees of burns throughout his face and torso. After SCP-457 was successfully recontained, Dr. Lennox was rushed to the on-site Health and Pathology Infirmary for immediate treatment.

Date: 23/10/2019

  • Dr. Sebastian Lennox
  • Dr. Windsor Gladwyn

<Begin Log>

Dr. Lennox can be seen wearing a hospital gown and resting in a health cot, his face entirely covered with bandages.

Dr. Gladwyn: Heya, bud. How you doing?

Dr. Lennox: I'll be lying if I said I was fine.

Dr. Gladwyn: Heh, yeah…

Silence on recording.

Dr. Lennox: Hey, uhhh… Remember 7417? Are you still assigned to her?

Dr. Gladwyn: Yup. Reintegration Program doin' wonders for her. Why do you ask?

Dr. Lennox: You still remember the only time I met her? Where, y'know, she cried about me losing my faith? I think that… she might be right. (sighs) I don't know. Right now, I'm asking myself a lot of things. Thinking about and reconsidering some stuff, y'know? Maybe that's why she was so scared.

Dr. Gladwyn: Oh, yeah, about that… I've, uhhh, been meaning to tell you…

Dr. Lennox: What?

Dr. Gladwyn: I regularly talked to her… and I'd assume you didn't notice when you first met her but…

Dr. Lennox: What is it, man? You're literally killing me here!

Dr. Gladwyn: It's not as non-literal as you thought it was. 7417 has a lisp.

<End Log>

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