|
|
| （未显示同一用户的17个中间版本） |
| 第1行： |
第1行： |
| /* ----------------------------------------------------------
| |
| 1. CSS 变量（全站配色、字体、圆角、阴影统一管理）
| |
| ---------------------------------------------------------- */
| |
| :root {
| |
| /* 主色调 */
| |
| --gmtv-bg: #f5f7fa;
| |
| --gmtv-card: #ffffff;
| |
| --gmtv-primary: #1a6fc4;
| |
| --gmtv-primary-hover: #155da6;
| |
| --gmtv-primary-light: #e8f1fb;
| |
| --gmtv-accent: #e03020;
| |
| --gmtv-accent-light: #fdecea;
| |
| --gmtv-text: #181e28;
| |
| --gmtv-text-secondary: #5a6170;
| |
| --gmtv-text-muted: #8c939e;
| |
| --gmtv-border: #e2e6ec;
| |
| --gmtv-border-light: #eef1f5;
| |
|
| |
|
| /* 字体 */
| |
| --gmtv-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
| |
| --gmtv-font-heading: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
| |
| --gmtv-font-mono: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
| |
|
| |
| /* 圆角与阴影 */
| |
| --gmtv-radius: 10px;
| |
| --gmtv-radius-sm: 6px;
| |
| --gmtv-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);
| |
| --gmtv-shadow-card-hover: 0 4px 16px rgba(26, 111, 196, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
| |
| --gmtv-shadow-infobox: 0 2px 8px rgba(0, 0, 0, 0.08);
| |
|
| |
| /* 间距 */
| |
| --gmtv-gap: 20px;
| |
| --gmtv-gap-sm: 12px;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 2. 全局基础样式
| |
| ---------------------------------------------------------- */
| |
| body {
| |
| background-color: var(--gmtv-bg);
| |
| color: var(--gmtv-text);
| |
| font-family: var(--gmtv-font-body);
| |
| font-size: 15px;
| |
| line-height: 1.75;
| |
| -webkit-font-smoothing: antialiased;
| |
| -moz-osx-font-smoothing: grayscale;
| |
| }
| |
|
| |
| /* 全局链接 */
| |
| a {
| |
| color: var(--gmtv-primary);
| |
| text-decoration: none;
| |
| transition: color 0.15s ease;
| |
| }
| |
| a:hover {
| |
| color: var(--gmtv-primary-hover);
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* 新词条（红链）样式 */
| |
| a.new {
| |
| color: var(--gmtv-accent);
| |
| }
| |
| a.new:hover {
| |
| color: #b82018;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 3. 内容区卡片化 — 每个章节自动变成白色卡片
| |
| ---------------------------------------------------------- */
| |
|
| |
| /* 整个内容区域 */
| |
| #mw-content-text {
| |
| max-width: 960px;
| |
| }
| |
|
| |
| /*
| |
| MediaWiki 的每个 == 章节标题 == 后面的内容块
| |
| Chameleon 皮肤下，每个 section 用 .mw-parser-output > h2 分隔
| |
| 我们对整个 parser output 做卡片化处理
| |
| */
| |
| .mw-parser-output {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: var(--gmtv-gap);
| |
| }
| |
|
| |
| /* 让章节标题 + 内容形成视觉卡片 */
| |
| .mw-parser-output > .mw-heading2,
| |
| .mw-parser-output > h2 {
| |
| background: var(--gmtv-card);
| |
| margin: 0;
| |
| padding: 18px 24px 14px;
| |
| border-radius: var(--gmtv-radius) var(--gmtv-radius) 0 0;
| |
| box-shadow: var(--gmtv-shadow-card);
| |
| border-bottom: 2px solid var(--gmtv-primary);
| |
| font-family: var(--gmtv-font-heading);
| |
| font-size: 1.35em;
| |
| font-weight: 700;
| |
| color: var(--gmtv-text);
| |
| letter-spacing: 0.01em;
| |
| line-height: 1.4;
| |
| }
| |
|
| |
| /* 章节标题内的编辑按钮 */
| |
| .mw-parser-output > .mw-heading2 .mw-editsection,
| |
| .mw-parser-output > h2 .mw-editsection {
| |
| font-size: 0.65em;
| |
| font-weight: 400;
| |
| color: var(--gmtv-text-muted);
| |
| }
| |
|
| |
| /* 三级标题 */
| |
| .mw-parser-output > .mw-heading3,
| |
| .mw-parser-output > h3 {
| |
| font-size: 1.1em;
| |
| font-weight: 600;
| |
| color: var(--gmtv-primary);
| |
| margin-top: 1.2em;
| |
| margin-bottom: 0.4em;
| |
| padding-left: 10px;
| |
| border-left: 3px solid var(--gmtv-primary);
| |
| }
| |
|
| |
| /* 章节内容段落（紧跟 h2 后面的 p / table / div 等元素） */
| |
| .mw-parser-output > p,
| |
| .mw-parser-output > ul,
| |
| .mw-parser-output > ol,
| |
| .mw-parser-output > dl,
| |
| .mw-parser-output > div:not(.infobox-wrapper):not(.navbox-wrapper):not(.mw-heading2):not(.mw-heading3),
| |
| .mw-parser-output > blockquote,
| |
| .mw-parser-output > pre,
| |
| .mw-parser-output > .wikitable {
| |
| background: var(--gmtv-card);
| |
| margin: -1px 0 0 0; /* 紧贴上方卡片 */
| |
| padding: 12px 24px;
| |
| box-shadow: var(--gmtv-shadow-card);
| |
| }
| |
|
| |
| /* 最后一个元素加底部圆角 */
| |
| .mw-parser-output > p:last-child,
| |
| .mw-parser-output > ul:last-child,
| |
| .mw-parser-output > ol:last-child,
| |
| .mw-parser-output > div:last-child,
| |
| .mw-parser-output > .wikitable:last-child {
| |
| border-radius: 0 0 var(--gmtv-radius) var(--gmtv-radius);
| |
| padding-bottom: 20px;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 4. Infobox 样式（角色/IP/境界/势力通用）
| |
| ---------------------------------------------------------- */
| |
| .infobox,
| |
| .infobox-wrapper {
| |
| background: var(--gmtv-card);
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius);
| |
| box-shadow: var(--gmtv-shadow-infobox);
| |
| padding: 0;
| |
| margin: 0 0 var(--gmtv-gap) var(--gmtv-gap);
| |
| float: right;
| |
| width: 300px;
| |
| overflow: hidden;
| |
| font-size: 0.9em;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* Infobox 标题栏 */
| |
| .infobox-title,
| |
| .infobox caption,
| |
| .infobox th[colspan] {
| |
| background: var(--gmtv-primary);
| |
| color: #ffffff;
| |
| font-size: 1.15em;
| |
| font-weight: 700;
| |
| text-align: center;
| |
| padding: 14px 16px;
| |
| letter-spacing: 0.03em;
| |
| }
| |
|
| |
| /* Infobox 角色图片 */
| |
| .infobox-image,
| |
| .infobox .image-section {
| |
| text-align: center;
| |
| padding: 0;
| |
| background: var(--gmtv-bg);
| |
| }
| |
| .infobox-image img,
| |
| .infobox .image-section img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| }
| |
|
| |
| /* Infobox 行：标签 + 数据 */
| |
| .infobox th {
| |
| background: var(--gmtv-primary-light);
| |
| color: var(--gmtv-primary);
| |
| font-weight: 600;
| |
| padding: 8px 12px;
| |
| text-align: right;
| |
| width: 35%;
| |
| border-bottom: 1px solid var(--gmtv-border-light);
| |
| vertical-align: top;
| |
| }
| |
| .infobox td {
| |
| padding: 8px 12px;
| |
| border-bottom: 1px solid var(--gmtv-border-light);
| |
| vertical-align: top;
| |
| }
| |
|
| |
| /* Infobox 分组标题行（如"实力信息""人际关系"） */
| |
| .infobox-group-header,
| |
| .infobox tr.infobox-header th {
| |
| background: linear-gradient(135deg, var(--gmtv-primary), var(--gmtv-primary-hover));
| |
| color: #ffffff;
| |
| font-weight: 600;
| |
| font-size: 0.95em;
| |
| text-align: center;
| |
| padding: 8px 12px;
| |
| letter-spacing: 0.02em;
| |
| }
| |
|
| |
| /* 境界高亮（红色强调） */
| |
| .realm-highlight,
| |
| .infobox .realm-current {
| |
| color: var(--gmtv-accent);
| |
| font-weight: 700;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 5. 表格样式（wikitable 美化）
| |
| ---------------------------------------------------------- */
| |
| .wikitable {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius-sm);
| |
| overflow: hidden;
| |
| font-size: 0.92em;
| |
| }
| |
|
| |
| .wikitable th {
| |
| background: var(--gmtv-primary);
| |
| color: #ffffff;
| |
| font-weight: 600;
| |
| padding: 10px 14px;
| |
| text-align: left;
| |
| border: none;
| |
| border-bottom: 2px solid var(--gmtv-primary-hover);
| |
| }
| |
|
| |
| .wikitable td {
| |
| padding: 9px 14px;
| |
| border: none;
| |
| border-bottom: 1px solid var(--gmtv-border-light);
| |
| color: var(--gmtv-text);
| |
| }
| |
|
| |
| /* 表格斑马纹 */
| |
| .wikitable tr:nth-child(even) td {
| |
| background: #f8fafc;
| |
| }
| |
| .wikitable tr:hover td {
| |
| background: var(--gmtv-primary-light);
| |
| transition: background 0.15s ease;
| |
| }
| |
|
| |
| /* 表格内的胜/负/平 标记 */
| |
| .battle-win {
| |
| color: #16a34a;
| |
| font-weight: 600;
| |
| }
| |
| .battle-lose {
| |
| color: var(--gmtv-accent);
| |
| font-weight: 600;
| |
| }
| |
| .battle-draw {
| |
| color: var(--gmtv-text-muted);
| |
| font-weight: 600;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 6. Navbox（底部导航栏）
| |
| ---------------------------------------------------------- */
| |
| .navbox-wrapper,
| |
| .navbox {
| |
| background: var(--gmtv-card);
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius);
| |
| box-shadow: var(--gmtv-shadow-card);
| |
| overflow: hidden;
| |
| margin-top: var(--gmtv-gap);
| |
| font-size: 0.88em;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* Navbox 标题 */
| |
| .navbox-title {
| |
| background: var(--gmtv-primary);
| |
| color: #ffffff;
| |
| font-weight: 700;
| |
| text-align: center;
| |
| padding: 10px 16px;
| |
| font-size: 1.05em;
| |
| letter-spacing: 0.02em;
| |
| }
| |
| .navbox-title a {
| |
| color: #ffffff;
| |
| }
| |
| .navbox-title a:hover {
| |
| color: #d4e8ff;
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* Navbox 分组 */
| |
| .navbox-group {
| |
| background: var(--gmtv-primary-light);
| |
| color: var(--gmtv-primary);
| |
| font-weight: 600;
| |
| padding: 8px 14px;
| |
| text-align: right;
| |
| white-space: nowrap;
| |
| width: 1%;
| |
| border-bottom: 1px solid var(--gmtv-border-light);
| |
| }
| |
|
| |
| /* Navbox 内容区 */
| |
| .navbox-list {
| |
| padding: 8px 14px;
| |
| border-bottom: 1px solid var(--gmtv-border-light);
| |
| line-height: 2;
| |
| }
| |
| .navbox-list a {
| |
| margin: 0 2px;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 7. 目录（TOC）美化
| |
| ---------------------------------------------------------- */
| |
| #toc,
| |
| .toc {
| |
| background: var(--gmtv-card);
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius);
| |
| box-shadow: var(--gmtv-shadow-card);
| |
| padding: 16px 20px;
| |
| font-size: 0.9em;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| #toc #toctitle,
| |
| .toc .toctitle {
| |
| font-weight: 700;
| |
| font-size: 1.05em;
| |
| color: var(--gmtv-primary);
| |
| margin-bottom: 8px;
| |
| padding-bottom: 8px;
| |
| border-bottom: 2px solid var(--gmtv-primary);
| |
| }
| |
|
| |
| #toc ul,
| |
| .toc ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding-left: 16px;
| |
| }
| |
|
| |
| #toc ul li,
| |
| .toc ul li {
| |
| padding: 2px 0;
| |
| }
| |
|
| |
| #toc a,
| |
| .toc a {
| |
| color: var(--gmtv-text-secondary);
| |
| }
| |
| #toc a:hover,
| |
| .toc a:hover {
| |
| color: var(--gmtv-primary);
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 8. 分类标签区
| |
| ---------------------------------------------------------- */
| |
| #catlinks {
| |
| background: var(--gmtv-card);
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius);
| |
| padding: 12px 20px;
| |
| margin-top: var(--gmtv-gap);
| |
| font-size: 0.85em;
| |
| color: var(--gmtv-text-secondary);
| |
| }
| |
|
| |
| #catlinks a {
| |
| display: inline-block;
| |
| background: var(--gmtv-primary-light);
| |
| color: var(--gmtv-primary);
| |
| padding: 2px 10px;
| |
| border-radius: 100px;
| |
| margin: 2px 3px;
| |
| font-size: 0.92em;
| |
| transition: background 0.15s ease, color 0.15s ease;
| |
| }
| |
| #catlinks a:hover {
| |
| background: var(--gmtv-primary);
| |
| color: #ffffff;
| |
| text-decoration: none;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 9. 角色名言引用块
| |
| ---------------------------------------------------------- */
| |
| blockquote,
| |
| .character-quote {
| |
| border-left: 4px solid var(--gmtv-primary);
| |
| background: var(--gmtv-primary-light);
| |
| padding: 14px 20px;
| |
| margin: 16px 0;
| |
| border-radius: 0 var(--gmtv-radius-sm) var(--gmtv-radius-sm) 0;
| |
| font-style: italic;
| |
| color: var(--gmtv-text-secondary);
| |
| line-height: 1.7;
| |
| }
| |
| blockquote cite,
| |
| .character-quote cite {
| |
| display: block;
| |
| margin-top: 8px;
| |
| font-style: normal;
| |
| font-size: 0.85em;
| |
| color: var(--gmtv-text-muted);
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 10. Tabber 标签页切换美化
| |
| ---------------------------------------------------------- */
| |
| .tabber .tabbertab {
| |
| border: 1px solid var(--gmtv-border);
| |
| border-top: none;
| |
| border-radius: 0 0 var(--gmtv-radius-sm) var(--gmtv-radius-sm);
| |
| padding: 16px 20px;
| |
| background: var(--gmtv-card);
| |
| }
| |
|
| |
| .tabber ul.tabbernav {
| |
| margin: 0;
| |
| padding: 0;
| |
| border-bottom: 2px solid var(--gmtv-border);
| |
| }
| |
|
| |
| .tabber ul.tabbernav li {
| |
| list-style: none;
| |
| display: inline-block;
| |
| }
| |
|
| |
| .tabber ul.tabbernav li a {
| |
| display: block;
| |
| padding: 8px 18px;
| |
| color: var(--gmtv-text-secondary);
| |
| font-weight: 500;
| |
| font-size: 0.92em;
| |
| border-bottom: 2px solid transparent;
| |
| margin-bottom: -2px;
| |
| transition: color 0.15s ease, border-color 0.15s ease;
| |
| }
| |
|
| |
| .tabber ul.tabbernav li a:hover {
| |
| color: var(--gmtv-primary);
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .tabber ul.tabbernav li.tabberactive a {
| |
| color: var(--gmtv-primary);
| |
| border-bottom-color: var(--gmtv-primary);
| |
| font-weight: 600;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 11. 境界进度条（用在角色词条的境界历程里）
| |
| 用法：<div class="realm-bar"><div class="realm-fill" style="width:75%"></div></div>
| |
| ---------------------------------------------------------- */
| |
| .realm-bar {
| |
| width: 100%;
| |
| height: 10px;
| |
| background: var(--gmtv-border-light);
| |
| border-radius: 100px;
| |
| overflow: hidden;
| |
| margin: 6px 0;
| |
| }
| |
| .realm-fill {
| |
| height: 100%;
| |
| background: linear-gradient(90deg, var(--gmtv-primary), var(--gmtv-accent));
| |
| border-radius: 100px;
| |
| transition: width 0.4s ease;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 12. 人物关系卡片区
| |
| 用法：<div class="relation-grid">
| |
| <div class="relation-card">
| |
| <div class="relation-label">师父</div>
| |
| <div class="relation-name">[[药老]]</div>
| |
| </div>
| |
| </div>
| |
| ---------------------------------------------------------- */
| |
| .relation-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
| |
| gap: var(--gmtv-gap-sm);
| |
| margin: 12px 0;
| |
| }
| |
| .relation-card {
| |
| background: var(--gmtv-card);
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius-sm);
| |
| padding: 12px;
| |
| text-align: center;
| |
| transition: box-shadow 0.2s ease, border-color 0.2s ease;
| |
| }
| |
| .relation-card:hover {
| |
| border-color: var(--gmtv-primary);
| |
| box-shadow: var(--gmtv-shadow-card-hover);
| |
| }
| |
| .relation-label {
| |
| font-size: 0.78em;
| |
| color: var(--gmtv-text-muted);
| |
| margin-bottom: 4px;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.05em;
| |
| }
| |
| .relation-name {
| |
| font-weight: 600;
| |
| color: var(--gmtv-primary);
| |
| font-size: 0.95em;
| |
| }
| |
| .relation-name a {
| |
| color: var(--gmtv-primary);
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 13. 剧透折叠块
| |
| 用法：配合 Collapsible 使用
| |
| ---------------------------------------------------------- */
| |
| .spoiler-box {
| |
| border: 1px dashed var(--gmtv-accent);
| |
| border-radius: var(--gmtv-radius-sm);
| |
| margin: 12px 0;
| |
| overflow: hidden;
| |
| }
| |
| .spoiler-box .mw-collapsible-toggle {
| |
| background: var(--gmtv-accent-light);
| |
| color: var(--gmtv-accent);
| |
| padding: 8px 16px;
| |
| font-weight: 600;
| |
| font-size: 0.88em;
| |
| cursor: pointer;
| |
| display: block;
| |
| text-align: center;
| |
| }
| |
| .spoiler-box .mw-collapsible-content {
| |
| padding: 12px 16px;
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 14. 搜索框美化
| |
| ---------------------------------------------------------- */
| |
| #searchInput,
| |
| #searchform input[type="search"],
| |
| .mw-searchInput {
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: 100px;
| |
| padding: 8px 16px;
| |
| font-size: 0.92em;
| |
| background: var(--gmtv-card);
| |
| color: var(--gmtv-text);
| |
| transition: border-color 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| #searchInput:focus,
| |
| #searchform input[type="search"]:focus,
| |
| .mw-searchInput:focus {
| |
| outline: none;
| |
| border-color: var(--gmtv-primary);
| |
| box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.15);
| |
| }
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| 15. 杂项
| |
| ---------------------------------------------------------- */
| |
|
| |
| /* 代码块 */
| |
| pre, code {
| |
| font-family: var(--gmtv-font-mono);
| |
| font-size: 0.88em;
| |
| background: #f0f3f7;
| |
| border-radius: var(--gmtv-radius-sm);
| |
| }
| |
| pre {
| |
| padding: 14px 18px;
| |
| overflow-x: auto;
| |
| border: 1px solid var(--gmtv-border);
| |
| }
| |
| code {
| |
| padding: 2px 6px;
| |
| }
| |
|
| |
| /* 图片居中 */
| |
| .thumb {
| |
| border: 1px solid var(--gmtv-border);
| |
| border-radius: var(--gmtv-radius-sm);
| |
| overflow: hidden;
| |
| background: var(--gmtv-card);
| |
| }
| |
| .thumb .thumbinner {
| |
| padding: 4px;
| |
| }
| |
| .thumb .thumbcaption {
| |
| font-size: 0.82em;
| |
| color: var(--gmtv-text-muted);
| |
| padding: 6px 8px;
| |
| text-align: center;
| |
| }
| |
|
| |
| /* 隐藏 MediaWiki 默认的丑边框 */
| |
| .mw-body {
| |
| border: none;
| |
| }
| |
| /* 取消 Chameleon 对内容区的 flex 布局干扰 */
| |
| #mw-content-text,
| |
| #mw-content-text .mw-parser-output {
| |
| display: block !important;
| |
| overflow: visible !important;
| |
| }
| |
|
| |
| /* 强制 Infobox 右浮动 */
| |
| .infobox {
| |
| float: right !important;
| |
| clear: right !important;
| |
| margin: 0 0 20px 20px !important;
| |
| width: 300px !important;
| |
| position: relative;
| |
| z-index: 10;
| |
| }
| |
|
| |
| /* 确保正文段落环绕 Infobox */
| |
| .mw-parser-output > p,
| |
| .mw-parser-output > h2,
| |
| .mw-parser-output > .mw-heading2,
| |
| .mw-parser-output > ul,
| |
| .mw-parser-output > ol,
| |
| .mw-parser-output > blockquote {
| |
| overflow: visible;
| |
| }
| |
