新贵族 版式

注意

此版式尚在重新开发中，请使用风格类似的“玄武岩”或“单色型”。

如果您可以接受此版式可能带来的各种加载问题，请在[[include]]语法中添加|indev=*以隐藏此提示。

著作信息

---

新贵族版式由Dr Hormress制作。

---

更多

更多

---

您页面的更多信息。

---

NAT - The New Aristocrat Theme

新贵族版式，又名白色高光笔

由Dr Hormress制作

这是什么？

这是一个美学版式，灵感来源于由EstrellaYoshte制作的纸堆 版式、由azamo 不匹配任何一个现有的用户名和Placeholder McD制作的玄武岩 版式，以及Woedenaz制作的黑色标记笔 主题版式。

尽管拥有相似的布局，NAT不是基于黑色标记笔的版式。如同黑标和玄武岩，NAT更改了几乎整个页面的布局，它甚至能在没有引入Sigma-9版式的情况下工作。

NAT从以下这些页面偷借了一些元素：

• 由Woedenaz制作的SCP-5633样式
• 由Yossipossi制作的YOSSISTYLE（为了首字母大写的评分模块）

在页面的任何地方引入下方的语法以引入NAT：

[[include :ah-sandbox:theme:new-aristocrat-dev]]

版式变量

你可以调整版式变量来改变从页面标题到整个页面配色的页面显示状态。

[[include :ah-sandbox:theme:new-aristocrat-dev
|变量1=值
|变量2=值
|变量3=值
|...
]]

以下是所有可用变量。

---

移除页面标题

|notitle=*

---

居中顶栏

|centeredheader=*

---

使用经典评分按钮样式

|classicratebutton=*

采用经典的“ ”评分按钮，而非默认的“ ”。

---

修改版头标题

|changetitle=*
|title=你的版头标题
|subtitle=你的版头副标题

---

修改Logo

|changelogo=*
|logo-image=http://url.com/
|logo-opacity=100%
|logo-invert=0%

---

修改版式配色

经典

[[include :ah-sandbox:theme:new-aritocrat-dev
|classic=*
]]

深色

[[include :ah-sandbox:theme:new-aritocrat-dev
|deep=*
]]

灰色

[[include :ah-sandbox:theme:new-aritocrat-dev
|grey=*
]]

暗色

[[include :ah-sandbox:theme:new-aritocrat-dev
|dark=*
]]

更暗

[[include :ah-sandbox:theme:new-aritocrat-dev
|dark=*
|darker=*
]]

最暗

[[include :ah-sandbox:theme:new-aritocrat-dev
|dark=*
|darkest=*
]]

一张图片。

示例

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

---

一个链接 (一个你很可能已经访问过的链接)

+ 一个折叠

一号标题

二号标题

三号标题

四号标题

五号标题

六号标题

一个普通的图片方块。

[[include :scp-wiki:component:image-block
|name=...
]]

一个破碎的图片方块。

[[div class="image-block-break"]]
[[/div]]

[[include :scp-wiki:component:image-block
|name=...
]]

一个强调的图片方块。

[[div class="image-block-accent"]]
[[/div]]

[[include :scp-wiki:component:image-block
|name=...
]]

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

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

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

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

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

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

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

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

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

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

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

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

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

由于一些奇怪的原因，这个空 tab 有一个很长的名字。我想知道为什么？这很奇怪。

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

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

更多文字

---

一条分割线

嵌套引用块

嵌套内陷引用块

使用[[div class="blockquote inset"]]来创建这个。或者使用inset类创建其他内陷的div元素。

这是一个普通的盒子，它拥有透明的背景。

使用[[div class="box"]]创建它。

这是一个内嵌的盒子。

使用[[div class="box inset"]]创建它。

[[div class="box light"]]

这个div拥有白色的背景。

[[div class="box dark"]]

这个div拥有黑色的背景。

[[div class="box roc"]]

这个div拥有圆角。

[[div class="box document light"]]

[[div class="box document dark"]]

[[div class="box raisa-memo"]]

[[div class="box domc-memo"]]

[[div class="box pata-memo"]]

[[div class="box overwatch-memo"]]

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

正文字体是Noto Sans SC和Noto Sans。
版头和标题字体是Comfortaa。
等宽字体是Anonymous Pro。

版式代码

+ 基础版式代码

/* ==================== *
 * NEW ARISTOCRAT THEME *
 * [2021 Wikidot Theme] *
 *    By Dr Hormress    *
 *     CC BY-SA 3.0     *
 * ==================== */
 
/* Non-Sigma-9 Fix */
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@300;400;500;700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');
 
@supports(--variables: 0) {
 
/* ====== *
 * COMMON *
 * ====== */
 
body {
    color: rgb(var(--base-dark-color));
    background-color: rgb(var(--base-bright-color));
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    font-family: var(--body-font);
}
 
#page-content {
    font-size: var(--base-font-size);
}
 
/* ---------------- *
 * Global Variables *
 * ---------------- */
 
