/* ===================================================================== 统一主题皮肤 · Mintlify (maple) 风格目标观感：纯白极简、系统字体、侧栏浅色分组标签、圆角边框代码块、右侧 "On this page"、标题旁 Copy page。2000 站共用同一份。 ===================================================================== */ /* ---------- 设计令牌 ---------- */ :root { --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; --md-code-font: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mint-fg: #1a1a1a; /* 主文本 */ --mint-fg-muted: #6b7280; /* 次要文本/描述 */ --mint-fg-faint: #9ca3af; /* 更弱：分组标签、TOC */ --mint-border: #ececec; /* 细边框 */ --mint-border-2: #f3f4f6; /* 更浅分隔 */ --mint-bg: #ffffff; --mint-bg-soft: #fafafa; /* 代码块/搜索底 */ --mint-accent: #111111; /* 强调（黑） */ --mint-radius: 12px; --mint-sidebar-top: 2.8rem; /* 侧栏 sticky 顶距 = 顶栏高度 */ /* 正文列顶距：放在 .md-main__inner 的 margin-top 上（不是正文 padding），这样它会计入 zensical 右侧 TOC scrollspy 的激活判定基线（trigger = 顶栏高 + 0.9 × main 首个子元素 offsetTop）。见 .md-main__inner。 */ --mint-content-top: 1.4rem; } /* 主色改为中性黑，去掉 Material 的品牌色块感 */ [data-md-color-primary=black] { --md-primary-fg-color: #ffffff; --md-primary-fg-color--light: #ffffff; --md-primary-fg-color--dark: #ffffff; --md-primary-bg-color: #1a1a1a; --md-primary-bg-color--light: #6b7280; /* Material 在 [data-md-color-primary=black]（挂在）里把 --md-typeset-a-color 取成 var(--md-primary-fg-color)——被我们上面改成了白。这条定义比下面 :root() 的那条离正文更近，正文里的链接色变量因此解析成白。自身有 .md-typeset a 的直写 color 兜底看不出问题，但新版 Material 的 `.md-typeset a code{color:var(--md-typeset-a-color)}` 直接吃这个变量，于是表格里「带链接的行内代码」（如依赖文件路径）变白、白底上不可见，只有 hover 加了底色才勉强显形。这里在同一 body 作用域按主题前景色覆盖回来（随深浅色变），让链接色变量始终可见。 */ --md-typeset-a-color: var(--mint-fg); } :root { --md-accent-fg-color: #111111; --md-typeset-a-color: var(--mint-fg); /* zensical 给激活导航项铺的底色取这个变量，默认是品牌蓝的 10%（#526cfe1a），不跟 --md-accent-fg-color 联动；不改的话移动端抽屉里当前页是一块淡蓝。 */ --md-accent-fg-color--transparent: rgba(0,0,0,.06); } /* 根字号锁定 16px（对齐 aspen/Tailwind）。Material 默认按屏宽放大到 20–24px，会把全站字号与 rem 版心一起放大 1.25–1.5×——这里固定，令所有 rem 尺寸落到设计值。 */ html { font-size: 100% !important; } body, input, .md-typeset { font-feature-settings: "kern","liga"; -webkit-font-smoothing: antialiased; } /* ---------- 顶部 Header：强制白底（去掉 primary=black 的黑条） ---------- */ .md-header, .md-header--shadow, [data-md-color-primary=black] .md-header { background-color: var(--mint-bg) !important; color: var(--mint-fg) !important; box-shadow: none !important; border-bottom: 1px solid var(--mint-border); } .md-header__title, .md-header__topic, .md-header__topic .md-ellipsis { color: var(--mint-fg); font-weight: 600; font-size: .9rem; } .md-header__button { color: var(--mint-fg-muted); } .md-header__button:hover { color: var(--mint-fg); opacity: 1; } .md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.5rem; } /* 项目名（logo 右侧）：增强辨识度。跟随主题前景色，链接无下划线。仅桌面显示——移动端 Material 顶栏已有站名/页标题，再显示会重复且挤占汉堡键（见文件末尾移动端段的 display:none）。max-width 收窄，避免长名压住居中搜索框。 */ .mint-brand { display: none; align-items: center; margin: 0 .1rem 0 -.2rem; padding: 0; font-size: .95rem; font-weight: 600; line-height: 1; color: var(--mint-fg); white-space: nowrap; text-decoration: none; border-bottom: 0; flex: 0 0 auto; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 76.25em) { .mint-brand { display: inline-flex; } } .mint-brand:hover { color: var(--mint-fg); opacity: .85; } [data-md-color-scheme=slate] .mint-brand { color: #f2f2f2; } /* 右上角仓库信息（source widget，见 partials/source.html）：图标在左，右侧上下两行——项目名 + 版本/★star。数据来自 extra.repo_stats （构建期抓取）；没有统计时只剩项目名一行。整块允许两行，故给 header__source 放宽。 Material 默认用 .md-source__repository 的 padding-left:2rem / margin-left:-2rem 给绝对定位的图标腾位，会把文字往右推、看着像居中；这里整段改成 flex 左对齐，图标回到常规流、文字块一律 flex-start，彻底左对齐。 */ .md-header__source { color: var(--mint-fg-muted); width: auto; max-width: 16rem; } .md-source { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; color: var(--mint-fg); font-size: inherit; line-height: 1.15; text-align: left; } .md-source__icon { position: static; align-self: center; margin: 0; padding: 0; } .md-source__icon.md-icon svg { width: 1.5rem; height: 1.5rem; } .md-source__text { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; } .md-source__repository { display: block; margin: 0; padding: 0; text-align: left; font-size: .82rem; font-weight: 600; color: var(--mint-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* 统计行：小字、浅色，版本徽标 + star，各带一枚 mask 小图标 */ .mint-src-stats { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; font-size: .66rem; color: var(--mint-fg-faint); font-weight: 500; } .mint-src-ver { display: inline-flex; align-items: center; gap: .2rem; color: var(--mint-fg-muted); } .mint-src-ver::before { content: ""; width: .72rem; height: .72rem; background: currentColor; -webkit-mask: var(--mint-ic-tag) center/contain no-repeat; mask: var(--mint-ic-tag) center/contain no-repeat; } .mint-src-stat { display: inline-flex; align-items: center; gap: .2rem; } .mint-src-stat::before { content: ""; width: .72rem; height: .72rem; background: currentColor; } .mint-src-star::before { -webkit-mask: var(--mint-ic-star) center/contain no-repeat; mask: var(--mint-ic-star) center/contain no-repeat; } :root { --mint-ic-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E"); --mint-ic-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); } /* ---------- 左侧栏 ---------- */ /* 宽度只能在桌面断点内改：zensical 在 <76.25em 把左栏做成 12.1rem 的固定定位抽屉，收起态靠 left:-12.1rem 整体移出屏幕，展开靠 translateX(12.5rem) 推回来。这里若无条件写 width，抽屉比位移量宽出的那截会一直露在屏幕左缘，压住正文和顶栏的菜单按钮（backdrop-filter 还会把按钮糊掉）。桌面宽度见下方 aspen 版式段（18rem）。 */ @media (min-width: 76.25em) { /* 导航条目 14px。嵌套 .md-nav 里的条目 Material 默认设为 .7rem，故直接命中链接（分组标题另有更高优先级的 .75rem 规则，不受影响）。 */ .md-nav--primary, .md-nav--primary .md-nav__link { font-size: .875rem; } } /* 分组标题（aspen：text-xs / font-semibold / gray-900，组间留白） */ .md-nav--primary .md-nav__item--section > .md-nav__link, .md-nav--primary > .md-nav__title { color: #161616; /* gray-900 */ font-weight: 600; font-size: .75rem; /* text-xs */ letter-spacing: 0; margin-top: 1.5rem; margin-bottom: .4rem; text-transform: none; border-left: 0; /* 组标题无线/无块 */ padding-left: .7rem; background: none !important; } .md-nav--primary > .md-nav__title { display: none; } /* 隐藏顶部 site 名（logo 已在 header） */ /* 导航项：aspen 圆角 pill（无左线；激活=浅底填充块） */ .md-nav__link { color: #3e3e3e; /* gray-700 */ border-left: 0; border-radius: .7rem; /* rounded-xl */ margin: .05rem 0; padding: .34rem .7rem; background: none; transition: color .12s, background .12s; } .md-nav__link:hover { color: #161616; background: rgba(0,0,0,.045); } .md-nav--primary .md-nav__item .md-nav__link--active, /* 与 zensical 同优先级、靠后覆盖 */ .md-nav__item .md-nav__link--active, .md-nav__link--active { color: #111; font-weight: 600; background: rgba(0,0,0,.06); /* aspen: bg-primary/10（此处主色=黑）*/ } .md-nav__link:focus { color: #161616; } /* ---------- 右侧 TOC：On this page ---------- */ .md-nav--secondary .md-nav__title { color: var(--mint-fg-faint); font-size: .7rem; font-weight: 600; text-transform: none; } .md-nav--secondary .md-nav__link { color: var(--mint-fg-faint); font-size: .875rem; } /* 14px */ /* TOC 链接文字包在内层里，基础样式以 0,2,0 直接命中它（.7rem），外层上的 font-size 靠继承永远输给直接命中 —— 这里以更高特异性命中内层让其继承，上面的 14px 才真正生效。 */ .md-nav--secondary .md-nav__link .md-typeset { font-size: inherit; } .md-nav--secondary .md-nav__link:hover { color: var(--mint-fg); } .md-nav--secondary .md-nav__link--active { color: var(--mint-fg); font-weight: 500; } .md-sidebar--secondary .md-nav__list .md-nav__list { padding-left: .6rem; } /* ---------- 正文排版 ---------- */ .md-content { color: var(--mint-fg); } /* 正文字号 16px / 行高 1.65 */ .md-typeset { font-size: 1rem; line-height: 1.65; color: #4f4f4f; } .md-typeset h1 { font-weight: 600; /* Mintlify: font-semibold */ font-size: 2.25rem; /* text-4xl */ letter-spacing: -.02em; color: var(--mint-fg); margin: 0 0 .5rem; line-height: 1.15; } .md-typeset h2 { font-weight: 600; font-size: 1.5rem; /* text-2xl，对齐 Mintlify 章节标题 */ letter-spacing: -.01em; margin: 2.2rem 0 .9rem; padding-top: 0; border-top: none; /* Mintlify H2 无上边框 */ color: var(--mint-fg); } .md-typeset h3 { font-weight: 600; font-size: 1.15rem; margin-top: 1.8rem; color: var(--mint-fg); } .md-typeset a { color: var(--mint-fg); text-decoration: none; border-bottom: 1px solid #d5d5d5; } .md-typeset a:hover { color: #000; border-bottom-color: #000; } /* 标题永久链接：移到标题「左侧」、悬停才显示、用链接图标替代 ¶（对齐 Mintlify） */ .md-typeset :is(h1, h2, h3, h4, h5, h6) { position: relative; } .md-typeset .headerlink { position: absolute; left: -1.7rem; top: .2em; width: 1.1rem; height: 1.1rem; margin: 0; opacity: 0; border-bottom: none !important; font-size: 0; line-height: 0; /* 隐藏 ¶ 字符 */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat; transition: opacity .15s; } .md-typeset :is(h1, h2, h3, h4):hover .headerlink { opacity: 1; } .md-typeset strong { color: var(--mint-fg); font-weight: 650; } /* ---------- 内联代码 ---------- */ .md-typeset code { background: var(--mint-bg-soft); border: 1px solid var(--mint-border); border-radius: 6px; padding: .1em .34em; font-size: .82em; color: #d6336c; /* Mintlify 内联 code 的品红 */ } /* ---------- 代码块：白底细边圆角（边框只加最外层，避免双边框） ---------- */ .md-typeset .highlight { background: var(--mint-bg-soft); border: 1px solid var(--mint-border); border-radius: var(--mint-radius); } .md-typeset .highlight:hover { border-color: #e2e2e2; } /* .highlight 内的 pre：去掉自身边框/底色，防止与外层重复成双框 */ .md-typeset .highlight pre { background: transparent; border: none; border-radius: 0; margin: 0; padding: 0; } /* 独立 pre（不在 .highlight 内）自己带边框 */ .md-typeset > pre, .md-typeset p + pre { background: var(--mint-bg-soft); border: 1px solid var(--mint-border); border-radius: var(--mint-radius); padding: 0; } .md-typeset pre > code { border: none; background: transparent; color: inherit; display: block; padding: .9rem 1rem; font-size: .82rem; line-height: 1.6; } .md-clipboard { color: var(--mint-fg-faint); } .md-clipboard:hover { color: var(--mint-fg); } /* 语法高亮微调（贴近 Mintlify 冷色调） */ .md-typeset .highlight .k, .md-typeset .highlight .kd { color: #8250df; } /* 关键字紫 */ .md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2 { color: #0a7d3e; } /* 字符串绿 */ .md-typeset .highlight .nf, .md-typeset .highlight .nb { color: #0550ae; } /* 函数蓝 */ .md-typeset .highlight .c, .md-typeset .highlight .c1 { color: #8b949e; font-style: italic; } /* ---------- 表格：细线极简 ---------- */ .md-typeset table:not([class]) { border: 1px solid var(--mint-border); border-radius: 10px; font-size: .78rem; box-shadow: none; } .md-typeset table:not([class]) th { background: var(--mint-bg-soft); color: var(--mint-fg); font-weight: 600; } .md-typeset table:not([class]) td { border-top: 1px solid var(--mint-border-2); } /* ---------- Admonition：轻量卡片（对齐 Mintlify Note/Warning） ---------- */ .md-typeset .admonition, .md-typeset details { border: 1px solid var(--mint-border); border-left-width: 3px; border-radius: 10px; box-shadow: none; font-size: .8rem; } .md-typeset .admonition-title { background: var(--mint-bg-soft); font-weight: 600; } /* ---------- grid cards（首页）：Mintlify Card 观感 ---------- */ .md-typeset .grid.cards > :is(ul,ol) > li, .md-typeset .grid > .card { border: 1px solid rgba(10,10,10,.1); /* border-gray-950/10 */ border-radius: 1rem; /* rounded-2xl */ box-shadow: none; padding: 1.25rem 1.5rem; /* px-6 py-5 */ transition: border-color .15s, box-shadow .15s; } .md-typeset .grid.cards > :is(ul,ol) > li > :first-child { font-weight: 600; } .md-typeset .grid.cards > :is(ul,ol) > li:hover { border-color: #d9d9d9; box-shadow: 0 2px 10px rgba(0,0,0,.04); } /* ---------- 按钮：黑色实心 / 描边（首页 hero） ---------- */ .md-typeset .md-button { border-radius: 999px; border: 1px solid var(--mint-border); color: var(--mint-fg); font-size: .78rem; padding: .45em 1.1em; } .md-typeset .md-button--primary { background: #000; border-color: #000; color: #fff; } .md-typeset .md-button--primary:hover { background: #222; border-color: #222; color: #fff; } /* 描边按钮 hover：Material 默认会填成 accent 深底，导致“深底+深字”不可读—— 这里显式改成浅灰底 + 深字，保证对比度（Download / GitHub） */ .md-typeset .md-button:not(.md-button--primary):hover { background: rgba(0,0,0,.05); border-color: var(--mint-fg); color: var(--mint-fg); } [data-md-color-scheme=slate] .md-typeset .md-button:not(.md-button--primary):hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; } /* ---------- 页脚：极简 ---------- */ /* ---------- 正文末尾：翻页卡片 + 来源行（aspen：两张 rounded-xl 卡片并排） ---------- partials/footer.html 渲染在正文列末尾（见 main.html 的 content 块）。 Material 默认把它做成通栏细条 + 大黑箭头，这里整个重排：左右各一张描边卡片，小字方向标签 + 加粗标题，箭头细而淡，悬停加深描边、浅底。 */ .md-footer--inline { background: none; margin-top: auto; padding-top: 3rem; border: 0; } .md-footer--inline .md-footer__inner, .md-footer--inline .md-footer__inner:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 0; overflow: visible; } .md-typeset .md-footer--inline .md-footer__link { display: flex; align-items: center; gap: .7rem; flex-grow: 0; max-width: none; margin: 0; padding: .9rem 1.1rem; border: 1px solid var(--mint-border); border-bottom: 1px solid var(--mint-border); /* 盖掉 .md-typeset a 的下划线 */ border-radius: var(--mint-radius); color: var(--mint-fg); opacity: 1; transition: border-color .15s, background .15s; } .md-typeset .md-footer--inline .md-footer__link:hover, .md-typeset .md-footer--inline .md-footer__link:focus { opacity: 1; color: var(--mint-fg); border-color: #cfcfcf; background: var(--mint-bg-soft); } .md-footer--inline .md-footer__link--prev { grid-column: 1; } .md-footer--inline .md-footer__link--next { grid-column: 2; margin-left: 0; justify-content: flex-end; text-align: right; } .md-footer--inline .md-footer__link--prev .md-footer__title { display: block; } /* Material 窄屏会隐藏，恢复 */ .md-footer--inline .md-footer__title { flex: 0 1 auto; min-width: 0; max-width: none; padding: 0; margin: 0; font-size: .85rem; font-weight: 600; line-height: 1.35; white-space: normal; } .md-footer--inline .md-footer__direction { display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 500; color: var(--mint-fg-faint); opacity: 1; } .md-footer--inline .md-footer__button { flex: 0 0 auto; width: 1rem; height: 1rem; padding: 0; margin: 0; color: var(--mint-fg-faint); transition: color .15s, transform .15s; } .md-footer--inline .md-footer__button svg { width: 1rem; height: 1rem; fill: currentColor; } .md-footer--inline .md-footer__link:hover .md-footer__button { color: var(--mint-fg); } .md-footer--inline .md-footer__link--prev:hover .md-footer__button { transform: translateX(-2px); } .md-footer--inline .md-footer__link--next:hover .md-footer__button { transform: translateX(2px); } @media screen and (max-width: 44.984375em) { .md-footer--inline .md-footer__inner, .md-footer--inline .md-footer__inner:not([hidden]) { grid-template-columns: 1fr; } .md-footer--inline .md-footer__link--next { grid-column: 1; } } /* 来源行：最底部一行小字，浅色分隔线，链接默认无下划线、悬停才出现 */ .md-typeset .mint-source-line { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--mint-border-2); font-size: .75rem; line-height: 1.6; color: var(--mint-fg-faint); } .md-typeset .mint-source-line a { color: var(--mint-fg-muted); border-bottom: 1px solid transparent; } .md-typeset .mint-source-line a:hover { color: var(--mint-fg); border-bottom-color: currentColor; } .mint-source-line .mint-dot { margin: 0 .45em; color: var(--mint-border); } [data-md-color-scheme=slate] .md-typeset .md-footer--inline .md-footer__link { border-color: #2a2a2a; color: #e6e6e6; } [data-md-color-scheme=slate] .md-typeset .md-footer--inline .md-footer__link:hover { border-color: #3d3d3d; background: rgba(255,255,255,.04); color: #fff; } [data-md-color-scheme=slate] .md-typeset .mint-source-line { border-top-color: #222; } [data-md-color-scheme=slate] .mint-source-line .mint-dot { color: #333; } .md-copyright { color: var(--mint-fg-faint); } /* ---------- Copy page 分体按钮 + 下拉菜单（js/copy-page.js 注入，对齐 aspen） ---------- */ .mint-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } /* 分体按钮容器 */ .mint-cp { flex: 0 0 auto; position: relative; display: inline-flex; margin-top: .3rem; } .mint-cp-main, .mint-cp-toggle { display: inline-flex; align-items: center; gap: .45rem; height: 2.1rem; padding: 0 .8rem; font-size: .8rem; font-weight: 500; color: var(--mint-fg-muted); background: var(--mint-bg); border: 1px solid var(--mint-border); cursor: pointer; white-space: nowrap; transition: color .12s, background .12s, border-color .12s; } .mint-cp-main { border-start-start-radius: 10px; border-end-start-radius: 10px; } .mint-cp-toggle { border-start-end-radius: 10px; border-end-end-radius: 10px; border-inline-start: 0; padding: 0 .5rem; } .mint-cp-main:hover, .mint-cp-toggle:hover { color: var(--mint-fg); background: var(--mint-bg-soft); } .mint-cp-main svg { width: 15px; height: 15px; } .mint-cp-toggle svg { width: 14px; height: 14px; transition: transform .15s; } .mint-cp.is-open .mint-cp-toggle svg { transform: rotate(180deg); } /* 下拉菜单 */ .mint-cp-menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 30; min-width: 20rem; padding: .4rem; background: var(--mint-bg); border: 1px solid var(--mint-border); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .13s, transform .13s, visibility .13s; } .mint-cp.is-open .mint-cp-menu { opacity: 1; visibility: visible; transform: none; } .mint-cp-item { display: flex; align-items: flex-start; gap: .7rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--mint-fg); text-decoration: none; } .mint-cp-item:hover { background: rgba(0,0,0,.045); } /* 链接型菜单项会命中 .md-typeset a 的下划线规则（优先级更高），在菜单里显示成一条压在说明文字上的横线；这里以同等以上的优先级清掉。 */ .md-typeset .mint-cp-item, .md-typeset .mint-cp-item:hover { border-bottom: 0; color: var(--mint-fg); } .mint-cp-ic { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--mint-border); color: var(--mint-fg-muted); } .mint-cp-ic svg { width: 15px; height: 15px; } .mint-cp-tx { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .mint-cp-tx strong { font-size: .82rem; font-weight: 600; color: var(--mint-fg); display: inline-flex; align-items: center; gap: .25rem; } .mint-cp-tx small { font-size: .72rem; color: var(--mint-fg-faint); } .mint-cp-ext { display: inline-flex; } .mint-cp-ext svg { width: 11px; height: 11px; color: var(--mint-fg-faint); } /* 深色 */ [data-md-color-scheme=slate] .mint-cp-item:hover { background: rgba(255,255,255,.06); } /* ---------- 深色模式适配 ---------- */ [data-md-color-scheme=slate] { --mint-fg: #e6e6e6; --mint-fg-muted:#9ca3af; --mint-fg-faint:#6b7280; --mint-border:#26272b; --mint-border-2:#1f2023; --mint-bg:#0b0b0c; --mint-bg-soft:#141416; --mint-accent:#fff; --md-default-bg-color:#0b0b0c; --md-accent-fg-color--transparent: rgba(255,255,255,.1); } [data-md-color-scheme=slate] .md-typeset code { color:#ff7ab2; } /* 深色模式：header/侧栏按钮（含主题切换）图标提亮，确保可见 */ [data-md-color-scheme=slate] .md-header__button, [data-md-color-scheme=slate] .mint-side-head .md-header__button { color: #e6e6e6; } [data-md-color-scheme=slate] .md-header__button:hover { color: #fff; } [data-md-color-scheme=slate] .md-source { color: #e6e6e6; } /* 深色模式：修正所有硬编码深色文字（在深色底上会看不见） */ /* 侧栏分组标题 */ [data-md-color-scheme=slate] .md-nav--primary .md-nav__item--section > .md-nav__link { color: #f2f2f2; } /* 侧栏导航项：常态浅灰、悬停浅底、激活白字 + 浅底 pill */ [data-md-color-scheme=slate] .md-nav__link { color: #9ca3af; } [data-md-color-scheme=slate] .md-nav__link:hover { color: #e6e6e6; background: rgba(255,255,255,.06); } [data-md-color-scheme=slate] .md-nav__item .md-nav__link--active, [data-md-color-scheme=slate] .md-nav__link--active { color: #fff; background: rgba(255,255,255,.1); } [data-md-color-scheme=slate] .md-nav__link:focus { color: #e6e6e6; } /* 正文链接与标题 hover */ [data-md-color-scheme=slate] .md-typeset a { border-bottom-color: #3a3a3a; } [data-md-color-scheme=slate] .md-typeset a:hover { color: #fff; border-bottom-color: #fff; } /* 正文主色 */ [data-md-color-scheme=slate] .md-typeset { color: #c9c9c9; } [data-md-color-scheme=slate] .md-typeset h1, [data-md-color-scheme=slate] .md-typeset h2, [data-md-color-scheme=slate] .md-typeset h3, [data-md-color-scheme=slate] .md-typeset strong { color: #f2f2f2; } /* Copy page 按钮、内容分隔线 */ [data-md-color-scheme=slate] .mint-cp-main, [data-md-color-scheme=slate] .mint-cp-toggle { color: #9ca3af; } [data-md-color-scheme=slate] .mint-cp-main:hover, [data-md-color-scheme=slate] .mint-cp-toggle:hover { color: #fff; } /* 隐藏 Material 独立的“编辑”按钮——已并入 Copy page 下拉 */ .md-content__button.md-icon { display: none; } /* ===================================================================== aspen 版式：logo + 搜索在顶栏（搜索居中）、tab 通栏、侧栏在下方 —— Material 默认布局，仅微调；视觉沿用现有主题（黑/字体/组件不变）仅桌面端（≥76.25em）生效 ===================================================================== */ @media (min-width: 76.25em) { /* 顶栏：主题底 + 细底边，正常高度（logo 在左、搜索居中、切换/仓库在右） */ .md-header { border-bottom: 1px solid var(--mint-border); box-shadow: none !important; } .md-header__inner { position: relative; } /* 站名文字隐藏，但保留标题元素作为 flex 撑开器（把右侧切换/仓库推到最右） */ .md-header__title .md-header__topic, .md-header__title .md-ellipsis { visibility: hidden; } .md-header__button.md-logo { margin-right: .4rem; } /* ==== 搜索：关闭态 = 顶栏居中药丸 ==== */ .md-header .md-search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22rem; max-width: 42vw; z-index: 1; } /* zensical modern 皮肤下顶栏里只有一个 .md-search__button；输入框、结果列表都在点击后由 JS 建的 shadow DOM 弹层里，外部 CSS 进不去（只能靠继承进去的 --md-* 变量调色，见文件末尾的高亮修正）。这里只管这个按钮：Mintlify 式的描边药丸 + 左侧放大镜 + 右侧 kbd 样式的快捷键徽标。 */ .md-header .md-search__button { width: 100%; height: 2.2rem; padding: 0 3.2rem 0 2.3rem; font-size: .82rem; font-weight: 400; color: var(--mint-fg-faint); background: var(--mint-bg-soft); border: 1px solid var(--mint-border); border-radius: 999px; transition: border-color .15s, background .15s, color .15s; } .md-header .md-search__button:hover, .md-header .md-search__button:focus-visible { color: var(--mint-fg-muted); background: var(--mint-bg); border-color: #d0d0d0; } .md-header .md-search__button::before { /* 放大镜（mask 图标，用 background-color 着色） */ top: 50%; left: .85rem; width: 1rem; height: 1rem; margin-top: -.5rem; background-color: var(--mint-fg-faint); } .md-header .md-search__button::after { /* ⌘K / Ctrl+K 徽标：kbd 风格 */ top: 50%; right: .55rem; transform: translateY(-50%); padding: .1rem .4rem; font-family: var(--md-text-font); font-size: .65rem; font-weight: 500; line-height: 1.4; color: var(--mint-fg-faint); background: var(--mint-bg); border: 1px solid var(--mint-border); border-radius: 6px; } [data-md-color-scheme=slate] .md-header .md-search__button { color: #8b8f98; background: rgba(255,255,255,.04); border-color: #2a2a2a; } [data-md-color-scheme=slate] .md-header .md-search__button:hover, [data-md-color-scheme=slate] .md-header .md-search__button:focus-visible { color: #c9c9c9; background: rgba(255,255,255,.07); border-color: #3d3d3d; } [data-md-color-scheme=slate] .md-header .md-search__button::before { background-color: #8b8f98; } [data-md-color-scheme=slate] .md-header .md-search__button::after { color: #8b8f98; background: rgba(255,255,255,.06); border-color: #333; } /* ---- 整体容器：对齐 aspen 容器封顶 1472px（≈92rem），大屏居中不无限撑宽 ---- */ .md-grid { max-width: 92rem; } /* ---- 两侧栏：固定为「视口高 − 顶栏高」的 sticky 列，内容在 scrollwrap 内滚动 ---- Material/zensical 把 .md-sidebar 设为 height:0 的 sticky 盒子，靠 JS 给 scrollwrap 写内联高度让它内部滚动；实测该 JS 在这套主题下没有生效，scrollwrap 溢出到盒子外，导航很长时会漫过主区域底部、压在翻页条上，分割线也只有盒子那十几像素高。改成 CSS 定高：sticky 元素不会超出容器 .md-main__inner，滚到页底时会被容器底边自然顶上去，永远不会和页脚重叠；分割线跟着 scrollwrap 撑满整列。 2.8rem ≈ 顶栏 44px（根字号 16px）。 */ .md-sidebar--primary, .md-sidebar--secondary { top: var(--mint-sidebar-top); /* 正文列多出的 --mint-content-top（下面 .md-main__inner 的 margin）会把整行 flex 下推，侧栏底就会漫过视口底。这里从列高里扣掉同样的量，底边仍贴视口底。 */ height: calc(100vh - var(--mint-sidebar-top) - var(--mint-content-top)); padding-top: 0 !important; padding-bottom: 0 !important; } .md-sidebar--primary .md-sidebar__scrollwrap, .md-sidebar--secondary .md-sidebar__scrollwrap { height: 100%; max-height: 100%; margin-top: 0; overflow-y: auto; } /* ---- 左栏：aspen w-[18rem] + 右侧分割线；隐藏抽屉遗留元素 ---- */ .md-sidebar--primary { width: 18rem; } .md-sidebar--primary .md-sidebar__scrollwrap { margin-right: 0; border-right: 1px solid var(--mint-border); } /* 顶距（原 1.4rem）已由 .md-main__inner 的 margin-top(--mint-content-top) 承担，这里归零，侧栏内容位置不变。 */ .md-sidebar--primary .md-sidebar__inner { padding: 0 1.1rem 1rem .2rem; } .md-nav--primary > .md-nav__title, .md-nav--primary > .md-nav__source { display: none !important; } /* 消除左栏顶部空块 */ .md-nav--primary { margin-top: 0 !important; padding-top: 0 !important; } /* 第一个分组标题顶部不留大空 */ .md-nav--primary .md-nav__item--section:first-child > .md-nav__link { margin-top: .3rem; } /* ---- 右栏 TOC：Material 默认 12.1rem 太窄，FAQ 这类长标题几乎每条都折成三四行。基线 15rem，大屏再放到 17rem；左栏 18rem + 右栏 15rem 在 1220px 断点下正文仍有约 640px。 ---- */ .md-sidebar--secondary { width: 15rem; } /* 顶距同左栏，改由 .md-main__inner margin 承担，这里归零。 */ .md-sidebar--secondary .md-sidebar__inner { padding-top: 0; padding-right: .6rem; } .md-nav--secondary .md-nav__link { line-height: 1.45; } /* ---- 内容区：左侧留出与分割线的间距（对齐 aspen pl-[5.5rem] 的呼吸感） ---- */ .md-content__inner { padding-left: 1.2rem; padding-right: .5rem; } /* 正文列撑到与侧栏同高（flex 行里默认 stretch），内部纵向 flex：文章正常排版，翻页卡片 margin-top:auto 推到底，内容短时翻页和来源行贴着列底。 */ .md-content { display: flex; flex-direction: column; } /* 顶距（原 1.6rem）大部分挪到 .md-main__inner 的 margin-top(--mint-content-top 1.4rem)，这里只留 .2rem 补差，H1 视觉位置不变。 */ .md-content__inner { display: flex; flex-direction: column; flex: 1 0 auto; margin-bottom: 0; padding-top: .2rem; padding-bottom: 1.6rem; } /* 正文列顶距用 margin-top 而非 padding-top：zensical 右侧 TOC 的 scrollspy 用 “顶栏高 + 0.9 × [data-md-component=main] 首个子元素(=.md-main__inner) 的 offsetTop” 作为“标题已划过”的判定线。若 margin 为 0，判定线≈顶栏高(44px)，而点目录锚点后标题落在 scroll-margin(≈58px)处、正好在判定线下方 → 判定为“未划过”，高亮停在上一条（用户反馈的 bug）。给 margin-top 一个正值把判定线推到 scroll-margin 之下即修复。由此产生的整行下推、短页多滚，已在上面 .md-sidebar 列高里对冲。 */ .md-main__inner { margin-top: var(--mint-content-top); } .md-content__inner > .mint-article { flex: 0 0 auto; } .md-content__inner > .mint-source-line { margin-bottom: 0; } } @media screen and (min-width: 100em) { .md-sidebar--secondary { width: 17rem; } } /* ===================================================================== 移动端 / 窄屏（<76.25em）：zensical 把左栏收成抽屉、右栏 TOC 折进正文顶部的折叠条，桌面版式那一段完全不生效。上面若干无媒体条件的导航样式是按桌面 18rem 侧栏写的，落到 12.1rem 的抽屉里有几处要单独改。断点值与 zensical 一致。 ===================================================================== */ @media screen and (max-width: 76.234375em) { /* 抽屉头（logo + 站名）：上面为桌面写的 .md-nav__title 规则会把它涂成 #161616、再压 1.5rem 顶距 —— 深色模式下整行隐形。这里还原成主题前景色、贴顶。 */ .md-nav--primary > .md-nav__title[for=__drawer] { display: flex; margin: 0; padding: .8rem; color: var(--mint-fg); font-size: .8rem; border-bottom: 1px solid var(--mint-border); background: none !important; } /* 导航条目：zensical 抽屉里嵌套条目只有 .7rem（11.2px），手指点不准也看不清，统一抬到 .8rem；分组标题沿用 .75rem 加粗，层级关系与桌面一致。 */ .md-nav--primary .md-nav__link { font-size: .8rem; } .md-nav--primary .md-nav__item--section > .md-nav__link { font-size: .75rem; } /* 第一个分组紧跟抽屉头/仓库卡片，不留 1.5rem 大空 */ .md-nav--primary > .md-nav__list > .md-nav__item--section:first-child > .md-nav__link { margin-top: .5rem; } /* 抽屉里的仓库小卡：描边随主题 */ .md-nav__source { border-color: var(--mint-border); } /* Copy page 下拉：固定 20rem 在 320px 宽的机型上会撑出屏幕，按视口收窄 */ .mint-cp-menu { min-width: min(20rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); } } @media screen and (max-width: 44.984375em) { /* 手机：H1 2.25rem 在 375px 宽下动辄折成三行，收到 text-3xl */ .md-typeset h1 { font-size: 1.85rem; } /* 标题行：Copy page 按钮不与长标题抢一行，允许换行到标题下方右侧 */ .mint-page-head { flex-wrap: wrap; gap: .4rem 1rem; } } /* ---------- 搜索弹层（shadow DOM）命中词高亮 ---------- 弹层里 mark 的颜色取自 --md-accent-fg-color，本主题把它设成了黑：浅色下和正文同色、深色下直接隐形，搜出来的结果看不出命中了什么。宿主 div 由 zensical JS 创建、没有类名只有内联样式，借它的 z-index 命中；变量只在宿主上改，不影响页面其他强调色。 */ body > div[style*="z-index: 4"] { --md-accent-fg-color: #da203e; } body[data-md-color-scheme=slate] > div[style*="z-index: 4"] { --md-accent-fg-color: #ff7086; }