SCP-6641
SCP-6641
By: MikuKanekoMikuKaneko
Published on 24 Jan 2022 13:04
評価: +13+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-6641
著者: NDHeckfireNDHeckfire
2022年1月19日に公開
:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > .bottom-box { box-shadow: none!important; }
.anom-bar > .bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    background-color: rgb(var(--black-monochrome, 12, 12, 12));
    transform: translateY(-0.74rem);
}
 
/* DIVIDER */
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
}
 
/* CLASSIFIED LEVEL BARS */
div.top-center-box  > * {
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
div.top-center-box > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.top-center-box > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/* TOP TEXT */
div.top-left-box, div.top-right-box {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
}
 
div.top-left-box > *, div.top-right-box > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* CONTAINMENT, DISRUPTION, RISK CLASSES */
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.text-part > :nth-child(1) {
    animation-name: expand1;
}
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
 
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 /* BOTTOM TEXT */
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/* DIAMOND */
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.7s * var(--timeScale));
    animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
 
div.top-icon, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}
div.diamond-part {
    clip-path: polygon( -10% 0.37%, 120% 0.37%, 120% 100%, -10% 100%);
    animation-name: diamondBorder;
    animation-duration: calc(0.8s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    will-change: box-shadow;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 rgb(var(--black-monochrome, 12, 12, 12))!important;
    }
    div.top-center-box  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    }
    div.top-center-box > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }
    div.top-center-box > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) {
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}
評価: +13+x
blank.png
warning.png

アイテム番号: SCP-6641
レベル1
収容クラス:
euclid
副次クラス:
{$secondary-class}
撹乱クラス:
dark
リスククラス:
caution

配属サイト サイト管理官 研究責任者 担当部隊
サイト-400 アダム・デスモンド管理官 N/A N/A

特別収容プロトコル: オービル博士は、財団での長期雇用を継続する許可を与えられています。しかしながら、彼はSCP-6641-1の症状を記録するために常に監視下に置かれています。

説明: SCP-6641は、現在財団の主任研究員でありサイト-400の天文研究部門官であるオグデン・オービルに影響を及ぼしている異常に対する呼称です。

オービル博士が午前7時から午後10時までの間に睡眠を取ろうとした場合、無毛の灰色の肌の腕(SCP-6641-1と指定)がオービル博士の背中に出現し、彼の睡眠から目覚めさせるのに必要な手段を行います。

SCP-6641-1がオービル博士を目覚めさせるのに成功すると、直ぐに消失します。

補遺6641.1: SCP-6641-1の症状

以下は幾つかの注目すべきSCP-6641-1症状のリストです:

日時 場所 イベントの説明
2017/12/05 (12:54 PM) サイト-400の職員ラウンジ オービル博士は、無関係のアノマリーについてプレゼンテーションを行った後、ソファで簡単に眠りました。SCP-6641-1が出現して顔を平手打ちし始めた結果、彼は直ぐに目を覚ましました。
2017/14/05 (9:04 AM) サイト-400外のミーム研究所 オービル博士は、研究所の外にある待合室のベンチの上で居眠りをしていました。SCP-6641-1は出現しオービル博士の顔を平手打ちしましたが、目覚めさせることはできませんでした。それはオービル博士の髪をつかみ強く引っ張りました。それにより、オービル博士は目を覚まし、痛みで叫びました。
2017/24/08 (6:53 PM) サイト-400の多目的講堂 オービル博士は、惑星外の空想科学物語に関するプレースホルダー・マクドクトラート博士が実施したセミナーに参加しました。開始から30分後、オービル博士は眠り始め、その結果、SCP-6641-1が出現しました。プレースホルダー博士はこれに気づき、オービル博士に近づき彼の目を覚まそうとしました。これは成功し、SCP-6641-1は中指を立ててから消失しました。
2017/07/09 (3:53 PM) サイト-400の職員ラウンジ 補遺6641.2を参照してください

補遺6641.2: インシデントログ

2017年9月9日、オービル博士はサイト-400の職員ラウンジ内にあるソファで誤って眠りました。ラウンジ内には他の財団職員がいたことに注意してください。以下は、発生したイベントの復元されたビデオ録画です:

ビデオログ6641.27

登場職員:

  • オグデン・オービル博士
  • ベラトリクス・フェラー博士
  • カイン・スタロス下位研究員
  • エダン・ローレイン博士
  • エージェント・カルロス・シエラ
  • クラン・ケリー博士