:root {
 
    /* Basic Colors */
    --base-bright-color: var(--white-monochrome);
    --base-dark-color: var(--black-monochrome);
    --link-color: var(--bright-accent);
 
    --white-monochrome: 252, 252, 252;
    --black-monochrome: 15, 15, 15;
    --red-monochrome: 225, 72, 72;
    --green-monochrome: 72, 225, 72;
    --blue-monochrome: 56, 103, 204;
 
    --main-accent: var(--base-dark-color);
    --bright-accent: var(--blue-monochrome);
    --light-accent: 252, 252, 252;
    --dark-accent: 15, 15, 15;
 
    /* Other */
    --base-font-size: 0.85rem;
    --base-line-height: 1.4;
    --base-box-shadow: 0 0 4px rgba(var(--base-dark-color), 0.25);
    --base-transition-time: 0.5s;
    --main-width: 720px;
 
    /* Fonts */
    --header-font: var(--title-font);
    --title-font: "Comfortaa", "Noto Sans SC", sans-serif;
    --body-font: "Noto Sans", "Noto Sans SC", sans-serif;
    --mono-font: "Anonymous Pro", "Roboto Mono", "Courier New", "Noto Sans SC", monospace;
 
    /* Header */
    --header-height: 10rem;
    --header-title: "SCP基金会";
    --header-title-color: var(--base-dark-color);
    --header-h1-x: calc(var(--header-icon-size) + 1rem);
    --header-h1-y: 4.5rem;
    --header-subtitle: "控制，收容，保护";
    --header-subtitle-color: var(--header-title-color);
    --header-h2-x: calc(var(--header-icon-size) + 1rem);
    --header-h2-y: calc(var(--header-h1-y) + 2.5rem);
    --header-bg-color: var(--base-bright-color);
    --header-bg-top-color: var(--header-bg-color);
    --header-bg-middle-color: var(--header-bg-color);
    --header-bg-bottom-color: var(--header-bg-color);
    --header-gradient: linear-gradient(
                       to bottom,
                       rgb(var(--header-bg-top-color)) 0,
                       rgb(var(--header-bg-middle-color)) 50%,
                       rgb(var(--header-bg-bottom-color)) 100%
                       );
    --header-bg-size: auto 100%;
    --header-button-color: var(--base-dark-color);
    --header-button-hover-color: var(--green-monochrome);
    --header-button-bg-color: var(--base-bright-color);
    --header-button-x: 4.5rem;
    --header-icon: url("https://ah-sandbox.wikidot.com/local--files/theme:new-aristocrat-dev/nalogo.png");
    --header-icon-size: 5rem;
    --header-icon-x: 0;
    --header-icon-y: 4rem;
    --header-icon-w: var(--header-icon-size);
    --header-icon-drop-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    --header-icon-opacity: 1;
    --header-icon-invert: 0;
 
    /* Topbar */
    --topbar-height: 2rem;
    --topbar-bg-color: var(--header-bg-color);
    --topbar-bg-size: 100% var(--topbar-height);
    --topbar-bg-top-color: var(--topbar-bg-color);
    --topbar-bg-middle-color: var(--topbar-bg-color);
    --topbar-bg-bottom-color: var(--topbar-bg-color);
    --topbar-gradient: linear-gradient(
                       to bottom,
                       rgb(var(--topbar-bg-top-color)) 0,
                       rgb(var(--topbar-bg-middle-color)) 50%,
                       rgb(var(--topbar-bg-bottom-color)) 100%
                       );
    --topbar-button-color: var(--topbar-item-text-color);
    --topbar-item-text-color: var(--base-dark-color);
    --topbar-item-hover-text-color: var(--topbar-menu-item-text-color);
    --topbar-item-hover-bg-color: var(--topbar-menu-item-bg-color);
    --topbar-menu-item-width: 10rem;
    --topbar-menu-item-height: var(--topbar-height);
    --topbar-menu-item-bg-color: var(--base-dark-color);
    --topbar-menu-item-text-color: var(--base-bright-color);
    --topbar-menu-item-border-color: var(--base-dark-color);
 
    /* Sidebar */
    --sidebar-width: 15rem;
    --sidebar-bg-color: var(--base-bright-color);
    --sidebar-block-bg-color: var(--base-bright-color);
    --sidebar-heading-color: var(--base-dark-color);
    --sidebar-heading-bg-color: var(--base-bright-color);
    --sidebar-item-height: calc(var(--base-font-size) * 2);
    --sidebar-item-hover-bg-color: var(--sidebar-link-color);
    --sidebar-link-color: var(--base-dark-color);
    --sidebar-link-hover-color: var(--base-bright-color);
 
    /* Rate Box */
    --ratebox-height: 1.5rem;
    --ratebox-text-color: var(--base-dark-color);
    --ratebox-bg-color: var(--base-bright-color);
    --ratebox-btn-color: var(--ratebox-text-color);
    --ratebox-btn-bg-color: var(--ratebox-bg-color);
    --ratebox-btn-hover-color: var(--ratebox-bg-color);
    --rateup-hover-bg-color: var(--green-monochrome);
    --ratedown-hover-bg-color: var(--red-monochrome);
    --ratebox-btn-hover-bg-color: var(--base-dark-color);
 
    /* Tabview */
    --tab-color: var(--base-dark-color);
    --tab-bg-color: var(--base-bright-color);
    --tab-item-height: 2rem;
    --tab-item-color: var(--base-bright-color);
    --tab-item-bg-color: var(--base-dark-color);
    --tab-item-hover-color: var(--tab-item-color);
    --tab-item-hover-bg-color: var(--tab-item-bg-color);
    --tab-item-selected-color: var(--base-dark-color);
    --tab-item-selected-bg-color: var(--base-bright-color);
 
    /* Wiki Content Table */
    --table-th-color: var(--base-bright-color);
    --table-th-bg-color: var(--base-dark-color);
    --table-th-border-color: var(--base-dark-color);
    --table-td-color: var(--base-dark-color);
    --table-td-bg-color: var(--base-bright-color);
    --table-td-border-color: var(--base-dark-color);
 
    /* Buttons */
    --btn-color: var(--bright-accent);
    --btn-bg-color: var(--base-bright-color);
    --btn-hover-bg-color: var(--btn-color);
 
    /* OWindow */
    --window-bg-color: var(--base-bright-color);
    --window-title-bg-color: var(--base-dark-color);
 
    /* Editor */
    --weditor-button-bg-color: var(--base-bright-color);
    --weditor-button-hover-bg-color: var(--base-dark-color);
 
    /* Forum Thread */
    --thread-head-bg-color: var(--base-bright-color);
 
}
 
@media (max-width: 767px) {
:root {
    /* Mobile Fix */
    --header-button-x: 1rem;
}
}
 
/* ------------ *
 * Global Width *
 * ------------ */
 
div#content-wrap {
    position: relative;
    margin: 0;
    max-width: 100vw;
    min-height: 1300px;
    height: auto !important;
}
 
div#main-content,
div#page-content {
    padding: 0;
    margin: 0 auto;
    max-width: var(--main-width);
    min-height: 720px;
}
 
div#main-content {
    margin-top: -100vh;
    padding-top: 1.5rem;
}
 
@media (max-width: calc(720px + 18rem * 2 + 3.4rem - 1px)) {
div#main-content {
    margin-left: calc(var(--sidebar-width) + 4rem);
    margin-right: 2rem;
}
}
 
@media (max-width: 767px) {
div#content-wrap {
    margin-left: 0;
    margin-right: 0;
}
 
div#main-content,
div#page-content {
    padding: 0;
    margin: 0 auto;
}
 
div#main-content {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding-top: 1.5rem;
}
 
.owindow {
    min-width: 80%;
    max-width: 99%;
}
 
.modal-body .table,
.modal-body .table ~ div {
    float: none !important;
}
 
.owindow .button-bar {
    float: right;
}
 
.owindow div a.btn-primary {
    display: block;
    float: none;
    width: fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
}
 
a,
span,
#action-area td {
    word-break: break-all;
}
}
 
/* ====== *
 * HEADER *
 * ====== */
 
/* ------------ *
 * Header title *
 * ------------ */
 
div#container-wrap,
div#header {
    background-image: none;
}
 
div#header {
    position: sticky;
    top: calc(var(--header-height) * -1);
    height: calc(var(--header-height) + var(--topbar-height));
    background-color: transparent;
    padding-bottom: 0;
    max-width: 60rem;
    width: 90%;
    margin: 0 auto;
    z-index: 20;
}
 
div#header h1,
div#header h2 {
    float: none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    z-index: 5;
}
 
div#header h1,
div#header h1 a,
div#header h2 {
    margin: 0;
    padding: 0;
    line-height: 1;
    max-width: unset;
    max-height: unset;
    letter-spacing: 0;
}
 
div#header h1 a span,
div#header h2 span {
    display: none;
}
 
div#header h1 {
    left: var(--header-h1-x);
    top: var(--header-h1-y);
    width: var(--header-h1-w);
}
 
div#header h2 {
    left: var(--header-h2-x);
    top: var(--header-h2-y);
    width: var(--header-h2-w);
}
 
