示例
该版式是MT的站点版式。
若需将本版式引入到你的页面中,请将以下文本放到任意位置:
[[include :mt-backrooms:theme:mt]]
万恶之源
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
| 这是 | 表格 |
|---|---|
| 你应该老早 | 就知道怎么 |
| 做这个了吧 | |
使用的字体:Chakra Petch / 白无常可可体
脚1
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起来是
怎么运作
包括那些不存在
以及存在的链接!
[[div class="lightblock"]]
[[/div]]
[[div class="darkblock"]]
[[/div]]
[[div class="styled-quote"]]
[[/div]]
[[div class="dark-styled-quote"]]
[[/div]]
[[div class="logo-block"]]
[[/div]]
[[div class="border-logoblock"]]
[[/div]]
[[div class="dark-borderblock"]]
[[/div]]
[[div class="light-borderblock"]]
[[/div]]
INSERT TEXT
[[div class="titleblock"]]
[[span class="titlebox"]]INSERT TEXT[[/span]]
[[/div]]
/* ================================================================== */ /* 1. 基础设置与外部资源导入 */ /* ================================================================== */ /* 声明字符编码为 UTF-8 */ @charset "UTF-8"; /* 引入第三方 CSS 文件 */ @import url("https://backrooms-to-dv.wikidot.com/local--files/theme:fixed-test/CSS.css"); /* 基础样式文件 */ @import url("https://fastly.jsdelivr.net/gh/Etinjat/CSS@Backrooms/003v_THEME-liminal_new-BHL.css"); /* Backrooms 主题扩展样式 */ /* 引入 Google 字体(多语言支持) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap'); /* 主字体:Inter */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap'); /* 简体中文无衬线体 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@100;300;400;500;700;900&display=swap'); /* 简体中文衬线体 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); /* 繁体中文无衬线体 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@100;300;400;500;700;900&display=swap'); /* 繁体中文衬线体 */ /* ================================================================== */ /* 2. 全局 CSS 变量定义(主题核心配置) */ /* ================================================================== */ :root { /* ----- 主题标识 ----- */ --theme-base: "black-highlighter"; /* 基础主题名称 */ --theme-id: "mt"; /* 主题唯一标识符 */ --theme-name: "MT"; /* 主题显示名称 */ /* ----- 头部品牌元素 ----- */ --logo-image: url("http://mt-backrooms.wikidot.com/local--files/theme:mt/mt-logo-light.png"); /* 网站 Logo 图片地址 */ --header-title: "The Backrooms MT"; /* 主标题文字 */ --header-subtitle: "你 并 不 是 没 有 从 未 来 过 这 里"; /* 副标题文字(空格营造神秘感) */ /* ----- 字体栈定义(现代无衬线为主,中文字体后备)----- */ --body-font: Inter, Noto Sans SC, Arimo, Verdana, Geneva, sans-serif; /* 正文字体 */ --header-font: Inter, Noto Sans SC, Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif; /* 标题字体 */ --title-font: var(--header-font); /* 页面大标题字体(同标题字体) */ --mono-font: Recursive, 幼圆, Noto Serif SC, Consolas, monaco, monospace; /* 等宽字体(代码、终端风格) */ /* ----- 基础颜色变量(RGB 格式,便于配合 rgba() 使用)----- */ --white-monochrome: 20, 20, 20; /* 背景 */ --pale-gray-monochrome: 55, 55, 55; /* 编辑页面底部按钮、分页上方、div块深色部分 */ --light-gray-monochrome: 222, 222, 222; /* 分割线上部 */ --gray-monochrome: 0, 190, 255; /* div块浅色部分、分页 */ --black-monochrome: 255, 255, 255; /* 文本 */ --bright-accent: 115, 119, 120; /* 选中分页、按钮悬停、已读链接 */ --medium-accent: 183, 186, 190; /* 分页底部、搜索框、脚注块最左侧部分 */ --dark-accent: 115, 119, 120; /* 脚注块中间部分、标签及其文本、页面底部第二色块+按钮前端 */ --pale-accent: 115, 119, 130; /* 实际未使用) */ --dark-gray-monochrome: 207, 207, 203; /* 页面最底部、顶栏悬停及展开 */ --light-pale-gray-monochrome: 255, 255, 255; /* 深色div块浅色文本 */ --very-light-gray-monochrome: 0, 0, 0; /* 浅色div块深色文本 */ /* ----- 渐变效果(头部区域)----- */ --gradient-header: linear-gradient(to top, rgba(var(--pale-gray-monochrome)) 0%, rgba(var(--pale-gray-monochrome), 0.20) 100% ); /* 从深灰色到半透明深灰色的渐变,营造层次感 */ /* ----- 组件颜色变量(应用主题色)----- */ --swatch-headerh1-color: var(--black-monochrome); /* 主标题颜色:白色 */ --swatch-headerh2-color: var(--black-monochrome); /* 副标题颜色:白色 */ --swatch-topmenu-border-color: var(--pale-gray-monochrome); /* 顶部菜单边框色:深灰色 */ --swatch-topmenu-bg-color: var(--pale-gray-monochrome); /* 顶部菜单背景色:深灰色 */ /* ----- 链接颜色(科技蓝/青色调)----- */ --link-color: 0, 190, 255; /* 普通链接颜色:亮蓝色 */ --hover-link-color: 0, 255, 190; /* 悬停链接颜色:青绿色 */ /* ----- 背景特效配置 ----- */ --background-gradient-distance: 0rem; /* 无渐变距离(取消渐变偏移) */ --diagonal-stripes: linear-gradient(transparent 0); /* 斜条纹效果(当前未使用,保留占位) */ } /* -------------------------------------------- 3. 全局背景与布局 说明: 页面整体背景样式、容器布局设置 -------------------------------------------- */ /* 主体背景 - 移除点阵,使用纯色背景 */ #skrollr-body { background-image: none; /* 移除径向渐变点阵 */ background-color: rgb(var(--pale-gray-monochrome)); /* 使用浅灰色纯色背景 */ width: 100%; height: 7.5rem; } /* 主容器背景 - 移除半透明点阵,使用纯色背景 */ #container { background-image: none; /* 移除径向渐变点阵 */ background-color: rgba(var(--pale-gray-monochrome), 0.4); /* 使用半透明浅灰色背景 */ background-attachment: fixed; } /* 头部和顶栏背景滚动方式 */ #header, #top-bar { background-attachment: scroll; } /* ================================================================== */ /* 4. 头部区域样式(Logo、标题) */ /* ================================================================== */ /* 头部和顶部栏背景滚动方式:随页面滚动(不固定) */ #header, #top-bar { background-attachment: scroll; } /* 移除头部的默认背景图片,以便使用自定义伪元素 */ #header { background-image: none; } /* 头部伪元素:显示半透明 Logo 水印 */ #header::before { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-image: var(--logo-image); /* 使用自定义 Logo 变量 */ background-size: auto 16rem; /* 背景高度 16rem,宽度自动 */ background-position: center; background-repeat: no-repeat; opacity: 0.4; /* 40% 透明度,作为背景装饰 */ } /* 主标题 h1 及其链接:绝对定位,居中显示 */ #header h1, #header h1 a { position: absolute; top: 1rem; /* 距离顶部 1rem */ margin: 0; width: 100%; display: flex; justify-content: center; z-index: 0; /* 位于 Logo 水印之上 */ } /* 副标题 h2 及其内部元素:绝对定位,居中显示 */ #header h2, #header h2 span, #header h2 span::before { position: absolute; top: 2rem; /* 距离顶部 2rem,位于主标题下方 */ margin: 0; width: 100%; display: flex; justify-content: center; } /* 标题文字阴影:增强立体感和可读性 */ #header h1 a::before, #header h2 span::before { text-shadow: .063rem 0.1rem 0.1rem #0c0c0c; /* 轻微黑色阴影 */ } /* ================================================================== */ /* 5. 页面底部按钮样式(扁平风格) */ /* ================================================================== */ /* 底部选项按钮:无圆角、无边框 */ div#page-options-bottom-2 > a, div#page-options-bottom > a { border-radius: 0em; -moz-border-radius: 0em; /* Firefox 兼容 */ border: none; } /* 底部按钮悬停/激活状态:同样无边框,保持样式一致 */ div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover { border: none; } /* ================================================================== */ /* 6. 侧边栏样式 */ /* ================================================================== */ /* 侧边栏内所有图片:100% 灰度滤镜,统一为黑白风格 */ #side-bar .side-block div a img { filter: grayscale(100%); } /* 侧边栏图片反转效果(覆盖上一个规则,实现约 90% 反转) */ #side-bar .side-block div a img { filter: invert(calc(230/255)); /* 图片颜色反转,程度约 90% */ } /* 侧边栏链接悬停效果:10% 透明度青绿色背景 */ #side-bar a:not(.newpage):hover { background-color: rgba(0, 255, 190, 0.1) !important; } /* ================================================================== */ /* 7. 链接样式(存在页面 / 新建页面) */ /* ================================================================== */ /* 存在页面的链接悬停效果 */ a:not(.newpage):hover { background-color: rgba(0, 255, 190, 0.1) !important; /* 10% 透明度的青绿色背景 */ transition: background-color 0.2s ease; /* 平滑过渡 */ } /* 新建页面(不存在的页面)链接基础样式 */ a.newpage { background: transparent; text-decoration: none; } /* 新建页面链接颜色:红色(高亮提醒) */ a.newpage { color: rgb(255, 0, 0) !important; /* 红色文字,使用 !important 确保覆盖 */ } /* 新建页面链接悬停状态 */ a.newpage:hover { color: rgb(255, 0, 0) !important; /* 保持红色文字 */ background-color: rgba(255, 0, 0, 0.1); /* 淡红色背景,提高可识别性 */ } /* ================================================================== */ /* 8. 顶部导航菜单样式 */ /* ================================================================== */ /* 顶部导航菜单链接默认状态 */ #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { color: rgb(255, 255, 255) !important; /* 白色文字,与深色背景形成对比 */ transition: color 0.2s ease; /* 颜色过渡效果 */ } /* 顶部导航菜单链接悬停状态 */ #top-bar div.top-bar > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li > a:hover { color: rgb(var(--pale-gray-monochrome)) !important; /* 悬停时变为浅灰色(55,55,55) */ background-color: rgba(0, 255, 190, 0.1) !important; /* 10% 透明度的青绿色背景 */ } /* 顶部菜单链接悬停效果(通用) */ #top-bar a:hover, #top-bar div.mobile-top-bar a:hover { background-color: rgba(0, 255, 190, 0.1) !important; } /* 父级悬停时子链接样式(保持一致性) */ #top-bar div.top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li:hover > a { color: rgb(var(--pale-gray-monochrome)) !important; /* 浅灰色文字 */ } /* ================================================================== */ /* 9. 登录状态与账户按钮 */ /* ================================================================== */ /* 登录状态文字样式 */ #login-status { color: rgb(var(--black-monochrome)); /* 白色文字(--black-monochrome 实际为白色) */ } #login-status a { color: rgb(var(--black-monochrome)); /* 白色链接 */ } #login-status ul a { color: rgb(var(--pale-gray-monochrome)); /* 浅灰色链接(55,55,55) */ } /* 账户按钮样式 */ #account-topbutton { color: rgb(var(--black-monochrome)); /* 白色文字 */ } /* ================================================================== */ /* 10. 搜索框交互 */ /* ================================================================== */ /* 搜索框悬停/聚焦状态:半透明背景 */ #search-top-box-input:hover, #search-top-box-input:focus { background: rgba(var(--medium-accent), .25); /* 浅灰蓝色半透明背景 */ } /* ================================================================== */ /* 11. 表格样式 */ /* ================================================================== */ /* 维基内容表格表头样式 */ table.wiki-content-table th { background-color: rgb(0, 190, 255) !important; /* 亮蓝色背景 */ color: rgb(var(--black-monochrome)); /* 白色文字(--black-monochrome 实际为白色) */ border-color: rgb(var(--black-monochrome)); /* 白色边框 */ } /* ================================================================== */ /* 12. 图片块与引用块 */ /* ================================================================== */ /* SCP 图片块样式:添加阴影效果 */ .scp-image-block { box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } /* 通用引用块样式:20% 透明度的青绿色背景 */ blockquote, div.blockquote { background-color: rgba(0, 255, 190, 0.2); /* 20% 透明度的青绿色背景 */ color: inherit; /* 继承文字颜色 */ padding: 1rem; margin: 1rem 0; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border-color: rgb(0, 255, 190) !important; /* 青绿色边框 */ } /* 风格化引用块:左侧边框为蓝色 */ .styled-quote { background-color: rgb(var(--gray-monochrome)); /* 亮蓝色背景 */ border-left: 0.5rem solid rgb(var(--pale-gray-monochrome)); /* 深灰色左边框 */ color: rgb(var(--very-light-gray-monochrome)); /* 白色文字 */ padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } /* 暗色风格引用块:蓝色背景,左侧深色边框 */ .dark-styled-quote { background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景(55,55,55) */ border-left: 0.5rem solid rgb(var(--gray-monochrome)); /* 左侧亮蓝色边框 */ padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .dark-styled-quote a { color: rgb(var(--swatch-menubg-medium-color)); /* 链接颜色:浅灰蓝 */ } /* ================================================================== */ /* 13. 内容块样式(Light / Dark / Border 系列) */ /* ================================================================== */ /* 亮色内容块:蓝色背景,黑色文字 */ .lightblock { background-color: rgb(var(--gray-monochrome)); /* 亮蓝色背景 */ color: rgb(var(--very-light-gray-monochrome)); /* 黑色文字 */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } /* 暗色内容块:深灰色背景,白色文字 */ .darkblock { background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景 */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color: rgb(var(--light-pale-gray-monochrome)); /* 白色文字 */ } /* 更深色内容块:浅灰色背景,白色文字 */ .darkerblock { background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景(55,55,55) */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color: rgb(var(--light-pale-gray-monochrome)); /* 白色文字 */ } /* 暗色块内的链接颜色 */ .darkblock a { color: rgb(var(--swatch-menubg-medium-color)); /* 浅灰蓝色链接 */ } /* 深色边框块:深灰色背景 + 亮蓝色粗边框 */ .dark-borderblock { background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景 */ color: rgb(255, 255, 255); /* 白色文字 */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--gray-monochrome)); /* 亮蓝色粗边框 */ } /* 亮色边框块:亮蓝色背景 + 深灰色粗边框 */ .light-borderblock { background-color: rgb(var(--gray-monochrome)); /* 亮蓝色背景 */ color: rgb(var(--very-light-gray-monochrome)); /* 黑色文字 */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--pale-gray-monochrome)); /* 深灰色粗边框 */ } /* 基础边框块:深灰色背景 + 亮蓝色粗边框 */ .borderblock { background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景 */ color: rgb(var(--light-pale-gray-monochrome)); /* 白色文字 */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--gray-monochrome)); /* 亮蓝色粗边框 */ } /* ================================================================== */ /* 14. Logo 水印块样式(带水印背景) */ /* ================================================================== */ /* 带边框的 Logo 块样式 */ .border-logoblock { padding: 0.01rem 1rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color: rgb(var(--light-pale-gray-monochrome)); /* 白色文字 */ margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景 */ border: solid 0.3rem rgb(var(--gray-monochrome)); /* 亮蓝色边框 */ } /* Logo 块的背景水印效果 */ .border-logoblock::after { content: ""; float: center; border: solid 2px #0000; /* 透明边框 */ background: url(http://mt-backrooms.wikidot.com/local--files/theme:mt/mt-logo-light.png) center/25% no-repeat; /* Logo 水印 */ opacity: 0.25; /* 半透明效果 */ top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; /* 置于内容上层 */ } /* 基础 Logo 块样式(无边框版) */ .logoblock { padding: 0.01rem 1rem; color: rgb(var(--light-pale-gray-monochrome)); box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景 */ } /* 基础 Logo 块的水印效果 */ .logoblock::after { content: ""; float: center; border: solid 2px #0000; background: url(http://mt-backrooms.wikidot.com/local--files/theme:mt/mt-logo-light.png) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } /* ================================================================== */ /* 15. 标题块样式(章节标题) */ /* ================================================================== */ /* 标题块样式:用于章节标题区域 */ .titleblock { background-color: rgb(var(--pale-gray-monochrome)); /* 深灰色背景 */ color: rgb(var(--light-pale-gray-monochrome)); /* 白色文字 */ padding: 0.5rem 1rem 0.10rem; /* 上内边距较大,下内边距较小 */ margin: 1.5rem 0rem 0.5rem 0rem; /* 较大的上外边距,与正文分离 */ box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); /* 较深的阴影 */ border: solid rgb(var(--gray-monochrome)) 2px; /* 亮蓝色细边框 */ } /* 标题框样式:配合 titleblock 使用,形成重叠标签效果 */ .titlebox { color: rgb(var(--very-light-gray-monochrome)); /* 黑色文字 */ position: relative; top: -1.6rem; /* 向上偏移,与 titleblock 重叠 */ background-color: rgb(var(--gray-monochrome)); /* 亮蓝色背景 */ padding: 0.25rem 1rem; line-height: 0.1rem; /* 极小行高,使文字紧凑 */ } /* ================================================================== */ /* 16. 分页组件样式(TabView) */ /* ================================================================== */ /* 分页顶部选中状态:蓝色背景 */ .yui-navset .yui-nav .selected { background-color: rgb(var(--gray-monochrome)) !important; /* 选中分页亮蓝色背景 */ border-color: rgb(var(--gray-monochrome)) !important; /* 蓝色边框 */ } /* 选中分页的文字颜色:白色 */ .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { color: rgb(255, 255, 255) !important; /* 白色文字 */ background-color: transparent !important; /* 透明背景 */ } /* 分页内容区域:淡蓝色背景 */ .yui-navset .yui-content { background-color: rgba(0var(--gray-monochrome), 0.1) !important; /* 10% 透明度的亮蓝色背景 */ border-color: rgb(var(--gray-monochrome)) !important; /* 蓝色边框 */ } /* 未选中分页悬停效果:淡蓝色背景 */ .yui-navset .yui-nav a:hover { background-color: rgba(var(--gray-monochrome), 0.2) !important; /* 20% 透明度的亮蓝色背景 */ } /* ================================================================== */ /* 17. 安全/危险等级容器样式(SD 组件) */ /* ================================================================== */ .sd-container { --sd-border: var(--white-monochrome); /* 边框颜色:深灰色(20,20,20) */ --sd-text: 222,222,222; /* 文字颜色:浅灰色 */ --sd-symbol: var(--sd-text); /* 符号颜色同文字 */ --sd-bullets: var(--sd-text); /* 项目符号颜色同文字 */ --sd-symbol: var(--sd-border) !important; /* 覆盖符号颜色为边框色(深灰色) */ --sd-symbol-secondary: 255, 255, 255; /* 次要符号颜色:纯白 */ } /* ================================================================== */ /* 18. 页脚样式 */ /* ================================================================== */ #footer { color: rgb(var(--pale-gray-monochrome)); /* 浅灰色文字(55,55,55) */ }


