Foundless Theme

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-sandbox-3:theme:foundless-theme]]

Code

▼ Show code

/*
    Retrofuture Theme
    [2020 Wikidot Theme]
     All images created by Greyve
*/
 
/* ROOT - Header & General Recoloring */
:root {
/* Intro */
    --theme-base: "nuscp"
    --theme-id: "foundless-theme"
    --theme-name: "Foundless Theme";
 
/* Header Images */
    --logo-image: url("http://scp-sandbox-3.wikidot.com/local--files/greyve4/UnFounded.png");
    --header-background-image-size: 290px 9rem;
    --header-height-on-desktop:  9rem;
    --header-height-on-mobile: 9rem;
    --diagonal-stripes: none;
 
/* Colors */
    --white-monochrome: 252, 252, 252; /* White */
    --pale-gray-monochrome: 244, 244, 244; /* Light Grey */
    --light-gray-monochrome: 66, 66, 72; /* Grey */
    --gray-monochrome: 2, 2, 2; /* Dark Grey */
 
    --bright-accent: 14, 65, 102; /* Blue */
    --medium-accent: 60, 100, 120; /* Medium Blue */
    --dark-accent: 12, 36, 54; /* Dark blue */
    --newpage-color: 99, 190, 255; /* Light Blue */
 
    --light-pale-gray-monochrome: var(--pale-gray-monochrome);
    --dark-gray-monochrome: var(--gray-monochrome);
    --rating-module-button-color: var(--black-monochrome);
    --rating-module-text-color: var(--black-monochrome);
    --barColour: rgb(var(--bright-accent));
 
  /* Link Colors */
  --link-color: var(--swatch-primary);
 
  /* Gradients */
  --diagonal-stripes: 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
  );
  --gradient-sidemenu-header: linear-gradient(10deg,
    rgba(var(--medium-accent), 0.9) 0%,
    rgba(var(--medium-accent), 1) 100%
  );
    --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;
}
 
  /* Filter */
  --filter: hue-rotate(268deg) saturate(50%) brightness(111%);
  /* Ayers' Info Bar */
  --barColour: rgb(var(--dark-accent));
}
 
body {
  background-color: rgba(244, 244, 244, 1);
  background-color: rgba(var(--swatch-menubg-light-color), 1);
}
 
/* 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(--gray-monochrome));
    border-color: rgb(var(--gray-monochrome));
}
 
/* 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;
}