/* ========================================================================== 正文样式（topics/*.html） 这个文件同时服务于两种场景： 1) 在 index.htm 的正文 iframe 里显示（外壳会把主题与字号写进 ） 2) 直接单独打开某一篇（此时靠 topic-prepaint.js 自己恢复主题与字号） ========================================================================== */ :root { --topic-font-size: 16px; --topic-bg: #ffffff; --topic-text: #1f2328; --topic-text-dim: #6a737d; --topic-border: #e6e8eb; --topic-heading: #111418; --topic-accent: #2563eb; --topic-code-bg: #f4f6f8; --topic-quote-bg: #f8f9fb; --topic-table-head: #eceff3; --topic-mark-bg: #fde68a; --topic-mark-current: #f59e0b; --topic-book-red: #8f2f2e; /* 原书标志性暗红，用于大标题与边栏框 */ --topic-title-band: #8f2f2e; color-scheme: light; } html[data-theme="dark"] { --topic-bg: #16181d; --topic-text: #e3e6ea; --topic-text-dim: #98a1ab; --topic-border: #2b2f37; --topic-heading: #f2f4f6; --topic-accent: #6ea8fe; --topic-code-bg: #1f2329; --topic-quote-bg: #1b1e24; --topic-table-head: #23272e; --topic-mark-bg: #6b5518; --topic-mark-current: #b7791f; --topic-book-red: #b8544f; --topic-title-band: #a33c39; color-scheme: dark; } /* ---------------------------------------------------------------- 章节大标题 */ /* 原书的一级小节标题是跨栏大字（还常印在红色色带上），这里做成带色带的横条 */ h1.topic-title, h2 { color: var(--topic-heading); } h1.topic-title { font-size: 1.9em; margin: 0 0 1.2em; padding: 18px 22px; color: #fff; background: var(--topic-title-band); border: 0; border-radius: 4px; letter-spacing: .04em; } h2 { font-size: 1.55em; margin: 2.4em 0 1em; padding: 8px 0 8px 14px; border-left: 5px solid var(--topic-book-red); border-bottom: 0; letter-spacing: .03em; } h3 { font-size: 1.18em; color: var(--topic-book-red); } html[data-theme="dark"] h3 { color: #d98a85; } html, body { margin: 0; padding: 0; background: var(--topic-bg); color: var(--topic-text); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", serif; font-size: var(--topic-font-size); line-height: 1.74; padding: 28px clamp(16px, 4vw, 56px) 96px; overflow-wrap: break-word; } .topic { max-width: 1160px; margin: 0 auto; } /* ---------------------------------------------------------------- 标题 */ h1, h2, h3, h4, h5, h6 { color: var(--topic-heading); line-height: 1.35; font-weight: 700; margin: 1.9em 0 .7em; scroll-margin-top: 12px; } h1 { font-size: 1.72em; margin-top: 0; padding-bottom: .4em; border-bottom: 1px solid var(--topic-border); } h2 { font-size: 1.48em; padding-bottom: .3em; border-bottom: 1px solid var(--topic-border); } h3 { font-size: 1.2em; } h4 { font-size: 1.06em; } h5, h6 { font-size: 1em; color: var(--topic-text-dim); } p { margin: 1em 0; } a { color: var(--topic-accent); text-decoration: none; } a:hover { text-decoration: underline; } strong { font-weight: 700; } hr { border: 0; border-top: 1px solid var(--topic-border); margin: 2.2em 0; } /* ---------------------------------------------------------------- 列表 */ ul, ol { padding-left: 1.6em; margin: .8em 0; } li { margin: .3em 0; } li > ul, li > ol { margin: .3em 0; } /* ---------------------------------------------------------------- 原书边栏框（八角形） */ /* 原书用粗红描边的八角框包住"泛统知识""人物创建范例"这类边栏。 做法：外层用 clip-path 切出八角并填红，::after 内层再切一次八角填底色， 中间留出的 4px 就是那圈粗边框 —— 比直接画 border 更接近原版的八边形观感。 */ .gbox { --gbox-line: var(--topic-book-red); --gbox-cut: 16px; position: relative; margin: 2em 0; padding: calc(var(--gbox-cut) * .55) var(--gbox-cut); background: var(--gbox-line); clip-path: polygon( var(--gbox-cut) 0, calc(100% - var(--gbox-cut)) 0, 100% var(--gbox-cut), 100% calc(100% - var(--gbox-cut)), calc(100% - var(--gbox-cut)) 100%, var(--gbox-cut) 100%, 0 calc(100% - var(--gbox-cut)), 0 var(--gbox-cut)); } .gbox::after { content: ""; position: absolute; inset: 4px; background: var(--topic-bg); clip-path: polygon( calc(var(--gbox-cut) - 3px) 0, calc(100% - var(--gbox-cut) + 3px) 0, 100% calc(var(--gbox-cut) - 3px), 100% calc(100% - var(--gbox-cut) + 3px), calc(100% - var(--gbox-cut) + 3px) 100%, calc(var(--gbox-cut) - 3px) 100%, 0 calc(100% - var(--gbox-cut) + 3px), 0 calc(var(--gbox-cut) - 3px)); } .gbox > * { position: relative; z-index: 1; } .gbox > p:first-child { margin-top: 0; } .gbox > p:last-child { margin-bottom: 0; } .gbox .gbox-title { margin: 0 0 .7em; padding-bottom: .45em; border-bottom: 1px solid color-mix(in srgb, var(--gbox-line) 32%, transparent); color: var(--gbox-line); font-size: 1.22em; font-weight: 700; text-align: center; letter-spacing: .05em; line-height: 1.45; } html[data-theme="dark"] .gbox .gbox-title { color: #d98a85; } .gbox p { margin: .7em 0; } .gbox table { width: 100%; border-collapse: collapse; margin: .9em 0; } /* 按边栏类型给一点可辨识的差异（原书都是一种红框，这里只微调标题装饰） */ .gbox-example { --gbox-line: #a8452f; } .gbox-optional { --gbox-line: #7a4a8f; } html[data-theme="dark"] .gbox-example { --gbox-line: #c4684f; } html[data-theme="dark"] .gbox-optional { --gbox-line: #a887c0; } @media print { .gbox { background: #8f2f2e; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .gbox::after { background: #fff; } } /* ---------------------------------------------------------------- 引用与代码 */ blockquote { margin: 1.1em 0; padding: .7em 1.1em; border-left: 4px solid var(--topic-accent); background: var(--topic-quote-bg); color: var(--topic-text-dim); border-radius: 0 6px 6px 0; } blockquote p:first-child { margin-top: 0; } blockquote p:last-child { margin-bottom: 0; } code { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; font-size: .9em; padding: .16em .38em; border-radius: 4px; background: var(--topic-code-bg); } pre { margin: 1.1em 0; padding: 14px 16px; border: 1px solid var(--topic-border); border-radius: 8px; background: var(--topic-code-bg); overflow-x: auto; line-height: 1.6; } pre code { padding: 0; background: transparent; font-size: .88em; } /* ---------------------------------------------------------------- 表格 */ table { border-collapse: collapse; margin: 1.2em 0; background: var(--topic-bg); font-size: .95em; } th, td { border: 1px solid var(--topic-border); padding: 8px 12px; text-align: left; vertical-align: top; } th { background: var(--topic-table-head); font-weight: 700; white-space: nowrap; } tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--topic-table-head) 45%, transparent); } /* 数值单元格：右对齐 + 等宽数字，长表（如伤害表）一列列对齐更顺眼 */ td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 宽表格：外层容器横向滚动，表格本身保持自然宽度，绝不压缩列 */ .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2em 0; border-radius: 6px; } .table-scroll > table { margin: 0; } .table-scroll.is-wide { border: 1px solid var(--topic-border); } /* 长表（被 .table-scroll 包住且超过一屏）：表头吸顶，滚动时跟着走 */ .table-scroll { max-height: 72vh; overflow-y: auto; } .table-scroll th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--topic-border); } /* ---------------------------------------------------------------- 图片 */ img { max-width: 100%; height: auto; border-radius: 6px; } img + em, figure > figcaption, em.caption { display: block; margin-top: .4em; color: var(--topic-text-dim); font-size: .88em; font-style: normal; text-align: center; } /* ---------------------------------------------------------------- 来源脚注 */ .topic-source { margin-top: 3.2em; padding-top: 1em; border-top: 1px dashed var(--topic-border); color: var(--topic-text-dim); font-size: .86em; display: flex; flex-wrap: wrap; gap: .4em 1.2em; } .topic-source .source-label { font-weight: 600; } .topic-source .source-notes { flex-basis: 100%; color: var(--topic-text-dim); } .topic-source .draft-flag { padding: 0 7px; border: 1px solid color-mix(in srgb, var(--topic-mark-current) 55%, transparent); border-radius: 9px; color: color-mix(in srgb, var(--topic-mark-current) 78%, var(--topic-text)); font-size: .92em; line-height: 1.6; } .topic-source .draft-flag.stub { border-color: var(--topic-border); color: var(--topic-text-dim); } /* 骨架条目：正文未填充时的占位块 */ .topic-stub { margin: 1.5em 0; padding: 18px 20px; border: 1px dashed var(--topic-border); border-radius: 10px; background: var(--topic-quote-bg); } .topic-stub .stub-title { margin: 0 0 6px; font-size: 1.02em; font-weight: 600; color: var(--topic-text-dim); } .topic-stub .stub-title::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .55em; border-radius: 50%; background: var(--topic-mark-current); vertical-align: 2px; } .topic-stub .stub-meta { margin: 3px 0 0; font-size: .88em; color: var(--topic-text-dim); } /* ---------------------------------------------------------------- 搜索高亮 */ mark[data-search-highlight="true"] { background: var(--topic-mark-bg); color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 500; } mark[data-search-highlight="current"] { background: var(--topic-mark-current); color: #111418; outline: 2px solid color-mix(in srgb, var(--topic-mark-current) 55%, transparent); } #searchHighlightNavigator { position: fixed; top: 10px; right: 14px; z-index: 2147483647; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--topic-border); border-radius: 8px; background: var(--topic-bg); color: var(--topic-text); box-shadow: 0 4px 16px rgba(15, 23, 42, .18); font: 12px/1.2 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; } #searchHighlightNavigator button { border: 0; border-radius: 5px; padding: 4px 7px; cursor: pointer; background: var(--topic-code-bg); color: var(--topic-accent); font: inherit; } #searchHighlightNavigator button:hover:not(:disabled) { background: var(--topic-mark-bg); } #searchHighlightNavigator button:disabled { opacity: .45; cursor: default; } #searchHighlightNavigator .count { min-width: 42px; text-align: center; font-weight: 600; white-space: nowrap; } /* ---------------------------------------------------------------- 打印 */ @media print { :root { --topic-font-size: 12pt; } html, body { background: #fff; color: #000; } body { padding: 0; } .topic { max-width: none; } #searchHighlightNavigator { display: none !important; } mark[data-search-highlight="true"], mark[data-search-highlight="current"] { background: transparent; outline: 0; } .table-scroll { overflow: visible; border: 0; } a { color: #000; text-decoration: underline; } h1, h2 { border-bottom-color: #999; } } @media (max-width: 860px) { body { padding: 18px 14px 72px; } } /* ---------------------------------------------------------------- 章级封面页的子节清单 */ .topic-children { margin: 18px 0 8px; padding: 14px 18px; border: 1px solid var(--topic-border); border-radius: 10px; background: var(--topic-quote-bg); } .topic-children .children-label { margin: 0 0 8px; font-weight: 600; color: var(--topic-text-dim); font-size: .92em; } .topic-children ul { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 28px; } .topic-children li { margin: 3px 0; break-inside: avoid; } .topic-children a { color: var(--topic-accent); text-decoration: none; } .topic-children a:hover { text-decoration: underline; } /* ---------------------------------------------------------------- 上/下一页 */ .pager { display: flex; justify-content: space-between; gap: 12px; margin: 2.6em 0 1em; padding-top: 1.3em; border-top: 1px solid var(--topic-border); } .pager-cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid var(--topic-border); border-radius: 9px; background: var(--topic-bg); color: var(--topic-accent); text-decoration: none; font-size: .96em; line-height: 1.35; } .pager-cell:hover { border-color: var(--topic-accent); background: var(--topic-quote-bg); } .pager-next { justify-content: flex-end; text-align: right; } .pager-arrow { font-size: 1.5em; line-height: 1; flex: 0 0 auto; } .pager-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pager-disabled { color: var(--topic-text-dim); border-style: dashed; cursor: default; } .pager-disabled:hover { border-color: var(--topic-border); background: var(--topic-bg); } @media (max-width: 560px) { .pager { gap: 8px; } .pager-cell { padding: 9px 10px; font-size: .9em; } .pager-arrow { font-size: 1.3em; } }