SCP-5810

SCP-5810
Author: Esperanza_Cai
Published on 14 Mar 2021 16:01

/* 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) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .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!important;
        position: fixed;
        top: 0;
        left: -19em;
        width: 17em;
        height: 100%;
        margin: 0;
        overflow-y: auto;
        z-index: 10;
        padding: 0.3em 0.675em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.5s ease-in-out;
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        z-index: 10;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
 
    .close-menu {
        margin-left: 19em;
        opacity: 0;
    }
}

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

▷ Show Code ◁

@import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap);
 
/* Flopstyle CSS Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
 * Select CSS Styles Are Credited Where Necessary
 * -- (CC BY-SA 3.0) --
**/
 
/* -------- SITE HEADER -------- */
 a, body, span{
     word-break: unset;
}
 #header h1 a,
 #header h1 a::before{
     color: hsl(0, 0%, 93%);
     text-shadow: none;
}
 #header h1 a{
     font-family: "Montserrat", "Arial", sans-serif;
     font-size: 170%;
     letter-spacing: 0;
}
 #header h2 span,
 #header h2 span::before{
     color: hsl(60, 62%, 85%);
     font-family: "Montserrat", "Arial", sans-serif;
     font-weight: 500;
     text-shadow: none;
}
 
/* -------- TOP-BAR -------- */
 #search-top-box,
 #top-bar,
 #login-status{
     right: 0;
}
 #search-top-box-form input[type="submit"]{
     font-size: unset;
}
 #search-top-box-input,
 #search-top-box-form input[type=submit]{
     background: hsl(0, 0%, 20%);
     border-color: hsl(0, 0%, 60%);
     border-radius: 0;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     background-color: hsl(0, 0%, 30%);
     border-color: hsl(0, 0%, 70%);
}
 #top-bar .open-menu a{
     border-radius: unset;
     border-width: .1em;
}
 
/* -------- SIDE-BAR -------- */
 #side-bar{
     background-color: hsl(0, 0%, 50%);
}
 #side-bar:target{
        box-shadow: 0 0 90px 90px hsla(0, 0%, 0%, .3);
}
 #side-bar .side-block{
     border-color: hsl(0, 0%, 20%);
     border-radius: 0;
}
 #side-bar .heading{
     color: hsl(0, 0%, 5%);
     border-bottom: solid 1px hsl(0, 0%, 20%);
}
 
/* -------- SIDEBOXES --------
 * By EstrellaYoshte
 * Adapted From 'Penumbra Theme'
**/
 .flavourText{
     margin: auto;
     margin-bottom: .5em;
     padding: .25em;
 
     border: 1px solid #888;
}
 #page-content .authorbox tr td,
 #page-content .sidebox tr td,
 #page-content .authorbox tr th,
 #page-content .sidebox tr th{
     padding: .25em;
}
 #page-content .authorbox tr td,
 #page-content .authorbox tr th,
 #page-content .authorbox .flavourText{
     width: 15.234em;
}
 .limit{
     margin-bottom: -1rem;
     line-height: 141%;
     z-index: 5;
}
 .limit br{
     display: block;
}
 .anchor{
     position: sticky;
     height: 0;
     top: 0;
     z-index: 5;
}
 .authorbox,
 .sidebox{
     position: absolute;
     width: calc((100vw - 870px) / 2);
     max-height: calc(100vh - 18rem);
     margin: 0 8px 0 0;
     padding: .14rem;
 
     box-sizing: border-box;
 
     overflow: auto;
     z-index: 5;
}
 .authorbox{
     max-width: calc((100vw - 921.2px) / 2) !important;
     top: .5em;
     right: 103.5%;
}
 .sidebox{
     top: -1em;
     left: 103.5%;
     padding-left: 1em;
 
     background: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 73%);
     border-left: 8px solid var(--accentColor);
}
 
