By: Blinder4Blinder4
Published on 17 Oct 2022 05:20
评分: +2+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('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.

…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: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#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;





——Nathan Jones,CICAPOCO委员长


项目编号: SPC-993[ARCHIVED] STATUS: 不活跃













部署记录 | 片段摘要

剧集标题 内容
“巴伯冒充是美国国税局人员” 剧集发生在一个大型呼叫中心,巴伯通过电话与几个人交流。他与一位老妇人交谈,试图说服她说出其信用卡信息。这名女子通过电话接收器打了他一拳,打断了几颗牙齿。办公室经理注意到他的骗局企图,说服一群愤怒的同事在背景音乐Benny Hillary Play播放时围殴了巴伯。
“巴伯被白鲸殴打,而亚哈船长袖手旁观” 剧集发生在被放逐者图书馆3巴伯偷走了名为写给蠢蛋们的庞氏骗局教程并立即被捕。这一集涉及一名图书管理员从他们的原始出版物中收集小说和漫画书中的人物,之后他们对巴伯进行体罚。此情节持续了三个小时4,而巴伯不受控制地大笑。
“我烧掉了巴伯的吐司面包” 这一集(由我执导、制作并由我主演)讲述了巴伯在我的主人睡觉时进入我的厨房。在浪费了几分钟试图闯入我主人的保险箱后,他洗劫了他们的冰箱,并将两片全麦面包放入我的插槽中。我烧掉了他的吐司,并将焦糊的面包片发射进他的喉咙里。但我好像听到他在大笑?下一个片段中,我在他洗澡的时候通着电跳进了浴缸。

“老师说:打巴伯!” 剧集发生在一节女子空手道课上。该课程包括热身,招式演示和陪练课程,所有这些都由巴伯讲述,他既是班长又是拳击袋。在整个课程中,23名参与者密谋攻击巴伯,导致他和女孩们之间进行了10分钟的对决。一次攻击中,橙带的克里斯汀•库克(8岁)打中了巴伯的鼻子。这次攻击的力量使他以1.5马赫的速度飞过结构梁和承重墙,将建筑物夷为平地。




注意: SPC-993文档更新! 是否浏览?

Y / N

输入: Y_





2017年2月,SPC-993的所有剧集同时被修改,全部虚构角色都被编辑移除。第二天,由备受赞誉的鲨鱼电视企业家和泥城居民 理查德•克拉维斯•查佩尔 主持的异闻类电视节目查佩尔秀在每天播出12小时的低成本CGI重启节目小丑鲨

重启节目的内容主要为巴伯讲述鲨鱼可以而且应该在陆地上做的行为,例如驾驶皮卡车,教授形意舞蹈课,参加国会竞选,以及[已编辑——仅限重量级拳击手查阅] 拥抱可爱的狗勾们. [/已编辑]




阅读本文档后,请立刻向您的健身中心报告。你会在哪里得到一杯美味的长岛冰茶。抓 紧 时 间!

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License