assets/toc.css

/* === TOC 區塊：捲動與底部空白 === */

:root {
  --toc-bottom-gap: 10px;
}

/* TOC 欄：sticky 定位，高度跟隨視窗 */
.toc-col-wrapper {
  /* 桌機：顯示 */
  display: block;
}

/* 內層容器：只負責間距，overflow 由外層 sticky 容器管理 */
.toc-scroll {
  padding-right: 4px;
  padding-bottom: var(--toc-bottom-gap);
}

/* 再塞一塊看不見的空白，讓最後一個項目可以捲到按鈕上方 */
.toc-scroll::after {
  content: "";
  display: block;
  height: var(--toc-bottom-gap);
}

/* === TOC 連結 / 按鈕 顏色設定 === */

/* 淺色主題 */
.toc-container .toc-link,
.toc-container .toc-link:link,
.toc-container .toc-link:visited,
.toc-container .toc-link:active,
.toc-container .toc-button {
  color: #228be6 !important;
  text-decoration: none !important;
}

/* 淺色主題 hover / active */
.toc-container .toc-link:hover,
.toc-container .toc-button:hover,
.toc-container .toc-button:active,
.toc-container .toc-button:focus,
.toc-container .toc-button[data-active="true"] {
  color: #228be6 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 深色主題 */
[data-mantine-color-scheme="dark"] .toc-container .toc-link,
[data-mantine-color-scheme="dark"] .toc-container .toc-link:link,
[data-mantine-color-scheme="dark"] .toc-container .toc-link:visited,
[data-mantine-color-scheme="dark"] .toc-container .toc-link:active,
[data-mantine-color-scheme="dark"] .toc-container .toc-button {
  color: #b197fc !important;
}

[data-mantine-color-scheme="dark"] .toc-container .toc-link:hover,
[data-mantine-color-scheme="dark"] .toc-container .toc-button:hover,
[data-mantine-color-scheme="dark"] .toc-container .toc-button:active,
[data-mantine-color-scheme="dark"] .toc-container .toc-button:focus,
[data-mantine-color-scheme="dark"] .toc-container .toc-button[data-active="true"] {
  color: #b197fc !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* TOC 內所有超連結都不要底線 */
.toc-scroll a,
.toc-scroll a:link,
.toc-scroll a:visited,
.toc-scroll a:hover,
.toc-scroll a:active {
  text-decoration: none !important;
}

/* 目前閱讀的段落在 TOC 上高亮 */
.toc-item.toc-active .mantine-Button-root {
  font-weight: 600;
  border-left: 3px solid var(--mantine-color-teal-6);
  padding-left: 10px;
  background-color: rgba(56, 178, 172, 0.08);
}

/* 讓目錄按鈕的文字可以換行 */
.toc-button {
  white-space: normal;
  height: auto;
  line-height: 1.4;
}

.toc-button .mantine-Button-label {
  white-space: normal;
  text-align: left;
  overflow: visible;
  text-overflow: clip;
}

/* ===================================================================
   響應式：小螢幕隱藏 TOC
   =================================================================== */

/* < 768px：隱藏 TOC，主內容全寬 */
@media (max-width: 768px) {
  .toc-col-wrapper {
    display: none !important;
  }
}

/* 768px ~ 992px：顯示但縮小 */
@media (min-width: 769px) and (max-width: 992px) {
  .toc-scroll {
    max-height: calc(100vh - 140px);
  }
}

/* ===================================================================
   視窗過小（縮放超過 125%）時也隱藏 TOC
   依據實際視窗寬度，非 CSS zoom
   =================================================================== */
@media (max-width: 900px) {
  .toc-col-wrapper {
    display: none !important;
  }
}