MediaWiki:Timeless.css: Difference between revisions

Revision as of 17:26, 12 October 2026

/* =====================================================================
 * HUIJIA FUN · MediaWiki:Common.css（适用于所有皮肤）
 * 设计语言：VGR Design System · v2
 *
 * v2：首页卡片、评论区、资料卡改为本站自己的写法；粉色全部去掉；
 *     不再从任何其他wiki站点加载资源，注释里也不再出现其他站点的名字。
 *
 * 版权说明：
 *   - 萌娘百科 MediaWiki:Gadget-site-styles.css（CC BY-NC-SA 3.0）：黑幕、信息框
 *   - 中文维基百科 MediaWiki:Common.css（CC BY-SA）：hlist、navbox、navbar、collapseButton
 * ===================================================================== */


/* =====================================================================
 * 1. 字体
 * ===================================================================== */

/* Pre-Diphic-Mono：VGR系列世界观内的语言 */
@font-face {
  font-family: "Pre-Diphic Mono";
  src: url("https://huijia.fun/fonts/PreDiphicMono-1.1.woff2") format("woff2");
  font-display: swap;
}
/* 加 !important：主题模板给侧栏、标题、表格等处的文字用 !important 指定了字体，不加的话 .pd 会被盖掉 */
.pd {
  font-family: "Pre-Diphic Mono", sans-serif !important;
  font-feature-settings: "rlig" 1, "ccmp" 1 !important;
  line-height: 1;
}

/* {{PD}}竖排：Module:PreDiphic把文字切成固定字数的列（.pd-col）；
   列从左往右排，撞到正文右边就自动换到下面一排，不出现滚动条 */
.pd-cols {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  vertical-align: top;
  max-width: 100%;
  column-gap: 0.25em;
  row-gap: 0.75em;
}
/* 每列不超过可见窗口高度（减去顶栏和边距）；「高度」参数会覆盖这个上限。
   100svh = 手机地址栏展开时的可见高度，和 Common.js 里的分列算法一致；不支持 svh 的浏览器退回 100vh */
.pd-col {
  writing-mode: vertical-lr;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}

/* 单个竖排span（打字页「复制为HTML」的输出）：顶端对齐，不超过窗口高度 */
.pd-v {
  writing-mode: vertical-lr;
  vertical-align: top;
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
}

/* 汇文明朝体：作品名、章节标题（--font-display） */
@font-face {
    font-family: 'Huiwen';
    src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/汇文明朝体.woff2') format('woff2');
    font-display: swap;
}

/* 悦宋：原文件第3行注释缺了「/*」，这条规则一直没有生效。
   修好后保留，确认没有页面使用后可以删除。 */
@font-face {
    font-family: 'Yuesong';
    src: url('https://cdn.jsdelivr.net/gh/channelwey/ZeroFont@main/Yuesong.woff2') format('woff2');
    font-display: swap;
}

/* 已停用的字体：两款外链字体（一款来自其他wiki的文件服务器，一款来自Fandom图片服务器），
   以及 VGR Design System 不再使用的瀞之故障黑体、Rubik 80s Fade。
   如果某个页面还在用，把字体文件上传到本站后再加回来。 */

/* Material Icons（Google，Apache 2.0）：{{信息}}、上传页等处的 .md 图标。
   用 loli.net 镜像是为了中国大陆访客能加载。 */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://gstatic.loli.net/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.md, .md-lg, .md-md, .md-sm, .material-icons {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
    user-select: none;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.md-lg { font-size: 60px; }
.md-md { font-size: 30px; }
.md-sm { font-size: 10px; }


/* =====================================================================
 * 2. VGR tokens（全站默认 = 档案区「纸本」配色）
 *    主题模板（Theme-HJ / 设定区主题等）只需重设其中几项。
 * ===================================================================== */
