SCP Offices Sigma-9 Theme

Rating:

rating: 0+x

Rating w/ Credit Module:

  • rating: 0+x

Usage

To import this theme to your page, put the following anywhere inside it:

[[include theme:scp-offices-sigma]]

Please do not import this theme using the standard CSS @import method. No one can stop you from doing that, but importing the theme using [[include]] adds your page to a list of Backlinks. This is useful for seeing what pages would be affected when this theme is updated, and allows any errors caused by that to be noticed and corrected much faster.

You can view any page's Backlinks by clicking "+ Options" at the bottom of the page, then "Backlinks".


Examples

scpoffices_logo.svg

SCP Offices Theme

A horizontal rule can be created with 5 hyphens "-" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.

More text


That's a horizontal rule

Nested blockquotes

This is a table
You should know how to make these
already

The monospace font used in the body, the titles and header is IBM Plex Mono.


Source code

/*
    Sigma-9 SCP Offices Theme
    [2020 Wikidot Theme]
    By Dr Lekter and DrMacro
    Adapted from BHL SCP Offices Theme by Woedenaz
    Based on SCP Sigma 9 Theme created by Aelanna and Dr Devan
*/
 
@import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700');
 
:root {
    --body-font: 'IBM Plex Mono', monospace;
    --header-font: 'IBM Plex Mono', sans-serif;
    --title-font: 'IBM Plex Mono', monospace;
    --mono-font: "IBM Plex Mono", monospace;
    --white-monochrome: 238, 238, 216;
    --pale-gray-monochrome: 233, 231, 204;
    --light-gray-monochrome: 147, 147, 147;
    --gray-monochrome: 127, 127, 127;
    --dark-gray-monochrome: 101, 101, 101;
    --black-monochrome: 25, 20, 16;
    --bright-accent: 145, 179, 153;
    --medium-accent: 145, 179, 153;
    --dark-accent: 105, 133, 111;
 
    --gradient-header: linear-gradient(0deg,rgb(var(--medium-accent)) 0%,rgb(var(--black-monochrome)) 90%,rgb(var(--black-monochrome)));
    --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--medium-accent), 0.45), rgba(var(--medium-accent), 0.55));
 
    scrollbar-color: rgba(var(--white-monochrome), 1) rgba(var(--bright-accent), 0.50);
}
 
/* HEADER */
div#container-wrap {
    background-image:
        repeating-linear-gradient(45deg,hsla(0, 0%, 100%, 0),
        hsla(0, 0%, 100%, 0) 0.25vh,
        rgba(88, 88, 88, 0.1) 0.35vh,
        rgba(88, 88, 88, 0.2) 0.5vh),
 
        repeating-linear-gradient(180deg,
        hsla(0, 0%, 100%, 0),
        hsla(0, 0%, 100%, 0) 0.25vh,
        rgba(88, 88, 88, 0.1) 0.35vh,
        rgba(88, 88, 88, 0.2) 0.5vh),
 
        linear-gradient(to bottom,
        rgba(var(--black-monochrome), 1) 8.75rem,
        rgba(var(--light-gray-monochrome), 1) 7.625rem,
        rgba(var(--gray-monochrome), 1) calc(91% - 0.125rem),
        rgba(var(--dark-gray-monochrome), 1) calc(99% - 0.125rem));
 
    background-size: 100% 8.7rem, 100% 8.7rem, 100% 10.08rem;
    background-repeat: no-repeat;
}
 
#header {
    background: url(/local--files/drmacro/scpoffices_logo.svg) 13px 41px no-repeat;
    background-size: 94px 94px;
}
 
#header h1 a {
    font-size: 150%;
    color: rgb(var(--white-monochrome));
    font-family: var(--title-font);
    font-weight: 900;
    text-shadow: .063rem .063rem .063rem #0c0c0c;
    letter-spacing: -.02em;
    line-height: 0;
}
 
#header h2 span {
    color: rgb(var(--bright-accent));
    font-family: var(--title-font);
    text-shadow: .063rem .063rem .063rem #0c0c0c;
    font-weight: 400;
    line-height: 0;
    font-size: .945rem;
}
 
@media (max-width: 767px) {
    #header {
        background: url(/local--files/drmacro/scpoffices_logo.svg) 2px 72px no-repeat;
        background-size: 50px 50px;
    }
    #header h1 a {
        font-size: 80%;
    }
    #header h2 span {
        font-size: .700rem;
    }
}
 
/* LOG-IN INFO */
#login-status {
    color: rgb(var(--white-monochrome));
}
#login-status a {
    color: rgb(var(--white-monochrome));
}
 
