OTTOWiki:Test

CSS 样式测试页面

此页面用于测试站点的 Common.css 或相关皮肤样式表。

@font-face – 字体声明

此部分测试自定义字体的应用情况。

• 站点 Logo / 标题（FOT-Rodin Pro）: 这个字体通常应用于特定元素，如下面的标题。
• 正文字体（霞鹜文楷）: 这是页面的主要中文字体，您现在看到的这段文字就应该应用了该字体。This is an example of English text. 12345.
• 英文衬线（Merriweather）: This font is used for serif English text.
• 等宽字体（JetBrains Mono / 霞鹜文楷 Mono）: 用于代码和编辑器。

---

代码块中的中文字体应为 “霞鹜文楷 Mono”。
Code block English font should be "JetBrains Mono".

全局细线滚动条样式

此部分测试滚动条样式。如果下方区域内容溢出，则会出现自定义的细线滚动条。

这是一个用于测试滚动条的容器。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。
请滚动查看效果。

编辑器（WikiEditor / CodeMirror）

这部分样式应用于 wiki 的源代码编辑器。要测试它，请编辑本页面，观察编辑框的字体、背景、边框等是否符合预期。预期的字体应为 "WenKai Mono" 和 "JetBrains Mono"。

<pre&g t; / / .mw-code

以下是不同代码高亮元素的样式测试。

使用 标签： This is an inline code snippet. 这是一个行内代码片段。

使用

 标签：'''
<pre>
This is a preformatted text block.
这是预格式化的文本块。
font-family: "JetBrains Mono", monospace;

使用

 标签（生成 .mw-code）：'''
<syntaxhighlight lang="css">
.mw-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95em;
  background-color: var(--background-color-neutral-subtle,#f9f9f9);
}

跨 Wiki 链接

此部分测试非本站的跨 Wiki 链接颜色。

• （预期颜色） 这是一个指向维基百科的链接：跨维基链接
• 这是一个普通的站内链接：首页

注意：悬停 (hover) 时，跨维基链接颜色应变为 #00D7A8。

黑幕（Heimu）

此部分测试黑幕（剧透）样式。需要将鼠标悬停在黑色区域上才能看到内容。

普通文本黑幕： 你知道吗？其实这段文字被隐藏了。

带链接的黑幕： 点击这里查看一个隐藏的链接，看看它的颜色变化。

黑幕中的各种链接（悬停时颜色应不同）：

• 内部链接：内部链接
• 已访问内部链接：已访问链接 (请先点击一次)
• 外部链接：外部链接

Navbox 导航框

这是一个模拟 Navbox 模板生成的表格，用于测试其各个部分的背景颜色和样式。

InfoBox 信息框

这是一个模拟 InfoBox 模板的测试用例。

InfoBox 标题

File:Example.jpg

这里是 InfoBox 的主要文本内容。

这是底栏内容

设备差异显示

以下内容会根据您的屏幕宽度（设备类型）而显示或隐藏。

这段文字仅在桌面端（宽度 > 1119px）显示。

这段文字仅在移动端（宽度 < 1120px）显示。

Infobox2

这是一个模拟 Infobox2 模板的测试用例。在移动设备上它应该会变为全宽显示。

<tbody> </tbody>

Infobox2 顶部标题
File:Example.jpg
横栏副标题
标签1	数据1
标签2	数据2
标签3	数据3

InfoTop 顶部信息框

这是一个模拟 InfoTop 模板的测试用例。

InfoTop 标题

File:Example.jpg

这里是 InfoTop 的主要文本内容。

这是底栏内容

滥用过滤器提示

这些是滥用过滤器警告框的样式。

阻止 (Disallowed):

操作被阻止 您的编辑触发了滥用过滤器。这是阻止提示的样式。

警告 (Warning):

警告 您的编辑可能存在问题。这是警告提示的样式。

Mermaid 图表

测试 Mermaid 扩展生成的 SVG 图表的样式。

<mermaid> graph TD;

   A-->B;
   A-->C;
   B-->D;
   C-->D;

</mermaid>