SCP-7533

SCP-7533
作者 Hg-lab
发布于 17 Oct 2022 08:36

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):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

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;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #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: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        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;
    }
 
    /* FIREFOX-SPECIFIC COMPATIBILITY METHOD */
    @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;
    }
    }
}

SCP-7533
作者 NecroKitten
发布于 2022 年 10 月 17 日

by NecroKitten
5

SCP-SCP-7533

2级

保密

收容等级：

euclid

次要等级：

{$secondary-class}

扰动等级：

vlam

风险等级：

需谨慎

链接至备忘录

项目编号：項目編號：{$item-number}

等级等級2

收容等级：收容等級：

{$container-class}

次要等级：次要等級：

{$secondary-class}

扰动等级：擾動等級：

{$disruption-class}

风险等级：風險等級：

{$risk-class}

备忘录链接

SCP-7533的藏身街道。

项目编号：SCP-7533

项目等级：Euclid

特殊收容措施：SCP-7533因其性质无法收容。机动特遣队成员Ifalos-Rho（致命捕捞）随时对SCP-7533进行跟踪，并向研究人员更新该异常的行踪。基金会特工将限制其藏身地，并对有关地区采取适当措施。

任何时候都不应有任何人员与SCP-7533互动，且必须关注任何进入其藏身地以与之互动，或受其影响而失踪的人员。

任何不同寻常的、令人着迷的、令人震惊的或与预期的现实形成鲜明反差的现象都应向最近的医疗舱报告。如您遭遇上述任何情况，请向您的主管报告。

描述：SCP-7533为一种类似成年深海鮟鱇鱼的影廓¹，游走在岛国日本的各大都市。尽管SCP-7533对有食物供给的区域更加偏爱，但它仍然停留在人迹罕至的地方，大多时间里中黑暗封闭中穿行，如后巷，地铁系统和维修隧道。

在被动状态下，SCP-7533表现为一个发生明显折射的无形空间，类似于被粉红色本影²笼罩的热沥青。当实体变得活跃以捕食时，其将变为不透明，且肉眼可见。

SCP-7533的确切大小未知，经测量录像后估计长度在2.1-2.3米之间。与其非异常同类一样，它视力极差，拥有巨大的牙齿和发光的背鳍，特征与基准现实存在显着偏差；SCP-7533的“诱饵”类似于油灯笼，发出柔和的粉红色调，与霓虹灯光一致。这一附肢发出低沉的嗡嗡声，忽明忽暗，而阴影外轮廓不会改变。所有案例中颜色呈贝克 - 米勒粉红色³。

SCP-7533主要以大型动物及部分遭遇的人类为食。尽管视力不佳，但SCP-7533是一个熟练的猎手，它能在猎物靠近时快速移动，但很快就会疲劳。由于这种限制，SCP-7533更喜欢把自己固定在一个吸引猎物的合适位置，这对它来说相对容易。

SCP-7533发出的光已证明具有认知影响，用以削弱和操纵它的猎物，影响程度未知。据报道，表现有身临其境的视听幻觉、海市蜃楼、以及惊惧、恐慌、分心、困惑和敬畏的表现，令受害者在不知不觉中将自己置于SCP-7533的附近，以便其捕获。

需注意，基于SCP-7533影响而产生的幻觉是个体所特有的，因此可以用观察到的现象中的矛盾来区分幻觉与现实。尚不清楚这种异常现象是一种捕猎活动，还是为了维护自身。

附录7533.1 - 发现

2018年4月18日，伊藤日田去世后，SCP-7533引起了基金会的注意。当时和他在一起的中村明向当地政府报告了这一实体，基金会潜伏特工很快注意并控制了该实体。在查看了中村的电话记录后，认为有必要实施监控收容。

以下转录译自日语：

打开

回收视频转录：

录像来源：2018年4月18日，回收自中村明的手机。

目击者：中村明，伊藤日田（已死亡）

---

[记录开始]

