Obsidian Highlighted Folders

Highlighted_Folders.css

.theme-dark {
  /* ! Vault Title*/
  --vtcolor1: rgb(130, 57, 226);
  --vtcolor2: rgb(82, 236, 247);

  /* ! Navigation Action Button*/
  --nsvg: rgb(104, 112, 155);

  /* ! Folder Container*/
  --tfbwidth: 2px;
  --tfcolor: white;
  --fcol-in: white;
  /* --fcol-in: var(--blue4); */

  /* ! Iterative Folder Colors*/
  --fgrad1: rgb(12, 67, 117);
  --fgrad2: rgb(27, 68, 156);
  --fgrad3: rgb(33, 35, 150);
  --fgrad4: rgb(98, 59, 172);
  --fgrad5: rgba(135, 36, 173, 0.836);
  --fgrad6: rgba(133, 18, 117, 0.849);
  --fgrad7: rgb(105, 17, 105);
  --fgrad8: rgb(83, 16, 61);
}

/* ! A1.5.1 Bubbled Container*/
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder.is-collapsed
  > .nav-folder-title {
  border-radius: 10px;
  margin-left: 0px;
  margin-right: 5px !important;
}

/* .nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder
  > .nav-folder-title
  + .nav-folder-children {
  border-width: var(--tfbwidth);
  border-left-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
} */

/* ! A1.5.2 Top Level Folders*/
.nav-folder.mod-root > .nav-folder-children > .nav-folder > .nav-folder-title {
  color: var(--tfcolor);
  padding-left: 3px;
  margin-top: 7px; /* BUBBLE between top level sections */
  border-radius: 15px 15px 0px 0px;
  margin-left: 0px;
}

/* .nav-folder-title {
  margin-left: 0px;
} */

/* ! A1.5.4 Iterative Colored Folders*/
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 2)
  > .nav-folder-title {
  background-color: var(--fgrad1);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 2)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad1);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 3)
  > .nav-folder-title {
  background-color: var(--fgrad2);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 3)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad2);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 4)
  > .nav-folder-title {
  background-color: var(--fgrad3);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 4)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad3);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 5)
  > .nav-folder-title {
  background-color: var(--fgrad4);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 5)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad4);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 6)
  > .nav-folder-title {
  background-color: var(--fgrad5);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 6)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad5);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 7)
  > .nav-folder-title {
  background-color: var(--fgrad6);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 7)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad6);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n)
  > .nav-folder-title {
  background-color: var(--fgrad7);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad7);
}

.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 1)
  > .nav-folder-title {
  background-color: var(--fgrad8);
}
.nav-folder.mod-root
  > .nav-folder-children
  > .nav-folder:nth-child(8n + 1)
  > .nav-folder-title
  + .nav-folder-children {
  border-color: var(--fgrad8);
}