Link to article: SCP-5759.
:root {
/* VARIABLES */
--backgroundColor: #0c0c0c;
--divColor: var(--textColor);
--textColor: #ffffff;
--headerTitle: "SCP FOUNDATION";
--headerSubtitle: "SECURED INTERNAL DATABASE";
--darkAccent: var(--textColor);
--accentColor: var(--textColor);
/* Author Label "by" Change */
--swatch-tertiary-color: var(--textColor);
}
/* HEADER */
#header {
background-image: none;
}
div#extra-div-1 {
height: 140px;
width: 100%;
top: 0;
position: absolute;
background-color: var(--backgroundColor);
background-image: var(--backgroundColor);
}
div#extra-div-2 {
height: 23px;
width: 100%;
top: 140px;
position: absolute;
background: var(--backgroundColor);
}
div#container-wrap {
background: var(--backgroundColor);
}
#header h1 a {
color: transparent;
text-shadow: none;
font-family: 'Fira Code', monospace;
margin-left: -95px;
}
#header h1 a::before {
content: var(--headerTitle);
color: var(--textColor);
font-variant: small-caps;
}
#header h2 span {
color: transparent;
text-shadow: none;
font-family: 'Fira Code', monospace;
margin-left: -95px;
}
#header h2 span::before {
content: var(--headerSubtitle);
color: var(--textColor);
text-transform: uppercase;
}
/* MAIN PAGE ELEMENTS */
::selection {
background: #ededed;
color: black;
}
body {
background-color: var(--backgroundColor);
color: var(--textColor);
font-family: 'Fira Code', monospace;
}
hr {
border-bottom: 1px solid var(--textColor);
border-top: 1px solid var(--textColor);
background: transparent;
}
.page-source, tt{
font-family: "Fira Code", monospace;
font-size: 0.87rem;
}
.code {
background-color: var(--textColor);
color: var(--backgroundColor);
border: none;
box-shadow: none;
font-family: 'Fira Code', monospace;
}
.code pre, .code p, .code {
font-family: "Fira Code", monospace;
font-size: 0.87rem;
color: var(--backgroundColor);
}
h1 {font-size: 225%;}
h2 {font-size: 200%;}
h3 {font-size: 175%;}
h4 {font-size: 150%;}
h5 {font-size: 125%;}
h6 {font-size: 100%;}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Fira Code', monospace;
font-weight: bold;
color: var(--textColor);
}
#page-title {
display: none;
}
blockquote,
div.blockquote,
#toc {
background-color: var(--divColor);
border: 1px solid var(--divColor);
box-shadow: 0px 0px 7px var(--backgroundColor);
}
.scp-image-block .scp-image-caption {
background-color: var(--divColor);
border: none;
color: var(--textColor);
font-size: 0.84rem;
}
#page-content .wiki-content-table tr th {
border: solid 1px var(--textColor);
color: var(--backgroundColor);
background-color: var(--textColor);
}
#page-content .wiki-content-table tr td {
background-color: var(--divColor);
border: solid 1px var(--textColor);
}
a {
color: var(--accentColor);
}
a:visited {
color: var(--darkAccent);
}
a:hover {
background-color: var(--accentColor);
color: var(--backgroundColor);
text-decoration: underline;
}
#page-content a:hover::before {
background-color: var(--accentColor);
color: var(--backgroundColor);
content:">";
text-decoration: underline;
}
.page-tags span {
border-top: 1px solid var(--textColor);
margin-top: 0.18rem;
}
/* RATING MODULE */
.page-rate-widget-box {
border: solid 2px var(--divColor);
background-color: var(--divColor);
margin-top: 4px;
margin-bottom:0.70em;
margin-right: 1em;
}
.page-rate-widget-box .rate-points {
background-color: var(--divColor) !important;
border: none;
color: var(--textColor) !important;
text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--divColor);
border-top: none;
border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: var(--accentColor);
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: var(--accentColor);
color: var(--backgroundColor);
}
.page-rate-widget-box .cancel {
background: transparent;
background-color: var(--divColor);
border: none;
}
.page-rate-widget-box .cancel a {
color: var(--accentColor);
}
.page-rate-widget-box .cancel a:hover {
background: var(--accentColor);
color: var(--backgroundColor);
}
.page-rate-widget-box .cancel a:hover::before,
.page-rate-widget-box .rateup a:hover::before,
.page-rate-widget-box .ratedown a:hover::before {
display: none;
}
/* SIDEBAR */
#side-bar a,
#side-bar a:visited {
color: var(--textColor);
transition: color 0.15s linear;
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
color: var(--textColor);
text-shadow: none;
}
#side-bar a:hover {
background-color: var(--accentColor);
color: var(--backgroundColor);
text-decoration: underline;
}
#side-bar a:hover::before {
background-color: var(--accentColor);
color: var(--divColor);
content:none;
text-decoration: underline;
}
#side-bar .heading {
color: var(--textColor);
}
#side-bar .side-block {
border: 3px solid var(--divColor);
box-shadow: 0 0.125em 0.375em var(--divColor);
}
/* Media Block */
#side-bar .side-block.media {
background-color: var(--divColor);
background-position-y: -3em;
background-size: 100%;
}
/* Resources Block */
#side-bar .side-block.resources {
background-color: var(--divColor);
background-position-y: -11.6em;
background-size: 100%;
}
/* Main Side Blocks */
#side-bar .side-block {
background-color: var(--divColor);
background-size: 100%;
}
/* Interwiki Block */
#interwiki .side-block {
background-color: var(--divColor);
background-position: bottom;
background-size: 100%;
}
#interwiki .side-block .menu-item a {
color: var(--textColor);
}
/* Toggle Sidebar Adaptation */
#top-bar .open-menu a {
border: 0.2em solid var(--backgroundColor);
background-color: var(--divColor);
color: var(--backgroundColor);
}
/* BOTTOM BAR */
#license-area {
color: var(--textColor);
background-color: var(--divColor);
border-top: solid 0.1rem var(--accentColor);
}
#footer-bar {
border: none;
padding: 0 0 1em;
margin: 0;
max-width: 100%;
background-color: var(--divColor);
}
#footer {
background: transparent;
color: var(--textColor);
align-items: center;
}
#footer > a {
color: var(--textColor);
}
/* TOPBAR */
#top-bar {
background: linear-gradient(to right, transparent 30%, var(--divColor) 55%, transparent 100%);
padding-right: 3.125rem;
}
#top-bar ul li a {
border: none;
color: var(--textColor);
}
#top-bar ul li:hover a,
#top-bar ul li:hover ul li a {
background: var(--divColor);
border: none;
color: var(--textColor);
}
#top-bar ul li:hover a:hover {
background: var(--backgroundColor);
color: var(--textColor);
}
#top-bar ul li:hover ul li a {
padding-bottom: 0.0938rem;
padding-top: 0.0938rem;
}
#top-bar ul li ul {
border: 0.0625rem solid var(--divColor);
}
#top-bar .open-menu a {
background-color: var(--textColor);
border-color: var(--backgroundColor);
color: var(--backgroundColor);
}
@media (max-width: 768px) {
.mobile-top-bar {
display: flex;
justify-content: center;
max-width: 100%;
width: 100%;
left: 0;
background: var(--divColor);
}
.mobile-top-bar ul li a{color: var(--textColor);}
}
/* MY ACCOUNT */
#login-status {
color: var(--textColor);
}
#login-status a {
color: var(--accentColor);
}
#account-topbutton {
border: none;
margin-left: 0.35em;
padding: 0 0.45em;
font-size: 1em;
position: relative;
}
#account-topbutton::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--divColor);
opacity: 0.125;
}
#account-options {
width: 6.25rem;
background: var(--backgroundColor);
border: none;
border-right: solid 3px var(--divColor);
}´
#account-options::before,
#account-options::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
#account-options::before {
background: var(--backgroundColor);
}
#account-options::after {
background-color: var(--divColor);
mix-blend-mode: overlay;
}
#account-options > ul {
position: relative;
z-index: 1;
}
#account-options ul a {
color: var(--accentColor);
background-color: transparent;
font-weight: bold;
letter-spacing: 0.01em;
padding: 0.25em 0.5em;
text-align: right;
}
#account-options ul a:hover {
color: var(--divColor);
background: var(--backgroundColor);
}
/* SEARCH BOX - FORKED FROM PENUMBRA*/
#search-top-box {
top: 2.2rem!important;
right: 8px;
}
#search-top-box-form > input[type=submit] {
border: solid 1px var(--textColor);
background: var(--backgroundColor)!important;
box-shadow: none;
border-radius: 0;
color: var(--textColor);
transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
border: solid 1px var(--textColor);
box-shadow: none;
color: var(--textColor);
background: var(--divColor);
}
#search-top-box-form > input[type=text] { display: none; }
/* -----== AGENT ==----- */
/* LINK CHANGES */
a,
a:visited {
background-color: var(--textColor);
color: var(--backgroundColor);
}
a:hover {
text-decoration: underline;
background-color: var(--textColor);
}
#side-bar a,
#side-bar a:visited {
color: var(--backgroundColor);
}
#page-content a:hover::before {
background-color: var(--textColor);
}
/* DIV CHANGES */
#top-bar ul li a,
.page-rate-widget-box,
.page-rate-widget-box .rate-points,
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel,
.page-rate-widget-box .cancel a,
.scp-image-block .scp-image-caption,
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li,
.hovertip,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#side-bar .side-block,
#interwiki .side-block,
#account-topbutton::before,
#account-options::after,
#search-top-box-form input[type=submit]:hover,
.owindow .modal-header,
.owindow .title,
#lock-info,
blockquote,
div.blockquote,
#toc {
color: var(--backgroundColor) !important;
}
#page-content .wiki-content-table tr td {
background-color: var(--backgroundColor);
color: var(--textColor);
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a{
color: var(--textColor);
background-color: var(--backgroundColor);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus{
color: var(--backgroundColor);
background-color: var(--textColor);
}
#top-bar ul li:hover a:hover {
color: var(--textColor) !important;
}
#top-bar {
background: linear-gradient(to right, transparent 30%, var(--divColor) 100%);
padding-right: 3.125rem;
}
.page-rate-widget-box .cancel a:hover,
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: var(--backgroundColor);
color: var(--textColor) !important;
}
#license-area,
#footer-bar {
color: var(--backgroundColor);
}
.box {
position: relative;
padding: 0.5em;
margin: 0.5em;
box-shadow: 2px 1.5px 1px var(--textColor), 0 0 0px 1px var(--textColor);
overflow-wrap: break-word;
color: var(--textColor);
}
.report {
display: block;
width: 60%;
margin: 0.625rem auto;
padding: 0.3125rem 0.9375rem;
border: dashed 0.0625rem var(--textColor);
background: url(http://scpdsandbox.wdfiles.com/local--files/fragment%3Adarkartists-fooling-around-box-3/logo.png) center center no-repeat;
}
.system-box {
position: relative;
padding: 0.5em;
margin: 0.5em;
box-shadow: 2px 1.5px 1px var(--textColor), 0 0 0px 1px var(--textColor);
overflow-wrap: break-word;
color: var(--textColor);
background: url(http://scpdsandbox.wdfiles.com/local--files/fragment%3Adarkartists-fooling-around-box-3/logo.png) center center no-repeat;
}
width: 100%;
border-bottom: 1px solid #AAA; border-right: 0px solid #AAA; text-align: center; width: 25%;
border-bottom: 0px solid #AAA; border-right: 0px solid #AAA; text-align: center; width: 25%;
width: 100%;
border-bottom: 1px solid #AAA; border-right: 0px solid #AAA; text-align: center; width: 25%;
width: 100%;
border-top: 1px solid #AAA; border-right: 0px solid #AAA; text-align: center; width: 25%;
:scp-wiki:component:toggle-sidebar
[info]
:scp-wiki:component:author-label-source
[info]
:scp-wiki:component:author-label-source
[info]
:scp-wiki:component:image-features-source
[info]
box
box
box
report
box
box
system-box
box
box
box
box
footer-wikiwalk-nav