至上主义 美学版式
2025年1月20日
修订 5
核心指标
评分
33
↑ 33
↓ 0
支持率
100%
总票数 33
Wilson 95% 下界
89.6%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
加载图表中...
最近修订
1 / 2
最近投票
1 / 4
2025-11-04
2025-10-25
2025-08-31
2025-08-26
2025-07-29
2025-06-09
2025-05-30
2025-05-15
2025-04-13
2025-02-25
页面源码
源码字符数 23102文字字数 3670
[[module ThemePreviewer noUi="true" theme_url="https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css"]]
[[include :backrooms-wiki-cn:fragment:suprematism]]
[[module css]]
@import url("https://lemoncat233.github.io/supreroomartists/Suprematism/suprematism.css");
:root {
--header-title: "SCP 基金会中文维基";
}
.page-rate-widget-box .rate-points {
background: unset!important;
}
[[/module]]
[[iftags +版式]]
[[module css]]
.supre-banner {
position: relative;
width: 18rem;
height: 12rem;
margin: auto;
font-family: "Alumni Sans Pinstripe";
}
.supre-banner::before, .supre-banner::after {
content: "";
position: absolute;
width: 6rem;
height: 6rem;
box-sizing: border-box;
}
.supre-banner::before {
border: var(--global-border-width) solid rgb(var(--global-light-color));
bottom: 1rem;
left: 3rem;
}
.supre-banner::after {
background: rgb(var(--global-pale-color));
top: 3rem;
right: 7rem;
transform-origin: bottom right;
transform: rotate(30deg);
}
.supre-banner span {
position: absolute;
bottom: 1rem;
right: 3rem;
font-size: 1.25rem;
}
[[/module]]
[[div_ class="supre-banner"]]
[[span]]Suprematism.[[/span]]
[[/div]]
[[div style="font-family: var(--banner-font); text-align: center;"]]
[[span style=" letter-spacing: 1rem; font-size: 2em; padding-left: 1rem;"]]至上主义[[/span]]
真理隐于几何之间
[[/div]]
**至上主义**是一个由 [[*user LemonCat233]] 和 [[*user Liurd]] 制作的基础美学版式，旨在保证极端简洁，无多余过渡效果的前提下提供充足的二次开发基础。要在任意页面中引用该版式，请在其中加入如下代码：
= {{@@[[include :scp-wiki-cn:theme:suprematism]]@@}}
以下为本版式的部分元素示例。
[[toc]]
+ 示例
[[include :scp-wiki-cn:credit:start]]
**名称：** 至上主义 美学版式
**作者：** [[*user LemonCat233]] & [[*user Liurd]] 。
至上主义是一个由 [[*user LemonCat233]] 和 [[*user Liurd]] 制作的基础美学版式，旨在保证极端简洁，无多余过渡效果的前提下提供充足的二次开发基础。
[[include :scp-wiki-cn:credit:end]]
[[include :scp-wiki-cn:credit:start-standalone]]
**名称：** 至上主义 美学版式
**作者：** [[*user LemonCat233]] & [[*user Liurd]] 。
至上主义是一个由 [[*user LemonCat233]] 和 [[*user Liurd]] 制作的基础美学版式，旨在保证极端简洁，无多余过渡效果的前提下提供充足的二次开发基础。
[[include :scp-wiki-cn:credit:end-standalone]]
通过四个连字符 “@@----@@”[[footnote]][[*user Placeholder McD]] 看到这个会很欣慰，大概。[[/footnote]] 来在你的页面中创建水平分割线。若未被放在其他部件（诸如引用块）中，其会左右延伸贯穿整个页面。这种将文件分割为多个部分的线就是分割线。
[[include component:image-block name=https://lemoncat233.github.io/supreroomartists/Suprematism/White_on_White_(Malevich,_1918).png|caption=《白上白》（马列维奇，1918）]]
可通过 1 至 6 个加号（“+”）来创建不同级的标题。
[[collapsible show="折叠 - 点击以展开" hide="折叠 - 点击以收起"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
至上主义（俄语：супрематизм，英语：suprematism，或译作“绝对主义”）现代主义艺术流派之一，二十世纪初俄罗斯抽象绘画的主要流派。创始人为卡济米尔·谢韦里诺维奇·马列维奇（1878-1935）。“至上主义”一词来自于1915年马列维奇发表的宣言式小册子《从立体主义和未来主义到至上主义》（От Кубизма и Футуризма к Супрематизму）。在这本书中，马列维奇，强调至上主义是艺术中的绝对最高真理，它将取代此前一切曾经存在过的流派。人类社会可以以至上主义的原则进行组织和构建，进入新的历史发展阶段。至上主义的代表作品是马列维奇在1915年“0.10最后的未来主义展览”展出的油画《黑方块》。
至上主义的理论和创作对同时期的构成主义、以及欧洲的抽象绘画产生了重要的影响。[[footnote]] [https://zh.wikipedia.org/wiki/%E8%87%B3%E4%B8%8A%E4%B8%BB%E4%B9%89 至上主义 - 维基百科] [[/footnote]]
~~~~
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
[[div style="margin-top: 100vh;"]]
[[/div]]
= 实际上这里有文字。
[[/tab]]
[[tab 由于一些奇怪的原因，这个空 tab 有一个很长的名字，也就是“长而无物”，很糟的现象。]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
||~ 这是 ||~ 表格 ||
|| 说实话 || 不写做法不太好。 ||
|||| 但是解释起来很麻烦，你还是自己查一下吧。 ||
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
[[div class="shadebox"]]
= {{@@[[div class="shadebox"]]@@}}
这个引用块的特点是引用块内的文字和引用块外的文字对齐。
[[/div]]
[[div class="block"]]
= {{@@[[div class="block"]]@@}}
这是一个基础的块级元素，通过为其添加更多的类（class）来进一步样式化。
= **与 shadebox 不兼容！**
[[/div]]
[[div class="block shadow"]]
= {{@@[[div class="block shadow"]]@@}}
这个引用块的特点是拥有阴影。
[[/div]]
[[div class="block dropshadow"]]
= {{@@[[div class="block dropshadow"]]@@}}
同理，但是阴影更大一些。
[[/div]]
[[div class="block light-bg"]]
= {{@@[[div class="block light-bg"]]@@}}
较浅的背景。
[[/div]]
[[div class="block dark-bg"]]
= {{@@[[div class="block dark-bg"]]@@}}
较深的背景。
[[/div]]
[[div class="owindow owait" style="width: fit-content; position: static; margin: auto;"]]
[[div class="content"]]
这东西很烦人，不过嘛...有些时候它就是没法避免...
[[/div]]
[[/div]]
[[footnoteblock]]
----
[[=]]
[[span style="font-family: var(--header-font); font-weight: 100;"]]页眉字体为 Poiret One / 思源黑体。[[/span]]
[[span style="font-family: var(--banner-font); font-size: 1.2em;"]]横幅字体为 Alumni Sans Pinstripe / 朱雀仿宋。[[/span]]
+++++* 标题字体为 Sulphur Point / 思源黑体。
正文字体为 Barlow / 思源黑体。
[[span style="font-family: var(--ui-font);"]]用户界面字体为 Montserrat / 思源黑体。[[/span]]
{{等宽字体为 PT Mono / 思源宋体。}}
[[/=]]
@@ @@
+ 预定义
**至上主义**内置了一些已经做好的预设，可以通过在引入时修改参数来改变其外观。它们是：
[[module CSS]]
.theme-presents-container {
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: auto;
grid-template-areas: "presentsImage" "presentsTexts";
position: relative;
}
.theme-presents-container > img {
grid-area: presentsImage;
position: relative;
}
.theme-presents-texts {
grid-area: presentsTexts;
position: relative;
padding-left: 0;
}
[[/module]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/01%20left-header.png]]
[[div class="theme-presents-texts"]]
**预设：** 左侧版头。
**简介：** 这个预设的版头标题在左侧，这让它看起来很经典。
**引用方式：** {{left-header=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/02%20no-header-desktop.png]]
[[div class="theme-presents-texts"]]
**预设：** 无版头。
**简介：** 这个预设抛弃了自己的版头，这让它看起来很简约。
**引用方式：** {{no-header-desktop=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/03%20collapse-sidebar-desktop.png]]
[[div class="theme-presents-texts"]]
**预设：** 另一种侧栏按钮样式。
**简介：** 这个预设给自己的收放按钮(collapse button)换了个样式，不知道这样“Neo-collapsism”的预设爱不爱听 Prokofiev[[footnote]]指 [[[https://en.m.wikipedia.org/wiki/Sergei_Prokofiev|Sergej Prokofiev]]]，20世纪 [[[https://en.m.wikipedia.org/wiki/Neoclassicism_(music)|Neoclassicism音乐]]] 的代表人物。[[/footnote]] 的曲子？
**引用方式：** {{collapse-sidebar-desktop=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/04%20show-sidebar.png]]
[[div class="theme-presents-texts"]]
**预设：** 常驻侧栏。
**简介：** 这个预设毫无保留地展示着自己的侧栏，我想它们的关系一定很好。
**引用方式：** {{show-sidebar=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/05%20fullscreen.png]]
[[div class="theme-presents-texts"]]
**预设：** 全屏模式。
**简介：** 这个预设是全屏的，它非常喜欢屏幕外面人们摆来摆去的侧脸，哦，我想它可能是一位画家！
**引用方式：** {{fullscreen=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/06%20big-banner.png]]
[[div class="theme-presents-texts"]]
**预设：** 大横幅。
**简介：** 这个预设的横幅很大，它对自己的横幅非常骄傲，哦，它真自信！
**引用方式：** {{big-banner=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/07%20no-banner.png]]
[[div class="theme-presents-texts"]]
**预设：** 无横幅。
**简介：** 这个预设藏起了自己的横幅，它很懂得什么叫做中庸之道，哦，它真有头脑！
**引用方式：** {{no-banner=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/08%20evernight.png]]
[[div class="theme-presents-texts"]]
**预设：** 永夜。
**简介：** “我和我的兄弟们不一样，”这个预设说，“比起在白天相互争抢，我更喜欢一个人安静地待在黑夜中，这使我感到平静。”
--我想，这个预设可能很喜欢玩植物大战僵尸。--
**引用方式：** {{evernight=true}}
[[/div]]
[[/div]]
[[div class="block light-bg dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/%E9%A2%84%E8%AE%BE/10%20scp.png]]
[[div class="theme-presents-texts"]]
**预设：** SCP 基金会。
**简介：** 用于某个机密组织的文件。呃——你知道的，上一个轻视他们的人刚进去，所以我就不多说了，真的。
...你们说“必须忘记他”是什么意思？
**引用方式：** {{scp=true}}
[[/div]]
[[/div]]
[[=]]
[[collapsible show="-" hide="进度已达成！第四面墙"]]
[[<]]
[[div class="block dropshadow theme-presents-container"]]
[[image https://lemoncat233.github.io/supreroomartists/Suprematism/预设/special.jpeg]]
[[div class="theme-presents-texts"]]
**预设：** 什么叫 “我说话有奇怪的空隔” ？
**简介：**@@哦，天呐，你怎么在这里？@@
@@额，我从没想过有人能发现这个。@@
@@总之，如你所见，我找不到这个预设去哪了...@@
@@我已经花了好几个小时去寻找它，但我什么也没有发现。@@
@@额，好吧，确实，这张图片是我@@**唯一**@@找到的@@--@@ @@东西@@ @@--**代码**@@，是的是的，这的确算不上“什么也没发现”。@@
@@咳咳，所以，既然你都找到这了...能不能帮我找到这个预设？@@
@@求求泥辣...@@
**引用方式：**
[[div class="code"]]
{{@@↑ ↑ ↓ ↓ ← → ← → B A B A@@}}
{{@@CC BY - SA CC - SA BY - - - -@@}}
[[/div]]
[[/div]]
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
@@ @@
+ 自定义
除此之外，**至上主义**还内置了一系列 CSS 变量，可以被修改以改变其外观。此处展示的是版式的部分变量：
[[tabview]]
[[tab 一级色彩变量]]
此分页展示的是版式的全部**一级色彩变量**，改变它们可以快速地改变版式的整体色彩风格。
[[code type="CSS"]]
:root {
--global-white-color: 248, 248, 248;
--global-pale-color: 235, 235, 235;
--global-light-color: 180, 180, 180;
--global-dark-color: 90, 90, 90;
--global-black-color: 30, 30, 30;
--global-accent-1: 68, 123, 230;
--global-accent-2: 24, 80, 187;
--global-accent-3: 23, 24, 120;
--alt-color: 221, 102, 17;
--warning-color: 193, 44, 50;
--accept-color: 20, 169, 32;
--neutral-color: 193, 147, 44;
}
[[/code]]
[[/tab]]
[[tab 次级色彩变量]]
此处展示的是版式的全部**二级颜色变量**，改变它们可以快速实现对一部分特定元素的色彩样式更改而不影响其它元素。
[[code type="CSS"]]
:root {
--global-bg: var(--global-white-color);
--global-txt: var(--global-black-color);
--light-ui-bg: var(--global-pale-color);
--light-ui-txt: var(--global-black-color);
--dark-ui-bg: var(--global-dark-color);
--dark-ui-txt: var(--global-white-color);
--bright-ui-bg: var(--global-accent-2);
--bright-ui-txt: var(--dark-ui-txt);
--global-border: var(--global-light-color);
--link-primary: var(--global-accent-2);
--link-hover: var(--global-accent-1);
--link-visited: var(--global-accent-3);
--link-newpage: var(--alt-color);
}
[[/code]]
此处展示的是版式的全部**三级颜色变量**，改变它们可以实现相较二级色彩变量更加精准的色彩样式更改。
[[code type="CSS"]]
:root {
--body-bg: var(--global-bg);
--body-txt: var(--global-txt);
--header-bg: var(--light-ui-bg);
--header-txt: var(--light-ui-txt);
--header-hover-bg: var(--dark-ui-bg);
--header-hover-txt: var(--dark-ui-txt);
--topbar-bg: var(--header-bg), 0;
--topbar-txt: var(--header-txt);
--topbar-hover-bg: var(--dark-ui-bg);
--topbar-hover-txt: var(--dark-ui-txt);
--topbar-border: var(--global-border), .8;
--dropdown-bg: var(--header-bg);
--dropdown-txt: var(--header-txt);
--dropdown-hover-bg: var(--bright-ui-bg);
--dropdown-hover-txt: var(--bright-ui-txt);
--dropdown-border: var(--topbar-border);
--search-bg: var(--header-bg), 0;
--search-txt: var(--header-txt);
--search-hover-bg: var(--header-hover-bg);
--search-hover-txt: var(--header-hover-txt);
--user-bg: var(--header-bg), 0;
--user-txt: var(--header-txt);
--user-hover-bg: var(--header-hover-bg);
--user-drop-bg: var(--header-hover-bg);
--user-drop-txt: var(--topbar-hover-txt);
--user-hover-drop-bg: var(--dropdown-hover-bg);
--user-hover-drop-txt: var(--dropdown-hover-txt);
--openmenu-bg: var(--header-bg), 0;
--openmenu-txt: var(--header-txt);
--openmenu-hover-bg: var(--header-hover-bg);
--openmenu-hover-txt: var(--header-hover-txt);
--sidebar-bg: var(--global-bg);
--heading-bg: var(--dark-ui-bg);
--heading-txt: var(--dark-ui-txt);
--heading-border: var(--global-light-color);
--menu-bg: var(--light-ui-bg);
--menu-txt: var(--light-ui-txt);
--menu-hover-bg: var(--bright-ui-bg);
--menu-hover-txt: var(--bright-ui-txt);
--scrollbar-track: var(--light-ui-bg), .4;
--scrollbar-thumb: var(--dark-ui-bg);
--rate-bg: var(--light-ui-bg);
--rate-txt: var(--light-ui-txt);
--rateup-bg: var(--rate-bg);
--rateup-txt: var(--accept-color);
--ratedown-bg: var(--rate-bg);
--ratedown-txt: var(--warning-color);
--cancel-bg: var(--rate-bg);
--cancel-txt: var(--neutral-color);
--info-bg: var(--rate-bg);
--info-txt: var(--global-accent-2);
--tabview-bg: var(--light-ui-bg);
--tabview-txt: var(--light-ui-txt);
--tabview-hover-bg: var(--bright-ui-bg);
--tabview-hover-txt: var(--bright-ui-txt);
--tabview-selected-bg: var(--dark-ui-bg);
--tabview-selected-txt: var(--dark-ui-txt);
--toc-bg: var(--light-ui-bg);
--toc-txt: var(--light-ui-txt);
--toc-heading-bg: var(--dark-ui-bg);
--toc-heading-hover-bg: var(--bright-ui-bg);
--toc-heading-hover-txt: var(--bright-ui-txt);
--toc-heading-txt: var(--dark-ui-txt);
--toc-border: var(--global-border);
--th-bg: var(--light-ui-bg);
--th-txt: var(--light-ui-txt);
--td-bg: var(--global-bg);
--td-txt: var(--global-txt);
--light-block-bg: var(--light-ui-bg);
--light-block-txt: var(--light-ui-txt);
--dark-block-bg: var(--dark-ui-bg);
--dark-block-txt: var(--dark-ui-txt);
--global-fader-bg: var(--global-black-color), .8;
--btn-bg: var(--light-ui-bg);
--btn-txt: var(--light-ui-txt);
--btn-hover-bg: var(--dark-ui-bg);
--btn-hover-txt: var(--dark-ui-txt);
--bottombar-bg: var(--light-ui-bg);
--bottombar-txt: var(--light-ui-txt);
}
[[/code]]
[[/tab]]
[[tab 其它变量]]
此处展示的是用于修改部分页面元素尺寸的**布局变量**，修改它们可以快速改变版式的局部布局。
[[code type="CSS"]]
:root {
--header-height: 3rem;
--topbar-height: 2rem;
--banner-height: 10rem;
--dropdown-height: 2rem;
--sidebar-width: 15rem;
--content-width: 48rem;
--header-ui-size: var(--header-height);
--user-icon-padding: 0.5rem;
--user-drop-width: 9rem;
--user-drop-height: 3rem;
--global-border-width: 0.1rem;
--topbar-border-width: var(--global-border-width);
--dropdown-border-width: var(--global-border-width);
--global-font-size: 0.975rem;
--header-title-size: calc(0.5rem + 1.6vw);
--topbar-size: calc(0.5rem + 0.5vw);
--dropdown-size: var(--topbar-size);
--banner-title-size: calc(2.5rem + 3vw);
--banner-subtitle-size: 1rem;
--rate-height: 1.2rem;
--toc-min-width: 12.5rem;
--toc-heading-height: 2rem;
}
[[/code]]
此处展示的是版式的**文本变量**，用于改变页眉与横幅处的文本。
[[code type="CSS"]]
:root {
--header-title: "基金会中文维基";
--banner-title: "SUPREMATISROOMS.";
--banner-subtitle: "几何至上";
}
[[/code]]
此处展示的是版式使用的**字体变量**，用于改变特定区域的文本字体。
[[code type="CSS"]]
:root {
--banner-font: "Alumni Sans Pinstripe", "Zhuque Fangsong (technical preview)", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
--header-font: "Poiret One", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
--title-font: "Sulphur Point", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
--body-font: "Barlow", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
--ui-font: "Montserrat", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
--mono-font: "PT Mono", "Noto Serif SC", "Noto Serif TC", Consolas, monaco, monospace;
}
[[/code]]
[[/tab]]
[[/tabview]]
[[div class="footer-wikiwalk-nav"]]
[[=]]
<< [# 向前] | 至上主义 版式 | [# 向后] >>
[[/=]]
[[/div]]
----
[[include :scp-wiki-cn:component:license-box-theme
|author=LemonCat233 & Liurd
|lang=CN
]]
[[div class="blockquote"]]
“《白上白》（马列维奇，1918）”，作者马列维奇，隶属于公共领域（Public Domain）。
[[/div]]
[[include :scp-wiki-cn:component:license-box-end]]
[[/iftags]]
[[iftags [[#ifexpr {$static-header} == (true) | - ]]]]
[[module css]]
:root {
--openmenu-bg: var(--header-bg);
}
#header, #header h1, #search-top-box, #top-bar, #header-extra-div-1 {
position: static;
}
#login-status {
position: relative;
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$left-header} == (true) | - ]]]]
[[module css]]
#header h1 a {
justify-content: flex-start;
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$no-header-desktop} == (true) | - ]]]]
[[module css]]
@media (min-width: 768px) {
:root{
--header-height: 0px;
--topbar-height: 3rem;
--header-ui-size: var(--topbar-height);
}
#header h1 {
display: none;
}
#login-status, #search-top-box {
grid-row: 1 / 3;
}
#top-bar {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$collapse-sidebar-desktop} == (true) | - ]]]]
[[module css]]
@media (min-width: 768px) {
:root {
--openmenu-bg: var(--header-bg), .8;
}
#side-bar::before {
height: 100%;
}
#side-bar::after {
top: calc(50% - 7.5rem);
height: 15rem;
border-radius: 0 var(--header-ui-size) var(--header-ui-size) 0;
backdrop-filter: blur(0.1rem);
}
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$show-sidebar} == (true) | - ]]]]
[[module css]]
@media (min-width: 64rem) {
#content-wrap {
gap: 1rem;
margin: calc(0px - var(--header-height) - var(--topbar-height)) auto 0;
}
#side-bar {
position: sticky;
top: calc(var(--header-height) + var(--topbar-height));
left: 0;
z-index: initial;
}
#side-bar::before, #side-bar::after {
display: none;
}
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$fullscreen} == (true) | - ]]]]
[[module css]]
:root {
--content-width: 100%;
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$big-banner} == (true) | - ]]]]
[[module CSS]]
:root {
--banner-height: calc(100vh - var(--header-height) - var(--topbar-height));
}
/* 没必要加但是这个很好看所以我留下来了 —— 柠檬猫
#header h2::before {
content: "";
display: block;
position: absolute;
top: calc(100vh * 0.5 - 11rem);
right: calc(46vw);
width: 24rem;
height: 24rem;
border: 1px solid rgb(var(--dark-ui-bg));
transform: rotate(30deg);
opacity: 0.5;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
pointer-events: none;
} */
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$minecraft} == (true) | - ]]]]
[[module CSS]]
:root {
--banner-subtitle-size: 1.25rem;
--header-title: "中文 MINECRAFT WIKI";
--banner-title: "SUPREMATISCRAFTS.";
--banner-subtitle: "几何至上！";
}
@keyframes mc-subtitle {
from {
transform: rotate(-20deg) scale(1, 1);
}
to {
transform: rotate(-20deg) scale(1.5, 1.5);
}
}
#header h2 span {
position: relative;
}
#header h2 span::after {
position: absolute;
right: -4rem;
bottom: 3.25rem;
color: rgb(255, 237, 102);
text-shadow: 1px 0 rgb(var(--global-dark-color)), -1px 0 rgb(var(--global-dark-color)), 0 1px rgb(var(--global-dark-color)), 0 -1px rgb(var(--global-dark-color));
animation: mc-subtitle 0.5s infinite ease-in-out alternate-reverse;
}
.owindow.owait .content p {
font-size: 0;
}
.owindow.owait .content p::before {
content: "保存世界中 . . . ";
font-size: var(--global-font-size);
}
.owindow.owait .content::after {
background: linear-gradient(to bottom, LawnGreen 0%, LawnGreen 30%, SaddleBrown 30%, SaddleBrown 100%, Brown 100%);
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$no-banner} == (true) | - ]]]]
[[module css]]
#header h2 {
display: none;
}
#header {
top: calc(0px - var(--header-height) - var(--topbar-height));
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$evernight} == (true) | - ]]]]
[[module css]]
:root {
--global-light-color: 90, 90, 90;
--global-dark-color: 60, 60, 60;
--global-accent-1: 68, 123, 230;
--global-accent-2: 94, 150, 255;
--global-accent-3: 113, 114, 190;
--global-bg: var(--global-black-color);
--global-txt: var(--global-white-color);
--light-ui-bg: var(--global-black-color);
--light-ui-txt: var(--global-pale-color);
--dark-ui-bg: var(--global-dark-color);
--dark-ui-txt: var(--global-white-color);
}
#side-bar .side-block.media > div > a > img {
filter: invert(1);
}
[[/module]]
[[/iftags]]
[[iftags [[#ifexpr {$scp} == (true) | - ]]]]
[[module css]]
:root {
--global-white-color: 252, 252, 252;
--global-pale-color: 244, 244, 244;
--global-light-color: 215, 215, 215;
--global-dark-color: 48, 48, 52;
--global-black-color: 25, 20, 16;
--global-accent-1: 100, 3, 15;
--global-accent-2: 133, 0, 5;
--global-accent-3: 100, 46, 44;
--header-bg: var(--dark-ui-bg);
--header-txt: var(--dark-ui-txt);
--topbar-hover-bg: 48, 48, 52;
--topbar-border: var(--global-txt);
--dropdown-bg: var(--topbar-hover-bg);
--th-bg: var(--dark-ui-bg);
--th-txt: var(--dark-ui-txt);
--btn-bg: var(--dark-ui-bg);
--btn-txt: var(--dark-ui-txt);
--btn-hover-bg: var(--bright-ui-bg);
--btn-hover-txt: var(--bright-ui-txt);
--bottombar-bg: var(--dark-ui-bg);
--bottombar-txt: var(--dark-ui-txt);
--banner-title: "SCP 基金会";
--banner-subtitle: "控制·收容·保护";
--logo-image: url(https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg);
--banner-font: var(--ui-font);
}
#header-extra-div-1 {
background: repeating-linear-gradient(-45deg, rgba(var(--light-ui-bg), 0.05) 0, rgba(var(--light-ui-bg), 0.1) .5rem, rgba(var(--dark-ui-bg), 0.1) .5rem, rgba(var(--dark-ui-bg), 0.05) 1rem), linear-gradient(to right,rgba(var(--bright-ui-bg), 1), rgba(var(--bright-ui-bg), 0.6));
background-repeat: no-repeat;
box-shadow: 0 0.2rem 0.5rem 0rem rgba(var(--global-dark-color), 0.6);
}
#header h2 {
position: relative;
}
#header h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(var(--global-txt), 0), rgba(var(--global-txt), 0.2));
-webkit-mask-image: var(--logo-image);
mask-image: var(--logo-image);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: min(100%, 24rem);
mask-size: min(100%, 24rem);
-webkit-mask-position: center;
mask-position: center;
z-index: -1;
}
#header h2::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(var(--header-bg), 0), rgba(var(--header-bg), 0.2));
z-index: -2;
}
#header h2 span::before {
font-weight: 300;
}
#license-area {
--link-primary: var(--dark-ui-txt);
--link-hover: var(--dark-ui-txt);
--link-visited: var(--dark-ui-txt);
}
[[/module]]
[[/iftags]]