Collab
Collab
Author: Rose the Changeling Rose the Changeling
Published on 27 Apr 2021 08:21 
/* 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;
    }
}
rating: 0+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; }
▷ Show Code ◁
/* 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;
    }
}

/*
    Penumbra Theme
    [2020 Wikidot Theme]
    By EstrellaYoshte
    Based on:
       Paperstack Theme by EstrellaYoshte
       Ad Astra Theme by NatVoltaic and stormbreath
       Inkblot Theme by Croquembouche
       Anderson Robotics Theme by Croquembouche
       BHL Style Collapsible by Monkatraz
*/
 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 
#page-content { font-size: .9rem; }
 
body {
    font-family: 'Roboto', sans-serif;
    color: #EDEDED;
    background-color: #2F333C;
    background-image: linear-gradient(
        to bottom, 
        #21252E, #21252E 90px, 
        #21252E 90px, #2F333C 200px, 
        #2F333C 200px, #2F333C 100%);
    background-repeat: no-repeat;
}
 
#main-content {
    top: -1.2rem;
}
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar {
  width: 9px;
  background: transparent;
}
 
::-webkit-scrollbar-track {
  background: #21252E;
}
 
::-webkit-scrollbar-thumb {
  background: #ededed;
  border: none;
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--accentColor);
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
div#header {
    background-image: none;
}
 
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--lgurl);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: -1;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: var(--accentColor);
  font-family: 'Josefin Sans', sans-serif;
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "SCP FOUNDATION");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status {
    color: #ededed;
}
#login-status a {
    color: var(--accentColor);
}
#login-status ul a {
    color: #ededed;
    background: #21252E;
}
#login-status ul a:hover {
    color: var(--accentColor);
}
 
#account-topbutton{
    border: solid 1px var(--accentColor);
}
 
#footer, #footer a {
    background: transparent;
    color: #ededed;
}
#license-area {
     color: #ededed;
}
 
#search-top-box {
    top: 2.2rem!important;
    right: 8px;
}
#search-top-box-form > input[type=submit] {
    border: solid 1px #ededed;
    background: #21252E!important;
    box-shadow: none;
    border-radius: 0;
    color: #ededed;
    transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
    border: solid 1px var(--accentColor);
    box-shadow: none;
    color: var(--accentColor);
}
#search-top-box-form > input[type=text] { display: none; }
 
/* ---- TOP BAR ---- */
 
#top-bar { 
     top: 8.4rem;
     display: flex;
     justify-content: center;
     right: 0;
}
@media (max-width: 768px) {
    .mobile-top-bar {
         display: flex;
         justify-content: center;
         max-width: 100%;
         width: 100%;
         left: 0;
    }
}
#top-bar, #top-bar a {
     color: #ededed;
     transition: color 0s;
}
#top-bar ul li ul {
    border-color: var(--accentColor);
    overflow: hidden;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: #2F333C;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #21252E;
    color: #ededed;
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #21252E; /* top bar hover background color */
    color: var(--accentColor);
    transition: color 0.1s linear;
}
 
/* ---- SIDE BAR ---- */
 
div#side-bar{
    background: #21252E;
    clear: both;
    padding: .8em;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
}
 
#side-bar .heading{
    color: #ededed;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.94rem;
    border-bottom: solid 1px #ededed;
}
#side-bar .side-block {
    border: transparent;
    border-radius: 0;
    box-shadow: none;
    background-color: #21252E;
}
#side-bar .side-block.media {
    background-color:#21252E;
}
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
}
#side-bar .side-block.resources {
    background-color:#21252E;
}
.side-block .menu-item > .image {
    display: none;
}
 
