/* Classic SCP Foundation Theme
* [2020 Wikidot Theme]
* Created by Lt Flops
* Forked From Shiny Theme by Gabrys
**/
/* ======== HEADER AREA ======== */
/* ==== SELECTION ==== */
::selection {
color: var(--key-color);
background: var(--highlight-color);
}
/* ==== COMMON ==== */
:root {
/* == COLOUR SCHEME == */
--green-light-1: hsl(127, 50%, 94%);
--green-light-2: hsl(120, 100%, 77%);
--red-light: hsl(0, 49%, 91%);
--red-strong: hsl(355, 100%, 37%);
--red-dark-1: hsl(0, 70%, 35%);
--red-dark-2: hsl(353, 100%, 30%);
--off-white: hsl(0, 0%, 99%);
--gray-light-1: hsl(0, 0%, 93%);
--gray-light-2: hsl(0, 0%, 87%);
--gray-light-3: hsl(0, 0%, 83%);
--gray-medium: hsl(0, 0%, 67%);
--gray-dark-1: hsl(0, 0%, 40%);
--gray-dark-2: hsl(0, 0%, 27%);
--off-black: hsla(0, 0%, 0%, .95);
}
:root {
/* == COLOUR DEFINITIONS == */
--accent-color: var(--red-dark-2);
--fill-bg: var(--off-white);
--key-color: var(--off-black);
--area-border: var(--gray-light-2);
--banner-primary-color: var(--gray-light-1);
--banner-secondary-color: var(--red-dark-2);
--highlight-color: var(--gray-light-3);
--interwiki-bg: var(--green-light-1);
--nav-bar-border: var(--gray-dark-2);
--credit-btn-color: var(--gray-light-1);
--credit-btn-hover-color: var(--green-light-2);
--info-bar-color: var(--gray-dark-2);
--link-color: var(--red-strong);
--rate-bar-bg: var(--gray-dark-1);
--tab-bg: var(--red-dark-1);
--tab-hover-bg: var(--red-light);
--special-border: var(--gray-medium);
--special-btn-color: var(--gray-light-1);
--special-text-color: var(--gray-light-1);
}
:root {
/* == FONTS == */
--header-font: "Trebuchet MS", "Trebuchet", var(--body-font);
--body-font: "Verdana", "Arial", "Helvetica", sans-serif;
}
body {
accent-color: var(--accent-color);
color: var(--key-color);
font-family: var(--body-font);
overflow-wrap: break-word;
}
/* ==== SITE BANNER ==== */
div#container-wrap {
background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aclassic/classic_body_bg.png);
background-repeat: repeat-x;
}
#header {
background: 0;
}
#header h1,
#header h2 {
margin: 0 0 0 -4px;
}
#header h1 {
max-height: 105px;
}
#header h1 a,
#header h2 span {
color: transparent;
text-shadow: none;
}
#header h1 a {
font-family: var(--header-font);
letter-spacing: 0;
}
#header h1 a::before,
#header h2 span::before {
text-shadow: none;
}
#header h1 a::before {
content: "A Fundação SCP";
color: var(--banner-primary-color);
}
#header h2 span::before {
content: "Assegurar, Conter e Proteger";
color: var(--banner-secondary-color);
}
/* ==== SEARCH ==== */
#search-top-box-form input[type="submit"] {
color: var(--key-color);
background: var(--special-btn-color);
border: 1px solid var(--special-border);
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: var(--key-color);
background: var(--highlight-color);
border: 1px solid var(--special-border);
box-shadow: none;
}
/* ==== TOP MENU ==== */
#top-bar ul li,
#top-bar ul li ul {
box-shadow: none;
}
#top-bar ul li ul {
border-color: var(--nav-bar-border);
border-style: solid;
border-width: 0 1px 1px;
}
#top-bar ul li a {
border-color: var(--nav-bar-border);
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;
/* Top 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;
}
#top-bar ul li:nth-child(5) a::after {
left: unset;
}
#top-bar .top-bar > ul > li > a,
#top-bar .mobile-top-bar > ul > li > a {
font-weight: normal;
}
#top-bar .top-bar > ul > li:hover > ul {
margin-top: 1px;
}
.mobile-top-bar {
bottom: -.5px;
}
/* ==== LOGIN ==== */
#login-status ul a {
background: var(--special-text-color);
}
/* ==== SIDE MENU ==== */
#side-bar {
clear: both;
padding: .78em;
padding-bottom: 0;
border: 1px solid var(--area-border);
border-radius: 0;
box-shadow: none;
}
#side-bar .side-block {
margin-bottom: .78em;
background: var(--fill-bg);
border: none;
border-radius: 0;
box-shadow: none;
}
#side-bar .heading {
padding-left: 0;
color: var(--key-color);
border-bottom: 1px solid var(--special-border);
}
/* ==== INTERWIKI ==== */
#interwiki body {
overflow: hidden;
}
#interwiki .side-block {
background: var(--interwiki-bg);
border: 0;
border-radius: 0;
box-shadow: none;
}
#interwiki .heading {
margin: 0;
padding-left: 0;
color: var(--key-color);
border-color: var(--special-border);
}
#side-bar a:visited,
#interwiki a:visited {
color: var(--link-color);
}
/* ======== CONTENT AREA ======== */
/* ==== INFO BAR ==== */
.info-container {
--barColour: var(--info-bar-color);
--linkColour: var(--credit-btn-color);
}
.info-container:hover {
--linkColour: var(--credit-btn-hover-color);
}
/* ==== PAGE RATING ==== */
.page-rate-widget-box {
margin-right: 0;
border-radius: 0;
box-shadow: none;
}
div.page-rate-widget-box .rate-points {
background-color: var(--rate-bar-bg);
border: none;
border-radius: 0;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--area-border);
border: none;
font-weight: normal;
}
.page-rate-widget-box .cancel {
background-color: var(--area-border);
border: none;
border-radius: 0;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
color: var(--key-color);
}
.page-rate-widget-box .cancel a {
color: var(--key-color);
text-transform: lowercase;
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
color: var(--key-color);
background: var(--special-text-color);
text-decoration: underline;
}
.page-rate-widget-box .cancel a:hover {
color: var(--key-color);
background: var(--special-text-color);
text-decoration: underline;
}
/* ==== INFO MODULE ==== */
#page-content .creditRate {
margin-right: 0;
}
#page-content .rate-box-with-credit-button {
background: var(--rate-bar-bg);
border: 0;
border-radius: 0;
box-shadow: none;
}
#page-content .creditButton p a,
#page-content .creditButtonStandalone p a {
color: var(--special-btn-color);
text-decoration: none;
}
#page-content .creditButton p a {
border-left: 0;
}
#page-content .creditButtonStandalone p a {
background: var(--rate-bar-bg);
border-radius: 0;
box-shadow: none;
}
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .creditButtonStandalone p a:hover {
color: var(--credit-btn-hover-color);
}
#page-content .modalbox {
border-radius: 0;
box-shadow: none;
}
/* ==== FORMATTING | [GENERAL] ==== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--header-font);
}
h1 {
color: var(--accent-color);
}
hr {
height: 0;
margin: 1em 0;
background: 0;
border-top: 1px solid var(--special-border);
}
*, a, span {
/* No Line Breaks Mid-Word */
word-break: normal;
}
li, p {
text-underline-offset: 30%;
}
a {
color: var(--link-color);
}
/* ==== IMAGE BLOCK ==== */
/* == STANDARD == */
.scp-image-block.block-right {
margin: 0 0 1em 2em;
box-shadow: none;
}
/* == CLASSIC == */
.classic-image-block {
float: right;
width: 300px;
margin: 0 0 1em 2em;
text-align: center;
}
/* ==== TABLE STYLING ==== */
table.wiki-content-table td {
background-color: var(--fill-bg);
}
/* ==== YUI TABS ==== */
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
/* ==== Tab Background Colour | [UNSELECTED] ==== */
background-color: var(--fill-bg);
/* ==== */
background-image: none;
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
/* ==== Tab Background Colour | [HOVER] ==== */
background-color: var(--tab-hover-bg);
/* ==== */
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: var(--tab-bg);
/* ==== */
background-image: none;
}
/* ======== MOBILE BREAKPOINT ======== */
@media (max-width: 767px) {
#side-bar .side-block {
background-color: var(--fill-bg);
}
#header,
.mobile-top-bar {
max-width: 95%;
}
.mobile-top-bar {
left: 0;
}
}