:root {
    --paper: #F3F5F1;
    --paper-raised: #FFFFFF;
    --paper-sunk: #E7ECE5;
    --ink: #16211B;
    --ink-muted: #4C5A51;
    --rule: #C9D3CA;
    --rule-strong: #7E8B81;
    --heading-bar: #C8D8C8;
    --dot: #A3B1A8;
    --accent: #025F32;
    --accent-fill: #025F32;
    --on-accent: #FFFFFF;
    --accent-tint: #DCEBD9;
    --link: #0B6B3A;
    --link-new: #A8432F;
    --focus: #002F9C;

    --font-display: Huiwen, "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", serif;
    --font-serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    --font-sans: "Source Sans 3", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --radius-xs: 2px;
    --radius-sm: 4px;

    /* 皮肤与扩展读取的主色变量：统一指向汇佳绿 */
    --color-primary: var(--accent);
    --color-progressive: var(--accent);
    --background-color-progressive: var(--accent-fill);
    --border-color-progressive: var(--accent);
}

html.skin-theme-clientpref-night {
    --paper: #111613;
    --paper-raised: #18201B;
    --paper-sunk: #0C100E;
    --ink: #E4EBE5;
    --ink-muted: #A2B0A6;
    --rule: #2A352E;
    --rule-strong: #667A6C;
    --heading-bar: #2F4033;
    --dot: #2A352E;
    --accent: #C1E1A6;
    --accent-fill: #3B7E3D;
    --accent-tint: #1C2B21;
    --link: #8FD3A8;
    --link-new: #F0907E;
    --focus: #8FB0FF;
}

body { accent-color: var(--accent); }


/* =====================================================================
 * 3. 通用小工具
 * ===================================================================== */

.mw-collapsible.mw-collapsed { max-height: none; }

p { word-break: normal; }

cite { font-style: normal; }

.res-img img { max-width: 100%; height: auto; }

/* 自定义链接：悬停时显示下划线 */
.custom-link { text-decoration: none; color: inherit; }
.custom-link:hover { text-decoration: underline; color: var(--link); }

/* 左右分栏
   原写法 #left-column-0.3 里的「.」会被当成类选择器，规则从未生效。
   这里用转义写法，页面里的 id="left-column-0.3" 不用改。 */
#left-column        { float: left;  width: 49%; }
#right-column       { float: right; width: 49%; }
#left-column-full   { float: left;  width: 50%; }
#right-column-full  { float: right; width: 50%; }
#middle-column-full { margin: 0 auto; width: 50%; }
#left-column-0\.3   { float: left;  width: 29%; }
#left-column-0\.7   { float: left;  width: 69%; }
#right-column-0\.3  { float: right; width: 29%; }
#right-column-0\.7  { float: right; width: 69%; }

@media screen and (max-width: 850px) {
    #left-column, #right-column,
    #left-column-full, #right-column-full, #middle-column-full,
    #left-column-0\.3, #left-column-0\.7,
    #right-column-0\.3, #right-column-0\.7,
    #user-page-left, #user-page-right {
        float: none;
        width: 100%;
    }
}

/* 首页隐藏页面标题及相关标签+变体 */
body.page-首页 #firstHeading,
body.page-首页 #siteSub,
body.page-首页 #ca-talk,
body.page-首页 #ca-watch,
body.page-首页 #ca-unwatch,
body.page-首页 #ca-history,
body.page-首页 #ca-nstab-main,
body.page-首页 #ca-viewsource,
body.page-首页 #ca-view,
body.page-首页 #p-variants,
body.page-首页 #p-variants-desktop-label { display: none !important; }

/* 回到顶部 / 底部按钮 */
img#scrollUpButton, img#scrollDownButton { transition: transform 200ms; }
img#scrollUpButton:hover { transform: scale(1.1); }
img#scrollUpButton:active { transform: scale(.95); }
img#scrollDownButton:hover { transform: rotate(180deg) scale(1.1) !important; }
img#scrollDownButton:active { transform: rotate(180deg) scale(.95) !important; }

/* 转载标记 */
.repost-circle {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-xs);
}
.repost-circle a.external {
    background: none !important;
    padding-right: 0 !important;
    color: var(--accent) !important;
}


/* =====================================================================
 * 4. 黑幕（改写自萌娘百科）
 * ===================================================================== */
