Classic SCP Foundation Theme

Rating:

Rating w/ Info Pane:

hodnocení: 0+–x



close

Info

X

Classic SCP Foundation Theme
Author: Lt Flops
Published on 21 Jul 2020

Thank you to stormbreath and Croquembouche for looking this over.

Filename: classic_body_bg.png
Author: Gabrys
License: CC BY-SA 3.0
Source Link: https://static.wikidot.com/v--c827dff18394/common--theme/shiny/images/body_bg.png

Filename: base_image_frame.png
Author: Lt Flops
License: CC BY-SA 3.0
Source Link: Self

Filename: scp_foundation_logo.png
Author: far2
License: CC BY-SA 3.0
Source Link: SCP Foundation Wiki

hodnocení: 0+–x

What Is This?

This is a modern version of the Classic SCP Foundation Theme.

It is adapted from Wikidot's “Shiny Theme”, which the SCP Wiki used as its main theme from 2008–2014.

How to Use

To use this theme, please copy this syntax onto the top of your page:

[[include :scp-wiki:theme:classic]]

Unlike other themes, this theme does not have a logo.

What is this theme used for?

This theme exists to mimic the aesthetic of an older SCP database. Think a SCiPNET Access Terminal running legacy software from the late-90s to mid-2000s.

This theme is suitable for use in SCPs, Tales, and other pages.

Example Formatting

Classic Image Block (See Source Code)

L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading

L6 Heading

Type 4 hyphens ("----") to create a horizontal rule:

Block Quote

Nested Block Quote

header	header	header	header	header	header
cell-content	cell-content	cell-content	cell-content	cell-content	cell-content

Table of Contents

fake code selector{
fake code property: fake code value;
}

A link (A link you probably visited)

+ A collapsible

numbered list
list item
list item

bulleted list
list item
list item

Tab content

Source Code

/* Classic SCP Foundation Theme
 * [2020 Wikidot Theme]
 * Created by Lt Flops
**/
 
/* ---- PAGE WRAP ---- */
 div#container-wrap{
     background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/classic_body_bg.png');
     background-repeat: repeat-x;
    -webkit-background-size: 1px 562px;
    -moz-background-size: 1px 562px;
    background-size: 1px 562px;
}
 
/* ---- HEADERS ---- */
 span, a{
     word-break: unset;
}
 h1{
     font-size: 190%;
}
 h1, h2, h3, h4, h5, h6{
     font-family: "Trebuchet MS", "Trebuchet", "Verdana", "Arial", "Helvetica", sans-serif;
}
 #header h1,
 #header h2{
     margin-left: -.16em;
}
 #header h1{
     max-height: 105px;
     margin: 0;
}
 #header h2{
     margin: 0;
}
 
/* ---- SITE HEADER ---- */
 #header h1 a,
 #header h2 span{
     color: transparent;
     text-shadow: none;
}
 #header h1 a{
     font-family: "Trebuchet MS", "Trebuchet", "Verdana", "Arial", "Helvetica", sans-serif;
     letter-spacing: 0;
}
 #header h1 a::before,
 #header h2 span::before{
     text-shadow: none;
}
 #header h1 a::before{
     content: "Nadace SCP";
     color: hsl(0, 0%, 93%);
}
 #header h2 span::before{
     content: "Zajistit, Zadržet, Chránit";
     color: hsl(353, 100%, 30%);
}
 
/* ---- TOP MENU ---- */
 #login-status ul a{
    background: hsl(0, 0%, 93%);
}
 #header{
     background: none;
}
 #top-bar ul li,
 #top-bar ul li ul{
     box-shadow: none;
}
 #top-bar ul li ul{
     border-color: hsl(0, 0%, 27%);
     border-style: solid;
     border-width: 0 1px 1px;
}
 #top-bar ul li a{
     border-color: hsl(0, 0%, 27%);
     border-style: solid;
     border-width: 0 0 0 1px;
}
 #top-bar ul li a::before{
     content: "[";
}
 #top-bar ul li a::after{
     content: "]";
     position: relative;
 
/* NOTE: The Top Bar Menu has spaces after each bullet, which is why this is done: */
     left: -.3em;
}
 #top-bar ul li ul li a::before{
     content: unset;
}
 #top-bar ul li ul li a::after{
     content: unset;
}
 .mobile-top-bar{
     bottom: -.5px;
}
 
/* ---- SEARCH BOX ---- */
 #search-top-box input.empty{
     color: hsl(0, 0%, 45%);
}
 #search-top-box-input{
     color: hsl(0, 0%, 5%);
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 47%);
     border-radius: 0;
     box-shadow: none;
}
 #search-top-box-input:hover,
 #search-top-box-input:focus{
     color: hsl(0, 0%, 5%);
     background-color: hsl(0, 0%, 100%);
     border: 1px solid hsl(0, 0%, 47%);
     box-shadow: none;
}
 #search-top-box-form input[type="submit"]{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 96%);
     border: 1px solid hsl(0, 0%, 67%);
     border-radius: 0;
     box-shadow: none;
     font-size: 100%;
     font-weight: normal;
}
 #search-top-box-form input[type="submit"]:hover,
 #search-top-box-form input[type="submit"]:focus{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 87%);
     border: 1px solid hsl(0, 0%, 67%);
     box-shadow: none;
}
 