/* -------- Sidebox Mobile Optimization Courtesy of Woedenaz -------- */
 @media (max-width: 1079px){
     .sidebox{
         width: auto;
         max-width: 65vw !important;
         top: .75rem;
         right: calc(((100vw - 45.8rem) / 2) * -1);
         left: initial;
         padding: 0 .4rem;
 
         background-color: var(--accentColor);
         border: 1px solid hsl(0, 0%, 73%);
         border-left: 8px solid var(--accentColor);
         border-radius: 0;
 
         overflow: visible;
         -webkit-clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
         clip-path: inset(-.125rem -.25rem 0 calc(100% - 1.275rem));
         -webkit-transition:
            color .2s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
         -o-transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s;
         transition:
            color .2s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s;
    }
     .sidebox::before,
     .sidebox::after{
         content: " ";
         position: absolute;
         right: 0;
    }
     .sidebox::before{
         width: 0;
         height: 0;
         top: calc(50% - .75rem);
 
         border-top: .75rem solid transparent;
         border-bottom: .75rem solid transparent;
         border-right: .75rem solid var(--accentColor);
 
         z-index: 10;
         transition: border .1s ease-in-out .1s;
    }
     .sidebox::after{
         width: 100%;
         max-width: .75rem;
         height: 100%;
         max-height: calc(100vh - 18rem);
         top: 0;
 
         background-color: hsl(0, 0%, 100%);
 
         z-index: -1;
         transition:
            box-shadow .5s ease-in-out .1s,
            max-width .5s ease-in-out .1s;
    }
     .sidebox > *{
         opacity: 0;
         -webkit-transition: opacity .2s ease-in-out .2s;
         -o-transition: opacity .2s ease-in-out .2s;
         transition: opacity .2s ease-in-out .2s;
    }
     .sidebox:hover{
         overflow: visible;
         -webkit-clip-path: inset(-.125rem -.25rem 0 0);
         clip-path: inset(-.125rem -.25rem 0 0);
         -webkit-transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
         -o-transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s;
         transition:
            color .5s ease-in-out .2s,
            right .5s ease-in-out .1s,
            clip-path .5s ease-in-out .1s,
            box-shadow .5s ease-in-out .1s,
            -webkit-clip-path .5s ease-in-out .1s,
            -webkit-box-shadow .5s ease-in-out .1s;
    }
     .sidebox:hover::before{
         border-top: 0 solid transparent;
         border-bottom: 0 solid transparent;
    }
     .sidebox:hover::after{
         max-width: 100%;
         right: 0;
    }
     .sidebox:hover > *{
         opacity: 1;
    }
}
 @media (max-width:768px){
     .sidebox,
     .sidebox:hover{
         right: calc(((100vw - (100% - 3rem)) / 2) * -1 + 1rem);
    }
}
 @media (max-width: 1079px){
     .authorbox{
         display: none;
         visibility: hidden;
    }
}
 
/* -------- GENERAL -------- */
 :root{
   --accentColor: hsl(0, 100%, 30%);
   --vivid-lime-green: hsl(112, 77%, 48%);
}
 body{
     color: hsl(0, 0%, 5%);
 
     word-break: unset;
}
 #search-top-box-input,
 #search-top-box-input:hover,
 #search-top-box-input:focus,
 #search-top-box-form input[type=submit],
 #search-top-box-form input[type=submit]:hover,
 #search-top-box-form input[type=submit]:focus,
 #top-bar ul li ul,
 #side-bar .side-block,
 .page-rate-widget-box,
 .scp-image-block{
     box-shadow: none;
}
 
/* -------- INFO BAR -------- */
 body{
     --barColour: hsl(0, 89%, 18%);
}
 .u-faq{
     display: none;
}
 .info-container .collapsible-block-content{
     padding: 0 .5em 30px;
}
 .info-container .collapsible-block-content .wiki-content-table,
 .footer-wikiwalk-nav .collapsible-block .wiki-content-table{
     width: 90%;
}
 
/* -------- INFO PANE -------- */
 .creditRate{
     margin-right: 0 !important;
}
 .rate-box-with-credit-button{
     border-radius: 0 !important;
     box-shadow: none !important;
}
 .creditButton p a:hover,
 .creditButtonStandalone p a:hover{
     color: var(--vivid-lime-green) !important;
}
 div.credit.first .wiki-content-table {
     width: 100%;
}
 
/* -------- PAGE RATING -------- */
 .page-rate-widget-box{
     margin-right: 0;
}
 .page-rate-widget-box,
 .page-rate-widget-box .rate-points{
     border-radius: 0;
}
 .page-rate-widget-box .cancel,
 .page-rate-widget-box .cancel a:hover{
     border-radius: 0 !important;
}
 
/* -------- FORMATTING | [GENERAL] -------- */
 #page-content h1,
 #page-content h2,
 #page-content h3,
 #page-content h4,
 #page-content h5,
 #page-content h6{
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-bottom: .57em;
 
     text-align: center;
     word-break: unset;
}
 hr{
     height: 0;
     margin: 1em 0;
 
     background-color: transparent;
     border-top: 1px solid hsl(0, 0%, 67%);
}
 .collapsible-block-link{
     font-size: 120%;
     font-weight: bold;
}
 .info-container .collapsible-block-link{
     font-size: 100%;
}
 ol li{
     margin: 0 0 1em;
}
 ul{
     margin:1em 0;
}
 .footnotes-footer, .bibitems{
     padding: 0 0 .5em;
}
 