.heimu,
.heimu rt { background-color: #252525; }
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited { color: #252525; }
.heimu,
.heimu a,
a .heimu,
.heimu a.new { color: #252525; text-shadow: none; }
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #FFFFFF; }
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: #8FD3A8; }
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #F0907E; }


/* =====================================================================
 * 5. 信息框
 * ===================================================================== */
.infoBox {
    margin: 10px auto;
    width: 80%;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
.infoBox a { word-break: normal; }
.infoBoxTitle {
    margin: 3px auto;
    padding: 6px 0 0;
    text-align: center;
    font-weight: 700;
    color: var(--ink);
}
.infoBoxIcon { display: table-cell; padding: 2px 0 2px .5em; vertical-align: middle; color: var(--accent); }
.infoBoxText { display: table-cell; padding: .25em .5em .25em 1.3em; width: 100%; vertical-align: middle; }
.infoBoxContent { border: 0; background: var(--paper-sunk); }
.infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; }

@media screen and (max-width: 850px) {
    .infoBox { float: unset !important; width: 100% !important; clear: both; }
    .infobox { width: 100%; margin: 0 0 2em; }
}
@media screen and (min-width: 851px) {
    .infobox { width: 300px; margin: 1em 0 30px 30px; }
}

.fieldset {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.35em 1.625em 0.75em;
}

/* 上传页 InfoBox 修复 */
.mw-special-Upload i.md { display: flex; }
.mw-special-Upload .infoBoxText li { margin-top: 6px; margin-bottom: 0; }


/* =====================================================================
 * 6. 表格
 * ===================================================================== */
table.wikitable {
    width: 100%;
    margin: 1em 0;
    background: var(--paper-raised);
    color: var(--ink);
    border: none;
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule-strong);
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.95em;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--rule-strong);
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
    color: var(--ink);
    padding: 9px 12px;
    line-height: 1.6;
    border: none;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
table.wikitable > tbody > tr:last-of-type > td { border-bottom: none; }
table.wikitable > tbody > tr:hover td { background: var(--accent-tint); }

/* 浅绿表格（旧类名保留，改为读变量） */
table.wikitable-green { background: var(--accent-tint); }
.wikitable-green th { background: var(--accent-fill); color: var(--on-accent); }
.wikitable-green td { background: var(--paper-raised); }

@media screen and (max-width: 768px) {
    table.wikitable { display: block; overflow-x: auto; }
}


/* =====================================================================
 * 7. hlist / navbox / navbar（改写自中文维基百科）
 * ===================================================================== */
.hlist dl, .hlist ol, .hlist ul { margin: 0; }
.hlist dd, .hlist dt, .hlist li { display: inline; margin: 0; }
.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }
.hlist dt:after { content: "："; }
.hlist dd:after, .hlist li:after { content: " · "; font-weight: bold; }
.hlist dd:last-child:after, .hlist dt:last-child:after, .hlist li:last-child:after { content: none; }
.hlist dd.nopunct:after, .hlist dt.nopunct:after, .hlist li.nopunct:after { content: none; }
.hlist dl dl:before, .hlist ol ol:before, .hlist ul ul:before { content: "（"; }
.hlist dl dl:after, .hlist ol ol:after, .hlist ul ul:after { content: "）"; }
.hlist.hnum ol li { counter-increment: level1; }
.hlist.hnum ol li:before { content: counter(level1) " "; }
.hlist.hnum ol ol li { counter-increment: level2; }
.hlist.hnum ol ol li:before { content: counter(level2) " "; }

/* 原文件先定义了一套蓝紫色、后面又用粉色覆盖，这里合并成一套 */
.navbox {
    width: 100%;
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    background: var(--paper-raised);
}
.navbox-inner, .navbox-subgroup { width: 100%; }
.navbox-subgroup { background: var(--paper-raised); }
.navbox-list { border-color: var(--paper-raised); }
.navbox th, .navbox-title, .navbox-abovebelow { text-align: center; padding-left: 1em; padding-right: 1em; }
.navbox th, .navbox-title { background: var(--accent-tint); color: var(--ink); }
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { background: var(--paper-sunk); color: var(--ink); }
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { background: var(--paper); }
th.navbox-group { white-space: nowrap; text-align: right; }
.navbox-even { background: var(--paper); }
.navbox-odd { background: transparent; }
table.navbox + table.navbox { margin-top: -1px; }
.navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul,
.navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { padding: 0.125em 0; }
.navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { white-space: nowrap; }
.navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { white-space: normal; }
ol + table.navbox, ul + table.navbox { margin-top: 0.5em; }

.navbar { display: inline; font-weight: normal; }
.navbar ul { display: inline; white-space: nowrap; }
.navbar li { word-spacing: -0.125em; }
.navbar.mini li abbr[title] { font-variant: small-caps; border-bottom: none; text-decoration: none; cursor: inherit; }
.navbox .navbar { display: block; }
.navbox-title .navbar { float: left; text-align: left; margin-right: 0.5em; width: 8em; }

.collapseButton { float: right; font-weight: normal; margin-left: 0.5em; text-align: right; width: auto; }
.navbox .collapseButton { width: 8em; }

@media screen and (max-width: 850px) {
    th.navbox-group { white-space: normal; }
    th.navbox-group div { line-height: 1.3em; width: 10px; margin: 10px 0; }
}


/* =====================================================================
 * 8. 条目卡片：rec-grid / rec-card / rec-link（VGR Design System）
 *    描述性条目用 rec-grid-2 里的 rec-card，短术语用 rec-grid-4 里的 rec-link。
 * ===================================================================== */
.rec-grid {
    display: grid;
    gap: var(--space-3, 12px);
    margin: 0.8em 0 1.2em;
}
.rec-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rec-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rec-card {
    padding: 12px 16px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
}
.rec-card:hover { border-left-color: var(--accent); }
.rec-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.rec-card-title a { color: inherit; }
.rec-card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
.rec-link {
    padding: 8px 12px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
    transition: border-color 0.2s ease, padding-left 0.2s ease;
}
.rec-link a { color: var(--ink); }
.rec-link:hover { border-left-color: var(--accent); padding-left: 16px; }
@media screen and (max-width: 850px) {
    .rec-grid-2 { grid-template-columns: 1fr; }
    .rec-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 兼容层：mini-block 旧类名。仍有模板使用（首页子模板、设定区中心页的 rec-grid 等）。
   这些模板改用 rec-card / rec-link 之后，整段删除。 */
.mini-block {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    margin-top: 8px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
}
.mini-block p { margin: 0 0 1em; }
.mini-block p:last-child { margin: 0; }
.mini-block-container { display: flex; gap: 8px; width: 100%; box-sizing: border-box; }
.mini-block-container ul { margin: 0; padding: 0; }
.mini-block-container li { list-style: none; margin: 0; }
.mini-block-container li a { display: block; padding: .4em .4em; color: var(--ink); }
.mini-block-container li a:hover { color: var(--accent); }
.mini-block-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; color: var(--ink); }
@media screen and (max-width: 850px) {
    .mini-block-container { flex-direction: column; }
}


/* =====================================================================
 * 9. 表单、通知、资料卡
 * ===================================================================== */
textarea {
    border-radius: var(--radius-sm);
    box-shadow: none;
    background-color: transparent;
    border: 1px solid var(--rule-strong);
    outline: none;
}
textarea:hover { border-color: var(--accent); }
textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--focus);
}

