oneapp_docs/assets/css/extra.css

/* OneApp 文档站点自定义样式 */

/* 全局样式优化 */
.md-content {
  max-width: none;
}

.md-main__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Mermaid 图表样式优化 */
.mermaid {
  text-align: center;
  margin: 20px 0;
  background: transparent;
}

.mermaid svg {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--md-code-bg-color, #f6f8fa);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

[data-md-color-scheme="slate"] .mermaid svg {
  background: var(--md-code-bg-color, #161b22);
}

/* 代码块样式优化 */
.md-typeset pre {
  background: var(--md-code-bg-color);
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset code {
  background: var(--md-code-bg-color);
  border-radius: 3px;
  padding: 0.1em 0.3em;
  font-size: 0.85em;
}

/* 表格样式优化 - GitHub风格 */
.md-typeset table {
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
}

.md-typeset table th,
.md-typeset table td {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 6px 13px;
}

.md-typeset table th {
  background: var(--md-default-fg-color--lightest);
  font-weight: 600;
  text-align: left;
}

.md-typeset table tr:nth-child(2n) {
  background: var(--md-code-bg-color, #f6f8fa);
}

[data-md-color-scheme="slate"] .md-typeset table tr:nth-child(2n) {
  background: var(--md-code-bg-color, #161b22);
}

/* 引用块样式优化 */
.md-typeset blockquote {
  border-left: 4px solid var(--md-primary-fg-color);
  background: var(--md-code-bg-color, #f6f8fa);
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 0 6px 6px 0;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: var(--md-code-bg-color, #161b22);
}

/* 标题样式优化 */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 16px;
  border-bottom: none;
}

.md-typeset h1 {
  font-size: 2em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3em;
}

.md-typeset h2 {
  font-size: 1.5em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.3em;
}

/* 列表样式优化 */
.md-typeset ul,
.md-typeset ol {
  padding-left: 2em;
}

.md-typeset li {
  margin: 0.25em 0;
}

/* 图片样式优化 */
.md-typeset img {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* 内联代码优化 */
.md-typeset p code,
.md-typeset li code,
.md-typeset td code {
  background: var(--md-code-bg-color, rgba(175,184,193,0.2));
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 85%;
  color: var(--md-code-fg-color);
}

[data-md-color-scheme="slate"] .md-typeset p code,
[data-md-color-scheme="slate"] .md-typeset li code,
[data-md-color-scheme="slate"] .md-typeset td code {
  background: var(--md-code-bg-color, rgba(110,118,129,0.4));
}

/* 警告框样式优化 */
.md-typeset .admonition {
  border-radius: 6px;
  border-left: 4px solid;
  margin: 16px 0;
  padding: 0 12px;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .md-main__inner {
    max-width: 100%;
    padding: 0 16px;
  }
  
  .mermaid svg {
    padding: 8px;
  }
  
  .md-typeset table {
    font-size: 14px;
  }
  
  .md-typeset pre {
    padding: 8px;
    overflow-x: auto;
  }
}

/* 导航样式优化 */
.md-nav__title {
  font-weight: 600;
}

.md-nav__item--active > .md-nav__link {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

/* 搜索结果优化 */
.md-search-result__teaser {
  color: var(--md-default-fg-color--light);
  font-size: 0.8rem;
}

/* 目录样式优化 */
.md-nav--secondary .md-nav__title {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

/* 语法高亮优化 */
.md-typeset .highlight pre {
  background: var(--md-code-bg-color) !important;
}

/* 页脚样式 */
.md-footer {
  background: var(--md-footer-bg-color);
}

/* 打印样式 */
@media print {
  .md-header,
  .md-sidebar,
  .md-footer {
    display: none !important;
  }
  
  .md-main__inner {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  .mermaid svg {
    break-inside: avoid;
  }
  
  .md-typeset table {
    break-inside: avoid;
  }
}

/* 深色模式特定优化 */
[data-md-color-scheme="slate"] {
  --md-code-bg-color: #161b22;
  --md-default-fg-color--lightest: #21262d;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--md-default-bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--md-default-fg-color--light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-default-fg-color);
}

/* 修复导航栏和目录滚动问题 */
.md-sidebar {
  height: calc(100vh - 2.4rem);
  overflow: hidden;
}

.md-sidebar__scrollwrap {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--md-default-fg-color--light) transparent;
}

.md-nav {
  max-height: none;
}

.md-nav__list {
  padding-bottom: 2rem;
}

/* 修复右侧目录滚动 */
.md-nav--secondary {
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overflow-x: hidden;
}

.md-nav--secondary .md-nav__list {
  padding-bottom: 3rem;
  max-height: none;
}

/* 移动端滚动优化 */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__list {
    padding-bottom: 2rem;
  }
  
  .md-sidebar {
    height: calc(100vh - 3rem);
  }
}

/* Tab 样式优化 */
.md-typeset .tabbed-set {
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
  overflow: hidden;
}

.md-typeset .tabbed-labels {
  background: var(--md-code-bg-color, #f6f8fa);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels {
  background: var(--md-code-bg-color, #161b22);
}