血色 版式

评分：

Rating: +16

含著作信息模块的评分：

Rating: +16

著作信息

关于你的页面的信息。

更多

更多

关于你的页面的更多信息。

Rating: +16

这是血色版式，一款基于Sigma-9版式、由 ubergooberubergoober制作，并受暗色模式版式启发的版式。你可以随意将本版式用于任何用途。

要使用本主题，请将以下代码放在文章的最顶部：

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

以下是本主题的基础配色。你可以将它们修改成自己喜欢的任何颜色。

--accent-color #f54242

--header-color #a62d2d

--background-color#191919

--bright-color #c03535

--dark-color #6d0000

--darker-color #4c1717

你可以通过将以下代码插入CSS模块，并根据需要进行修改，来更改标题、副标题或徽标，甚至更改整个配色方案。例如，以下代码会使页面采用蓝色配色方案，而不是红色。

css
:root:lang（cn） {

  /* Header */
    --header-title: "SCP基金会";
    --header-subtitle: "控制，收容，保护";
    --lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);

  /* Colors */
    --header-color: #1d1d66;
    --subtitle-color: white;
    --background-color: #191919;

    --accent-color: #4242f5;
    --visited-color: #5B5BD2;
    --bright-color: #3535C0;
    --dark-color: #00006D;
    --darker-color: #17174C;
}

水平分隔线由四至六个连字符组成，但我更喜欢使用五个（-----）。不过，这实际上完全没有区别，也不会影响它们的显示效果。

+ 这是一个折叠块。下面是一些标题。- 隐藏

标题 1

标题 2

标题 3

标题 4

标题 5
标题 6

这个链接不存在。
这可能是一个你尚未访问过的链接。
这是一个你已经访问过的链接。它的颜色会稍微深一些。

TabTab长Tab更长的Tab空Tab实际还是空Tab

这是一个Tab视图。

这是表格
底部文字等等

这是一个引用块。

这是一个引用块div，外观与普通引用块完全相同，但使用起来更加方便。你可以像这样创建它：

[[div class="blockquote"]]
文本放在这里！
[[/div]]

嵌套引用块。1

看！

chernobyl.jpg

一张带有说明文字的精美公有领域图片。

你可以像这样创建外观很酷的分隔线：

[[span class="divider"]]文本放在这里！[[/span]]

你也可以使用图片块组件添加图片，就像右侧看到的这样。默认尺寸为300px。

+ 版式源代码- 隐藏
css
/*
    Blood Theme
    by ubergoober, 2026
    Based on Sigma-9, from the SCP Wiki
*/

/* ---- VARS ---- */
:root:lang(cn) {

    --header-title: "SCP基金会";
    --header-subtitle: "控制，收容，保护";
    --lgurl: url(https://scp-wiki-cdn.nyc3.cdn.digitaloceanspaces.com/theme/en/black-highlighter/img/logo.svg);

    --header-color: #661d1d;
    --subtitle-color: white;
    --background-color: #191919;

    --accent-color: #f54242;
    --visited-color: #D25B5B;
    --bright-color: #C03535;
    --dark-color: #6d0000;
    --darker-color: #4c1717;
}

/* ---- SITE BANNER ---- */
div#container-wrap {
    background-image: none;
}

#header,
div#header {
    background-image: none;
}

#header::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    margin-top: 0.5em;
    background-image: var(--lgurl);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 9em;
    opacity: .33;
}

#header h1,
#header h2 {
    float: none;
    margin-left: 0;
    text-align: center;
}

#header h1 span,
#header h2 span {
    display: none;
}

#header h1 a::before {
    position: relative;
    bottom: .15em;
    color: var(--title-color);
    font-size: 115%;
    font-weight: 700;
    content: var(--header-title);
}

#header h2::before {
    position: relative;
    top: .1em;
    color: var(--subtitle-color);
    font-size: 130%;
    font-weight: 600;
    content: var(--header-subtitle);
}

/* ---- TOP BAR ---- */
#top-bar {
    right: 0;
    display: flex;
    justify-content: center;
}

#top-bar ul li ul {
    border-bottom: 1px solid hsl(0, 0%, 40%);
    box-shadow: none;
}

/* ---- BODY ---- */
#container {
    background: linear-gradient(to bottom, var(--header-color), var(--background-color) 200px);
}

body {
    background: var(--background-color);
    color: #f9f9f9;
}

/* -- Link Colors -- */

a {
    color: var(--accent-color);
}

a:visited {
    color: var(--visited-color);
}

a.newpage {
    color: #e67b3e;
}

.hovertip {
    background: var(--background-color);
    border: 1px solid #808080;
}

/* ---- SIDEBAR ---- */
#side-bar a,
#side-bar a:visited,
#side-bar a.newpage,
#interwiki a,
#interwiki a:visited,
#interwiki a.newpage {
    color: var(--accent-color);
}

#side-bar .heading,
#interwiki .heading {
    border-bottom: solid 1px #999;
    color: #999;
}

#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources,
#interwiki .side-block {
    background: var(--background-color);
    border-color: #808080;
    box-shadow: none;
}

#interwiki {
    background: transparent;
}

#interwiki body {
    background-image: unset;
}

#top-bar .open-menu a {
    background: #161616;
}

@media (max-width: 767px) {
    #side-bar {
        background-color: #332733;
    }
}

#top-bar .open-menu a {
    position: fixed;
    top: 0.5em;
    left: 0.5em;
    z-index: 5;
    font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
    font-size: 30px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    line-height: 0.9em;
    text-align: center;
    border: 0.2em solid #888;
    background-color: #fff;
    border-radius: 3em;
    color: #888;
    pointer-events: auto;
}

