indentation lines: fix #51, full support for toggle headers

notion-enhancer · Mar 10, 2022 · e1f10e7 · e1f10e7
1 parent 3777e6f
commit e1f10e7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/indentation-lines/client.css b/indentation-lines/client.css
@@ -9,9 +9,7 @@
 .notion-page-content .notion-numbered_list-block > div > div:last-child,
 .notion-page-content .notion-to_do-block > div > div:last-child,
 .notion-page-content .notion-toggle-block > div > div:last-child,
-.notion-page-content .notion-selectable.notion-sub_header-block > div > div > div:last-child,
-.notion-page-content .notion-selectable.notion-sub_sub_header-block > div > div > div:last-child,
-.notion-page-content .notion-selectable.notion-sub_sub_sub_header-block > div > div > div:last-child,
+.notion-page-content [class$='header-block'] > div > div > div:last-child,
 .notion-page-content .notion-table_of_contents-block > div > div > a > div > div {
   position: relative;
 }
@@ -20,16 +18,17 @@
 .notion-page-content .notion-numbered_list-block > div > div:last-child::before,
 .notion-page-content .notion-to_do-block > div > div:last-child::before,
 .notion-page-content .notion-toggle-block > div > div:last-child::before,
-.notion-page-content .notion-selectable.notion-sub_header-block > div > div > div:last-child::before,
-.notion-page-content .notion-selectable.notion-sub_sub_header-block > div > div > div:last-child::before,
-.notion-page-content .notion-selectable.notion-sub_sub_sub_header-block > div > div > div:last-child::before,
+.notion-page-content [class$='header-block'] > div > div > div:last-child::before,
 .notion-page-content .pseudoSelection > div > div:last-child::before {
   content: '';
   position: absolute;
   height: calc(100% - 2em);
   top: 2em;
   margin-inline-start: -14.48px;
 }
+.notion-page-content [class$='header-block'] > div > div > div:last-child::before {
+  margin-inline-start: -15.48px;
+}
 
 .notion-page-content
   .notion-table_of_contents-block
@@ -100,4 +99,3 @@
   > .plus:hover {
   background: var(--theme--ui_interactive-hover) !important;
 }
-
diff --git a/indentation-lines/client.mjs b/indentation-lines/client.mjs
@@ -48,22 +48,26 @@ export default async function ({ web }, db) {
       }
     }
   }
+
   if (await db.get(['toggle_header'])) {
     css += `
-      .notion-page-content .notion-selectable.notion-sub_sub_header-block > div > div > div:last-child::before {
-        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
-        opacity: ${opacity};
-      }
-      .notion-page-content .notion-selectable.notion-sub_header-block > div > div > div:last-child::before {
-        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
-        opacity: ${opacity};
-      }
-      .notion-page-content .notion-selectable.notion-sub_sub_sub_header-block > div > div > div:last-child::before {
+      .notion-page-content [class$=header-block] > div > div > div:last-child::before {
         border-left: 1px ${style} var(--indentation_lines--color, currentColor);
         opacity: ${opacity};
       }`;
+
+    if (rainbow) {
+      for (let i = 0; i < colors.length; i++) {
+        css += `
+        .notion-page-content ${`[class$=header-block] `.repeat(i + 1)}
+          > div > div > div:last-child::before{
+          --indentation_lines--color: var(--theme--text_${colors[i]});
+        }`;
+      }
+    }
   }
-  if (db.get(['table_of_contents'])) {
+
+  if (await db.get(['table_of_contents'])) {
     css += `
       .notion-page-content .notion-table_of_contents-block > div > div > a > div
         > div:not([style*='margin-left: 0px']) > div::before {
@@ -84,7 +88,7 @@ export default async function ({ web }, db) {
     }
   }
 
-  if (db.get(['outliner'])) {
+  if (await db.get(['outliner'])) {
     css += `
       .outliner--header:not([style='--outliner--indent:0px;'])::before {
         border-left: 1px ${style} var(--indentation_lines--color, currentColor);