<ログ開始>

映像は、オービル博士がソファの肘掛けの上に頭を乗せて寝ているのを映している。おそらくSCP-6641-1が彼を起こすのを防ぐため、彼はオートバイのヘルメットをかぶっている。他の財団職員は、お互いに食事をしたり会話したりしているのが見られる。

SCP-6641-1がオービル博士の後に出現した。それはオービル博士がかぶっているヘルメットを軽く叩き始め、その後ヘルメットのバイザーを強く叩き始める。ケリー博士はこれに気づく。

ケリー博士: ねえ、みんな? 見て。(SCP-6641-1を指差す)またオービルのやつだ。

ローレイン博士: そんな。かわいそうなオービル。私たちが…すべきことはある?

エージェント・シエラは席から立ち上がりゆっくりとSCP-6641-1とオービル博士に近づく。

エージェント・シエラ: さて、私はあなたが私の友人を悩ませているのは正直うんざりしてる。あなたはただ立ち去って、オービルをしばらく休ませてはどうですか? 彼は今日、長い一日を過ごし、そして彼はあなたと一緒で全く昼寝をすることができません。

SCP-6641-1はエージェント・シエラの顔に近づき、激しく跳ね飛ばす。エージェント・シエラは痛みで地面に倒れる。

エージェント・シエラ: おお、マジかよ!

ケリー博士: ああ、クソ! だ-大丈夫か、カール?

エージェント・シエラ: ええ、私がこのクソ野郎を捕まえるのを手伝ってくれ。

フェラー博士: みんな、私たちは警備員を呼ぶべきだと思い-

ケリー博士はSCP-6641-1に向かって走り、上腕を掴む。それから彼はそれを地面に向けようとするが、SCP-6641-1の2本の指がケリー博士の両目を突いたため失敗する。頬に涙が流れているのを見ると、彼は痛みで叫ぶ。

エージェント・シエラ: なあ、うすのろ!

エージェント・シエラは拳銃を構えるが、SCP-6641-1によってすぐに武装解除される。SCP-6641-1がエージェント・シエラの首をつかんで上に持ち上げ、拳銃が地面に落ち、その過程で彼を窒息させる。

フェラー博士: やばい。エダン! カイン! 助けを求めて、何か役に立つのを見つけて!

ローレイン博士とスタロス研究員は両方とも直ぐにラウンジを出る。フェラー博士はエージェント・シエラの拳銃を手に取り、弾倉を確認してからゆっくりと一歩下がってSCP-6641-1に向ける。

ケリー博士: 待って、フェラー! あなたは-

フェラー博士が引き金を引いて発砲する。弾丸はSCP-6641-1の手首に命中し、不明なところから大きな金切り声が聞こえる。SCP-6641-1はエージェント・シエラを離しフェラー博士の方を向き、受けた銃創から未知の黒い物質を流す。

SCP-6641-1はフェラー博士の首をつかみ、彼女を上に持ち上げてから、彼女を地面に打ち砕く。ローレイン博士とスタロス研究員はラウンジに戻り、前者は大きな消防斧を握っている。スタロス研究員はSCP-6641-1に気づき、直ぐにローレイン博士から斧を奪う。彼はオービル博士の背中に繋がっていたSCP-6641-1の肢を叩き切る。

スタロス研究員がSCP-6641の下肢を切り続けると、大きな叫び声が再び聞こえる。20秒後、SCP-6641-1はオービル博士から完全に切り離される。オービル博士がゆっくりと目を覚ますと、その残骸が消滅し始めた。

オービル博士: (あくびをする)うーん、私は最も奇妙な夢を見た。ちょっと待て。(彼の時計を確認する)なんてこった! 眠った! クソ腕が私を邪魔することなく眠った! 何て素晴らしい事なんだ。ああ、助かった。ちょうどあれがあれ自身でやったにちがいない。みんな、こんなの信じられ- おお。いったい何が起こった?

エージェント・シエラ: 良い昼寝になったことを望んでいます、オービル。

<ログ終了>


警備員が現場に到着し、フェラー博士、ケリー博士、エージェント・シエラに医療処置を施すことが出来ました。しかしながら、関連するすべての財団職員(オービル博士を除く)は、同意も、既知の関係者からの直接の承認もなしにアノマリーに関与したとして、その後直ぐに懲戒処分が行われました。

2017年7月9日の時点で、SCP-6641はNeutralizedとして再分類されています。

特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。