科幻小说版式
评分：
评分模块与著作信息模块：
著作信息

页面信息
更多页面信息
著作信息模块：
著作信息

页面信息
更多页面信息
这是由 hoah2333 制作的美学版式，不与任何 SCP、故事、GoI 格式、设定所挂钩。在设计上参考了安德森机器人版式与基岩版式。
若需使用本版式，请在所需使用的文章开头加上以下代码：
[[include :scp-wiki-cn:theme:sci-fi inc-css=--]]]
你可以在 [[include]] 之后使用如下 CSS 模块来修改标题、副标题和标志。
:root {
--title: "页眉大标题";
--subtitle: "页眉副标题";
--icon: url("自定义标志链接");
}
示例

图像。
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
一个普通的下划加粗斜体删除等宽字
另一个普通的下划加粗斜体删除 等宽 字
| 这是一个链接！ | 一个空链接！ | 一个普通的下划加粗斜体删除等宽链接 | 另一个普通的下划加粗斜体删除 等宽 链接
+ 折叠 - 点击这里
此为分页（tab view）。
这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

一条分割线

嵌套引用块

嵌套引用块里的分割线

嵌套嵌套引用块

嵌套嵌套引用块里的分割线

够了，禁止套娃
这是	表格
你应该老早	就知道怎么
做这个了吧
1	2
3	4
谁是这里	最厉害的？
#十六进制	#至高无上
本版式修改了 SCP 文选中使用的文选框配色，以为科幻月活动所使用。
代码

此处的 CSS 代码经过转换编译，原代码部分使用 SCSS 编写。若需查看源代码，请前往我的 Github 仓库。
展开代码
收起代码
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap");
@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
:root {
  --icon: url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg");
  --title: "SCP基金会";
  --subtitle: "控制 · 收容 · 保护";
  --header-font: "Lexend", "Noto Sans SC", Arial, sans-serif;
  --UI-font: "Jost", "Noto Sans SC", sans-serif;
  --body-font: "Inter", "Noto Sans SC", sans-serif;
  --mono-font: "JetBrains Mono", "Noto Serif SC", monospace;
  --bg-color: #051122;
  --bg-color-2: #022F41;
  --bg-color-2-trans: #022f41EE;
  --bg-color-2-trans-2: #022f4199;
  --bg-color-3: #0F5B79;
  --bg-color-3-trans: #0F5B79EE;
  --bg-color-3-trans-2: #0F5B7999;
  --white-color: #EEEEEE;
  --white-color-trans: #EEEEEE11;
  --white-color-trans-2: #EEEEEE99;
  --black-color: #111111;
  --black-color-trans: #11111111;
  --black-color-trans-2: #11111199;
  --green-color: #18a314;
  --red-color: #e13030;
  --text-color: #e6e6e6;
  --link-color: #0a82a8;
  --link-color-2: #32D9CB;
  --link-color-3: #84b1bf;
  --link-newpage-color: var(--link-color-2);
  --accent-color: #66c0f4;
  --accent-color-2: #5aa9d6;
  --border-color: #00b4eb;
  --header-bg-color: var(--bg-color-2);
  --topbar-bg-color: var(--bg-color-3);
  --topbar-bg-color-trans: var(--bg-color-2-trans);
  --sidebar-bg-color: var(--bg-color-2);
  --search-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
  --vote-cancel-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 779.53 779.53'%3E%3Ctitle%3Ecancel-vote%3C/title%3E%3Cpolygon points='779.53 665.37 503.93 389.77 779.53 114.17 665.37 0 389.77 275.6 114.17 0 0 114.17 275.6 389.77 0 665.37 114.17 779.53 389.77 503.93 665.37 779.53 779.53 665.37'/%3E%3C/svg%3E");
  --vote-plus-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872.37 872.37'%3E%3Ctitle%3Eplus%3C/title%3E%3Cpolygon points='872.37 341.18 531.2 341.18 531.2 0 341.18 0 341.18 341.18 0 341.18 0 531.2 341.18 531.2 341.18 872.37 531.2 872.37 531.2 531.2 872.37 531.2 872.37 341.18'/%3E%3C/svg%3E");
  --vote-minus-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872.37 190.02'%3E%3Ctitle%3Eminus%3C/title%3E%3Crect x='444.99' y='103.81' width='190.02' height='872.37' transform='translate(-103.81 635.01) rotate(-90)'/%3E%3C/svg%3E");
  --vote-info-icon: url("data:image/svg+xml;charset=utf8,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 432.1 810.25'%3E%3Ctitle%3Einfo-vote%3C/title%3E%3Cpath d='M324,917.73v-139H491.5V493.71H346V355.77H615v423H756.05v139ZM544.41,266.88q-36.17,0-57.76-21.46T465,187.18q0-36.78,21.61-58.24t57.76-21.46q36.15,0,57.76,21.46t21.6,58.24q0,36.78-21.6,58.24T544.41,266.88Z' transform='translate(-323.95 -107.48)'/%3E%3C/svg%3E");
  --close-icon: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMjI4LjAxIDE2OC44MS01OS4xOTkgNTkuMTk5IDE0OCAxNDcuOTktMTQ4IDE0OCA1OS4xOTkgNTkuMTk1IDE0Ny45OS0xNDcuOTkgMTQ4IDE0Ny45OSA1OS4xOTUtNTkuMTk1LTE0Ny45OS0xNDggMTQ3Ljk5LTE0Ny45OS01OS4xOTUtNTkuMTk5LTE0OCAxNDh6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==");
  --header-height: 100px;
  --topbar-height: 21px;
  --account-height: 27px;
  --main-content-width: 948px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
 
body {
  color: var(--text-color);
}
 
a {
  color: var(--link-color);
  transition: color var(--transition);
}
 
a:visited {
  color: var(--link-color-3);
}
 
a.newpage {
  color: var(--link-newpage-color);
}
 
a:hover,
a:focus {
  text-decoration: none;
  color: var(--accent-color);
}
 
a.newpage:hover {
  text-decoration: none;
  color: var(--text-color);
}
 
*:focus-visible {
  outline: 1px solid var(--white-color);
}
 
div#container-wrap {
  background: var(--bg-color);
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 8px 0 10px 0;
  color: var(--accent-color-2);
  font-family: var(--header-font);
  font-weight: bold;
  line-height: 1.25;
}
 
