Highlightumbra Theme

评分：

评分模块与著作信息模块：

著作信息

---

页面信息

---

更多

更多

---

更多页面信息

---

此版式由 EstrellaYoshte 制作的半影版式版式分化而来，其特点在于使用了黑色标记笔版式的变量。

在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:highlightumbra]]

---

图像。

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。

折叠 - 点击这里

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

这是一个长的 tab，它有很多文字。¹

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

更长的 Tab

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

这也是一个长的 tab，它有很多文字。

空 Tab

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

---

一条分割线

嵌套引用块

这是	表格
你应该老早	就知道怎么
做这个了吧

[[div class="darkbox"]]

[[div class="lightbox"]]

---

sidebox div 元素结构如下所示：

[[div class="limit"]] <— 设置锚点起始
[[div class="anchor"]] <— 设置 sidebox 的固定位置
[[div class="sidebox"]]
sidebox 内的文本。
[[/div]]
[[/div]]

sidebox 滚动经过的文本。

[[/div]] <— 设置锚点末尾

示例

利用技巧，也可以

人类到如今已经繁衍了 250000 年，只有最近的 4000 年是有意义的。

所以，我们在将近 250000 年中在干嘛？我们躲在山洞中，围坐在小小的篝火边，畏惧那些我们不懂得的事物——那些关于太阳如何升起的解释，那些人头鸟身的怪物，那些有生命的石头。所以我们称他们为“神”和“恶魔”，并向他们祈求宽恕和祈祷拯救。

之后，他们的数量在减少，我们的数量在增加。当我们恐惧的事物越来越少，我们开始更理智的看待这个世界。然而，不能解释的事物并没有消失，好像宇宙故意要表现出荒谬与不可思议一样。

像这样

人类不能再生活在恐惧中。没有东西能保护我们，我们必须保护我们自己。

当其他人在阳光下生活时，我们必须在阴影中和它们战斗，并防止它们暴露在大众眼中，这样其他人才能生活在一个理智的，普通的世界中。

我们控制，我们收容，我们保护。

— The Administrator

添加多个 sidebox。

于世界各地的暗处活动，基金会的目标是收容异常物品，个体及现象，而且其本身运作不受各个主要国家政府的司法管辖权，授权和委托的干扰。这些异常透过物理或心理危害对全球安全造成显著威胁。

基金会维持常态，从而使世界各地的平民得以生存并免受恐惧，不信或对个人信念的怀疑的影响，并从地外、异次元和外层空间的影响中维持人类的独立自主。

若没有 limit div 元素，anchor 在超出自身固定位置后，会基于整个页面内容固定。

注意 sidebox div 元素会在屏幕宽度 1290px 及以下时最小化。（感谢 Woedenaz 的代码！）

---

页眉字体为 Josefin Sans / 黑体。

正文字体为 Roboto。

等宽字为 Fira Code / 幼圆。

Footnotes

1. 这是一个脚注。

---

源代码

/*
    Highlightumbra Theme
    [2020 Wikidot Theme]
    By Dr Hormress
    Based on:
       Penumbra Theme by EstrellaYoshte
       Anderson Robotic Theme by Croquembouche
*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 
#page-content { font-size: .9rem; }
 
body {
    font-family: var(--body-font);
    color: rgb(var(--black-monochrome));
    background-color: rgb(var(--white-monochrome));
    background-image: linear-gradient(
        to bottom, 
        rgb(var(--black-monochrome)), rgb(var(--medium-accent)) 90px, 
        rgb(var(--medium-accent)) 90px, rgb(var(--very-light-gray-monochrome)) 180px, 
        rgb(var(--white-monochrome)) 200px, rgb(var(--white-monochrome)) 100%);
    background-repeat: no-repeat;
}
 
#main-content {
    top: -1.2rem;
}
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar {
  width: 9px;
  background: transparent;
}
 
::-webkit-scrollbar-track {
  background: rgb(var(--white-monochrome));
}
 
::-webkit-scrollbar-thumb {
  background: rgb(var(--bright-accent));
  border: none;
}
 
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--medium-accent));
}
 
/* ---- HEADER ---- */
 
div#container-wrap {
     background-image: none;
}
div#header {
    background-image: none;
}
 