div#header h1 a::before {
    content: var(--header-title);
    font-size: 2.5rem;
    font-weight: bold;
    font-family: var(--header-font);
    line-height: 2.5rem;
    color: rgb(var(--header-title-color));
    text-shadow: 0 0 2px rgba(var(--header-title-color), 0.25);
}
 
@media (max-width: 479px) {
div#header h1 a::before {
    line-height: 1.6rem;
    font-size: 1.6rem;
}
}
 
div#header h2::before {
    content: var(--header-subtitle);
    font-size: 1rem;
    font-weight: normal;
    font-family: var(--title-font);
    line-height: 1rem;
    color: rgb(var(--header-subtitle-color));
    text-shadow: 0 0 2px rgba(var(--header-subtitle-color), 0.25);
}
 
div#header::after {
    content: "";
    display: block;
    position: absolute;
    top: var(--header-icon-y);
    left: var(--header-icon-x);
    width: var(--header-icon-w);
    height: var(--header-icon-size);
    background-image: var(--header-icon);
    background-repeat: no-repeat;
    background-size: auto var(--header-icon-size);
    background-position: center center;
    filter: drop-shadow(var(--header-icon-drop-shadow)) opacity(var(--header-icon-opacity)) invert(var(--header-icon-invert));
    -webkit-filter: drop-shadow(var(--header-icon-drop-shadow)) opacity(var(--header-icon-opacity)) invert(var(--header-icon-invert));
    z-index: 2;
}
 
/* ----------- *
 * Top Buttons *
 * ----------- */
 
div#header #login-status {
    top: var(--header-button-x);
    right: 1.9rem;
    font-size: 0;
}
 
div#header #login-status div#account-options {
    font-size: var(--base-font-size);
    border: none;
    border-radius: 0.3rem;
    width: 4rem;
    box-shadow: var(--base-box-shadow);
}
 
div#header #login-status span {
    display: none;
}
 
div#header #login-status span.printuser {
    display: inline-block;
    border-radius: 0.4rem;
    transition: ease var(--base-transition-time);
}
 
div#header #login-status a.login-status-create-account::before {
    content: "\f007";
}
 
div#header #login-status a.login-status-sign-in::before {
    content: "\f090";
}
 
div#header #login-status > a[href*="/account/messages"] {
    display: block;
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    left: 1.25rem;
    top: 1.25rem;
    line-height: 0.75rem;
    color: transparent;
    background-color: rgb(var(--message-reminding-bg-color, 225, 72, 72));
    border-radius: 50%;
    z-index: 25;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
}
 
div#header #login-status a#account-topbutton {
    border: none;
    margin: 0;
    padding: 0;
}
 
div#header #login-status a#account-topbutton::before {
    content: "\f0d7";
}
 
div#header #search-top-box::before {
    content: "\f002";
}
 
div#header #search-top-box::before,
div#header #login-status span.printuser a,
div#header #login-status a::before {
    display: inline-block;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.2rem;
    color: rgb(var(--header-button-color));
    background-color: rgb(var(--header-button-bg-color));
    text-align: center;
    font-family: "FontAwesome";
    font-size: 1.2rem;
    line-height: 1.5rem;
    border-radius: 0.3rem;
    box-shadow: var(--base-box-shadow);
    transition: ease var(--base-transition-time);
    overflow: hidden;
}
 
div#header #login-status span.printuser img.small {
    margin: 0;
    padding: 0;
    background-image: none !important;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.3rem;
}
 
div#header #login-status span.printuser:hover,
div#header #login-status span.printuser:focus {
    background-color: rgba(var(--header-button-hover-color), 0.75);
}
 
div#header #login-status span.printuser:hover img.small,
div#header #login-status span.printuser:focus img.small {
    opacity: 0.75
}
 
div#header #search-top-box:hover::before,
div#header #login-status a:hover::before,
div#header #search-top-box:focus::before,
div#header #login-status a:focus::before {
    color: rgb(var(--header-button-hover-color));
    text-decoration: none;
}
 
div#header #search-top-box {
    top: var(--header-button-x);
    right: 0;
    width: 1.9rem;
    height: 1.9rem;
}
 
div#header #search-top-box input#search-top-box-input {
    display: none;
}
 
div#header #search-top-box #search-top-box-form input[type=submit],
div#header #search-top-box #search-top-box-form input[type=submit]:hover,
div#header #search-top-box #search-top-box-form input[type=submit]:focus {
    position: absolute;
    left: 0;
    top: 0;
    border-width: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    background-image: none;
    background: none;
    box-shadow: none;
    border-radius: 0.3rem;
    margin: 0.2rem;
    opacity: 1;
    z-index: 10;
}
 
div#header #search-top-box #search-top-box-form:not(:hover) input[type=submit]:focus {
    background-color: rgba(var(--header-button-hover-color), 0.375);
}
 
/* ----------- *
 * Topbar Menu *
 * ----------- */
 
div#top-bar div.mobile-top-bar {
    display: none;
}
 
@media (max-width: 767px) {
div#top-bar div.top-bar {
    display: none;
}
 
div#top-bar div.mobile-top-bar {
    display: block;
}
}
 
body::before {
    content: "";
    display: block;
    position: sticky;
    top: calc(var(--header-height) * -1);
    width: 100%;
    height: calc(var(--header-height) + var(--topbar-height));
    background-color: rgb(var(--header-bg-color));
    background-image: var(--topbar-gradient), var(--header-gradient);
    background-size: var(--topbar-bg-size), var(--header-bg-size);
    box-shadow: var(--base-box-shadow);
    background-position: center var(--header-height), center center;
    background-repeat: repeat-x, repeat;
    z-index: 15;
}
 
div#container-wrap {
    margin-top: calc(var(--header-height) * -1 + var(--topbar-height) * -1);
}
 
div#top-bar {
    z-index: 20;
    width: 100%;
    max-width: 60rem;
    right: auto;
    font-size: inherit;
    position: absolute;
    top: var(--header-height);
    height: var(--topbar-height);
    background-color: transparent;
    background-image: none;
}
 
div#top-bar * {
    margin: 0;
}
 
div#top-bar div div.open-menu a {
    border: none;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: calc(var(--topbar-height) * -1);
    text-align: center;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: calc(var(--topbar-height) * 0.8);
    background-color: transparent;
    color: rgb(var(--topbar-button-color));
    width: var(--topbar-height);
    height: var(--topbar-height);
    line-height: var(--topbar-height);
    transition: ease var(--base-transition-time);
}
 
div#top-bar div div.open-menu a:hover {
    color: rgba(var(--topbar-button-color), 0.5);
    box-shadow: none;
}
 
div#top-bar div > ul {
    float: none;
    width: 100%;
    display: flex;
}
 
div#top-bar div > ul > li {
    flex-grow: 1;
    position: static;
}
 
div#top-bar div > ul > li > a {
    margin: 0;
    padding: 0;
    border: none;
    max-height: unset;
    height: var(--topbar-height);
    line-height: var(--topbar-height);
    color: rgb(var(--topbar-item-text-color));
    transition: ease var(--base-transition-time);
}
 