.mw-notification {
    border: 1px solid var(--rule);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    box-shadow: 0 6px 18px -10px rgba(2, 95, 50, 0.35);
}

.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
}

/* 个人资料页（SocialProfile）：只设颜色与形状，布局交给扩展默认样式 */
.profile-tab-on { border-bottom: 2px solid var(--accent); }
.profile-tab a, .profile-tab-on a { color: var(--ink) !important; }
#profile-toggle-button {
    background-color: var(--accent-fill);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
}
#profile-toggle-button a { color: var(--on-accent); }
#profile-toggle-button:hover { background-color: #3B7E3D; }
.profile-on { background-color: var(--accent-tint); border-radius: var(--radius-sm); }
#profile-image img,
.c-avatar img,
.profile-info img { border-radius: 50%; }


/* =====================================================================
 * 10. 评论区 FlowThread：只换成本站配色，布局交给扩展默认样式
 * ===================================================================== */
#flowthread .comment-submit {
    color: var(--on-accent);
    background-color: var(--accent-fill);
    border: 0;
    text-shadow: none;
}
#flowthread .comment-submit:hover { background-color: #3B7E3D; }
#flowthread .comment-toolbar {
    background-color: var(--paper-sunk);
    border-color: var(--rule);
}
#flowthread .comment-replybox > .comment-body { border-color: var(--rule-strong); }
#flowthread .comment-user,
#flowthread .comment-user a { color: var(--ink-muted); }
#flowthread .comment-like[liked],
#flowthread .comment-report[reported] { color: var(--accent); }