div#extra-div-1 {
    height: 164px;
    width: 100%;
    top: 0;
    position: absolute;
    background: var(--logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.5;
    z-index: -1;
}
 
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.45rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; display: none; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: rgb(var(--white-monochrome));
  font-family: var(--header-font);
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "SCP FOUNDATION");
  font-weight: 300;
  font-size: 1.3em;
}
#header h2::before {
  content: var(--header-subtitle, "SECURE - CONTAIN - PROTECT");
  font-weight: 600;
  font-size: 1.22em;
}
 
#login-status {
    color: rgb(var(--white-monochrome));
}
#login-status a {
    color: rgb(var(--light-pale-gray-accent));
}
#login-status ul a {
    color: rgb(var(--white-monochrome));
    background: rgb(var(--medium-accent));
}
#login-status ul a:hover {
    color: rgb(var(--medium-accent));
}
 
#account-topbutton{
    border: solid 1px rgb(var(--white-monochrome));
}
 
#footer, #footer a {
    background: rgb(var(--bright-accent));
    color: rgb(var(--white-monochrome));
}
#license-area {
     color: rgb(var(--white-monochrome));
}
 
#search-top-box {
    top: 2.2rem!important;
    right: 8px;
}
#search-top-box-form > input[type=submit] {
    border: solid 1px rgb(var(--very-light-gray-monochrome));
    background: rgb(var(--bright-accent)) !important;
    box-shadow: none;
    border-radius: 0;
    color: rgb(var(--very-light-gray-monochrome));
    transition: color 0.15s linear;
}
#search-top-box-form input[type=submit]:hover {
    border: solid 1px rgb(var(--white-monochrome));
    box-shadow: none;
    color: rgb(var(--white-monochrome));
}
#search-top-box-form > input[type=text] { display: none; }
 
/* ---- TOP BAR ---- */
 
#top-bar { 
     top: 8.4rem;
     display: flex;
     justify-content: center;
     right: 0;
}
#top-bar, #top-bar a {
     color: rgb(var(--white-monochrome));
     transition: color 0s;
}
#top-bar ul li ul {
    border-color: rgb(var(--gray-monochrome));
    overflow: hidden;
    background-color: rgb(var(--dark-gray-monochrome));
}
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
   border-top-color: rgb(var(--black-monochrome));
}
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: rgb(var(--dark-gray-monochrome));
    color: rgb(var(--white-monochrome));
}
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: rgb(var(--gray-monochrome)); /* top bar hover background color */
    color: rgb(var(--white-monochrome));
    transition: color 0.1s linear;
}
 
/* ---- SIDE BAR ---- */
 
#side-bar {
    overflow-x: hidden;
    padding: 0;
    background-color: rgb(var(--white-monochrome));
}
 
#side-bar .side-block {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent !important;
    padding: 0;
}
 
#side-bar p {
    margin: 0;
}
 
#side-bar .heading, #side-bar .collapsible-block-folded, #side-bar .collapsible-block-unfolded-link {
    border: none;
    border-radius: 0;
    color: rgb(var(--white-monochrome));
    font-size: 1.2em;
    padding: 0;
    margin: 0;
    font-weight: bold;
    text-align: center;
    background-image: var(--gradient-sidemenu-header);
    font-family: var(--title-font);
}
 
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    font-size: 1em;
}
 
#side-bar .collapsible-block-link {
    margin: 0;
    color: rgb(var(--white-monochrome)) !important;
    background-color: transparent !important;
    font-weight: normal;
}
 
#side-bar div.menu-item {
    margin: 0;
    font-size: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
 
#side-bar div.menu-item a {
    font-weight: normal;
    flex: 1;
}
 
#side-bar .menu-item > img {
    display: none;
}
 
#side-bar .menu-item > a {
    transition: all 0.1s ease-in-out;
    display: block;
    color: rgb(var(--dark-accent));
    /* background-color: rgba(var(--bright-accent), .25); */
    margin: 0;
    padding: 0.4em;
    font-size: 12.8px;
    white-space: nowrap;
}
#side-bar .menu-item > a:hover {
    background-color: rgba(var(--dark-accent), .3);
    text-decoration: none;
}
 
#side-bar .menu-item > a[href*="/random:random-tale"]::before {
    content: "随机";
}
 
#side-bar .menu-item > a[href="/most-recently-edited"]::before {
    content: "最近";
}
 
#side-bar .menu-item > a[href="/forum:recent-posts"]::before {
    content: "最近论坛";
}
 
#side-bar .menu-item > a[href*="/scp-series"] {
    display: inline-block;
}
 
#side-bar div.menu-item a {
    flex: 1;
}
 