div#top-bar div > ul > li:hover > a,
div#top-bar div > ul > li.sfhover > a {
    border: none;
    color: rgb(var(--topbar-item-hover-text-color));
    background-color: rgba(var(--topbar-item-hover-bg-color), 0.75);
    background-image: none;
}
 
div#top-bar div > ul > li:hover > a:hover,
div#top-bar div > ul > li.sfhover > a:hover {
    background-color: rgba(var(--topbar-item-hover-bg-color), 0.87);
    background-image: none;
}
 
div#top-bar div > ul > li > ul,
div#top-bar div > ul > li:hover > ul,
div#top-bar div > ul > li.sfhover > ul {
    width: auto;
    border: none;
    box-shadow: var(--base-box-shadow);
    background-color: rgba(var(--topbar-menu-item-bg-color), 0.75);
}
 
div#top-bar div > ul > li > ul > li,
div#top-bar div > ul > li:hover > ul > li,
div#top-bar div > ul > li.sfhover > ul > li {
    border: none;
    width: auto;
}
 
div#top-bar div > ul > li > ul > li > a,
div#top-bar div > ul > li:hover > ul > li > a,
div#top-bar div > ul > li.sfhover > ul > li > a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: var(--topbar-menu-item-width);
    height: var(--topbar-menu-item-height);
    line-height: var(--topbar-menu-item-height);
    color: rgb(var(--topbar-menu-item-text-color));
    background-color: transparent;
    border: solid 1px rgb(var(--topbar-menu-item-border-color));
    transition: background-color ease var(--base-transition-time);
}
 
div#top-bar div > ul > li > ul > li > a:hover,
div#top-bar div > ul > li:hover > ul > li > a:hover,
div#top-bar div > ul > li.sfhover > ul > li > a:hover {
    background-color: rgba(var(--topbar-menu-item-bg-color), 0.4);
}
 
@media (max-width: 767px) {
div#top-bar {
    left: 0;
}
 
div#top-bar div.mobile-top-bar {
    position: absolute;
    width: calc(100% - var(--topbar-height));
    margin-left: var(--topbar-height);
}
 
div#top-bar div > ul > li > ul,
div#top-bar div > ul > li:hover > ul,
div#top-bar div > ul > li.sfhover > ul {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: absolute;
    left: calc(-6.1125% + var(--topbar-height) * -1);
    width: 100vw;
    border: solid 1px rgb(var(--topbar-menu-item-border-color));
}
 
div#top-bar div > ul > li > ul > li,
div#top-bar div > ul > li:hover > ul > li,
div#top-bar div > ul > li.sfhover > ul > li {
    width: 50%;
    max-width: 50%;
}
 
div#top-bar div > ul > li > ul > li > a,
div#top-bar div > ul > li:hover > ul > li > a,
div#top-bar div > ul > li.sfhover > ul > li > a {
    box-sizing: border-box;
    width: 100%; 
    max-width: 100%;
}
}
 
/* ======================= *
 * SIDE BAR & PAGE CONTENT *
 * ======================= */
 
/* ------------ *
 * Sidebar Menu *
 * ------------ */
 
div#side-bar {
    position: sticky;
    top: var(--topbar-height);
    left: 1.7rem;
    height: 100vh;
    width: var(--sidebar-width);
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    float: none;
    padding: 0;
}
 
#side-bar p {
    margin: auto;
}
 
@media (max-width: 767px) {
div#side-bar,
div#side-bar:target {
    position: fixed;
    width: var(--sidebar-width);
    top: 0;
    left: calc(var(--sidebar-width) * -1);
    z-index: 25;
    border: none;
    background-color: rgb(var(--sidebar-bg-color));
    transition: ease var(--base-transition-time);
}
 
div#side-bar:target {
    left: 0;
}
 
div#side-bar a.close-menu {
    display: block;
    opacity: 1;
    background: transparent;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: ease var(--base-transition-time);
}
 
div#side-bar a.close-menu img {
    display: none;
}
 
div#side-bar:target a.close-menu {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: transparent;
    backdrop-filter: blur(0.2rem);
    -webkit-backdrop-filter: blur(0.2rem);
}
}
 
div#side-bar div.side-block,
div#side-bar div.side-block.media,
div#side-bar div.side-block.resources {
    margin: 0.5rem;
    margin-top: 1rem;
    padding: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: var(--base-box-shadow);
    background-color: rgb(var(--sidebar-block-bg-color));
}
 
div#side-bar div.side-block[style*="background"] {
    background-color: rgba(var(--base-dark-color), 0.18) !important;
}
 
div#side-bar div.side-block div.heading,
div#side-bar div.collapsible-block-folded .collapsible-block-link,
div#side-bar div.collapsible-block-folded .collapsible-block-link:hover,
div#side-bar div.collapsible-block-unfolded-link .collapsible-block-link,
div#side-bar div.collapsible-block-unfolded-link .collapsible-block-link:hover {
    display: block;
    font-size: unset;
    font-size: calc(var(--base-font-size) * 1.25));
    font-weight: bold;
    font-family: var(--title-font);
    text-align: center;
    text-decoration: none;
    color: rgb(var(--sidebar-heading-color));
    background-color: rgb(var(--sidebar-heading-bg-color));
    box-shadow: var(--base-box-shadow);
    margin: 0.5rem;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    padding: 0;
    border-bottom: none;
}
 
div#side-bar div.collapsible-block-folded {
    background-image: none;
}
 
div#side-bar div.collapsible-block-unfolded-link {
    border: none;
}
 
div#side-bar div.side-block .menu-item {
    margin: 0;
    display: flex;
    font-size: 0;
    margin-left: var(--sidebar-item-height);
}
 
div#side-bar div.side-block .menu-item a {
    flex: 1;
    position: relative;
    font-weight: bold;
    display: block;
    line-height: var(--sidebar-item-height);
    font-size: var(--base-font-size);
    color: rgb(var(--sidebar-link-color));
    transition: ease var(--base-transition-time);
    padding-left: calc(var(--sidebar-item-height) * 0.5);
    white-space: nowrap;
}
 
div#side-bar div.side-block .menu-item a[href*="scp-series"] {
    padding-left: 0;
    text-align: center;
}
 
div#side-bar div.side-block .menu-item a:hover::before,
div#side-bar div.side-block .menu-item a:hover,
div#side-bar div.side-block .menu-item a:focus::before,
div#side-bar div.side-block .menu-item a:focus {
    text-decoration: none;
    color: rgb(var(--sidebar-link-hover-color));
    background-color: rgb(var(--sidebar-item-hover-bg-color));
}
 
div#side-bar div.side-block:not(.media) .menu-item img {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
}
 
div#side-bar img + a::before {
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--sidebar-item-height) * -1);
    width: var(--sidebar-item-height);
    height: var(--sidebar-item-height);
    max-height: var(--sidebar-item-height);
    line-height: var(--sidebar-item-height);
    overflow: hidden;
    text-align: center;
    font-weight: normal;
    font-family: "FontAwesome";
    font-size: var(--base-font-size);
    color: rgb(var(--base-dark-color));
    transition: ease var(--base-transition-time);
}
 
