What this is
A bunch of miscellaneous CSS 'improvements' that I, 
Croquembouche, 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.
Usage
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('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;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.
.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; }
当該報告書は複数の虚偽・不明瞭な情報を内包しますが、これは意図された物ではありません。ご不明な点がございましたら、フッター部分に存在する通達文のリンク先を閲覧ください。
— 瀬戸博士 誤伝達部門日本支部
Containment Class:
eparch
Secondary Class:
{$secondary-class}
特別収容プロトコル: SCP-798-JPの新たな出現例が見られた場合、SCiPNet上の報告書を編集する権限のある職員は即座に当該記述を削除した上、転写をこの報告書の補遺に追加してください。現在、財団未詳資料/目録編纂室による"誤伝達部門"についての調査が実施されています。
説明: SCP-798-JPはSCiPNet上に不定期的に発生する、"誤伝達部門より通達"と題された一連の記述です。これらの記述は大抵の場合認識災害オブジェクトに関する報告書の先頭に、黄色の枠線で囲まれた茶色のモーダルボックスとして追加されます。SCP-798-JPには、瀬戸博士と鹿野博士という二人の人物が頻繁に登場します。財団の記録では、これらの名前で雇用されている人物は存在せず、"財団誤伝達部門"についての言及も存在しません。
SCP-798-JPはセキュリティを掻い潜り不定期的に強制出現することを除けば、文書自体は全く異常性を持たないことが判明しています。その内容の異質性、並びに類似するアノマリーの存在のため、SCP-798-JPは単体でEparchクラスのオブジェクトとして指定されています。
補遺: 以下のリストは、実際の報告書に出現したSCP-798-JP事例の転写の抜粋です。完全な記録は、SCP-798-JP出現記録を参照してください。
| 出現先の報告書 |
内容 |
| SCP-496-JP |
"当該報告書には複数の誤字脱字、曖昧な説明、及び主観的な感情表現などが含まれていますが、これらは閲覧時において何ら問題ないものだと現時点で断定されています。ご不明な点があった場合は出来る限り再閲覧を行わず、誤伝達部門に連絡してください。おねがい。" |
| SCP-835-JP |
"当該報告書にアクセスする全ての職員は11.5以上の認知抵抗値(Cognitive Resistance Value：CRV)を有すると認定されることが不可欠です。CRVの検証を実行するため、お使いの端末のマイクにゆっくり、はっきりと、次のフレーズを繰り返してください: 闇子ちゃんかわええええええ" |
| SCP-964-JP |
"当該報告書はそれ自体が物語災害を引き起こす不明瞭な文書型異常存在であると推測されており、閲覧には思考改変を受けるリスクが伴います。そのため、閲覧者には空想科学部門による対抗物語の接種が義務付けられておりますのでご了承下さい。" |
| SCP-251-JP |
"当該報告書それ自体の強力であるものの有用な異常性を有効利用するため、当該報告書は編集者のセキュリティクリアランスに関わらず自由に編集可能となっております。詳細は付属の追記編集ガイドラインを閲覧ください。" |
| SCP-2199-JP |
"[冗長なセクションを省略]。円滑なコミュニケーションに不要な情報は省略されます。" |
| SCP-1151-JP |
"当該報告書はAIC(人工知能徴募員)にのみ閲覧許可が下りています。閲覧者がAICではない場合、即座に閲覧を終了してください。" |
| SCP-1210-JP-J |
"当該報告書はJokeカテゴリーに分類されており、内容自体は完全なフィクションであるものの、閲覧者には報告書の改変を行おうとする原因不明の突発的な衝動発作が発生することが判明しています。これらは当該報告書自体の有する異常性だと思われますが確証はありません。そのため、閲覧者には事前に認知補強薬を接種することを強くお勧めします。" |
突然驚かせてしまい申し訳ありません。残念ながら現時点では、このような形でしかメッセージを送ることが出来ないのです。
私達は財団の誤伝達部門に所属する、瀬戸博士という職員です。
— 瀬戸博士 誤伝達部門日本支部