#top-bar div.open-menu a {
    border-radius: 0;
    box-shadow: none;
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--medium-accent));
    border: solid 1px rgb(var(--medium-accent));
}
 
@media (max-width: 767px) {
    #main-content {
        padding: 0;
        margin: 0 5%;
        border-left: none;
    }
    #page-title {
        margin-top: 0.7em;
    }
    #side-bar {
        background-color: rgb(var(--white-monochrome));
        left: -18.6em;
    }
    #side-bar:target {
        border: none;
        box-shadow: none;
    }
    #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: 18.6em 50%;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
    }
    #side-bar:target .close-menu {
        width: calc(100% - 17em);
        right: 0;
        left: auto;
        opacity: 1;
        pointer-events: auto;
    }
    #side-bar:target .close-menu:hover {
        background: unset;
    }
    #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
        margin: 3em -5.5%;
    }
    #side-bar {
        top: 0;
    }
    #search-top-box {
        top: 107px;
    }
}
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: rgb(var(--medium-accent));
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: rgb(var(--white-monochrome));
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: rgb(var(--light-gray-monochrome));
     border: unset;
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: rgb(var(--white-monochrome));
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: rgb(var(--medium-accent));
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: rgb(var(--white-monochrome));
     background-color: rgb(var(--gray-monochrome));
     border-color: transparent;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: rgb(var(--medium-accent));
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: rgb(var(--white-monochrome));
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: rgb(var(--white-monochrome));
     background-color: rgb(var(--medium-accent));
}
 .yui-navset .yui-content {
    background-color: rgb(var(--light-pale-gray-monochrome));
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
     border: none;
}
 
/*---- TAB ANIMATION by Croquembouche ---- */
 
.yui-navset .yui-content > div {
    display: block;
    top: 0;
    overflow: hidden;
    transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
    display: block !important;
    flex: 0;
    max-height: 0;
    padding: 0 0.5em;
    border-width: 0;
    /* The following transition affects the one that DISAPPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0s;
    animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
    display: block !important;
    flex: 1;
    max-height: 9999rem;
    /* The following transition affects the one that APPEARS */
    transition: padding 0s linear 0.5s,
          border-width 0s linear 0.5s,
          flex 0.5s cubic-bezier(.18,.51,.54,.9) 0.5s;
    animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
 
@keyframes tab-disappear {
    0% { max-height: 9999rem; }
    1% { max-height: 100vh; }
    100% { max-height: 0; }
}
@keyframes tab-appear {
    0% { max-height: 0; }
    99% { max-height: 100vh; }
    100% { max-height: 9999rem; }
}
 
/* ---- INFO BAR ---- */
 body{
     --barColour: rgb(var(--medium-accent));
     --linkColour: rgb(var(--white-monochrome));
}
 
 .info-container .collapsible-block-content{
     padding: 0 .5em 30px;
}
 .info-container .collapsible-block-content .wiki-content-table{
     width: 100%;
}
 
/* Ayer's info-bar patch by Monkatraz */
#page-content .info-container .collapsible-block-folded, #page-content .info-container .collapsible-block-unfolded-link  {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: none;
}
#page-content .info-container .collapsible-block-link::before, #page-content .info-container .collapsible-block-unfolded-link::before  {
    content: " ";
    display: none;
}
#page-content .info-container .collapsible-block-content::after {
    display: none;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
     margin: unset;
     margin-top: 4px;
     margin-bottom: 4px;
     margin-right: 3px;
}
#page-content .rate-box-with-credit-button {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border: solid 2px rgb(var(--very-light-gray-monochrome));
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px rgb(var(--bright-accent));
}
#page-content .rate-box-with-credit-button .creditButton p a {
    border-left-color: transparent;
}
 
#page-content .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: 0;
}
 
.rate-box-with-credit-button .page-rate-widget-box .cancel a:hover {
    border-radius: 0;
}
 
#page-content .rate-box-with-credit-button .fa-info {
     color: rgb(var(--black-monochrome));
}
#page-content .rate-box-with-credit-button .fa-info:hover {
     color: rgb(var(--pale-accent));
}
 
#page-content .creditButtonStandalone p a {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border: solid 2px rgb(var(--light-pale-gray-monochrome));
    border-radius: 0;
    box-shadow: 3px 0px 0px 0px rgb(var(--bright-accent));
    color: rgb(var(--black-monochrome));
}
#page-content .creditButtonStandalone p a:hover {
    color: rgb(var(--medium-accent));
}
 
