无法获取插入的页面 ":r-sandbox-cn.wikidot.com:theme:nuclear",可能是站点标识名有误,或您无权在该站点查看此页面
本版式无任何涉政元素。
这个版式由
wd:Mcxian
制作,借用了青灰与真黑版式的特效。
想要用这个版式,可以把
[[include :r-sandbox-cn.wikidot.com:theme:nuclear]]
塞到你的文档里!
正常的文字
倾斜的文字
加粗的文字
划掉的文字
优雅的文字
上标文字
下标文字
存在的链接文字
不存在的链接文字
不知道是什么的文字
缩进
二重缩进
三重缩进
四重缩进
五重缩进
六
七
八
⑨!这是极限了!
真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西真的没放什么东西
[[div class="logo-block"]]
[[/div]]
[[div class="bd-logoblock"]]
[[/div]]
[[div class="lightblock"]]
[[/div]]
[[div class="darkerblock"]]
[[/div]]
[[div class="styled-quote"]]
[[/div]]
[[div class="dark-styled-quote"]]
[[/div]]
[[div class=''float-darkerblock'']]
[[/div]]
[[div class=''float-lightblock'']]
[[/div]]
[[div class=''shadeblock'']]
[[/div]]
[[div class=''bd-darkerblock'']]
[[/div]]
[[div class=''bd-lightblock'']]
[[/div]]
生存难度预设
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 5R(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 4R(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 3R(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 2R(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 1R(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 0R(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
- 变化的安全/稳定性
- 辐射剂量随距离变化
- 实体集中于单个/数个区域
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 变化(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
[[iftags +组件]]
这是什么
我用户 'Croquembouche' 不存在用在一大堆页面上的一大堆各种各样的CSS“改进”,因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点(也就是我经常干的事)。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件,除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突,且即使会冲突,也可能不会有什么影响。
用法
在任意维基上:
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用,所以-=-是用来隐藏该文档的。在另一个组件内使用时,请确保将该组件放在[[iftags]]块内,这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件(只会改变一点点东西):
- RSO组件 — 用户 'Rounderhouse' 不存在
个人自定义版式(在视觉上有大的变化):
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽,让你能确实地阅读脚注。
.hovertip { max-width: 400px; }等宽字体编辑/代码
使编辑文本框内字体等宽,且将所有等宽字文本改为Fira Code,也是个明显很优秀的等宽字字体。
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }电传打字机背景
给<tt>元素加上亮灰色的背景({{文本}}),使得代码片段更为突出。
tt {
background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
font-size: 85%;
padding: 0.2em 0.4em;
margin: 0;
border-radius: 6px;
}不要大脸
禁用悬停于某人的头像的时候出现的大图片,因为这图片又蠢又真的很烦人,想看大头像版本的话直接点击一下就行了。
.avatar-hover { display: none !important; }碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
.nobreak { word-break: break-all; }代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题,但是现在暂时这还是我的个人主题,是从Tomorrow Night Eighties中衍生而来的。
还有,将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中,因为Wikidot嵌入了一大堆语法来使其高亮,不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
:root {
--c-bg: #393939;
--c-syntax: #e0e0e0;
--c-comment: #999999;
--c-error: #f2777a;
--c-value: #f99157;
--c-symbol: #ffcc66;
--c-string: #99cc99;
--c-operator: #66cccc;
--c-builtin: #70a7df;
--c-keyword: #cc99cc;
}
.terminal, .terminal > .code {
color: var(--c-syntax);
background: var(--c-bg);
border: 0.4rem solid var(--c-comment);
border-radius: 1rem;
}调试模式
将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。
你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间,让注释不会与其上方或下方的东西重叠。
.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
outline: 1px solid var(--debug-colour, red);
position: relative;
}
.debug-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Code', monospace;
font-size: 1rem;
white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }
这是什么?
这是旧版全自定义层级等级组件,是为了解决旧版层级等级组件的样式问题(如难以自定义边框颜色、文字颜色和字体、列表行高等)而诞生的高自由度组件。该组件由 用户 'CutTheBirch' 不存在 制作并存放于后室英文维基沙盒站,后分别由 用户 'Cambrian White' 不存在 和 用户 'Ambersight' 不存在 两次翻译为中文版本并搬运至后室中文维基沙盒站。相关页面如下表所示:
考虑到目前中文维基网站内仍有多个页面正在使用该组件,为方便管理和维护,由 用户 'Lupus Caeruleus' 不存在 将该组件搬运至站内,并对默认参数进行了优化。本说明页面亦由 用户 'Lupus Caeruleus' 不存在 编写,页面布局和样式则参考了
wd:hoah2333
的设计。
使用方法
如需使用本组件,请在你所需的地方插入以下代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
title=首行文字
class=等级名称
display=等级名称及左侧的文字
color=背景颜色
border=边框颜色
list-color=三行描述文字的颜色
text-color=上方框内文字的颜色
title-font=首行文字的字体
class-font=等级名称的字体
list-font=三行描述文字的字体
line-height=三行描述文字的行高
image=右侧菱形中的图片
image-size=右侧菱形中图片的缩放比率
one=第一行描述文字
two=第二行描述文字
three=第三行描述文字
]]
该组件完整的参数列表如下所示。你需要填入所有未标记为“(可选)”的参数,缺少参数将会导致组件无法正常运作。
小贴士:和标准的层级等级组件不同,旧版全自定义层级等级组件并没有自动转换简繁体的功能,也没有根据等级名称自动显示三行描述文字和图标的功能。也就是说,所有文字相关的内容和图片链接必须由你手动输入。
| | |
title (可选) | 首行文字 以大号字体显示在组件上方矩形框内的首行。 若留空则默认为 生存难度:。 |
| class | 等级名称 显示在组件上方矩形框内的第二行,通常用来表示生存难度等级的名称。 |
display (可选) | 等级名称及左侧的文字 显示在组件上方矩形框内的第二行,包括等级名称及其左侧的文字。填写的内容将会覆盖等级名称即 class。 若留空则默认为 等级 ψ(即显示为“等级”二字后接一个空格再接等级名称)。 |
color (可选) | 背景颜色 组件图形部分的背景颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFC90E(黄色 █)。 |
border (可选) | 边框颜色 组件图形部分的边框颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
list-color (可选) | 三行描述文字的颜色 包括行首菱形的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 581A19(旧版深红色 █)。 |
text-color (可选) | 上方框内文字的颜色 即 title、class、display 三者的颜色。格式为六位十六进制 RGB 代码,或其他 CSS color 类属性所接受的格式。 若留空则默认为 FFFFFF(白色 █)。 |
title-font (可选) | 首行文字的字体 即 title 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 2.14rem Poppins, Noto Sans SC, Noto Serif SC。 |
class-font (可选) | 等级名称的字体 即 class 和 display 所使用的字体。格式为 CSS font 类属性所接受的格式。 若留空则默认为 500 italic 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
list-font (可选) | 三行描述文字的字体 格式为 CSS font 类属性所接受的格式。 若留空则默认为 bold 1.5rem Poppins, Noto Sans SC, Noto Serif SC。 |
line-height (可选) | 三行描述文字的行高 格式为 CSS 可接受的长度格式。 若留空则默认为 1rem。 |
image (可选) | 右侧菱形中的图片 填写图片的链接。 若留空则默认为 none,即无图片。 |
image-size (可选) | 右侧菱形中图片的缩放比率 新增参数,以解决图片的尺寸问题。格式为 CSS background-size 类属性所接受的格式。 若留空则默认为 95%,即将原图缩小至 95%。若使用来自标准层级等级组件的图片,则推荐将本参数设置为 78%。 |
| one | 第一行描述文字 |
| two | 第二行描述文字 |
| three | 第三行描述文字 |
示例
Level C-2 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=Ψ
display=等级 **//Ψ//**
color=F2CEFE
border=8A3D9E
list-color=8A3D9E
image=http://backrooms-sandbox-2.wdfiles.com/local--files/the-mfing-swag-ass-collection/classpsi.png
one=不安全
two=不稳定
three=精神危害
]]**
Level 158 中的旧版全自定义层级等级组件及其代码:
[[include :backrooms-wiki-cn:component:alt-custom-class
class=凶恶
display=凶恶
color=000000
border=e00707
list-color=f2a400
image=http://backroomssandboxcn.wikidot.com/local--files/waaan/OSL_NO_T_W.png
one=和平相处
two=实现凶狠计分
three=准备感受冲击
]]**
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=5R
|display=5R—辐射区
|color=8C0000
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA141F5B%5D.png
|image-size=95%
|one=不安全且不稳定
|two=重度辐射危害
|three=感染实体横行
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=4R
|display=4R—辐射区
|color=8C003E
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA141F5B%5D.png
|image-size=95%
|one=不安全且不稳定
|two=中度辐射危害
|three=中量感染实体
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=3R
|display=3R—辐射区
|color=8C3E3E
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA141F5B%5D.png
|image-size=95%
|one=不安全且不稳定
|two=中度辐射危害
|three=少量感染实体
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=2R
|display=2R—辐射区
|color=8C3E00
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA141F5B%5D.png
|image-size=95%
|one=不安全但稳定
|two=轻度辐射危害
|three=少量感染实体
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=1R
|display=1R—辐射区
|color=8C8C3E
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA141F5B%5D.png
|image-size=95%
|one=安全且稳定
|two=极轻度辐射危害
|three=极少量感染实体
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=0R
|display=0R—辐射区
|color=3E8C8C
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA141F5B%5D.png
|image-size=95%
|one=安全且稳定
|two=可忽略辐射危害
|three=实体无危害
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=变化
|display=辐射区—变化
|color=000000
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5BA4F9CBE%5D.png
|image-size=95%
|one=变化的安全/稳定性
|two=辐射剂量随距离变化
|three=实体集中于单个/数个区域
]]
>[[include :backrooms-wiki-cn:component:alt-custom-class
|class=ψ
|display=R—Ψ
|color=8C008C
|border=FFFFFF
|list-color=FFFFFF
|text-color=000000
|image=http://r-sandbox-cn.wikidot.com/local--files/nuclear/%E6%96%B0%E9%A1%B9%E7%9B%AE%2081%20%5B0619C65%5D.png
|image-size=95%
|one=不安全且不稳定
|two=一定剂量辐射
|three=一定程度精神危害
]]
[[module CSS]]
:root {
--theme-base: "black-highlighter";
--theme-id: "grayish-cyan";
--theme-name: "Grayish-cyan Theme";
logo-image: url("http://r-sandbox-cn.wikidot.com/local--files/theme:nuclear/0029_6.png")top left repeat-x;
--header-title: "核污";
--header-subtitle: "辐射过量";
--white-monochrome: 24, 24, 24;
--pale-gray-monochrome: 124, 0, 0;
--light-gray-monochrome: 94, 94, 94;
--gray-monochrome: 74, 74, 74;
--black-monochrome: 255, 255, 255;
--bright-accent: 250, 0, 0;
--medium-accent: 74, 0, 0;
--dark-accent: 124, 0, 0;
--pale-accent: 74, 0, 0;
--alt-accent: 255, 0, 0;
--gradient-header: linear-gradient(to top,
rgba(var(--medium-accent),1) 0%,
rgba(var(--dark-accent), 1) 100%
);
--swatch-headerh1-color: var(--pale-gray-monochrome);
--swatch-headerh2-color: var(--pale-gray-monochrome);
--swatch-topmenu-border-color: var(--black-monochrome);
--swatch-topmenu-bg-color: var(--white-monochrome);
--link-color: 124, 0, 0;
--visited-link-color: 74, 0, 0;
--new-page-color: 0, 0, 0;
--hover-link-color: 0, 0, 0;
--rating-module-button-color: 255, 255, 255;
--rating-module-text-color: 255, 255, 255;
--background-gradient-distance: 6rem;
--diagonal-stripes: linear-gradient(transparent 0);
}
#side-bar .side-block div a img {
filter: grayscale(100%);
}
#skrollr-body {
background-image: none;
}
#container {
background-image: none;
background-size: 0.25em 0.25em;
background-repeat: repeat;
background-attachment: fixed;
}
div#page-options-bottom-2 > a, div#page-options-bottom > a {
border-radius: 0em;
-moz-border-radius: 0em;
border: none;
}
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
border: none;
}
#header, #top-bar {
background-attachment: scroll;
}
#header {
background-image: none;
}
#header::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-image: var(--logo-image);
background-size: auto 16rem;
background-position: center;
background-repeat: no-repeat;
opacity: 0.4;
}
#header h1, #header h1 a {
position: absolute;
top: 1rem;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 0;
}
#header h2, #header h2 span, #header h2 span::before {
position: absolute;
top: 2rem;
margin: 0;
width: 100%;
display: flex;
justify-content: center;
}
#header h1 a::before, #header h2 span::before {
text-shadow: .063rem 0.1rem 0.1rem #215d6c;
}
#footer{
color: rgb(var(--medium-accent));
}
a.newpage {
background: transparent;
text-decoration: none
}
a.newpage {
color: rgb(var(--newpage-color))
}
#search-top-box-input:hover,
#search-top-box-input:focus {
background: rgba(var(--medium-accent), .0);
}
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
color: rgb(var(--black-monochrome));
}
#top-bar div.top-bar > ul > li > a:hover,
#top-bar div.mobile-top-bar > ul > li > a:hover {
color: rgb(--pale-gray-monochrome));
}
#top-bar div.top-bar > ul > li:hover > a,
#top-bar div.mobile-top-bar > ul > li:hover > a {
color: rgb(var(--pale-gray-monochrome));
}
#login-status {
color: rgb(var(--white-monochrome));
}
#login-status a {
color: rgb(var(--white-monochrome));
}
#login-status ul a {
color: rgb(var(--pale-gray-monochrome));
}
#account-topbutton {
color: rgb(var(--white-monochrome));
}
table.wiki-content-table th {
background-color: rgb(var(--pale-gray-monochrome)) !important;
color: rgb(var(--black-monochrome));
border-color: rgb(var(--white-monochrome));
}
.scp-image-block {
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
blockquote,
div.blockquote {
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.styled-quote {
background-color:rgb(var(--pale-gray-monochrome));
border-left: 0.4rem solid rgba(var(--bright-accent),1);
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.dark-styled-quote {
background-color:rgb(var(--gray-monochrome));
border-left: 0.4rem solid rgba(var(--dark-accent),1);
color:rgb(var(--black-monochrome));
padding: 0.1rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
.dark-styled-quote hr{
color: rgb(var(--dark-accent));
}
.shadeblock {
background-color:rgb(var(--white-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(124,124,124,1);
color: rgb(var(--black-monochrome));
}
.darkerblock {
background-color:rgb(var(--gray-monochrome));
color:rgb(var(--black-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,35,76,.25);
}
.darkblock hr {
color: rgb(var(--pale-gray-monochrome));
}
.lightblock {
background-color:rgb(var(--pale-gray-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,35,76,.25);
color: rgb(var(--black-monochrome));
}
.float-darkerblock {
background-color:rgb(var(--gray-monochrome));
color:rgb(var(--black-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.4rem 0.4rem rgba(124,124,124,1);
}
.float-darkblock hr {
color: rgb(var(--pale-gray-monochrome));
}
.float-lightblock {
background-color:rgb(var(--pale-gray-monochrome));
color:rgb(var(--black-monochrome));
padding: 0.01rem 1rem;
margin: 0.5rem 0 0.5rem 0.25rem;
box-shadow: 0 0.3rem 0.3rem rgba(124,124,124,1);
}
.bd-lightblock{
padding: 0.01rem 1rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
color:rgb(var(--black-monochrome));
margin: 0.5rem 0 0.5rem 0.25rem;
display: block;
position: relative;
background-color: rgb(var(--pale-gray-monochrome));
border: solid 0.3rem rgb(var(--light-gray-monochrome));
}
.bd-lightblock hr {
background-color:rgb(var(--bright-accent))
}
.bd-darkerblock{
padding: 0.01rem 1rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
color:rgb(var(--black-monochrome));
margin: 0.5rem 0 0.5rem 0.25rem;
display: block;
position: relative;
background-color: rgb(var(--gray-monochrome));
border: solid 0.3rem rgb(var(--dark-accent));
}
.bd-darkerblock hr {
background-color:rgb(var(--dark-accent))
}
.logoblock{
padding: 0.01rem 1rem;
color:rgb(255, 255, 255);
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
margin: 0.5rem 0 0.5rem 0.25rem;
display: block;
position: relative;
background-color: rgb(var(--dark-gray-monochrome));
}
.logoblock::after{
content: "";
float: center;
border: solid 2px #0000;
background: url(http://r-sandbox-cn.wikidot.com/local--files/theme:nuclear/0029_6.png) center/25% no-repeat;
opacity: 0.25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
.bd-logoblock{
padding: 0.01rem 1rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
color:rgb(255, 255, 255);
margin: 0.5rem 0 0.5rem 0.25rem;
display: block;
position: relative;
background-color: rgb(var(--dark-gray-monochrome));
border: solid 0.3rem rgb(var(--bright-accent));
}
.bd-logoblock::after{
content: "";
float: center;
border: solid 2px #0000;
background: url(http://r-sandbox-cn.wikidot.com/local--files/theme:nuclear/0029_6.png) center/25% no-repeat;
opacity: 0.25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
[[/module]]版式作者:
wd:Mcxian