基岩 版式

[[module css]] @import url('https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css'); @import url('https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css'); /* 临时修复评分模块 */ div.page-rate-widget-box .rate-points {         background-color: transparent !important; } /* 独立信息模块 */ .creditButtonStandalone {     width: var(--rate-module-button-size);     height: var(--rate-module-button-size);     display: inline-flex;     box-shadow: none;     background-color: rgb(var(--rate-module-background-color));     border: none;     border-radius: 0;     margin: 0.25rem 0;     padding: 0.325em;     text-align: center; } .creditButtonStandalone > p {     display: contents; } .creditButtonStandalone > p > a {     display: block;     position: relative;     width: 100%; height: 100%;     padding: 0;     margin: 0;     border: none;     color: transparent!important;     background-color: transparent;     box-sizing: border-box;     transition: all 0.095s linear; } .creditButtonStandalone > p > a::before {     content: "";     display: block;     position: absolute;     width: 100%;     height: 100%;     transition: background-color 0.095s linear;     background-color: rgb(var(--basalt-UI-dark-palette)); } .creditButtonStandalone > p > a::after {     content: "";     display: block;     background-color: rgb(var(--basalt-light-text-color));     position: absolute;     width: 100%;     height: 100%;     -webkit-mask-size: 40%;     mask-size: 40%;     -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;     -webkit-mask-position: center;     mask-position: center;     -webkit-mask-image: var(--vote-info-mask);     mask-image: var(--vote-info-mask);     -webkit-mask-size: 27.5%;     mask-size: 27.5%; } .creditButtonStandalone > p > a:is(:hover, :focus)::before {     background-color: rgb(var(--basalt-focus-color)); } [[/module]] [[include :scp-wiki-cn:component:interwiki-style | type=sidebar | priority=0 | override=1 | theme=https://cdn.scpwiki.com/theme/en/basalt/normalize-min.css ]] [[include :scp-wiki-cn:component:interwiki-style | type=sidebar | priority=1 | theme=https://cdn.scpwiki.com/theme/en/basalt/basalt-bedrock-min.css ]] [[iftags +版式]] [[div class="nametag"]] + 基岩 [[module Rate]] [[/div]] **基岩**是一个由 [[*user EstrellaYoshte]]、[[*user Liryn]] 以及 [[*user Placeholder McD]] 制作的美学基础版式，特别感谢 [[*user aismallard]] 在 GitHub 上的协助，感谢 [[*user Woedenaz]] 协助制作了编辑区域的按钮 SVG 以及一些常规的咨询。 此版式作为[[[theme:basalt|玄武岩 2.0]]] 的基础架构存在。 [[include :scp-wiki:component:theme-squares -=- | color1-name=Quartz | color1-variable=--basalt-primary-color | color1-info=254,254,254 | color2-name=Calcite | color2-variable=--basalt-secondary-color | color2-info=247,248,250 | color3-name=Lapis Lazuli | color3-variable=--basalt-bright-element-color | color3-info=16,76,184 | color3-has-light-text=1 | color4-name=Amethyst | color4-variable=--basalt-undertone | color4-info=61,71,202 | color4-has-light-text=1 | color5-name=Slate | color5-variable=--basalt-overtone | color5-info=56,60,64 | color5-has-light-text=1 | subcolor1-name=Granite | subcolor1-variable=--basalt-tertiary-color | subcolor1-info=218,219,222 | subcolor2-name=Andesite | subcolor2-variable=--basalt-sub-text-color | subcolor2-info=155,154,162 | subcolor2-has-light-text=1 | subcolor3-name=Sunstone | subcolor3-variable=--basalt-alternate-color | subcolor3-info=255,132,0 | subcolor4-name=Emerald | subcolor4-variable=--basalt-positive-color | subcolor4-info=26,180,28 | subcolor4-has-light-text=1 | subcolor5-name=Ruby | subcolor5-variable=--basalt-negative-color | subcolor5-info=255,48,48 | subcolor5-has-light-text=1 | subcolor6-name=Sapphire | subcolor6-variable=--basalt-dark-element-color | subcolor6-info=18,20,150 | subcolor6-has-light-text=1 ]] 若需在某页面中使用，请添加以下代码： > {{@@[[include :scp-wiki-cn:theme:bedrock]]@@}} [[toc]] + 示例 可通过四个连字符 “@@----@@”[[footnote]]这依然是用来抚慰 [[*user Placeholder McD]] 的。[[/footnote]] 创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。 [[include :scp-wiki:component:image-block name=https://cdn.scpwiki.com/theme/en/basalt/basaltlogo.svg|caption=插图方块。|width=280px]] 标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。 [[collapsible show="折叠 - 点我" hide="折叠 - 点我"]] + 1 级标题 ++ 2 级标题 +++ 3 级标题 ++++ 4 级标题 +++++ 5 级标题 ++++++ 6 级标题 [[/collapsible]] ~~~~ [[tabview]] [[tab 分页]] 此为分页（tab view）。 [[/tab]] [[tab 分页]] 看，这有更多文字。 多么精巧绝伦。 [[/tab]] [[tab 长 Tab]] 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 这是一个长的 tab，它有很多文字。 [[/tab]] [[tab 由于一些奇怪的原因，这个空 tab 有一个很长的名字。我想知道为什么？这很奇怪。]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[tab 空 Tab]] [[/tab]] [[/tabview]] > 这是一个引用块，在一行字的起始处加上“> ”来创建。 > > 更多文字 > ----- > 一条分割线 > >> 嵌套引用块 ||~ 这是 ||~ 表格 || || 你应该老早 || 就知道怎么 || |||| 做这个了吧 || [[footnoteblock]] [[=]] +++* 标题字体为 Lexend / 思源黑体简中。 正文字体为 Inter / 思源黑体简中。 [[span style="font-family: var(--UI-font), var(--UI-font-fallback);"]]用户界面字体为 Jost / 思源黑体简中。[[/span]] {{等宽字体为 JetBrains Mono / 思源宋体简中}} [[/=]] ------ + CSS 变量 基岩内置了一系列的 CSS 变量，可以被修改以改变其外观。某些顶级变量如下： [[code type="css"]] :root {     --basalt-primary-color: 254,254,254;     --basalt-secondary-color: 247,248,250;     --basalt-tertiary-color: 218,219,222;     --basalt-main-text-color: 20,20,20;     --basalt-overtone: 50,50,50;     --basalt-undertone: 61,71,202;     --basalt-bright-element-color: 16,76,184;     --basalt-dark-element-color: 18,20,150;     --basalt-alternate-color: 255,132,0;     --basalt-positive-color: 24,163,20;     --basalt-negative-color: 255,48,48;     --basalt-cancel-color: var(--basalt-negative-color);     --basalt-sub-text-color: 155,154,162;     --basalt-light-text-color: var(--basalt-primary-color);     --basalt-UI-dark-palette: var(--basalt-overtone);     --basalt-focus-color: var(--basalt-undertone);     --basalt-background-color: var(--basalt-primary-color); } [[/code]] 颜色变量为 RGB 格式。 [[code type="css"]] :root {     --header-font-primary: 'Lexend';     --UI-font-primary: 'Jost';     --body-font-primary: 'Inter';     --mono-font-primary: 'JetBrains Mono'; } :root:lang(cn) {     --body-font-fallback: "Noto Sans SC", Verdana, "Microsoft YaHei", "微软雅黑", Geneva, sans-serif, STXihei, "华文细黑";     --UI-font-fallback: "Noto Sans SC", "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif;     --header-font-fallback: var(--body-font-fallback);     --mono-font-fallback: "Noto Serif SC", "Microsoft YaHei", "微软雅黑", "Courier New", Courier, monospace, STXihei, "华文细黑"; } [[/code]] 这是四个被基岩所使用的字体种类。 [[code type="css"]] :root {     --header-logo: url('https://cdn.scpwiki.com/theme/en/basalt/basaltlogo.svg');     --header-title: 'SCP Foundation';     --header-subtitle: 'SECURE - CONTAIN - PROTECT';     --title-size: 1.5rem;     --subtitle-size: 0.825rem;     --base-font-size: 1rem;     --main-content-width: 67.5rem;     --side-bar-width: 19rem; } :root:lang(cn) {     --header-title: 'SCP基金会';     --header-subtitle: '控制 - 收容 - 保护'; } [[/code]] 注意由于 CSS 的 {{calc()}} 函数机制，任何有长度单位的变量，比如 rem 或是 px，其单位都不应被省略，即使其值被设定为 0，比如 //{{@@--subtitle-size: 0rem;@@}}// 能使副标题消失，且亦不会使 {{calc()}} 功能无效。 {{@@--main-content-width@@}} 不应被以 % 单位设定。若需使主区域占据整个屏幕的宽度，则使用任意高的 rem 值即可。 ------ + 其它 该版式的源代码可以在我们的 [https://basalt-team.github.io/Basalt/ GitHub] 页面中找到。 基岩目前与常规版式并不兼容。 [[module css]] .nametag {     --bs: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='517.88' height='444.8' version='1.0' viewBox='0 0 388.41 333.6'%3E%3Cpath d='M223 20.7c-4.6 4.9-23.9 24.6-42.9 43.8-19 19.3-36.5 37.1-38.9 39.6-4.2 4.5-4.5 5.4-17.8 47.9L110 195.3l8.7 18.5 8.8 18.5 8.5 3.9c4.7 2.2 9.5 4.4 10.7 4.8 2 .8 3.3-1 17.9-25.3 8.6-14.4 16.4-26.9 17.3-27.8.9-.9 3.7-2.3 6.3-3.2l4.7-1.6 31 13.5 30.9 13.5 9.9-6.3c5.4-3.4 10.1-6.6 10.4-7.1.3-.4 1.4-9.4 2.4-20 1.2-11.8 2.1-18.3 2.6-17.1.8 1.9 9.9 44.5 9.9 46.2 0 .5-2.3 3.9-5 7.5l-5.1 6.7 4.5 4.2c3.2 3.1 4.6 5.4 5.1 8.3 2.4 13.7 6.1 29.7 6.9 29.8.5.1 13.3-14.5 28.4-32.6l27.5-32.7h13.4l10.3 13.2c12.2 15.8 11.8 15.3 12.5 14.7.2-.3-1.8-12.6-4.5-27.5-4.5-24-6.6-32.4-19.8-77.4l-14.7-50.5L292 40.8c-31.6-15.7-58.2-28.7-59.1-28.7-.9-.1-5.3 3.8-9.9 8.6Zm88.4 73.6 23.3 32.7.8 28.1c.4 15.4.5 28.2.4 28.4-.2.2-5.6-12-11.9-27.1L312.5 129l-27.8-25.7c-15.3-14.2-29.9-27.7-32.5-30-2.6-2.4-4.5-4.3-4.2-4.3.3-.1 8.8-1.8 19-4 10.2-2.1 19.1-3.7 19.8-3.7.7.1 11.7 14.9 24.6 33zM63.2 183.8l-17.4 5.7-15.9 15.4c-8.8 8.5-15.8 15.9-15.5 16.6.2.7 5.2 7.8 11.1 15.8l10.6 14.5 9.2.6c5.1.3 18.2.8 29.2 1.1l20 .6 8.4-8.5 8.4-8.4-14-29.4c-7.7-16.1-14.7-29.4-15.4-29.5-.8-.1-9.2 2.3-18.7 5.5z' style='fill:%23000;stroke:none;stroke-width:.1' transform='translate(-14.4 -12.1)'/%3E%3Cpath d='m170.2 239.1-22.2 37 .2 28.7.3 28.6 49 6.2 48.9 6.1 22.1-9.8c20.4-9.1 22-10 21.7-12.2-.3-3.2-17.1-86.9-17.4-87.3-.6-.5-78.9-34.4-79.6-34.4-.4 0-10.7 16.7-23 37.1zm70.8 5.5c9.1 5.2 17 10.1 17.6 10.7 1.4 1.5 13.6 47.4 13.2 49.7-.2.9-5.9 6.7-12.8 12.9l-12.5 11.2-14.3-.7c-7.8-.3-17.7-.9-22-1.3l-7.7-.6 18.3-13.4c10-7.3 18.5-13.7 18.8-14.2.3-.5 1.1-9.7 1.7-20.3l1.1-19.4-9.7-12.1c-5.4-6.7-9.4-12.1-9-12.1.5 0 8.3 4.3 17.3 9.6zm94.5-1.4c-12.5 14.9-23 27.9-23.2 28.8-.3 1-.1 2 .4 2.3 1 .7 62.1 13.7 64.1 13.7 2.6 0 26.3-14.2 26-15.6-.3-1.4-40.9-53.4-43.1-55.3-1.1-.8-6 4.4-24.2 26.1z' style='fill:%23000;stroke:none;stroke-width:.1' transform='translate(-14.4 -12.1)'/%3E%3C/svg%3E");     text-align: center;     overflow: hidden;     padding-top: 2rem; } .nametag h1 {     font-size: 0;     height: 16rem;     width: min(16rem,90%);     margin: 0.5rem auto 0;     background-color: rgb(var(--basalt-overtone));     -webkit-mask-image: var(--bs);     -webkit-mask-repeat: no-repeat;     -webkit-mask-size: contain;     -webkit-mask-position: center;     mask-image: var(--bs);     mask-repeat: no-repeat;     mask-size: contain;     mask-position: center;     transition: all 0.175s ease-out; } .nametag h1:hover {     background-color: rgb(var(--basalt-undertone)); } #page-content .colors-container {     max-width: calc(var(--main-content-width)*0.75);     margin: 1.25rem auto; } .colors-container, .colors-container .css-variable {     font-family: var(--mono-font); } .colors-container .colors .color {     text-align: center;     flex-basis: calc((100% / 3) - 2rem); } .colors-container .color { margin: 0; } .colors-container, .colors-container .colors, .colors-container .subcolors { grid-gap: 0.375rem; } .colors-container .color span[style*="pre-wrap"] {     font-size: 85%;     opacity: 0.625; } [[/module]] [[/iftags]]