h1 {
  color: var(--accent-color);
  font-size: 24px;
}
 
h2 {
  font-size: 21px;
}
 
h3 {
  font-size: 18px;
}
 
h4 {
  font-size: 16px;
}
 
h5 {
  font-size: 14px;
}
 
h6 {
  font-size: 12px;
}
 
#extra-div-1,
#extra-div-2 {
  z-index: 9;
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100vw;
  width: 100%;
  height: var(--header-height);
  background: var(--header-bg-color);
}
 
#extra-div-2 {
  top: var(--header-height);
  height: var(--topbar-height);
  background: var(--topbar-bg-color);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
}
 
#header {
  background: var(--icon) no-repeat;
  background-size: 50px 50px;
  background-position: 10px 25px;
  padding-bottom: 0;
}
 
#header * {
  font-family: var(--UI-font);
}
 
#header h1,
#header h2 {
  margin-left: 70px;
  line-height: unset;
  font-weight: bold;
}
 
#header h1 a {
  padding: 20px 0 35px 0;
  line-height: unset;
  color: var(--text-color);
  font-family: var(--header-font);
  text-shadow: none;
  font-size: 28px;
}
 
#header h1 a span {
  font-size: 0;
}
 
#header h1 a span::before {
  content: var(--title, "SCP基金会");
  font-size: 28px;
}
 
#header h2 span {
  line-height: unset;
  max-height: unset;
  padding: 0px 0;
  color: var(--link-color-2);
  font-family: var(--header-font);
  text-shadow: none;
  font-weight: normal;
  font-size: 0;
}
 
#header h2 span::before {
  content: var(--subtitle, "控制 · 收容 · 保护");
  font-size: 14px;
}
 
#top-bar {
  top: var(--header-height);
}
 
#top-bar ul li ul {
  opacity: 0;
  transition: opacity var(--transition);
}
 
#top-bar ul :is(li:hover, li.sfhover) ul {
  opacity: 1;
  transition: opacity var(--transition);
}
 
#top-bar ul li a {
  margin: unset;
  padding: 3.5px 12px;
  line-height: 1;
  max-height: unset;
  border: 1px solid transparent;
  color: transparent;
}
 
#top-bar [class*=top-bar] > ul > li > a {
  color: var(--link-color-2);
}
 
@media screen and (max-width: 375px) {
  #top-bar [class*=top-bar] > ul > li > a {
    padding: 3.5px 8px;
  }
}
#top-bar [class*=top-bar] ul :is(li, li:hover, li.sfhover) ul li a {
  color: var(--link-color-2);
  padding: 5px 12px;
  background-color: transparent;
  border-color: transparent;
  width: 200px;
}
 
#top-bar [class*=top-bar] ul :is(li, li:hover, li.sfhover) ul {
  background-color: var(--topbar-bg-color-trans);
  box-shadow: 0 6px 12px var(--black-color);
  border: none;
}
 
#top-bar [class*=top-bar] > ul > :is(li:hover, li.sfhover) > a,
#top-bar [class*=top-bar] ul :is(li, li:hover, li.sfhover) ul li a:hover,
#top-bar ul :is(li, li:hover, li.sfhover) a:hover {
  background-color: var(--white-color-trans);
  border-color: transparent;
  color: var(--text-color);
}
 
#top-bar [class*=top-bar] > ul > li:not(:first-of-type) > ul {
  left: -60px;
  right: unset;
}
 
#top-bar [class*=top-bar] ul :is(li:nth-last-of-type(1), li:nth-last-of-type(2)) ul {
  right: 0;
  left: unset;
}
 
#login-status {
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 14px;
}
 
#login-status .printuser {
  display: flex;
  align-items: center;
  margin-right: 3px;
}
 
#login-status > a {
  margin: 3px;
  color: var(--link-color-2);
}
 
#login-status > a:hover {
  color: var(--text-color);
}
 
#login-status > a[href*="account/messages"] strong {
  text-decoration: none;
  animation: none;
}
 
#login-status #account-topbutton {
  font-size: initial;
  font-weight: normal;
  border: none;
  padding: 0;
}
 
#account-options {
  top: calc(var(--account-height) + 10px);
  background-color: var(--topbar-bg-color-trans);
  box-shadow: 0 6px 12px var(--black-color);
  border: none;
}
 
#account-options ul li a {
  color: var(--link-color-2);
  padding: 5px 12px;
}
 
#account-options ul li a:hover {
  color: var(--text-color);
  background-color: var(--white-color-trans);
  text-decoration: none;
}
 
#search-top-box {
  top: calc(var(--header-height) / 2);
  width: unset;
}
 
#search-top-box #search-top-box-form {
  display: flex;
  justify-content: right;
}
 
#search-top-box #search-top-box-form #search-top-box-input {
  display: none;
  /*
  color: var(--text-color);
  font-size: 14px;
  border-radius: 0;
  background-color: var(--topbar-bg-color);
  border: 1px solid var(--border-color);
  box-shadow: none;
  margin: 0 3px 0 0;
  padding: 3px 6px;
  transition: background-color var(--transition);
  font-family: var(--body-font);
  */
}
 
#search-top-box #search-top-box-form > input[type=submit] {
  background-image: var(--search-icon);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 3px;
  background-color: var(--topbar-bg-color);
  border: 1px solid var(--accent-color-2);
  position: relative;
  border-radius: 0;
  font-size: 0;
  height: var(--account-height);
  width: var(--account-height);
  margin: 0;
  transition: background-color var(--transition);
}
 
#search-top-box #search-top-box-form #search-top-box-input:hover,
#search-top-box #search-top-box-form #search-top-box-input:focus,
#search-top-box #search-top-box-form #search-top-box-input:target,
#search-top-box #search-top-box-form > input[type=submit]:hover,
#search-top-box #search-top-box-form > input[type=submit]:focus,
#search-top-box #search-top-box-form > input[type=submit]:target {
  background-color: var(--header-bg-color);
}
 
