著作信息

极简黑标主题版式，由 JakdragonX 与 Pedagon 合作重写。

感谢 stormbreath 的启发，以及 Woedenaz 与 EstrellaYoshte 的极大帮助。

你好。这是极简黑标主题版式，原为 Pedagon 的科学部文章制作，其已被修改为更加对用户友好。在你的作品开头添加如下语法以应用此版式：

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:minimalist-bhl]]

“但是，我觉得这个版式看起来很帅，我想把它用到部门之类的地方！”那么，告诉你个好消息——你可以这么做！只需在以上代码片段后方添加如下代码即可编辑页眉：

[[module CSS]]
:root {
--lgurl: url('自定义标志 url');
}
:root:lang(cn) {
--header-title: "大标题";
--header-subtitle: "副标题";
}
[[/module]]

示例

科学部标志

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

一个你可能已经访问过一次的链接，我不知道

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

+ 标题

为什么铲子这么特别？

因为这是一项突破性的发明。

这是一个引用块，在一行字的起始处加上“> ”来创建。
看！有更多的文本！

那是一条分割线。很漂亮，对吧？

想听个有关纸的笑话吗？
实际上……咩，算了吧。太容易裂开了。

你开始明白这些东西的意义了吗？

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

正文字体为 Inter / Noto Sans SC。
页眉及标题字体为 Inter / Noto Sans SC。
等宽字为 Recursive / Noto Serif SC。

+ 展示版式代码

- 收起版式代码

:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "black-highlighter";
    /* must be either "black-highlighter" or "sigma9" */
    --theme-id: "minimalist-bhl";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Minimalist BHL";
    /* set this to your theme's full name */
 
    --header-title: "SCP FOUNDATION";
    --header-subtitle: "SECURE - CONTAIN - PROTECT";
    --logo-image: url('https://scp-wiki.wdfiles.com/local--files/component:pride-highlighter/gp_logo.svg');
    --lgurl: var(--logo-image);
 
    --bright-accent: 245, 245, 245;
    --dark-accent: 36, 36, 36;
    --swatch-primary: var(--dark-accent);
    --light-gray-monochrome: 196, 196, 196;
    --dark-gray-monochrome: 200, 200, 200;
    --medium-accent: var(--dark-accent);
    --tab-border-color: var(--bright-accent);
    --hover-link-color: var(--dark-accent);
    --rating-module-button-color: var(--dark-accent);
    --rating-module-button-credit-color: var(--dark-accent);
    --swatch-background: var(--bright-accent);
    /* Background and Header Colors */
    --background-color: var(--bright-accent);
    /* Primary Text Colors */
    --swatch-text-light: var(--dark-accent);
    --swatch-text-general: var(--dark-accent);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--bright-accent);
    /* Colors for Secondary &amp;amp; Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--dark-accent);
    /* Primary Header Colors */
    --gradient-header: linear-gradient(90deg, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 1) 50%, rgba(245, 245, 245, 1) 100%);
    --swatch-topmenu-border-color: var(--dark-accent);
    --swatch-topmenu-bg-color: var(--dark-accent);
    --background-gradient-distance: 0rem;
    --modal-bg: var(--bright-accent);
 
    --rating-module-text-color: var(--dark-accent);
    --rating-module-button-cancel-color: var(--gray-monochrome);
 
    --diagonal-stripes: none;
 
    --toggle-button-bg: rgb(var(--bright-accent));
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--dark-accent));
}
 
:root:lang(cn) {
    --header-title: "SCP 基金会";
    --header-subtitle: "控制 - 收容 - 保护";
}
 
/* Header Stuff, changes the background logo, makes the top bar dark and spooky too! */
 
#header::before {
    background-image: var(--lgurl);
    opacity: 0.20;
}
 
#header div[class*=top-bar]>ul li:hover {
    background-color: rgba(var(--bright-accent));
}
 
#header div[class*=top-bar]>ul>li ul>li {
    box-shadow: inset 0 0 0 .0625rem rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
#header div[class*=top-bar]>ul>li>a {
    color: rgb(var(--bright-accent));
}
 
#header div#top-bar {
    background-color: inherit;
}
 
#header div[class*=top-bar]>ul>li>a:after,
#header div[class*=top-bar]>ul>li>a:before {
    background-color: rgba(var(--dark-accent));
}
 
#header div[class*=top-bar]>ul>li:hover>a {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#header h1 a::before {
    -webkit-text-stroke: 0.325rem rgb(var(--bright-accent));
}
 