div#side-bar img[src*="help.png"] + a::before {
    content: "\f059";
}
 
div#side-bar img[src*="main.png"] + a::before {
    content: "\f192";
}
 
div#side-bar img[src*="default.png"] + a::before {
    content: "\f10c";
}
 
div#side-bar img[src*="home.png"] + a::before {
    content: "\f015";
}
 
div#side-bar img[src*="series.png"] + a::before {
    content: "\f1c0";
}
 
div#side-bar img[src*="forum.png"] + a::before {
    content: "\f086";
}
 
/* ---------- *
 * Scroll Bar *
 * ---------- */
 
::-webkit-scrollbar {
    cursor: pointer;
    border: none;
    width: 0.5rem;
    height: 0.5rem;
}
 
::-webkit-scrollbar-thumb {
    background: rgba(var(--base-dark-color), 0.8);
    cursor: pointer;
}
 
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--base-dark-color));
}
 
::-webkit-scrollbar-track {
    background: rgba(var(--base-bright-color), 0.4);
}
 
* {
    scrollbar-color: #222, #FAFAFA;
}
 
/* ----------- *
 * Rate Module *
 * ----------- */
 
div.page-rate-widget-box,
div#page-content div.page-rate-widget-box,
div#page-content div.creditRate,
div#page-content table.rate_t,
div#page-content table.rate_t2 {
    margin: 0;
    padding: 0;
    font-size: 0;
}
 
div.page-rate-widget-box,
div#page-content div.page-rate-widget-box,
div#page-content div.rate-box-with-credit-button,
div#page-content table.rate_t,
div#page-content table.rate_t2 {
    display: inline-flex;
    background-color: rgb(var(--ratebox-bg-color));
    height: var(--ratebox-height);
    border: none;
    border-radius: 0;
    box-shadow: var(--base-box-shadow);
}
 
div#page-content div.rate-box-with-credit-button div.page-rate-widget-box,
div#page-content table.rate_t div.page-rate-widget-box,
div#page-content table.rate_t2 div.page-rate-widget-box {
    box-shadow: none;
}
 
div.page-rate-widget-box a,
div#page-content div.page-rate-widget-box a {
    font-size: 0;
}
 
div.page-rate-widget-box a::before,
div#page-content div.page-rate-widget-box a::before {
    font-family: "FontAwesome";
    font-size: var(--base-font-size);
}
 
div.page-rate-widget-box .rateup.btn a::before,
div#page-content div.page-rate-widget-box .rateup.btn a::before {
    content: "\f102";
}
 
div.page-rate-widget-box .ratedown.btn a::before,
div#page-content div.page-rate-widget-box .ratedown.btn a::before {
    content: "\f103";
}
 
div.page-rate-widget-box .cancel.btn a::before,
div#page-content div.page-rate-widget-box .cancel.btn a::before {
    content: "\f00d";
}
 
div.page-rate-widget-box span.rate-points,
div#page-content div.page-rate-widget-box span.rate-points {
    text-transform: capitalize;
    color: rgb(var(--ratebox-text-color)) !important;
    background-color: transparent !important;
    border: none;
    border-radius: 0;
    height: var(--ratebox-height);
    line-height: var(--ratebox-height);
    font-size: var(--base-font-size);
}
 
div.page-rate-widget-box .rateup.btn,
div.page-rate-widget-box .ratedown.btn,
div.page-rate-widget-box .cancel.btn,
div#page-content div.page-rate-widget-box .rateup.btn,
div#page-content div.page-rate-widget-box .ratedown.btn,
div#page-content div.page-rate-widget-box .cancel.btn,
div#page-content .creditButton,
div#page-content .creditButton p {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    height: var(--ratebox-height);
    background-color: transparent;
    font-size: var(--base-font-size);
    line-height: var(--ratebox-height);
}
 
div#page-content .creditButton p a {
    margin-left: 0;
    border-left: 0;
}
 
div.page-rate-widget-box .rateup.btn a,
div.page-rate-widget-box .ratedown.btn a,
div.page-rate-widget-box .cancel.btn a,
div#page-content div.page-rate-widget-box .rateup.btn a,
div#page-content div.page-rate-widget-box .ratedown.btn a,
div#page-content div.page-rate-widget-box .cancel.btn a,
div#page-content .creditButton p a.fa.fa-info {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    border-radius: 0;
    text-align: center;
    width: var(--ratebox-height);
    height: var(--ratebox-height);
    line-height: var(--ratebox-height);
    color: rgb(var(--ratebox-btn-color));
    background-color: rgba(var(--ratebox-btn-bg-color), 0.75);
    transition: ease var(--base-transition-time);
}
 
div.page-rate-widget-box .rateup.btn a:hover,
div.page-rate-widget-box .ratedown.btn a:hover,
div.page-rate-widget-box .cancel.btn a:hover,
div#page-content div.page-rate-widget-box .rateup.btn a:hover,
div#page-content div.page-rate-widget-box .ratedown.btn a:hover,
div#page-content div.page-rate-widget-box .cancel.btn a:hover,
div#page-content .creditButton p a.fa.fa-info:hover {
    border-radius: 0;
    text-decoration: none;
    color: rgb(var(--ratebox-btn-hover-color));
    background-color: rgb(var(--ratebox-btn-hover-bg-color));
}
 
div.page-rate-widget-box .rateup.btn a:hover,
div#page-content div.page-rate-widget-box .rateup.btn a:hover {
    background-color: rgb(var(--rateup-hover-bg-color));
}
 
div.page-rate-widget-box .ratedown.btn a:hover,
div#page-content div.page-rate-widget-box .ratedown.btn a:hover {
    background-color: rgb(var(--ratedown-hover-bg-color));
}
 
/* ------- *
 * Content *
 * ------- */
 
div.title,
span.title,
div.meta-title,
div#page-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font);
    color: rgb(var(--main-accent));
}
 
div.meta-title,
div#page-title {
    min-height: 2.5rem;
    line-height: 2.5rem;
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    border: none;
}
 
a,
a:link,
a:focus,
a:active,
a:visited {
    color: rgb(var(--link-color));
    text-decoration: none;
    background-color: transparent;
    transition: var(--base-transition-time);
}
 
a:hover,
div#header a:hover,
div#top-bar a:hover,
div#side-bar a:hover {
    color: rgba(var(--link-color), 0.8);
    text-decoration: none;
    background-color: transparent;
}
 
div#page-content a:hover {
    text-decoration: underline;
}
 
div#page-content a.newpage {
    color: rgb(var(--link-color));
    background-color: rgba(var(--link-color), 0.1);
}
 
.hovertip {
    color: rgb(var(--base-dark-color));
    border: solid 0px transparent !important;
    box-shadow: var(--base-box-shadow);
    background-color: rgb(var(--base-bright-color)) !important;
}
 
.hovertip .content .footnote .f-heading,
.hovertip .content .footnote .f-footer  {
    display: none !important;
}
 
hr {
    width: auto;
    margin: 1em 1rem;
    background-color: rgba(var(--base-dark-color), 0.75);
}
 