@media screen and (max-width: 767px) {
  :root {
    --header-height: 127px;
  }
  #header {
    background-position: 10px 52px;
  }
  #header h1 a {
    padding: 47px 0 35px 0;
  }
}
#top-bar .open-menu a {
  border-radius: 0;
  border: solid 3px var(--link-color-2);
  color: var(--link-color-2);
  background-color: var(--sidebar-bg-color);
}
 
#side-bar .side-block {
  border-radius: 0;
  background: var(--sidebar-bg-color) !important;
  border: 1px solid var(--border-color);
  box-shadow: none;
  font-family: var(--UI-font);
}
 
#side-bar .side-block .menu-item a {
  color: var(--text-color);
}
 
#side-bar .side-block .menu-item a:hover {
  color: var(--link-color-2);
}
 
#side-bar .side-block .menu-item > img {
  opacity: 0;
}
 
#side-bar .side-block .heading {
  color: var(--link-color-2);
  border-bottom: solid 1px var(--border-color);
}
 
#side-bar .side-block .collapsible-block-folded {
  background: none;
}
 
#side-bar .side-block .collapsible-block-unfolded-link {
  border-bottom: solid 1px var(--border-color);
}
 
#side-bar .side-block .collapsible-block-link {
  color: var(--link-color-2);
}
 
#side-bar .side-block .collapsible-block-link:hover {
  color: var(--text-color);
}
 
@media (max-width: 767px) {
  #side-bar {
    background-color: var(--bg-color-2);
  }
}
#content-wrap {
  margin: 20px auto 0;
}
 
#main-content {
  max-width: var(--main-content-width);
}
 
#page-title,
#page-content .meta-title {
  font-family: var(--header-font);
  font-weight: bold;
  line-height: 1.25;
  color: var(--accent-color);
  font-size: 24px;
  border-color: var(--border-color);
}
 
#breadcrumbs {
  color: var(--text-color);
}
 
.page-rate-widget-box {
  display: inline-flex;
  border-radius: 0;
  box-shadow: none;
  margin: 4px 0;
  padding: 5px;
  background: var(--bg-color-2);
}
 
.page-rate-widget-box .rate-points {
  display: flex;
  align-items: center;
  color: var(--text-color);
  background: transparent !important;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: bold;
}
 
.page-rate-widget-box .number {
  width: -moz-max-content;
  width: max-content;
  font-size: 16px;
  padding: 0 1.5px 0.5px;
}
 
.page-rate-widget-box .btn {
  display: block;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  font-weight: normal;
}
 
.page-rate-widget-box .btn a,
div.creditRate .rate-box-with-credit-button .creditButton > p > a,
div.creditRate .creditButtonStandalone > p > a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  color: transparent;
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
  transition: background-color var(--transition);
}
 
.page-rate-widget-box .btn a::before,
div.creditRate .rate-box-with-credit-button .creditButton > p > a::before,
div.creditRate .creditButtonStandalone > p > a::before {
  content: "";
  display: block;
  background-color: var(--text-color);
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-size: 40%;
  mask-size: 40%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
 
.page-rate-widget-box .btn a:hover,
.page-rate-widget-box .btn a:focus {
  color: transparent;
}
 
.page-rate-widget-box .rateup a::before {
  -webkit-mask-image: var(--vote-plus-icon);
  mask-image: var(--vote-plus-icon);
}
 
.page-rate-widget-box .ratedown a::before {
  -webkit-mask-image: var(--vote-minus-icon);
  mask-image: var(--vote-minus-icon);
}
 
.page-rate-widget-box .cancel a::before {
  -webkit-mask-image: var(--vote-cancel-icon);
  mask-image: var(--vote-cancel-icon);
}
 
div.creditRate .rate-box-with-credit-button .creditButton > p > a::before,
div.creditRate .creditButtonStandalone > p > a::before {
  -webkit-mask-image: var(--vote-info-icon);
  mask-image: var(--vote-info-icon);
  -webkit-mask-size: 27.5%;
  mask-size: 27.5%;
}
 
.page-rate-widget-box .rateup a:hover {
  background-color: var(--green-color);
}
 
.page-rate-widget-box .ratedown a:hover {
  background-color: var(--red-color);
}
 
.page-rate-widget-box .cancel a:hover,
div.creditRate .rate-box-with-credit-button .creditButton > p > a:hover,
div.creditRate .creditButtonStandalone > p > a:hover {
  background-color: var(--bg-color-3);
  border-radius: 0;
}
 
.creditRate > .rateBox,
div.creditRate .rate-box-with-credit-button > .page-rate-widget-box {
  display: contents;
}
 
#page-content .creditRate {
  float: none;
  display: block;
  margin: 0;
  text-align: right;
}
 
div.creditRate .rateBox {
  display: contents;
}
 
div.creditRate .rate-box-with-credit-button,
div.creditRate .creditButtonStandalone {
  background-color: var(--bg-color-2);
  box-shadow: none;
  border: none;
  border-radius: 0;
  display: inline-flex;
  margin: 4px 0;
  padding: 5px;
  text-align: center;
}
 
div.creditRate .rate-box-with-credit-button .creditButton {
  display: block;
  width: 26px;
  height: 26px;
  padding-left: 5px;
}
 
div.creditRate .rate-box-with-credit-button .creditButton > p,
div.creditRate .creditButtonStandalone > p {
  display: contents;
}
 
div.creditRate .creditButtonStandalone {
  width: 26px;
  height: 26px;
}
 
div.creditRate .creditButtonStandalone > p > a {
  box-shadow: none;
}
 
[id*=u-credit] .fader {
  background: var(--black-color-trans-2);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
 
[id*=u-credit] .modalbox {
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: var(--bg-color-2);
  padding: 0;
}
 
[id*=u-credit] .modalbox > div:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 18px;
  background-color: var(--bg-color);
}
 
[id*=u-credit] .modalbox > div:first-of-type > h2 {
  color: var(--text-color);
}
 
[id*=u-credit] .modalbox .creditBottomRate {
  height: auto !important;
}
 