#header h2 span::before {
    -webkit-text-stroke: 0.25rem rgb(var(--bright-accent));
}
 
#header h2 span::after {
    color: rgb(var(--dark-accent));
}
 
#header {
    --login-myaccount-hover-color: var(--bright-accent) --login-line-divider-color: var(--dark-accent);
    --login-username-color: var(--dark-accent);
    --login-myaccount-color: var(--dark-accent);
    --login-myaccount-underline-color: var(--bright-accent);
    --login-myaccount-hover-bg-color: var(--dark-accent);
    --login-arrow-color: var(--dark-accent);
    --login-dropdown-text-color: var(--dark-accent);
}
 
/* This is purely just for the Top Bar, especially the hover elements and whatnot */
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a,
#top-bar div.top-bar>ul>li>ul>li:hover>a {
    text-decoration: none;
    color: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar {
    background: rgb(var(--dark-accent));
}
 
#top-bar div.top-bar>ul>li:hover {
    background: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar>ul>li.sfhover>ul,
#top-bar div.mobile-top-bar>ul>li:hover>ul,
#top-bar div.top-bar>ul>li.sfhover>ul,
#top-bar div.top-bar>ul>li:hover>ul {
    color: rgb(var(--bright-accent));
}
 
/* Everything below here is for the Sidebar, including the hover elements and the headings too */
 
#side-bar {
    --sideblock-heading-text-color: var(--bright-accent);
    --social-icon-hover-color: var(--bright-accent);
}
 
#side-bar .side-block {
    background-color: rgb(var(--bright-accent));
}
 
#side-bar .side-block.resources {
    background: rgb(var(--bright-accent)) !important;
}
 
#side-bar .side-block.media {
    background-color: rgba(var(--dark-accent)) !important;
}
 
#side-bar div.menu-item>a {
    color: rgb(var(--dark-accent));
    transition:
     color 300ms cubic-bezier(.4, 0, .2, 1),
     background-color 300ms cubic-bezier(.4, 0, .2, 1)
}
 
#side-bar div.menu-item>a:visited {
    color: rgb(var(--dark-accent));
}
 
#side-bar div.menu-item>a:hover,
#side-bar div.menu-item>a:active {
    color: rgb(var(--bright-accent));
}
 
#side-bar div.menu-item>a:focus-within {
    color: rgb(var(--bright-accent));
}
 
#side-bar div.menu-item a::before {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
.side-block.media a {
    background: transparent
}
 
#side-bar .collapsible-block .collapsible-block-folded,
#side-bar .heading,
#interwiki .heading {
    background: rgb(var(--dark-accent));
}
 
/* Throwing this quick fix for the search bar up here as well, just so everything fits */
 
#search-top-box-input {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box-form input[type="submit"] {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box-form input[type="submit"]:hover {
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box-input {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#search-top-box input.empty {
    color: rgb(var(--dark-accent));
}
 
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    background-color: rgba(var(--dark-accent));
}
 
@media only screen and (max-width: 56.25rem) {
    #login-status:before {
     background-color: rgba(var(--dark-accent));
    }
 
}
 
@media only screen and (min-width: 769px) {
    #search-top-box-form>input {
     box-shadow: none;
    }
}
 
@media only screen and (min-width: 769px) {
 
    #search-top-box-form input[type="submit"],
    #search-top-box-form input[type="submit"]:focus,
    #search-top-box-form input[type="submit"]:hover {
     border-left: none;
     border-top: 0.0125rem solid rgb(var(--dark-accent));
     border-right: 0.0125rem solid rgb(var(--dark-accent));
     border-bottom: 0.0125rem solid rgb(var(--dark-accent));
     box-shadow: none;
    }
}
 