一名高大的男性出现在视频中，大概是伊藤日田。他走在日本涩谷一条灯火通明、霓虹闪烁的小巷里，大笑着，明显是喝醉了。镜头后面可以听到明和朋友一起大笑的声音。

伊藤日田：你听到了吗？有人的招牌得修修了，哈哈，嗡嗡声可真大！

中村明：我什么都没听到伙计，也许我需要再喝点，哈哈哈！

镜头随着笑声小巷里移动，展示着各式各样的霓虹灯标志。情人旅馆的入口、指向小巷深处的箭头、闪烁的商店招牌都化为了一抹亮丽的色彩。当他们继续沿着街道前行时，灯光似乎变成了一种独特的粉红色调。

伊藤日田：哇！这些灯是怎么回事？你觉得这是情人旅馆之类的吗？想和我一起去吗，明？他笑了，对镜头做出亲吻状。

中村明：笑。放你的屁，有些酒店实在是太疯狂了。春和她的朋友们住过一个有恐龙的房间，里面还有一整个游泳池呢。

伊藤日田：啥？真的？真是绝。他从镜头前移开目光，热情洋溢地指向一个明亮的粉色霓虹灯箭头，它正在剧烈闪烁着。我们跟着它走吧！我预感不错！

镜头随着日田走在一条黑暗的小路上。他在一个空荡荡的店面前停了下来，后屋的亮粉色霓虹灯透过窗户洒出，带着不详的味道。

伊藤日田：门没锁！我们进去吧。

中村明：声音紧张。我不知道，老兄。这里看起来很破落，我有种不好的预感。

在明的话没说完之前，日田就打开了门，大步走进了房间，向召唤他们的灯光走去。

伊藤日田：来吧！探上一险！

明小心翼翼地走进去，他听到了一声叹息。画面在房间里缓缓移动，粉色墙纸和涂成粉色的炫目陈设，从地板到天花板无处不在。

中村明：这么粉？哪个脑子正常的人会喜欢这样——嘿，伙计，别走得太深！这地方让我直起鸡皮疙瘩。

远处可以听到日田的脚步声，他的声音在画面中回响。

伊藤日田：快来！你一定要看看这个地方！这后面就像个游乐场。我在想这是情趣用品店还是情人旅馆的仓库。他的笑声在走廊里回荡。

明走进后屋的走廊。墙壁上排列着大小不一的镜子，天花板上挂着杂乱的绳灯，蜿蜒通向房子的深处。当他转过身看向镜中的自己时，视频出现了微弱的微光和快速的静电干扰。明突然皱起眉头，轻轻摇了摇头，脸上露出困惑的表情。虽然看不见日田，但可以从远处的背景中听到他招呼明到地下室去的声音，紧接着一声刺耳的尖叫，继而消失。

明冲向楼梯，向下进入黑暗中，呼喊着日田的名字。画面一片模糊，仅能听见从楼梯上下来的脚步声，静电声随着接近楼梯底部越来越大。

一声惊呼，手机摔在地上，可以听到颤抖的呼吸和低沉的咒骂。手机被颤抖着拿起，画面从黑暗中调亮，对焦锁定了一个巨大、模糊的霓虹色影廓，和日田扭曲的尸体剪影。当他的头颅被SCP-7533吞噬时，一声潮湿的咔嚓声响起，而后迅速消失。

录像中传来沉重的呼吸声，响起了霓虹灯的嗡鸣，整个场景沐浴在粉红色光线之中。手机被匆忙打乱并关机，视频随之结束。

伊藤日田的最后图像。

[记录结束]

视频从警方回收后，中村明接受了几轮记忆清除，此事也不予再提。死者伊藤日田的尸体已被基金会人员寻获并处理。

Footnotes

1. 某物的阴影或模糊图像。

2. 译注：阴影中完全不受光的部分。

3. 也称为P-618、绍斯粉红或醉酒坦克粉红，是粉红色调的一种，可减少敌对，暴力或侵略性行为。

M代表 月光

SCP文选 中心页

O代表 器官