[id*=u-credit] .modalbox > .credit.first > p:first-of-type::before,
[id*=u-credit] .modalbox > .credit.first > p:first-of-type::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 44px;
  width: 44px;
  pointer-events: none;
}
 
[id*=u-credit] .modalbox > .credit.first > p:first-of-type::before {
  background: transparent;
  transition: background-color var(--transition);
}
 
[id*=u-credit] .modalbox > .credit.first > p:first-of-type::after {
  background: var(--text-color);
  -webkit-mask-image: var(--close-icon);
  mask-image: var(--close-icon);
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
 
[id*=u-credit] .modalbox > .credit.first > p:first-of-type:hover::before {
  background: var(--bg-color-3);
}
 
[id*=u-credit] iframe.close-credits {
  transform: scale(1.875);
  height: 23px !important;
  width: 23px;
  top: 10px;
  right: 10px;
  opacity: 0;
}
 
[id*=u-credit] .modalbox > hr:first-of-type {
  display: none;
}
 
[id*=u-credit] .modalbox > hr {
  background-color: var(--border-color);
  margin: 20px 20px 10px;
}
 
div#toc {
  max-width: calc(var(--main-content-width) * 0.375);
  min-width: min(100%, var(--main-content-width) * 0.25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background-color: var(--bg-color-2);
  border: solid 1px var(--border-color);
  box-sizing: border-box;
}
 
#toc.floatright {
  float: right;
  margin: 4px 0 4px 24px;
}
 
#toc.floatleft {
  float: left;
  margin: 4px 24px 4px 0;
}
 
/* non-float toc */
#page-content table[style^="margin:0;"] td[style^="margin:0;"] {
  display: contents;
}
 
#toc #toc-action-bar {
  text-align: right;
  padding: 10px;
  width: 56px;
}
 
#toc .title {
  flex-grow: 1;
  order: -1;
  padding: 10px 14px;
  margin: 0;
  text-align: left;
  font-size: 14px;
}
 
#toc-list {
  width: 100%;
  border-top: inherit;
  margin: 0;
  padding: 10px;
  padding-left: 18px;
  background-color: rgb(var(--basalt-background-color));
  counter-reset: toc-num1;
}
 
#toc-list div[style*="1em"] {
  counter-increment: toc-num1;
  position: relative;
}
 
#toc-list div[style*="1em"]::before {
  content: counter(toc-num1) ".";
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  font-size: 10px;
  display: flex;
  align-items: center;
  font-family: var(--UI-font);
  padding-right: 4px;
}
 
#toc-list > div[style*="2em"] > a {
  font-size: 9px;
}
 
#toc-list > div[style*="3em"] > a {
  font-size: 8px;
}
 
#toc-list > div[style*="4em"] > a {
  font-size: 7px;
}
 
#toc-list > div[style*="5em"] > a {
  font-size: 6px;
}
 
#toc-list > div[style*="6em"] > a {
  font-size: 5px;
}
 
.bblock {
  background-color: var(--text-color);
  transition: color var(--transition);
  color: var(--text-color);
}
 
.bblock:hover,
.bblock:focus-within {
  background-color: var(--text-color);
  color: var(--black-color);
}
 
.dblock {
  color: var(--text-color);
  background-color: currentColor;
  transition: background-color var(--transition);
}
 
.dblock:is(:hover, :focus-within) {
  background-color: transparent;
}
 
blockquote,
div.blockquote {
  background-color: var(--bg-color-2-trans-2);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 2px 23px;
  margin: 20px auto;
  max-width: calc(var(--main-content-width) * 0.825);
  box-sizing: border-box;
}
 
hr {
  height: 2px;
  margin: 24px auto;
  background-color: var(--border-color);
}
 
table td {
  text-align: start;
}
 
#page-content table {
  width: -moz-max-content;
  width: max-content;
}
 
#page-content table,
table.wiki-content-table {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  margin: 0.25rem auto;
  border-collapse: collapse;
}
 
#page-content table th,
table.wiki-content-table th {
  background-color: var(--bg-color-3);
  border-color: var(--border-color);
  color: var(--text-color);
  padding: 6px 9px;
  font-family: var(--header-font);
  font-weight: bold;
}
 
#page-content table td,
table.wiki-content-table td {
  border: solid 1px var(--border-color);
  padding: 8px 10px;
}
 
#page-content table tr:nth-of-type(2n),
table.wiki-content-table tr:nth-of-type(2n) {
  background-color: var(--bg-color);
}
 
#page-content table tr:nth-of-type(2n+1),
table.wiki-content-table tr:nth-of-type(2n+1) {
  background-color: var(--bg-color-2);
}
 
#page-content .yui-navset .yui-nav {
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-right: 2px;
}
 
#page-content .yui-navset .yui-nav li,
#page-content .yui-navset .yui-nav li.selected {
  margin: 0;
  padding: 0;
  flex-grow: 1;
}
 
#page-content .yui-navset .yui-nav li a {
  background: none;
  background-color: var(--bg-color-2);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-width: 1px 1px 0 1px;
  display: flex;
  width: 100%;
  justify-content: center;
  transition: background-color var(--transition);
}
 
#page-content .yui-navset .yui-nav li a:focus-visible {
  background-color: var(--bg-color);
}
 
#page-content .yui-navset .yui-nav li:hover,
#page-content .yui-navset .yui-nav li a:hover {
  background-color: var(--bg-color);
}
 
#page-content .yui-navset .yui-nav li.selected a {
  background-color: var(--bg-color-3);
  border-width: 1px 1px 0 1px;
}
 
#page-content .yui-navset .yui-nav li a em {
  border: none;
  top: 0;
  padding: 0.25em 0.75em;
}
 
#page-content .yui-navset .yui-content {
  background-color: var(--bg-color-2);
  color: var(--text-color);
  padding: 10px 16px;
  border: 1px solid var(--border-color);
}
 
#page-content .pager a {
  border: 1px solid var(--border-color);
  color: var(--link-color);
}
 
#page-content .pager a:hover {
  color: var(--link-color-2);
}
 
