By: walksoldiwalksoldi
Published on 06 Aug 2022 12:18
評価: +38+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;

評価: +38+x

アイテム番号: SCP-7013

オブジェクトクラス: Keter Resolved


[ N / A ]

説明: SCP-7013は、財団の主要な使命に則った監督評議会の責務遂行能力に影響を及ぼしていた確率異常でした。このアノマリーは、1969/02/14、監督評議会に13番目の席が追加された直後に発現しました。


図. 1.1: 自身のオフィスでのO5-13。



補遺-7013-A: SCP-7013の発見に加え、半年間で連続的な収容違反を含む通常では起こり得ない現象が相次ぎ、財団の資源に未曾有の負担が掛かっていたために、監督評議会が管理サイト-01で緊急サミットを開き、アノマリーを無力化できる可能性のある対策を協議しました。


[ ログ開始 ]




O5-2: ご機嫌よう、皆さん。それでは、あー、始めましょうか。

O5-5: ワンとシックスは?

O5-2: 残念ながら、その2人は今日は欠席ね。というのも…… 予期せぬ

O5-7: 予期せぬだと、ふざけやがって。


O5-2: — 情報セキュリティ違反により、移動ルートが一時遮断されたの。通信が散発的にダウンするから、遠隔での連絡も不可能ね。


O5-2: じゃあ今日の議題に移りましょうか。サーティーンのことについて。

O5-4: うん? どうしてそうなる? 奴ならこの場に出席してすらいないぞ。

O5-2: あいつの…… まあ、あいつのことだから、遅れて来るのでしょうね。

O5-12: それは私たちにとって良い知らせじゃないか……

O5-10: あいつは脳足りんなのか?

O5-11: おいおい、それは言い過ぎだよ。確かにそうだが…… [ため息] それでも言い過ぎだ。

O5-4: いい加減にしろ、私は17を離れてまでここに来たんだぞ。あそこが今どれほどクソな目に遭っているのか、知ってるか?

O5-8: その辺にしておけ。私たちは危険地帯に一歩でも近付いてはならないんだ、今起こっているこの状況では。しかし、私も同じ気持ちだな。今回集まったのはただサーティーンの愚痴を言い合うためか?


O5-2: サーティーン抜きで会議を始めたのはこのため。今全員の手元に配られたのは、SCP-7013に関する提案資料よ。


O5-5: これは…… これは本当なので?

O5-2: ええ。ワンが厳選したチームによって、全てがそこに記録されてる。

O5-10: そんなまさか。このファイル全てが……

O5-2: そう、サーティーンが間接的に影響を及ぼしたと確認されている出来事よ。


O5-9: 嘘だろ。83年の襲撃? 57年の収容違反? こいつは……

O5-7: まあ、全く予想していなかったとは言わない。だがこれが全て本当なら —

O5-2: ええ、私を信じて。ワンと私がこの情報を全て集めるのに、何週間もかかったのだから。

O5-12: ちょっと待て。だからあいつを夜のボウリングに誘うようになったのか? [声を荒げて] お前のせいで皆殺しにされるかもしれなかったんだぞ!

O5-2: そうね。この件について、もっと早くから議題に上げなかったことを詫びましょう。


O5-11: では、これからどうすればいい?

O5-7: 何か手を打たなければ。サーティーンを檻に閉じ込める資源はあるのだから、厳重にやれば奴の思考すらも外には及ばなくなるだろう。

O5-9: まあ待て。確かにサーティーンは嫌な奴だ、そこに疑問の余地はない。だが評議員を監禁するだと? 前代未聞だ! 全くもって信じられん。

O5-4: 奴は異常だ! やるしかない!

O5-9: OK、落ち着け。別に使命に逆らう気はこれっぽっちもないのだが、我々が遭遇した異常性持ちを本気で全員収容するとなったら、職員の半分がいなくなってしまう。その論拠は説得力が薄い。

O5-10: 単純に別の人物と代えるというのは?

O5-2: ダメね。現在のサーティーンが発端なのではなく、7013は評議会に席が追加されてから活性化状態にある。事実、評議会ができる前から、我々の管理機関に13名のメンバーがいればその度に活性化していたの。

O5-9: そうか、なら今やるべきは対処法を見つけ —


O5-13: やあ、みんな! 遅れてごめんよ、さっき [荒く息をする] さっき、サイトに入ろうとして地獄を見たばかりでね。ここに来たら、資格証明が承認されなかったんだ! セキュリティシステムを解除しようと何度か奮闘する羽目になったし、その後でアルファ-1が口うるさく言ってきてさ。全く、今日はひどい一日じゃないか?

O5-2: [目に見えて苛つく] どうも、サーティーン。じゃあ、まあ、席に着いたら? それで、あー、会議が始められるから。

O5-13: それは良かった! ところで、ワンとシックスはどこに —


O5-9: やってんだ、スリー!?

O5-3: ん? これで解決するはずだろ、違うか?

O5-9: なぜそうなる!? いや、他の方法でどうなるかは分からんが、単に14番目の監督者を迎え入れる手もあったのでは?


O5-11: うーん……

O5-7: まあ……

O5-10: 正直なところ、このままでもいい気はする。

O5-4: 同感だな。

O5-8: うん、まあ、済んだことはしょうがない!



O5-2: じゃあー…… これで定員ね。良い会議でしたっと。

[ ログ終了 ]


評価: +38+x
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。