#page-content .modalbox {
     background: rgb(var(--very-light-gray-monochrome)) !important;
     color: rgb(var(--black-monochrome));
     box-shadow: none;
}
.close-credits,
.credit-back {
    filter: grayscale(100%) invert(100%) contrast(275%);
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
     margin: unset;
     border-radius: 0;
     border: solid 2px rgb(var(--light-gray-monochrome));
     box-shadow: 3px 0px 0px 0px rgb(var(--bright-accent));
     background-color: rgb(var(--light-pale-gray-monochrome));
     margin-top: 4px;
     margin-bottom:4px;
     margin-right: 3px;
}
 
.page-rate-widget-box .rate-points {
    background-color: rgb(var(--light-pale-gray-monochrome)) !important;
    border: none;
    color: rgb(var(--black-monochrome)) !important;
    text-transform: capitalize;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border-top: none;
    border-bottom: none;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: rgb(var(--black-monochrome));
}
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: transparent;
    color: rgb(var(--pale-monochrome));
}
.page-rate-widget-box .cancel {
    background: transparent;
    background-color: rgb(var(--light-pale-gray-monochrome));
    border: none;
}
.page-rate-widget-box .cancel a {
    color: rgb(var(--black-monochrome));
}
.page-rate-widget-box .cancel a:hover {
    background: transparent;
    color: rgb(var(--pale-monochrome));
}
 
/* ---- PAGE ELEMENTS ---- */
 
.page-source, tt{ 
    font-family: var(--mono-font);
    font-size: 0.87rem;
}
 .code pre, .code p, .code {
    font-family: var(--mono-font);
    font-size: 0.87rem;
    color: rgb(var(--black-monochrome));
}
 
h1 {
    color: rgb(var(--medium-accent));
    font-family: var(--title-font);
    font-weight: bold;
}
h2,
h3,
h4,
h5,
h6 {
    color: rgb(var(--black-monochrome));
    font-family: var(--title-font);
    font-weight: bold;
}
 
#page-title, .meta-title {
    color: rgb(var(--black-monochrome));
    font-family: var(--title-font);
    font-size: 1.65rem;
    text-align: center;
    border-color: rgb(var(--black-monochrome));
}
 
/* Clicky links */
a,
a.newpage,
a:visited,
#side-bar a:visited {
    color: rgb(var(--link-color));
    transition: color 0.15s linear;
}
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:visited:hover {
    color: rgb(var(--white-monochrome));
    text-decoration: none;
    background-color: rgb(var(--link-color));
}
a.newpage {
    color: rgb(var(--alt-accent));
    transition: color 0.15s linear;
}
a.newpage:hover {
    color: rgb(var(--white-monochrome));
    text-decoration: none;
    background-color: rgb(var(--alt-accent));
}
 
/* patch for sidebar media, collapsibles, ACS, info button and ayers module so link doesn't override */
 
/* {$fancy-collapsible}/
#page-content .collapsible-block-folded a:hover,
#page-content .collapsible-block-unfolded-link a:hover, /{$fancy-collapsible} */
#page-content .rate-box-with-credit-button .fa-info:hover,
#side-bar .side-block.media a:hover, .danger-diamond a:hover {
    background: transparent;
}
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
    background: var(--linkColour) !important;
}
 
hr{
    background-color: rgb(var(--medium-accent));
}
 
blockquote,
div.blockquote,
#toc {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border: solid 2px rgb(var(--light-gray-monochrome));
    box-shadow: -3px 0px 0px -0.1px rgb(var(--bright-accent));
}
 
.code {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border: solid 3px rgb(var(--light-gray-monochrome));
    box-shadow: none;
}
.scp-image-block {
    border: solid 8px rgb(var(--light-pale-gray-monochrome));
    border-bottom: solid 0px rgb(var(--light-pale-gray-monochrome));
    box-shadow: 0px 0.26rem 0px 0px rgb(var(--bright-accent));
    box-sizing: border-box;
}
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border: solid 4px rgb(var(--light-pale-gray-monochrome));
    color: rgb(var(--black-monochrome));
    font-size: 0.84rem;
}
.scp-image-block.block-left { margin-left: 0; }
.scp-image-block.block-right { margin-right: 0; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
#page-content .wiki-content-table tr th {
    border: solid 1px rgb(var(--medium-accent));
    color: rgb(var(--medium-accent));
    background-color: rgb(var(--light-pale-gray-monochrome));
    /* set border for table title */
}
#page-content .wiki-content-table tr td {
    border: solid 1px rgb(var(--medium-accent));
    /* set border for table content */
}
 
