如影随光 主题版式

[[iftags +版式]] [[module css]] @import url("https://bhl.scpwikicn.com/css/min/normalize.min.css"); @import url("https://bhl.scpwikicn.com/css/min/black-highlighter.min.css"); #page-title {     font-family: var(--header-font);     font-size: 270%; } @media only screen and (max-width: 765px) {     #page-title {         font-size: 170%;         white-space: nowrap;     } } .colors-container {     opacity: 0.7; } .colors-container .subcolors div:nth-of-type(2) {     color: rgba(var(--dark-accent), 0.9) !important; } [[/module]] [[div style="border: 1px solid #ddd; padding: 1em; margin: 1em; text-align: center;"]] [[div style="opacity: 0.6"]] [[image http://scpsandboxcn.wdfiles.com/local--files/collab%3Amayca/blBHL]] [[/div]] [[>]] **评分：** [[module Rate]] [[/>]] [[>]] **评分模块与著作信息模块：** [[/>]] [[include :scp-wiki-cn:credit:start]] [[*user ai_mayca]] 如影随光 BHL主题版式 [[include :scp-wiki-cn:credit:end]] + 使用方法 ++ 注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。[[[theme:black-highlighter-theme|点击这里了解更多]]]。 [[div class="code" style="text-align: left"]] @@[[include :scp-wiki-cn:theme:black-highlighter-theme]]@@ @@[[include :scp-wiki-cn:theme:broken-light]]@@ [[/div]] ----- [[=]] + 主题颜色 [[/=]] [[include :scp-wiki:component:theme-squares -=- | color1-name=深黑 | color1-variable=--dark-accent | color1-info=(33, 33, 33) | color1-has-light-text=1 | color2-name=亮红 | color2-variable=--bright-accent | color2-info=(224, 37, 58, 0.5) | color2-has-light-text=1 | subcolor1-name=中灰 | subcolor1-variable=--medium-accent | subcolor1-info=(125, 125, 125) | subcolor1-has-light-text=1 | subcolor2-name=淡白 | subcolor2-variable=--white-monochrome | subcolor2-info=(216, 216, 216) ]] @@ @@ + 自定义 若你想改变标题与背景，或替换12站logo动画.... 在 [[include]] 后加入并修改如下语句： [[div style="text-align: left"]] [[code type="css"]] [[module css]] :root {     --header-title-text: "标题";     --header-subtitle-text: "副标题";     --bg-img-mobile: url(https://url.com);     /* 移动端背景链接↑ */     --bg-img: url(https://url.com);     /* 电脑端背景链接↑ */     --logo-img: url(https://url.com);     /* 替换用logo链接↑ */     --logo-anim: hidden;/* ←若已替换logo链接，则此项填hidden，否则删去本行 */ } [[/module]] [[/code]] [[/div]] + 示例 [[include component:image-block name=http://scpsandboxcn.wikidot.com/local--files/collab:mayca/12_logo|caption=Site-CN-12|width=200px]] @@ @@ 可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。 ----- 标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。 [[collapsible show="标题" hide="标题"]] + 1 级标题 ++ 2 级标题 +++ 3 级标题 ++++ 4 级标题 +++++ 5 级标题 ++++++ 6 级标题 [[/collapsible]] @@ @@ [[tabview]] [[tab 分页]] 此为分页哒！ [[/tab]] [[tab 分页二号]] 喵喵喵~ 喵喵喵~ 喵喵喵~ [[/tab]] [[tab 爆裂魔法！]] 喵喵喵~喵喵喵~喵喵喵~ 喵喵喵~喵喵喵~喵喵喵~ 喵喵喵~喵喵喵~喵喵喵~ 喵喵喵~喵喵喵~喵喵喵~ 喵喵喵~喵喵喵~喵喵喵~ 喵喵喵~喵喵喵~喵喵喵~ 喵喵喵~喵喵喵~喵喵喵~ [[/tab]] [[/tabview]] > 这是一个引用块，在一行字的起始处加上“> ”来创建。 > > 更多文字 > ----- > 一条分割线 > >> 嵌套引用块 ||~ 这是 ||~ 表格 || || 你应该老早 || 就知道怎么 || |||| 做这个了吧喵 || [[=]] [[div_ class="fonts-display"]] 正文、[[span class="title-font"]]标题[[/span]]和[[span class="header-font"]]页眉[[/span]]字体为 [https://rsms.me/inter/ Inter] / [https://fonts.google.com/specimen/Noto+Sans+SC Noto Sans SC]。 [[span class="UI-font"]]用户界面字体为 [https://www.paratype.com/fonts/pt/pt-root-ui PT Root UI]。[[/span]] [[span class="mono-font"]]等宽字为 [https://www.recursive.design/ Recursive] / [https://fonts.google.com/specimen/Noto+Serif+SC Noto Serif SC]。[[/span]] [[/div]] [[/div]] [[/=]] ---- [[collapsible show="主题代码" hide="主题代码"]] [[code type="css"]] /* Broken Light     [2022 Wikidot Theme]     By AI_Mayca     Created for the SCP Foundation     Background image licensed under CC0*/ /* root值↓ */ :root, :root:lang(cn) {     --theme-base: "black-highlighter";     --theme-id: "broken-light";     --theme-name: "如影随光";     /* logo链接↓ */     --logo-image: ;     /* 背景图片链接↓ */     --background-img: var(--bg-img-mobile, url(https://scpsandboxcn.wdfiles.com/local--files/collab:mayca/碎光));     --background-imgr: var(--bg-img, url(https://scpsandboxcn.wdfiles.com/local--files/collab:mayca/碎光_r));     /* 版头标题↓ */     --header-title: var(--header-title-text, "Site-CN-12");     --header-subtitle: var(--header-subtitle-text, "常隐于影，行必有光");     /* 字体↓ */     --body-font: ;     --header-font: ;     --sub-header-font: ;     --page-title-font: ;     --title-font: ;     --mono-font: ;     --hdmemu-font: ;/* ←顶栏文字 */     --hdlist-font: ;/* ←顶栏列表 */     /* 主要颜色↓ */     --gray-monochrome: ;     --bright-accent: 224, 37, 58, 0.5;     --very-light-gray-monochrome: ;     --pale-gray-monochrome: ;     --dark-gray-monochrome: ;     --medium-accent: 125, 125, 125;     --dark-accent: 33, 33, 33;     --newpage-color: ;     --pale-accent: ;     --alt-accent: ;     --white-monochrome: 216, 216, 216;     --black-monochrome: var(--white-monochrome);     /* 杂项↓ */ } /* 主体↓ */ body {     color: rgb(var(--white-monochrome)); } body::before {     content: "";     width: 100vw;     height: 100vh;     background-color: rgb(var(--dark-accent));     background-image: var(--background-imgr);     background-size: cover;     background-repeat: no-repeat;     background-position: 0% 0%;     position: fixed;     top: 0;     left: 0;     z-index: -1; } @media (max-aspect-ratio: 1/1) {     body::before {         background-image: var(--background-img);     } } /* logo动画↓ */ #header-extra-div-1 {     display: block;     animation: rotateImg_A 5s ease-in-out;     background-image: var(--logo-img, url('https://scpsandboxcn.wikidot.com/local--files/collab:mayca/12_logo_A')); } #header-extra-div-1::before {     content: '';     animation: rotateImg_B 5s ease-in-out;     background-image: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/12_logo_B');     visibility: var(--logo-anim, visible); } #header-extra-div-1::after {     content: '';     animation: rotateImg_C 5s ease-in-out;     background-image: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/12_logo_C');     visibility: var(--logo-anim, visible); } #header-extra-div-2 {     display: block;     animation: rotateImg_D 5s ease-in-out;     background-image: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/12_logo_D');     visibility: var(--logo-anim, visible); } #header-extra-div-2::before {     content: '';     animation: rotateImg_E 5s ease-in-out;     background-image: url('http://scpsandboxcn.wikidot.com/local--files/collab:mayca/12_logo_E');     visibility: var(--logo-anim, visible); } #header-extra-div-1, #header-extra-div-1::before, #header-extra-div-1::after, #header-extra-div-2, #header-extra-div-2::before {     width: var(--final-header-height-on-desktop);     height: var(--final-header-height-on-desktop);     background-position: left 0.75rem top 1.1875rem;     background-size: auto calc(var(--header-height-on-desktop) - 2rem);     background-repeat: no-repeat;     transform-origin: calc(var(--header-height-on-desktop)/2 - 0.25rem) calc(var(--header-height-on-desktop)/2 + 0.1875rem);     position: absolute;     top: 0;     left: 0;     z-index: 11; /* background-color: rgba(255, 0, 0, 0.1); */ } @media only screen and (max-width:56.25rem) {     #header-extra-div-1, #header-extra-div-1::before, #header-extra-div-1::after, #header-extra-div-2, #header-extra-div-2::before {         width: var(--header-height-on-mobile);         height: var(--header-height-on-mobile);         --bg-posx-mb: calc(var(--header-height-on-mobile) - 0.75rem - var(--size));         --bg-posy-mb: calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);         background-position:  var(--bg-posx-mb) var(--bg-posy-mb);         background-size: var(--size), 100% var(--header-height-on-mobile);         transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));     } } @keyframes rotateImg_A {     0% {transform: rotate(90deg); opacity: 0}     30% {transform: rotate(90deg); opacity: 0}     45% {transform: rotate(0deg); opacity: 1}     100% {transform: rotate(0deg); opacity: 1} } @keyframes rotateImg_B {     0% {transform: rotate(90deg); opacity: 0}     32% {transform: rotate(90deg); opacity: 0}     47% {transform: rotate(0deg); opacity: 1}     100% {transform: rotate(0deg); opacity: 1} } @keyframes rotateImg_C {     0% {transform: rotate(90deg); opacity: 0}     34% {transform: rotate(90deg); opacity: 0}     49% {transform: rotate(0deg); opacity: 1}     100% {transform: rotate(0deg); opacity: 1} } @keyframes rotateImg_D {     0% {opacity: 0}     36% {opacity: 0}     51% {opacity: 1}     100% {opacity: 1} } @keyframes rotateImg_E {     0% {background-size: 0 0; background-position: calc((var(--header-height-on-desktop) - 2rem)/2 + 0.75rem) calc((var(--header-height-on-desktop) - 2rem)/2 + 1.1875rem); opacity: 0}     36% {background-size: 0 0; background-position: calc((var(--header-height-on-desktop) - 2rem)/2 + 0.75rem) calc((var(--header-height-on-desktop) - 2rem)/2 + 1.1875rem); opacity: 0}     51% {background-size: calc(var(--header-height-on-desktop) - 2rem) calc(var(--header-height-on-desktop) - 2rem); background-position: 0.75rem 1.1875rem; opacity: 1}     100% {background-size: calc(var(--header-height-on-desktop) - 2rem) calc(var(--header-height-on-desktop) - 2rem); background-position: 0.75rem 1.1875rem; opacity: 1} } @media only screen and (max-width:56.25rem) {     @keyframes rotateImg_A {         0% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform: rotate(90deg); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}         30% {transform: rotate(90deg); opacity: 0}         45% {transform: rotate(0deg); opacity: 1}         51% {background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb))}         66% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}         80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}         100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); transform: rotate(0deg); opacity: 1}     }     @keyframes rotateImg_B {         0% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform: rotate(90deg); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}         32% {transform: rotate(90deg); opacity: 0}         47% {transform: rotate(0deg); opacity: 1}         51% {background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb))}         66% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}         80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}         100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); transform: rotate(0deg); opacity: 1}     }     @keyframes rotateImg_C {         0% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform: rotate(90deg); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}         34% {transform: rotate(90deg); opacity: 0}         49% {transform: rotate(0deg); opacity: 1}         51% {background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb))}         66% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}         80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}         100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); transform: rotate(0deg); opacity: 1}     }     @keyframes rotateImg_D {         0% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}         36% {opacity: 0}         51% {background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 1}         66% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}         80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}         100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); opacity: 1}     }     @keyframes rotateImg_E {         0% {background-size: 0 0; background-position: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}         36% {background-size: 0 0; background-position: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}         51% {background-size: calc(var(--size) *2/3) calc(var(--size) * 2/3); background-position: calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); opacity: 1}         66% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb))}         80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}         100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}     } } #header h1 {     animation:anim_h1 5s ease-in-out; } #header h2 {     animation:anim_h2 5s ease-in-out; } @keyframes anim_h1 {     0% {opacity: 0}     58% {margin-left: -50px; opacity: 0}     73% {margin-left: 0; opacity: 1}     100% {opacity: 1} } @keyframes anim_h2 {     0% {opacity: 0}     63% {margin-left: -50px; opacity: 0}     78% {margin-left: 0; opacity: 1}     100% {opacity: 1} } /* 正文部分↓ */ #page-content {     background: rgba(var(--dark-accent), 0.8); } /* 侧边栏↓ */ #side-bar {     background: rgba(var(--dark-accent), 0.9) !important; } #edit-page-textarea {     background: transparent !important; } .side-block {     background: rgba(var(--dark-accent), 0.6) !important; } @media screen {     .side-block {         background: rgba(var(--dark-accent), 0.8) !important;     } } /* 顶栏↓ */ #top-bar {     background: rgba(var(--dark-accent), 0.8) !important; } /* 账户样式↓ */ #account-options {     background: rgba(var(--dark-accent), 0.8) !important; } #login-status {     background: rgba(var(--dark-accent), 0.8); } @media screen {     #login-status {         background: transparent;     }     #login-status:hover {         background: rgba(var(--dark-accent), 0.8);     } } /* 评分栏↓ */ .page-rate-widget-box {     background: rgba(var(--dark-accent), 0.5); } .rate-box-with-credit-button {     background: rgba(var(--dark-accent), 0.5) !important; } /* 著作信息块↓ */ #u-credit-view .modalbox {     background: rgba(var(--dark-accent), 0.8) !important; } /* 插图块↓ */ .scp-image-block {     background: rgba(var(--dark-accent), 0.5);     border: none !important;     box-shadow: none !important; } .scp-image-caption {     border-bottom: solid 2px rgba(var(--bright-accent));     box-shadow: none !important; } /* 折叠动画↓ */ #page-content .collapsible-block-unfolded .collapsible-block-content {     top: 0;     overflow: hidden;     transform-origin: 0 0; } #page-content .collapsible-block-unfolded .collapsible-block-content[style*="none"] {/* 展开 */     display: block !important;     animation: anim-appear 0.5s ease-in-out 0s 1 both; } #page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {     border-bottom: solid 2px rgba(var(--bright-accent)) !important;     background: rgba(var(--dark-accent), 0.7) !important;     padding: 0.5rem 1rem;     width: min-content;     white-space: nowrap;     overflow: hidden;     margin: auto;     margin-bottom: 1rem; } #page-content .collapsible-block-folded .collapsible-block-link::before {     content: "▷ "; } #page-content .collapsible-block-unfolded .collapsible-block-link::before {     content: "▽ "; } #page-content .collapsible-block-link {     text-decoration: none;     color: rgb(var(--white-monochrome));     font-weight: bold; } /* tab动画↓ */ .yui-navset {     background: rgba(var(--dark-accent), 0.7); } .yui-navset .yui-content > div {     display: block;     top: 0;     overflow: hidden;     transform-origin: 0 0; } #page-content .yui-navset .yui-content > div[style*="block"] {     display: block !important;     animation: anim-appear 0.5s ease-in-out 0.5s 1 both; } #page-content .yui-navset .yui-content > div[style*="none"] {     display: block !important;     animation: anim-disappear 0.5s ease-in-out 0s 1 both; } @keyframes anim-disappear {     0% { max-height: 9999rem; opacity: 1; }     1% { max-height: 100vh; }     100% { max-height: 0; opacity: 0; } } @keyframes anim-appear {     0% { max-height: 0; opacity: 0; }     99% { max-height: 100vh; }     100% { max-height: 9999rem; opacity: 1; } } /* 引用块↓ */ blockquote {     background: rgba(var(--dark-accent), 0.8); } /* 表格↓ */ .wiki-content-table>tbody>tr>th {     background: rgba(var(--dark-accent), 0.4) !important; } .wiki-content-table>tbody>tr>td {     background: transparent !important; } /* tags↓ */ .page-tags::before {     background: rgba(var(--dark-accent), 0.8) !important; } .page-tags span {     background: rgba(var(--bright-accent)); } /* 底边栏↓ */ .btn-default:not(.rateup, .ratedown, .cancel) {     background: rgba(var(--dark-accent), 0.8) !important; } /* 编辑栏↓ */ .btn-danger, .btn-info, .btn-primary, .btn-warning {     background: rgba(var(--dark-accent), 0.8) !important; } /* 底部文字↓ */ #footer {     background: rgba(var(--dark-accent), 0.8) !important; } /* 杂项↓ */ .text, #edit-page-form>table>tbody>tr>td, #wd-editor-toolbar-panel, .edit-page-bottomtable>tbody>tr>td, .edit-page-bottomtable>tbody>tr>td>div, .edit-page-bottomtable>tbody>tr>td>div::before, .wiki-content-table, #edit-page-textarea {     background: rgba(var(--dark-accent), 0.8) !important; } .hl-code, .hl-brackets, .hl-identifier {     color: rgb(var(--white-monochrome)); } ::selection {     background: rgba(var(--bright-accent));/* ←指针选中部分颜色 */ } .owindow, .modal-header, #action-area {     background: rgba(var(--dark-accent), 0.8) !important; } #page-content a:not(.collapsible-block-link, .page-rate-widget-box span a, .yui-navset ul li a, .footnote-footer a):link, #action-area div a:link {     color: rgb(var(--bright-accent)) !important; } #page-content a:not(.collapsible-block-link, .page-rate-widget-box span a, .yui-navset ul li a, .footnote-footer a):visited, #action-area div a:visited {     color: rgba(255, 250, 250, 0.8) !important; } #main-content {     --footnotes-footer-num-color: var(--medium-accent); } .content {     background-color: rgba(var(--dark-accent), 0.9); } [[/code]] [[/collapsible]] [[/iftags]] [[module cSs]] @import url("https://scp-wiki-cn.wikidot.com/theme:broken-light/code/2"); [[/module]]