gatsby-plugin-tocbot/src/styles/tocbot.css

A gatsby plugin for adding tocbot, display table of contents

:root {
  --toc-width: 200px;
  --toc-cur-highlight-color: black;
  --toc-text-color: inherit;
  --toc-text-hover-color: #666;
}

.toc {
  overflow-y: auto;
}

.toc > .toc-list {
  overflow: hidden;
  position: relative;
}

.toc > .toc-list li {
  list-style: none;
}

.toc-list {
  margin: 0;
  padding-left: 10px;
}

a.toc-link {
  color: var(--toc-text-color);
  height: 100%;
}

a.toc-link:hover {
  color: var(--toc-text-hover-color);
}

.is-collapsible {
  max-height: 1000px;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

.is-collapsed {
  max-height: 0;
}

.tocbot.is-position-fixed {
  position: fixed;
  top: 100px;
  right: 1em;
  z-index: 100;
}

.is-active-link {
  font-weight: 700;
}

.toc-link::before {
  background-color: #eee;
  content: ' ';
  display: inline-block;
  height: inherit;
  left: 0;
  margin-top: -1px;
  position: absolute;
  width: 2px;
}

.tocbot ol:not(.toc-list) {
  list-style: none;
  padding-left: 1em;
}

.is-active-link::before {
  background-color: var(--toc-cur-highlight-color);
}