版式:SCP 解密

评分:

Rating: +40

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

Rating: +40

这是一个由 AmbersightAmbersight 制作的解密 SCP 版式,一定程度上还原了 Reddit r/SCPDeclassified 子版的设计风格。代码参考了由 sendoh-orokasendoh-oroka 制作的熙攘 版式以及由 EstrellaYoshteEstrellaYoshte 制作的半影 版式简远 版式

你可以自由将该版式应用于原创 / 翻译的 SCP 解密文章,详见解密 SCP 中心页。当然,你也可以将之用于其他用途。

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

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

请勿通过标准的 CSS @import 方式引入本版式。你当然完全可以这么做,但通过 [[include]] 来引入版式可以将你的页面加入到一系列“反向链接”清单之中。当本版式更新升级时,此方式可以看到哪些页面会受到影响,且可以更快留意、修正升级所导致的任何错误,故而十分有用。

你可以通过点击页面底部的“+ 选项”、“反向链接”来查看任何页面的反向链接。


示例

scp.png

好熟悉的标志,我在哪里见过?

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


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

+ 标题- 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题
6 级标题

分页分页长Tab空tab

此为分页(tab view)。

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

更多文字


一条分割线

嵌套引用块

这是表格
你应该老早就知道怎么
做这个了吧
  • 一级1
    • 二级

另一种框框。

[[div class="hardblock"]]
[[/div]]

正文、页眉、标题字字体为思源黑体,等宽字体为思源宋体


Footnotes
  1. 1.脚注。

+ 源代码- 源代码
css
@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');

/* --- 全局 --- */
body {
    color: #000000;
    font-family: 'Noto Sans SC', sans-serif;
    background-color: rgb(218,224,230);
}

.code pre, .code p, .code, tt{
    font-family: 'Noto Serif SC', sans-serif;
}

.page-source{
    font-family: 'Noto Serif SC', sans-serif;
}

a,a:visited {
    color: rgb(113, 71, 121);
}

.avatar-hover { 
    display: none !important;
}

.hovertip { 
    max-width: 400px;
}

/* --- 版头 --- */
#search-top-box-input,
#search-top-box-input:hover,
#search-top-box-input:focus,
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    border: none;
    background: rgba(64,38,68,0.8);
    box-shadow: none;
    border-radius: 2px;
    color: #f4f4f4;
}

#account-options {
    border-radius: 5px;
    border: solid white 1px;
}

#account-topbutton {
    border-width: 0;
}

#login-status,
#login-status a {
  color: white;
    font-weight: bold;
}

#login-status ul a,
#login-status ul a:hover {
    color: rgb(113, 71, 121);
}

#header {
  background: none;
}

div#container-wrap {
  background: none;
}

div#extra-div-1 {
  height: 161px;
  width: 100%;
  top: 0;
  position: absolute;
  background: url("https://scpsandboxcn.wikidot.com/local--files/ambersight/banner-x.jpg");
  background-size: cover;
  background-position: left top;
}

#header h1 a::before {
  background: none;
}
#header h1 a span{
    visibility: hidden;
}
#header h2 span {
    color: transparent;
    text-shadow: 0px 0px 0px;
}
#header h2 span::before {
  background: none;
}

/* --- 顶栏 --- */
div#extra-div-2 {
  height: 21px;
  width: 100%;
  top: 140px;
  position: absolute;
  background-color: rgba(64,38,68,0.8);
}

#top-bar ul li a,
#top-bar ul li:hover a {
background: transparent;
    color: rgb(113, 147, 255);
    font-weight: bold;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

#top-bar ul li a:after {
    content:"▼";
    color: rgb(113, 147, 255);
}

#top-bar ul li.sfhover a:hover:after {
  color: rgb(44, 0, 87);
}

#top-bar ul li ul li a:after,
#top-bar ul li ul li a:hover:after {
    content:" ";
}

#top-bar ul li ul {
    border: none;
    overflow: hidden;
    box-shadow: none;
    background: white;
    border-radius: 5px;
    border: solid white 1px;
}

#top-bar ul li.sfhover a:hover {
  color: rgb(44, 0, 87);
  background: transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

/* --- 侧栏 --- */
.menu-item > .image {
     filter: invert(27%) sepia(82%) saturate(341%) hue-rotate(244deg) brightness(70%) contrast(85%) !important;
     -webkit-filter: invert(27%) sepia(82%) saturate(341%) hue-rotate(244deg) brightness(70%) contrast(85%) !important;
}

#side-bar {
    top: 0px;
}

#side-bar .side-block {
    background-color: white !important;
    width: 120%;
    border-radius: 5px;
    border: solid white 1px;
    box-shadow: none;
    padding: 0;
    padding-bottom: 15px;
}

#side-bar > div.side-block.license {
    padding-top: 15px;
}

#side-bar .heading,
#side-bar .collapsible-block-unfolded .collapsible-block-unfolded-link {
    padding-top: 0.435rem;
    border-bottom: none;
    border-radius: 5px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    height: 1.74rem;
    background: rgb(113, 71, 121);
    color: white;
    font-size: .87rem;
    margin-bottom: 15px;
}

#side-bar a,
#side-bar a:visited {
    color: rgb(113, 71, 121);
}

#side-bar div.menu-item,
#side-bar .collapsible-block-folded {
    margin-left: 15px;
}

#side-bar .collapsible-block-folded {
    margin-top: 15px;
}

#side-bar .collapsible-block-folded {
     background: url(https://scpsandboxcn.wikidot.com/local--files/ambersight/expand.png) 0 2px no-repeat;
}

#side-bar .collapsible-block-unfolded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: white;
    font-size: .87rem;
}