/* -------- IMAGE BLOCK -------- */
.scp-image-block .scp-image-caption{
     font-size: 95%;
}
 .scp-image-block.block-right{
     margin: 0 0 1em 2em;
}
 
/* -------- CUSTOM DIV BLOCKS -------- */
 .raisa-header, .pink-header, .oracle-header{
     margin-bottom: 1em;
     padding: 0 .5em;
 
     text-align: center;
}
 
 .raisa-header{ /* ---- RAISA Notice Header ---- */
     background: hsl(60, 65%, 85%);
     border: 1px solid hsl(0, 0%, 60%);
}
 
 .pink-header{ /* ---- Pretty Header ---- */
     background: hsl(350, 100%, 85%);
     border: 1px solid hsl(0, 4%, 36%);
}
 .pink-header hr{
     border-color: hsl(0, 4%, 36%);
}
 
 .oracle-header{ /* ---- SPC's 'From the Desk of ORACLE' Header ---- */
     color: hsl(208, 100%, 97%);
     background: hsl(208, 67%, 44%);
     border: 2px solid hsl(0, 0%, 5%);
}
 .oracle-header hr{
     border-color: hsl(208, 100%, 97%);
}
 .img-resize img{ /* ---- Header Icons (See Example Formatting) ---- */
     float: left;
     width: auto;
     height: 8em;
     margin: .5em;
}
 
 blockquote, /* ---- Regular Quote Block ---- */
 div.blockquote{
     background-color: hsl(0, 0%, 96%);
     border: 3px double hsl(0, 0%, 60%);
}
 
 .alt-blockquote{ /* ---- Alternative Quote Block ---- */
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 96%);
     border: 1px solid hsl(0, 0%, 60%);
     border-radius: 1em;
}
 
 .lightweight{ /* ---- Lightweight Quote Block ---- */
     margin: 1em 3em;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 90%);
 
     text-align: left;
}
 
 .card-block{ /* ---- Decorative Quote Block ---- */
     margin: 1em 0;
     padding: .6em 1.2em;
 
     background: hsl(220, 15%, 93%);
     border-left: 8px solid var(--accentColor);
     border-radius: .48em;
}
 
 blockquote hr, div.blockquote hr, .alt-blockquote hr, .lightweight hr, .card-block hr{
     border-color: hsl(0, 0%, 67%);
}
 
 .log-header{ /* ---- Interview/Exploration Log Header ---- */
     margin-bottom: 1em;
     padding: 0 1em;
 
     background: hsl(0, 0%, 96%);
     border: 3px dashed hsl(0, 0%, 60%);
     border-radius: 2em;
}
 
 .report-box{ /* ---- Report Block ---- */
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     border: medium solid hsl(0, 0%, 5%);
}
 .report-box hr{
     border-color: hsl(0, 0%, 5%);
}
 
 .realistic-shadow{ /* ---- Better Shadows ---- */
     margin: 1em 0 2em 0;
     box-shadow:
          0 1px 1px hsla(0, 0%, 0%, .23),
          0 2px 2px hsla(0, 0%, 0%, .18),
          0 4px 4px hsla(0, 0%, 0%, .15),
          0 8px 8px hsla(0, 0%, 0%, .13);
}
 
 .report-box.red-tint{ /* ---- Alternative Report Block Variants ---- */
     background-color: hsl(360, 91%, 86%);
     border-color: hsl(360, 62%, 66%);
}
 .report-box.red-tint hr{
     border-color: hsl(360, 62%, 66%);
}
 
 .report-box.orange-tint{
     background-color: hsl(30, 91%, 86%);
     border-color: hsl(30, 62%, 66%);
}
 .report-box.orange-tint hr{
     border-color: hsl(30, 62%, 66%);
}
 
 .report-box.yellow-tint{
     background-color: hsl(60, 91%, 86%);
     border-color: hsl(60, 62%, 66%);
}
 .report-box.yellow-tint hr{
     border-color: hsl(60, 62%, 66%);
}
 
 .report-box.green-tint{
     background-color: hsl(120, 91%, 86%);
     border-color: hsl(120, 62%, 66%);
}
 .report-box.green-tint hr{
     border-color: hsl(120, 62%, 66%);
}
 
 .report-box.cyan-tint{
     background-color: hsl(180, 91%, 86%);
     border-color: hsl(180, 62%, 66%);
}
 .report-box.cyan-tint hr{
     border-color: hsl(180, 62%, 66%);
}
 
 .report-box.blue-tint{
     background-color: hsl(240, 91%, 86%);
     border-color: hsl(240, 62%, 66%);
}
 .report-box.blue-tint hr{
     border-color: hsl(240, 62%, 66%);
}
 
 .report-box.magenta-tint{
     background-color: hsl(300, 91%, 86%);
     border-color: hsl(300, 62%, 66%);
}
 .report-box.magenta-tint hr{
     border-color: hsl(300, 62%, 66%);
}
 
 .report-box.grey-tint{
     background-color: hsl(210, 9%, 86%);
     border-color: hsl(210, 15%, 42%);
}
 .report-box.grey-tint hr{
     border-color: hsl(210, 15%, 42%);
}
 
 div.o5-box{ /* ---- Overseer Document Block ---- */
     margin: 1em 6em;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 75%);
     border: medium solid hsl(0, 0%, 5%);
}
 div.o5-box hr{
     border-color: hsl(0, 0%, 5%);
}
 
 .faux-source{ /* ---- Mimics "Page Source" Appearance ---- */
     margin-bottom: 1em;
     padding: 0 2em;
 
     background-color: hsl(0, 0%, 100%);
     border: 1px dashed hsl(0, 0%, 67%);
 
     font-family: var(--mono-font);
}
 
 .narration{ /* ---- Mimics the Pages of a Book ---- */
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 63%);
}
 
 .warning-notice{ /* ---- Simple Warning Block (Adapted From 'SCP-3143') ---- */
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
     background-position: center;
     background-repeat: no-repeat;
     border: medium solid hsl(0, 0%, 5%);
 
     text-align: center;
}
 .warning-notice hr{
     border-color: hsl(0, 0%, 5%);
}
 
 .journal{ /* ---- Journal Block (Adapted From 'SCP-4003') ---- */
     margin: 1em 0;
     padding: .9em;
 
     background-image:
       linear-gradient(to top,
          hsl(201, 33%, 84%) 0%,
          hsl(60, 29%, 89%) 8%);
     background-position: 0 8px;
     background-size: 100% 1.3rem;
     border: 1px solid hsl(0, 0%, 80%);
     border-radius: .9em;
 
     font-family: "Architects Daughter", cursive;
}
 .journal p{
     margin: 0;
 
     font-size: 1.3rem;
     line-height: 1.3rem;
}
 
 .sms-message{ /* ---- SMS Message Block ---- */
     float: left;
     clear: left;
     width: 22.4em;
     margin: 0 0 1em;
     padding: 0 1.2em;
 
     background: hsl(0, 0%, 75%);
     border-radius: 2em;
 
     font-size: 112.5%;
     text-align: center;
}
 
 blockquote .collapsible-block-folded,
 .alt-blockquote .collapsible-block-folded,
 .lightweight .collapsible-block-folded,
 .card-block .collapsible-block-folded,
 .report-box .collapsible-block-folded,
 .o5-box .collapsible-block-folded,
 .narration .collapsible-block-folded,
 .journal .collapsible-block-folded,
 div.blockquote .collapsible-block-folded{
     /* ---- For Collapsibles Inside Divs | [CLOSED] ---- */
     padding: .75em 0;
     /* -------- */
}
 blockquote .collapsible-block-unfolded,
 .alt-blockquote .collapsible-block-unfolded,
 .lightweight .collapsible-block-unfolded,
 .card-block .collapsible-block-unfolded,
 .report-box .collapsible-block-unfolded,
 .o5-box .collapsible-block-unfolded,
 .narration .collapsible-block-unfolded,
 .journal .collapsible-block-unfolded,
 div.blockquote .collapsible-block-unfolded{
     /* ---- For Collapsibles Inside Divs | [OPEN] ---- */
     padding-top: .75em;
     /* -------- */
}
 