#page-content .pager .target:last-of-type a,
#page-content input.btn,
#page-content .buttons input,
#action-area input.btn,
#odialog-container .owindow .button-bar a,
#action-area .change-textarea-size a {
  color: var(--link-color-2);
  background-color: var(--bg-color-2);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
 
#page-content .pager .target:last-of-type a:hover,
#page-content input.btn:hover,
#page-content .buttons input:hover,
#action-area input.btn:hover,
#odialog-container .owindow .button-bar a:hover,
#action-area .change-textarea-size a:hover {
  color: var(--white-color);
  background-color: var(--bg-color-3);
}
 
#page-content .pager .current {
  background-color: var(--bg-color-2);
  color: var(--text-color);
}
 
#page-content .scp-image-block .scp-image-caption {
  background-color: var(--bg-color-2);
  color: var(--text-color);
}
 
#page-content .code {
  background-color: var(--bg-color-2);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  font-family: var(--mono-font);
}
 
#page-content code,
#page-content tt {
  background-color: var(--bg-color-3-trans-2);
  color: var(--text-color);
  font-family: var(--mono-font);
}
 
#page-content .code pre span[class*=hl-] {
  filter: invert(1) hue-rotate(180deg);
}
 
#page-content .wiki-note {
  background-color: var(--bg-color-2);
  border: 1px solid var(--border-color);
}
 
#odialog-hovertips .hovertip {
  background-color: var(--bg-color-2-trans) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color);
}
 
#odialog-shader {
  background-color: var(--black-color-trans-2);
  opacity: 1;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
 
#odialog-container .owindow {
  background-color: var(--bg-color-2);
  border: 2px solid var(--border-color);
}
 
#odialog-container .owindow .modal-body img:first-of-type {
  background-color: transparent !important;
}
 
#odialog-container .owindow .title,
#action-area #lock-info {
  background-color: var(--bg-color);
}
 
input.text,
textarea {
  background-color: var(--bg-color-2);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}
 
#edit-page-form .form {
  width: 100%;
  border-spacing: 0;
}
 
#edit-page-form .form tr {
  display: flex;
  flex-wrap: wrap;
}
 
#edit-page-form .form td:nth-of-type(1) {
  padding: 0 0 0 6px;
}
 
#edit-page-form .form td:nth-of-type(2) {
  padding: 0;
  width: 100%;
}
 
#edit-page-form .form td:nth-of-type(2) input.text,
#new-post-div input.text {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: 8px;
  box-sizing: border-box;
}
 
#edit-page-form .wd-editor-toolbar-panel,
#new-post-div .wd-editor-toolbar-panel {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--bg-color-2);
  padding: 9px 6px;
  border: 1px solid var(--border-color);
  margin: 0.5em 0 1em;
  width: 100%;
  box-sizing: border-box;
}
 
#edit-page-form .wd-editor-toolbar-panel div,
#new-post-div .wd-editor-toolbar-panel div {
  width: 100%;
  height: unset;
}
 
#edit-page-form .wd-editor-toolbar-panel div ul,
#new-post-div .wd-editor-toolbar-panel div ul {
  float: unset;
  display: flex;
  flex-wrap: wrap;
}
 
#edit-page-form .wd-editor-toolbar-panel div ul li,
#new-post-div .wd-editor-toolbar-panel div ul li {
  float: unset;
  margin: 0;
  padding: 3px;
  position: relative;
}
 
#edit-page-form .wd-editor-toolbar-panel div ul li.hseparator,
#new-post-div .wd-editor-toolbar-panel div ul li.hseparator {
  padding: 0;
  width: 1px;
  margin-right: -1px;
}
 
#edit-page-form .wd-editor-toolbar-panel div ul li:hover ul,
#edit-page-form .wd-editor-toolbar-panel div ul li.sfhover ul,
#new-post-div .wd-editor-toolbar-panel div ul li:hover ul,
#new-post-div .wd-editor-toolbar-panel div ul li.sfhover ul {
  background-color: var(--bg-color-2);
  border: 1px solid var(--border-color);
}
 
#edit-page-form #edit-page-textarea,
#new-post-div #np-text {
  margin: 0.5em 0 1em;
  width: 100% !important;
  border: 1px solid var(--border-color);
  padding: 8px 0 8px 8px;
  box-sizing: border-box;
}
 
#edit-page-form .change-textarea-size,
#new-post-div .change-textarea-size {
  float: unset;
  padding: 0 0 1em 0;
  width: calc(100% - 2px);
  margin: -1em 0 1em 2px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--border-color);
}
 
#edit-page-form .change-textarea-size a,
#new-post-div .change-textarea-size a {
  background-color: var(--bg-color-2);
  border: 1px solid var(--border-color);
  border-width: 0 1px 1px 1px;
}
 
#edit-page-form .change-textarea-size a:nth-of-type(1),
#new-post-div .change-textarea-size a:nth-of-type(1) {
  padding: 2px 11.38px;
  border-width: 0 0 1px 1px;
}
 
#edit-page-form .change-textarea-size a:nth-of-type(2),
#new-post-div .change-textarea-size a:nth-of-type(2) {
  padding: 2px 7.78px;
}
 
#edit-page-form .edit-help-34,
#new-post-div .edit-help-34 {
  margin: -3.7em 0 1.7em;
}
 
#edit-page-form .edit-page-bottomtable {
  width: 100%;
}
 
#edit-page-form .edit-page-bottomtable tr {
  display: flex;
  flex-wrap: wrap;
}
 
#edit-page-form .edit-page-bottomtable td:nth-of-type(1) {
  width: 100%;
  margin: 0 -7px;
  position: relative;
}
 
#edit-page-form .edit-page-bottomtable #edit-page-comments {
  width: calc(100% - 2px);
  min-height: 4em;
}
 
#edit-page-form .edit-page-bottomtable .sub {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 1em;
  color: var(--text-color);
}
 
#edit-page-form .edit-page-bottomtable td:nth-of-type(2) {
  width: calc(100% + 4px);
  margin: 0 -7px;
}
 
#edit-page-form .edit-page-bottomtable #lock-info {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: center;
  background-color: var(--bg-color-2);
}
 
#edit-page-form .buttons,
#new-post-div .buttons {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  row-gap: 8px;
}
 
