/* ========================================================================== Documentation tables — site-wide visual upgrade - selector `.prose table` 限定 mintlify 文档主区（与 prose 同级别 specificity） - !important 用于覆盖 .prose :where() 默认 padding / border 等 - light / dark 双套（用 html.dark 前缀，与 Tailwind dark: 同步） - 不影响组件（它们不渲染） ========================================================================== */ .prose table, main table { border-collapse: separate !important; border-spacing: 0; width: 100%; margin: 1.25rem 0; font-size: 14px; line-height: 1.6; border: 1px solid rgb(229, 231, 235); /* gray-200 light */ border-radius: 8px; overflow: hidden; /* clip rounded corners */ } html.dark .prose table, html.dark main table { border-color: rgb(55, 65, 81); /* gray-700 dark */ } /* Header — tinted background + bold + dividers */ .prose table thead, main table thead { background-color: rgb(249, 250, 251); /* gray-50 light */ } html.dark .prose table thead, html.dark main table thead { background-color: rgba(31, 41, 55, 0.6); /* gray-800 @ 60% dark */ } .prose table thead th, main table thead th { padding: 12px 16px !important; font-weight: 600 !important; text-align: left !important; color: rgb(17, 24, 39) !important; /* gray-900 light */ border-bottom: 1px solid rgb(229, 231, 235) !important; } html.dark .prose table thead th, html.dark main table thead th { color: rgb(243, 244, 246) !important; /* gray-100 dark */ border-bottom-color: rgb(55, 65, 81) !important; } /* Body cells — horizontal dividers only, symmetric padding */ .prose table tbody td, main table tbody td { padding: 10px 16px !important; vertical-align: top; border-bottom: 1px solid rgb(243, 244, 246) !important; } html.dark .prose table tbody td, html.dark main table tbody td { border-bottom-color: rgba(55, 65, 81, 0.4) !important; } /* First column — restore inline-start padding (prose forces it to 0) + emphasis */ .prose table tbody td:first-child, main table tbody td:first-child { padding-inline-start: 16px !important; font-weight: 500; color: rgb(31, 41, 55); /* gray-800 light */ } html.dark .prose table tbody td:first-child, html.dark main table tbody td:first-child { color: rgb(229, 231, 235); /* gray-200 dark */ } /* Last row — no bottom border (let outer rounded border be the boundary) */ .prose table tbody tr:last-child td, main table tbody tr:last-child td { border-bottom: 0 !important; } /* Subtle zebra stripes for long parameter tables */ .prose table tbody tr:nth-child(even), main table tbody tr:nth-child(even) { background-color: rgba(249, 250, 251, 0.5); } html.dark .prose table tbody tr:nth-child(even), html.dark main table tbody tr:nth-child(even) { background-color: rgba(31, 41, 55, 0.25); } /* Row hover — brand-color tint (#0066ff @ 5%) */ .prose table tbody tr:hover, main table tbody tr:hover { background-color: rgba(0, 102, 255, 0.05); } html.dark .prose table tbody tr:hover, html.dark main table tbody tr:hover { background-color: rgba(0, 102, 255, 0.1); } /* Inline code inside cells — slightly tighter */ .prose table code, main table code { font-size: 0.875em; padding: 1px 6px; border-radius: 4px; } /* ========================================================================== Documentation images — portrait-friendly display - 竖图（手机截图）不再屏霸：max-height 80vh 让其按比例收窄并居中 - 横图保留原满宽行为（被 max-width 约束后高度天然小于 80vh） - inline 小图标本就远小于 80vh，不受影响 - mobile 视口（< 640px）解除限高，回归原生满宽 ========================================================================== */ .prose img, main article img { max-height: 80vh; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; margin-left: auto; margin-right: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } html.dark .prose img, html.dark main article img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } @media (max-width: 640px) { .prose img, main article img { max-height: none; border-radius: 6px; } } /* ========================================================================== 品牌 tab 图标 —— 让 SVG 跟随主题色与选中态 - Mintlify 把 docs.json 里「本地 SVG 路径」的 tab 图标渲染成，于是 SVG 内的 fill="currentColor" 退化为黑色：dark 主题下不可见、选中态也不变亮。 - ⚠️ 线上 Mintlify 会把 src 改写成绝对 S3 URL （https://mintlify.s3...amazonaws.com//logo/icons/im.svg），本地 mint dev 却是相对路径 /logo/icons/im.svg。故选择器必须用 substring 匹配 [src*=...]，绝不能用前缀 [src^=] 或精确 [src=] —— 否则本地生效、线上全部落空（图标消失）。 - 解决（跨浏览器稳，含 Safari）：docs.json 引用的 .svg 本身是「透明占位」，在任何浏览器都渲染成空 → 不会有黑色位图透出（不依赖 content:""）；再用 background-color:currentColor + mask(-glyph.svg 实心形状) 上色，图标颜色即精确等于 tab 文字色 —— light/dark × 选中/未选中/hover 全自动跟随。 - 仅命中 /logo/icons/ 下的品牌图标；首页卡片是内联同时带 `truncate`（自身 class）+ `line-clamp-1` （父按钮 `[&>span]:line-clamp-1` 变体）双重截断，flex 只分给它 ~94px，全名需 ~97px → 尾部被切成 "Pusat Bantu..."。 - 解除截断即可：父 flex 容器（.flex-1，~432px）余量充足，放开后按钮按内容自然增宽 ~3px，无布局风险；单行保留（white-space:nowrap）。 - 作用域用 Mint 稳定语义属性 data-component-part="products-selector-trigger"，只命中产品切换器本身，绝不影响侧栏 / 其它 .truncate。 ========================================================================== */ [data-component-part="products-selector-trigger"] > span { max-width: none !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; display: block !important; white-space: nowrap !important; } img[src*="/logo/icons/dev.svg"] { -webkit-mask-image: url(/logo/icons/dev-glyph.svg); mask-image: url(/logo/icons/dev-glyph.svg); }