Greyve 2

Usage

This is a Black Highlighter based theme, meaning you will need to import the Black Highlighter theme as well in order to use this theme. To learn more, go here.

To import this theme, simply add the following to your page:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:retrofuture-theme]]

Theme Colors

Onyx --gray-monochrome(2, 2, 2)

Dark Goldenrod --medium-accent(153, 101, 21)

White Smoke --pale-gray-monochrome(244, 244, 244)

Payne's Grey --light-gray-monochrome66, 66, 72)

Midnight --dark-gray-monochrome:(0, 0, 0)

Goldenrod --pale-accent(212, 175, 55)

Dark Bronze dark-accent(100, 3, 15)

Pale Goldenrod newpage-color(250, 250, 210)

Code

▼ Show code

/*
    Retrofuture Theme
    [2020 Wikidot Theme]
     All images created by Greyve
*/
 
/* ROOT - Header & General Recoloring */
:root {
/* Intro */
    --theme-base: "nuscp"
    --theme-id: "retrofuture-theme"
    --theme-name: "Retrofuture Theme";
 
/* Header Images */
    --logo-image: url("http://scp-sandbox-3.wikidot.com/local--files/greyve3/artlogo.png");
    --gradient-header: url("http://scp-sandbox-3.wikidot.com/local--files/greyve3/custombg.png");
    --header-background-image-size: 290px 9rem;
    --header-height-on-desktop:  9rem;
    --header-height-on-mobile: 9rem;
    --diagonal-stripes: none;
 
/* Colors */
    --pale-gray-monochrome: 244, 244, 244; /* Light Grey */
    --light-gray-monochrome: 66, 66, 72; /* Grey */
    --gray-monochrome: 2, 2, 2; /* Dark Grey */
    --dark-gray-monochrome: 0, 0, 0;  /* Black */
 
    --pale-accent: 212, 175, 55; /* Goldenrod*/
    --bright-accent: 255, 215, 0; /* Marigold */
    --medium-accent: 153, 101, 21; /* Dark Goldenrod */
    --dark-accent: 118, 79, 19; /* Dark Bronze*/
    --newpage-color: 250, 250, 210; /* Light Goldenrod */
 
    --light-pale-gray-monochrome: var(--pale-gray-monochrome);
    --rating-module-button-color: var(--pale-gray-monochrome);
    --rating-module-text-color: var(--pale-gray-monochrome);
    --barColour: rgb(153, 101, 21);
 
/* Gradient */
    --gradient-background: linear-gradient(to bottom,
     rgba(var(--background-gradient-color), 1) calc(calc(0 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 1) calc(calc(1.6 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 1) calc(calc(2.9 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 1) calc(calc(6.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 1) calc(calc(11 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 1) calc(calc(16.6 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.85) calc(calc(27.1 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.75) calc(calc(33.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.62) calc(calc(38.3 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.52) calc(calc(46.7 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.35) calc(calc(55.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.20) calc(calc(64.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.155) calc(calc(69.5 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.052) calc(calc(82.5 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0.03) calc(calc(91.4 / 100) * var(--background-gradient-distance)),
     rgba(var(--background-gradient-color), 0) calc(calc(100 / 100) * var(--background-gradient-distance)));
     --background-gradient-color: 0, 0, 0;
     --background-gradient-distance: 25rem;
}
 
/* Final Bits of Header */
#header h1 a {
    font-size: 0%;
}
 
#header h2 span {
    font-size: 0%;
}
 
/* Top-Bar Open Button on Mobile */
#top-bar > div.mobile-top-bar > div.open-menu > p > a {
    color: rgb(var(--gray-monochrome)) !important;
}
 
/* Adjusts Header Size */
body {
    background-size: auto var(--header-height-on-desktop),100% var(--final-header-height-on-desktop),100% var(--background-gradient-distance);
}
 
/* Undo the mobile Image Resize */
@media only screen and (max-width: 768px) {
    #header {
        background-size: 0.625rem 2.500rem;
        background-repeat: no-repeat;
        background-position: left 0.75rem top 1.1875rem;
        background-clip: border-box;
        background-size: auto 5.375rem;
    }
}
 
/* LOG-IN INFO */
#login-status {
    color: #ffffff;
}
#login-status a {
    color: #ffffff;
}
#login-status ul a {
    color: rgb(var(--medium-accent));
}
#account-topbutton {
    background: #ffffff;
    color: rgb(var(--medium-accent));
}
 
/* PAGE-TITLE */
#page-title {
    color: rgb(var(--dark-accent));
    border-color: rgb(var(--dark-accent));
}
 
/* TRANSLATION BLOCK */
iframe.scpnet-interwiki-frame {
    filter: invert(0.8) hue-rotate(110deg) saturate(1);
    -webkit-filter: invert(0.8) hue-rotate(110deg) saturate(1);
}
 
/* SEXY BOX */
div.sexy-box {
    background: rgb(var(--pale-gray-monochrome));
    border: 1px solid rgb(var(--gray-monochrome));
}
div.sexy-box div.image-container img {
    border: 1px solid #EEE8AA;
}
 
/* RATING AND INFO MODULES */
.page-rate-widget-box {
    background: linear-gradient(to top,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    border-color: rgb(var(--gray-monochrome));
}
#page-content .rate-box-with-credit-button {
    background: linear-gradient(to top,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    border-color: rgb(var(--gray-monochrome));
}
 
#page-content .rate-box-with-credit-button > .creditButton > p > a::before {
    background-color: rgb(var(--gray-monochrome));
}
 
#page-content .rate-box-with-credit-button > .creditButton:hover {
    background: rgba(var(--bright-accent), 0.8);
}
 
#page-content .modalbox {
     border-radius: 0;
     box-shadow: 0 2px 6px rgba(var(--bright-accent), 0.5);
}