SCP-CN-2569

警告:下列文件为5/200-N级机密


无5/69-N级权限下访问将被记录并立即处以纪律处分。

评分: +5+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; }

评分: +5+x

| 确保你的权限

| 权限已通过,正在查找

| wait…..

| 1条结果

| 正在打开文件,欢迎您,O5-13

项目编号:SCP-CN-2569

项目等级Thaumiel Neutralized

特殊收容措施:已归档,目前所有的SCP-CN-2569均已回收后销毁。


描述:SCP-CN-2569是由已故管理员[数据删除]在临终前交给Alpha-1的一个未知型号的类摄像头。此外,该项目在被带回Site-1时被发现其镜头上有用尼龙绳捆绑的一个蓝图(以下被称为SCP-CN-2569-1)和一个小型控制器(以下被称为SCP-CN-2569-2)。

在经过拆解并重组后发现SCP-CN-2569-1为SCP-CN-2569的组装蓝图,而SCP-CN-2569-1的背后则有着对SCP-CN-2569使用方法的详细阐述。经实验发现,将该项目安装至某一地方时,SCP-CN-2569-2的屏幕会自动亮起,于此同时,SCP-CN-2569的异常效应会被触发,SCP-CN-2569的镜头会散射出红色射线,经实验后1发现其射线所能到达的极限范围为两公里,被射线所照射到的区域会以数据的形式传输到SCP-CN-2569-2,此时SCP-CN-2569-2的屏幕上会出现“等待”的图样,随后以立体虚拟的图像出现在SCP-CN-2569-2上,此时SCP-CN-2569-2被自动赋予最高权限权限,SCP-CN-2569-2便可以实施远程操控该被照射地区的任意设备。经过尝试,该控制器最多可控制一个完整的站点2应当定期启动SCP-CN-2569以供O5议会进行远程检查与处理小规模的收容失效。如果有特殊情况需启用该项目,必须通过O5议会的联合表决

经O5议会联合表决,SCP-CN-2569已被批量生产并秘密投入使用。现已将所有SCP-CN-2569的复制件与原件一并销毁,SCP-CN-2569-1与SCP-CN-2569-2均被站点内的标准焚化炉焚烧至毁。至此,SCP-CN-2569已彻底从物理上被无效化。

附录

SCP-CN-2569的发现:


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