/* -------- FORMATTING | [SPECIAL] -------- */
 .centered{ /* ---- Center-Aligns Text ---- */
     text-align: center;
}
 
 .justified{ /* ---- Justify-Aligns Text ---- */
     text-align: justify;
}
 
 .indented{ /* ---- Indents Block by ½-inch/2em (Use Within Other Divs) ---- */
     text-indent: 2.4em;
}
 .indented .bibcite,
 .indented .footnoteref,
 .indented ul,
 .indented ol,
 .indented .scp-image-block.block-right,
 .indented h1,
 .indented h2,
 .indented h3,
 .indented h4,
 .indented h5,
 .indented h6,
 .indented .scene-break,
 .indented .footnotes-footer,
 .indented .bibitems{
     text-indent: 0;
}
 
 .rev-red, .rev-green, .rev-blue, .rev-yellow, .terminal-span{
     font-weight: bold;
}
 
 .rev-red{ /* ---- Red Document Revision Text ---- */
     color: hsl(360, 100%, 27%);
}
 
 .rev-green{ /* ---- Green Document Revision Text ---- */
     color: hsl(120, 100%, 27%);
}
 
 .rev-blue{ /* ---- Blue Document Revision Text ---- */
     color: hsl(240, 100%, 27%);
}
 
 .rev-yellow{ /* ---- Yellow Document Revision Text ---- */
     color: hsl(40, 100%, 40%);
}
 
 .terminal-span{ /* ---- Computer Terminal Text ---- */
     font-family: var(--mono-font);
     font-size: 110%;
     letter-spacing: .3px;
}
 
