/*
Simple Yonder Theme
[2020 Wikidot Theme]
By EstrellaYoshte
Based on:
Sigma-9 Theme by Aelanna and Dr Devan
Anderson Robotics Theme by Croquembouche
Minimal Theme by stormbreath
Word Processing Theme by stormbreath
Flopstyle CSS by Lt Flops
*/
@import url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/jost.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
:root {
--themeColor: #7E2520;
--accentColor: #E01F1F;
--whiteColor: #FBFBFB;
--borderColor: #C4C4C4;
}
#page-content { font-size: .87rem; }
body {
color: #000000;
font-family: 'Open Sans', sans-serif;
background-color: var(--whiteColor);
}
.code pre, .code p, .code, tt{ /* ---- Code by Croquembouche ---- */
font-family: "Fira Code", '幼圆', monospace;
}
.page-source{
font-family: "Fira Code", '幼圆', monospace;
}
a {
color: var(--accentColor);
}
a:visited {
color: var(--themeColor);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--themeColor);
font-family: 'jostregular';
font-weight: bold;
}
#page-title {
color: var(--themeColor);
font-family: 'jostregular';
font-weight: bold;
font-size: 2.4em;
border-color: var(--borderColor);
}
/* ---- HEADER ---- */
div#container-wrap{
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/bg3.png');
background-repeat: repeat-x;
}
div#header {
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Asimple-yonder/logo.png');
background-size: 7.3rem;
background-position: 3px 29px;
}
@media (max-width: 767px) and (min-width: 480px) {
div#header {
background-size: 6rem;
background-position: -4px 44px;
}
}
@media (max-width: 479px) {
div#header {
background-size: 4.6rem;
background-position: -3px 58px;
}
}
#account-topbutton {
border-width: 0;
}
#login-status,
#login-status a {
color: var(--whiteColor);
font-weight: bold;
}
#login-status ul a,
#login-status ul a:hover {
color: var(--themeColor);
}
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
border: none;
background: #282828;
box-shadow: none;
border-radius: 2px;
color: #f4f4f4;
}
#search-top-box input.empty {
color: var(--borderColor);
}
div#header h1 a span {
font-family: 'jostregular';
font-weight: bold;
color: #f4f4f4;
text-shadow: 0px 0px 0px #000;
}
div#header h2 span {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #f4f4f4;
padding: 17px 0;
text-shadow: 0px 0px 0px #000;
white-space: pre;
}
/* ---- TOP BAR ---- */
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
color: var(--themeColor);
}
#top-bar ul li ul {
border-color: var(--borderColor);
box-shadow: none;
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
background: #f4f4f4;
}
/* ---- SIDE BAR ---- */
div#side-bar {
font-size: 104%;
background-color: var(--whiteColor);
}
#side-bar .side-block.media > * {
display: flex;
justify-content: space-evenly;
}
#side-bar .side-block {
border: var(--whiteColor) 4px;
border-radius: 0;
box-shadow: none;
background: var(--whiteColor) !important;
padding: 2px;
}
#side-bar .heading {
border: none;
border-radius: 0;
color: #282828;
font-size: 1.3em;
padding: 1em 1em 0 0;
border-top: 1px solid var(--borderColor);
margin: 1em -0.8em 1em -0.5em;
font-weight: normal;
}
#side-bar .menu-item > a:hover {
background-color: rgba(0,0,0,0.05);
color: var(--accentColor);
text-decoration: none;
}
#top-bar div.open-menu a {
border-radius: 0;
box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19);
color: var(--themeColor);
border: none;
}
#side-bar a:visited {
color: var(--themeColor);
}
@media (max-width: 767px) {
#main-content {
padding: 0;
margin: 0 5%;
border-left: none;
}
#page-title {
margin-top: 0.7em;
}
#side-bar {
left: -19em;
}
#side-bar:target {
border: none;
box-shadow: 1px 0 5px 0 rgba(0,0,0,0.2);
}
#side-bar .close-menu {
transition: width 0.5s ease-in-out 0.1s,
opacity 1s ease-in-out 0s;
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: rgba(0,0,0,0.3);
background-position: 19em 50%;
z-index: -1;
opacity: 0;
pointer-events: none;
}
#side-bar:target .close-menu {
width: calc(100% - 19em);
right: 0;
left: auto;
opacity: 1;
pointer-events: auto;
}
#page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
margin: 3em -5.5%;
}
#side-bar {
top: 0;
}
#side-bar .heading {
padding-left: 1em;
margin-left: -1em;
}
}
/* ---- TABS ---- */
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border-color: var(--themeColor); /* color between tab list and content */
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background: var(--whiteColor); /* tab background */
border-color: transparent;
color: black;
transition: 0.125s;
}
.yui-navset .yui-nav a em {
background: #f4f4f4;
box-shadow: none;
border-color: var(--whiteColor);
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
font-weight: bold;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
background: var(--whiteColor); /* selected tab background */
color: var(--themeColor);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background: var(--whiteColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
border-color: transparent;
box-shadow: 0px 1px 2px 0.5px rgba(0,0,0,0.5);
background: var(--whiteColor);
}
.yui-navset .yui-content {
background: var(--whiteColor); /* content background color */
}
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
border: solid 1px var(--borderColor);
border-top-width: 0;
}
.yui-navset-left .yui-content {
border-left-color: #b7a9a9; /* different border color */
}
/* ---- INFO BAR ---- */
body{
--barColour: var(--themeColor);
}
.info-container .collapsible-block-content .wiki-content-table{
width: 100%;
}
/* ---- INFO PANE ---- */
#page-content .creditRate{
margin: unset;
margin-bottom: 8px;
}
#page-content .rate-box-with-credit-button {
background-color: var(--whiteColor);
border: solid 1px var(--whiteColor);
box-shadow: none;
border-radius: 0;
}
#page-content .rate-box-with-credit-button .fa-info {
border: none;
color: var(--themeColor);
}
#page-content .rate-box-with-credit-button .fa-info:hover {
background: var(--whiteColor);
color: var(--accentColor);
}
.rate-box-with-credit-button .cancel {
border: solid 1px var(--whiteColor);
}
.modalbox {
background: var(--whiteColor);
border: none;
box-shadow: none;
border-radius: 0;
}
iframe.close-credits {
top: 1.25em;
right: 1.5em;
transform: scale(1.5, 1.25);
}
.page-rate-widget-box {
box-shadow: none;
margin: unset;
margin-bottom: 8px;
}
.page-rate-widget-box .rate-points {
background-color: var(--whiteColor) !important;
color: var(--themeColor) !important;
border: solid 1px var(--whiteColor);
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
background-color: var(--whiteColor);
border-top: solid 1px var(--whiteColor);
border-bottom: solid 1px var(--whiteColor);
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
background: transparent;
color: var(--themeColor);
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
background: var(--whiteColor);
color: var(--accentColor);
}
.page-rate-widget-box .cancel {
background: transparent;
background-color: var(--whiteColor);
border: solid 1px var(--whiteColor);
}
.page-rate-widget-box .cancel a {
color: var(--themeColor);
}
.page-rate-widget-box .cancel a:hover {
background: var(--whiteColor);
color: var(--accentColor);
}
/* ---- PAGE ELEMENTS ---- */
#page-content .wiki-content-table tr th {
border: solid 1px var(--borderColor);
background-color: #f4f4f4;
/* set border for table title */
}
#page-content .wiki-content-table tr td {
border: solid 1px var(--borderColor);
/* set border for table content */
}
blockquote,
div.blockquote,
#toc,
.code {
background-color: #f4f4f4;
border: solid 1px var(--borderColor);
}
.scp-image-block {
border: solid 1px var(--borderColor);
box-shadow: none;
box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
background-color: #f4f4f4;
border-top: solid 1px var(--borderColor);
color: black;
}
hr {
background-color: var(--borderColor);
}
.hovertip {
border-color: var(--borderColor)!important;
}
/* ---- FOOTER ---- */
#footer { background: transparent; }
#footer a { color: var(--themeColor); }
