SCP-7533
SCP-7533
作者 Hg-labHg-lab
发布于 17 Oct 2022 08:36
评分: +4+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; }
/* 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;
    }
 
    /* 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
作者 NecroKittenNecroKitten
发布于 2022 年 10 月 17 日
SCP-SCP-7533
2级
保密
收容等级:
euclid
次要等级:
{$secondary-class}
扰动等级:
vlam
风险等级:
需谨慎
项目编号:項目編號:{$item-number}
等级等級2
收容等级:收容等級:
{$container-class}
次要等级:次要等級:
{$secondary-class}
扰动等级:擾動等級:
{$disruption-class}
风险等级:風險等級:
{$risk-class}
7533Main

SCP-7533的藏身街道。

项目编号:SCP-7533

项目等级:Euclid

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

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

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

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

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

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

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

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

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

附录7533.1 - 发现

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

以下转录译自日语:

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

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