/* ---- Blinking Text Cursor (Adapted From 'Your Very First SCP!') ---- */
 .blinkbar{color: black; animation: blink 1.5s infinite;}
 @keyframes blink{to{opacity: .0;}}
 @keyframes flicker{0% {opacity: .9890; }5% {opacity: .5842; }10% {opacity: .9865; }20% {opacity: .0412; }20% {opacity: .6255; }25% {opacity: .3157; }30% {opacity: .7328; }35% {opacity: .4654; }40% {opacity: .9128; }45% {opacity: .2449; }50% {opacity: .5485; }55% {opacity: .6438; }60% {opacity: .1180; }65% {opacity: .9085; }70% {opacity: .0266; }75% {opacity: .6795; }80% {opacity: .7812; }85% {opacity: .0117; }90% {opacity: .2239; }95% {opacity: .8897; }100% {opacity: .2260; }}
 @keyframes overlay-anim{0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
 
 .lite-heading{ /* ---- Special Heading Area (Adapted From 'SCP-4058') ---- */
     clear: both;
     margin: 3.6em auto;
}
 .lite-heading h3{
     color: hsl(360, 100%, 27%);
}
 .lite-heading hr{
     width: 55%;
     margin: auto;
 
     border-width: medium;
}
 
 div.image-showcase{ /* ---- Alternative Image Showcase ---- */
     width: 25em;
     margin-bottom: 1em;
 
     background: hsl(0, 0%, 100%);
     border: 3px ridge hsl(0, 0%, 5%);
}
 div.image-showcase.block-center{
     margin-right: auto;
     margin-left: auto;
}
 
 .scene-break{ /* ---- Fancy Scene/Section Break ---- */
     width: 3.5em;
     margin: 2em 0;
}
 
 .listPagesNav{ margin-bottom: 5em; }
 .listPagesNav-prev, /* ---- ListPages Navigation (Adapted from 'SCP-5552') ---- */
 .listPagesNav-next{
     width: 45%;
     margin: 0 0 1em;
     padding: 0 2%;
 
     background: hsl(0, 0%, 90%);
     border: 1px solid hsl(0, 0%, 60%);
}
 .listPagesNav-prev{
     float: left;
     text-align: left;
}
 .listPagesNav-next{
     float: right;
     text-align: right;
}
 
 .fade-away{
     background: linear-gradient(to bottom, hsl(0, 0%, 95%), hsl(0, 0%, 5%));
}
 
 .footing::before{ /* ---- Page Footing ---- */
     content: " ";
     position: absolute;
     bottom: 1px;
     left: 0;
     right: 0;
 
     border-bottom: 2px solid hsl(0, 0%, 47%);
}
 .footing{
     position: relative;
     bottom: -2px;
     margin-bottom: 2px;
 
     border-bottom: 1px solid hsl(0, 0%, 47%);
}
 
 .related-flex{ /* ---- Related Articles Box ---- */
     display: flex;
     justify-content: center;
}
 .related{
     margin: 1em 0;
     padding: 0 1em;
 
     background-color: hsl(0, 0%, 100%);
     border: thick solid hsla(0, 0%, 60%, 0.5);
 
     text-align: left;
}
 
 .series-nav{ /* ---- Series Navigation ---- */
     margin: .5em 0;
 
     background:
       linear-gradient(to bottom right,
          hsla(0, 0%, 100%, 1),
          hsla(0, 0%, 50%, .5));
     border: outset 1.5px hsl(0, 0%, 5%);
     border-radius: 2em;
 
     font-size: 85%;
     font-weight: bold;
     text-align: center;
}
 
/* -------- ADVANCED WARNING HEADER --------
 * Adapted From 'SCP-001-JP - indonootoko's Proposal'
 * See the Example at the Top of the Page
**/
 .orderwrapper{
     position: relative;
     width: auto;
 
     text-align: center;
}
 .council{
     position: relative;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 295px;
     height: 295px;
     margin: auto;
 
     background-image: url(https://scp-wiki.wdfiles.com/local--files/scp-style-resource/scp_trans.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 295px 295px;
}
 .ordertitle{
     position: absolute;
     top: 27px;
     left: 0;
     right: 0;
}
 .ordertitle h1{
     color: hsl(0, 0%, 5%);
 
     font-size: 220%;
     line-height: 90%;
}
 .orderdescription{
     position: absolute;
     top: 93px;
     left: 0;
     right: 0;
     width: 100%;
}
 .orderdescription h1{
     color: hsl(0, 0%, 5%);
 
     font-size: 120%;
}
 .orderdescription p{
     color: hsl(0, 0%, 5%);
 
     font-size: 90%;
}
 .itemno{
     position: absolute;
     bottom: 18px;
     left: 0;
     right: 0;
}
 .itemno h1{
     color: hsl(0, 0%, 5%);
 
     font-size: 170%;
}
 
/* -------- YUI TAB BASE -------- */
 .yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* -------- YUI TAB CUSTOMIZATION --------
 * Adapted From 'Black Highlighter Theme'
**/
 .yui-navset *{
     transition:
          color 80ms cubic-bezier(.4, 0, .2, 1),
          background-color 80ms cubic-bezier(.4, 0, .2, 1);
}
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
 
     border-color: hsl(360, 94%, 20%);
     box-shadow: 0 calc(.0625rem * 5) 0 0 hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: hsl(0, 0%, 5%);
     /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: hsl(0, 0%, 99%);
     /* -------- */
     background-image: none;
     border: unset;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: hsl(0, 0%, 96%);
     /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: hsl(360, 100%, 27%);
     /* -------- */
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
 
     background-color: hsl(0, 0%, 96%);
     border-color: transparent;
     box-shadow: 0 0 0 .0625rem hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
 
     /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: hsl(360, 94%, 20%);
     /* -------- */
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
 
     color: hsl(0, 0%, 96%) !important;
     background-image: none;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: hsl(0, 0%, 96%);
     background-color: hsl(360, 94%, 20%);
}
 .yui-navset .yui-nav .selected a:hover{
     cursor: default;
}
 .yui-navset-left .yui-content{
     /* ---- Content Background ---- */
     background-color: hsl(0, 0%, 99%);
     /* -------- */
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border-color: hsl(0, 0%, 60%);
}
 
/* -------- PAGE TAGS -------- */
 #main-content .page-tags{
     border-top: 1px solid hsl(0, 0%, 73%);
}
 #main-content .page-tags a{
     display: inline-block;
     height: .8125rem;
     margin: 0 0 .5rem .75rem;
     padding: .1875rem .3125rem .1875rem 0;
 
     color: hsl(0, 0%, 95%);
     background-color: hsl(0, 0%, 27%);
     border-bottom-right-radius: .25rem;
     border-top-right-radius: .25rem;
 
     line-height: 13px;
     line-height: .8125rem;
     font-size: 11px;
     font-size: .6875rem;
     font-weight: normal;
}
 #main-content .page-tags a:before{
     width: 0;
     height: 0;
     top: -.1875rem;
     left: -.625rem;
     padding: 0 .0625rem .1875rem;
 
     border-color: transparent hsl(0, 0%, 27%) transparent transparent;
     border-style: solid;
     border-width: .5rem .5rem .5rem 0;
}
 #main-content .page-tags a:before,
 #main-content .page-tags a:after{
     content: "";
     position: relative;
     float: left;
}
 #main-content .page-tags a:after{
     width: .25rem;
     height: .25rem;
     top: .2813rem;
     left: -.5rem;
 
     background-color: hsl(0, 0%, 100%);
     border-radius: .125rem;
}
 #main-content .page-tags span{
     max-width: 100%;
     border-top: .5rem solid transparent;
}
 