#top-bar div.open-menu a {
    border-radius: 0;
    box-shadow: none;
    color: var(--accentColor);
    background-color: #21252E;
    border: solid 1px #21252E;
}
 
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: #21252E;
        left: -18.6em;
    }
    #side-bar:target {
        border: none;
        box-shadow: none;
    }
    #side-bar .close-menu {
        transition: width 0.5s ease-in-out 0.1s,
                    opacity 1s ease-in-out 0s;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(0,0,0,0.3);
        background-position: 18.6em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 18.6em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #side-bar {
        top: 0;
    }
    #side-bar .heading {
        padding-left: 1em;
        margin-left: -1em;
    }
    #search-top-box {
        top: 107px;
    }
}
 
/* ---- TABS ---- */
 
/* ---- 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 ----*/
 
 .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: var(--accentColor);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: #ededed;
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: #21252E;
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ededed;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--accentColor);
}
 .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;
     color: #ededed;
     background-color: #21252E;
     border-color: transparent;
     box-shadow: none;
}
 .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: var(--accentColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: #21252E;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: #21252E;
     background-color: var(--accentColor);
}
 .yui-navset .yui-content {
    background-color: #21252E;
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
}
 
/*---- TAB ANIMATION by Croquembouche ---- */
 
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: #21252E;
     --linkColour: #ededed;
}
 
 .info-container .collapsible-block-content{
     padding: 0 .5em 30px;
}
 .info-container .collapsible-block-content .wiki-content-table{
     width: 100%;
}
 
/* Ayer's info-bar patch by Monkatraz */
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
}
#page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: " ";
    display: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
     margin: unset;
     margin-top: 4px;
     margin-bottom: 4px;
     margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
    background-color: #21252E;
    border: solid 2px #21252E;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: transparent;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     color: #ededed;
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: var(--accentColor);
}
 
#page-content .creditButtonStandalone p a {
    background-color: #21252E;
    border: solid 2px #21252E;
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px var(--accentColor);
    color: #ededed;
}
#page-content .creditButtonStandalone p a:hover {
    color: var(--accentColor);
}
 
#page-content .modalbox {
     background: #2F333C !important;
     color: #ededed;
     box-shadow: none;
}
.close-credits,
.credit-back {
    filter: grayscale(100%) invert(100%) contrast(275%);
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
     margin: unset;
     border-radius: 0;
     border: solid 2px #21252E;
     box-shadow: 3px 0px 0px 0px var(--accentColor);
     background-color: #21252E;
     margin-top: 4px;
     margin-bottom:4px;
     margin-right: 3px;
}
 
.page-rate-widget-box .rate-points {
    background-color: #21252E !important;
    border: none;
    color: #ededed !important;
    text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: #21252E;
    border-top: none;
    border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: #ededed;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: #21252E;
    color: var(--accentColor);
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: #21252E;
    border: none;
}
.page-rate-widget-box .cancel a {
    color: #ededed;
}
.page-rate-widget-box .cancel a:hover {
    background: #21252E;
    color: var(--accentColor);
}
 
/* ---- PAGE ELEMENTS ---- */
 
.page-source, tt{ 
    font-family: "Fira Code", monospace;
    font-size: 0.87rem;
}
 .code pre, .code p, .code {
    font-family: "Fira Code", monospace;
    font-size: 0.87rem;
    color: #21252E;
}
 
h1 {
    color: var(--accentColor);
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
h2,
h3,
h4,
h5,
h6 {
    color: #EDEDED;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
 
#page-title {
    color: #ededed;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.65rem;
    text-align: center;
    border-color: #ededed;
}
 
/* Clicky links */
a,
a.newpage,
a:visited,
#side-bar a:visited {
    color: var(--accentColor);
    transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: var(--accentColor);
}
a.newpage { filter: hue-rotate(180deg); }
 
/* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */
#page-content .collapsible-block-folded a:hover, #page-content .collapsible-block-unfolded-link a:hover, #page-content .rate-box-with-credit-button .fa-info:hover, #side-bar .side-block.media a:hover, .danger-diamond a:hover {
    background: transparent;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background: var(--linkColour) !important;
}
 
hr{
    background-color: var(--accentColor);
}
 