:not(.page-rate-widget-box):not(#search-top-box-form)>.btn,
:not(.page-rate-widget-box):not(#search-top-box-form)>.button,
:not(.page-rate-widget-box):not(#search-top-box-form)>.owindow .button-bar a,
:not(.page-rate-widget-box):not(#search-top-box-form)>button,
:not(.page-rate-widget-box):not(#search-top-box-form)>div.buttons input,
:not(.page-rate-widget-box):not(#search-top-box-form)>input.button {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
/* Since we're also up here, here's the code to mess with the account options too (and one fix for the printusers) */
 
#login-status .printuser {
    background: transparent;
    color: rgb(var(--dark-accent));
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--dark-accent));
    background: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: transparent;
    color: inherit;
}
 
login-status span.printuser {
    color: rgb(var(--dark-accent));
}
 
/* Okay, now for the links and the body */
 
body {
    color: rgb(var(--dark-accent));
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not(.fa-info):not([href*="http://www.scp-wiki.net/classification-committee-memo"]):not([href*="/classification-committee-memo"]):not([href="http://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not(.danger-diamond a) {
    padding: 0.15em;
    margin: -0.15em;
    color: inherit;
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--dark-accent));
    transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
#page-content a:not([href*="user"]):not([href*="javascript:;"]):not([href*="http://www.scp-wiki.net/classification-committee-memo"]):not([href*="/classification-committee-memo"]):not([href="http://scp-wiki.wikidot.com/anomaly-classification-system-guide"]):not(.fa-info):not(.danger-diamond a):hover {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--dark-accent));
    text-decoration: none;
    color: rgb(var(--bright-accent))
}
 
::-moz-selection {
    background: rgb(148, 148, 148);
}
 
::selection {
    background: rgb(148, 148, 148);
}
 
a {
    color: inherit;
}
 
a:hover {
    color: inherit;
}
 
a.close-menu {
    background-color: transparent;
}
 
a:visited {
    color: inherit;
}
 
.scp-image-block a {
    box-shadow: none;
}
 
hr {
    border-top: none;
    background-color: rgb(var(--dark-accent));
}
 
:is(blockquote,.blockquote,div.blockquote,[class*=blockquote]) {
    background-color: rgb(var(--bright-accent));
    box-shadow: inset 0 0 0 0.0625rem rgba(var(--dark-accent)),inset .0625rem 0 0 0 rgba(var(--dark-accent)),inset 0-.0625rem 0 0 rgba(var(--dark-accent));
}
 
/* Fancy Collapsibles */
 
#page-content .collapsible-block-link {
    text-decoration: none;
    font-weight: 700;
}
 
.collapsible-block-folded a,
.collapsible-block-unfolded-link a:not(.info-container):not(.info-container div.collapsible-block-unfolded-link):not(.info-container div.collapsible-block-folded-link):not(.info-container div.collapsible-block-unfolded):not(.info-container div.collapsible-block-folded):not(.info-container .collapsible-block-folded .collapsible-block-link):not(.info-container .collapsible-block-link) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
 
.collapsible-block-folded a,
.collapsible-block-unfolded-link a:not(.info-container):not(.info-container div.collapsible-block-unfolded-link):not(.info-container div.collapsible-block-folded-link):not(.info-container div.collapsible-block-unfolded):not(.info-container div.collapsible-block-folded):not(.info-container .collapsible-block-folded .collapsible-block-link):not(.info-container .collapsible-block-link) {
    position: relative;
    top: 0;
    left: 0;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    height: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
     color 0.25s linear,
     background-color 0.25s linear;
}
 
.collapsible-block-folded a {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
#page-content .collapsible-block-unfolded-link a {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#page-content .collapsible-block-folded a:hover,
#page-content .collapsible-block-unfolded-link a:hover {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
#page-content .collapsible-block-unfolded-link {
    box-shadow: none;
}
 
.info-container .collapsible-block-folded .collapsible-block-link,
.info-container .collapsible-block-link {
    padding: 0px;
}
 
/* Code for changing button colors */
 
div#page-options-bottom-2>a,
div#page-options-bottom>a {
    color: rgb(var(--dark-accent));
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
.owindow .button-bar a,
a.button,
button,
div.buttons input,
file,
input.button {
    border: 0.125rem solid rgba(var(--dark-accent));
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
.owindow .button-bar a:hover,
a.button:hover,
button:hover,
div.buttons input:hover,
file:hover,
input.button:hover {
    border: .125rem solid rgba(var(--bright-accent));
    background-color: rgba(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
div#page-options-bottom-2>a:hover,
div#page-options-bottom>a:hover {
    color: rgb(var(--bright-accent));
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
}
 
/* All Rating Module Code is below this line! */
 
.modalbox {
    box-shadow: none !important;
    border-color: transparent !important;
    border-radius: 0px !important;
    padding: 4px;
    pointer-events: auto !important;
}
 
.creditButton p a {
    background-color: rgb(var(--black-accent));
}
 
#page-content .rate-box-with-credit-button {
    display: inline-flex;
    margin-bottom: .75rem;
    border: .0625rem solid rgba(12, 12, 12, .25);
    border: .0625rem solid rgba(var(--gray-monochrome));
    border-radius: 0;
    background: rgb(var(--bright-accent));
    background-color: #fcfcfc;
    background-color: rgb(var(--bright-accent));
    padding: 0 .125rem;
    height: var(--rating-module-height);
    overflow: hidden;
}
 
.page-rate-widget-box {
    background: rgb(var(--bright-accent));
    border: 0.0625rem solid rgba(var(--dark-accent));
}
 
div.page-rate-widget-box .rate-points {
    border: none;
}
 
#page-content div.rate-box-with-credit-button, div.page-rate-widget-box {
    border: .0625rem solid rgba(var(--dark-accent));
}
 
/* Tabs */
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    box-shadow: none;
    border-color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav a:focus,
.yui-navset .yui-nav a:hover {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em {
    color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    color: rgb(var(--dark-accent));
    background: rgb(var(--bright-accent));
    border: 1px solid rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background: rgb(var(--bright-accent));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    border-color: rgb(var(--dark-accent));
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
.yui-navset-bottom .yui-nav li a,
.yui-navset-top .yui-nav li a,
.yui-navset .yui-nav li a {
    color: rgb(var(--dark-accent));
    background: rgb(var(--bright-accent));
}
 
/* Simple Tables */
 
table.wiki-content-table td {
    border: 1px solid #888;
    padding: 0.3em 0.7em;
    color: rgb(var(--dark-accent));
}
 
table.wiki-content-table th {
    background: rgb(var(--dark-accent));
    border: 1px solid rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
table.wiki-content-table tr {
    border: 1px solid #e3e3e3;
    color: #e3e3e3;
}
 
/* Image Blocks */
 
.scp-image-block {
    box-shadow: none;
}
 
.scp-image-block a {
    background-color: transparent;
}
 
:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption) {
    background-color: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
/* Footer and Hovertips */
 
.footnote {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
    border: 1px solid #242424;
    padding: .625em;
}
 
.footnotes-footer {
    background-color: rgba(var(--bright-accent));
    color: rgb(var(--dark-accent));
    border-top: 1px solid #242424;
    border-bottom: 1px solid #242424;
    border-right: 1px solid #242424;
}
 
.footnotes-footer a[href*=javascript]:before {
    color: rgb(var(--dark-accent));
    background-color: transparent;
}
 
.hovertip {
    background-color: rgb(var(--bright-accent));
    border: .0625rem solid rgb(var(--dark-gray-monochrome));
    color: rgb(var(--dark-accent));
}
 
.hovertip .content {
    background-color: rgb(var(--bright-accent));
}
 
#footer {
    background: rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
}
 
/* Michellaneous */
 
textarea,
#lock-info {
    color: rgb(var(--dark-accent));
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.scpnet-interwiki-wrapper {
    margin-top: 1em;
}
 
.licensebox .collapsible-block-link {
    background: none;
}
 
.printuser img.small {
    vertical-align: -0.2em;
    height: 14px;
}
 
#who-rated-page-area .printuser a {
    font-size: 100%;
}
 
#license-area {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: transparent;
    color: inherit;
}
 
.printuser:hover {
    background-color: transparent;
}
 
.page-tags a {
    background-color: transparent;
    color: rgb(var(--dark-accent));
}
 
.page-tags a:hover {
    color: rgb(var(--bright-accent));
}
 
form#edit-page-form {
    background-color: rgba(var(--dark-accent));
    color: rgb(var(--bright-accent));
 
}
 
input#edit-page-title {
    color: rgb(var(--dark-accent));
}
 
form#edit-page-form .edit-help-34>a {
    color: rgb(var(--dark-accent));
}
 
.danger-diamond a,
.danger-diamond a:hover {
    color: rgba(0, 0, 0, 0);
    box-shadow: initial;
}
 
.acs-hybrid-text-bar>a {
    background-color: transparent;
    color: transparent;
}
 
@media only screen and (min-width: 769px) {
 
    #search-top-box-form>input,
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
     background: rgb(var(--light-accent));
    }
}
 
@media (min-width: 0px) {
    #page-content .rate-box-with-credit-button>.creditButton>p>a:before {
     left: 4px;
    }
}
 
@media only screen and (max-width: 768px) {
 
    #header h2,
    #header h2 a,
    #header h2 a::before {
     top: 0.45rem;
    }
}
 
#u-author_block>p>a {
    color: var(--linkColour) !important;
}

合著版式

页面版本: 23, 最后编辑于: 27 Sep 2025 18:51

编辑评分 (+21) 标签讨论 (6) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

著作信息

示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题