/* -------- INTERWIKI -------- */
 iframe.scpnet-interwiki-frame{
     position: relative;
     width: 15.734em;
     height: unset;
     margin-bottom: .78em;
     margin-left: 4px;
 
     background-color: hsl(0, 0%, 100%);
     border: 2px solid hsl(0, 0%, 20%);
}
 
/* -------- SHOW-CHANGES HIGHLIGHTS -------- */
 .inline-diff ins::before{
     color: hsl(240, 100%, 93%);
}
 .inline-diff del::before{
     color: hsl(0, 100%, 90%);
}
 .inline-diff ins + del::before,
 .inline-diff del + ins::before{
     color: transparent;
}
 .inline-diff br + ins::before,
 .inline-diff br + del::before,
 .inline-diff ins:first-of-type::before,
 .inline-diff del:first-of-type::before{
     position: absolute;
     display: inline-block;
     left: -1em;
 
     content: "\f111";
     font: normal normal normal 16px/1 "FontAwesome";
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
 
/* -------- PRESENTATION -------- */
 .templateInfo{
     margin: 1em 0;
     padding: 0 1em;
     background: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 87%);
}
 
/* -------- CROQSTYLE ALTERATIONS -------- */
 #edit-page-textarea{ font-family: unset; }
 tt{
     background-color: unset;
     font-size: unset;
     padding: unset;
     margin: unset;
     border-radius: unset;
}
 