#edit-page-form .buttons .btn,
#new-post-div .buttons .btn {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color-2);
  color: var(--text-color);
  padding: 7px 18px;
  margin: 0 8px 0 0;
  cursor: pointer;
}
 
#view-diff-div > p a.button {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color-2);
  color: var(--text-color);
  padding: 7px 18px;
  margin: 0 8px 0 0;
}
 
#view-diff-div .page-source {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color-2);
  padding: 8px;
}
 
#edit-page-form .change-textarea-size a:hover,
#new-post-div .change-textarea-size a:hover,
#edit-page-form .buttons .btn:hover,
#new-post-div .buttons .btn:hover {
  text-decoration: none;
  background-color: var(--bg-color-3);
  color: var(--link-color-2);
  transition: color var(--transition), background-color var(--transition);
}
 
.inline-diff del {
  background-color: var(--red-color);
}
 
.inline-diff del::before {
  color: var(--red-color);
}
 
.inline-diff ins {
  background-color: var(--green-color);
}
 
.inline-diff ins::before {
  color: var(--green-color);
}
 
#footer,
#license-area,
#print-opyions,
div.buttons input,
input[type=button],
button,
.bibitems .title,
.footnotes-footer .title,
.hovertip .content .footnote .f-heading,
.hovertip .content .reference .r-heading,
.owindow .button-bar > a:not([onclick*=cleanAll]),
.owindow div[style*=margin-top] a,
.owindow > .content.modal-body > img + h1 + table > tbody > tr > td:first-child,
#flag-user-options-flag > *,
#flag-user-options-unflag > *,
#page-info,
#page-options-container .page-watch-options,
#action-area a.btn,
#action-area input.btn,
div.buttons a.btn,
div.buttons input.btn,
#history-subarea a.action-area-close,
#view-diff-div a.button,
form#edit-page-form,
form[onsubmit*=PageTagsModule] > table.form > tbody > tr > td:first-child,
#history-form-1 > table.form > tbody > tr:first-child > td:first-child,
#history-form-1 > table.form > tbody > tr:nth-child(2) > td,
#main-content .pager .pager-no,
#revision-list .page-history tr[id*=revision-row] td:nth-child(4),
#revision-list .page-history tr[id*=revision-row] td:nth-child(6),
div.site-changes-box > form > table.form > tbody > tr > td:first-child,
#site-changes-list div.changes-list-item > table > tbody > tr > td.revision-no,
#site-changes-list div.changes-list-item > table > tbody > tr > td.mod-date,
#history-subarea > h2,
#file-upload-form table.form > tbody > tr > td:nth-child(1),
form[onsubmit*=setParent] > table.form > tbody > tr > td:nth-child(1),
#rename-option-rename table.form > tbody > tr > td:nth-child(1),
#action-area table.page-files > thead > tr,
input#upload-userfile::file-selector-button,
#action-area > h1 + p + h2 + div[style*=padding-left] > div > a[onclick*="EditMetaModule.listeners.deleteTag"],
#action-area > a.action-area-close + h1 + p + table.form > tbody > tr > td:first-child {
  font-family: var(--UI-font);
}
 
div#print-head,
code,
.code,
.code pre,
.code p,
tt,
.yui-navset.yui-navset-top > ul.yui-nav,
.footnotes-footer .footnote-footer > a:first-child,
#revision-list .page-history tr[id*=revision-row] td:nth-child(1),
#action-area > h1 + p + h2 + div[style*=padding-left] > div,
#edit-meta-newtag-form > table {
  font-family: var(--mono-font);
}
 
*::-webkit-scrollbar-thumb {
  background: var(--bg-color-3);
}
 
*::-webkit-scrollbar-track {
  background: var(--bg-color-2);
}
 
/* scp-anthology by EstrellaYoshte */
.halloween-cards-container {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.675rem;
  justify-content: center;
  margin: 0.5rem auto;
}
 
.halloween-cards-container .anthology-card {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color-2);
  position: relative;
  flex-basis: 13.25rem;
  box-sizing: border-box;
  isolation: isolate;
  transition: transform var(--transition);
}
 
.halloween-cards-container .anthology-card:is(:hover, :focus-within) {
  transform: scale(1.325);
  z-index: 1;
}
 
.halloween-cards-container .anthology-card > a:first-child {
  font-size: 0;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  outline: none;
}
 
.halloween-cards-container .anthology-card > a:first-child:not([href*=scp-wiki-cn]) {
  display: none;
}
 
.halloween-cards-container .anthology-card > a:first-child:not([href*=scp-wiki-cn]) ~ img {
  cursor: not-allowed;
}
 
.anthology-card > h1 {
  font-family: "Teko", "Inter", sans-serif;
  font-weight: normal;
  font-size: 1.75em;
  line-height: 0.9;
  margin: 0;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  padding: 0.285rem 2.25rem 0.125rem;
  text-align: center;
  background-color: var(--bg-color-2);
  color: var(--text-color);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 2.5rem) 100%, 2.5rem 100%, 1.25rem 0.5rem, 0% 0.5rem);
          clip-path: polygon(0 0, 100% 0, 100% 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 2.5rem) 100%, 2.5rem 100%, 1.25rem 0.5rem, 0% 0.5rem);
  transition: color var(--transition), background-color var(--transition);
}
 
.anthology-card:is(:hover, :focus-within) > h1 {
  color: var(--black-color);
  background-color: var(--link-color-2);
}
 
.anthology-card > img {
  padding-top: 0.5rem;
  height: 17.5rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
 
.anthology-card > .antho-title {
  display: flex;
  width: calc(100% + 1rem);
  max-width: unset !important;
  align-items: center;
  font-family: "Teko", "Inter", sans-serif;
  isolation: isolate;
  position: absolute;
  bottom: 2.625rem;
  left: -0.625rem;
  transform: translateY(50%);
  z-index: 4;
  pointer-events: none;
}
 
.anthology-card > .antho-title span {
  pointer-events: auto;
}
 
.anthology-card > .antho-title span:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  min-width: 3.5rem;
  width: 3.5rem;
  line-height: 1.25;
  box-sizing: border-box;
  color: black;
  font-weight: bold;
  position: relative;
  font-size: 1.675rem;
  font-family: var(--body-font);
  transform: scale(1.25);
  z-index: 1;
}
 
