halo-theme/src/styles/post-toc.scss

@import "variables";

.post-toc-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 0;
  height: 0;
  overflow: visible;
  transform: translate(-260px, 100px);
}

.post-toc {
  position: relative;
  width: 200px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--foreground);
  opacity: 0.7;
  transition: opacity 0.2s ease;

  // 隐藏滚动条但保持可滚动
  scrollbar-width: thin;
  scrollbar-color: var(--foreground) transparent;

  &:hover {
    opacity: 1;
  }

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--foreground) 30%, transparent);
    border-radius: 2px;
  }

  // 移动端和平板隐藏
  @media (max-width: 1200px) {
    display: none;
  }
}

.toc-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 10px;
  position: relative;

  // 左侧边框线（不连接顶部）
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: color-mix(in srgb, var(--foreground) 20%, transparent);
  }
}

.toc-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 2px 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-radius: 3px;

  &:hover {
    background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
  }

  // 折叠箭头
  &__toggle {
    flex-shrink: 0;
    width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground);
    opacity: 0.5;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
    user-select: none;

    &--expanded {
      transform: rotate(0deg);
    }

    &--collapsed {
      transform: rotate(-90deg);
    }

    &--empty {
      visibility: hidden;
    }
  }

  // 标签图标 <>
  &__icon {
    flex-shrink: 0;
    color: var(--red);
    margin-right: 4px;
    opacity: 0.7;
  }

  // 标签名 (h1, h2, div, etc.)
  &__tag {
    flex-shrink: 0;
    color: var(--blue);
    margin-right: 6px;
  }

  // 标题文字
  &__title {
    color: var(--foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
    transition: color 0.15s ease, opacity 0.15s ease;
  }

  // 左侧激活指示线
  &::before {
    content: '' !important;
    position: absolute;
    left: -10px !important;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background-color: transparent;
    border-radius: 1px;
  }

  // 活跃状态
  &--active {
    background-color: color-mix(in srgb, var(--brightBlue) 15%, transparent);

    .toc-item__title {
      color: var(--brightBlue);
      opacity: 1;
    }

    .toc-item__tag {
      color: var(--brightBlue);
    }

    &::before {
      background-color: var(--brightBlue);
    }
  }
}

// 子级列表
.toc-children {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 16px;

  &--collapsed {
    display: none;
  }
}

// 目录头部
.toc-header {
  display: flex;
  align-items: center;
  padding: 4px 0 8px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
  color: var(--foreground);
  opacity: 0.6;
  font-size: 0.75rem;

  &__icon {
    margin-right: 6px;
    color: var(--red);
  }

  &__title {
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}