#login-status ul a {
    color: rgb(var(--bright-accent));
    background: rgb(var(--white-monochrome));
}
 
#login-status ul a:hover {
   color: rgb(var(--dark-accent));
   font-weight: bold;
}
 
/* SEARCH BAR */
#search-top-box-input {
    background-color: rgb(var(--gray-monochrome));
}
#search-top-box-input:hover, #search-top-box-input:focus {
    border: solid 1px rgb(var(--white-monochrome));
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--light-gray-monochrome));
    box-shadow: inset 1px 1px 3px rgba(0,0,0,.8);
}
#search-top-box-form input[type=submit] {
    background: rgb(var(--bright-accent));
    color: rgb(var(--white-monochrome));
    transition: background 0.25s;
}
#search-top-box-form input[type=submit]:hover, #search-top-box-form input[type=submit]:focus {
    background: rgb(var(--dark-accent));
    color: rgb(var(--white-monochrome));
}
 
/* TITLE */ 
#page-title {
    font-size: 210%;
    font-family: 'IMB Plex Mono';
    font-weight: 600;
}
 
h1, h2, h3, h4, h5, h6, #page-title {
    font-family: var(--title-font);
    color: rgb(var(--black-monochrome));
}
h1 {
    margin: .7em 0 .6em;
    padding: 0 0 .25em;
    font-weight: 700;
}
h2, h3, h4, h5, h6 {
    margin: .5em 0 .4em;
    padding: 0;
    font-weight: 900;
    letter-spacing: .063rem;
}
 
@media (max-width: 767px) {
    #page-title {
        font-size: 180%
    }
}
 
/* TOP-BAR SETTINGS */
#top-bar ul li ul {
    border: 0px;
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-top: 1px solid transparent;
    padding: 0.3em;
    padding-left: 0.5em;
    color: rgb(var(--white-monochrome));
}
#top-bar ul li a {
    color: rgb(var(--white-monochrome));
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-monochrome));
}
#top-bar ul li ul a, #top-bar a:hover {
    color: rgb(var(--pale-grey-monochrome));
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: rgb(var(--dark-gray-monochrome));
}
#top-bar ul li ul.sfhover a:hover,
#top-bar ul li ul:hover a:hover {
    background: rgb(var(--gray-monochrome));
    color: rgb(var(--white-monochrome));
    font-weight: bold;
}
.c_topbar_arrow {
    color: rgb(var(--white-monochrome));
}
 
/* SIDE-BAR SETTINGS */
#side-bar .side-block {
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--white-monochrome));
    box-shadow: 0 2px 6px rgba(var(--dark-accent),.5);
}
 
#side-bar .side-block.media {
    background-color: rgb(var(--pale-gray-monochrome)) !important;
}
 
#side-bar .side-block.resources {
    background-color: rgb(232, 229, 197) !important;
}
 
div.scpnet-interwiki-wrapper {
    filter: hue-rotate(90deg);
}
 
#side-bar .heading {
    color: rgb(var(--dark-accent));
    border-bottom-color: rgb(var(--dark-accent));
}
 
/* SIDE-BAR IMAGES */
.side-block .menu-item > .image {
    filter: hue-rotate(-171deg);
}
 
/* Patch pour hover imbriqué */
#top-bar ul li ul li ul {
    left: 159px;
}
 
/* MOBILE SIDE-BAR */
@media (max-width: 767px) {
#side-bar {
    background-color: rgb(var(--white-monochrome))
}
.open-menu a {
    border: 0.2em solid rgb(var(--bright-accent)) !important;
    background-color: rgb(var(--white-monochrome)) !important;
    color: rgb(var(--bright-accent)) !important;
    }
}
 
/* BODY */
body {
    background-color: rgb(var(--white-monochrome));
    font-family: var( --body-font);
}
 
/* FOOTER */
#footer {
    background: rgb(var(--dark-accent));
}
 
/* OTHER STRUCTURAL ELEMENTS */
 
/* LINKS */
a {
    color: rgb(var(--bright-accent));
    font-weight: bold;
}
a:visited {
    color: rgb(var(--dark-accent));
}
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage {
    color: rgb(var(--dark-accent));
}
 
/* POP-UP WINDOWS */
.owindow {
    background-color: rgb(var(--white-monochrome));
}
 
.owindow .modal-header {
    background-color: rgb(var(--white-monochrome));
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: rgb(var(--pale-gray-monochrome));
}
 