/* =====================================================================
 * 11. 提示框 {{提示}}：.vgr-notice
 *     颜色全部读主题变量，Theme-HJ / Theme-STR / Theme-VGR 下都能正确显示。
 *     默认 = 分区色；is-warning = 待定、警告；is-danger = 剧透、错误。
 *     左侧一定有文字标签，不只靠颜色区分。
 * ===================================================================== */
.vgr-notice {
    --notice-c: var(--zone-accent, var(--accent));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 16px;
    box-sizing: border-box;
    max-width: 100%;
    margin: 1em 0;
    padding: 12px 16px;
    background: var(--paper-sunk);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--notice-c);
    border-radius: 0;
}
/* 黄色：按当前文字色调深或调浅，浅色、深色主题上都保持可读 */
.vgr-notice.is-warning { --notice-c: color-mix(in srgb, #C98A1B 60%, var(--ink)); }
/* 红色：直接用各主题的红链色 */
.vgr-notice.is-danger { --notice-c: var(--link-new); }

.vgr-notice-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 3em;
    padding-top: 3px;
}
.vgr-notice-tag {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--notice-c);
}
.vgr-notice-icon { line-height: 1; color: var(--notice-c); }
.vgr-notice-icon .md,
.vgr-notice-icon .md-lg,
.vgr-notice-icon .md-md,
.vgr-notice-icon .material-icons { font-size: 26px; }
.vgr-notice-icon img { max-width: 32px; height: auto; }

.vgr-notice-main { min-width: 0; }
.vgr-notice-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink);
}
#mw-content .vgr-notice-body,
#mw-content .vgr-notice-body p,
.vgr-notice-body,
.vgr-notice-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-muted);
}
.vgr-notice-body > p + p { margin-top: 0.5em; }
.vgr-notice-below {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-muted);
}


/* =====================================================================
 * 12. 信息框 {{信息}}：.vgr-infobox
 *     条目右侧的资料表。颜色全部读主题变量；直角、无投影；手机上改为整行宽。
 * ===================================================================== */
table.vgr-infobox {
    float: right;
    clear: right;
    width: 300px;
    margin: 0 0 1em 1.5em;
    border-collapse: collapse;
    background: var(--paper-raised);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-top: 2px solid var(--zone-accent, var(--accent));
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
}
table.vgr-infobox th.vgr-infobox-title {
    padding: 10px 12px;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: var(--accent-tint);
}
table.vgr-infobox .vgr-infobox-media td {
    padding: 12px;
    text-align: center;
}
table.vgr-infobox .vgr-infobox-media img { max-width: 100%; height: auto; }
.vgr-infobox-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-muted);
}
table.vgr-infobox th[scope="row"] {
    width: 5.5em;
    padding: 7px 8px 7px 12px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    background: transparent;
    border-top: 1px solid var(--rule);
}
table.vgr-infobox td {
    padding: 7px 12px 7px 8px;
    vertical-align: top;
    border-top: 1px solid var(--rule);
}
table.vgr-infobox .vgr-infobox-media td { border-top: none; }
table.vgr-infobox td p { margin: 0; }
/* {{信息2}}：分组小标题 */
table.vgr-infobox .vgr-infobox-group th {
    padding: 6px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--zone-accent, var(--accent));
    background: var(--paper-sunk);
    border-top: 1px solid var(--rule);
}
@media screen and (max-width: 850px) {
    table.vgr-infobox {
        float: none;
        width: 100%;
        margin: 0 0 1.5em;
    }
}