/* fancy collapsible */
/* {$fancy collapsible}/
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    background: rgb(var(--dark-accent));
    transition: background 0.25s linear;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
}
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷ ";
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽ ";
}
#page-content .collapsible-block-link {
    text-decoration: none;
    color: rgb(var(--white-monochrome));
    font-weight: bold;
}
#page-content .collapsible-block-folded:hover, #page-content .collapsible-block-unfolded-link:hover {
    background: rgb(var(--medium-accent));
}
#page-content .collapsible-block-unfolded-link {
    box-shadow: 0px -0.26rem 0px 0px rgb(var(--bright-accent));
}
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/{$fancy-collapsible} */
 
/* Selection */
::selection {
    background: rgb(var(--medium-accent));
    color: rgb(var(--white-monochrome));
}
 
/* Footnotes */
.hovertip {
    font-size: .9rem;
    background-color: rgb(var(--light-pale-gray-monochrome)) !important;
    border: solid 1px rgb(var(--medium-accent)) !important;
}
.footnotes-footer {
    background-color: rgb(var(--light-pale-gray-monochrome));
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    padding-bottom: 1.5rem;
    box-shadow: -0.24rem 0px 0px 0px rgb(var(--bright-accent));
}
.footnotes-footer .title {
    color: rgb(var(--black-monochrome));
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
/* Tags */
#main-content .page-tags a {
    margin-top: .18rem;
}
.page-tags span {
    border-top: 1px solid rgb(var(--black-monochrome));
}
 
/* Pop-Up Windows */
.owindow {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border-color: rgb(var(--medium-accent));
}
 
.owindow .modal-header {
    background-color: rgb(var(--light-pale-gray-monochrome));
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.owindow .title {
    background-color: ;
    color: rgb(var(--medium-accent));
    border-bottom: 1px solid rgb(var(--pale-accent));
}
 
.owindow .button-bar a {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border-color: rgb(var(--medium-accent));
    color: rgb(var(--black-monochrome));
}
.owindow .button-bar a:hover {
    background-color: rgb(var(--medium-accent));
}
 
/* Edit Buttons */
.buttons .btn {
    background-color: rgb(var(--very-light-gray-monochrome));
    border-color: rgb(var(--medium-accent));
    color: rgb(var(--medium-accent));
    padding: 3px 5px;
}
.buttons .btn:hover {
    background-color: rgb(var(--medium-accent));
    color: rgb(var(--white-monochrome));
}
 
/* Edit Lock Info*/
#lock-info {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--white-monochrome));
}
 
/* Close Button for Page Source, Rating, Etc */
a.action-area-close:hover {
    background-color: rgb(var(--pale-accent));
}
 
/* Page-History Current */
.pager .current {
    background-color: rgb(var(--medium-accent));
    border-color: rgb(var(--white-monochrome));
}
 
/* History Compare */
.inline-diff ins, .inline-diff del {
    color: rgb(var(--pale-accent));
}
 
/* ---- INTERWIKI ---- */
 
.scpnet-interwiki-frame{
    filter: invert(100%) grayscale(100%) contrast(75%);
}
 
/* ---- CUSTOM SYNTAX ---- */
 
