Tabe of content module's lists broken?

i’m trying to use the table of content modules but…

…They seem to have trouble when making lists ?
What happens is that the lists (numbers or bullet) dont increment properly, and it messes up the counting.
I’m not sure if the bug is induced by the CSS or if theres another problem.

I searched for posts about this but found nothing; i also tried to debug it for a while but i’m stumped.

important note : it works properly when i mess with the settings and adjust the minimal or maximal header depth: it only breaks when the number of intricated indents is more than two. The thing is, this works perfectly when i’m writing lists by hand. Sooooo… stumped.

here are screnshots from the problem and from the relevant CSS.

Broken list:

Working (but incomplete) list:

working (but typing by hand) list:

and here is the lists CSS:

ul,
ul ul,
ol ul,
ul ul ul,
ol ul ul {
  list-style: none;
color: var(--text-normal);
}
li > p {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}
ul li::marker {
     color: blue;
 }

ul li:not(.task-list-item)::before {
  content: '•';
  color: var(--text-sub-accent); 
  display: inline-block;
  width: 1em;
  margin-left: -1.15em;
  padding: 0;
  font-weight: bold;
  text-shadow: 0 0 0.5em var(--accent-2);
}
ul ul li:not(.task-list-item)::before {
  content: '•';
}
ul ul ul li:not(.task-list-item)::before {
  content: '•';
}

/* numbered lists */
ol {
  list-style: none;
  counter-reset: li;
}
ol > li {
  counter-increment: li;
}
ol > li:not(.task-list-item)::before,
ul ol > li:not(.task-list-item)::before,
ul ul ol > li:not(.task-list-item)::before,
ul ul ul ol > li:not(.task-list-item)::before {
  content: '.' counter(li);
  color: var(--text-accent);
  font-weight: normal;
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
  text-align: right;
  direction: rtl;
  overflow: visible;
  word-break: keep-all;
  white-space: nowrap;
}

/* rule line when there are checkboxes*/
ul .task-list-item ul::before {
  left: 0.15em !important;
}```

Edit:

i just found out putting the table of content in a header drastically modifies it’s layout, and then stumbled on this weird interraction:

So when i put the TOC in a header 4 it works but only up to header 5 … ??
I’m lost here.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.