.anthology-card.x4 > .antho-title span:nth-child(1) {
  font-size: 0;
}
 
.anthology-card:not(.x4) > .antho-title span:nth-child(1)::before,
.anthology-card > .antho-title span:nth-child(1)::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--link-color);
  z-index: -1;
  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
          clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
 
.anthology-card:not(.x4) > .antho-title span:nth-child(1)::before {
  background-color: var(--link-color-2);
  transition: transform var(--transition);
}
 
.anthology-card.x4 > .antho-title span:nth-child(1)::before {
  content: "星";
  font-size: 1.675rem;
}
 
.anthology-card > .antho-title span:nth-child(2) {
  min-height: 2.375em;
  font-size: 1.675em;
  font-weight: normal;
  line-height: 0.875;
  display: inline-grid;
  align-items: center;
  text-align: center;
  padding: 0.175em 1.25em;
  padding-left: 1.75rem;
  margin-left: -0.875rem;
  background-color: var(--bg-color-3);
  background-image: linear-gradient(to right, var(--link-color-2) 0%, var(--link-color-2) 100%);
  background-size: 0% 100%;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-clip-path: polygon(0 0, calc(100% - 0.875em) 0, 100% 50%, calc(100% - 0.875em) 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 0.875em) 0, 100% 50%, calc(100% - 0.875em) 100%, 0 100%);
  transition: all var(--transition);
}
 
.anthology-card:is(:hover, :focus-within) > .antho-title span:nth-child(1) {
  color: var(--text-color);
  transition: color var(--transition);
}
 
.anthology-card:is(:hover, :focus-within) > .antho-title span:nth-child(1)::before {
  transform: scale(1.15);
}
 
.anthology-card:is(:hover, :focus-within) > .antho-title span:nth-child(2) {
  color: var(--black-color);
  background-size: 100% 100%;
}
 