blockquote,
div.blockquote,
#toc {
    background-color: #21252E;
    border: solid 2px #2F333C;
    box-shadow: -3px 0px 0px -0.1px var(--accentColor);
}
 
.code {
    background-color: #F8F8F8;
    border: solid 3px #2F333C;
    box-shadow: none;
}
.scp-image-block {
    border: solid 8px #21252E;
    border-bottom: solid 0px #21252E;
    box-shadow: 0px 0.26rem 0px 0px var(--accentColor);
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: #21252E;
    border: solid 4px #21252E;
    color: #ededed;
    font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px var(--accentColor);
    color: var(--accentColor);
    background-color: #21252E;
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px var(--accentColor);
    /* set border for table content */
}
 
/* fancy collapsible */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: #21252E;
    transition: background 0.25s linear;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ ";
}
#page-content .collapsible-block-link {
    text-decoration: none;
    color: #ededed;
    font-weight: bold;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: var(--accentColor);
}
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0px -0.26rem 0px 0px var(--accentColor);
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Selection */
::selection {
    background: var(--accentColor);
    color: #ffffff;
}
 
/* Footnotes */
.hovertip {
    font-size: .9rem;
    background-color: #21252E !important;
    border: solid 1px var(--accentColor) !important;
}
.footnotes-footer {
    background-color: #21252E;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    box-shadow: -0.24rem 0px 0px 0px var(--accentColor);
}
.footnotes-footer .title {
    color: #ededed;
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/* Tags */
#main-content .page-tags a {
    margin-top: .18rem;
}
.page-tags span {
    border-top: 1px solid #ededed;
}
 
/* Pop-Up Windows */
.owindow {
    background-color: #21252E;
    border-color: var(--accentColor);
}
 
.owindow .modal-header {
    background-color: #21252E;
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: #21252E;
    color: #var(--accentColor);
    border-bottom: 1px solid #2F333C;
}
 
.owindow .button-bar a {
    background-color: #21252E;
    border-color: var(--accentColor);
    color: #ededed;
}
.owindow .button-bar a:hover {
    background-color: var(--accentColor);
}
 
/* Edit Buttons */
.buttons .btn {
    background-color: #21252E;
    border-color: var(--accentColor);
    color: var(--accentColor);
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: var(--accentColor);
    color: #21252E;
}
 
/* Edit Lock Info*/
#lock-info {
    background-color: #21252E;
    border-color: #ededed;
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: #21252E;
}
 
/* Page-History Current */
.pager .current {
    background-color: var(--accentColor);
    border-color: #ededed;
}
 
/* History Compare */
.inline-diff ins, .inline-diff del {
    color: #21252E;
}
 
/* ---- INTERWIKI ---- */
 
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ---- CUSTOM SYNTAX ---- */
 
