内陆帝国版式

Sigma-9 中分版式中心 » 内陆帝国版式

评分：

评分模块与著作信息模块：

著作信息

标题：内陆帝国版式
作者：Flea_ZER0
发布年份：2024

这是一个由 Flea_ZER0捣鼓出来的Sigma-9美学板式，受启发自西部梦神主题版式与大卫·林奇同名电影，适合用于梦神相关或是任何具备梦/超现实风格特质的文章。话虽如此，本版式并无使用限制，你可以将其用于任何页面。

搜索框・维基帐户的样式
Created at 2020
Created by dog_punch
CC BY-SA 3.0
https://1nu.wikidot.com/iikanji

边栏组件
Created at 2021
Created by 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

在你的作品开头添加如下文本以应用此版式：

[[include :scp-wiki-cn:theme:inland-empire]]

通过添加如下语法，可实现一定程度的自定义设计：

[[module CSS]]
:root {
--prologue: "放纵直觉预感漫游清醒梦境"; /* 修改页眉正中的白色标语，即副标题 */

--purpleColor: #9900FF; /* 修改板式主题色（默认紫色） */
--lightPurpleColor: #CD00BD; /* 修改已访问链接与鼠标悬停颜色 */
--darkPurpleColor: #A470BC; /* 修改未建立链接与引用块烟雾颜色 */
}
[[/module]]

版式示例

在使用此版式时各种页面元素的外观如下所示。

梦见另一团小猫¹

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

粗体 | 斜体 | 下划线 | 删除线 | teletype text ^上标_下标

可通过五个连字符“-----”创建水平分割线。

这是分页（Tab View）。

标题	标题	标题	标题	标题	标题
子内容	子内容	子内容	子内容	子内容	子内容
子内容	长内容
子内容	子内容	子内容	子内容	子内容	子内容

一个链接 · 一个已访问的链接 · 一个新的链接

[[div class="blockquote"]]

这是一个默认引用块，当鼠标悬停时背景图将呈现出隐约的动态烟雾效果

[[div class="blockquote haze"]]

这是一个始终呈现烟雾效果的引用块

[[div class="blockquote dark"]]

这是一个纯黑色的引用块

源代码 ▶源代码 ▼

@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);
    }
}

原创版式

页面版本: 24, 最后编辑于: 06 Oct 2024 17:22

编辑评分 (+41) 标签讨论 (14) 历史记录附件打印网站工具 + 选项

SCP基金会

控制，收容，保护

著作信息

版式示例

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题