游戏指南 版式
2022年3月9日
修订 10
核心指标
评分
84
↑ 84
↓ 0
支持率
100%
总票数 84
Wilson 95% 下界
95.6%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
加载图表中...
最近修订
1 / 4
最近投票
1 / 9
2025-10-12
2025-09-30
2025-06-04
2025-05-05
2025-05-03
2025-04-19
2025-02-26
2025-01-26
2025-01-19
2024-11-16
页面源码
源码字符数 59406文字字数 1470
[!-- {$clear}
[[module ThemePreviewer noUi="true" theme_url="https://sigma9.scpwikicn.com/cn/cn/sigma9_ch.min.css"]]
[!-- --]
[!-- {$inc-css-only}
[[module css]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme:steam-guide/1");
[[/module]]
[!-- --]
[!-- {$inc-source}
[[include :scp-wiki:component:toggle-sidebar]]
[[module css]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme:steam-guide/1");
[[/module]]
[!-- --]
[!-- {$inc-preview}
[[module css]]
#page-title {
display: none;
}
[[/module]]
[[div id="preview" style="display: none;"]]
+ 总览
[[/div]]
[[module listpages range="."]]
[[div class="guidePriview"]]
[[div class="priviewIcon" style="display: {$icon};"]]
[[image {$icon}]]
[[/div]]
[[div_ class="priviewTitle"]]
[[span class="title"]]%%title%%[[/span]]
由 %%created_by%% [[#ifexpr {$exauthor} >= 1 | 和其他 {$exauthor} 人合作完成]][[#ifexpr {$exauthor} == 0 | 制作]]
[[/div]]
[[div class="priviewRate rate[[#ifexpr %%rating_votes%% >= 15 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% < 0.2 | 5 ]][[#ifexpr %%rating_votes%% >= 15 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% >= 0.2 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% < 0.4 | 4 ]][[#ifexpr %%rating_votes%% >= 15 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% >= 0.4 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% < 0.6 | 3 ]][[#ifexpr %%rating_votes%% >= 15 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% >= 0.6 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% < 0.8 | 2 ]][[#ifexpr %%rating_votes%% >= 15 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% >= 0.8 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% < 1 | 1 ]][[#ifexpr %%rating_votes%% >= 15 && (%%rating_votes%%-%%rating%%)/2/%%rating_votes%% > 1 | 6 ]][[#ifexpr %%rating_votes%% < 15 | 0 ]]"]]
[[div class="rateStar star1"]]
[[/div]]
[[div class="rateStar star2"]]
[[/div]]
[[div class="rateStar star3"]]
[[/div]]
[[div class="rateStar star4"]]
[[/div]]
[[div class="rateStar star5"]]
[[/div]]
[[div_ class="rateNumber"]]
%%rating_votes%% 个评分
[[/div]]
[[/div]]
[[div class="priviewbr"]]
----
[[/div]]
[[div_ class="priviewContent"]]
{$content}
[[/div]]
[[/div]]
[[/module]]
[!-- --]
[!-- {$inc-sticky}
[[div class="priviewSticky"]]
{$content}
[[/div]]
[!-- --]
[!-- {$inc-sidebar-start}
[[div class="guideContainer"]]
[[div class="sidebarButton"]]
[[a href="#u-side-bar2"]]≡[[/a]]
[[/div]]
[[div id="u-side-bar2" class="guideSidebar"]]
[[a href="###" class="close-menu"]]
[[image https://cdn.jsdelivr.net/gh/scp-cn-tech/sigma9@cn/img/black.png style="z-index=-1; opacity: 0.3;"]]
[[/a]]
[[div class="sidebarPanel"]]
创建者
[!-- --]
[!-- {$inc-creator}
[[div class="sidebarCreator {$status}"]]
[[image {$icon}]]
[[a_ class="creatorLink" href="{$link}"]][[/a]]
[[div_ class="creatorStatus"]]
[[span class="username"]]{$name}[[/span]]
[[span class="status"]]@@ @@[[/span]]
[[span class="playing"]]{$game}[[/span]]
[[/div]]
[[/div]]
[!-- --]
[!-- {$inc-sidebar-end}
----
[[module listpages range="."]]
[[div_ class="sidebarTags"]]
%%tags_linked%%
[[/div]]
[[/module]]
----
[[module listpages range="."]]
[[div class="sidebarDate"]]
[[div_ class="dateDescription"]]
发表于
更新日期
[[/div]]
[[div_ class="dateSelf"]]
%%created_at|%Y 年 %m 月 %d 日 %H:%M%%
%%updated_at|%Y 年 %m 月 %d 日 %H:%M%%
[[/div]]
[[/div]]
[[/module]]
[[/div]]
[[div class="sidebarPanel"]]
[[module listpages range="."]]
[[div class="sidebarVisitor"]]
[[div_ class="visitorNumber"]]
%%size%%
%%rating_votes%%
[[/div]]
[[div_ class="visitorDescription"]]
本页面字符数
当前评分人数
[[/div]]
[[/div]]
[[/module]]
[[/div]]
[!-- --]
[!-- {$inc-panel-start}
[[div class="sidebarPanel"]]
[!-- --]
[!-- {$inc-panel-end}
[[/div]]
[!-- --]
[!-- {$inc-content-start}
[[div class="sidebarPanel sidebarToc"]]
指南索引
[[toc]]
[[/div]]
[[/div]]
[[div class="guideContent"]]
[!-- --]
[!-- {$inc-content-end}
[[/div]]
[[/div]]
[!-- --]
[!-- {$achi-left}
[[div class="achi-flexbox"]]
[[div class="achi-flex"]]
[!-- --]
[!-- {$achi-right}
[[div class="achi-flex"]]
[!-- --]
[!-- {$inc-achi}
[[div class="achi-user"]]
{$achi-user} 已达成
[[/div]]
[[div class="achi-container"]]
[[div class="achi-img"]]
[[image {$achi-image}]]
[[/div]]
[[div class="achi-text-cont"]]
[[div class="achi-text"]]
+++ {$achi-title}
+++++ {$achi-subtitle}
[[/div]]
[[/div]]
[[/div]]
[!-- --]
[!-- {$achi-left}
[[/div]]
[!-- --]
[!-- {$achi-right}
[[/div]]
[[/div]]
[!-- --]
[[iftags +版式]]
[[module ListPages offset="@URL|0" range="."]]
[[%%content{0}%%module css]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme:steam-guide/1");
[[%%content{0}%%/module]]
[[>]]
**评分：**
[[%%content{0}%%module Rate]]
[[/>]]
[[>]]
**评分模块与著作信息模块：**
[[/>]]
[[%%content{0}%%include :scp-wiki-cn:credit:start]]
页面信息
[[%%content{0}%%include :scp-wiki-cn:credit:more]]
更多页面信息
[[%%content{0}%%include :scp-wiki-cn:credit:end]]
[[>]]
**著作信息模块：**
[[/>]]
[[%%content{0}%%include :scp-wiki-cn:credit:start-standalone]]
页面信息
[[%%content{0}%%include :scp-wiki-cn:credit:more-standalone]]
更多页面信息
[[%%content{0}%%include :scp-wiki-cn:credit:end-standalone]]
这是由 [[*user hoah2333]] 制作的美学版式，不与任何 SCP、故事、GoI 格式、设定所挂钩。在设计上参考了 [[*user Croquembouche]] 的[[[theme:ar|安德森机器人版式]]]。
本版式亦有一个指南版本，[http://scp-wiki-cn.wikidot.com/theme:steam-guide/offset/1/page2_limit/1 点此查看]。
本版式亦有一个指南版本，[http://scp-wiki-cn.wikidot.com/theme:steam-guide/offset/1/page2_limit/1 点此查看]。
本版式亦有一个指南版本，[http://scp-wiki-cn.wikidot.com/theme:steam-guide/offset/1/page2_limit/1 点此查看]。
若需使用本版式，请在所需使用的文章开头加上以下代码：
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-css-only=--]]]@@
[[/div]]
你可以在 [[include]] 之后使用如下 CSS 模块来修改标题、副标题和标志。
[[div class="blockquote code"]]
:root {
@@ --title: "页眉大标题";@@
@@ --subtitle: "页眉副标题";@@
@@ --icon: url("自定义标志链接");@@
}
[[/div]]
----
+ 示例
[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Apenumbra/tb.png|caption=图像。|width=200px]]
可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
一个普通的__下划__**加粗**//斜体//--删除--{{等宽}}__**//--{{字}}--//**__
另一个普通的 __下划__ **加粗** //斜体// --删除-- {{等宽}} __**//--{{字}}--//**__
| [https://www.baidu.com/ 这是一个链接！] | [[[4o4-n0t-f0und|一个空链接！]]] | [[a href="http://scp-wiki-cn.wikidot.com/"]]一个普通的__下划__**加粗**//斜体//--删除--{{等宽}}__**//--{{链接}}--//**__[[/a]] | [[a href="http://scp-wiki-cn.wikidot.com/"]]另一个普通的 __下划__ **加粗** //斜体// --删除-- {{等宽}} __**//--{{链接}}--//**__[[/a]]
@@ @@
@@ @@
@@ @@
@@ @@
[[collapsible show="+ 折叠 - 点击这里" hide="- 折叠 - 点击这里"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
~~~~
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。[[footnote]]这是一个脚注。[[/footnote]]
这是一个长的 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]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
@@ @@
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
>> 嵌套引用块
>> -----
>> 嵌套引用块里的分割线
>>
>>> 嵌套嵌套引用块
>>> -----
>>> 嵌套嵌套引用块里的分割线
>>>
>>>> 够了，禁止套娃
@@ @@
||~ 这是 ||~ 表格 ||
|| 你应该老早 || 就知道怎么 ||
|||| 做这个了吧 ||
|| 1 || 2 ||
|| 3 || 4 ||
|| 谁是这里 || 最厉害的？ ||
|| #十六进制 || #至高无上 ||
----
本版式亦有一个指南版本，[http://scp-wiki-cn.wikidot.com/theme:steam-guide/offset/1/page2_limit/1 点此查看]。
[[/module]]
[[module ListPages limit="@URL|0" range="." urlAttrPrefix="page2"]]
[[%%content{0}%%include :scp-wiki:component:toggle-sidebar]]
[[%%content{0}%%module css]]
@import url("https://scp-wiki-cn.wdfiles.com/local--code/theme:steam-guide/1");
#page-title {
display: none;
}
.options table.wiki-content-table td {
border: none;
padding: 0.7em 1em;
}
.options table.wiki-content-table {
width: 100%;
}
[[%%content{0}%%/module]]
[[div id="preview" style="display: none;"]]
+ 总览
[[/div]]
[[div class="guidePriview"]]
[[div class="priviewIcon"]]
[[image https://hoah-lab.wikidot.com/local--files/scp-cn-2689/orange-tabby-2273817_1920.jpg]]
[[/div]]
[[div_ class="priviewTitle"]]
[[span class="title"]]游戏指南 版式[[/span]]
由 hoah2333 制作
[[/div]]
[[div class="priviewRate rate0"]]
[[div class="rateStar star1"]]
[[/div]]
[[div class="rateStar star2"]]
[[/div]]
[[div class="rateStar star3"]]
[[/div]]
[[div class="rateStar star4"]]
[[/div]]
[[div class="rateStar star5"]]
[[/div]]
[[div_ class="rateNumber"]]
? 个评分
[[/div]]
[[/div]]
[[div class="priviewbr"]]
----
[[/div]]
[[div_ class="priviewContent"]]
这是游戏指南版式的第二种形态，详细使用教程参见正文部分。
@@@@
--超级变换形态！--
[[/div]]
[[/div]]
[[div class="priviewSticky"]]
[[%%content{0}%%module rate]]
[[/div]]
[[div class="guideContainer"]]
[[div class="sidebarButton"]]
[[a href="#u-side-bar2"]]≡[[/a]]
[[/div]]
[[div id="u-side-bar2" class="guideSidebar"]]
[[a href="###" class="close-menu"]]
[[image https://cdn.jsdelivr.net/gh/scp-cn-tech/sigma9@cn/img/black.png style="z-index=-1; opacity: 0.3;"]]
[[/a]]
[[div class="sidebarPanel"]]
创建者
[[div class="sidebarCreator in-game"]]
[[image http://www.wikidot.com/avatar.php?userid=4915183]]
[[a_ class="creatorLink" href="http://www.wikidot.com/user:info/hoah2333"]][[/a]]
[[div_ class="creatorStatus"]]
[[span class="username"]]hoah2333[[/span]]
[[span class="status"]]@@ @@[[/span]]
[[span class="playing"]]Apex Legends[[/span]]
[[/div]]
[[/div]]
----
[[div_ class="sidebarTags"]]
[http://scp-wiki-cn.wikidot.com/system:page-tags/tag/%E7%89%88%E5%BC%8F#pages 版式] [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/%E5%8E%9F%E5%88%9B#pages 原创]
[[/div]]
----
[[div class="sidebarDate"]]
[[div_ class="dateDescription"]]
发表于
更新日期
[[/div]]
[[div_ class="dateSelf"]]
2022 年 3 月 9 日 23:59
2035 年 14 月 57 日 43:87
[[/div]]
[[/div]]
[[/div]]
[[div class="sidebarPanel"]]
[[div class="sidebarVisitor"]]
[[div_ class="visitorNumber"]]
99999
? 人
[[/div]]
[[div_ class="visitorDescription"]]
本页面字符数
当前评分人数
[[/div]]
[[/div]]
[[/div]]
[[div class="sidebarPanel"]]
[[/div]]
[[div class="sidebarPanel sidebarToc"]]
指南索引
[[toc]]
[[/div]]
[[/div]]
[[div class="guideContent"]]
正如你所见，这是本版式所附带的指南版本。由于 Wikidot 限制，本演示的效果与实际使用效果并非完全相同。若需查看实际效果，请参见[[[2022-cn-game-crossover-contest-hub|]]]
指南版本的使用方法较为复杂，请仔细阅读以下使用说明。你需要填入所有未标记为“//（可选）//”的参数。缺少参数将会导致组件无法正常运作。
首先插入组件的样式代码：
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-source=--]]]@@
[[/div]]
[[div class="options"]]
|| **inc-source** || 辨识符 _
使页面读取版式的样式代码，仅可且必须填入 {{@@--]@@}}。 ||
[[/div]]
随后是总览部分，即位于本页面最顶上的一个框体。以下为总览部分的全部参数说明。//本部分为可选部分。//
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-preview=--]@@
|exauthor=0
|icon=@@https://scp-wiki-cn.wikidot.com/local--files/scp-cn-2689/orange-tabby-2273817_1920.jpg@@
|content=此为示例
@@]]@@
[[/div]]
[[div class="options"]]
|| **inc-preview** || 辨识符 _
使页面读取版式的总览部分代码，仅可且必须填入 {{@@--]@@}}。 ||
|| **exauthor** || 合著作者 _
除页面发布者外的其他合著者人数。若无合著者可填写 {{0}}。 ||
|| **icon** || 标志图 _
位于总览部分左上角的图片。填入 {{none}} 以去除图片。 ||
|| **content** || 总览内容 _
总览部分的正文内容。要注意换行符在此处失效，需在两行之间插入一个 {{@@@@@@@@}}。 ||
[[/div]]
这是位于总览部分下方的悬浮栏。可以在其中放入作者信息或评分模块。//本部分为可选部分。//
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-sticky=--]@@
|content=[[module rate]]@@@@@@@@
@@]]@@
[[/div]]
[[div class="options"]]
|| **inc-sticky** || 辨识符 _
使页面读取版式的总览部分代码，仅可且必须填入 {{@@--]@@}}。 ||
|| **content** || 悬浮栏内容 ||
[[/div]]
最后是内容主体，包含有正文部分与侧边栏部分。
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-sidebar-start=--]]]@@
@@[[include :scp-wiki-cn:theme:steam-guide inc-sidebar-end=--]]]@@
@@[[include :scp-wiki-cn:theme:steam-guide inc-content-start=--]]]@@
正文内容
@@[[include :scp-wiki-cn:theme:steam-guide inc-content-end=--]]]@@
[[/div]]
[[div class="options"]]
|| **inc-sidebar-start** || 辨识符 _
使页面读取版式的侧边栏部分代码，并标记其为侧边栏起始，仅可且必须填入 {{@@--]@@}}。 ||
|| **inc-sidebar-end** || 辨识符 _
使页面读取版式的侧边栏部分代码，并标记其为侧边栏结束，仅可且必须填入 {{@@--]@@}}。 ||
|| **inc-content-start** || 辨识符 _
使页面读取版式的正文部分代码，并标记其为正文起始，仅可且必须填入 {{@@--]@@}}。 ||
|| **inc-content-end** || 辨识符 _
使页面读取版式的正文部分代码，并标记其为正文结束，仅可且必须填入 {{@@--]@@}}。 ||
[[/div]]
在侧边栏起始与侧边栏结束之间，可以插入一个或多个创作者模块。本部分为可选部分，但不插入可能会有显示问题。本部分可重复插入，或在正文部分引用。
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-creator=--]@@
|status=in-game
|icon=@@http://www.wikidot.com/avatar.php?userid=4915183@@
|name=hoah2333
|game=Apex Legends
|link=@@http://www.wikidot.com/user:info/hoah2333@@
@@]]@@
[[/div]]
[[div class="options"]]
|| **inc-creator** || 辨识符 _
使页面读取版式的创作者模块，仅可且必须填入 {{@@--]@@}}。 ||
|| **status** || 玩家状态 _
可填入 {{offline}}、{{online}}、{{in-game}}，分别对应离线、在线、游戏中。 _
在离线或在线状态时将不会显示正在游玩的游戏。 ||
|| **icon** || 玩家头像 ||
|| **name** || 玩家名称 ||
|| **game** _
//（可选）// || 正在游玩的游戏 ||
|| **link** || 链接 _
此即点击后需要跳转的链接，一般填入 Wikidot 个人资料页面或者作者页链接。 ||
[[/div]]
在侧边栏结束与正文开始之间，可以插入一个或多个额外侧边栏板块。//本部分为可选部分。//
[[div class="code"]]
@@[[include :scp-wiki-cn:theme:steam-guide inc-panel-start=--]]]@@
额外侧边栏板块正文
@@[[include :scp-wiki-cn:theme:steam-guide inc-panel-end=--]]]@@
[[/div]]
[[div class="options"]]
|| **inc-panel-start** || 辨识符 _
使页面读取版式的板块部分代码，并标记其为板块起始，仅可且必须填入 {{@@--]@@}}。 ||
|| **inc-panel-end** || 辨识符 _
使页面读取版式的板块部分代码，并标记其为板块结束，仅可且必须填入 {{@@--]@@}}。 ||
[[/div]]
在正文开始与正文结束之间填写正文内容。
----
[[/div]]
[[/div]]
[[/module]]
[[collapsible show="+ 展开代码" hide="- 收起代码"]]
[[code type="css"]]
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
:root {
--icon: url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg");
--title: "SCP基金会";
--subtitle: "控制 · 收容 · 保护";
--trans-time: 0.25s;
--text-color: 150, 150, 150;
--text-color2: 180, 180, 180;
--text-color3: 200, 200, 200;
--text-color4: 90, 90, 90;
--link-color: 235, 235, 235;
--accent-color: 102, 192, 244;
--accent-color2: 90, 169, 214;
--accent-color3: 93, 126, 16;
--accent-color4: 126, 166, 75;
--accent-color5: 49, 99, 130;
--accent-color6: 84, 133, 183;
--accent-color7: 142, 201, 64;
--accent-color8: 86, 106, 129;
--accent-color9: 225, 27, 27;
--upvote-color: 103, 174, 77;
--downvote-color: 167, 74, 74;
--novote-color: 255, 200, 61;
--bg-color: 27, 41, 56;
--bg-color2: 36, 56, 77;
--bg-color3: 53, 70, 94;
--top-bg-color: 23, 26, 33;
--online-color: linear-gradient(to bottom, #41778f 5%, #3d697b 95%);
}
/*
* 全局修改
*/
body {
color: rgba(var(--text-color, 150, 150, 150), 1);
}
a,
a.newpage,
a:visited {
color: rgba(var(--link-color, 235, 235, 235), 1);
-webkit-transition: var(--trans-time, 0.25s) color;
-o-transition: var(--trans-time, 0.25s) color;
-moz-transition: var(--trans-time, 0.25s) color;
transition: var(--trans-time, 0.25s) color;
}
a:focus-visible {
border: 1px solid rgba(255, 255, 255, 1);
}
a:hover {
text-decoration: none;
color: rgba(var(--accent-color, 102, 192, 244), 1);
}
div#container-wrap {
background: rgba(var(--bg-color, 27, 41, 56), 1);
}
h1 {
padding: 0;
margin: 0 0 10px 0;
color: rgba(var(--accent-color, 102, 192, 244), 1);
font-size: 20px;
line-height: 23px;
font-weight: normal;
font-family: 'Noto Sans SC', sans-serif;
}
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 8px 0 6px 0;
color: rgba(var(--accent-color2, 90, 169, 214), 1);
font-family: 'Noto Sans SC', sans-serif;
}
h2 {
font-size: 18px;
line-height: 21px;
font-weight: 400;
}
h3 {
font-size: 16px;
line-height: 19px;
font-weight: 300;
}
h4 {
font-size: 14px;
line-height: 17px;
font-weight: 300;
}
h5 {
font-size: 12px;
line-height: 19px;
font-weight: 300;
}
h6 {
font-size: 10px;
line-height: 15px;
font-weight: 300;
}
/*
* 顶栏修改
*/
#extra-div-1 {
z-index: 9;
position: absolute;
top: 0;
right: 0;
max-width: 100vw;
width: 100%;
height: 104px;
background: rgba(var(--top-bg-color, 23, 26, 33));
}
#header {
height: 104px;
background: var(--icon, url("https://cdn.jsdelivr.net/gh/Nu-SCPTheme/Black-Highlighter@gh-pages/img/logo.svg")) no-repeat;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-size: 50px 50px;
background-position: 10px 25px;
padding-bottom: 0;
}
#header h1,
#header h2 {
margin-left: 70px;
line-height: unset;
font-weight: bold;
}
#header h1 a {
padding: 20px 0 35px 0;
line-height: unset;
color: #c5c3c0;
font-family: 'Noto Sans SC', sans-serif;
text-shadow: none;
font-size: 28px;
}
#header h1 a span {
font-size: 0;
}
#header h1 a span::before {
content: var(--title, 'SCP基金会');
font-size: 28px;
}
#header h2 span {
line-height: unset;
max-height: unset;
padding: 0px 0;
color: #b7afa7;
font-family: 'Noto Sans SC', sans-serif;
text-shadow: none;
font-weight: normal;
font-size: 0;
}
#header h2 span::before {
content: var(--subtitle, '控制 · 收容 · 保护');
font-size: 14px;
}
#login-status {
padding-right: 40px;
font-size: 0;
}
#login-status span,
#login-status a,
#login-status div {
font-size: 12px;
}
#login-status .printuser a {
position: absolute;
right: 0px;
}
#login-status .printuser a img {
width: 32px;
height: 32px;
background: var(--online-color, linear-gradient(to bottom, #41778f 5%, #3d697b 95%)) !important;
padding: 2px;
}
#login-status>a[href="https://www.wikidot.com/account/messages"] {
background: rgba(var(--accent-color3, 93, 126, 16), 1);
display: inline-block;
margin: 0 3px 0 8px;
padding: 0 8px;
line-height: 24px;
}
#login-status>a[href="https://www.wikidot.com/account/messages"]:hover {
text-decoration: none;
background: rgba(var(--accent-color4, 126, 166, 75), 1);
}
#login-status>a[href="https://www.wikidot.com/account/messages"]>strong {
color: rgba(255, 255, 255, 1);
font-size: 12px;
}
#login-status>a[href="https://www.wikidot.com/account/messages"]>strong::after {
content: '\f0e0';
font-family: 'FontAwesome';
font-weight: normal;
padding-left: 5px;
}
#my-account {
display: none;
}
#login-status>a[href="https://www.wikidot.com/account/messages"]+#account-topbutton::before {
display: none;
}
#account-topbutton::before {
content: '\f0e0';
font-family: 'FontAwesome';
display: inline-block;
padding: 0 8px;
background: rgba(255, 255, 255, 0.1);
line-height: 24px;
margin: 0 3px 0 8px;
}
#account-topbutton {
font-weight: normal;
border: none;
padding: 0;
}
#account-options {
right: 40px;
background-color: rgba(var(--top-bg-color, 23, 26, 33), 0.9);
-webkit-box-shadow: 0 0 12px #000000;
-moz-box-shadow: 0 0 12px #000000;
box-shadow: 0 0 12px #000000;
border: none;
}
#account-options ul li a {
color: rgba(var(--text-color2, 180, 180, 180), 1);
padding: 5px 12px;
}
#account-options ul li a:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 0.1);
text-decoration: none;
}
#top-bar {
top: 36px;
left: 270px;
line-height: 16px;
font-size: 14px;
width: unset;
}
#top-bar ul {
float: left;
}
#top-bar {
width: 45em;
}
#top-bar ul li ul {
opacity: 0;
-webkit-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
transition: opacity 0.25s;
}
#top-bar ul li:hover ul,
#top-bar ul li.sfhover ul {
opacity: 1;
-webkit-transition: opacity 0.25s;
-o-transition: opacity 0.25s;
-moz-transition: opacity 0.25s;
transition: opacity 0.25s;
}
#top-bar .mobile-top-bar {
bottom: -10px;
}
#top-bar ul li a {
margin: unset;
padding: 5px 12px;
line-height: 160%;
max-height: unset;
border: 1px solid transparent;
color: transparent;
}
#top-bar .top-bar>ul>li>a,
#top-bar .mobile-top-bar>ul>li>a {
color: rgba(var(--text-color2, 180, 180, 180), 1);
}
#top-bar .top-bar ul li.sfhover ul li a,
#top-bar .mobile-top-bar ul li.sfhover ul li a,
#top-bar .top-bar ul li:hover ul li a,
#top-bar .mobile-top-bar ul li:hover ul li a,
#top-bar .top-bar ul li ul li a,
#top-bar .mobile-rop-bar ul li ul li a {
color: rgba(var(--text-color2, 180, 180, 180), 1);
padding: 5px 12px;
background-color: transparent;
border-color: transparent;
width: 200px;
}
#top-bar .top-bar ul li.sfhover ul,
#top-bar .mobile-top-bar ul li.sfhover ul,
#top-bar .top-bar ul li:hover ul,
#top-bar .mobile-top-bar ul li:hover ul,
#top-bar .top-bar ul li ul,
#top-bar .mobile-top-bar ul li ul {
background-color: rgba(var(--top-bg-color, 23, 26, 33), 0.9);
-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 12px rgba(0, 0, 0, 1);
box-shadow: 0 0 12px rgba(0, 0, 0, 1);
border: none;
}
#top-bar .top-bar>ul>li.sfhover>a,
#top-bar .top-bar>ul>li:hover>a,
#top-bar .mobile-top-bar>ul>li.sfhover>a,
#top-bar .mobile-top-bar>ul>li:hover>a,
#top-bar .top-bar ul li.sfhover ul li a:hover,
#top-bar .mobile-top-bar ul li.sfhover ul li a:hover,
#top-bar .top-bar ul li:hover ul li a:hover,
#top-bar .mobile-top-bar ul li:hover ul li a:hover,
#top-bar .top-bar ul li ul li a:hover,
#top-bar .mobile-top-bar ul li ul li a:hover,
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover,
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover,
#top-bar ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
color: rgba(255, 255, 255, 1);
}
#search-top-box {
top: 70px;
}
#search-top-box #search-top-box-form #search-top-box-input {
color: rgba(255, 255, 255, 1);
font-size: 14px;
text-shadow: 1px 1px 0px rgb(255 255 255 / 10%);
background-color: rgba(var(--accent-color5, 49, 99, 130), 1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
-moz-box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
box-shadow: 1px 1px 0px rgb(255 255 255 / 20%);
}
#search-top-box #search-top-box-form>input[type=submit],
#search-top-box #search-top-box-form>input[type=submit]:hover,
#search-top-box #search-top-box-form>input[type=submit]:focus,
#search-top-box #search-top-box-form>input[type=submit]:target {
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E") 50%/1rem no-repeat, #549dc9;
border: 1px solid rgba(var(--accent-color2, 90, 169, 214), 1);
position: relative;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 0;
height: 20px;
width: 20px;
bottom: 4px;
}
#search-top-box #search-top-box-form>input[type=submit]::before {
content: '\f002';
font-family: 'FontAwesome';
display: inline-block;
font-size: 14px;
width: 25px;
height: 25px;
}
/*
* 侧栏修改
*/
#top-bar .open-menu a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: solid 0.1em rgba(var(--accent-color2, 90, 169, 214), 1);
color: rgba(var(--accent-color2, 90, 169, 214), 1);
background-color: rgba(var(--accent-color6, 84, 133, 183), 0.2);
}
#side-bar .side-block {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background: rgba(var(--bg-color2, 36, 56, 77), 1) !important;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#side-bar .side-block:first-child div a img {
filter: invert(1);
}
#side-bar .side-block .menu-item a {
color: rgba(var(--link-color, 235, 235, 235), 1);
}
#side-bar .side-block .menu-item a:hover {
color: rgba(var(--accent-color, 102, 192, 244), 1);
}
#side-bar .side-block .menu-item>img {
opacity: 0;
}
#side-bar .side-block .heading {
color: rgba(var(--accent-color2, 90, 169, 214), 1);
border-bottom: solid 1px rgba(var(--text-color4, 90, 90, 90), 1);
}
#side-bar .side-block .collapsible-block-folded {
background: none;
}
#side-bar .side-block .collapsible-block-unfolded-link {
border-bottom: solid 1px rgba(var(--accent-color2, 90, 169, 214), 1);
}
#side-bar .side-block .collapsible-block-link {
color: rgba(var(--accent-color2, 90, 169, 214), 1);
}
#side-bar .side-block .collapsible-block-link:hover {
color: rgba(var(--accent-color, 102, 192, 244), 1);
}
/*
* 正文区域修改
*/
#content-wrap {
margin: 20px auto 0;
}
#main-content {
max-width: 948px;
}
#page-title,
#page-content .meta-title {
color: rgba(var(--accent-color, 102, 192, 244), 1);
}
#breadcrumbs,
#breadcrumbs a {
color: rgba(var(--text-color, 150, 150, 150), 1);
}
#breadcrumbs a:hover {
color: rgba(255, 255, 255, 1);
text-decoration: none;
}
#page-content .guidePriview {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
background-color: rgba(var(--accent-color6, 84, 133, 183), 0.2);
padding: 10px 16px 0;
margin-bottom: 20px;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#page-content .priviewIcon {
width: 74px;
height: 74px;
margin: 0 10px 3px 0;
}
#page-content .priviewTitle .title {
color: rgba(255, 255, 255, 1);
font-size: 30px;
margin: 0;
font-family: "Noto Sans SC", sans-serif;
}
#page-content .priviewTitle p {
margin: 0;
color: rgba(var(--text-color4, 90, 90, 90), 1);
}
#page-content .priviewRate {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: rgba(var(--accent-color7, 142, 201, 64), 1);
margin: 10px 0 0 auto;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#page-content .priviewRate .rateStar::before {
content: '\f005';
font-family: 'FontAwesome';
margin-left: 5px;
font-size: 24px;
color: rgba(var(--accent-color8, 86, 106, 129), 1);
}
#page-content .priviewRate.rate1 .rateStar.star1::before,
#page-content .priviewRate.rate2 .rateStar.star1::before,
#page-content .priviewRate.rate2 .rateStar.star2::before,
#page-content .priviewRate.rate3 .rateStar.star1::before,
#page-content .priviewRate.rate3 .rateStar.star2::before,
#page-content .priviewRate.rate3 .rateStar.star3::before,
#page-content .priviewRate.rate4 .rateStar.star1::before,
#page-content .priviewRate.rate4 .rateStar.star2::before,
#page-content .priviewRate.rate4 .rateStar.star3::before,
#page-content .priviewRate.rate4 .rateStar.star4::before,
#page-content .priviewRate.rate5 .rateStar::before {
color: rgba(var(--accent-color7, 142, 201, 64), 1);
}
#page-content .priviewRate.rate6 .rateStar::before {
color: rgba(var(--accent-color9, 225, 27, 27), 1);
}
#page-content .priviewRate.rate0 .rateNumber,
#page-content .priviewRate.rate6 .rateNumber {
font-size: 0;
}
#page-content .priviewRate.rate0 .rateNumber::before {
content: "评价数不足";
font-size: 12px;
color: rgba(var(--text-color4, 90, 90, 90), 1);
}
#page-content .priviewRate.rate6 .rateNumber::before {
content: "负分作品";
font-size: 12px;
}
#page-content .priviewRate .rateNumber {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-moz-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
width: 100%;
text-align: right;
color: rgba(var(--text-color, 150, 150, 150), 1);
}
#page-content .priviewRate .rateNumber p,
#page-content .priviewContent p {
margin: 0;
}
#page-content .priviewbr {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-moz-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
width: 100%;
}
#page-content .priviewbr hr {
background-color: rgba(var(--text-color4, 90, 90, 90), 1);
margin: 10px 0;
}
#page-content .priviewContent {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-moz-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
font-size: 17px;
color: rgba(var(--text-color3, 200, 200, 200), 1);
margin-top: 10px;
line-height: 22px;
padding: 0 8px 16px 0;
width: 100%;
}
#page-content .priviewSticky {
position: -webkit-sticky;
position: sticky;
margin-top: -20px;
top: 0;
background: rgba(var(--bg-color2, 36, 56, 77), 1);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 1);
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 1);
box-shadow: 0 0 7px rgba(0, 0, 0, 1);
padding: 10px;
z-index: 9;
}
#page-content .page-rate-widget-box,
#action-area .page-rate-widget-box {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 12px 59px 12px 0;
}
#page-content .page-rate-widget-box .rate-points,
#action-area .page-rate-widget-box .rate-points {
background-color: rgba(0, 0, 0, 0.4) !important;
}
#page-content .page-rate-widget-box .rate-points,
#page-content .page-rate-widget-box .rateup,
#page-content .page-rate-widget-box .ratedown,
#page-content .page-rate-widget-box .cancel,
#action-area .page-rate-widget-box .rate-points,
#action-area .page-rate-widget-box .rateup,
#action-area .page-rate-widget-box .ratedown,
#action-area .page-rate-widget-box .cancel {
background-color: rgba(0, 0, 0, 0.4);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: none;
padding: 8px;
margin-right: 8px;
font-weight: normal;
-webkit-transition: 0.15s;
-o-transition: 0.15s;
-moz-transition: 0.15s;
transition: 0.15s;
}
#page-content .page-rate-widget-box .rateup a,
#page-content .page-rate-widget-box .ratedown a,
#page-content .page-rate-widget-box .cancel a,
#action-area .page-rate-widget-box .rateup a,
#action-area .page-rate-widget-box .ratedown a,
#action-area .page-rate-widget-box .cancel a {
color: rgba(var(--text-color, 150, 150, 150), 1);
padding: 0;
margin: 0;
font-size: 0;
-webkit-transition: 0.15s;
-o-transition: 0.15s;
-moz-transition: 0.15s;
transition: 0.15s;
}
#page-content .page-rate-widget-box .rateup:hover,
#page-content .page-rate-widget-box .rateup:focus-within,
#page-content .page-rate-widget-box .ratedown:hover,
#page-content .page-rate-widget-box .ratedown:focus-within,
#page-content .page-rate-widget-box .cancel:hover,
#page-content .page-rate-widget-box .cancel:focus-within,
#action-area .page-rate-widget-box .rateup:hover,
#action-area .page-rate-widget-box .rateup:focus-within,
#action-area .page-rate-widget-box .ratedown:hover,
#action-area .page-rate-widget-box .ratedown:focus-within,
#action-area .page-rate-widget-box .cancel:hover,
#action-area .page-rate-widget-box .cancel:focus-within,
#page-content .creditRate .rate-box-with-credit-button .creditButton:hover,
#page-content .creditRate .rate-box-with-credit-button .creditButton:focus-within,
#page-content .creditRate .creditButtonStandalone:hover,
#page-content .creditRate .creditButtonStandalone:focus-within {
background-color: rgba(var(--accent-color, 102, 192, 244), 0.4);
}
#page-content .page-rate-widget-box .rateup a:focus-visible,
#page-content .page-rate-widget-box .ratedown a:focus-visible,
#page-content .page-rate-widget-box .cancel a:focus-visible,
#action-area .page-rate-widget-box .rateup a:focus-visible,
#action-area .page-rate-widget-box .ratedown a:focus-visible,
#action-area .page-rate-widget-box .cancel a:focus-visible {
border: none;
}
#page-content .page-rate-widget-box .rateup a::before,
#action-area .page-rate-widget-box .rateup a::before {
content: '\f164';
font-family: 'FontAwesome';
font-size: 18px;
padding: 0 0.65px;
}
#page-content .page-rate-widget-box .ratedown a::before,
#action-area .page-rate-widget-box .ratedown a::before {
content: '\f165';
font-family: 'FontAwesome';
font-size: 18px;
padding: 0 0.65px;
}
#page-content .page-rate-widget-box .cancel a::before,
#action-area .page-rate-widget-box .cancel a::before {
content: '\f00d';
font-family: 'FontAwesome';
font-size: 18px;
padding: 0 1.93px;
}
#page-content .page-rate-widget-box .rateup a:hover,
#page-content .page-rate-widget-box .rateup a:focus,
#action-area .page-rate-widget-box .rateup a:hover,
#action-area .page-rate-widget-box .rateup a:focus {
color: rgba(var(--upvote-color, 103, 174, 77), 1);
}
#page-content .page-rate-widget-box .ratedown a:hover,
#page-content .page-rate-widget-box .ratedown a:focus,
#action-area .page-rate-widget-box .ratedown a:hover,
#action-area .page-rate-widget-box .ratedown a:focus {
color: rgba(var(--downvote-color, 167, 74, 74), 1);
}
#page-content .page-rate-widget-box .cancel a:hover,
#page-content .page-rate-widget-box .cancel a:focus,
#action-area .page-rate-widget-box .cancel a:hover,
#action-area .page-rate-widget-box .cancel a:focus {
color: rgba(var(--novote-color, 255, 200, 61), 1);
}
#page-content .creditRate {
margin: 0 2em 8px 0;
}
#page-content .creditRate .rate-box-with-credit-button {
background: none;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#page-content .creditRate .page-rate-widget-box {
margin-right: -4px;
}
#page-content .creditRate .rate-box-with-credit-button .creditButton {
background-color: rgba(0, 0, 0, 0.4);
padding: 7px 8px;
position: relative;
top: 1px;
}
#page-content .creditRate .rate-box-with-credit-button .creditButton p a {
width: unset;
margin: 0;
padding: 0;
color: rgba(var(--text-color, 150, 150, 150), 1);
border: none;
font-size: 18px;
}
#page-content .creditRate .rate-box-with-credit-button .creditButton p a:hover,
#page-content .creditRate .creditButtonStandalone p a:hover {
color: rgba(var(--accent-color2, 90, 169, 214), 1);
}
#page-content .creditRate .rate-box-with-credit-button .creditButton p a::before {
padding: 0 5.79px;
}
#page-content .creditRate .rate-box-with-credit-button .creditButton p {
padding: 1.5px 0;
}
#page-content .creditRate .creditButtonStandalone {
background-color: rgba(0, 0, 0, 0.4);
padding: 16px 8px;
}
#page-content .creditRate .creditButtonStandalone p a {
background-color: rgba(0, 0, 0, 0.4);
width: unset;
height: unset;
line-height: unset;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
color: rgba(var(--text-color, 150, 150, 150), 1);
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 18px;
padding: 0 5.79px;
}
#page-content .modalbox {
background: rgba(var(--bg-color, 27, 41, 56), 1);
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#page-content .modalbox .creditBottomRate {
bottom: 0.85em;
}
#page-content .guideContainer {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#page-content .guideContainer .guideSidebar {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: auto;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-left: 10px;
}
#page-content .guideContainer .guideContent {
max-width: 638px;
width: 100%;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border-top: 1px solid rgba(var(--bg-color3, 53, 70, 94), 1);
padding-top: 10px;
}
#page-content .sidebarButton a {
display: none;
position: fixed;
top: 0.5em;
right: 0.5em;
z-index: 5;
font-family: 'Nanum Gothic', san-serif;
font-size: 30px;
font-weight: 700;
width: 30px;
height: 30px;
line-height: 0.9em;
text-align: center;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: solid 0.1em rgba(var(--accent-color2, 90, 169, 214), 1);
color: rgba(var(--accent-color2, 90, 169, 214), 1);
background-color: rgba(var(--accent-color6, 84, 133, 183), 0.2);
}
#page-content .sidebarPanel {
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.5))) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
padding: 10px;
margin-bottom: 10px;
width: 300px;
}
#page-content .sidebarPanel>p {
margin: 5px 0 10px 0;
font-size: 11px;
}
#page-content .sidebarCreator .creatorLink {
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
#page-content .sidebarCreator {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
background: rgba(var(--accent-color6, 84, 133, 183), 0.2);
padding: 4px;
font-size: 11px;
line-height: 13px;
cursor: pointer;
margin-bottom: 4px;
-webkit-transition: var(--trans-time, 0.25s);
-o-transition: var(--trans-time, 0.25s);
-moz-transition: var(--trans-time, 0.25s);
transition: var(--trans-time, 0.25s);
position: relative;
}
#page-content .sidebarCreator:hover {
background: rgba(117, 204, 255, 0.3);
}
#page-content .sidebarCreator img {
width: 32px;
height: 32px;
padding: 2px;
margin-right: 7px;
}
#page-content .sidebarCreator.in-game {
color: #90ba3c;
}
#page-content .sidebarCreator.in-game img {
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #66812e), color-stop(95%, #59702b));
background: -webkit-linear-gradient(top, #66812e 5%, #59702b 95%);
background: -moz-linear-gradient(top, #66812e 5%, #59702b 95%);
background: -o-linear-gradient(top, #66812e 5%, #59702b 95%);
background: linear-gradient(to bottom, #66812e 5%, #59702b 95%);
}
#page-content .sidebarCreator.in-game .status::before {
content: "游戏中";
}
#page-content .sidebarCreator.online {
color: #57cbde;
}
#page-content .sidebarCreator.online img {
background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, rgba(83, 164, 196, 1)), color-stop(95%, rgba(69, 128, 151, 1)));
background: -webkit-linear-gradient(top, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
background: -moz-linear-gradient(top, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
background: -o-linear-gradient(top, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
background: linear-gradient(to bottom, rgba(83, 164, 196, 1) 5%, rgba(69, 128, 151, 1) 95%);
}
#page-content .sidebarCreator.online .status::before {
content: "在线";
}
#page-content .sidebarCreator.offline {
color: #898989;
}
#page-content .sidebarCreator.offline img {
background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, rgba(106, 106, 106, 1)), color-stop(95%, rgba(85, 85, 85, 1)));
background: -webkit-linear-gradient( top, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
background: -moz-linear-gradient( top, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
background: -o-linear-gradient( top, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
background: linear-gradient( to bottom, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
}
#page-content .sidebarCreator.offline .status::before {
content: "离线";
}
#page-content .sidebarCreator.online .playing,
#page-content .sidebarCreator.offline .playing {
display: none;
}
#page-content .sidebarPanel hr {
margin: 10px -10px;
height: 1px;
background-color: #000;
border-bottom: 1px solid #17212e;
}
#page-content .sidebarTags {
padding: 8px 0;
}
#page-content .sidebarTags a:after {
content: ",";
color: #969696;
}
#page-content .sidebarTags a:last-of-type:after {
content: "";
}
#page-content .sidebarTags::before {
content: "标签：";
color: #5c8699;
}
#page-content .sidebarDate {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
color: #8f98a0;
line-height: 20px;
margin-bottom: 8px;
}
#page-content .dateDescription {
margin-right: 10px;
}
#page-content .sidebarVisitor {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
line-height: 20px;
}
#page-content .visitorNumber {
color: #6088BB;
width: 50px;
margin-right: 10px;
text-align: right;
}
#page-content #toc {
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid #969696;
}
#page-content #toc-list {
background-color: rgba(0, 0, 0, 0.2);
}
#page-content .sidebarToc {
position: -webkit-sticky;
position: sticky;
top: 62px;
}
#page-content .sidebarToc #toc #toc-action-bar,
#page-content .sidebarToc #toc .title {
display: none;
}
#page-content .sidebarToc>table {
width: 100%;
}
#page-content .sidebarToc #toc,
#page-content .sidebarToc #toc #toc-list {
margin: 0 0 0 -1em;
width: 100%;
border: none;
background: none;
}
#page-content .sidebarToc #toc-list>div {
font-size: 14px;
padding: 5px 0;
}
#page-content .sidebarToc p {
margin: 5px 0 0 0;
}
#page-content .bblock:hover,
#page-content .dblock:hover {
color: #969696;
-webkit-transition: 0.35s;
-o-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s;
}
#page-content blockquote,
#page-content div.blockquote {
background-color: rgba(0, 0, 0, 0.4);
color: rgba(var(--text-color3, 200, 200, 200), 1);
border: 1px solid #56707f;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 12px;
margin: 8px;
}
#page-content .wiki-content-table th {
font-weight: bold;
border: 1px solid #4d4d4d;
color: #c7d5e0;
background-color: rgba(255, 255, 255, 0.1);
}
#page-content .wiki-content-table td {
font-weight: normal;
border: 1px solid #4d4d4d;
background-color: rgba(0, 0, 0, 0.2);
}
#page-content .wiki-content-table tr:nth-of-type(2n-1) {
font-weight: normal;
border: 1px solid #4d4d4d;
background-color: rgba(0, 0, 0, 0.2);
}
#page-content .pager a {
border: 1px solid rgba(255, 255, 255, 0.3);
color: #3b6e8c;
}
#page-content .pager a:hover {
color: #67c1f5;
}
#page-content .pager .target:last-of-type a,
#page-content input.btn,
#page-content .buttons input,
#action-area input.btn,
#odialog-container .owindow .button-bar a,
#action-area .change-textarea-size a {
color: #67c1f5;
background-color: rgba(103, 193, 245, 0.2);
border: 1px solid rgba(103, 193, 245, 0.2);
cursor: pointer;
-webkit-transition: var(--trans-time, 0.25s);
-o-transition: var(--trans-time, 0.25s);
-moz-transition: var(--trans-time, 0.25s);
transition: var(--trans-time, 0.25s);
}
#page-content .pager .target:last-of-type a:hover,
#page-content input.btn:hover,
#page-content .buttons input:hover,
#action-area input.btn:hover,
#odialog-container .owindow .button-bar a:hover,
#action-area .change-textarea-size a:hover {
color: rgba(255, 255, 255, 1);
background-color: #67c1f5;
}
#page-content .pager .current {
background-color: rgba(255, 255, 255, 0.1);
color: #c7d5e0;
}
#page-content .scp-image-block .scp-image-caption {
background-color: rgba(255, 255, 255, 0.1);
color: #c7d5e0;
}
#page-content .code {
background-color: rgba(255, 255, 255, 0.1);
color: #c7d5e0;
border: 1px solid #56707f;
font-family: 'Fira Code', '幼圆', Cousine, monospace;
}
#page-content code,
#page-content tt {
background-color: rgba(255, 255, 255, 0.1);
color: #c7d5e0;
font-family: 'Fira Code', '幼圆', Cousine, monospace;
}
#page-content .code pre span[class*="hl-"] {
-webkit-filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
#page-content .wiki-note {
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #4d4d4d;
}
#page-content p:first-of-type {
margin-top: 0;
}
#page-content p:last-of-type {
margin-bottom: 0;
}
#page-content .yui-navset .yui-nav {
border: none;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-right: 2px;
}
#page-content .yui-navset .yui-nav li,
#page-content .yui-navset .yui-nav li.selected {
margin: 0;
padding: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#page-content .yui-navset .yui-nav li a {
background: rgba(0, 0, 0, 0.3);
color: #c7d5e0;
border: 1px solid rgba(255, 255, 255, 0.8);
border-width: 1px 1px 0 1px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: var(--trans-time, 0.25s);
-o-transition: var(--trans-time, 0.25s);
-moz-transition: var(--trans-time, 0.25s);
transition: var(--trans-time, 0.25s);
}
#page-content .yui-navset .yui-nav li a:focus-visible {
background: rgba(103, 193, 245, 0.3);
}
#page-content .yui-navset .yui-nav li:hover {
background: rgba(103, 193, 245, 0.2);
-webkit-transition: var(--trans-time, 0.25s);
-o-transition: var(--trans-time, 0.25s);
-moz-transition: var(--trans-time, 0.25s);
transition: var(--trans-time, 0.25s);
}
#page-content .yui-navset .yui-nav li.selected a {
background: rgba(103, 193, 245, 0.7);
color: rgba(255, 255, 255, 1);
border-width: 1px 1px 0 1px;
}
#page-content .yui-navset .yui-nav li a em {
border: none;
top: 0;
padding: 0.25em 0.75em;
}
#page-content .yui-navset .yui-content {
background-color: rgba(84, 133, 183, 0.5);
color: rgba(var(--text-color3, 200, 200, 200), 1);
border: 1px solid rgba(255, 255, 255, 1);
}
/* 分页动画 by Croquembouche */
#page-content .yui-navset .yui-content {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
position: relative;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
#page-content .yui-navset .yui-content>div {
display: block;
top: 0;
overflow: hidden;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
#page-content .yui-navset .yui-content>div>* {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
#page-content .yui-navset .yui-content>div[style*="none"] {
display: block !important;
-webkit-box-flex: 0;
-ms-flex: 0;
-webkit-flex: 0;
-moz-box-flex: 0;
flex: 0;
max-height: 0;
padding: 0 0.5em;
border-width: 0;
-webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
-o-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
-webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
-moz-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -moz-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -moz-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -ms-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -webkit-box-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s, -ms-flex 0.5s cubic-bezier(.0, 1.27, .0, .89) 0s;
-webkit-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
-moz-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
-o-animation: tab-disappear 0.5s ease-in-out 0s 1 both;
animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content>div[style*="block"] {
display: block !important;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;
max-height: 9999rem;
-webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
-o-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
-webkit-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
-moz-transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -moz-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -moz-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -ms-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -webkit-box-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s, -ms-flex 0.5s cubic-bezier(.99, .0, .99, .0) 0.5s;
-webkit-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
-moz-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
-o-animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}
@-webkit-keyframes tab-disappear {
0% {
max-height: 9999rem;
}
1% {
max-height: 100vh;
}
100% {
max-height: 0;
}
}
@-moz-keyframes tab-disappear {
0% {
max-height: 9999rem;
}
1% {
max-height: 100vh;
}
100% {
max-height: 0;
}
}
@-o-keyframes tab-disappear {
0% {
max-height: 9999rem;
}
1% {
max-height: 100vh;
}
100% {
max-height: 0;
}
}
@keyframes tab-disappear {
0% {
max-height: 9999rem;
}
1% {
max-height: 100vh;
}
100% {
max-height: 0;
}
}
@-webkit-keyframes tab-appear {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: 9999rem;
}
}
@-moz-keyframes tab-appear {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: 9999rem;
}
}
@-o-keyframes tab-appear {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: 9999rem;
}
}
@keyframes tab-appear {
0% {
max-height: 0;
}
99% {
max-height: 100vh;
}
100% {
max-height: 9999rem;
}
}
/*
* 杂项修改
*/
#odialog-hovertips .hovertip {
background-color: rgba(0, 0, 0, 0.75) !important;
color: #c7d5e0;
}
#odialog-container .owindow {
background-color: #1b2838;
border: 2px solid #4d4d4d;
}
#odialog-container .owindow .title,
#action-area #lock-info {
background-color: rgba(0, 0, 0, 0.3);
}
#page-content input.text,
#action-area #edit-page-textarea,
#action-area #edit-page-comments,
#action-area #edit-page-title,
#action-area #page-tags-input,
#action-area #upload-userfile,
#action-area #upload-dfilename,
#action-area #file-comments,
#action-area #parent-page-name,
#action-area #move-new-page-name,
#action-area input.text {
background: rgba(0, 0, 0, 0.4);
border: 1px solid #000;
border-right-color: #354357;
border-bottom-color: #354357;
padding: 4px 6px;
color: #BFBFBF;
}
#action-area #edit-page-comments {
width: 95%;
}
#action-area .action-area-close:hover {
background: none;
}
#action-area .change-textarea-size a {
display: none;
}
#history-subarea .inline-diff ins,
#history-subarea .inline-diff del {
color: rgba(var(--text-color4, 90, 90, 90), 1);
}
*:focus-visible {
outline: none;
}
*::-webkit-scrollbar-thumb {
background: rgba(var(--text-color, 150, 150, 150), 1);
}
*::-webkit-scrollbar-track {
background: #0a0f14;
}
/*
* 移动版调整
*/
@media (max-width: 950px) {
#top-bar {
top: 75px;
left: 55px;
}
#search-top-box {
top: 50px;
}
}
@media (max-width: 767px) {
#top-bar {
width: 29em;
}
#side-bar {
background-color: rgba(0, 0, 0, 0.7);
}
#page-content .sidebarButton a {
display: block;
position: fixed;
z-index: 10;
}
#page-content .guideContainer .guideSidebar {
display: block;
position: fixed;
top: 0;
right: -50em;
height: 100%;
max-width: 50%;
margin: 0;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
scrollbar-width: thin;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: right 0.5s ease-in-out 0.1s;
-o-transition: right 0.5s ease-in-out 0.1s;
-moz-transition: right 0.5s ease-in-out 0.1s;
transition: right 0.5s ease-in-out 0.1s;
direction: rtl;
}
#page-content .guideSidebar .sidebarPanel {
background: #24384d;
direction: ltr;
}
#page-content .guideSidebar:target {
display: block;
right: 0;
margin: 0;
border: 1px solid #dedede;
z-index: 10;
}
#page-content .guideContainer .guideContent {
max-width: 100%;
}
#page-content .guideSidebar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3) 1px 1px repeat;
z-index: -1;
}
#login-status {
right: 35px;
}
}
@media (max-width: 479px) {
#top-bar {
left: 0;
}
#header {
-webkit-background-size: 35px 35px;
-moz-background-size: 35px 35px;
-o-background-size: 35px 35px;
background-size: 35px 35px;
background-position: 30px 35px;
}
#header h1 a {
padding: 32px 0 20px 0
}
#header h1 a span::before {
font-size: 18px;
}
#header h2 span::before {
font-size: 12px;
}
}
@media (max-width: 425px) {
#top-bar {
width: 25em;
}
#top-bar li a {
padding: 1px 0.5em;
}
}
[[/code]]
[[/collapsible]]
[[/iftags]]