/* ---- SIDE MENU ---- */
 #side-bar{
     clear: both;
     padding: .78em;
     padding-bottom: 0;
     border: 1px solid hsl(0, 0%, 87%);
     border-radius: 0;
     box-shadow: none;
}
 #side-bar .side-block{
     margin-bottom: .78em;
     background: white;
     border: none;
     border-radius: 0;
     box-shadow: none;
}
 #side-bar .heading{
     padding-left: 0;
     color: hsl(0, 0%, 5%);
     border-bottom: 1px solid hsl(0, 0%, 67%);
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: hsl(0, 0%, 28%);
}
 
/* ---- INFO PANE ---- */
.creditRate{
     margin-right: 0 !important;
     border: none !important;
}
 .rate-box-with-credit-button{
     background-color: hsl(0, 0%, 40%) !important;
     border: none !important;
     border-radius: 0 !important;
     box-shadow: none !important;
}
 .creditButton p a{
     color: hsl(0, 0%, 95%);
     border-left: none !important;
}
 .rate-box-with-credit-button .fa-info:hover{
     color: hsl(112, 100%, 77%);
}
 .modalbox{
     max-height: unset !important;
     border-radius: 0 !important;
     box-shadow: none !important;
}
 
/* ---- PAGE RATING ---- */
.page-rate-widget-box{
     margin-right: 0;
     border-radius: 0;
     box-shadow: none;
}
 .page-rate-widget-box .rate-points{
     background-color: hsl(0, 0%, 40%) !important;
     border: none;
     border-radius: 0;
}
 .page-rate-widget-box .rateup,
 .page-rate-widget-box .ratedown{
     background-color: hsl(0, 0%, 87%);
     border: none;
     font-weight: normal;
}
 .page-rate-widget-box .rateup a,
 .page-rate-widget-box .ratedown a{
     color: hsl(0, 0%, 5%);
}
 .page-rate-widget-box .rateup a:hover,
 .page-rate-widget-box .ratedown a:hover{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 93%);
     text-decoration: underline;
}
 .page-rate-widget-box .cancel{
     background-color: hsl(0, 0%, 87%);
     border: none;
     border-radius: 0;
}
 .page-rate-widget-box .cancel a{
     color: hsl(0, 0%, 5%);
     text-transform: lowercase;
}
 .page-rate-widget-box .cancel a:hover{
     color: hsl(0, 0%, 5%);
     background: hsl(0, 0%, 93%);
     text-decoration: underline;
}
 
/* ----- GENERAL ----- */
 body{
     color: hsl(0, 0%, 5%);
     word-break: unset;
}
 hr{
     height: 0;
     margin: 1em 0;
     background-color: transparent;
     border-top: 1px solid hsl(0, 0%, 67%);
}
 table.wiki-content-table td{
     background-color: white;
}
 
/* ---- IMAGE BLOCK ---- */
 .scp-image-block.block-right{
     margin: 0 0 1em 2em;
     box-shadow: none;
}
 
/* ---- CLASSIC IMAGE BLOCK DIV ---- */
 .classic-image-block{
     float: right;
     width: 300px;
     margin: 0 0 1em 2em;
     text-align: center;
}
 
/* ---- YUI TABS ---- */
 .yui-navset .yui-nav a,
 .yui-navset .yui-navset-top .yui-nav a{
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: hsl(0, 0%, 100%);
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: hsl(0, 49%, 91%);
    /* -------- */
     background-image: none;
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:hover{
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: hsl(0, 70%, 35%);
    /* -------- */
     background-image: none;
}
 
/* --- INTERWIKI --- */
 iframe.scpnet-interwiki-frame{
     position: relative;
     width: 17em;
     margin-left: .313em;
     background-color: transparent;
}
 
/* --- SELECTION --- */
 ::selection{
     background: hsl(0, 0%, 83%);
}
 
/* ---- MOBILE MEDIA QUERIES ---- */
 @media (max-width: 767px){
       #side-bar .side-block{
          background-color: hsl(0, 0%, 100%);
     }
      #side-bar:after{
          background-color: hsla(0, 0%, 30%, .2);
     }
}
 @media (max-width: 479px),
 @media (min-width: 480px) and (max-width: 580px),
 @media (min-width: 581px) and (max-width: 767px){
      #side-bar .side-block{
          background-color: hsl(0, 0%, 100%);
     }
      #side-bar:after{
          background-color: hsla(0, 0%, 30%, .2);
     }
      #header, .mobile-top-bar{
          max-width: 95%;
     }
      .mobile-top-bar{
          left: 0;
     }
}

theme

revize stránky: 9, naposledy editováno: 14 May 2021 06:02

Editovat Hodnotit (0) Štítky Diskuze (0) Historie Soubory Tisk Nastavení stránky + Možnosti

SCP Nadace

Česká Větev SCP Nadace

Info

What Is This?

How to Use

Example Formatting

L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading

L6 Heading

Source Code