骇灵街 主题版式

主题颜色

Tombstone--gray-monochrome(156, 148, 132)

Parchment--bright-accent(255,238,204)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Wild Sand--pale-gray-monochrome(244,244,244)

Alto--light-gray-monochrome(215, 215, 215)

Shadow on Pine--dark-gray-monochrome(115,94,55)

Dull Gold--medium-accent(207,159,45)

Lisbon Brown--dark-accent(70,56,33)

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

街印 - 黑色

街印 - 白色

使用方法

此版式由 MalyceGraves 开发，用于骇灵街背景下的故事和 SCP 文档。

采用 CC BY-SA 3.0 授权协议。

注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。点击这里了解更多。

此外，此版式基于 djkaktus 和 Woedenaz 制作的精美绝伦的老贵族版式，并经过大量调整。

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

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:laruetheme]]

示例

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

---

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

+ 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

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

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

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

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

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

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

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

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

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

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

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

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

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

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

更多文字

---

一条分割线

嵌套引用块

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

正文字体为 Rubik / Noto Sans SC。
标题字体为 Zhi Mang Xing。
等宽字为 Courior Prime / 幼圆。

---

+ 显示版式代码

@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Zhi+Mang+Xing|Rubik&display=swap');
 
@supports(--css:variables) {
 
    :root {
 
     --theme-base: "black-highlighter";
     --theme-id: "laruetheme";
     --theme-name: "La Rue Macabre Theme";
     --header-title: "骇灵街";
     --header-subtitle: "我有偷闲法，且坐共谈天";
 
     --logo-image: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/sigil2.png");
 
     --body-font: 'Rubik', "Noto Sans SC", sans-serif;
     --header-font: 'Zhi Mang Xing', cursive;
     --title-font: 'Rubik', "Noto Sans SC", sans-serif;
     --mono-font: 'Courier Prime', '幼圆', monospace;
 
     --white-monochrome: 255, 250, 240;
     --pale-gray-monochrome: 244, 244, 244;
     --light-pale-gray-monochrome: 244, 244, 244;
     --very-light-gray-monochrome: 215, 215, 215;
     --light-gray-monochrome: 215, 215, 215;
     --gray-monochrome: 156, 148, 132;
     --dark-gray-monochrome: 115, 94, 55;
     --black-monochrome: 13, 12, 10;
     --black-monochrome-alt: 54, 48, 43;
     --bright-accent: 255, 230, 179;
     --medium-accent: 207, 159, 45;
     --dark-accent: 70, 56, 33;
     --newpage-color: 224, 224, 209;
     --swatch-text-light: 115, 94, 55;
 
     --swatch-menubg-color: var(--black-monochrome);
     --swatch-border-color: var(--swatch-menubg-dark-color);
     --sidebar-links-text: var(--swatch-menutxt-light-color);
 
     --swatch-background: var(--black-monochrome, 26, 25, 24);
 
     --rating-module-button-color: var(--bright-accent);
     --rating-module-button-plus-color: 45, 65, 25;
     --rating-module-button-negative-color: 70, 35, 30;
     --rating-module-button-cancel-color: 50, 45, 50;
     --rating-module-button-credit-color: 50, 45, 50;
     --rating-module-text-color: var(--bright-accent);
     --rating-module-text-hover-color: var(--swatch-menutxt-light-color);
 
     --background-gradient-color: var(--dark-accent, 70, 56, 33);
     --header-gradient-color-bottom: var(--dark-accent);
     --header-gradient-color-middle: var(--black-monochrome);
     --header-gradient-color-top: var(--black-monochrome);
 
     --gradient-header: linear-gradient(30deg,
     rgb(var(--header-gradient-color-bottom)) 0%,
     rgb(var(--header-gradient-color-middle)) 90%,
     rgb(var(--header-gradient-color-top)) 100%);
 
     --scrollbar-width: 0.5rem;
 
     --header-height-on-desktop: 12rem;
     --header-height-on-mobile: 12rem;
     --topbar-height-on-desktop: 1.875rem;
     --topbar-height-on-mobile: 3rem;
 
     scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }
 
    html,
    body {
     color: rgb(var(--white-monochrome));
    }
 
    a {
     color: rgb(var(--swatch-primary-darker));
    }
 
    @supports (background-blend-mode: screen) {
 
     #extrac-div-1 {
     width: 100%;
     height: var(--header-height-on-desktop);
     position: absolute;
     top: 0;
     left: 0;
     background-image: var(--gradient-header), url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/tilewood.jpg");
     background-size: var(--header-background-image-size) 80%, 80%, 80%;
     background-blend-mode: normal;
     pointer-events: none;
     }
 
     div#extra-div-1 {
     width: 100%;
     height: calc(100% - var(--final-header-height-on-desktop));
     position: absolute;
     top: calc(var(--final-header-height-on-desktop));
     left: 0;
     z-index: -1;
     background-color: rgba(252, 252, 252, 1);
     background-color: rgba(var(--swatch-background), 1);
     mask: var(--gradient-background);
     -webkit-mask: var(--gradient-background);
     background-image: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/tilewood.jpg"), var(--gradient-background);
     background-size: 10%, 100% var(--background-gradient-distance);
     background-blend-mode: difference;
     background-repeat: repeat, repeat-x;
     pointer-events: none;
     }
 
    }
 
    #header {
     background-repeat: no-repeat;
     background-position: left 0 top 0.25rem;
     background-clip: border-box;
     -webkit-background-size: auto calc(var(--header-height-on-desktop) - 1rem);
     background-size: auto calc(var(--header-height-on-desktop) - 1rem);
     filter: initial;
    }
 
    #header h1 a {
     font-size: 200%;
     overflow-wrap: normal;
     padding: 0;
     margin-top: calc((var(--header-height-on-desktop) - 0.5em)/2);
     margin-left: calc(var(--header-height-on-desktop) - .75rem);
    }
 
    #header h1 a::before {
     color: rgb(255, 219, 90);
     color: rgb(var(--bright-accent));
     text-shadow: inherit;
     background: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/wood.png");
     -webkit-background-size: cover;
     background-size: cover;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     overflow-wrap: normal;
    }
 
    #header h2 span {
     margin-left: calc(var(--header-height-on-desktop) + 0.75rem);
    }
 
    #header h2 {
     font-size: 150%;
    }
 
    #side-bar:hover {
     background-color: rgb(var(--black-monochrome-alt), 1);
     scrollbar-color: rgba(var(--dark-gray-monochrome), 1) rgba(var(--black-monochrome), 1);
    }
 
    #side-bar {
     background-color: rgb(var(--black-monochrome-alt));
     scrollbar-color: rgba(var(--dark-gray-monochrome), 0) rgba(var(--black-monochrome), 0);
    }
 
    #side-bar div.menu-item {
     border-bottom: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
     border-top: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
     margin-top: -0.0625rem;
    }
 
    #side-bar div.menu-item > :not(:nth-child(2)):not(.collapsible-block) {
     border-left: 0.0625rem solid rgb(var(--swatch-menubg-dark-color));
    }
 
    #side-bar .heading,
    #side-bar .side-block > .collapsible-block:nth-child(1) .collapsible-block-folded {
     background: initial;
    }
 
    #side-bar .heading p,
    #side-bar .side-block > .collapsible-block .collapsible-block-link {
     color: rgb(var(--swatch-menutxt-dark-color));
     text-shadow: inherit;
     letter-spacing: 0.05rem;
     font-weight: 900;
     font-size: 1.25rem;
     position: relative;
     display: flex;
     justify-content: center;
     margin: 1rem 0 1rem 0.5rem;
     color: rgb(255, 219, 90);
     color: rgb(var(--bright-accent));
     text-shadow: inherit;
     background: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/wood.png");
     -webkit-background-size: cover;
     background-size: cover;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     overflow-wrap: normal;
     font-family: var(--header-font);
     text-transform: none;
    }
 
    #side-bar .heading p::after,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::after,
    #side-bar .heading p::before,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::before {
     content: " ";
     position: absolute;
     width: 100%;
     height: 0.35rem;
     background-image: url("http://scp-wiki.wdfiles.com/local--files/theme%3Alaruetheme/elegantdivider.png");
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
    }
 
    #side-bar .side-block[style*="background-color:"] * {
     margin-left: 0 !important;
    }
 
    #side-bar > div[style="background-color: #e5e5ff;"] > div.menu-item > div {
     background-color: rgb(var(--black-monochrome));
    }
 
    #side-bar .side-block[style*="background-color:"] .heading {
     margin-top: .25rem;
    }
 
    #side-bar .heading p::after,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::after {
     bottom: -0.6rem;
    }
 
    #side-bar .heading p::before,
    #side-bar .side-block > .collapsible-block .collapsible-block-link::before {
     top: -0.6rem;
    }
 
    #side-bar div.menu-item .sub-text {
     color: rgba(var(--swatch-primary-darker), 1);
    }
 
    #page-title {
     color: rgb(var(--swatch-menutxt-light-color));
    }
 
   blockquote,
   .blockquote {
    color: rgb(var(--light-pale-gray-monochrome));
    border-radius: 10px;
    border:dashed 1px rgb(var(--black-monochrome-alt));
    background: rgb(var(--dark-gray-monochrome));
   }
 
    .yui-navset .yui-content {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .yui-navset .yui-content,
    .yui-navset .yui-navset-top .yui-content {
     border-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    .yui-navset .yui-nav a,
    .yui-navset .yui-navset-top .yui-nav a {
     background-color: rgb(var(--swatch-menubg-black-color));
     color: rgb(var(--swatch-text-light));
    }
 
    table.wiki-content-table th {
     background: rgb(var(--swatch-primary-darkest));
    }
 
    .code {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .hl-main {
     filter: invert(1) hue-rotate(180deg);
    }
 
    .scp-image-block .scp-image-caption {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .scp-image-block img {
     border: 0.5rem solid rgba(var(--black-monochrome));
    }
 
    a:visited {
     color: rgb(var(--swatch-primary-darker));
    }
 
    h1 {
     color: rgb(var(--swatch-primary)) !important;
    }
 
    hr {
     border-top: none;
     position: relative;
     height: 0.35rem;
     background: rgba(0, 0, 0, 0);
     display: flex;
    }
 
    hr::before {
     content: " ";
     position: absolute;
     top: 0.1125rem;
     left: 0;
     border-top: none;
     width: 100%;
     height: 0.125rem;
     background: -webkit-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background: -o-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background: -moz-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 50%, rgba(var(--bright-accent), 0.15) 100%);
     background-position: center center;
     -webkit-filter: blur(0.04rem);
     filter: blur(0.04rem);
    }
 
    hr::after {
     content: " ";
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 10%;
     height: 0.25rem;
    }
 
    .page-rate-widget-box {
     background: linear-gradient(to top, rgba(var(--swatch-primary), 0.25) 0, rgba(var(--swatch-primary-darker), 0.15) 100%) !important;
     font-family: var(--mono-font);
    }
 
    form#edit-page-form {
     background-color: rgba(var(--dark-accent), 0.25);
    }
 
    textarea,
    input.text {
     background-color: rgb(var(--black-monochrome));
     color: rgb(var(--white-monochrome));
     padding: 0.5em;
    }
 
    #lock-info {
     background-color: rgb(var(--dark-accent));
    }
 
    div.buttons input,
    input.button,
    button,
    file,
    a.button {
     background-color: rgb(var(--medium-accent));
     color: rgb(var(-black-monochrome));
     border-color: rgb(var(--black-monochrome))
    }
 
    div.buttons input:hover,
    input.button:hover,
    button:hover,
    a.button:hover {
     background-color: rgb(var(--bright-accent));
    }
 
    div#page-info,
    div.page-watch-options {
     padding: 0.1em;
    }
 
    div#page-options-bottom {
     width: 90%;
     margin-bottom: 2.125rem;
     margin-left: auto;
     margin-right: auto;
    }
 
    div#page-options-bottom-2 {
     width: 90%;
     margin-top: -2.125rem;
     margin-left: auto;
     margin-right: auto;
    }
 
    div#page-options-bottom,
    div#page-options-bottom-2 {
     text-align: left;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
    }
 
    div#page-options-bottom,
    div#page-options-bottom-2,
    div#page-options-bottom > a {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
    }
 
    div#page-options-bottom > a,
    div#page-options-bottom-2 > a {
     -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
     -moz-box-flex: 2;
     -ms-flex-positive: 2;
     flex-grow: 2;
     padding: .25rem;
     -webkit-border-radius: .25rem;
     border-radius: .25rem;
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
     border: 0.125rem solid rgba(var(--swatch-primary), 0.25) !important;
     font-weight: 700;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition: background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
 
    div#page-options-bottom-2 > a {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
    }
 
    div#page-options-bottom > a:hover,
    div#page-options-bottom > a:active,
    div#page-options-bottom-2 > a:hover,
    div#page-options-bottom-2 > a:active {
     text-decoration: none;
     background-color: rgba(var(--swatch-menubg-dark-color), 1);
     color: rgba(var(--swatch-primary), 1);
    }
 
    .owindow .title {
     background-color: rgb(var(--swatch-menubg-dark-color));
    }
 
    #odialog-container,
    .title.modal-header,
    .owindow,
    .hovertip {
     background-color: rgb(var(--swatch-primary-darkest));
    }
 
    .hovertip {
    border: 1px solid #000 !important;
    -webkit-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    max-width: 250px;
    }
 
    .hovertip .content {
     background-color: #1f1c17;
     color: #cec4ae;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     padding: 4px;
   }
 
    .owindow .button-bar a {
     background-color: rgb(var(--swatch-menubg-dark-color));
     color: rgb(var(--white-monochrome));
    }
 
    @media only screen and (max-width: 768px) {
 
     #header {
     --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
     --y-offset: 1.5rem;
     background-position:
     calc((var(--header-height-on-mobile) - 3.75rem) - var(--size)) calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
     background-size: var(--size), 100% var(--header-height-on-mobile);
     background-repeat: no-repeat, repeat;
     }
 
     #header > h1 > a > span {
     height: var(--header-height-on-mobile);
     }
 
     #header h1 a {
     line-height: 1;
     }
 
     #header h2 span {
     line-height: 1.1;
     }
 
    }
 
    @media only screen and (min-width: 600px) and (max-width: 768px) {
 
     #header {
     --size: calc(var(--final-header-height-on-mobile) - 0.875rem);
     --y-offset: 1.5rem;
     background-position:
                calc((var(--header-height-on-mobile) - 3.75rem) - var(--size))
                calc(((var(--size) * -1) + var(--header-height-on-mobile) + var(--y-offset)) / 2);
     background-size: var(--size), 100% var(--header-height-on-mobile);
     background-repeat: no-repeat, repeat;
     }
 
     #header h1 a {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2)) - 0.75em);
     line-height: 1;
     font-size: 300%;
     }
 
     #header h2 span {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
     line-height: 1.1;
     font-size: 120%;
     }
 
    }
 
    @media only screen and (min-width: 400px) and (max-width: 600px) {
 
     #header h1 a {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
     font-size: 140%;
     }
 
     #header h2 span {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2) + 0.5em));
     font-size: 60%;
     }
 
    }
 
    @media only screen and (max-width: 400px) {
 
     #header h1 a {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2)) - 1em);
     font-size: 125%;
     }
 
     #header h2 span {
     margin-left: calc(var(--header-height-on-mobile) - 3.5rem);
     margin-top: calc(((var(--header-height-on-mobile) / 2) + 3.5em));
     font-size: 35%;
     }
 
    }
 
}