内陆帝国 版式
2024年8月25日
修订 25
评分
44
↑ 43
↓ 0
支持率
100%
总票数 43
Wilson 95% 下界
91.8%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 9
最近投票
1 / 5
2025-06-25
2025-02-06
2025-01-24
2024-12-10
2024-11-11
2024-10-14
2024-10-02
2024-10-02
2024-09-21
2024-09-19
相关页面
暂无推荐
页面源码
[[module CSS]]
@import url(https://scp-wiki-cn.wikidot.com/local--code/theme:inland-empire/1);
[[/module]]
[[module CSS]]
strong {
font-weight: bold !important;
}
[[/module]]
[[iftags +版式]]
[[>]]
**评分：**
[[module Rate]]
[[/>]]
[[>]]
**评分模块与著作信息模块：**
[[/>]]
[[include :scp-wiki-cn:credit:start]]
**标题：**内陆帝国 版式
**作者：**[[*user Flea_ZER0]]
**发布年份：**2024
[[include :scp-wiki-cn:credit:end]]
这是一个由[[*user Flea_ZER0]]捣鼓出来的Sigma-9美学板式，受启发自[[[theme:oneiroi-west|西部梦神 主题版式]]]与大卫·林奇同名电影，适合用于梦神相关或是任何具备梦/超现实风格特质的文章。话虽如此，本版式并无使用限制，你可以将其用于任何页面。
[[div class="blockquote"]]
**搜索框・维基帐户的样式**
Created at 2020
Created by [[*user dog_punch]]
CC BY-SA 3.0
https://1nu.wikidot.com/iikanji
**边栏组件**
Created at 2021
Created by [[*user EstrellaYoshte]]
CC BY-SA 3.0
https://scp-wiki.wikidot.com/component:toggle-sidebar
**四角边框样式**
Created at 2024
Created by 百事无成_影黎君
CC BY-SA 4.0
https://blog.csdn.net/LY_z_/article/details/140805190
**页眉媒体 - 海浪**
Created by Michal Marek
CC0
https://www.pexels.com/video/waves-rushing-and-splashing-to-the-shore-1409899/
**页眉媒体 - 树影**
Created by Anna Nekrashevich
CC0
https://www.pexels.com/video/a-shadow-of-leaves-swaying-in-the-wind-8516625/
**演示图片 - 小猫**
Created by Luis García
CC BY-SA 3.0
https://commons.wikimedia.org/wiki/File:Gato_callejero_en_Madrid_07.jpg
[[/div]]
在你的作品开头添加如下文本以应用此版式：
[[div class="blockquote"]]
{{@@[[include :scp-wiki-cn:theme:inland-empire]]@@}}
[[/div]]
通过添加如下语法，可实现一定程度的自定义设计：
[[div class="blockquote"]]
{{@@[[module CSS]]@@}}
{{@@:root {@@}}
{{@@ --prologue: "放纵直觉预感 漫游清醒梦境"; /* 修改页眉正中的白色标语，即副标题 */@@}}
@@ @@
{{@@ --purpleColor: #9900FF; /* 修改板式主题色（默认紫色） */@@}}
{{@@ --lightPurpleColor: #CD00BD; /* 修改已访问链接与鼠标悬停颜色 */@@}}
{{@@ --darkPurpleColor: #A470BC; /* 修改未建立链接与引用块烟雾颜色 */@@}}
}
{{@@[[/module]]@@}}
[[/div]]
+ 版式示例
在使用此版式时各种页面元素的外观如下所示。
[[include component:image-block name=https://scpsandboxcn.wdfiles.com/local--files/echoaphaniptera3/xiaomao2.png|caption=梦见另一团小猫[[footnote]]真是好猫啊！[[/footnote]]|width=250px|align=right]]
[[toc]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
**粗体** | //斜体// | __下划线__ | --删除线-- | {{teletype text}} ^^上标^^,,下标,,
可通过五个连字符“@@-----@@”创建水平分割线。
-----
[[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]]
[[/tabview]]
||~ 标题 ||~ 标题 ||~ 标题 ||~ 标题 ||~ 标题 ||~ 标题 ||
|| 子内容 || 子内容 || 子内容 || 子内容 || 子内容 || 子内容 ||
|| 子内容 |||||||||| 长内容 ||||
|| 子内容 || 子内容 || 子内容 || 子内容 || 子内容 || 子内容 ||
= [# 一个链接] · [[[theme:inland-empire|一个已访问的链接]]] · [[[SCP-CN-10000|一个新的链接]]]
[[div class="blockquote"]]
@@ @@
= {{@@[[div class="blockquote"]]@@}}
= 这是一个默认引用块，当鼠标悬停时背景图将呈现出隐约的动态烟雾效果
@@ @@
@@ @@
[[/div]]
[[div class="blockquote haze"]]
@@ @@
= {{@@[[div class="blockquote haze"]]@@}}
= 这是一个始终呈现烟雾效果的引用块
@@ @@
@@ @@
[[/div]]
[[div class="blockquote dark"]]
@@ @@
= {{@@[[div class="blockquote dark"]]@@}}
= 这是一个纯黑色的引用块
@@ @@
@@ @@
[[/div]]
@@ @@
[[include component:coltop show=源代码 ▶|hide=源代码 ▼]]
[[code type="css"]]
@import url('https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
/* 全局 */
:root {
--title-font: 'Source Han Serif CN VF', serif;
--body-font: "Noto Sans SC", sans-serif;
--prologue: "放纵直觉预感 漫游清醒梦境";
--purpleColor: #9900FF;
--lightPurpleColor: #CD00BD;
--darkPurpleColor: #A470BC;
--lightColor: #EEE;
--darkColor: #000;
}
body {
background-color: black; /* 背景 */
color: var(--lightColor); /* 文字 */
font-family: var(--body-font);
font-weight: 200;
font-size: 0.85rem;
font-style: normal;
}
a {
color: var(--purpleColor);
}
a:visited {
color: var(--lightPurpleColor);
}
a.newpage {
color: var(--darkPurpleColor);
}
a:hover {
color: var(--lightPurpleColor);
}
.hovertip {
background-color: var(--darkColor) !important;
border: solid 1px transparent;
background:
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom;
background-position:
left top, left top,
right bottom, right bottom;
background-repeat: no-repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px;
}
.footnotes-footer {
background-color: var(--darkColor);
}
textarea {
color: var(--lightColor);
background-color: var(--darkColor) !important;
}
/* 标题 */
div#container-wrap {
background:
url(https://scpsandboxcn.wikidot.com/local--files/echoaphaniptera3/ie_bg_bw.gif) top center no-repeat;
background-size: auto;
}
div#container-wrap::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: var(--purpleColor);
mix-blend-mode: overlay;
}
@media (max-width: 479px) {
#header{
background-position: 0 5.5em;
background-size: 55px 55px;
}
}
@media (min-width: 480px) and (max-width: 580px) {
#header{
background-position: 0.5em 4.5em;
background-size: 66px 66px;
}
}
@media (min-width: 581px) and (max-width: 767px) {
#header{
background-size: 77px 77px;
}
}
h1, h2, h3, h4, h5, h6, #page-title {
font-family: var(--title-font);
color: var(--purpleColor);
}
#header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
background: none;
position: relative;
}
#header h1 span, #header h2 span {
visibility: hidden;
}
#header h2 {
margin: 0;
text-align: center;
}
#header h2 span {
display: block;
}
#header h2 span::before {
line-height: 1.5em;
content: var(--prologue);
color: var(--lightColor);
visibility: visible;
display: block;
text-align: center;
}
#page-title,
#action-area h1 {
margin: 0;
text-align: center;
}
#page-title {
font-weight: bold;
font-size: 3em;
border-color: transparent;
background-image: linear-gradient(to bottom, var(--darkColor), var(--purpleColor));
-webkit-background-clip: text;
color: transparent;
}
#breadcrumbs, .pseudocrumbs {
margin: 1em 0 -1em;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--purpleColor) var(--darkColor);
}
/* 顶栏菜单 */
#top-bar ul li {
display: none;
}
/* 评分模块 */
div.page-rate-widget-box .rate-points {
background-color: transparent !important;
border: none !important;
font-family: var(--title-font);
background-image: linear-gradient(to bottom, var(--darkColor), var(--lightColor));
-webkit-background-clip: text;
color: transparent;
}
div.page-rate-widget-box .rateup,
div.page-rate-widget-box .ratedown {
background-color: transparent !important;
border-color: transparent;
}
div.page-rate-widget-box .rateup a,
div.page-rate-widget-box .ratedown a {
font-family: var(--title-font);
background-image: linear-gradient(to bottom, var(--darkColor), var(--lightColor));
-webkit-background-clip: text;
color: transparent;
}
div.page-rate-widget-box .rateup a:hover,
div.page-rate-widget-box .ratedown a:hover {
background-color: var(--darkColor);
color: var(--purpleColor) !important;
}
div.page-rate-widget-box .cancel {
background-color: transparent !important;
border-color: transparent;
border-radius: 0;
position: relative;
}
div.page-rate-widget-box .cancel a {
font-family: var(--title-font);
background-image: linear-gradient(to bottom, var(--darkColor), var(--lightColor));
-webkit-background-clip: text;
color: transparent;
}
div.page-rate-widget-box .cancel a:hover {
background-color: var(--darkColor);
color: var(--purpleColor);
}
/* -- Info Module -- */
#page-content .rate-box-with-credit-button {
position: relative;
background-color: transparent !important;
border-color: transparent; !important;
border-radius: 0;
box-shadow: none;
}
#page-content .creditButton p a {
border-color: transparent; !important;
background-image: linear-gradient(to bottom, var(--darkColor), var(--lightColor));
background-clip: text;
color: transparent;
border-left: 0;
}
.rate-box-with-credit-button .cancel {
border-radius: 0;
}
#page-content .creditButton p a:hover {
background-color: var(--darkColor);
color: var(--purpleColor);
}
div.modalbox {
background: var(--darkColor);
}
/* 折叠 */
.col-wrap {
margin-bottom: 1em;
overflow-x: hidden;
}
.col-wrap .collapsible-block {
border-left: solid 0.5rem var(--bg-color);
}
.col-wrap > .collapsible-block, .col-wrap > .collapsible-block > .collapsible-block-unfolded {
display: flex !important;
}
.col-wrap > .collapsible-block > .collapsible-block-folded:hover,
.col-wrap > .collapsible-block > .collapsible-block-unfolded > .collapsible-block-unfolded-link:hover {
background-color: #000;
}
.col-wrap > .collapsible-block > .collapsible-block-unfolded > .collapsible-block-content {
position: relative;
left: -100%;
padding-left: 0.4372rem;
opacity: 1 !important;
}
/* 侧边栏 */
#side-bar .side-block, #side-bar .side-block.media, #side-bar .side-block.resources, #interwiki .side-block {
border-radius: 0;
position: relative;
border: none;
background: rgba(0,0,0,0.5) !important;
box-shadow: none;
}
#side-bar .heading { /*侧边栏标题*/
font-family: var(--title-font);
text-align: center;
color: var(--lightColor); /*颜色*/
border-color: var(--lightColor); /*边框颜色，下面那一条*/
}
#side-bar div.menu-item .sub-text {
color: var(--purpleColor); /*侧边栏副标题颜色，SCP系列后面的（X000-X999）*/
}
#side-bar a:visited {
color: var(--purpleColor) !important;
}
#side-bar img {
display: none;
}
/* 图像样式 */
.image-block-base {
border: solid 1px transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.image-block-base img {
border: solid 1px transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* blockquote */
blockquote,
div.blockquote,
div#toc {
border: solid 1px transparent;
background:
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom;
background-color: var(--darkColor);
background-position:
left top, left top,
right bottom, right bottom;
background-repeat: no-repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px;
}
blockquote:hover,
div.blockquote:hover,
div#toc:hover,
blockquote.haze,
div.blockquote.haze,
div#toc.haze {
border: solid 1px transparent;
position: relative;
background:
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
url("https://scpsandboxcn.wdfiles.com/local--files/echoaphaniptera3/ie_bq.gif");
background-position:
left top, left top,
right bottom, right bottom,
center;
background-repeat:
no-repeat, no-repeat,
no-repeat, no-repeat,
repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px,
auto;
}
blockquote:hover::before,
div.blockquote:hover::before,
div#toc:hover::before,
blockquote.haze::before,
div.blockquote.haze::before,
div#toc.haze::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--darkPurpleColor);
mix-blend-mode: overlay;
pointer-events: none;
opacity: 0.75;
}
blockquote > * ,
div.blockquote > * ,
div#toc > * {
position: relative;
z-index: 3;
}
blockquote.dark,
div.blockquote.dark,
div#toc.dark {
border: solid 1px transparent;
background:
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom;
background-color: var(--darkColor);
background-position:
left top, left top,
right bottom, right bottom;
background-repeat: no-repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px;
}
.scp-image-block img {
border: solid 1px transparent;
}
#page-content .scp-image-block {
border: solid 1px transparent;
box-shadow: none;
}
#page-content .scp-image-block .scp-image-caption {
border: solid 1px transparent;
}
.scp-image-block .scp-image-caption {
border: solid 1px transparent;
border-top: solid 1px transparent;
background:
linear-gradient(var(--purpleColor), var(--purpleColor)) center bottom;
background-repeat: no-repeat;
background-size: 100% 3px;
font-family: var(--title-font);
font-size: 0.85rem;
}
.scp-image-block .scp-image-caption p {
margin-bottom: 5px !important;
}
/* YUI-TABS */
.yui-navset .yui-content{
border: solid 1px transparent;
background:
linear-gradient(var(--lightColor), var(--lightColor)) left bottom,
linear-gradient(var(--lightColor), var(--lightColor)) left bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom;
background-color: var(--darkColor);
background-position:
left bottom, left bottom,
right bottom, right bottom;
background-repeat: no-repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px;
}
.yui-navset .yui-nav,
.yui-navset .yui-nav li a,
.yui-navset .yui-nav li a em {
border: 0;
}
.yui-navset .yui-nav li,
.yui-navset .yui-nav li.selected {
margin: 0;
padding: 0;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
background-color: var(--darkColor); /*Tab标签背景颜色，无图模式下有用*/
background-image: none;
border-radius: 0;
color: var(--lightColor);
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
background-color: var(--darkColor);
background:
linear-gradient(var(--purpleColor), var(--purpleColor)) left top,
linear-gradient(var(--purpleColor), var(--purpleColor)) left top,
linear-gradient(var(--purpleColor), var(--purpleColor)) right bottom,
linear-gradient(var(--purpleColor), var(--purpleColor)) right bottom;
background-position:
left top, left top,
right bottom, right bottom;
background-repeat: no-repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px;
color: var(--lightColor);
}
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
background-color: var(--purpleColor); /*Tab标签背景颜色，无图模式下有用*/
background:
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) left top,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom,
linear-gradient(var(--lightColor), var(--lightColor)) right bottom;
background-position:
left top, left top,
right bottom, right bottom;
background-repeat: no-repeat;
background-size:
1px 5px, 5px 1px,
1px 5px, 5px 1px;
color: var(--lightColor);
}
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
border: none;
}
.yui-navset .yui-nav .selected a {
width: 100%;
}
/* 表格 */
#page-content .wiki-content-table tr th,
#page-content .wiki-content-table tr td {
border: solid 1px var(--lightColor);
background-color: transparent;
}
#page-content .wiki-content-table tr th {
font-family: var(--title-font);
color: var(--lightColor);
background-position: center;
background-size: auto;
background-image: url("https://scpsandboxcn.wikidot.com/local--files/theme:inland-empire/%E5%BA%8F%E5%88%97%2005%2000_00_00-00_00_30~1.gif");
}
/* 编辑锁定 */
#lock-info {
background-color: var(--darkColor);
border-color: var(--purpleColor);
}
/* 窗口 */
.owindow {
border: solid 1px transparent;
background:
linear-gradient(var(--lightColor), var(--lightColor)) right top,
linear-gradient(var(--lightColor), var(--lightColor)) right top,
linear-gradient(var(--lightColor), var(--lightColor)) left bottom,
linear-gradient(var(--lightColor), var(--lightColor)) left bottom,
url("https://scpsandboxcn.wikidot.com/local--files/theme:inland-empire/%E5%BA%8F%E5%88%97%2005%2000_00_00-00_00_30~1.gif");
background-position:
right top, right top,
left bottom, left bottom,
center;
background-repeat:
no-repeat, no-repeat,
no-repeat, no-repeat,
repeat;
background-size:
1px 10px, 10px 1px,
1px 10px, 10px 1px,
auto;
}
.owindow .content img {
background: transparent !important;
}
.owindow .title {
background: var(--darkColor);
}
/* 搜索栏/用户信息 */
/* source: https://1nu.wikidot.com/iikanji */
div#search-top-box {
top: 18.5px;
width: 100%;
right: 70px
}
div#search-top-box form {
display: flex;
justify-content: flex-end
}
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover {
background-color: #5B5B5B !IMPORTANT;
display: inline-block;
height: 1.1rem;
width: 8rem;
transition: width .25s;
outline: none;
filter: brightness(120%);
}
_::-webkit-full-page-media,
_:future,
:root div#search-top-box form input[type="text"] {
font-size: 16px
}
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
background-color: var(--base-color);
color: transparent;
cursor: pointer;
display: inline-block;
width: 22px;
height: 22px;
box-sizing: border-box;
border-radius: 50px;
box-shadow: none;
background-position: center;
background-size: 55%;
background-repeat: no-repeat;
background-image: 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");
}
div#search-top-box form input[type="submit"] {
display: none
}
#search-top-box-input {
border: solid 1px var(--background);
border-radius: 5px
}
#login-status {
top: 2px
}
#login-status {
display: flex;
flex-direction: column;
align-content: space-around;
font-size: 0
}
#login-status .printuser {
margin: 0;
background-color: none;
position: absolute;
top: 13px;
right: 0px;
width: 28px;
padding: 0;
}
#login-status .printuser img.small {
background: none !important;
margin: 0;
width: 28px;
height: 28px;
padding: 0;
border-radius: 100px;
box-shadow: 0 0 3px #3f3f3f;
}
#login-status [id] {
font-size: .72rem
}
#login-status>a[href="javascript:;"] {
font-size: 0;
font-weight: bold;
margin: 0;
text-align: center;
text-decoration: none;
background: none;
width: 21.8px;
position: absolute;
top: 13px;
height: 21px;
right: 30px;
border: none;
}
#login-status>a[href="javascript:;"]:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.3rem;
margin: 4px 3px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
transform: translate(0, 0);
}
#login-status #account-topbutton:before {
content: "\f013";
color: var(--base-color)
}
#login-status .login-status-sign-in {
right: 35px !important;
}
#login-status .login-status-sign-in:before {
content: "\f13e";
color: var(--base-color)
}
#login-status .login-status-create-account {
right: 11px !important;
margin: 0 0 .25rem;
}
div#login-status a.login-status-create-account {
right: 11px;
}
#login-status .login-status-create-account:before {
content: "\f067";
color: var(--base-color)
}
#login-status #my-account {
display: none
}
#login-status a strong {
position: absolute;
top: 0;
right: 2.25rem;
font-family: var(--bauhaus);
font-size: 1rem;
var(--lightColor)-space: nowrap
}
#login-status #account-topbutton:not(:focus):not(:focus-within):not(:hover):not(:active)+#account-options {
display: none !important
}
#header #login-status #account-topbutton+#account-options:focus,
#header #login-status #account-topbutton+#account-options:focus-within,
#header #login-status #account-topbutton+#account-options:hover,
#header #login-status #account-topbutton+#account-options:active {
display: block !important
}
#account-options ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around
}
#account-options ul>li {
flex-grow: 1;
text-align: center;
width: 40%
}
#account-options ul>li a {
transition: all .25s ease-in-out
}
#account-options ul>li a:hover {
background-color: var(--base-color);
color: var(--background);
text-decoration: none
}
#login-status ul a {
color: #000
}
/* Sidebar组件 */
/* source: https://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
#top-bar .open-menu a {
position: fixed;
top: 0.5em;
left: 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;
border: transparent;
background-color: transparent;
border-radius: 0em;
color: var(--lightColor);
pointer-events: auto;
}
@media not all and (max-width: 767px) {
#top-bar .mobile-top-bar {
display: block;
pointer-events: none;
}
#top-bar .mobile-top-bar li {
display: none;
}
#main-content {
max-width: 44.5rem;
margin: 0 auto;
padding: 0;
transition: max-width 0.2s ease-in-out;
}
#side-bar {
display: block;
position: fixed;
top: 0;
left: -18rem;
width: 15.25rem;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 1em 1em 0 1em;
background-color: rgba(0,0,0,0.1);
transition: left 0.4s ease-in-out;
}
#side-bar:target {
top: 3em;
left: 0;
}
#side-bar:focus-within {
left: 0;
}
#side-bar:target .close-menu {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin-left: 17rem;
opacity: 0;
z-index: -1;
visibility: visible;
}
#side-bar:not(:target) .close-menu { display: none; }
#top-bar .open-menu a:hover {
text-decoration: none;
}
}
@media (max-width: 767px) {
#side-bar {
background-color: rgba(34, 32, 46, 0.75);
}
}
[[/code]]
[[include component:colend]]
[[/iftags]]