|
|
| （未显示同一用户的15个中间版本） |
| 第1行： |
第1行： |
| /* ----------------------------------------------------------
| |
| 1. CSS 变量
| |
| ---------------------------------------------------------- */
| |
| :root {
| |
| --g-bg: #eef1f6;
| |
| --g-card: #ffffff;
| |
| --g-blue: #2d7dd2;
| |
| --g-blue-deep: #1b5eb5;
| |
| --g-blue-pale: #e6f0fb;
| |
| --g-red: #ef4444;
| |
| --g-red-pale: #fef2f2;
| |
| --g-green: #10b981;
| |
| --g-purple: #8b5cf6;
| |
| --g-text: #1a1d24;
| |
| --g-text-2: #4b5563;
| |
| --g-text-3: #9ca3af;
| |
| --g-border: #e5e7eb;
| |
| --g-border-light: #f3f4f6;
| |
| --g-radius: 14px;
| |
| --g-radius-sm: 8px;
| |
| --g-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
| |
| --g-shadow-hover: 0 8px 25px rgba(45,125,210,0.12), 0 2px 6px rgba(0,0,0,0.04);
| |
| --g-font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
| |
| --g-font-mono: "JetBrains Mono", "Fira Code", monospace;
| |
| --g-gap: 16px;
| |
| }
| |
|
| |
|
| /* ----------------------------------------------------------
| |
| 2. 全局
| |
| ---------------------------------------------------------- */
| |
| body {
| |
| background: var(--g-bg);
| |
| color: var(--g-text);
| |
| font-family: var(--g-font);
| |
| font-size: 15px;
| |
| line-height: 1.78;
| |
| -webkit-font-smoothing: antialiased;
| |
| }
| |
|
| |
| a { color: var(--g-blue); text-decoration: none; transition: color .15s; }
| |
| a:hover { color: var(--g-blue-deep); }
| |
| a.new { color: var(--g-red); }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 3. 页面标题
| |
| ---------------------------------------------------------- */
| |
| #firstHeading, .firstHeading, .page-header h1 {
| |
| font-weight: 800;
| |
| font-size: 1.85em;
| |
| color: var(--g-text);
| |
| letter-spacing: -0.01em;
| |
| line-height: 1.25;
| |
| margin-bottom: 6px;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 4. 核心布局 — CSS Grid 双栏
| |
| PC端：左内容(1fr) + 右Infobox(310px)
| |
| 手机端：单栏，Infobox在顶部
| |
| ---------------------------------------------------------- */
| |
| .mw-parser-output {
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| gap: var(--g-gap);
| |
| max-width: 1060px;
| |
| }
| |
|
| |
| @media (min-width: 992px) {
| |
| .mw-parser-output {
| |
| grid-template-columns: 1fr 310px;
| |
| gap: 24px;
| |
| align-items: start;
| |
| }
| |
| .mw-parser-output > .infobox {
| |
| grid-column: 2;
| |
| grid-row: 1 / span 8;
| |
| position: sticky;
| |
| top: 20px;
| |
| align-self: start;
| |
| }
| |
| .mw-parser-output > *:not(.infobox) {
| |
| grid-column: 1;
| |
| }
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 5. 章节卡片化
| |
| ---------------------------------------------------------- */
| |
| .mw-parser-output > .mw-heading2,
| |
| .mw-parser-output > h2 {
| |
| background: var(--g-card);
| |
| padding: 16px 22px 13px;
| |
| margin: 0;
| |
| border-radius: var(--g-radius) var(--g-radius) 0 0;
| |
| box-shadow: var(--g-shadow);
| |
| font-size: 1.3em;
| |
| font-weight: 700;
| |
| color: var(--g-text);
| |
| line-height: 1.35;
| |
| border-left: 4px solid var(--g-blue);
| |
| border-bottom: none;
| |
| }
| |
| .mw-parser-output > .mw-heading2 .mw-editsection,
| |
| .mw-parser-output > h2 .mw-editsection {
| |
| font-size: 0.6em; font-weight: 400; color: var(--g-text-3);
| |
| }
| |
|
| |
| .mw-parser-output > .mw-heading3,
| |
| .mw-parser-output > h3 {
| |
| font-size: 1.05em;
| |
| font-weight: 600;
| |
| color: var(--g-blue);
| |
| padding-left: 12px;
| |
| border-left: 3px solid var(--g-blue);
| |
| margin: 1em 0 0.4em;
| |
| }
| |
|
| |
| .mw-parser-output > p,
| |
| .mw-parser-output > ul,
| |
| .mw-parser-output > ol,
| |
| .mw-parser-output > dl,
| |
| .mw-parser-output > blockquote,
| |
| .mw-parser-output > pre,
| |
| .mw-parser-output > .wikitable,
| |
| .mw-parser-output > div:not(.infobox):not(.navbox):not(.mw-heading2):not(.mw-heading3):not(.relation-grid) {
| |
| background: var(--g-card);
| |
| padding: 12px 22px;
| |
| margin: -1px 0 0 0;
| |
| box-shadow: var(--g-shadow);
| |
| }
| |
| .mw-parser-output > p:last-child,
| |
| .mw-parser-output > ul:last-child,
| |
| .mw-parser-output > div:last-child:not(.infobox):not(.navbox),
| |
| .mw-parser-output > .wikitable:last-child {
| |
| border-radius: 0 0 var(--g-radius) var(--g-radius);
| |
| padding-bottom: 18px;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 6. Infobox
| |
| ---------------------------------------------------------- */
| |
| .infobox {
| |
| background: var(--g-card);
| |
| border: none;
| |
| border-radius: var(--g-radius);
| |
| box-shadow: var(--g-shadow);
| |
| overflow: hidden;
| |
| width: 100%;
| |
| font-size: 0.88em;
| |
| line-height: 1.6;
| |
| }
| |
| .infobox-title, .infobox caption, .infobox th[colspan] {
| |
| background: linear-gradient(135deg, #2d7dd2 0%, #6c5ce7 100%);
| |
| color: #fff;
| |
| font-size: 1.2em;
| |
| font-weight: 700;
| |
| text-align: center;
| |
| padding: 16px 18px;
| |
| letter-spacing: 0.03em;
| |
| }
| |
| .infobox-image img, .infobox .image-section img {
| |
| width: 100%; height: auto; display: block;
| |
| }
| |
| .infobox-group-header, .infobox tr.infobox-header th {
| |
| background: linear-gradient(135deg, #2d7dd2, #1b5eb5);
| |
| color: #fff;
| |
| font-weight: 600;
| |
| font-size: 0.92em;
| |
| text-align: center;
| |
| padding: 9px 14px;
| |
| }
| |
| .infobox th {
| |
| background: var(--g-blue-pale);
| |
| color: var(--g-blue);
| |
| font-weight: 600;
| |
| padding: 8px 12px;
| |
| text-align: right;
| |
| width: 36%;
| |
| border-bottom: 1px solid var(--g-border-light);
| |
| vertical-align: top;
| |
| }
| |
| .infobox td {
| |
| padding: 8px 12px;
| |
| border-bottom: 1px solid var(--g-border-light);
| |
| vertical-align: top;
| |
| }
| |
| .realm-highlight, .infobox .realm-current {
| |
| color: var(--g-red);
| |
| font-weight: 700;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 7. 表格
| |
| ---------------------------------------------------------- */
| |
| .wikitable {
| |
| width: 100%;
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border: none;
| |
| border-radius: var(--g-radius-sm);
| |
| overflow: hidden;
| |
| font-size: 0.9em;
| |
| }
| |
| .wikitable th {
| |
| background: linear-gradient(135deg, #2d7dd2 0%, #4a90d9 100%);
| |
| color: #fff;
| |
| font-weight: 600;
| |
| padding: 10px 14px;
| |
| text-align: left;
| |
| border: none;
| |
| }
| |
| .wikitable td {
| |
| padding: 9px 14px;
| |
| border: none;
| |
| border-bottom: 1px solid var(--g-border-light);
| |
| }
| |
| .wikitable tr:nth-child(even) td { background: #f8fafc; }
| |
| .wikitable tr:hover td { background: var(--g-blue-pale); transition: background .15s; }
| |
|
| |
| .battle-win { color: var(--g-green); font-weight: 700; }
| |
| .battle-lose { color: var(--g-red); font-weight: 700; }
| |
| .battle-draw { color: var(--g-text-3); font-weight: 700; }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 8. Navbox
| |
| ---------------------------------------------------------- */
| |
| .navbox {
| |
| background: var(--g-card);
| |
| border: 1px solid var(--g-border);
| |
| border-radius: var(--g-radius);
| |
| box-shadow: var(--g-shadow);
| |
| overflow: hidden;
| |
| margin-top: var(--g-gap);
| |
| font-size: 0.86em;
| |
| width: 100%;
| |
| }
| |
| .navbox-title {
| |
| background: linear-gradient(135deg, #2d7dd2 0%, #6c5ce7 100%);
| |
| color: #fff; font-weight: 700; text-align: center;
| |
| padding: 10px 16px; font-size: 1.05em;
| |
| }
| |
| .navbox-title a { color: #fff; }
| |
| .navbox-title a:hover { color: #d4e8ff; text-decoration: underline; }
| |
| .navbox-group {
| |
| background: var(--g-blue-pale); color: var(--g-blue);
| |
| font-weight: 600; padding: 8px 14px; text-align: right;
| |
| white-space: nowrap; border-bottom: 1px solid var(--g-border-light);
| |
| }
| |
| .navbox-list {
| |
| padding: 8px 14px; border-bottom: 1px solid var(--g-border-light); line-height: 2;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 9. TOC 目录
| |
| ---------------------------------------------------------- */
| |
| #toc, .toc {
| |
| background: var(--g-card);
| |
| border: 1px solid var(--g-border);
| |
| border-radius: var(--g-radius);
| |
| box-shadow: var(--g-shadow);
| |
| padding: 14px 18px;
| |
| font-size: 0.88em;
| |
| line-height: 1.85;
| |
| }
| |
| #toc #toctitle, .toc .toctitle {
| |
| font-weight: 700; color: var(--g-blue);
| |
| margin-bottom: 8px; padding-bottom: 6px;
| |
| border-bottom: 2px solid var(--g-blue);
| |
| }
| |
| #toc ul, .toc ul { list-style: none; margin: 0; padding-left: 14px; }
| |
| #toc a, .toc a { color: var(--g-text-2); }
| |
| #toc a:hover, .toc a:hover { color: var(--g-blue); }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 10. 引用块
| |
| ---------------------------------------------------------- */
| |
| blockquote, .character-quote {
| |
| border-left: 4px solid var(--g-blue);
| |
| background: var(--g-blue-pale);
| |
| padding: 14px 20px;
| |
| margin: 12px 0;
| |
| border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0;
| |
| font-style: italic;
| |
| color: var(--g-text-2);
| |
| }
| |
| blockquote cite, .character-quote cite {
| |
| display: block; margin-top: 8px;
| |
| font-style: normal; font-size: 0.82em; color: var(--g-text-3);
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 11. 分类标签
| |
| ---------------------------------------------------------- */
| |
| #catlinks {
| |
| background: var(--g-card);
| |
| border: 1px solid var(--g-border);
| |
| border-radius: var(--g-radius);
| |
| padding: 10px 18px;
| |
| margin-top: var(--g-gap);
| |
| font-size: 0.83em;
| |
| color: var(--g-text-3);
| |
| }
| |
| #catlinks a {
| |
| display: inline-block;
| |
| background: var(--g-blue-pale);
| |
| color: var(--g-blue);
| |
| padding: 3px 12px;
| |
| border-radius: 100px;
| |
| margin: 2px 3px;
| |
| font-size: 0.9em;
| |
| transition: background .15s, color .15s;
| |
| }
| |
| #catlinks a:hover {
| |
| background: var(--g-blue); color: #fff; text-decoration: none;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 12. 人物关系卡片
| |
| ---------------------------------------------------------- */
| |
| .relation-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
| |
| gap: 10px;
| |
| margin: 12px 0;
| |
| background: var(--g-card);
| |
| padding: 16px 22px;
| |
| box-shadow: var(--g-shadow);
| |
| }
| |
| .relation-card {
| |
| background: var(--g-border-light);
| |
| border: 1px solid var(--g-border);
| |
| border-radius: var(--g-radius-sm);
| |
| padding: 12px 8px;
| |
| text-align: center;
| |
| transition: box-shadow .2s, border-color .2s, transform .2s;
| |
| }
| |
| .relation-card:hover {
| |
| border-color: var(--g-blue);
| |
| box-shadow: var(--g-shadow-hover);
| |
| transform: translateY(-2px);
| |
| }
| |
| .relation-label {
| |
| font-size: 0.72em; color: var(--g-text-3);
| |
| text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px;
| |
| }
| |
| .relation-name { font-weight: 700; color: var(--g-blue); font-size: 0.92em; }
| |
| .relation-name a { color: var(--g-blue); }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 13. 境界进度条
| |
| ---------------------------------------------------------- */
| |
| .realm-bar {
| |
| width: 100%; height: 8px;
| |
| background: var(--g-border-light);
| |
| border-radius: 100px; overflow: hidden; margin: 6px 0;
| |
| }
| |
| .realm-fill {
| |
| height: 100%;
| |
| background: linear-gradient(90deg, var(--g-blue), var(--g-purple), var(--g-red));
| |
| border-radius: 100px;
| |
| transition: width 0.5s ease;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 14. 剧透折叠块
| |
| ---------------------------------------------------------- */
| |
| .spoiler-box {
| |
| border: 1px dashed var(--g-red);
| |
| border-radius: var(--g-radius-sm);
| |
| margin: 12px 0; overflow: hidden;
| |
| }
| |
| .spoiler-box .mw-collapsible-toggle {
| |
| background: var(--g-red-pale); color: var(--g-red);
| |
| padding: 9px 16px; font-weight: 600; font-size: 0.86em;
| |
| cursor: pointer; display: block; text-align: center;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 15. Tabber
| |
| ---------------------------------------------------------- */
| |
| .tabber .tabbertab {
| |
| border: 1px solid var(--g-border); border-top: none;
| |
| border-radius: 0 0 var(--g-radius-sm) var(--g-radius-sm);
| |
| padding: 16px 20px; background: var(--g-card);
| |
| }
| |
| .tabber ul.tabbernav {
| |
| margin: 0; padding: 0;
| |
| border-bottom: 2px solid var(--g-border);
| |
| display: flex;
| |
| }
| |
| .tabber ul.tabbernav li { list-style: none; }
| |
| .tabber ul.tabbernav li a {
| |
| display: block; padding: 9px 18px;
| |
| color: var(--g-text-2); font-weight: 500; font-size: 0.9em;
| |
| border-bottom: 2px solid transparent; margin-bottom: -2px;
| |
| transition: color .15s, border-color .15s;
| |
| }
| |
| .tabber ul.tabbernav li a:hover { color: var(--g-blue); text-decoration: none; }
| |
| .tabber ul.tabbernav li.tabberactive a {
| |
| color: var(--g-blue); border-bottom-color: var(--g-blue); font-weight: 600;
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 16. 搜索框
| |
| ---------------------------------------------------------- */
| |
| #searchInput, .mw-searchInput {
| |
| border: 1px solid var(--g-border);
| |
| border-radius: 100px;
| |
| padding: 8px 16px; font-size: 0.9em;
| |
| background: var(--g-card);
| |
| transition: border-color .2s, box-shadow .2s;
| |
| }
| |
| #searchInput:focus, .mw-searchInput:focus {
| |
| outline: none;
| |
| border-color: var(--g-blue);
| |
| box-shadow: 0 0 0 3px rgba(45,125,210,0.15);
| |
| }
| |
|
| |
| /* ----------------------------------------------------------
| |
| 17. 杂项
| |
| ---------------------------------------------------------- */
| |
| pre, code {
| |
| font-family: var(--g-font-mono); font-size: 0.86em;
| |
| background: #f1f5f9; border-radius: var(--g-radius-sm);
| |
| }
| |
| pre { padding: 14px 18px; overflow-x: auto; border: 1px solid var(--g-border); }
| |
| code { padding: 2px 6px; }
| |
|
| |
| .thumb {
| |
| border: 1px solid var(--g-border);
| |
| border-radius: var(--g-radius-sm);
| |
| overflow: hidden; background: var(--g-card);
| |
| }
| |
| .thumb .thumbcaption {
| |
| font-size: 0.8em; color: var(--g-text-3);
| |
| padding: 6px 8px; text-align: center;
| |
| }
| |
|
| |
| .mw-body { border: none; }
| |
