Template:Theme-STR
| 信息框在设定区主题下的样子 | |
|---|---|
Theme-STR展示页：本页本身就是设定区主题的渲染结果 | |
| 别名 | {{STR主题}} |
| 目前状态 | 使用于设定区 |
Theme-STR是HUIJIA FUN设定区（神话 / 实体 / 道法）条目的通用主题，按VGR Design System的设定区（夜）配色编写：迪普菲紫黑底、魔万浅绿标题、偏绿的侧栏导航、迪普菲淡紫强调。内容卡保留40px网格线和扫描线，并加上四角定位标；正文用霞鹜新致宋。
主题的外观全部由本模板里的CSS变量（见下文“设计变量”）决定，其他模板读取这些变量，所以在本主题下会自动换成深色版。
来源
用法
本模板没有参数。在页面源代码的最前面添加：
{{Theme-STR}}
整个页面（顶栏、侧栏、内容卡、页脚）都会切换到设定区主题。
设计变量
以下变量定义在:root上，其他模板可以直接引用。
原色
| 色块 | 变量 | 值 | 用途 |
|---|---|---|---|
--src-huijia-green |
#025F32 |
汇佳绿：标题下划线、按钮底色、表头线、悬停边框 | |
--src-dragon-green |
#3B7E3D |
龙绿：按钮悬停底色 | |
--src-plurimod-light |
#C1E1A6 |
魔万浅绿：标题、四角定位标 | |
--src-dipfield-violet |
#3F3954 |
迪普菲紫：警告框底色、光斑 |
底色（迪普菲紫黑）
| 色块 | 变量 | 值 | 用途 |
|---|---|---|---|
--paper |
#0D0D12 |
页面最底层 | |
--paper-raised |
#101018 |
内容卡、输入框 | |
--paper-sunk |
#08080F |
代码块、行号栏 | |
--paper-alt |
#161622 |
表格、目录、分类栏、信息框 | |
--color-surface-3 |
#1E1E2E |
悬停、选中项 | |
--color-surface-4 |
#2A2A40 |
分隔、按下状态 |
--color-surface-0到--color-surface-2分别等于--paper、--paper-raised、--paper-alt，用来覆盖Timeless自带的白与浅灰。
文字
| 色块 | 变量 | 值 | 对比度 | 用途 |
|---|---|---|---|---|
--ink |
#E8E8F4 |
15.6:1 | 正文 | |
--ink-bright |
#F5F5FF |
— | 粗体、表格内容、输入框文字 | |
--ink-muted |
#A9A6BF |
8.0:1 | 说明文字、页脚、未选中的标签 | |
--heading |
#C1E1A6 |
13.2:1 | 标题 | |
--nav-ink |
#22CC66 |
9.1:1 | 侧栏导航 |
线与强调
| 色块 | 变量 | 值 | 用途 |
|---|---|---|---|
--rule |
#28284A |
装饰线、卡片边框 | |
--rule-strong |
#5A5A8A |
承载信息的边框（输入框、按钮），对比度3.0:1 | |
--accent |
#B9B2D6 |
迪普菲淡紫：◈标记、焦点光晕，对比度9.4:1 | |
--accent-fill |
#025F32 |
按钮底色、选中文字底色（上面的字用--on-accent #FFFFFF）
| |
--focus |
#8FB0FF |
键盘焦点轮廓 |
链接
| 色块 | 变量 | 值 | 状态 |
|---|---|---|---|
--link |
#66EEBB |
普通链接 | |
--link-visited |
#55CCAA |
已访问 | |
--link-hover |
#C1E1A6 |
悬停（加点状下划线） | |
--link-new |
#EE7766 |
红链（页面不存在） |
形状与尺寸
| 变量 | 值 | 说明 |
|---|---|---|
--radius |
6px | 卡片、搜索框、侧栏、表格 |
--radius-sm |
4px | 代码、按钮、输入框 |
--radius-xs |
2px | 极小圆角 |
--radius-none |
0 | 无圆角 |
--radius-pill |
999px | 胶囊形 |
--control-h |
40px | 顶栏控件（站名、搜索框）统一高度 |
--control-w |
320px | 搜索框最大宽度 |
--space-1到--space-12 |
4 / 8 / 12 / 16 / 24 / 32 / 48px | 间距刻度（1、2、3、4、6、8、12） |
字体
| 变量 | 字体 | 用途 | 效果 |
|---|---|---|---|
--font-body |
霞鹜新致宋 → Source Serif 4 → 思源宋体 | 正文、侧栏导航、页面标签 | 汇佳绿与迪普菲紫 Dipfield 1999 |
--font-serif |
Source Serif 4 → 思源宋体 | 标题、粗体 | 墨绿色的启示录 Verdant Green Revelation |
--font-sans |
思源黑体 → 苹方 → 微软雅黑 | 表格、输入框、按钮 | 市统改革 O.0 = S.C.1999 |
--font-latin |
Cormorant Garamond | 拉丁文装饰 | Pre-Diphic, a constructed language |
--font-mono |
JetBrains Mono | 代码、编辑框 |
|
--font-hud |
Share Tech Mono | 侧栏组名、表头、目录标题、六级标题 | S.T.R. OFFICE 0123456789 |
--font-banner |
站酷小薇 | 站名、个人菜单标题 | S.T.R. OFFICE |
--font-scripture |
霞鹜文楷屏幕版 | 个人菜单条目 | 经文与引文用楷体 |
兼容变量
- 皮肤与扩展读取：--color-primary、--color-progressive、--background-color-progressive、--border-color-progressive、--color-base、--color-emphasized、--color-subtle、--background-color-base、--background-color-interactive、--border-color-base 等。
- 旧变量名（供其他模板引用，值已指向上面的新变量）：--str-deep、--str-green、--str-accent、--str-bg-body、--str-bg-card、--str-bg-card-alt、--str-border、--str-text、--str-link、--str-heading、--mw-primary、--mw-border、--font-heading、--font-code。
受影响的元素
页面框架
| 区域 | 选择器 | 效果 |
|---|---|---|
| 页面底层 | body、html |
紫黑底；静态扫描线（body::before）；30秒漂移的墨绿与迪普菲紫光斑（body::after）
|
| 顶栏 | #mw-header-container |
紫黑底、细分隔线；桌面宽度（851px以上）取消吸顶，手机端保留Timeless原本的定位 |
| 站名 | #p-banner |
显示为“S.T.R. OFFICE”，魔万浅绿加发光；每9秒一次的短暂故障抖动 |
| 搜索框 | #searchform、#searchInput |
高40px、最宽320px、圆角6px；聚焦时淡紫光晕 |
| 个人菜单 | #p-personal |
保持原版：深灰底、浅绿边与发光、ZCOOL XiaoWei标题、悬停缩进 |
| 侧栏 | .sidebar-chunk、.mw-portlet |
半透明卡片；组名用HUD等宽字并加◈前缀；导航字偏绿，悬停变浅绿并右移 |
| 内容卡 | #mw-content |
紫黑底卡片；40px网格线；四角定位标；外层#mw-content-wrapper透明
|
| 页面标签 | .mw-portlet-views、.mw-portlet-namespaces |
未选中为淡紫灰；选中为浅绿并带墨绿下划线 |
| 分类栏 | #catlinks |
见本页底部 |
| 页脚 | .mw-footer |
透明底、顶部墨绿线；见本页底部 |
| 滚动条 | ::-webkit-scrollbar |
紫黑轨道；悬停时滑块变墨绿 |
标题层级
一级到六级标题都是魔万浅绿，二级标题前自动加◈。一、二级标题用整条下划线，三到六级的墨绿渐变线逐级变短（75% / 55% / 35% / 20%）。页面标题（h1.firstHeading）前加▹。
三级标题示例
四级标题示例
五级标题示例
六级标题示例（HUD等宽字）
正文与行内元素
正文是霞鹜新致宋，行高1.9。粗体用Source Serif 4并提亮,斜体和引用不做合成斜体。行内代码：--paper-raised。这段行内颜色应该保持金色。这段应该保持浅红色。
代码块：紫黑更深的底，左侧2px墨绿线。 把鼠标移到右上角，会出现“复制”按钮（脚本添加）。 S.C.1999 = O.0
表格
| 事件 | S.C. | O.纪年 | 备注 |
|---|---|---|---|
| 市启改革 | 1619 | — | D.L.0 |
| 市统改革 | 1999 | 0 | O.0 = S.C.1999 |
| 贺论攻会解散 | 2021.05.14 | 22.05.14 | 悬停整行变墨绿 |
表头：墨绿半透明底、HUD等宽字、下方2px墨绿线；表体：无竖线、行间细线。窄屏下自动横向滚动。
信息框与提示框
| Theme-STR |
|---|
在本主题下改为深色，参数里的背景仍会按行内样式优先生效。
| 默认信息框 |
|---|
| 自定义背景（行内样式优先） |
|---|
（未填写内容）
读取本主题的变量：
颜色读取Theme-STR的变量。
本分类不再更新。
这一段的纪年还没有确定。
本页涉及《墨绿色的启示录》主线结局。
系统提示盒
.warningbox、.previewnote）：迪普菲紫半透明底。.successbox）：墨绿半透明底、墨绿边。.errorbox）：暗红半透明底、浅红字。导航盒
按钮
墨绿底、白字；悬停变龙绿并加绿色光晕。input[type="submit"]同样适用。
编辑界面（只在编辑页可见）
| 元素 | 选择器 | 效果 |
|---|---|---|
| 编辑框 | #wpTextbox1、.CodeMirror、.ace_editor |
深色底、浅绿白字、光标为导航绿 |
| 行号栏 | .CodeMirror-gutters |
更深的底、右侧分隔线 |
| 工具栏 | .oo-ui-toolbar-bar、.oo-ui-buttonElement-framed |
--paper-alt底、--rule-strong边
|
| 输入框 | input[type="text"]、select、.oo-ui-textInputWidget |
--paper-raised底、浅色字
|
| 差异对比 | td.diff-addedline、td.diff-deletedline |
新增为墨绿半透明、删除为暗红半透明 |
脚本行为
| 功能 | 元素 | 说明 |
|---|---|---|
| 阅读进度条 | #str-progress-container |
页面底部3px，墨绿到浅绿渐变，随滚动增长 |
| 代码复制 | .str-copy-btn |
悬停在pre右上角出现；中文站显示“复制 / 已复制 / 请手动复制”，英文站显示COPY / COPIED / FAILED
|
| 扫描线扫过 | #str-scanline-sweep |
每9秒一条淡绿光带从上到下 |
| 取消吸顶 | #mw-header-container |
桌面宽度下用MutationObserver保持顶栏不吸顶；手机端不执行 |
| 重复加载保护 | window.__strThemeLoaded |
同一页面只初始化一次 |
响应式与无障碍
| 条件 | 效果 |
|---|---|
| 宽度850px以下 | 内容卡内边距缩小；侧栏组名隐藏、卡片外框去掉；空的侧栏组不显示；下拉菜单面板改为深色；Logo最宽180px；表格横向滚动 |
| 宽度1100px以上 | 内容卡上方加25px间距 |
prefers-reduced-motion: reduce |
关闭光斑漂移、站名故障、扫描线扫过，并去掉所有过渡 |
| 键盘焦点 | :focus-visible显示2px淡蓝轮廓
|
