page-toc.css

 1.pagetoc {
 2  box-sizing: border-box;
 3  position: sticky;
 4  top: 50px;
 5  display: flex;
 6  flex-direction: column;
 7  gap: 4px;
 8  padding: 28px 0 120px 0;
 9  max-width: 230px;
10  min-width: 180px;
11  width: 100%;
12  max-height: calc(100svh - 50px);
13  overflow-x: hidden;
14}
15.pagetoc > :last-child {
16  margin-bottom: 16px;
17}
18.pagetoc a {
19  width: fit-content;
20  font-size: 1.4rem;
21  color: var(--fg) !important;
22  display: inline-block;
23  padding: 2px 0;
24  text-align: left;
25  text-decoration: underline;
26  text-decoration-color: var(--toc-link-underline);
27}
28.pagetoc a:hover {
29  text-decoration-color: var(--toc-link-underline-hover);
30}
31.pagetoc a.active {
32  background-color: var(--sidebar-active-bg);
33  color: var(--sidebar-active) !important;
34  text-decoration-color: hsl(219, 93%, 42%, 0.1);
35}
36.pagetoc a.active:hover {
37  text-decoration-color: hsl(219, 93%, 42%, 0.8);
38}
39.pagetoc .active {
40  background: var(--sidebar-bg);
41  color: var(--sidebar-fg);
42}
43.pagetoc .pagetoc-H1 {
44  display: none;
45}
46.pagetoc .pagetoc-H3 {
47  margin-left: 2ch;
48}
49.pagetoc .pagetoc-H4 {
50  margin-left: 4ch;
51}
52.pagetoc .pagetoc-H5 {
53  display: none;
54}
55.pagetoc .pagetoc-H6 {
56  display: none;
57}
58.toc-title {
59  margin: 0;
60  margin-bottom: 6px;
61  font-size: 1.4rem;
62  color: var(--full-contrast);
63}
64
65.toc-container {
66  visibility: hidden;
67}
68
69.toc-container.has-toc {
70  visibility: visible;
71}
72
73.toc-container.no-toc {
74  display: none;
75}
76
77@media only screen and (max-width: 1200px) {
78  .toc-container {
79    display: none;
80  }
81}