/* -------- REDUCED MOTION ACCESSIBILITY -------- */
 @media (prefers-reduced-motion: reduce){
     *, *::before, *::after{
          animation-duration: .001s !important;
          animation-iteration-count: 1 !important;
          transition-duration: .001s !important;
    }
}
 
/* -------- MOBILE MEDIA QUERY -------- */
 @media (max-width: 479px){
     #header h1 a{
          font-size: 85%;
    }
     div.image-showcase{
          width: 90%;
    }
     div.o5-box{
          margin: 1em 0;
    }
}
 
/* -------- NOTE MEDIA QUERY -------- */
 @media (min-width: 480px) and (max-width: 580px){
     #header h1 a{
          font-size: 100%;
    }
     div.image-showcase{
          width: 100%;
    }
     div.o5-box{
          margin: .5em;
    }
}
 
/* -------- MINI TABLET MEDIA QUERY -------- */
 @media (min-width: 581px) and (max-width: 767px){
     #header h1 a{
          font-size: 120%;
    }
}
 @media (max-width: 767px){
     .open-menu a:hover{
          box-shadow: none;
    }
}
 
/* -------- TABLET MEDIA QUERY -------- */
 @media (min-width: 768px) and (max-width: 979px){
     #header h1 a{
          font-size: 140%;
    }
}

 

SCP-5810：关于内疚、恐惧和空虚的内心
作者：Lt Flops
发表于2021年2月26日

---

---

floppyphoenixfloppyphoenix▸ 该作者的更多作品 ◂（原文链接）floppyphoenix▸ 该作者的更多作品 ◂

---

其他语言

常见问题

启动OSCP引导顺序

欢迎，_____

你猛然惊醒，睁开眼睛，握紧的拳头抵在胸前。

……

你还坐在你的椅子上。你皱着眉，松开了扣着掌心的指甲。

我一个人吗？

老旧的终端机上灯光大盛，光标跳动着。

项目编号：丨

不是一个人。

你缩起身，想让自己看起来小一点——出于习惯。你切出显示设置，调低了屏幕亮度。

你脑海中回响过刻薄的内心独白。一遍、一遍、又一遍。它们是你的话，这是当然，但它们感觉很……不完美。你的突触发出信号，想弄清这些噪音的含义。

项目编号：SCP-5810

你强迫自己回忆。

收容等级：Keter（未收容）

你用舌尖抵住门牙后面那个熟悉的角落，挤压着。

特殊收容措施：在疑似SCP-5810的实体出现时，已有若干推定的临时躲避方式。目前为止，最一致的方法为避免思考有关SCP-5810的想法。这一方法仍具有效力，前提是SCP-5810-A可以通过重申自身信念等方式分散注意力，抑制恐惧或不安全感丨

你用颤抖的手指把一缕零散的头发拢到左耳后。

SCP-5810位于研究及居住复合区Area-75；在SCP-5810得到SCP-5810-A的隔离之前，无法认定它已收容。

胆汁涌上了你的喉咙。你吞下它，浑身颤抖。你继续。

描述：SCP-5810为丨

有什么在嘎吱作响。在哪里——在附近的工作区？在通往走廊的门口？还是说它不只是嘎吱声——就在你后面？

你的血管冻结了。你感到恐慌。你向前倒下，在工作站下面缩成一团。大量的负面想法涌上脑海。

你为什么要来这里？

真可悲啊。

面对世界吧。

你本来可以结束一切的。

你为什么要浪费所有人的时间？



在一阵短暂的相对寂静之后，恐慌逐渐褪去。是暖通空调在打开，是吗？一定是的——你这么说服了自己。

起来。

描述：SCP-5810为一II型无定形体，目前占据研究区Area-75。

你透过空荡的房间望向边上的窗户，浓稠的夜色让你很难看清远处。大楼里的灯全都熄灭了，只剩大厅里的一排排紧急灯还亮着。你孑然一身。

……不，我不是。我不是一个人。

