/* ============================================================================= * HyperAI Relay 文档站 —— 左侧 sidebar + 右侧 markdown 布局 * 复用 app.css 的 CSS 变量(--bg / --fg / --brand / --border ...) * 支持暗色(默认)/ 浅色切换,通过 生效 * ========================================================================= */ /* main 容器放大到 1240px,给 sidebar + content 足够的横向空间 */ .main:has(.doc-layout) { max-width: 1240px; padding: 24px 24px 80px; } .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } /* ---------- 左侧 sidebar ---------- */ .doc-sidebar { position: sticky; top: 72px; /* 顶部 topnav 高度 + 间距 */ max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 8px; border-right: 1px solid var(--border); } .doc-sidebar-inner { padding-right: 16px; padding-bottom: 24px; } .doc-sidebar-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); margin: 0 0 12px; } .doc-sidebar-search { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--fg-muted); font-size: 0.85rem; margin-bottom: 20px; } .doc-sidebar-search:disabled { cursor: not-allowed; opacity: 0.6; } .doc-group { margin-bottom: 22px; } .doc-group-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); margin: 0 0 10px; font-weight: 600; } .doc-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); } .doc-list-empty { font-size: 0.8rem; color: var(--fg-dim); padding-left: 12px; font-style: italic; margin: 0; } .doc-item { margin: 0; padding: 0; } .doc-item a { display: block; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-muted); font-size: 0.9rem; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .doc-item a:hover { color: var(--fg); text-decoration: none; background: var(--hover-tint); } .doc-item.active a { color: var(--brand); border-left-color: var(--brand); font-weight: 600; background: var(--hover-tint); } /* ---------- 右侧内容 ---------- */ .doc-main { min-width: 0; /* 防止 pre 溢出撑破 grid */ } .doc-breadcrumb { font-size: 0.82rem; color: var(--fg-dim); margin-bottom: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .doc-breadcrumb a { color: var(--fg-muted); } .doc-breadcrumb a:hover { color: var(--brand); } .doc-breadcrumb .sep { color: var(--fg-dim); } .doc-breadcrumb-group { color: var(--fg-muted); } /* doc-article 重写:不复用 .doc-content 的 760px + 40px padding, * 因为在 grid 里我们希望它自适应右侧可用宽度 */ .doc-article { max-width: 800px; margin: 0; padding: 0; } .doc-article h1 { font-size: 2rem; margin-top: 0; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .doc-article h2 { font-size: 1.4rem; margin: 36px 0 16px; } .doc-article h3 { font-size: 1.1rem; margin: 24px 0 12px; } .doc-article p, .doc-article li { color: var(--fg); line-height: 1.75; } .doc-article ul, .doc-article ol { padding-left: 24px; margin-bottom: 16px; } .doc-article li { margin-bottom: 6px; } .doc-article a { color: var(--brand); } .doc-article code { background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--brand); font-size: 0.85em; border: 1px solid var(--border); font-family: var(--mono); } .doc-article pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; margin: 16px 0; } .doc-article pre code { background: none; border: 0; padding: 0; color: var(--fg); } .doc-article table { margin: 16px 0; border-collapse: collapse; width: 100%; } .doc-article th, .doc-article td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; } .doc-article th { background: var(--bg-elev); font-weight: 600; } .doc-article hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } .doc-article blockquote { border-left: 3px solid var(--brand); padding: 8px 16px; margin: 16px 0; color: var(--fg-muted); background: var(--bg-elev); } /* ---------- 上一篇 / 下一篇 分页 ---------- */ .doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); } .doc-pager a { display: flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; background: var(--bg-elev); transition: border-color 0.15s, background 0.15s; } .doc-pager a:hover { border-color: var(--brand); text-decoration: none; } .pager-prev { text-align: left; } .pager-next { text-align: right; grid-column: 2; } .pager-label { font-size: 0.75rem; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; } .pager-title { font-size: 0.95rem; color: var(--fg); font-weight: 600; margin-top: 4px; } /* ---------- 移动端抽屉 ---------- */ .doc-sidebar-toggle { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 20; padding: 10px 16px; background: var(--brand); color: #fff; border: 0; border-radius: 999px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); cursor: pointer; } .doc-sidebar-toggle:hover { background: var(--brand-hover); } @media (max-width: 900px) { .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } .doc-sidebar { position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; height: 100vh; max-height: 100vh; background: var(--bg); border-right: 1px solid var(--border); padding: 64px 0 24px 20px; transform: translateX(-100%); transition: transform 0.25s ease-out; z-index: 15; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3); } .doc-sidebar.open { transform: translateX(0); } .doc-sidebar-toggle { display: block; } .doc-pager { grid-template-columns: 1fr; } .pager-next { grid-column: 1; } } @media (max-width: 640px) { .doc-article h1 { font-size: 1.5rem; } .doc-article h2 { font-size: 1.2rem; } .main:has(.doc-layout) { padding: 16px 16px 60px; } }