div.dark hr {
    background-color: rgba(127, 127, 127, 0.75);
}
 
blockquote,
div.blockquote,
div.code,
div.page-source,
div.box {
    margin: 0.8rem 0;
    padding: 1px 1rem;
    background-color: transparent;
    border: none;
    box-shadow: var(--base-box-shadow);
}
 
tt,
div.code,
div.code *,
span.monospace {
    font-family: var(--mono-font);
}
 
div.page-source {
    padding: 0.8rem;
    font-family: var(--mono-font);
}
 
blockquote,
div.blockquote {
    margin: 0.8rem auto;
    width: 90%;
    max-width: 520px;
    box-sizing: border-box;
}
 
/* --------- *
 * Page Tags *
 * --------- */
 
div.page-tags span {
    border-top: dotted 0.125rem rgba(var(--base-dark-color), 0.75);
}
 
div.page-tags span a {
    text-transform: uppercase;
    margin-right: 0.5rem;
}
 
div.page-tags span a::before {
    content: "\f02b";
    font-family: "FontAwesome";
    display: inline-block;
    margin-right: 0.25rem;
    color: rgb(var(--base-dark-color));
}
 
/* ------------------ *
 * Wiki Content Table *
 * ------------------ */
 
div#page-content table.wiki-content-table {
    box-shadow: var(--base-box-shadow);
}
 
div#page-content table.wiki-content-table th {
    color: rgb(var(--table-th-color));
    background-color: rgba(var(--table-th-bg-color), 0.75);
    border-color: rgba(var(--table-th-border-color), 0.87);
}
 
div#page-content table.wiki-content-table td {
    color: rgb(var(--table-td-color));
    background-color: rgba(var(--table-td-bg-color), 0.75);
    border-color: rgba(var(--table-td-border-color), 0.87);
}
 
/* ----------- *
 * Image Block *
 * ----------- */
 
div#page-content div.scp-image-block {
    width: 300px;
    border: none;
    box-shadow: var(--base-box-shadow);
}
 
div#page-content div.scp-image-block p {
    margin: 0;
}
 
div#page-content div.scp-image-block.block-center {
    margin: 0.8rem auto;
}
 
div#page-content div.scp-image-block.block-right {
    float: right;
    clear: right;
    max-width: 50%;
    margin: 0.8rem 0 0.8rem 0.8rem;
}
 
div#page-content div.scp-image-block.block-left {
    float: left;
    clear: left;
    max-width: 50%;
    margin: 0.8rem 0.8rem 0.8rem 0;
}
 
div#page-content div.scp-image-block img.image,
div#page-content div.scp-image-block div.scp-image-caption {
    border: none;
    min-width: 100%;
    max-width: 100%;
}
 
div#page-content div.scp-image-block div.scp-image-caption {
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 0.8);
    color: rgb(var(--base-dark-color));
    background-color: rgb(var(--base-bright-color));
    padding: 0.2rem 0.5rem;
    box-sizing: border-box;
}
 
div#page-content div.image-block-break + div.scp-image-block {
    box-shadow: none;
}
 
div#page-content div.image-block-break + div.scp-image-block img.image {
    box-shadow: var(--base-box-shadow);
    margin-bottom: 0.8rem;
}
 
div#page-content div.image-block-break + div.scp-image-block div.scp-image-caption {
    box-shadow: var(--base-box-shadow);
}
 
div#page-content div.image-block-accent + div.scp-image-block div.scp-image-caption {
    color: rgb(var(--base-bright-color));
    background-color: rgba(var(--base-dark-color), 0.87);
}
 
/* ---------- *
 * Fancy Divs *
 * ---------- */
 
div.box.light {
    background-color: rgba(var(--light-accent), 0.87);
    color: rgb(var(--dark-accent));
}
 
div.box.dark {
    background-color: rgba(var(--dark-accent), 0.87);
    color: rgb(var(--light-accent));
}
 
div.box.dark h1,
div.box.dark h2,
div.box.dark h3,
div.box.dark h4,
div.box.dark h5,
div.box.dark h6 {
    color: rgb(var(--light-accent));
}
 
div.box.roc {
    border-radius: 1rem;
}
 
div#page-content div.box.document {
    position: relative;
    min-height: 10rem;
    margin: 0.8rem 0 1.4rem 0.6rem;
}
 
div#page-content div.box.document::before {
    content: "";
    display: block;
    position: absolute;
    left: -0.3rem;
    top: 0.3rem;
    width: 100%;
    height: 100%;
    box-shadow: var(--base-box-shadow);
    z-index: -1;
}
 
div#page-content div.box.document::after {
    content: "";
    display: block;
    position: absolute;
    left: -0.6rem;
    top: 0.6rem;
    width: 100%;
    height: 100%;
    box-shadow: var(--base-box-shadow);
    z-index: -2;
}
 
div#page-content div.box.document.light,
div#page-content div.box.document.light::before,
div#page-content div.box.document.light::after {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--light-accent));
}
 
div#page-content div.box.document.dark,
div#page-content div.box.document.dark::before,
div#page-content div.box.document.dark::after {
    color: rgb(var(--light-accent));
    background-color: rgb(var(--dark-accent));
}
 
div#page-content div.box.raisa-memo {
    color: rgb(15, 15, 15);
    background-color: rgba(255, 255, 175, 0.75);
    text-align: center;
    border: solid 0.125rem rgb(75, 75, 75);
}
 
div#page-content div.box.raisa-memo::before {
    display: block;
    content: "来自基金会\A 记录与信息安全部的通知";
    color: rgb(15, 15, 15);
    white-space: pre-wrap;
    font-family: var(--title-font);
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 1.25);
    text-align: center;
    margin-top: 0.8rem;
}
 
div#page-content div.box.domc-memo {
    position: relative;
    margin: 1.6rem 0.8rem;
    background-color: transparent;
    border: solid 0.125rem rgb(255, 255, 127);
    color: rgb(255, 255, 127);
    box-shadow: none;
    text-align: center;
}
 
div#page-content div.box.domc-memo::before {
    display: block;
    content: "来自基金会\A 误传部的通知";
    color: rgb(255, 255, 127);
    white-space: pre-wrap;
    font-family: var(--title-font);
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 1.25);
    text-align: center;
    margin-top: 0.8rem;
}
 
div#page-content div.box.domc-memo::after {
    content: "";
    position: absolute;
    left: -0.925rem;
    top: -0.925rem;
    right: -0.925rem;
    bottom: -0.925rem;
    z-index: -1;
    background-color: rgba(230, 35, 35, 0.75);
    box-shadow: var(--base-box-shadow);
}
 
div#page-content div.box.pata-memo {
    color: rgb(225, 225, 225);
    background-color: rgba(70, 45, 120, 0.75);
    text-align: center;
}
 
div#page-content div.box.pata-memo::before {
    display: block;
    content: "来自基金会\A ‘超形上学部的通知";
    color: rgb(225, 225, 225);
    white-space: pre-wrap;
    font-family: var(--title-font);
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 1.25);
    text-align: center;
    margin-top: 0.8rem;
}
 