.darkbox {
    color: rgb(var(--white-monochrome));
    background-color: rgb(var(--gray-monochrome));
    border-left: solid 0.26rem rgb(var(--medium-accent));
    border-right: solid 0.26rem rgb(var(--medium-accent));
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
 
.lightbox {
    background-color: rgb(var(--white-monochrome));
    color: rgb(var(--black-monochrome));
    border-left: solid 0.26rem rgb(var(--medium-accent));
    border-right: solid 0.26rem rgb(var(--medium-accent));
    padding: .4rem;
    margin-top: 12px;
    margin-bottom:12px;
}
.darkbox h2, .darkbox h3, .darkbox h4, .darkbox h5, .darkbox h6 {
    color: rgb(var(--white-monochrome));
}
 
.limit {
    margin-bottom: -1rem;
    z-index: 5;
 
}
.anchor {
    position: sticky;
    height:0;
    top: 0;
    z-index: 5;
}
.sidebox {
    background-color: rgb(var(--light-pale-gray-monochrome));
    border-top: solid 2px rgb(var(--medium-accent));
    padding: .14rem;
    margin-top: 0;
    margin-bottom: 8px;
    width: calc((100vw - 870px)/2);
    max-height: calc(100vh - 18rem);
    position: absolute;
    top: 0;
    left: 103.5%;
    z-index: 5;
    overflow: auto;
    box-sizing: border-box;
}
/* Sidebox mobile optimization, courtesy of Woed */
@media (max-width: 1290px) {
   .sidebox {
        width: auto;
        max-width: 65vw!important;
        border: none;
        padding-left: 0.4rem; padding-right: 0.4rem;
        top: 0.75rem;
        right: calc(((100vw - 45.8rem)/2) * -1);
        left: initial;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        clip-path: inset(-0.125rem -0.25rem 0 calc(100% - 0.85rem));
        -webkit-transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        -o-transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s;
        transition: color 0.2s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s;
        overflow: visible;
    }
 
    .sidebox::before, .sidebox::after {
        content: " ";
        position: absolute;
        right: 0;
    }
 
    .sidebox::before {
        top: calc(50% - 0.75rem);
        width: 0;
        height: 0;
        border-top: 0.75rem solid transparent;
        border-bottom: 0.75rem solid transparent;
        border-right: 0.75rem solid rgb(var(--medium-accent));
        transition: border 0.1s ease-in-out 0.1s;
        z-index: 10;
    }
 
    .sidebox::after {
        top: 0;
        max-width: 0.75rem;
        width: 100%;
        height: 100%;
        box-shadow: 0.15rem 0 0 0 rgb(var(--bright-accent));
        max-height: calc(100vh - 18rem);
        background-color: rgb(var(--light-pale-gray-monochrome));
        z-index: -1;
        transition: box-shadow 0.5s ease-in-out 0.1s, max-width 0.5s ease-in-out 0.1s;
    }
 
    .sidebox > * {
        opacity: 0;
        -webkit-transition: opacity 0.2s ease-in-out 0.2s;
        -o-transition: opacity 0.2s ease-in-out 0.2s;
        transition: opacity 0.2s ease-in-out 0.2s;
    }
 
    .sidebox:hover {
        overflow: visible;
        -webkit-clip-path: inset(-0.125rem -0.25rem 0 0);
        clip-path: inset(-0.125rem -0.25rem 0 0);
        -webkit-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
        -o-transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s;
        transition: color 0.5s ease-in-out 0.2s, right 0.5s ease-in-out 0.1s, clip-path 0.5s ease-in-out 0.1s, box-shadow 0.5s ease-in-out 0.1s, -webkit-clip-path 0.5s ease-in-out 0.1s, -webkit-box-shadow 0.5s ease-in-out 0.1s;
    }
 
    .sidebox:hover::before {
        border-top: 0 solid transparent;
        border-bottom: 0 solid transparent;
    }
    .sidebox:hover::after {
        box-shadow: 0 -0.125rem 0 0 rgb(var(--bright-accent));
        right: 0;
        max-width: 100%;
    }
    .sidebox:hover > * {
        opacity: 1;
    }
}
 
@media (max-width:768px) {
    .sidebox, .sidebox:hover {
        right: calc(((100vw - (100% - 3rem))/2) * -1 + 1.9rem);
    }
}
 
/* FIX */
 
#header h1 a, #header h2 span {
    margin: unset !important;
}
 
#side-bar .side-block a {
    background-color: rgba(var(--bright-accent), 0.25);
}
 
:root {
  --white-monochrome: 252, 252, 252;
  --pale-gray-monochrome: 244, 244, 244;
  --light-pale-gray-monochrome: 244, 244, 244;
  --very-light-gray-monochrome: 215, 215, 215;
  --light-gray-monochrome: 160, 160, 160;
  --gray-monochrome: 66, 66, 72;
  --dark-gray-monochrome: 48, 48, 52;
  --black-monochrome: 12, 12, 12;
  --pale-accent: 230, 40, 60;
  --bright-accent: 133, 0, 5;
  --medium-accent: 100, 46, 44;
  --dark-accent: 100, 3, 15;
  --alt-accent: 221, 102, 17;
  --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
  --header-font: "Josefin Sans", sans-serif;
  --title-font: "Josefin Sans", sans-serif;
  --body-font: "Roboto", sans-serif;
  --mono-font: "Fira Code", monospace;
  --link-color: var(--pale-accent);
  --gradient-sidemenu-header: linear-gradient(10deg,
    rgba(var(--medium-accent), 0.45) 0%,
    rgba(var(--medium-accent), 0.55) 100%
  );
}