SCP-4485 - Such Black Light

Co-authored by djkaktus and Woedenaz

+ Show component code

- Hide component code

:root {
--sidebar-width-on-desktop: calc(var(--base-font-size) * (266 / 15));
--body-width-on-desktop: 45.75rem;
}
@media only screen and (min-width: 56.25rem) {
#content-wrap {
display: flex;
position: initial;
flex-direction: row;
flex-grow: 2;
width: calc(100vw - (100vw - 100%));
max-width: inherit;
height: auto;
min-height: calc(100vh - var(--final-header-height-on-desktop, 10.125rem));
margin: 0 var(--sidebar-width-on-desktop, 13.6rem) 0 calc(var(--sidebar-width-on-desktop, 13.6rem) * -1 / 2);
}

#main-content {
position: initial;
width: var(--body-width-on-desktop, 45.75rem);
max-width: var(--body-width-on-desktop, 45.75rem);
max-height: 100%;
margin: 0 auto;
padding: 2rem 1rem;
}

#page-content {
max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
}

#side-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
grid-area: side-bar;
width: var(--sidebar-width-on-desktop, 13.6rem) !important;
min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
max-height: 100vh;
padding-right: 2.5rem;
padding-left: 0.5rem;
overflow-y: scroll;
transition:
translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
padding 300ms linear,
margin 300ms linear;
border: none;
border-color: rgba(var(--swatch-tertiary-color, 170, 170, 170), 0.4);
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
translate: calc(var(--sidebar-width-on-desktop, 13.5rem) * -1 - 1rem);
direction: rtl;
scrollbar-width: thin;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
scrollbar-color:
rgba(var(--swatch-primary-darker), 0.1) /* Thumb */
rgba(var(--swatch-tertiary-color), 0.05); /* Track */
}

#side-bar::-webkit-scrollbar-track {
background-color: rgba(var(--swatch-secondary-color, 244, 244, 244), 0.8);
}

#side-bar::-webkit-scrollbar,
#side-bar::-webkit-scrollbar-thumb,
#side-bar::-webkit-scrollbar-corner {
width: 0.5rem;
border-right-width: calc(100vw + 100vh);
border-right-style: inset;
border-color: inherit;
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 0);
}

#side-bar:is(:hover, :active, :focus-within) {
margin-right: 2.25rem;
padding-right: 0.25rem;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(var(--swatch-primary-darker), 1);
background-color: rgba(var(--sidebar-bg-color, 255, 255, 255), 1);
translate: calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0));
scrollbar-color:
rgba(170, 170, 170, 1) /* Thumb */
rgba(252, 252, 252, 1); /* Track */
scrollbar-color:
rgb(var(--swatch-primary-darker, 170, 170, 170), 1) /* Thumb */
rgb(var(--swatch-menubg-color, 252, 252, 252), 1); /* Track */
}

#main-content::after {
content: " ";
display: flex;
position: fixed;
top: 0;
left: 1rem;
align-items: center;
justify-content: center;
width: 1rem;
height: 100%;
max-height: 100%;
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
background: url("https://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center left 1rem;
background-size: 1rem 12.875rem;
pointer-events: none;
}

#side-bar:is(:hover, :active, :focus-within) + #main-content::after {
left: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
width: 0rem;
transition:
left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0;
background-position: center left calc(var(--sidebar-width-on-desktop, 14.5rem) * -1);
font-size: 0em;
}

#main-content::before {
content: " ";
position: absolute;
z-index: 9;
top: var(--final-header-height-on-desktop, 0);
left: 0;
width: var(--sidebar-width-on-desktop, 14.5rem);
height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
transition:
translate 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 0.5;
background-color: rgb(var(--swatch-alternate-color, 0, 0, 0));
pointer-events: none;
translate: calc(var(--sidebar-width-on-desktop, 14.5rem) * -1 + 1rem);
}

#side-bar:is(:hover, :active, :focus-within) + #main-content::before {
translate: 0;
opacity: 0;
}

#side-bar .side-block {
margin-top: 1em;
padding-left: 0.25em;
border-right-width: 0rem;
border-left-width: 0rem;
border-radius: 0;
background-color: rgb(0, 0, 0, 0);
direction: ltr;
}

#side-bar .scpnet-interwiki-wrapper {
direction: ltr;
}

/* Print Friendly Formatting by Estrella */
body.print-body {
--sidebar-width-on-desktop: 0;
}
body.print-body #main-content::before,
body.print-body #main-content::after {
display: none;
}
}

Item#: 4485

Containment Class: euclid

Secondary Class: none

Disruption Class: keneq

Risk Class: warning

SCP-4485 COMPREHENSION CHECK

EYE TRACKING ACTIVATED. ACTIVITY WILL BE MONITORED. DO NOT PROCEED WITHOUT READING IN FULL.

Employee Alias

Employee ID

Full understanding of SCP-4485 is required by all foundation employees. As such, all documents pertaining to SCP-4485 included in this database entry and a full understanding of each document is required before progress to the next series of documents is allowed. Due to the complexity of the anomaly, the documents will be displayed in chronological order. Your direct supervisor will monitor your progress and give permission to continue when satisfactory understanding is obtained.