/* --- 主体 --- */
/* 分页(半影) */
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}

/* ---- YUI TAB CUSTOMIZATION ----*/

 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav{
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: rgb(113, 71, 121);
     box-shadow: none;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a{
     color: black;
     font-weight: bold;
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: white;
     border: solid 0.1rem rgb(113, 71, 121);
     box-shadow: none;
     box-shadow: none;
     transition: background-color 0.15s linear;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus{
     color: #ededed;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: rgb(113, 71, 121);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li{
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     color: #ededed;
     background-color: white;
     border-color: rgb(113, 71, 121);
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em{
     padding: .35em .75em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected{
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: rgb(113, 71, 121);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em{
     border: none;
}
 .yui-navset .yui-nav .selected a{
     width: 100%;
     color: white;
     font-weight: bold;
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active{
     color: white;
     background-color: rgb(113, 71, 121);
}
 .yui-navset .yui-content {
    background-color: white;
    box-shadow: none;
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content{
     padding: .5em;
    border: solid 0.1rem rgb(160,160,160);
}

/* 表格 */
#page-content .wiki-content-table tr th {
    border: solid 0.1rem rgb(113, 71, 121);
    background-color: rgb(113, 71, 121);
    color: white;
}

#page-content .wiki-content-table tr td {
    border: solid 0.1rem rgb(160,160,160);
}

/* 图片框 */
.scp-image-block.block-right {
    margin-right: 0;
}

.scp-image-block.block-left {
    margin-left: 0;
}

.scp-image-block{
    border: solid 0.1rem rgb(160,160,160);
    box-shadow: none;
}
.scp-image-block .scp-image-caption {
    border-top: solid 0.1rem rgb(160,160,160);
}

/* div */
blockquote,
div.blockquote {
    background-color: white;
    margin: 0;
    border: none;
    border-left: solid 0.2rem rgb(160,160,160);
    box-shadow: none;
    padding-left: 0.7em;
    padding-right: 1em;
}

#toc,
.code,
div.hardblock {
    background-color: white;
    border: solid 0.1rem rgb(160,160,160);
    box-shadow: none;
    padding-left: 1em;
    padding-right: 1em;
}

.code {
    font-family: 'Noto Serif SC', sans-serif;
}

/* 分割线 */
hr {
    height: 1px;
    margin: 1em 0;
    background-color: rgb(160,160,160);
}

/* 标题 */
h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: bold;
}

/* 评分模块 */
#page-content .creditRate{
    margin: unset;
    margin-bottom: 8px;
}
#page-content .rate-box-with-credit-button {
    background-color: white;
    border: solid 1px white;
    box-shadow: none;
    border-radius: 0;
}

#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: rgb(113, 71, 121);
}

#page-content .rate-box-with-credit-button .fa-info:hover {
    background: white;
    color: rgb(113, 71, 121);
}

.rate-box-with-credit-button .cancel {
    border: solid 1px white;
}

.page-rate-widget-box {
    box-shadow: none;
    margin: unset;
    margin-bottom: 8px;
}

.page-rate-widget-box .rate-points {
    background-color: white !important;
    color: black !important;
    border: solid 1px white !important;
}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: white;
    border-top: solid 1px white;
    border-bottom: solid 1px white;
}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    background: transparent;
    color: rgb(113, 71, 121);
}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background: white;
     color: rgb(113, 71, 121);
}

.page-rate-widget-box .cancel {
    background: transparent;
    background-color: white;
    border: solid 1px white;
}

.page-rate-widget-box .cancel a {
     color: rgb(113, 71, 121);
}
.page-rate-widget-box .cancel a:hover {
    background: white;
     color: rgb(113, 71, 121);
}

/* 正文背景 */
div#extra-div-3 {
  height: 100%;
  width:100%;
  z-index:-10;
  top: 0;
  position: fixed;
  background: url("https://scpsandboxcn.wikidot.com/local--files/ambersight/background-x.jpg");
  background-size: cover;
  background-position: center;
}

#page-content {
    font-size: .87rem;
}

#main-content {
    margin-left: 25em;
    padding: 0.2em 1.5em 1.5em 3em;
    background-color: white;
    border: 0.05rem solid rgb(205,205,205);
  border-radius: 5px;
}

/* 标题 */
#page-title {
    display: none;
}

#breadcrumbs {
    margin-top: 1em;
}

/* --- 底栏 --- */
#footer {
  background-color: rgba(64,38,68,0.8);
  color: rgb(113, 147, 255);
}

#footer a {
  color: rgb(113, 147, 255);
}

#license-area,
#license-area a {
  color: rgb(113, 147, 255);
}

/* --- 移动端 --- */
#top-bar .open-menu a {
    border: 0.15em solid rgb(113, 71, 121);
    color: rgb(113, 71, 121);
}

@media only screen and (max-width: 768px) {
div#extra-div-1 {
  background: url("https://scpsandboxcn.wikidot.com/local--files/ambersight/banner-phone.jpg");
  background-size: cover;
  background-position: left top;
}

#main-content {
    margin-left: 0.6em;
    margin-right: 0.6em;
    padding-left: 1.5em;
}

#side-bar .side-block {
    width: 100%;
}

#side-bar {
    background-color: rgba(113, 71, 121, 0.4);
}

#top-bar ul li a:after,
#top-bar ul li.sfhover a:hover:after {
    content:" ";
}

#page-content {
    font-size: 0.80rem;
}

}
页面版本:⁨0⁩, 最后编辑于: ⁨2022/12/21 11:01:20⁩ (⁨⁨1365⁩ 日前⁩), 现时评分: 40