.darkbox {
    background-color: #21252E;
    border-left: solid 0.26rem var(--accentColor);
    border-right: solid 0.26rem var(--accentColor);
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
 
.lightbox {
    background-color: #ededed;
    color: #21252E;
    border-left: solid 0.26rem var(--accentColor);
    border-right: solid 0.26rem var(--accentColor);
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
.lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6 {
    color: #21252E;
}
 
.limit {
    margin-bottom: -1rem;
    z-index: 5;
 
}
.anchor {
    position: sticky;
    height:0;
    top: 0;
    z-index: 5;
}
.sidebox {
    background-color: #21252E;
    border-top: solid 2px var(--accentColor);
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
/* Sidebox mobile optimization, courtesy of Woed */
@media (max-width: 1290px) {
   .sidebox {
        width: auto;
        max-width: 65vw!important;
        border: none;
        padding-left: 0.4rem; padding-right: 0.4rem;
        top: 0.75rem;
        right: calc(((100vw - 45.8rem)/2) * -1);
        left: initial;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        overflow: visible;
    }
 
    .sidebox::before, .sidebox::after {
        content: " ";
        position: absolute;
        right: 0;
    }
 
    .sidebox::before {
        top: calc(50% - 0.75rem);
        width: 0;
        height: 0;
        border-top: 0.75rem solid transparent;
        border-bottom: 0.75rem solid transparent;
        border-right: 0.75rem solid var(--accentColor);
        transition: border 0.1s ease-in-out 0.1s;
        z-index: 10;
    }
 
    .sidebox::after {
        top: 0;
        max-width: 0.75rem;
        width: 100%;
        height: 100%;
        box-shadow: 0.15rem 0 0 0 var(--accentColor);
        max-height: calc(100vh - 18rem);
        background-color: #21252E;
        z-index: -1;
        transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s;
    }
 
    .sidebox > * {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out 0.2s;
        -o-transition: opacity 0.2s ease-in-out 0.2s;
        transition: opacity 0.2s ease-in-out 0.2s;
    }
 
    .sidebox:hover {
        overflow: visible;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 0);
        clip-path: inset(-0.125rem -0.25rem 0 0);
        -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
    }
 
    .sidebox:hover::before {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
    }
    .sidebox:hover::after {
        box-shadow: 0 -0.125rem 0 0 var(--accentColor);
        right: 0;
        max-width: 100%;
    }
    .sidebox:hover > * {
        opacity: 1;
    }
}
 
@media (max-width:768px) {
    .sidebox, .sidebox:hover {
        right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
    }
}
 
:root {
  --accentColor: #1EB5E8;
  --lgurl: url("https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/logo.png");
}

NOTICE FROM THE FOUNDATION RECORDS AND SECURITY ADMINISTRATION

You are viewing an archived revision of the main document for SCP-6000. Information present may be inaccurate or fail to reflect the final revision.

Item#: 6000
Level3
Containment Class:
keter
Secondary Class:
{$secondary-class}
Disruption Class:
ekhi
Risk Class:
warning
link to memo
UP.png

SCP-6000-2

Assigned Site Site Director Research Head Assigned Task Force
Provisional Site-09 Ling Hua Dr. Cole Thervene ACB Lamba-01

Special Containment Procedures: SCP-6000-1 is surrounded by a 0.5-meter security perimeter stationed by Armed Command Battalion Lamba-01. ("God's Children")1 Every month, one Foundation employee possessing level 4 clearance must enter SCP-6000-1 while escorted by ACB Lamba-01. Personal inside SCP-6000-1 are considered M.I.A.

SCP-6000's research and containment teams are tasked with devising an alternative and permanent containment procedure for SCP-6000-2.

Description: SCP-6000 is the collective designation for a group of anomalies hereby referred to as SCP-6000-1, and -2.

SCP-6000-1 refers to the Foundation sites that have been colonized by SCP-6000-3. Flora and tree branch originating from SCP-6000-3 cover the outside of SCP-6000-1 and cannot be destroyed by traditional means. Living or non-living organisms that enter SCP-6000-1 cannot be tracked via normal, digital, or anomalous means. Satellite imagery depicts SCP-6000-1 as a normal Foundation site.

SCP-6000-2 is a highly resistant and sapient Maple tree, approximately 300 meters tall, capable of communication via telekinesis. It is also capable of growing with immense height and strength, with the ability to manifest any object of its desire.

History: On May 20th, 2021, personal at Site-63's Cafeteria Wing witnessed a flash of light before a set of items appeared on the floor. These include:

  • 40 kilograms of metal scrap, mostly comprised of Tungsten.
  • 63 kilograms of concrete.
  • Rucksacks containing 1.4 million US dollars.
  • A leaf bearing the words, " I hope you enjoy the gift! Please use them to their fullest potential."

This prompted an immediate investigation into the source of the phenomenon as similar incidents began occurring on multiple Foundation facilities, the majority of which are harmless. The items manifested varied and were stored, decommissioned or sold off.

The last record of this incident occurred on when June 13th 2021 when Dr Cole Thervene reported a leaf had manifested in his office area, which beared the words:

It appears you have not utilized the items I gave as I'd hoped. Do not worry, as I'll provide a present tomorrow.

On June 14th, 2021, an amalgamation of tree bark appeared within Site-63 (Designated SCP-6000-1), causing heavy damage and piercing the outer roof. Personnel within Site-63 were unable to escape and rescue teams faced similar results. Due to this, no further rescue attempts were made and a security perimeter was established.

The following day, all Foundation personnel reported hearing a voice speaking the words, "Come to Site-63." Personnel then approached SCP-6000-1 whilst accompanied by Armed Command Battalion Lamba-01 ("God's children").
A communication attempt was made.

Interviewer: Dr. Cole Thervene

Interviewee: SCP-6000-2

BEGIN LOG

Dr. Thervene: Hello? Whom am I speaking?

SCP-6000-2: That is irrelevant, doctor. I have requested your attention because I wish to make an offer.

Dr. Thervene: What kind of offer?

SCP-6000-2: I request… One of your staff to enter this facility every year. Not just any staff, a high-ranking one. In exchange, I shall grant any request of your wish.

Dr. Thervene: And why should the Foundation obey your requests?

SCP-6000-2: There will be consequences and I highly suggest you follow along.

Dr. Thervene: And what happened to the people in there? Did you hurt them?!

SCP-6000-2: No, I did not. I promise you, doctor. They are safe.

END LOG


The following month, D-4791 was disguised as Foundation staff and ordered to enter SCP-6000-1. This attempt resulted in Site-72 reporting a "tree" appearing within before communication was lost. No survivors were found. ACB Lamba-01 began an assault on SCP-6000-2 which failed.

Interviewer: Dr. Cole Thervene

Interviewee: SCP-6000-2

BEGIN LOG

Commander of ACB Lamba-01 is ordering a cease of fire as Dr Thervene approaches SCP-6000

ACB Lamba-01-A: Where are you going?

Dr. Thervene: I just wanna talk to it for a second.

ACB Lamba-01-A: No, you are ordered to return to Provisional Site-09.

Dr. Thervene sighs

Dr. Thervene: Fine.

SCP-6000-2: What do you wish to discuss with me, doctor?

Dr. Thervene: Well, it's just- why did you do that?

SCP-6000-2: I already told you; there will be consequences if my request was not fulfilled. Did you think I'm that naive? That whole scenario was your wrongdoing.

Dr. Thervene: But there are hundreds of innocent lives trapped in there! Let's not forget about the possible containment breach of anomalies within.

SCP-6000-2: Do not worry about that as I've already had them trapped inside. They're not going anywhere.

Dr. Thervene: How do I know that?

SCP-6000-2: Here is a better question; how many SCPs you've reported escaping after my presence?

Dr. Thervene is silent.

SCP-6000-2: Exactly. Oh and one more thing, Cole. Since you've failed to fulfil my request, I require two high-ranking Foundation employees. Both of them must enter one of these sites I've taken over.

Dr. Thervene: Two?! Why did you increase it?!

SCP-6000-2: Take it as another punishment for not fulfilling my request. Remember, doctor. I am not playing games with you or the Foundation.

END LOG

Addendum 6000.2: Neutralization/Containment/Rescue efforts

Attempt 1: Operatives were ordered to cut down SCP-6000-3.

Results: SCP-6000-2 was too resistant.

Attempt 2: Breach the interior perimeter of SCP-6000-1 utilizing explosives.

Results: The explosives destroyed the perimeter. However, the walls were quickly repaired by anomalous means. Further attempts resulted in similar results.

Attempt 3: Usage of SRA's2 to nullify it's effects.

Results: The attempt was unsuccessful. It is unclear if this is due to SCP-6000-2 being immune to SRA's or manipulated reality in an alternate method.

Attempt 4: Usage of incendiary weapons to damage SCP-6000-3.

Results: The attempt was unsuccessful as there were no signs of SCP-6000-2 being damaged or after-burn effects.

[37 attempt records omitted for brevity]

Footnotes
colerose
page revision: 47, last edited: 22 May 2021 14:57
Edit Rate (0) Tags Discuss History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License