/* 基础设置 */
@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 {
--logo-image: url("https://i.mituw.com/imgs/2026/03/07/b86e3ef9dddbbd02.png");
--header-title: "锚点公会";
--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: 0, 0, 10;
--pale-gray-monochrome: 100, 100, 150;
--light-gray-monochrome: 100, 100, 150;
--gray-monochrome: 230, 230, 255;
--black-monochrome: 255, 255, 255;
--bright-accent: 90, 230, 255;
--medium-accent: 90, 230, 255;
--dark-accent: 90, 230, 255;
--pale-accent: 120, 250, 255;
--swatch-menubg-dark-color: var(--white-monochrome);
--thing: 100, 110, 200;
/* 渐变效果 */
--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(--black-monochrome); /* 顶部菜单边框色 */
--swatch-topmenu-bg-color: var(--white-monochrome); /* 顶部菜单背景色 */
/* 链接颜色 */
--link-color: 200, 255, 255;
--hover-link-color: 200, 255, 255;
--visited-link-color: 200, 200, 255;
/* 背景渐变距离 */
--background-gradient-distance: 0rem; /* 无渐变距离 */
/* 斜条纹效果(当前未使用) */
--diagonal-stripes: linear-gradient(transparent 0);
}
/* 页面主体背景样式 */
#skrollr-body {
background-image: url("https://imgurl.diadi.cn/imgs/2025/07/7c7cef1bf97ff72d.png");
background-repeat: repeat-x;
background-size: inherit;
width: 100%;
height: 7.5rem;
}
/* 主容器样式删除 */
#container {
background-image: radial-gradient(circle, rgb(var(--pale-gray-monochrome), 0.40) 0%, transparent 0); /* 透明点阵 */
background-size: 0.25em 0.25em; /* 点阵大小 */
background-repeat: repeat; /* 重复平铺 */
background-attachment: fixed; /* 固定背景 */
}
/* 侧边栏图片样式 */
#side-bar .side-block div a img {
filter: invert(1)
brightness(0.8); /* 图片灰度化 */
}
/* 页面底部按钮样式 */
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; /* 保持无边框 */
}
/* 顶部区域设置 */
#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 8rem; /* 自动宽度，高度16rem */
background-position: center; /* 居中显示 */
background-repeat: no-repeat; /* 不重复 */
opacity: 0.8; /* 60%透明度 */
}
/* 主标题样式 */
#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 rgba(0, 0, 0, 0.5); /* 黑色阴影 */
}
#page-title {
border-color: rgb(var(--light-gray-monochrome));
color: rgb(var(--dark-accent))!important;
font-size: 2.5rem;
}
h1 {
font-size: 2rem;
color:rgb(var(--dark-accent));
line-height: 1
}
h2 {
font-size: 1.8rem;
color:rgb(var(--dark-accent));
line-height: 1
}
h3 {
font-size: 1.6rem;
color:rgb(var(--dark-accent));
line-height: 1
}
h4 {
font-size: 1.4rem;
color:rgb(var(--dark-accent));
line-height: 1
}
h5 {
font-size: 1.2rem;
color:rgb(var(--dark-accent));
line-height: 1
}
h6 {
font-size: 1rem;
color:rgb(var(--dark-accent));
line-height: 1
}
/* 页脚样式 */
#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), 0.25); /* 半透明背景 */
}
/* 顶部导航菜单链接样式 */
#top-bar div.top-bar > ul > li > a,
#top-bar div.mobile-top-bar > ul > li > a {
color: rgb(var(--gray-monochrome)); /* 黑色文字 */
}
/* 顶部导航菜单悬停状态 */
#top-bar div.mobile-top-bar>ul>li:hover a,
#top-bar div.top-bar>ul>li:hover a {
color: rgb(var(--gray-monochrome));
}
/* 登录状态文字样式 */
#login-status {
color: rgb(var(--black-monochrome)); /* 白色文字 */
}
#login-status a {
color: rgb(var(--black-monochrome)); /* 白色链接 */
}
#login-status ul a {
color: rgb(var(--black-monochrome)); /* 浅灰色链接 */
}
/* 账户按钮样式 */
#account-topbutton {
color: rgb(var(--black-monochrome)); /* 白色文字 */
}
/* 维基内容表格样式 */
table.wiki-content-table th {
background-color: rgba(90, 230, 255, 0.8) !important; /* 淡紫色背景 */
color: rgb(var(--black-monochrome)); /* 黑色文字 */
border-color: rgb(var(--black-monochrome)); /* 黑色边框 */
}
/* SCP图片块样式 */
.scp-image-block {
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 阴影效果 */
}
/* 引用块样式 - 添加20%透明度的紫色背景 */
blockquote,
div.blockquote {
background-color: rgba(90, 80, 230, 0.8); /* 20%透明度的紫色背景 */
color: inherit; /* 继承文字颜色 */
padding: 1rem; /* 适当的内边距 */
margin: 1rem 0; /* 外边距 */
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 保留原有阴影效果 */
border-color: rgb(90, 80, 230) !important; /* 蓝色边框 */
}
/* 风格化引用块 - 修改左侧边框为蓝色 */
.styled-quote {
background-color: rgba(90, 80, 230, 0.2); /* 浅灰背景 */
border-left: 0.5rem solid rgb(90, 230, 255); /* 左侧蓝色边框 */
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: rgba(90, 80, 230, 0.2); /* 深蓝色背景 */
border-left: 0.5rem solid rgb(0, 20, 120); /* 稍深的蓝色边框保持层次 */
color: rgb(255, 255, 255); /* 白色文字提高对比度 */
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)); /* 链接颜色 */
}
/* 暗色内容块 */
.darkblock {
background-color:rgba(90,80,230,0.2); /* 深灰背景 */
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(--black-monochrome)); /* 白色文字 */
}
/* 亮色内容块 */
.lightblock {
background-color: rgb(90, 230, 255); /* 蓝色背景 */
color: rgb(0, 0, 0); /* 黑色文字提高可读性 */
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 a {
color: rgb(var(--swatch-menubg-medium-color)); /* 链接颜色 */
}
/* 侧边栏图片反转效果 */
#side-bar .side-block div a img {
filter: invert(calc(230/255)); /* 图片颜色反转(程度约90%) */
}
/* 新建页面链接（不存在链接）样式 */
a.newpage {
background: transparent; /* 透明背景 */
text-decoration: none; /* 无下划线 */
color: rgb(230, 230, 120) !important; /* 红色文字，使用!important确保覆盖其他样式 */
}
/* 新建页面链接悬停状态 */
a.newpage:hover {
color: rgb(230, 230, 120) !important; /* 保持橙色 */
background-color: rgba(255, 0, 0, 0.1); /* 添加淡黄绿色背景提高可识别性 */
}
/* 深色边框块样式 - 深灰背景+亮色边框 */
.dark-borderblock {
background-color: rgba(90,80,230, 0.2); /* 深灰色背景 */
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(0, 20, 120); /* 亮色粗边框突出显示 */
}
/* 亮色边框块样式 - 亮色背景+深色边框 */
.light-borderblock {
background-color: rgba(90, 80, 230, 0.2); /* 亮色背景 */
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(90,230,255); /* 深色边框 */
}
/* 带边框的Logo块样式 */
.border-logoblock {
padding: 0.01rem 1rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); /* 阴影效果 */
color: rgb(255, 255, 255); /* 白色文字 */
margin: 0.5rem 0 0.5rem 0.25rem;
display: block; /* 块级显示 */
position: relative; /* 相对定位为伪元素定位做准备 */
background-color: rgba(90,80,230,0.2); /* 蓝色背景 */
border: solid 0.3rem rgb(90,230,255); /* 亮色边框 */
}
/* Logo块的背景水印效果 - 放大2倍 */
.border-logoblock::after {
content: ""; /* 伪元素必需属性 */
float: center; /* 居中浮动 */
border: solid 2px #0000; /* 透明边框 */
background: url(https://imgurl.diadi.cn/imgs/2025/07/32f190e582447b29.png) center/50% 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(255, 255, 255);
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: rgba(90,80,230,0.2); /* 深灰背景 */
}
/* 基础Logo块的水印效果 */
.logoblock::after {
content: "";
float: center;
border: solid 2px #0000;
background: url(https://imgurl.diadi.cn/imgs/2025/07/32f190e582447b29.png
) center/50% no-repeat;
opacity: 0.25;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
}
/* 标题块样式 - 用于章节标题 */
.titleblock {
background-color: rgba(90,80,230,0.2); /* 深灰背景 */
color: rgb(255,255,255); /* 白色文字 */
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(90,230,255) 2px; /* 亮色细边框 */
}
/* 标题框样式 - 配合titleblock使用 */
.titlebox {
color: rgb(0,0,0); /* 深灰文字 */
position: relative; /* 相对定位 */
top: -1.6rem; /* 上移与titleblock重叠 */
background-color: rgb(90,230,255); /* 亮色背景 */
padding: 0.25rem 1rem; /* 内边距 */
line-height: 0.1rem; /* 紧凑的行高 */
}
/* 存在链接的悬停效果 */
a:not(.newpage):hover {
background-color: rgba(120, 200, 230, 0.1) !important; /* 10%透明度的青蓝色背景 */
transition: background-color 0.2s ease; /* 添加平滑过渡效果 */
}
/* 确保侧边栏链接也有相同效果 */
#side-bar a:not(.newpage):hover {
background-color: rgba(120, 200, 230, 0.1) !important;
}
/* 顶部菜单链接悬停效果 */
#top-bar a:hover,
#top-bar div.mobile-top-bar a:hover {
background-color: rgba(120, 200, 230, 0.1) !important;
}
/* 顶栏链接默认状态（未悬停） */
#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; /* 悬停时变为浅灰色 */
background-color: rgba(90, 230, 230, 0.1) !important; /* 保持青蓝色背景悬停效果 */
}
/* 分页顶部(tabview)样式 - 修改选中分页为蓝色 */
.yui-navset .yui-nav .selected {
background-color: rgb(250, 250, 255) !important; /* 选中分页蓝色背景 */
border-color: rgb(90, 80, 230) !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(90, 80, 230, 0.1) !important; /* 淡蓝色背景 */
border-color: rgb(90, 80, 230) !important; /* 蓝色边框 */
}
/* 未选中分页悬停效果 */
.yui-navset .yui-nav a:hover {
background-color: rgba(90, 80, 230, 0.2) !important; /* 淡蓝色悬停背景 */
}
/* 安全/危险等级容器样式 */
.sd-container {
--sd-text:var(--white-monochrome); /* 文字颜色 */
--sd-bullets:var(--dark-accent);
}
/* 全屏扫描线效果 */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 鼠标事件穿透，不影响点击链接/按钮 */
background: repeating-linear-gradient(
to bottom,
rgba(200, 255, 255, 0.1) 0px, /* 线条颜色和起始位置，可调整透明度 */
rgba(200, 255, 255, 0.1) 2px, /* 线条厚度 2px */
transparent 1px,
transparent 6px /* 线条间距 */
);
background-size: 100% 6px; /* 背景高度设为一个周期的高度（线条+间隙） */
animation: moveScan 0.5s linear infinite; /* 0.5秒循环一次，可调整速度 */
z-index: 9999; /* 确保位于其他内容上方 */
}
@keyframes moveScan {
from {
background-position: 0 0;
}
to {
background-position: 0 6px; /* 移动一个周期高度，实现无缝循环 */
}
}
