如影随光主题版式

[[div style="border: 1px solid #ddd; padding: 1em; margin: 1em; text-align: center;"]]

blBHL

评分：

评分模块与著作信息模块：

著作信息

ai_mayca
如影随光 BHL主题版式

使用方法

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

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:broken-light]]

主题颜色

WikiJump include 未展开： 本地数据库中没有当前版本（:scp-wiki:component:theme-squares）

自定义

若你想改变标题与背景，或替换12站logo动画....

在 [[include]] 后加入并修改如下语句：

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]]

示例

Site-CN-12

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

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

标题标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

分页二号

爆裂魔法！

此为分页哒！

这是一个引用块，在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块

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

正文、标题和页眉字体为 Inter / Noto Sans SC。
用户界面字体为 PT Root UI。
等宽字为 Recursive / Noto Serif SC。

[[/div]]

主题代码主题代码

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);
}

原创版式

页面版本：⁨0⁩, 最后编辑于: ⁨2022/10/4 07:31:03⁩ (⁨⁨1443⁩ 日前⁩), 现时评分: 34

历史附件 + 选项

SCP基金会中文分部