示例
若需将本版式引入到你的页面中,请将以下文本放到任意位置:
[[include :mt-backrooms:theme:pastal-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]]
/* 基础设置 */ @charset "UTF-8"; /* 声明字符编码为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'); /* 主字体 */ @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'); /* 繁体中文衬线体 */ /* 根变量定义 */ :root { --theme-base: "black-highlighter"; /* 基础主题名称 */ --theme-id: "danger-zone"; /* 主题ID */ --theme-name: "Danger Zone"; /* 主题显示名称 */ --logo-image: url("http://brsandbox-pro.wikidot.com/local--files/theme:accumulator/mic%20white.png"); /* 网站Logo */ --header-title: "M.I.C."; /* 主标题 */ --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格式) */ --white-monochrome: 130, 230, 225; /* 实际用作深灰色 */ --pale-gray-monochrome: 250,220,50; /* 浅灰色 */ --light-gray-monochrome: 40,45,120; /* 亮灰色 */ --gray-monochrome: 0,120,115; /* 中灰色 */ --black-monochrome: 40,45,120; /* 实际用作白色 */ --bright-accent: 0,120,115; /* 强调色 */ --medium-accent: 45,40,120; /* 中等强调色 */ --dark-accent: 0,120,115; /* 深强调色 */ --pale-accent: 250,220,50; /* 浅强调色 */ --dark-gray-monochrome: 250,220,50; /* 深灰色 */ --light-pale-gray-monochrome: 0,120,115; /* 浅灰黑色 */ --very-light-gray-monochrome: 255, 255, 255; /* 非常浅的灰色 */ /* 渐变效果 */ --gradient-header: linear-gradient(to top, rgba(0,120,115) 0%, rgba(120,40,125) 100% ); /* 顶部渐变 */ /* 组件颜色变量 */ --swatch-headerh1-color: var(255,255,255); /* 主标题颜色 */ --swatch-headerh2-color: var(255,255,255); /* 副标题颜色 */ --swatch-topmenu-border-color: var(255,255,255); /* 顶部菜单边框色 */ --swatch-topmenu-bg-color: var(255,140,0); /* 顶部菜单背景色 */ /* 链接颜色 */ --link-color: 255,0,255; /* 链接颜色(红色系) */ --hover-link-color: 255,255,255; /* 悬停链接颜色 */ /* 侧边栏图片样式 */ #side-bar .side-block div a img { filter: grayscale(100%); /* 图片灰度化 */ } /* 斜条纹效果(当前未使用) */ --diagonal-stripes: linear-gradient(transparent 0); } /* 页面底部按钮样式 */ 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; /* 保持无边框 */ } /* 头部伪元素(用于显示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%透明度 */ } /* 主标题样式 */ #header h1, #header h1 a { position: absolute; /* 绝对定位 */ top: 1rem; /* 距顶部1rem */ margin: 0; /* 无外边距 */ width: 100%; /* 全宽 */ display: flex; /* 弹性布局 */ justify-content: center; /* 内容居中 */ z-index: 0; /* 底层 */ } /* 副标题样式 */ #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; /* 黑色阴影 */ } /* 页脚样式 */ #footer{ color: rgb(var(--pale-gray-monochrome)); /* 浅灰色文字 */ } /* 新建页面链接样式 */ a.newpage { background: transparent; /* 透明背景 */ text-decoration: none /* 无下划线 */ } a.newpage { color: rgb(var(--newpage-color)) /* 使用变量颜色 */ } /* 搜索框悬停状态 */ #search-top-box-input:hover, #search-top-box-input:focus { background: rgba(var(--medium-accent), .25); /* 半透明背景 */ } /* 顶部导航菜单链接样式 */ #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { color: rgb(40,45,120); /* 白色文字 */ } /* 顶部导航菜单悬停状态(有语法错误) */ #top-bar div.top-bar > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li > a:hover { color: rgb(40,45,120); /* 应修复为var(--pale-gray-monochrome) */ } /* 顶部导航菜单悬停状态 */ #top-bar div.top-bar > ul > li:hover > a, #top-bar div.mobile-top-bar > ul > li:hover > a { color: rgb(40,45,120); /* 浅灰色文字 */ } /* 登录状态文字样式 */ #login-status { color: rgb(255,255,255); /* 白色文字 */ } #login-status a { color: rgb(255,255,255); /* 白色链接 */ } #login-status ul a { color: rgb(255,255,255); /* 浅灰色链接 */ } /* 账户按钮样式 */ #account-topbutton { color: rgb(255,255,255); /* 白色文字 */ } /* 维基内容表格样式 */ table.wiki-content-table th { background-color: rgb(0,120,115) !important; /* 改为明亮的蓝色背景 */ color: rgb(40,45,120); /* 保持白色文字 */ border-color: rgb(40,45,120); /* 白色边框 */ } /* SCP图片块样式 */ .scp-image-block { box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 阴影效果 */ } /* 引用块样式 - 科技蓝绿不透明背景 */ blockquote, div.blockquote { background-color: rgb(250,170,250); /* 不透明背景 */ color:rgb(40,45,120); /* 深蓝色文字 */ padding: 1rem; /* 内边距1rem */ margin: 1rem 0; /* 上下外边距1rem */ box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 轻微阴影 */ border: 0.2rem solid rgb(255,0,255); /* 深蓝色边框,宽度0.2rem */ } /* 风格化引用块 - 修改左侧边框为蓝色 */ .styled-quote { background-color: rgb(250,220,50); /* 浅灰背景 */ border-left: 0.5rem solid rgb(40, 45, 120); /* 左侧蓝色边框 */ color: rgb(40,45,120); /* 白色文字提高对比度 */ 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(40, 45, 120); /* 蓝色背景 */ border-left: 0.5rem solid rgb(250,220,50); /* 稍深的蓝色边框保持层次 */ color: rgb(250,220,50); /* 白色文字提高对比度 */ 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(255,235,200); /* 链接颜色 */ } /* 暗色内容块 */ .darkblock { background-color:rgb(40, 45, 120); /* 深灰背景 */ 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(250,220,50); /* 白色文字 */ } /* 亮色内容块 */ .lightblock { background-color: rgb(250,220,50); /* 蓝色背景 */ color: rgb(40, 45, 120); /* 黑色文字提高可读性 */ padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } /* 更深色内容块 */ .darkerblock { 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(250,220,50); /* 白色文字 */ } .darkblock a { color: rgb(var(--swatch-menubg-medium-color)); /* 链接颜色 */ } /* 安全/危险等级容器样式 */ .sd-container { --sd-border:var(--white-monochrome); /* 边框颜色 */ --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; /* 次要符号颜色 */ } /* 侧边栏图片反转效果 */ #side-bar .side-block div a img { filter: invert(calc(230/255)); /* 图片颜色反转(程度约90%) */ } /* 新建页面链接(不存在链接)样式 */ a.newpage { background: transparent; /* 透明背景 */ text-decoration: none; /* 无下划线 */ color: rgb(155, 155, 155) !important; /* 红色文字,使用!important确保覆盖其他样式 */ } /* 新建页面链接悬停状态 */ a.newpage:hover { color: rgb(255, 255, 255) !important; /* 保持红色 */ background-color: rgba(155, 155, 155); /* 添加淡红色背景提高可识别性 */ } /* 深色边框块样式 - 深灰背景+亮色边框 */ .dark-borderblock { background-color: rgb(40, 45, 120); /* 深灰色背景 */ color: rgb(250,220,50); /* 白色文字确保可读性 */ 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(250,220,50); /* 亮色粗边框突出显示 */ } /* 亮色边框块样式 - 亮色背景+深色边框 */ .light-borderblock { background-color: rgb(250,220,50); /* 背景 */ color: rgb(40, 45, 120); /* 文字形成对比 */ 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(40,45,120); /* 边框 */ } /* 带边框的Logo块样式 */ .border-logoblock { padding: 0.01rem 1rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 阴影效果 */ color: rgb(250,220,50); /* 白色文字 */ margin: 0.5rem 0 0.5rem 0.25rem; display: block; /* 块级显示 */ position: relative; /* 相对定位为伪元素定位做准备 */ background-color: rgb(40, 45, 120); /* 深灰背景 */ border: solid 0.3rem rgb(250,220,50); /* 亮色边框 */ } /* Logo块的背景水印效果 - 放大0倍 */ .border-logoblock::after { content: ""; /* 伪元素必需属性 */ float: center; /* 居中浮动 */ border: solid 2px #0000; /* 透明边框 */ background: url(http://brsandbox-pro.wikidot.com/local--files/theme:accumulator/mic%20white.png) center/25% no-repeat; /* Logo水印放大2倍 */ opacity: 0.25; /* 半透明效果 */ top: 0; /* 覆盖整个父元素 */ left: 0; bottom: 0; right: 0; position: absolute; /* 绝对定位 */ z-index: 1; /* 置于内容下层 */ } /* 基础Logo块样式(无边框版) */ .logoblock { padding: 0.01rem 1rem; color: rgb(250,220,50); 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(40, 45, 120); /* 深灰背景 */ } /* 基础Logo块的水印效果 */ .logoblock::after { content: ""; float: center; border: solid 2px #0000; background: url(http://brsandbox-pro.wikidot.com/local--files/theme:accumulator/mic%20white.png) center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } /* 标题块样式 - 用于章节标题 */ .titleblock { background-color: rgb(40, 45, 120); /* 深灰背景 */ color: rgb(250,220,50); /* 白色文字 */ 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(250,220,50) 2px; /* 亮色细边框 */ } /* 标题框样式 - 配合titleblock使用 */ .titlebox { color: rgb(40,45,120); /* 深灰文字 */ position: relative; /* 相对定位 */ top: -1.6rem; /* 上移与titleblock重叠 */ background-color: rgb(250,220,50); /* 亮色背景 */ padding: 0.25rem 1rem; /* 内边距 */ line-height: 0.1rem; /* 紧凑的行高 */ } /* 基础边框块样式 */ .borderblock { background-color: rgb(40, 45, 120); /* 深灰背景 */ color: rgb(250,220,50); /* 白色文字 */ 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(250,220,50); /* 亮色粗边框 */ } /* 存在链接的悬停效果 */ a:not(.newpage):hover { background-color: rgba(255,0,255) !important; transition: background-color 0.2s ease; } /* 确保侧边栏链接也有相同效果 */ #side-bar a:not(.newpage):hover { background-color: rgba(250,220,50, 0.1) !important; } /* 顶部菜单链接悬停效果 */ #top-bar a:hover, #top-bar div.mobile-top-bar a:hover { background-color: rgba(40,45,120, 0.1) !important; } /* 顶栏链接默认状态(未悬停) */ #top-bar div.top-bar > ul > li > a, #top-bar div.mobile-top-bar > ul > li > a { color: rgb(40,45,120) !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(40,45,120) !important; /* 悬停时 */ background-color: rgba(0, 255, 190, 0.1) !important; /* 保持背景悬停效果 */ } /* 分页顶部(tabview)样式 */ .yui-navset .yui-nav .selected { background-color: rgb(255, 140, 0) !important; /* 背景 */ border-color: rgb(255, 140, 0) !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(250,170,250) !important; /* 淡蓝色背景 */ border-color: rgb(250,0,250) !important; /* 蓝色边框 */ } /* 未选中分页悬停效果 */ .yui-navset .yui-nav a:hover { background-color: rgba(255, 140, 0, 0.2) !important; }