@media not all and (max-width: 767px) {
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }

    #top-bar .mobile-top-bar li {
        display: none;
    }

    #main-content {
        max-width: 44.5rem;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }

    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
        scrollbar-width: thin;
    }

    #side-bar:target,
    #side-bar:focus-within {
        left: 0;
    }

    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 17rem;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }

    #side-bar:not(:target) .close-menu {
        display: none;
    }

    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}

/* -------------- PAGE ELEMENTS -------------- */
/* -- Page Classes -- */

blockquote,
div.blockquote,
.code,
#lock-info {
    background: #0e0e0e;
    border: solid 1px #333;
    color: white;
}

.divider {
    display: block;
    max-width: 100%;
    border-top: 1.5px solid #aaa;
    border-bottom: 1.5px solid #aaa;
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    padding: 1em;
    margin: 50px auto;
}

/* -- Images --*/

/* uses :root hack to override base sigma priority */
:root .scp-image-block {
    margin-bottom: 2em;
}

.scp-image-block .scp-image-caption {
    background-color: #111;
    color: #f9f9f9;
    padding: 5px;
}

/* -- Rate Module -- */
div.page-rate-widget-box .rate-points {
    background-color: var(--background-color);
    border-color: #aaa9a9;
    color: #aaa9a9;
}

div.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown {
    background-color: #aaa9a9;
    border-top-color: #aaa9a9;
    border-bottom-color: #aaa9a9;
}

div.page-rate-widget-box .rateup a,
div.page-rate-widget-box .ratedown a {
    color: var(--background-color);
}

div.page-rate-widget-box .rateup a:hover,
div.page-rate-widget-box .ratedown a:hover {
    background: var(--background-color);
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel {
    background-color: var(--background-color);
    border-color: #aaa9a9;
}

div.page-rate-widget-box .cancel a {
    color: #aaa9a9;
}

div.page-rate-widget-box .cancel a:hover {
    background: #aaa9a9;
    color: var(--background-color);
}

/* -- ToC -- */

#toc {
    background-color: #333;
    border: none;
    box-shadow: 1px 1px 5px rgba(0,0,0,.8);
}

/* -- Info Module -- */
#page-content .rate-box-with-credit-button {
    background-color: var(--background-color);
    border-color: #aaa9a9;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}

#page-content .creditButton p a {
    border-left-color: #aaa9a9;
}

.rate-box-with-credit-button .cancel {
    border-radius: 0;
}

#page-content .creditButton p a:hover {
    color: var(--accent-color);
}

div.modalbox {
    background: linear-gradient(#0e0e0e 51px, var(--background-color) 51px, var(--background-color));
}

#u-credit-view .modalbox,
#u-credit-otherwise .modalbox {
    background: linear-gradient(
        #0e0e0e 51px,
        var(--background-color) 51px,
        var(--background-color)
    ) !important;
}

/* -- Titles -- */
#page-title,
.meta-title,
h1 {
    color: var(--accent-color);
}

/* -- Tables -- */

table.wiki-content-table {
    margin: 2em auto;
}

table.wiki-content-table tr td,
table.wiki-content-table tr th {
    border: solid 1px #333;
    color: white;
}

table.wiki-content-table tr th {
    background: #0e0e0e;
}

/* -- Tabviews -- */
.yui-navset {
    margin: 2em auto;
}

.yui-navset .yui-content,
.yui-navset .yui-navset-top .yui-content {
    background-color: #0e0e0e;
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: #373636;
    color: white;
}

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: var(--dark-color);
    border-color: #aaa9a9;
}

.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
    background: var(--darker-color);
}

/* -- Footnote Box -- */
div.footnote {
    color: black;
}

/* -- Code Highlighting -- */
/* code highlighter stuff */
.hl-identifier,
.hl-code,
.hl-brackets {
    color: #dddddd;
}

.hl-reserved {
    color: #7895ff;
}

.hl-var {
    color: #aa5dc2;
}

.hl-special,
.hl-quotes {
    color: #ff4545;
}

.hl-number,
.hl-string {
    color: #5dc267;
}

/* -- Other -- */
del,
ins {
    color: #333;
}

.content.modal-body {
    color: black;
}

/* ---- PAGE TITLE ---- */
.meta-title,
#page-title {
    text-align: center;
}

/* ---- MOBILE DISPLAY ---- */
@media (max-width: 767px) {
    #search-top-box {
        top: 1.85em;
        width: unset;
    }

    .mobile-top-bar {
        position: relative;
        left: 0;
        display: flex;
        justify-content: center;
    }

    #login-status {
        top: 0;
        right: 0;
    }

    #header .printuser {
        font-size: 0;
    }

    #header .printuser img.small {
        margin: 0;
        transform: translate(6px, 4px);
    }

    #my-account {
        display: none;
    }

    #account-topbutton {
        margin-left: 2px;
    }
}
Footnotes
  1. 1.这是脚注。
‡ 授权 / 引用‡ 隐藏授权 / 引用

Cite this page as:

"血色 版式" by ubergoober, from the SCP Wiki. Source: https://scpwiki.com/theme:blood. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Filename: chernobyl.jpg
Name: Pripyat River in Chernobyl 2019 G2
Author: George Chernilevsky
License: Public Domain
Source Link: [https://commons.wikimedia.org/wiki/File:Pripyat_River_in_Chernobyl_2019_G2.jpg Wikimedia Commons]]

版式
页面版本：⁨0⁩, 最后编辑于: ⁨2026/8/13 09:37:33⁩ (⁨⁨34⁩ 日前⁩), 现时评分: 16
历史 附件 + 选项