.owindow .button-bar a {
    background-color: rgb(var(--pale-gray-monochrome));
}
 
/* CODE */
.code {
    background-color: rgb(var(--pale-gray-monochrome));
}
 
/* RATING MODULE */
.page-rate-widget-box .rate-points {
    background-color: rgb(var(--dark-accent)) !important;
    border-color: rgb(var(--dark-accent));
    color: rgb(var(--pale-gray-monochrome));
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: rgb(var(--pale-gray-monochrome));
    border-top-color: rgb(var(--dark-accent));
    border-bottom-color: rgb(var(--dark-accent));
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: rgb(var(--dark-accent));
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: rgb(var(--dark-accent));
    color: rgb(var(--pale-gray-monochrome));
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: rgb(var(--dark-accent));
    border-color: rgb(var(--dark-accent));
}
.page-rate-widget-box .cancel a {
    color: rgb(var(--bright-accent));
}
.page-rate-widget-box .cancel a:hover {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--pale-gray-monochrome));
}
 
/* CREDIT MODULE */
#page-content .rate-box-with-credit-button {
    background-color: rgb(var(--dark-accent));
    border-color: rgb(var(--dark-accent));
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: rgb(var(--bright-accent))
}
#page-content .rate-box-with-credit-button .creditButton a {
    color: rgb(var(--white-monochrome));
}
#page-content .rate-box-with-credit-button .creditButton a:hover {
    color: rgb(var(--bright-accent));
}
 
#page-content .modalbox {
     background: rgb(var(--white-monochrome)) !important;
     color: rgb(var(--black-monochrome));
     box-shadow: 0 2px 6px rgba(var(--dark-accent),.5);
}
 
.close-credits,
.credit-back {
    filter: hue-rotate(-171deg);
}
 
/* PAGE ELEMENTS */
 
/* BLOCKQUOTES */
blockquote,
div.blockquote {
    background-color: rgb(var(--pale-gray-monochrome));
}
 
/* TABLES */
table.wiki-content-table th {
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--light-gray-monochrome));
}
 
/* TABVIEW */
.yui-navset .yui-content {
    background-color: rgb(237, 236, 213);
    font-weight: normal;
}
.yui-navset .yui-nav a, 
.yui-navset .yui-navset-top .yui-nav a {
    background-image: none;
    background-color: rgb(var(--pale-gray-monochrome));
    font-weight: normal;
}
.yui-navset .yui-nav a:hover, 
.yui-navset .yui-nav a:focus {
    background: rgb(var(--dark-accent));
    color: rgb(var(--white-monochrome));
}
.yui-navset .yui-nav .selected a, 
.yui-navset .yui-nav .selected a:focus, /* Pas d'effet focus/hover pour tab sélectionné */
.yui-navset .yui-nav .selected a:hover {
    background-image: none !important;
    background: rgb(var(--bright-accent));
    border-color: rgb(var(--dark-accent));
    color: rgb(var(--white-monochrome));
}
.yui-navset li {
    line-height: normal;
}
 
/* IMAGE BLOCK */
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--pale-gray-monochrome));
}
 
/* ANIMATIONS */
 
#header h1 *,
#page-title * {
    will-change: opacity;
    transition: opacity 0.2s ease-in-out;
}
 
#header h1 a:hover,
#page-title:hover {
    -webkit-animation: flicker 20s linear infinite;
    -moz-animation: flicker 20s linear infinite;
    animation: flicker 20s linear infinite;
}
 
@-webkit-keyframes flicker {
    0% {
        opacity: .2;
    }
 
    5% {
        opacity: .9;
    }
 
    6% {
        opacity: 1;
    }
 
    11% {
        opacity: .4;
    }
 
    11.25% {
        opacity: .6;
    }
 
    11.5% {
        opacity: .4;
    }
 
    18% {
        opacity: 1;
    }
 
    18.5% {
        opacity: .9;
    }
 
    22% {
        opacity: 1;
    }
 
    38.5% {
        opacity: 1;
    }
 
    39% {
        opacity: .8;
    }
 
    42% {
        opacity: 1;
    }
 
    60% {
        opacity: 1;
    }
 
    60.5% {
        opacity: 0;
    }
 
    62% {
        opacity: 0;
    }
 
    63% {
        opacity: .2;
    }
 
    63.25% {
        opacity: 0;
    }
 
    65% {
        opacity: 1;
    }
 
    73% {
        opacity: 1;
    }
 
    75% {
        opacity: .8;
    }
 
    79% {
        opacity: 1;
    }
 
    100% {
        opacity: 1;
    }
}
}