div#page-content div.box.overwatch-memo {
    color: rgb(225, 225, 225);
    background-color: rgba(75, 75, 75, 0.75);
    border: double 0.1875rem rgb(225, 225, 225);
    text-align: center;
}
 
div#page-content div.box.overwatch-memo::before {
    display: block;
    content: "根据监督者议会的命令";
    color: rgb(225, 225, 225);
    white-space: pre-wrap;
    font-family: var(--title-font);
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 2.25);
    text-align: center;
    margin-top: 0.8rem;
}
 
div.outset {
    box-shadow: var(--base-box-shadow);
}
 
div.inset {
    box-shadow: inset var(--base-box-shadow);
}
 
/* -------- *
 * YUI Tabs *
 * -------- */
 
div#page-content div.yui-navset.yui-navset-top {
    box-shadow: var(--base-box-shadow);
    color: rgb(var(--tab-color));
    background-color: rgb(var(--tab-bg-color));
}
 
div#page-content div.yui-navset.yui-navset-top a:hover,
div#page-content div.yui-navset.yui-navset-top a:focus {
    text-decoration: none;
}
 
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav {
    border: none;
    display: flex;
    flex-wrap: wrap;
}
 
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li {
    margin: 0;
    padding: 0;
    height: var(--tab-item-height);
    border: none;
    flex-grow: 1;
    max-width: 100%;
}
 
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li > a {
    margin: 0;
    padding: 0 0.8rem;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    font-family: var(--title-font);
    color: rgb(var(--tab-item-color));
    background-image: none;
    background-color: rgba(var(--tab-item-bg-color), 0.87);
    box-sizing: border-box;
    transition: ease var(--base-transition-time);
}
 
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li > a:focus,
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li > a:hover {
    color: rgb(var(--tab-item-hover-color));
    background-color: rgba(var(--tab-item-hover-bg-color), 0.75);
}
 
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li.selected > a,
div#page-content div.tui-navset.yui-navset-top > ul.yui-nav > li.selected > a:focus,
div#page-content div.yui-navset.yui-navset-top > ul.yui-nav > li.selected > a:hover {
    color: rgb(var(--tab-item-selected-color));
    background-color: rgb(var(--tab-item-selected-bg-color));
    background-image: none;
}
 
div.yui-navset.yui-navset-top > ul.yui-nav > li > a > em {
    display: block;
    padding: 0;
    margin: 0;
    height: 100%;
    line-height: var(--tab-item-height);
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
div.yui-navset.yui-navset-top > div.yui-content {
    padding: 0 1rem;
    background-color: transparent;
    border: none;
}
 
div.yui-navset.yui-navset-top > div.yui-content > div {
    padding: 1px;
    margin: -1px;
}
 
/* ------- *
 * Buttons *
 * ------- */
 
div.owindow {
    border-color: rgb(var(--window-bg-color));
    background-color: rgb(var(--window-bg-color));
    box-shadow: var(--base-box-shadow);
}
 
div.owindow div.title.modal-header {
    background-color: rgba(var(--window-title-bg-color), 0.1);
    color: rgb(var(--base-dark-color));
}
 
a.button.btn,
div.owindow a.btn,
div.options input.btn,
div.options input.btn.btn-default,
div.options input.btn.btn-primary,
div.options input.btn.btn-sm,
div.options input.btn.btn-small,
div.options a.btn,
div.options a.btn.btn-default,
div.options a.btn.btn-primary,
div.options a.btn.btn-sm,
div.options a.btn.btn-small,
div.buttons input.btn,
div.buttons input.btn.btn-default,
div.buttons input.btn.btn-primary,
div.buttons input.btn.btn-sm,
div.buttons input.btn.btn-small,
div.buttons a.btn,
div.buttons a.btn.btn-default,
div.buttons a.btn.btn-primary,
div.buttons a.btn.btn-sm,
div.buttons a.btn.btn-small,
div.button-bar input.btn,
div.button-bar a.btn,
div.button-bar a,
div.page-options-bottom input.btn,
div.page-options-bottom a.btn {
    display: inline-block;
    font-weight: bold;
    color: rgb(var(--btn-color));
    border-color: transparent;
    background-color: rgb(var(--btn-bg-color));
    box-shadow: var(--base-box-shadow);
    padding: 0.2rem 0.5rem;
    transition: ease var(--base-transition-time);
}
 
a.button.btn:hover,
div.owindow a.btn:hover,
div.options input.btn:hover,
div.options a.btn:hover,
div.buttons input.btn:hover,
div.buttons a.btn:hover,
div.button-bar input.btn:hover,
div.button-bar a.btn:hover,
div.button-bar a:hover,
div.page-options-bottom input.btn:hover,
div.page-options-bottom a.btn:hover,
a.button.btn:focus,
div.owindow a.btn:focus,
div.options input.btn:focus,
div.options a.btn:focus,
div.buttons input.btn:focus,
div.buttons a.btn:focus,
div.button-bar input.btn:focus,
div.button-bar a.btn:focus,
div.button-bar a:focus,
div.page-options-bottom input.btn:focus,
div.page-options-bottom a.btn:focus {
    display: inline-block;
    text-decoration: none;
    border-color: transparent;
    background-color: rgba(var(--btn-hover-bg-color), 0.5);
    color: rgb(var(--base-bright-color));
}
 
div.page-options-bottom {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
 
div.page-options-bottom a.btn {
    flex-grow: 1;
}
 
div#page-content div#u-credit-view,
div#page-content div#u-credit-otherwise {
    z-index: 30;
}
 
div#page-content div.modalcontainer div.modalbox {
    border-radius: 0;
    border-color: rgb(var(--window-bg-color));
    box-shadow: var(--base-box-shadow);
    background: linear-gradient(rgba(var(--window-title-bg-color), 0.1) 51px, transparent 51px, transparent), rgb(var(--window-bg-color));
}
 
/* -------------- *
 * Edit Page Form *
 * -------------- */
 
form#new-post-form *,
form#edit-post-form *,
form#edit-page-form * {
    font-family: "Anonymous Pro", monospace;
    font-size: var(--base-font-size);
}
 
input#edit-page-title {
    max-width: 100%;
    width: 100%;
}
 
input,
input#np-title,
input#ep-title,
input#edit-page-title,
input#page-tags-input,
input#upload-userfile,
input#upload-dfilename,
input#move-new-page-name,
input.text,
textarea,
textarea#np-text,
textarea#ep-text,
textarea#edit-page-textarea,
table.edit-page-bottomtable td div:not(.sub) textarea#edit-page-comments[name="comments"] {
    color: rgb(var(--base-dark-color));
    border-color: transparent;
    background-color: transparent;
    box-shadow: inset var(--base-box-shadow);
}
 
table.edit-page-bottomtable td div.sub {
    color: rgba(var(--base-dark-color), 0.25);
}
 
table.edit-page-bottomtable td div#lock-info {
    color: rgb(var(--base-dark-color));
    background-color: transparent;
    border-color: transparent;
    box-shadow: var(--base-box-shadow);
}
 
