SCP-CLOUD-487 - 传送泥头车
评分: +1+x
评分: +1+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.

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.

…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; }

项目编号:項目編號:Cloud-487
等级等級2
收容等级:收容等級:
safe
次要等级:次要等級:
none
扰动等级:擾動等級:
dark
风险等级:風險等級:
需谨慎

特殊收容措施:项目被储存于Facility-Cloud-90的η翼楼,不允许有额外的异常和项目同时储存在η翼楼,不允许将其他翼楼与η翼楼相连。严禁任何人员驾驶SCP-Cloud-487。
描述:SCP-Cloud-487是一辆带有异常性质的标准██牌渣土运输车,于20██年█月█日晚凭空出现在Facility-Cloud-90中的一间本不存在的、标注为“SCP-Cloud-487”的收容间内。SCP-Cloud-487的驾驶室内未观测到有任何驾驶员,但项目仍能自行移动。但由于道路限制,项目只能在η翼楼中活动。

当项目发现任何人类(称为SCP-Cloud-487-1)时,项目会在不定时间对SCP-Cloud-487-1,在此之后会暂时失去异常性质,时间大约持续5~10分钟(min)。SCP-Cloud-487-1在此之后并不会被其所伤,并且会以未知方式消失,并传入到SCP-Cloud-487-1最近正在接触的某种游戏中。根据目前的调查,在这段期间SCP-Cloud-487-1会被给予一块数码电子屏来选择在这款游戏内今后的人生,此后便会立刻代入到此游戏中,并改变此游戏原本剧情(如若有剧情的话)。在游戏中的任何物理和心理上的感觉能被真实感受到。假如SCP-Cloud-487-1在游戏中“死亡”就会被立刻传回到现实世界,并保留相关记忆。

对于SCP-Cloud-487-1在此期间的经历将被当作其私人信息,不应对其进行询问,除非其自愿回答。

附录:

© SCP基金会云国分部
© 地下黑市
2019-2022
一切内容公开共享