你集中注意。你深吸一口气，吸入一片尘土，几乎让你窒息。你泪眼朦胧地瞥向屏幕。

尚不存在对SCP-5810的完整描述；所有已知信息都是间接性由经历者转述的。SCP-5810是一个伺机而动的捕食者，在日落和日出之间跟踪预期的猎物，一个捕食周期在三至四周之间，直到捕食的最后几天才会显示出完整的身形。推测这些特性是丨

你颤栗着，从胸膛深处呼出一口气。


你试着组织接下来的言词，向后靠到椅背上。


闲置的终端运行了模因危害接种检查。


你在黑暗中多久了？

SCP-5810的受害者（编为SCP-5810-A）都会经受轻微焦虑、偏执思想、偶发到多发的恐慌发作，一些案例中还会产生幻觉和妄想。

你这么害怕多久了？

当前未知这是否是（1）对SCP-5810的反应，（2）它捕食期间出现的一系列附带事件，或（3）它捕食猎物的特性。

它追了你多久了？那是……从你第一次转来做长期研究的时候——来填补空位的时候。

你不记得自己是怎么到这里的，但你最后记得的是你的床。你躺在那里，近乎瘫痪、独身一人，这是连续第六天。你的衬衫被汗水浸湿，贴在背上。在你面前的每一个夜晚，站点看起来都更加空荡，直到你感觉是自己是这里仅剩的最后一人。

今夜，角落里的阴影似乎比以往更盛。

SCP-5810以自身存在的意识为食；随着对实体认知的进展，SCP-5810-A实例将感受到越来越强烈的恐惧和物理隔离感。

你没有看。你分散了自己的注意力；你打开自己的个人存储，寻找着你第一次感觉全然孤独时拍下的照片。

+ 上传证明

从您的电脑选择一个文件	IMG_20190113_201633.jpg
对其他人描述文件:	拍摄于研究大楼后方。站点居住区在画面的左边。SCP-5810在远处观看。 别找它。 最多100 个字符（尚余60个字符）
预览:

就是这样吗？足够证明它存在了吗？你上传文件，继续写。

发现

2019年1月11日，收容专家_____ ____在与站点精神病学家Herman Weber博士分享过自身经历之后，首次推理出它的存在。

你加上了自己知道的东西，速度很快。这不重要；只是要做记录。总有人一定要做。

在后来的精神健康诊断中，____声称实体已追逐了她六天，并且在至少三周前就已将她作为目标。

你看不到大厅里的灯光了。只有你屏幕上的灯还亮着。你告诉自己你不是一个人。

____称，实体第一次出现时是从一扇锁住的门下方进入了她的住处，看着她恐惧僵冷地躺了数个小时。

在视线边缘，你发誓门向里滑了一点。

____申请转移站点——否决。

你努力不去看。你直视前方，眼睛一眨不眨。

____的住处空无一人，没有发现|

视雪遮住了你的视野。你紧紧地闭上眼睛。

你一动不动。

心脏在你胸膛里敲打着不规律的跳动。你希望就连它也可以一起关掉。

你一言不发。

它在哪里？它爬过了地上。它在角落的有利位置怒视着你。它在你身后高耸着。它。在。哪里？

你不孤单。

终端的灯光也黯淡下去。你恐慌起来。你大声哭喊。没有声音。恐惧桎梏了你。无数想法在你脑海里翻腾。你的牙齿像虎钳一样紧咬着。你觉得头重脚轻。你试着集中注意——

太迟了。你被黑暗吞没，想触到水面。你眼里全是星星。

一次疼痛的抽噎，你甩出了你的胳膊，然后

+ 检查证明

‡ 授权 / 引用

请按如下方式引用此页：

“SCP-5810”，作者 Lt Flops，来自 SCP 维基。原文链接：https://www.scpwiki.com/scp-5810。译者 Esperanza_Cai，来自 SCP-CN 维基。译文链接：http://scp-wiki-cn.wikidot.com/scp-5810。遵循 CC-BY-SA 协议。

更多详情请参阅授权指南。
授权信息

文件名：IMG_20190113_201633.jpg
图像名：N/A
图像作者： Lt Flops
授权协议：Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
来源链接： http://scp-wiki.wdfiles.com/local--files/scp-5810/IMG_20190113_201633.jpg
备注：照片由我拍摄并编辑。

文件名：IMG_20190113_201828.jpg
图像名：N/A
图像作者：Lt Flops
授权协议：Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
来源链接： http://scp-wiki.wdfiles.com/local--files/scp-5810/IMG_20190113_201828.jpg
备注：照片由我拍摄并编辑。

更多维基文档信息，请见版权信息总览。