table.page-history td.optionstd a,
div.pager a {
    display: inline-block;
    padding: 0 0.2rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
    font-size: var(--base-font-size);
    color: rgb(var(--base-dark-color));
    border: none;
    border-radius: 0.2rem;
    background-color: transparent;
    box-shadow: var(--base-box-shadow);
    box-sizing: border-box;
    transition: ease var(--base-transition-time);
}
 
div.pager span.current {
    display: inline-block;
    padding: 0;
    min-width: 1.25rem;
    min-height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
    font-size: var(--base-font-size);
    color: rgb(var(--base-bright-color));
    border: none;
    border-radius: 0.2rem;
    background-color: rgb(var(--bright-accent));
    box-shadow: var(--base-box-shadow);
    transition: ease var(--base-transition-time);
}
 
div.pager span.current:hover {
    color: rgba(var(--base-bright-color), 0.625);
    background-color: rgba(var(--bright-accent), 0.85);
}
 
table.page-history td.optionstd a:hover,
div.pager a:hover {
    background-color: rgba(var(--bright-accent), 0.125);
    color: rgb(var(--bright-accent));
}
 
div.wd-editor-toolbar-panel div > ul > li > a {
    background-image: url("https://ah-sandbox.wikidot.com/local--files/theme:new-aristocrat-dev/icons1.png");
    background-color: rgb(var(--weditor-button-bg-color));
    box-shadow: var(--base-box-shadow);
    border-radius: 0.1rem;
}
 
div.wd-editor-toolbar-panel div > ul > li > a:hover {
    background-image: url("https://ah-sandbox.wikidot.com/local--files/theme:new-aristocrat-dev/icons3.png");
    background-color: rgba(var(--weditor-button-hover-bg-color), 0.1);
    box-shadow: var(--base-box-shadow);
}
 
div.wd-editor-toolbar-panel div > ul > li > ul,
div.wd-editor-toolbar-panel div > ul > li > ul:hover,
div.wd-editor-toolbar-panel div > ul > li > ul.sfhover {
    background-color: rgb(var(--weditor-button-bg-color));
    border: none !important;
    border-radius: 0.1rem;
    box-shadow: var(--base-box-shadow);
}
 
div.wd-editor-toolbar-panel div > ul > li > ul > li > a {
    background-image: url("https://ah-sandbox.wikidot.com/local--files/theme:new-aristocrat-dev/icons1.png");
    background-color: rgb(var(--weditor-button-bg-color));
    box-shadow: none;
    border-radius: 0.1rem;
}
 
div.wd-editor-toolbar-panel div > ul > li > ul > li > a:hover {
    background-image: url("https://ah-sandbox.wikidot.com/local--files/theme:new-aristocrat-dev/icons3.png");
    background-color: rgba(var(--weditor-button-hover-bg-color), 0.1);
    box-shadow: none;
}
 
/* ------------- *
 * Forum Threads *
 * ------------- */
 
.thread-container .post .short,
.thread-container .post .head {
    color: rgb(var(--base-dark-color));
    background: rgba(var(--thread-head-bg-color), 0.1);
    border-radius: 0;
    border-color: transparent;
    box-shadow: var(--base-box-shadow);
}
 
/* === *
 * END *
 * === */
 
}

+ 经典

:root {
    --header-gradient: linear-gradient(
        135deg,
        transparent 0,
        transparent 25%,
        rgba(var(--base-dark-color), 0.1) 25%,
        rgba(var(--base-dark-color), 0.1) 50%,
        transparent 50%,
        transparent 75%,
        rgba(var(--base-dark-color), 0.1) 75%,
        rgba(var(--base-dark-color), 0.1) 100%
    );/* Inspired by SCP-5633 */
    --header-bg-size: 2.5rem 2.5rem;
    --header-bg-color: 215, 75, 75;
    --topbar-bg-color: 225, 225, 225;
    --header-title-color: 225, 225, 225;
    --header-icon-invert: 1;
    --header-button-bg-color: 225, 225, 225;
    --header-button-hover-color: 215, 75, 75;
    --bright-accent: 215, 75, 75;
    --btn-bg-color: 225, 225, 225;
}

+ 深色

:root {
    --header-gradient: linear-gradient(
        135deg,
        transparent,
        transparent 25%,
        rgba(var(--base-dark-color), 0.1) 25%,
        rgba(var(--base-dark-color), 0.1) 50%,
        transparent 50%,
        transparent 75%,
        rgba(var(--base-dark-color), 0.1) 75%,
        rgba(var(--base-dark-color), 0.1)
    );/* Inspired by SCP-5633 */
    --header-bg-size: 2.5rem 2.5rem;
    --header-bg-color: 105, 25, 25;
    --topbar-bg-color: 25, 25, 25;
    --topbar-item-text-color: var(--base-bright-color);
    --header-title-color: 225, 225, 225;
    --header-icon-invert: 1;
    --header-button-color: var(--base-bright-color);
    --header-button-bg-color: 25, 25, 25;
    --header-button-hover-color: 215, 75, 75;
    --sidebar-heading-color: var(--base-bright-color);
    --sidebar-heading-bg-color: 105, 25, 25;
    --ratebox-text-color: 252, 252, 252;
    --ratebox-bg-color: 105, 25, 25;
    --ratebox-btn-hover-bg-color: 225, 225, 225;
    --bright-accent: 105, 25, 25;
    --btn-bg-color: 225, 225, 225;
}

+ 灰色

:root {
    --header-gradient: linear-gradient(
        135deg,
        transparent,
        transparent 25%,
        rgba(var(--base-dark-color), 0.1) 25%,
        rgba(var(--base-dark-color), 0.1) 50%,
        transparent 50%,
        transparent 75%,
        rgba(var(--base-dark-color), 0.1) 75%,
        rgba(var(--base-dark-color), 0.1)
    );/* Inspired by SCP-5633 */
    --header-bg-size: 2.5rem 2.5rem;
    --header-bg-color: 75, 75, 75;
    --topbar-bg-color: 25, 25, 25;
    --topbar-item-text-color: var(--base-bright-color);
    --header-title-color: 225, 225, 225;
    --header-icon-invert: 1;
    --header-button-color: var(--base-bright-color);
    --header-button-bg-color: 25, 25, 25;
    --header-button-hover-color: 75, 75, 75;
    --sidebar-heading-color: var(--base-bright-color);
    --sidebar-heading-bg-color: 75, 75, 75;
    --ratebox-text-color: 252, 252, 252;
    --ratebox-bg-color:75, 75, 75;
    --ratebox-btn-hover-bg-color: 225, 225, 225;
    --bright-accent: 75, 75, 75;
    --btn-bg-color: 225, 225, 225;
}

+ 暗色

:root {
    --base-bright-color: 56, 56, 56;
    --base-dark-color: 225, 225, 225;
    --base-box-shadow: 0 0 7px rgb(15, 15, 15);
    --header-icon-invert: 1;
    --header-icon-drop-shadow: 0 0 2px rgba(var(--base-dark-color), 0.25);
}