骇灵街 主题版式
黑色标记笔 主题版式 » 黑色标记笔 主题中心 » 骇灵街 主题版式
主题颜色
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 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 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%; } } }