643 lines
12 KiB
CSS
643 lines
12 KiB
CSS
@import "./docs-nextra-search.css";
|
||
|
||
/* —— 文档区：与官网 band / token 一致 —— */
|
||
|
||
/* 全站顶栏 fixed + 文档次顶栏（通栏，非岛状；吸顶时与主导航同色衔接） */
|
||
.docs-page {
|
||
--docs-subnav-height: 2.5rem;
|
||
--docs-chrome-bg: rgb(255 255 255 / 0.52);
|
||
--docs-subnav-bg: var(--docs-chrome-bg);
|
||
--docs-chrome-blur: blur(10px);
|
||
--docs-sticky-top: calc(
|
||
var(--nav-offset) + var(--docs-subnav-height) + var(--spacing-xs)
|
||
);
|
||
padding-top: var(--nav-offset);
|
||
}
|
||
|
||
html.nav-is-docked .docs-page {
|
||
--docs-subnav-height: 2.25rem;
|
||
--docs-chrome-bg: rgb(255 255 255 / 0.94);
|
||
--docs-subnav-bg: rgb(246 248 251 / 0.98);
|
||
--docs-chrome-blur: blur(12px);
|
||
}
|
||
|
||
/* 文档页吸顶：主导航去掉底边/阴影，避免与次顶栏叠出色差 */
|
||
html.nav-is-docked .docs-page .nav-float--docked .nav-float-rail {
|
||
border-bottom: none;
|
||
box-shadow: none;
|
||
background-color: var(--docs-chrome-bg);
|
||
backdrop-filter: var(--docs-chrome-blur);
|
||
}
|
||
|
||
.docs-subnav {
|
||
position: sticky;
|
||
top: var(--nav-offset);
|
||
z-index: 40;
|
||
width: 100%;
|
||
transition: top 0.38s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
html.nav-is-docked .docs-subnav {
|
||
/* 与 fixed 主导航贴齐，消除亚像素缝 */
|
||
margin-top: -1px;
|
||
}
|
||
|
||
.docs-subnav__rail {
|
||
background-color: var(--docs-subnav-bg);
|
||
backdrop-filter: var(--docs-chrome-blur);
|
||
border-bottom: 1px solid var(--color-border-light);
|
||
transition:
|
||
background-color 0.38s ease,
|
||
backdrop-filter 0.38s ease;
|
||
}
|
||
|
||
|
||
.docs-subnav__inner {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--spacing-sm) var(--spacing-lg);
|
||
min-height: var(--docs-subnav-height);
|
||
padding-block: 0.15rem;
|
||
}
|
||
|
||
html.nav-is-docked .docs-subnav__inner {
|
||
padding-block: 0.1rem;
|
||
}
|
||
|
||
.docs-subnav__inner .docs-breadcrumb {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.docs-subnav__search {
|
||
flex: 1 1 14rem;
|
||
width: 100%;
|
||
max-width: 18rem;
|
||
min-width: min(100%, 11rem);
|
||
}
|
||
|
||
.docs-subnav .docs-spotlight__input {
|
||
min-height: 1.875rem;
|
||
padding-block: 0.3rem;
|
||
font-size: 0.8125rem;
|
||
background: rgb(0 0 0 / 0.04);
|
||
}
|
||
|
||
html.nav-is-docked .docs-subnav .docs-spotlight__input {
|
||
min-height: 1.75rem;
|
||
padding-block: 0.25rem;
|
||
}
|
||
|
||
.docs-subnav .docs-spotlight__input--focus,
|
||
.docs-subnav .docs-spotlight__input:focus {
|
||
background: rgb(255 255 255 / 0.95);
|
||
}
|
||
|
||
@media (width < 768px) {
|
||
.docs-subnav__search {
|
||
max-width: none;
|
||
flex: 1 1 100%;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.docs-subnav,
|
||
.docs-subnav__rail,
|
||
html.nav-is-docked .docs-page .nav-float--docked .nav-float-rail {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
/* 文档页内保证全站顶栏/容器宽度与首页一致 */
|
||
.docs-page .nav-float {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
|
||
.docs-page .container-site {
|
||
width: 100%;
|
||
max-width: var(--width-container);
|
||
margin-inline: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.docs-breadcrumb {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.35rem 0.5rem;
|
||
color: var(--color-body);
|
||
}
|
||
|
||
.docs-breadcrumb__link {
|
||
color: var(--color-body);
|
||
text-decoration: none;
|
||
transition: color 0.15s ease;
|
||
}
|
||
|
||
.docs-breadcrumb__link:hover {
|
||
color: var(--color-accent-ink);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.docs-breadcrumb__current {
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.docs-breadcrumb__sep {
|
||
color: var(--color-body-light);
|
||
user-select: none;
|
||
}
|
||
|
||
.docs-shell__grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--spacing-3xl);
|
||
align-items: stretch;
|
||
}
|
||
|
||
@media (width >= 992px) {
|
||
.docs-shell__grid {
|
||
grid-template-columns: minmax(168px, 188px) minmax(0, 1fr);
|
||
gap: var(--spacing-2xl);
|
||
}
|
||
}
|
||
|
||
.docs-shell {
|
||
padding-block: var(--spacing-xl) var(--spacing-section);
|
||
}
|
||
|
||
.docs-shell__aside {
|
||
display: none;
|
||
min-width: 0;
|
||
}
|
||
|
||
@media (width >= 992px) {
|
||
.docs-shell__aside {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.docs-shell__sticky-anchor {
|
||
position: sticky;
|
||
top: var(--docs-sticky-top);
|
||
align-self: flex-start;
|
||
width: 100%;
|
||
}
|
||
|
||
.docs-shell__sticky {
|
||
max-height: calc(100vh - var(--docs-sticky-top) - 0.75rem);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
padding: 0;
|
||
padding-right: 0.35rem;
|
||
}
|
||
|
||
/* 侧栏：贴近 Nextra Docs 的扁平链接样式 */
|
||
.docs-nav {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.125rem;
|
||
}
|
||
|
||
.docs-nav__group-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.docs-nav__link {
|
||
display: block;
|
||
flex: 1;
|
||
padding: 0.3125rem 0.5rem;
|
||
border-radius: 0.375rem;
|
||
color: var(--color-body);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
line-height: 1.35;
|
||
transition:
|
||
color 0.15s ease,
|
||
background-color 0.15s ease;
|
||
}
|
||
|
||
.docs-nav__link--nested {
|
||
font-size: 0.8125rem;
|
||
padding-left: 0.875rem;
|
||
color: var(--color-body-light);
|
||
}
|
||
|
||
.docs-nav__link:hover {
|
||
color: var(--color-ink);
|
||
background: rgb(0 0 0 / 0.04);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.docs-nav__link--active {
|
||
color: var(--color-primary);
|
||
font-weight: 500;
|
||
background: rgb(38 112 232 / 0.08);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.docs-nav__link--nested.docs-nav__link--active {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.docs-nav__toggle {
|
||
flex-shrink: 0;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.docs-nav__toggle:hover {
|
||
background: var(--color-canvas-muted);
|
||
}
|
||
|
||
.docs-nav__chevron {
|
||
display: block;
|
||
width: 0.45rem;
|
||
height: 0.45rem;
|
||
border-right: 2px solid var(--color-body);
|
||
border-bottom: 2px solid var(--color-body);
|
||
transform: rotate(45deg);
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.docs-nav__chevron[data-open="true"] {
|
||
transform: rotate(-135deg);
|
||
}
|
||
|
||
.docs-nav__sub {
|
||
list-style: none;
|
||
margin: 0.125rem 0 0.35rem;
|
||
padding: 0 0 0 0.5rem;
|
||
border-left: 1px solid var(--color-border-light);
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 0.0625rem;
|
||
}
|
||
|
||
.docs-nav__sub[data-open="true"] {
|
||
display: flex;
|
||
}
|
||
|
||
@media (width >= 992px) {
|
||
.docs-nav__toggle {
|
||
display: none;
|
||
}
|
||
|
||
.docs-nav__sub {
|
||
display: flex !important;
|
||
}
|
||
}
|
||
|
||
/* 移动端目录抽屉 */
|
||
.docs-mobile-nav {
|
||
position: relative;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.docs-mobile-nav__trigger {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.docs-mobile-nav__backdrop {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 40;
|
||
background: rgb(20 20 20 / 0.35);
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.docs-mobile-nav__panel {
|
||
position: fixed;
|
||
z-index: 50;
|
||
left: var(--spacing-lg);
|
||
right: var(--spacing-lg);
|
||
top: var(--docs-sticky-top);
|
||
max-height: min(70vh, 520px);
|
||
overflow-y: auto;
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-canvas-elevated);
|
||
box-shadow: var(--shadow-surface);
|
||
animation: docs-panel-in 0.22s ease;
|
||
}
|
||
|
||
.docs-mobile-nav__panel[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
@keyframes docs-panel-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (width >= 992px) {
|
||
.docs-mobile-nav {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* 正文 + 右侧 TOC */
|
||
.docs-article {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--spacing-3xl);
|
||
min-width: 0;
|
||
align-items: stretch;
|
||
}
|
||
|
||
@media (width >= 1100px) {
|
||
.docs-article {
|
||
grid-template-columns: minmax(0, 1fr) minmax(140px, 168px);
|
||
gap: var(--spacing-2xl);
|
||
}
|
||
}
|
||
|
||
.docs-article__body {
|
||
min-width: 0;
|
||
}
|
||
|
||
.docs-toc-anchor {
|
||
position: sticky;
|
||
top: var(--docs-sticky-top);
|
||
align-self: start;
|
||
min-width: 0;
|
||
}
|
||
|
||
.docs-toc-sticky {
|
||
max-height: calc(100vh - var(--docs-sticky-top) - 0.75rem);
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
/* 右侧 TOC：Nextra 式左边线 + 小字号 */
|
||
.docs-toc {
|
||
padding: 0;
|
||
}
|
||
|
||
.docs-toc__title {
|
||
margin: 0 0 var(--spacing-sm);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--color-body-light);
|
||
}
|
||
|
||
.docs-toc__list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
border-left: 1px solid var(--color-border-light);
|
||
}
|
||
|
||
.docs-toc__link {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
line-height: 1.45;
|
||
color: var(--color-body);
|
||
text-decoration: none;
|
||
padding: 0.25rem 0 0.25rem 0.75rem;
|
||
margin-left: -1px;
|
||
border-left: 2px solid transparent;
|
||
border-radius: 0;
|
||
transition:
|
||
color 0.15s ease,
|
||
border-color 0.15s ease;
|
||
}
|
||
|
||
.docs-toc__link--h3 {
|
||
padding-left: 1.125rem;
|
||
font-size: 0.6875rem;
|
||
color: var(--color-body-light);
|
||
}
|
||
|
||
.docs-toc__link:hover {
|
||
color: var(--color-ink);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.docs-toc__link--active {
|
||
color: var(--color-ink);
|
||
font-weight: 500;
|
||
border-left-color: var(--color-primary);
|
||
background: transparent;
|
||
}
|
||
|
||
/* 正文排版 */
|
||
.docs-prose {
|
||
min-width: 0;
|
||
max-width: 46rem;
|
||
line-height: 1.75;
|
||
color: var(--color-ink-soft);
|
||
}
|
||
|
||
.docs-prose h1 {
|
||
font-family: var(--font-serif);
|
||
font-size: clamp(1.75rem, 4vw, 2.15rem);
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
margin: 0 0 var(--spacing-lg);
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.docs-heading {
|
||
position: relative;
|
||
scroll-margin-top: calc(var(--docs-sticky-top) + 1.5rem);
|
||
}
|
||
|
||
.docs-heading__anchor {
|
||
position: absolute;
|
||
left: -1.25rem;
|
||
opacity: 0;
|
||
color: var(--color-body-light);
|
||
text-decoration: none;
|
||
font-weight: 400;
|
||
transition: opacity 0.15s ease;
|
||
}
|
||
|
||
.docs-heading:hover .docs-heading__anchor {
|
||
opacity: 1;
|
||
}
|
||
|
||
.docs-prose h2 {
|
||
font-size: 1.35rem;
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
margin: var(--spacing-4xl) 0 var(--spacing-md);
|
||
padding-bottom: var(--spacing-sm);
|
||
border-bottom: 1px solid var(--color-hairline);
|
||
}
|
||
|
||
.docs-prose h3 {
|
||
font-size: 1.08rem;
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
margin: var(--spacing-2xl) 0 var(--spacing-sm);
|
||
}
|
||
|
||
.docs-prose p,
|
||
.docs-prose ul,
|
||
.docs-prose ol {
|
||
margin: 0 0 var(--spacing-lg);
|
||
color: var(--color-body);
|
||
}
|
||
|
||
.docs-prose a {
|
||
color: var(--color-accent-ink);
|
||
text-decoration: underline;
|
||
text-underline-offset: 0.2em;
|
||
}
|
||
|
||
.docs-prose a:hover {
|
||
color: var(--color-accent-ink-hover);
|
||
}
|
||
|
||
.docs-prose ul,
|
||
.docs-prose ol {
|
||
padding-left: 1.35rem;
|
||
}
|
||
|
||
.docs-prose li {
|
||
margin: 0.35rem 0;
|
||
}
|
||
|
||
.docs-code {
|
||
position: relative;
|
||
margin: 0 0 var(--spacing-xl);
|
||
}
|
||
|
||
.docs-code__pre {
|
||
font-family: var(--font-mono-caps);
|
||
font-size: 0.85rem;
|
||
line-height: 1.55;
|
||
padding: var(--spacing-xl) var(--spacing-lg);
|
||
border-radius: var(--radius-md);
|
||
overflow-x: auto;
|
||
background: linear-gradient(
|
||
145deg,
|
||
rgb(248 250 252 / 0.98) 0%,
|
||
rgb(236 244 255 / 0.92) 100%
|
||
);
|
||
border: 1px solid var(--color-border-light);
|
||
box-shadow: var(--shadow-field);
|
||
margin: 0;
|
||
}
|
||
|
||
.docs-code__copy {
|
||
position: absolute;
|
||
top: var(--spacing-sm);
|
||
right: var(--spacing-sm);
|
||
z-index: 1;
|
||
padding: 0.25rem 0.65rem;
|
||
font-size: 0.75rem;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--color-border-light);
|
||
background: rgb(255 255 255 / 0.92);
|
||
color: var(--color-body);
|
||
cursor: pointer;
|
||
transition:
|
||
background 0.15s ease,
|
||
color 0.15s ease;
|
||
}
|
||
|
||
.docs-code__copy:hover {
|
||
color: var(--color-accent-ink);
|
||
border-color: var(--color-accent-border);
|
||
}
|
||
|
||
.docs-prose :not(pre) > code {
|
||
font-family: var(--font-mono-caps);
|
||
font-size: 0.88em;
|
||
padding: 0.12em 0.4em;
|
||
border-radius: var(--radius-xs);
|
||
background: var(--color-accent-wash);
|
||
color: var(--color-accent-ink);
|
||
}
|
||
|
||
.docs-prose strong {
|
||
font-weight: 600;
|
||
color: var(--color-ink);
|
||
}
|
||
|
||
.docs-prose table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 0 0 var(--spacing-xl);
|
||
font-size: 0.92rem;
|
||
box-shadow: var(--shadow-field);
|
||
border-radius: var(--radius-md);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.docs-prose th,
|
||
.docs-prose td {
|
||
border: 1px solid var(--color-hairline);
|
||
padding: 0.55rem 0.85rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.docs-prose th {
|
||
background: var(--color-accent-wash);
|
||
color: var(--color-ink);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.docs-prose blockquote {
|
||
margin: 0 0 var(--spacing-lg);
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
border-left: 3px solid var(--color-primary);
|
||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||
background: var(--color-accent-wash);
|
||
color: var(--color-body);
|
||
}
|
||
|
||
.docs-prose blockquote > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.docs-prose hr {
|
||
margin: var(--spacing-3xl) 0;
|
||
border: none;
|
||
border-top: 1px solid var(--color-hairline);
|
||
}
|
||
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|