如影随光 主题版式
评分模块与著作信息模块:
使用方法
注意:这是一个基于黑色标记笔的主题版式。若你想使用此版式,你还需要导入黑色标记笔版式。点击这里了解更多。
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:broken-light]]
主题颜色
深黑--dark-accent(33, 33, 33)
亮红--bright-accent(224, 37, 58, 0.5)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
中灰--medium-accent(125, 125, 125)
淡白--white-monochrome(216, 216, 216)
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$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}
自定义
若你想改变标题与背景,或替换12站logo动画….
在 [[include]] 后加入并修改如下语句:
[[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 个加号“+”来创建。
此为分页哒!
喵喵喵~
喵喵喵~
喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
喵喵喵~喵喵喵~喵喵喵~
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧喵 |
/* 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); }