/* Convert from SCSS */
:root {
  --mask-text-background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTk0MS42IDc4NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTk0MS42IDc4NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPGcgaWQ9IuWbvuWxgl8zIj4NCgk8ZyBpZD0iWE1MSURfMDAwMDAwNDQ4NTY2Mzg4MTAyNDYwNjYwMDAwMDAwMDg2MzIxMzQwNzExMDQzMDA3MDFfIj4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMTkzOS45LDI1Ni40YzIuMSwzLjcsMi4xLDguMywwLDEybC0yOTQuNyw1MTAuNWMtMi4xLDMuNy02LjEsNi0xMC40LDZIMTQ1LjNjLTQuMywwLTguMi0yLjMtMTAuNC02TDEuOCw1NDguMg0KCQkJCWMtMS0xLjgtMS42LTMuOS0xLjYtNmMwLTYuNiw1LjQtMTIsMTItMTJoNzIuM2M0LjMsMCw4LjIsMi4zLDEwLjQsNmw5MC4xLDE1Ni4xYzIuMSwzLjcsNi4xLDYsMTAuNCw2aDQ4OS41DQoJCQkJYzQuMywwLDguMi0yLjMsMTAuNC02bDI0NC43LTQyMy45YzIuMS0zLjcsMi4xLTguMywwLTEyTDg0Mi40LDg3LjZsLTQwLjEtNjkuNGMtMS0xLjgtMS42LTMuOS0xLjYtNmMwLTYuNiw1LjQtMTIsMTItMTJ2MEgxNzg1DQoJCQkJYzQuMywwLDguMiwyLjMsMTAuNCw2bDQ3LDgxLjRMMTkzOS45LDI1Ni40eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxMi43LDAuMWMtNi42LDAtMTIsNS40LTEyLDEyYzAsMi4xLDAuNiw0LjIsMS42LDZsNDAuMSw2OS40bDk3LjUsMTY4LjljMi4xLDMuNywyLjEsOC4zLDAsMTJMNjk1LjIsNjkyLjMNCgkJCQljLTIuMSwzLjctNi4xLDYtMTAuNCw2SDE5NS4zYy00LjMsMC04LjItMi4zLTEwLjQtNkw5NC44LDUzNi4yYy0yLjEtMy43LTYuMS02LTEwLjQtNkgxMi4xYy02LjYsMC0xMiw1LjQtMTIsMTINCgkJCQljMCwyLjEsMC42LDQuMiwxLjYsNmwxMzMuMiwyMzAuN2MyLjEsMy43LDYuMSw2LDEwLjQsNmgxNDg5LjRjNC4zLDAsOC4yLTIuMywxMC40LTZsMjk0LjctNTEwLjVjMi4xLTMuNywyLjEtOC4zLDAtMTINCgkJCQlsLTk3LjUtMTY4LjlsLTQ3LTgxLjRjLTIuMS0zLjctNi4xLTYtMTAuNC02TDgxMi43LDAuMUw4MTIuNywwLjF6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==");
  --mask-text-border: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4zLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zu+5bGCXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTk1MC43IDc5Mi41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxOTUwLjcgNzkyLjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KPC9zdHlsZT4NCjxnIGlkPSLlm77lsYJfMyI+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTgxNywzLjdjLTYuNiwwLTEyLDUuNC0xMiwxMmMwLDIuMSwwLjYsNC4yLDEuNiw2bDQwLjEsNjkuNEw5NDQuMiwyNjBjMi4xLDMuNywyLjEsOC4zLDAsMTJMNjk5LjUsNjk2DQoJCWMtMi4xLDMuNy02LjEsNi0xMC40LDZIMTk5LjZjLTQuMywwLTguMi0yLjMtMTAuNC02TDk5LjEsNTM5LjljLTIuMS0zLjctNi4xLTYtMTAuNC02SDE2LjVjLTYuNiwwLTEyLDUuNC0xMiwxMg0KCQljMCwyLjEsMC42LDQuMiwxLjYsNmwxMzMuMiwyMzAuN2MyLjEsMy43LDYuMSw2LDEwLjQsNmgxNDg5LjVjNC4zLDAsOC4yLTIuMywxMC40LTZMMTk0NC4yLDI3MmMyLjEtMy43LDIuMS04LjMsMC0xMmwtOTcuNS0xNjguOQ0KCQlsLTQ3LTgxLjRjLTIuMS0zLjctNi4xLTYtMTAuNC02TDgxNywzLjdMODE3LDMuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K");
  --mask-icon: url("data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkzNS45NSA4MDEuMTEiPjxnIGlkPSLlm77lsYJfMyIgZGF0YS1uYW1lPSLlm77lsYIgMyI+PHBhdGggZD0iTTcwNC40NiwxNkg2MDUuMzlhMTEuMywxMS4zLDAsMCwwLTkuNzgsNS42NEw1ODMuOSw0MS44N2ExMS4yOSwxMS4yOSwwLDAsMCw5Ljc4LDE2LjkzaDg2YTExLjMsMTEuMywwLDAsMSw5Ljc4LDUuNjRMODg0LjkzLDQwMi44OGExMS4yNywxMS4yNywwLDAsMSwwLDExLjI5TDY4OS40OCw3NTIuNjFhMTEuMjksMTEuMjksMCwwLDEtOS43OCw1LjY0SDI4OC44MmExMS4zLDExLjMsMCwwLDEtOS43OC01LjY0TDE1OC44Myw1NDQuNDVhMTEuMjksMTEuMjksMCwwLDAtMTkuNTYsMGwtMTEuNjksMjAuMzJhMTEuMjksMTEuMjksMCwwLDAsMCwxMS4yN0wyNTQuMyw3OTUuNDdhMTEuMzIsMTEuMzIsMCwwLDAsOS43OSw1LjY0SDcwNC40OGExMS4zLDExLjMsMCwwLDAsOS43OC01LjY0TDkzNC40NCw0MTQuMThhMTEuMjcsMTEuMjcsMCwwLDAsMC0xMS4yOUw3MTQuMjQsMjEuNkExMS4zLDExLjMsMCwwLDAsNzA0LjQ2LDE2WiIvPjxwYXRoIGQ9Ik0xNTQuMjIsNDE1Ljg3bC0uODYsMS41YTExLjI5LDExLjI5LDAsMCwxLTkuNzksNS42Nkg5N2ExMS4zMSwxMS4zMSwwLDAsMC05LjgsNS42NkwxLjUyLDU3Ny41NWExMS4yOSwxMS4yOSwwLDAsMCw5Ljc5LDE2LjkySDcxYTExLjMxLDExLjMxLDAsMCwwLDkuNzktNS42NmwxMTUuNjEtMjAxYTExLjI5LDExLjI5LDAsMCwwLTkuNzktMTYuOTJoMGExMS4zMSwxMS4zMSwwLDAsMC05Ljc5LDUuNjZaIi8+PHBhdGggZD0iTTIxOCwyMzAuNjZsLS44NiwxLjVhMTEuMzEsMTEuMzEsMCwwLDEtOS44LDUuNjZIMTYxYTExLjMxLDExLjMxLDAsMCwwLTkuNzksNS42Nkw2NS44MywzOTEuODNhMTEuMjksMTEuMjksMCwwLDAsOS43OSwxNi45Mmg1OS42OWExMS4zMSwxMS4zMSwwLDAsMCw5Ljc5LTUuNjZsMTE1LjYxLTIwMWExMS4yOSwxMS4yOSwwLDAsMC05LjgtMTYuOTJoLS4yMmExMS4zMSwxMS4zMSwwLDAsMC05Ljc5LDUuNjZaIi8+PHBhdGggZD0iTTU2Ny41MiwxNi45M0ExMS4yOSwxMS4yOSwwLDAsMCw1NTcuNzQsMEgyNTVhMTEuMzEsMTEuMzEsMCwwLDAtOS44LDUuNjZsLTExNS42MSwyMDFhMTEuMjksMTEuMjksMCwwLDAsOS44LDE2LjkySDE5OS4xYTExLjMxLDExLjMxLDAsMCwwLDkuNzktNS42NkwyODgsODAuNDRhMTEuMywxMS4zLDAsMCwxLDkuOC01LjY2SDUyNy42MWExMS4zMiwxMS4zMiwwLDAsMCw5Ljc5LTUuNjRaIi8+PC9nPjwvc3ZnPg==");
}
 
#page-content .achi-container {
  display: flex;
  color: var(--bg-color);
  width: 100%;
  height: 21.3rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  #page-content .achi-container {
    height: 45vw;
  }
}
#page-content .achi-border {
  display: block;
  width: 98%;
  left: 2%;
  top: 14.5%;
  position: absolute;
  height: 85.5%;
  color: var(--bg-color-2);
  box-sizing: border-box;
}
#page-content .achi-border::before, #page-content .achi-border::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#page-content .achi-border::before {
  background-color: var(--bg-color-2);
  -webkit-mask-image: var(--mask-text-background);
  mask-image: var(--mask-text-background);
}
#page-content .achi-border::after {
  background-color: var(--border-color);
  -webkit-mask-image: var(--mask-text-border);
  mask-image: var(--mask-text-border);
}
#page-content .achi-icon {
  display: block;
  width: 47.47%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}
#page-content .achi-icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--border-color);
  -webkit-mask-image: var(--mask-icon);
  mask-image: var(--mask-icon);
  top: 0;
}
#page-content .achi-text {
  position: relative;
  left: 49%;
  top: 0;
  width: 42.5%;
  max-width: 42.5%;
  margin: 5px 0 0 0;
  color: var(--text-color);
}/*# sourceMappingURL=https://hoah2333.github.io/Archived-works/SCP/theme-sci-fi/main.css.map */
原创版式
页面版本: 3, 最后编辑于: 01 Jul 2023 15:56
编辑评分 (+21) 标签讨论 (3) 历史记录附件打印网站工具 + 选项
SCP基金会

控制，收容，保护

著作信息

更多

著作信息

更多

示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

代码

其它有趣的网站

BIO-PRO

Circulation Services

Alfamedia

新鲜地洞
