:root { --lh-red: #c0392b; --lh-blue: #2980b9; --lh-green: #27ae60; --lh-dark-green: #16a085; --lh-purple: #8e44ad; --lh-orange: #e67e22; --lh-yellow: #f1c40f; --lh-paper-bg: 255, 251, 240; --lh-string-color: 192, 57, 43; --lh-book-color: var(--gray-monochrome); --lh-tape-color: 90,90,90,0.3; --lh-white-bg: 249,249,249; --lh-dark-bg: 50, 50, 50; --lh-highlighter: var(--bright-accent); --lh-border-color: var(--gray-monochrome); --lh-wiki-note-color: var(--bright-accent) } /** * 旧代码合集 * 为了向下兼容而保留 */ .grid-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.grid-container,.grid-container [class*=grid]{box-sizing:border-box}[class*=grid]{padding:5px}.grid{width:100%}.grid-large{width:75%}.grid-big{width:50%}.grid-medium{width:33.33%}.grid-small{width:25%}@media screen and (min-width:768px){.wd-grid-large{width:75%}.wd-grid,.wd-grid-big{width:50%}.wd-grid-medium{width:33.33%}.wd-grid-small{width:25%}}.text-hover-hide{opacity:0;transition:opacity .3s}.text-hover-hide:hover{opacity:1}.text-block-hide{background:rgb(var(--black-monochrome));color:rgb(var(--black-monochrome));transition:background .3s}.text-block-hide:hover{background:0 0}.text-blur-hide,.text-blur-hover-hide{filter:blur(.3rem);-webkit-filter:blur(.3rem) transition: blur .3s}.text-blur-hover-hide:hover{filter:blur(0);-webkit-filter:blur(0)}.lyric-box{text-align:center;font-size:1.05rem;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.lyric-box p{margin:1.5em auto}.lyric-box.with-bigger-line p{margin:3em auto} /** * 便签纸 * notepaper */ .notepaper { background: linear-gradient(rgb(var(--lh-paper-bg)) 95%, #ddd 0); line-height: 2em; background-size: 100% 2em; background-attachment: local; border: 2em solid rgb(var(--lh-paper-bg)); box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.2); padding: 0; margin: 1em auto; box-sizing: border-box; position: relative } .notepaper p { margin: 0; font-size: 1.05rem; letter-spacing: 0.1rem; line-height: inherit } .notepaper.narrow, .notepaper.wide { width: 90% } @media screen and (min-width:768px){ .notepaper.narrow { width: 50% } .notepaper.wide { width: 75% } } .notepaper.tight { border-width: 1rem; border-left-width: 1.2rem; border-right-width: 1.2rem; line-height: 1.8em; background-size: 100% 1.8em; font-size: 13px } .notepaper.with-string::before { content: ''; width: 0.5em; height: 6rem; background: rgb(var(--lh-string-color)); top: -2rem; right: -1rem; display: block; position: absolute; box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2); clip-path: polygon(-100% -100%,100% 0%,100% 100%,50% 98%,0% 100%); } .notepaper.with-tape::before { content: ''; border: 1px solid #ddd; background: rgba(var(--lh-tape-color)); width: 1.5em; height: 4em; transform: rotate(45deg); display: block; position: absolute; top: -3em; left: -1.8em } .notepaper.tight.with-string::before { top: -1rem; right: -0.25rem; } .notepaper.tight.with-tape::before { top: -2.5em; left: -1.3em } .notepaper.page { min-height: 36em; counter-increment: page; display: flex; flex-direction: column; justify-content: space-between } @media screen and (min-width:768px){ .notepaper.page { width: 70% } } .notepaper.page:after { content: counter(page); display: block; text-align: center } .notepaper-group { counter-reset: page; } .book-pattern { display: flex; flex-wrap: wrap; flex-direction: row } .book-pattern .notepaper.page:not(.notepaper > .notepaper) { width: 100% } @media screen and (min-width: 768px) { .book-pattern .notepaper.page:not(.notepaper > .notepaper) { width: 50% } } .book-wrapper { background: rgb(var(--lh-book-color)); padding: 0.5rem; box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.2); border-radius: 5px; margin: 1rem auto } @media screen and (min-width: 768px) { .book-wrapper .notepaper { margin: 0 } } /** * 文字修饰 */ .text-highlighted { position: relative } .text-highlighted::before { content: ""; position: absolute; height: 0.9em; bottom: 2px; left: -2px; width: 105%; z-index: -1; background-color: rgb(var(--lh-highlighter)); opacity: .6; transform: skew(-15deg); transition: opacity .2s ease; border-radius: 3px 8px 10px 6px; transition: 0.1s ease background-color; } .text-underlined { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: rgb(var(--lh-highlighter)) } .text-wavy { text-decoration: underline wavy; text-underline-offset: 4px; text-decoration-color: rgb(var(--lh-highlighter)) } .text-circled, .text-squared { display: inline-block; border: 2px solid rgb(var(--lh-highlighter)); border-radius: 100%; box-sizing: border-box } .text-squared { border-radius: 0 } .text-shadow { text-shadow: 0.075em 0.075em 0 rgb(var(--lh-highlighter)) } .text-highlighted.td-red::before { background: var(--lh-red) } .text-circled.td-red, .text-squared.td-red { border-color: var(--lh-red) } .text-underlined.td-red, .text-wavy.td-red { text-decoration-color: var(--lh-red) } .text-highlighted.td-blue::before { background: var(--lh-blue) } .text-circled.td-blue, .text-squared.td-blue { border-color: var(--lh-blue) } .text-underlined.td-blue, .text-wavy.td-blue { text-decoration-color: var(--lh-blue) } .text-highlighted.td-green::before { background: var(--lh-green) } .text-circled.td-green, .text-squared.td-green { border-color: var(--lh-green) } .text-underlined.td-green, .text-wavy.td-green { text-decoration-color: var(--lh-green) } .text-highlighted.td-darkgreen::before { background: var(--lh-dark-green) } .text-circled.td-darkgreen, .text-squared.td-darkgreen { border-color: var(--lh-dark-green) } .text-underlined.td-darkgreen, .text-wavy.td-darkgreen { text-decoration-color: var(--lh-dark-green) } .text-highlighted.td-purple::before { background: var(--lh-purple) } .text-circled.td-purple, .text-squared.td-purple { border-color: var(--lh-purple) } .text-underlined.td-purple, .text-wavy.td-purple { text-decoration-color: var(--lh-purple) } .text-highlighted.td-yellow::before { background: var(--lh-yellow) } .text-circled.td-yellow, .text-squared.td-yellow { border-color: var(--lh-yellow) } .text-underlined.td-yellow, .text-wavy.td-yellow { text-decoration-color: var(--lh-yellow) } .text-highlighted.td-orange::before { background: var(--lh-orange) } .text-circled.td-orange, .text-squared.td-orange { border-color: var(--lh-orange) } .text-underlined.td-orange, .text-wavy.td-orange { text-decoration-color: var(--lh-orange) } /* 隐藏文字 */ .text-blank { color: rgba(0,0,0,0) } .text-block { background: rgb(var(--black-monochrome)); color: rgb(var(--black-monochrome)); } .text-blur { filter: blur(0.3em); -webkit-filter: blur(0.3em) } .text-hoverback, .text-selectback { transition-duration: 0.3s; transition-property: background, transform, color } .text-blank.text-hoverback:hover, .text-blank.text-selectback::selection, .text-blank.text-selectback *::selection { color: rgb(var(--black-monochrome)) } .text-block.text-hoverback:hover { background: transparent!important } .text-block.text-selectback::selection, .text-block.text-selectback *::selection { color: rgb(var(--white-monochrome, 255, 255, 255)) } .text-blur.text-hoverback:hover { filter: blur(0)!important; -webkit-filter: blur(0)!important } /** * 附加项 */ .with-border, .with-box-style { border: 1px solid rgb(var(--bright-accent)) } .with-border-dark { border: 1px solid rgb(var(--black-monochrome)) } .with-border-light { border: 1px solid rgb(var(--white-monochrome)) } .with-border-thick { border-width: 2px } .with-shadow-sm { box-shadow: 0 0 0.1em rgba(0,0,0,0.2) } .with-shadow { box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2) } .with-shadow-lg { box-shadow: 0 0.15em 0.3em rgba(0,0,0,0.2) } .with-shadow-xl { box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.2) } .with-shadow-xxl { box-shadow: 0 0.25em 0.8em rgba(0,0,0,0.2) } .with-padding, .with-box-style { padding: 0.25em 1em } .with-p-sm { padding: 0.125em 0.5em } .with-p-lg { padding: 0.5em 2em } .with-margin, .with-box-style { margin: 1em auto } .with-m-sm { margin: 0.5em auto } .with-m-lg { margin: 2em auto } .with-narrow-width { width: 90%!important; margin-left: auto; margin-right: auto } @media screen and (min-width: 768px) { .with-narrow-width { width: 75%!important } } [class*="with-bg-"], [class*="with-bg-"] h1 { color: #fff!important } .with-bg-red { background: var(--lh-red)!important } .with-bg-blue { background: var(--lh-blue)!important } .with-bg-green { background: var(--lh-green)!important } .with-bg-darkgreen { background: var(--lh-dark-green)!important } .with-bg-yellow { background: var(--lh-yellow)!important } .with-bg-orange { background: var(--lh-orange)!important } .with-bg-purple { background: var(--lh-purple)!important } /** * 删除类 */ .offwith-shadow { box-shadow: none!important } .offwith-border { border: none!important } .offwith-padding, .offwith-pam { padding: 0!important } .offwith-margin, .offwith-pam { margin: 0!important } .offwith-width-limit { width: auto!important; margin-left: auto!important; margin-right: auto!important } div[class*="grider"].offwith-grid-gap { grid-gap: 0!important } /** * 网格布局 */ /* Gridder 容器 */ div[class*="gridder"] { display: grid; box-sizing: border-box; grid-gap: 1rem; padding: 0 } div[class*="gridder"] * { box-sizing: border-box } .gridder, .gridder-col-2 { grid-template-columns: 1fr 1fr; } .gridder-col-3 { grid-template-columns: repeat(3, 1fr); } .gridder-col-4 { grid-template-columns: repeat(4, 1fr); } @media screen and (min-width: 768px) { .pc-gridder, .pc-gridder-col-2 { grid-template-columns: 1fr 1fr; } .pc-gridder-col-3 { grid-template-columns: repeat(3, 1fr); } .pc-gridder-col-4 { grid-template-columns: repeat(4, 1fr); } } .spanner, .spanner-2 { grid-column-start: span 2; } .spanner-3 { grid-column-start: span 3; } /** * 告示组件 */ .signblock, .signblock-dark, .signblock-warn { margin: 1rem auto; box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.4); background: rgb(var(--lh-white-bg)); font-size: 1.05rem; padding: 2rem } @media screen and (min-width: 768px) { .signblock, .signblock-dark, .signblock-warn { width: 75% } } .signblock-dark, .signblock-dark h1 { background: rgb(var(--lh-dark-bg)); color: #fff } .signblock-warn, .signblock-warn h1 { background: var(--lh-red); color: #fff } .signblock h1, .signblock-dark h1, .signblock-warn h1 { text-align: center; font-size: 2rem; margin: 0; font-weight: 700 } .signblock-img { display: flex; flex-direction: row; justify-content: center } .signblock-img img { width: 8em } .signblock-footer { font-size: 0.9em; text-align: center; margin: 0.5rem 0; font-weight: bolder; display: block } /** * 报告 */ .reportblock, .reportblock-dark { border: 2px solid rgb(var(--lh-border-color)); box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3); background: rgb(var(--white-monochrome)); padding: 0.8rem 1.5rem; padding-bottom: 0.4rem; margin: 1.5rem auto; margin-bottom: 1rem; position: relative } .reportblock hr, .reportblock-dark hr { background-color: rgb(var(--lh-border-color)); margin-left: -1.5rem; margin-right: -1.5rem } .reportblock h1:first-child, .reportblock-dark h1:first-child { position: absolute; top: -1rem; left: 1.5rem; font-size: 110%; font-weight: 600; background: rgb(var(--lh-border-color)); color: #fff; padding: 0.2rem 0.5rem; margin: 0; } .reportblock-dark, .reportblock-dark h1 { border-color: rgb(var(--lh-white-bg)); background: rgb(var(--lh-dark-bg)); color: #fff } .reportblock-dark hr { background-color: rgb(var(--lh-white-bg)); } /* 更好的折叠框 */ .bettercollap { margin: 1em 0; } .bettercollap .collapsible-block { width: auto; overflow: hidden; border: 1px solid rgb(var(--lh-border-color)) } .bettercollap .collapsible-block-content, .bettercollap .collapsible-block-link { background: rgb(var(--white-monochrome)); padding: 0.5em } .bettercollap .collapsible-block-content { padding-left: 1em; padding-right: 1em } .bettercollap .collapsible-block-link { color: rgb(var(--lh-border-color)); background: rgb(var(--white-monochrome)); transition: .3s; display: block; } .bettercollap .collapsible-block-link:hover, .bettercollap .collapsible-block-unfolded .collapsible-block-link, .styledcollap.bettercollap .collapsible-block-link { color: rgb(var(--white-monochrome)); background: rgb(var(--lh-border-color))!important; text-decoration: none } .bettercollap .collapsible-block-link:hover a { color: rgb(var(--white-monochrome)) } .bettercollap .collapsible-block-link::before { content: "\25BC"; display: inline-block; margin-right: 0.5em; transform: rotate(-90deg) scale(0.9) } .bettercollap .collapsible-block-unfolded .collapsible-block-link::before { transform: rotate(0) scale(0.9) } .bettercollap .collapsible-block + .collapsible-block { border-top: none } .styledcollap.bettercollap .collapsible-block { border-radius: 2px; box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3) } .styledcollap.bettercollap .collapsible-block-content { background-color: rgb(var(--pale-gray-monochrome)); border-width: 3px } .styledcollap.bettercollap .collapsible-block-link:hover { background: rgba(var(--lh-border-color),0.95)!important; } /** * 提示框 */ .infoblock { color: #f1f1f1; font-weight: bold; background: #424242; padding: 5px 5px 5px 5px; border-radius: 4px; margin: -0.5rem 0 1rem 0; display: block; width: fit-content; padding-right: 25px; } .infoblock::before { content: "ⓘ " } /** * 单页迭代 */ .offset-page:not(:target), .offset-page:target ~ div#u-default-page { display: none } .offset-page:target { display: block }
项目编号
BioLab
IETS
N/A
状态
完成
生物实验室版式由 Eltrac 制作,基于 EstrellaYoshte 制作的的纸堆版式,代码参考了 GaplouelPew does not match any existing user name 的 Sigma-9 阈限版式,折叠侧栏由 Lt Flops 制作。
此版式为原创团体 E.B.A.(实体生物学家协会)创作,用于 E.B.A. 发现或创造的实体档案,或团体机密文件。
在你的作品开头添加以下代码以应用此版式:
[[include :backrooms-wiki-cn:theme:dark-eba]]
若想更改为折叠侧栏可使用以下代码:
[[include :backrooms-wiki-cn:theme:dark-eba |toggle-sidebar=true]]
等一等,先别急。要使用生物实验室版式,你还需要在作品开头添加以下代码。它们构成了版头上诸如项目编号等信息。若使用以下代码,版头格式会发生错乱。
[[div class="logo"]]
[[image http://rzx-story.wdfiles.com/local--files/fjdz/eba]]
[[/div]]
[[div class="header-container"]]
[[div class="text-item"]]
[[size 90%]]##grey|**项目编号**##[[/size]]
[[size 220%]]**数字编号**[[/size]]
[[/div]]
[[div class="text-item"]]
[[size 90%]]##grey|**IETS**##[[/size]]
[[size 220%]]**威胁和智能等级**[[/size]]
[[/div]]
[[div class="text-item"]]
[[size 90%]]##grey|**状态**##[[/size]]
[[size 220%]]**项目进行的状态**[[/size]]
[[/div]]
[[div class="grid-item"]]
[[include component:image-block name=图片链接|caption=图片说明|width=300px|align=center]]
[[/div]]
[[/div]]
[[div class="textbox"]]
显示在图片左侧的文本,若没有这一项,版头图片的左侧会留下空白。
[[/div]]
若需要自定义版头信息,请参考纸堆版式。
版式示例
可以使用五个连字符"-----" 创建水平线,如果未将其放置在任何内容(例如引用块)中,则可以扩展到整个页面。分隔本文档各部分的行是水平线。
可以通过在行首加上1-6个之间的"+"字符来创建标题。
这是一个分页。
看看我,我这有更多文字!
可真是古朴风格。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个长分页,它能容纳很多字符。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套块引用1
这是一个 | 表格 |
---|---|
你应该早就 | 知道怎么 |
制作它了吧 |
脚2
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起来是
怎么运作
包括那些不存在
以及存在的链接!
还有特殊警告
或者风险更低的
或者安全的!
自定义 DIV
[[div class="lightblock"]]
亮色 DIV
[[/div]]
[[div class="darkblock"]]
暗色 DIV
[[/div]]
[[div class="styled-quote"]]
亮色引用块
[[/div]]
[[div class="dark-styled-quote"]]
暗色引用块
[[/div]]
[[div class="glassblock"]]
载玻片(这很生物学)
[[/div]]
[[div class="glassblock glassblock-clear"]]
洗干净的载玻片(确信)
[[/div]]
[[note]]
[[/note]]
文档标题
[[div class="paper"]]
+* 文档标题
这是一张伪 A4 纸,用于表现某些文件
嘿,你看他还有页码
[[/div]]
[[div class="paper-group"]]
[[div class="paper"]]
要想要页码连贯,就需要把纸张放进一个纸张组里
就像这样,这就是这一组的第一页
[[/div]]
[[div class="paper"]]
那么我就是第二页
[[/div]]
[[/div]]
兼容版式的组件
版式对以下组件做了样式上的调整以兼容版式设计,可以放心使用,但这并不代表其他组件不能使用,只是可能会出现一些问题。
排版工具组
由 Eltrac 制作的排版工具组,版式内置了这个组件,所以你不需要额外引入。
这是一个灰色的便签纸
就和普通的便签纸没什么区别
但它是灰色的
目的是为了和黑色背景不冲突
不过套有书衣的便签纸并不会变成灰色
否则就太怪了不是吗
报告
研究人员:Eltrac
报告时间:2023/1/19
微调了报告块的样式,但是并没有修改亮色报告块。所以在同时时候生物实验室版式和报告块时,请添加 reportblock-dark 类。
也就是:
[[div class="reportblock reportblock-dark"]]
+* 标题
**研究人员:**XXX
**报告时间:**XXX
------
正文内容
------
结尾内容
[[/div]]
总结:非常坏版式,向下投票
常见问题
问题:为什么我看不到版式?
解答:版式的 CSS 代码是通过 wikidot 的 wdfiles.com 这个域名引入的,中文维基所用的 backrooms-wiki-cn.wdfiles.com 被某些浏览器/运营商拦截了,所以可能看不到。
解决方案:魔法升天魏 屁 恩
问题:为什么我看到的版式和别人看到的不一样?或者说和文档描述的不一样?
解答:该版式使用了 :is() 伪类,部分非主流浏览器(尤其是移动端自带浏览器)并不支持这个选择器,就导致部分样式无法被浏览器渲染。
解决方案:更换现代浏览器,推荐 Chrome 和 Firefox。
问题:为什么我的内容跑到版头上了?
解答:版头高度是固定的,需要加上版式要求的 header-container 才可以。
解决方案:重读一遍本文开头。
问题:这个版式是 E.B.A. 专属的吗?我可以用在与 E.B.A. 无关的作品里吗?
解答:原则上不行,但版式的设计其实是非常“万精油”的,所以如果你想要创作不与任何团体相关的作品,可以使用该版式,只要修改标题和 logo 就好了。不过,我仍然希望你修改版式的配色,让它看起来和原版式不那么像。
问题:为什么我复制了其他版式修改 LOGO 的代码,LOGO 没有变化?
解答:生物实验室版式没有使用黑色标记笔版式的 —logo-image 变量,故不能像其他大部分版式一样通过修改 CSS 来改变 LOGO,但是你仍然可以使用 —header-title 和 —header-subtitle 变量来修改标题与副标题。
解决方案:记得我让你在开头添加的一长串代码吗?找到里面的这一段:
[[div class="logo"]]
[[image http://rzx-story.wdfiles.com/local--files/fjdz/eba]]
[[/div]]
将画线部分改为你的图片 url 即可。值得注意的是,这张图片会被自动反色,也就是会将黑色图片变成白色图片,如果你不想要这样,可以加入以下代码:
[[module CSS]]
#main-content .logo { filter: invert(0) }
[[/module]]
问题:这个折叠框还行,但貌似不太适合作者信息的折叠框?
解答:和生命不息版式一样,生物实验室版式内置了一个 no-style 类,可以用来消除折叠框的特殊样式。
解决方案:使用著作信息评分模块,或者在添加作者信息时,加入以下代码。
[[div class="no-style" style="text-align:right"]]
[[collapsible show="作者信息" hide="隐藏作者信息"]]
[[*user 你的用户名!]]
[[/collapsible]]
[[/div]]
:root { --header-title: "E.B.A."; --header-subtitle: "为后室注入新的生机"; /* 版式自定义变量 */ --header-bg: #272423; --body-bg: #0F0F05; --block-bg: #333; --shadow-color: rgba(0,0,0,0.4); --block-border-color: #666; /* 兼容排版工具组 */ --lh-book-color: 51,51,51; --lh-string-color: 194, 54, 22 } /* 版头 */ body { background-image: linear-gradient( to bottom, #201715, var(--header-bg), var(--header-bg) var(--top-layer-height), #111 10px, var(--body-bg) calc(var(--top-layer-height) + var(--top-layer-shadow)), var(--body-bg) calc(var(--top-layer-height) + var(--top-layer-shadow)), #000 100%); } #header, body, #header h1 a::before, #header h2::before { color: #fefefe } #header #top-bar, #header #top-bar a { color: #fdfdfd; } #main-content .logo { filter: invert(100%) } @media screen and (max-width: 767px) { #main-content .logo { opacity: 0.5 } } .textbox { margin-top: 1em } @media screen and (max-width:: 767px) { .textbox { width: 100% } } /* 侧边栏 */ #side-bar { z-index: 20 } #side-bar .side-block { background: rgba(0,0,0,0.1); box-shadow: 0px 0px 7px var(--shadow-color); padding: 0 } #side-bar .heading { background: var(--header-bg); text-align: center; color: #fff; border-bottom: 1px solid var(--block-border-color); font-size: 18px; padding: 0.2em 0; } #side-bar a { color: #fff } #side-bar .heading:not(:first-child) { margin: 0; } #side-bar .heading + .heading { border-top: 0; } #side-bar .side-block.media, #side-bar .heading { border: 2px solid var(--block-border-color) } #side-bar .side-block.media img { filter: invert(100%); display: inline-block; width: 50%; margin: 0 } /* 修复纸堆版式原生侧边栏 */ @media (max-width: 767px) { #top-bar .open-menu a { border: 0.2em solid var(--block-border-color); background-color: var(--block-bg); border-radius: 3em; color: #fff; } #top-bar .open-menu a:hover { box-shadow: 0 0 0.25rem var(--shadow-color) } #side-bar { background-color: var(--header-bg) } #side-bar .heading { margin-left: 0 } } /* 图片框 */ .scp-image-block { border: solid 8px var(--block-bg); box-shadow: 0px 0px 5px var(--shadow-color) } .scp-image-block .scp-image-caption { background-color: var(--block-bg); border-top: solid 4px var(--block-bg); color: #fff; } .scp-image-block img { background-color: #eee } .scp-image-block.block-right { margin: 0 0 1em 1em } /* 链接 */ #main-content a { transition: color .3s; color: #ddd } #page-content a:not(.collapsible-block a, .yui-navset a, .footnotes-footer a, .page-rate-widget-box a, .creditRate a, a[href*="javascript:;"]) { text-decoration: underline; text-underline-offset: 4px; } #main-content a:visited { color: #cacaca } #main-content a:hover, #main-content span.printuser a:hover { color: #fdfdfd } #main-content a.newpage { color: #c0392b } /* 代码块 */ #main-content .code { background-color: #ddd; color: #000; filter: invert(1); border: 1px dashed var(--block-border-color); box-shadow: none; } /* 引用块和自定义 div */ .lightblock, .darkblock, .styled-quote, .dark-styled-quote, .glassblock, blockquote, .blockquote { /* 自定义 div 块 常规属性 */ padding: 0.25rem 1rem; margin: 0.5rem auto } :is(.lightblock, .darkblock, .styled-quote, .dark-styled-quote, .glassblock, blockquote, .blockquote) hr { margin: 1em -1rem; background-color: var(--block-border-color) } #main-content blockquote, #main-content .blockquote { background-color: var(--block-bg); border: 1px solid var(--block-border-color); box-shadow: none; border-width: 2px; margin: 0.5rem 40px } @media screen and (max-width: 767px) { #main-content blockquote, #main-content .blockquote { margin-left: 0; margin-right: 0 } } .lightblock, .darkblock { border: 2px solid var(--block-bg) } .lightblock, .styled-quote { background-color: var(--block-bg) } .darkblock, .dark-styled-quote { background-color: #000 } .styled-quote, .dark-styled-quote { box-shadow: 0 0 0.5rem var(--shadow-color); border: 1px solid var(--block-border-color) } .styled-quote { border-left: 0.75em solid var(--header-bg) } .dark-styled-quote { border-left: 0.75em solid var(--block-bg) } .glassblock { border: 4px solid var(--block-bg); border-radius: 4px; background-color: rgba(0,0,0,0.25); position: relative } .glassblock::before { content: ''; filter: blur(4px); position: absolute; top: 0; left: 0; bottom: 0; right:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%2358565b' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 4em; z-index: -10 } .glassblock.glassblock-clear::before { filter: blur(0); } /* 纸张 div */ #main-content .paper { box-shadow: 0.05rem 0.15rem 0.38rem rgba(0,0,0,.3); padding: 2em; background: #e6e6ee; min-height: 42em; position: relative; margin: 1em auto; color: #000 } .paper-group { counter-reset: paper } .paper::after { content: counter(paper); display: block; text-align: center; color: #aaa; position: absolute; bottom: 1em; left: 0; right: 0; font-weight: bolder } @media screen and (min-width: 56.25rem) { .paper { width: 65%; padding: 2em } } #page-content div.paper h1 { font-size: 180%; border-bottom: 2px solid #aaa; margin-top: 0; color: #222 } /* note 块 */ div.wiki-note { border: none; background-image: linear-gradient(to bottom, #f39c12 45%, #f1c40f); border-radius: 0 0 20% 5%; color: #666; max-width: 300px; padding: 1em 1em 2em 1em; margin: 1em 10em; position: relative } @media screen and (max-width: 767px) { div.wiki-note { margin: 0.5em 5em } } div.wiki-note::before { content: ''; width: 30px; height: 30px; border-radius: 100%; background-image: radial-gradient(#c0392b, #e74c3c); box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.4); position: absolute; top: -10px; left: -10px } /* 兼容排版工具组 */ .notepaper:not(.book-wrapper *) { border-color: #666; background-image: linear-gradient(#666 95%, #bbb 0); } #main-content .notepaper p { line-height: 2em; font-size: 0.94rem } #main-content .reportblock :is(blockquote, .blockquote, h1, h2, h3, h4, h5, h6, p, .code) { margin-left: 0; margin-right: 0 } #main-content .reportblock { padding: 0.25rem 1.5rem; padding-top: 0.5rem } #main-content .reportblock h1 { left: 1.5rem; border: 1px solid var(--block-border-color); font-size: 120%; padding: 0.2em 0.5em } #main-content .reportblock hr { border-color: var(--block-border-color); margin: 1em -1.5rem } /* 表格 */ #main-content table.wiki-content-table { border-spacing: 0; overflow: auto; min-width: 100% } #main-content table.wiki-content-table tr th { background-color: var(--block-bg) } #main-content table.wiki-content-table td, #main-content table.wiki-content-table th { border: 1px solid var(--block-border-color) } /* 文字 */ #page-content { font-size: 15px } #page-content p:not(.notepaper p, .header-container p) { line-height: 1.5 } .header-container { font-size: 14px } h1,h2,h3,h4,h5,h6 { color: #fdfdfd } #page-content h1 { font-size: 210%; font-weight: 800; color: #eee; border-bottom: 2px solid var(--block-border-color); padding-bottom: 0.5rem } #page-content h2 { font-size: 175%; font-weight: 600 } #page-content h3 { font-size: 150% } #page-content h4 { font-size: 130% } #page-content h5 { font-size: 110% } #page-content h6 { font-size: 95% } /* 分割线 */ #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 1em 0; background-color: var(--block-border-color); height: 2px } /* 折叠框 */ .collapsible-block:not(.no-style *) { width: auto; overflow: hidden; border: 1px solid var(--block-border-color) } .collapsible-block-content:not(.no-style *), .collapsible-block-link:not(.no-style *) { background: var(--block-bg); padding: 0.5em } .collapsible-block-content:not(.no-style *) { padding-left: 1em; padding-right: 1em } .collapsible-block-link:not(.no-style *) { color: var(--header-bg); background: var(--block-bg); transition: .3s; display: block; } .collapsible-block-link:hover:not(.no-style *), .collapsible-block-link:focus-visible:not(.no-style *), .collapsible-block-unfolded:not(.no-style *) .collapsible-block-link { color: #fff; background: var(--header-bg); text-decoration: none } .collapsible-block-link:not(.no-style *)::before { content: "\25BC"; display: inline-block; margin-right: 0.5em; transform: rotate(-90deg) scale(0.9) } .collapsible-block-unfolded:not(.no-style *) .collapsible-block-link::before { transform: rotate(0) scale(0.9) } /* 分页 */ .yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a { background-color: var(--body-bg) } .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus, .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected{ background-color: var(--block-bg) } .yui-navset .yui-content { background-color: var(--body-bg); box-shadow: none; border-bottom: 4px solid var(--block-bg); padding-left: .25rem; padding-right: .25rem } .yui-navset .yui-content>div { display: block; top: 0; overflow: hidden; transform-origin: 0 0; } /* 分页动画 credit Croquembouche */ #page-content .yui-navset .yui-content>div[style*="none"] { display: block !important; flex: 0; max-height: 0; padding: 0 0.5em; border-width: 0; /* The following transition affects the one that DISAPPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18, .51, .54, .9) 0s; animation: tab-disappear 0.5s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content>div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; /* The following transition affects the one that APPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.18, .51, .54, .9) 0.5s; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } @keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } /* 标签 */ #main-content .page-tags span { border-top: none } #main-content .page-tags a { background-color: var(--block-bg); border-radius: 0; clip-path: polygon(-100% -100%,100% 0%,95% 50%,100% 100%,0% 100%); color: #fff; transition: background .3s } #main-content .page-tags a:hover { text-decoration: none; background-color: var(--header-bg) } /* 历史记录 */ .diff-box > div.inline-diff.page-source > del{ background-color: rgba(192, 57, 43, 0.5); } .diff-box > div.inline-diff.page-source > ins { background-color: rgba(39, 174, 96, 0.5); } /* 页脚 */ #license-area { color: #ddd; background: var(--block-bg); font-size: 105%; padding: 0 .25rem } #footer, #footer a { color: #ddd } /* 页面选项 */ #page-options-bottom a, #page-options-bottom-2 a, div.buttons input, input.button, button, file, a.button { display: inline-block; background-color: var(--block-bg); color: #fefefe; border: 2px solid var(--block-border-color); padding: 0.2rem 0.6rem; transition: .3s; cursor: pointer } #page-options-bottom a:hover, #page-options-bottom-2 a:hover, div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover { background-color: var(--block-border-color); text-decoration: none; } @media screen and (min-width: 768px) { #page-options-bottom a { display: table-cell } #page-options-bottom, #page-options-bottom-2 { display: table; width: 100%; border-collapse: separate; border-spacing: 0.25rem; text-align: center } } /* 搜索和用户信息 */ #login-status, #login-status a { color: #fff } #account-topbutton { padding: 0; display: inline-block; border: none; } #account-options { background-color: var(--block-bg); border: none; box-shadow: 0 0 0.1rem var(--shadow-color); width: 5em; text-align: center } #account-options ul li a { display: block; color: #fefefe; padding: 0.3rem 0.5rem; font-size: 110%; transition: background .3s } #account-options ul li:hover a{ opacity: 0.8; text-decoration: none; background-color: var(--block-border-color); color: #fefefe } /* 导航栏 */ #top-bar { font-size: 13px } #top-bar ul li.sfhover a, #top-bar ul li.sfhover ul li a { background-color: var(--block-bg); border-color: var(--block-border-color); } #top-bar ul li.sfhover a { border-top: 1px solid var(--block-border-color) } #top-bar ul li.sfhover ul li.sfhover a, #top-bar ul li.sfhover a:hover { background-color: var(--block-border-color) } /* 滚动条 */ ::-webkit-scrollbar { background: var(--body-bg) } ::-webkit-scrollbar-thumb { background: var(--block-bg) } /* 悬浮信息框 */ .hovertip { background-color: var(--block-bg)!important; /* 覆盖脚注hovertip的内联样式 */ border: 1px solid var(--block-border-color); width: fit-content; padding: 0.4rem; text-align: center; font-size: 14px } .hovertip div.footnote { text-align: left } /* 反正 scroll to footnotes 也因为 bugdot 用不了,不如就隐藏掉 */ .hovertip div.footnote .f-footer { display: none } /* 脚注 */ .footnotes-footer { border-left: 6px solid var(--block-bg); padding: 0 1em 0.25em 1em; font-size: 15px; font-variant-numeric: tabular-nums } .footnotes-footer .title { margin: 0; background-color: var(--block-bg); padding: 0 0.6em; width: fit-content; margin-left: -1em; margin-bottom: 0.5em; } /* 编辑器 */ form#edit-page-form #edit-page-textarea { width: 100% } form#edit-page-form, form#edit-page-form #edit-page-textarea, div.buttons input, input.button, button, file, a.button { background-color: var(--block-bg); color: #fff } #action-area, form#edit-page-form, form#edit-page-form table.form:first-of-type td:last-of-type input:not(:placeholder-shown), form#edit-page-form .edit-page-bottomtable tr>td:nth-of-type(1)>div:nth-of-type(1)::before, #main-content form#edit-page-form *:not(#edit-page-textarea) { color: #fff } #action-area button,#lock-info, form#edit-page-form table.form:first-of-type td:last-of-type, #main-content form#edit-page-form *:not(#edit-page-textarea) { background-color: var(--block-bg) } form#edit-page-form:not(.data-form), div.buttons input, input.button, button, file, a.button { border: 1px solid var(--block-border-color) } /* 对话框 */ .owindow { background-color: var(--block-bg); border-color: var(--header-bg) } .owindow .title { background-color: var(--header-bg) } .owindow .button-bar a { color: #ddd; background-color: var(--header-bg); transition: .3s } .owindow .button-bar a:hover { opacity: 0.8; background-color: var(--block-bg) } /* 评分模块 */ .page-rate-widget-box:not(.creditRate *), .creditRate { box-shadow: none; border: 2px solid var(--block-border-color); background-color: var(--block-bg) } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel { background-color: var(--block-bg); border: none } .page-rate-widget-box .rate-points { background-color: var(--block-bg) !important; color: #ddd !important; border: solid 1px var(--block-bg); border-radius: 0; font-size: 13px } .page-rate-widget-box a, .creditButton a { font-size: 16px } #page-content .rate-box-with-credit-button { background-color: var(--block-bg); border: 1px solid var(--block-bg); box-shadow:none } #page-content .rate-box-with-credit-button .fa-info { color: #fff } .page-rate-widget-box a { transition: background .3s } .page-rate-widget-box .cancel a:hover, .page-rate-widget-box .creditButton a:hover { background-color: var(--block-border-color) } .page-rate-widget-box .ratedown a:hover { background-color: #c0392b } .page-rate-widget-box .rateup a:hover { background-color: #27ae60 } /* 著作信息模块 窗口 */ #u-credit-otherwise div.modalbox, #u-credit-view div.modalbox { background: linear-gradient(var(--header-bg) 60px, var(--block-border-color) 1px, var(--block-bg) 60px, var(--block-bg)) } div.modalbox hr { display: none } /* toc */ #toc { background: var(--block-bg); border-color: var(--block-border-color) }