diff --git a/src/core/client.mjs b/src/core/client.mjs
index 69fd3d9..8da34ff 100644
--- a/src/core/client.mjs
+++ b/src/core/client.mjs
@@ -37,9 +37,11 @@ const shouldLoadThemeOverrides = async (api, db) => {
const { html } = api,
customStyles = (await db.get("customStyles"))?.content;
if (!customStyles) return;
- return document.head.append(html``);
+ const $customStyles = html``;
+ return document.head.append($customStyles);
};
const insertMenu = async (api, db) => {
diff --git a/src/extensions/indent-guides/client.css b/src/extensions/indent-guides/client.css
index d3fe8ca..74c1165 100644
--- a/src/extensions/indent-guides/client.css
+++ b/src/extensions/indent-guides/client.css
@@ -8,6 +8,7 @@
body {
--guide--style: solid;
--guide--color: var(--theme--fg-border);
+ --guide--opacity: 0;
}
/* add indent guides to nested blocks */
@@ -28,6 +29,7 @@ body {
top: var(--guide--offset);
margin-inline-start: var(--guide--indent);
border-left: 1px var(--guide--style) var(--guide--color);
+ opacity: var(--guide--opacity);
}
}
@@ -59,6 +61,7 @@ body {
height: 100%;
margin-inline-start: var(--guide--indent);
border-left: 1px var(--guide--style) var(--guide--color);
+ opacity: var(--guide--opacity);
}
}
diff --git a/src/extensions/indent-guides/client.mjs b/src/extensions/indent-guides/client.mjs
index 762c2b6..e5c4df0 100644
--- a/src/extensions/indent-guides/client.mjs
+++ b/src/extensions/indent-guides/client.mjs
@@ -6,63 +6,70 @@
*/
export default async function (api, db) {
- const lineType = await db.get("lineType"),
+ const { html } = api,
+ guideStyle = await db.get("guideStyle"),
rainbowMode = await db.get("rainbowMode");
- document.body.style.setProperty("--guide--style", lineType.toLowerCase());
+ document.body.style.setProperty("--guide--style", guideStyle.toLowerCase());
- // switch (await db.get(["style"])) {
- // case "dashed":
- // style = "dashed";
- // break;
- // case "dotted":
- // style = "dotted";
- // break;
- // case "soft":
- // opacity = 0.25;
- // break;
- // case "rainbow":
- // opacity = 0.7;
- // rainbow = true;
- // break;
- // }
+ const nestedTargets = [],
+ outlineTargets = [];
+ for (const [listType, selectors] of [
+ ["to-doList", [".notion-to_do-block"]],
+ ["bulletedList", [".notion-bulleted_list-block"]],
+ ["numberedList", [".notion-numbered_list-block"]],
+ ["toggleList", [".notion-toggle-block"]],
+ [
+ "toggleHeadings",
+ [
+ ".notion-header-block",
+ ".notion-sub_header-block",
+ ".notion-sub_sub_header-block",
+ ],
+ ],
+ ]) {
+ if (await db.get(listType)) nestedTargets.push(...selectors);
+ }
+ if (await db.get("tableOfContents"))
+ outlineTargets.push(".notion-table_of_contents-block");
+ if (await db.get("outliner"))
+ outlineTargets.push(".notion-enhancer--outliner-heading");
- // const colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow'];
- // colors.push(...colors, ...colors, ...colors, 'gray');
-
- // for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) {
- // if (!(await db.get([listType]))) continue;
- // css += `
- // .notion-page-content .notion-${listType}-block > 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 ${`.notion-${listType}-block `.repeat(i + 1)}
- // > div > div:last-child::before {
- // --indentation_lines--color: var(--theme--text_${colors[i]});
- // }`;
- // }
- // }
- // }
-
- // if (await db.get(['toggle_header'])) {
- // css += `
- // .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]});
- // }`;
- // }
- // }
- // }
+ let css = `${[...nestedTargets, ...outlineTargets].join(",")} {
+ --guide--opacity: 1;
+ }`;
+ if (rainbowMode) {
+ const selector = `:is(${nestedTargets.join(",")})`,
+ opacity = `--guide--opacity: 0.5;`,
+ colours = [
+ "red",
+ "pink",
+ "purple",
+ "blue",
+ "green",
+ "yellow",
+ "orange",
+ "brown",
+ ];
+ colours.push(...colours, ...colours, ...colours, "gray");
+ for (let i = 0; i < colours.length; i++) {
+ css += `${(selector + " ").repeat(i + 1)} {
+ --guide--color: var(--theme--fg-${colours[i]});
+ ${opacity}
+ }`;
+ }
+ css += `
+ .notion-table_of_contents-block [contenteditable="false"] a
+ > div[style*="margin-left: 24px"],
+ .notion-enhancer--outliner-heading.pl-\\[36px\\] {
+ --guide--color: var(--theme--fg-${colours[0]});
+ ${opacity}
+ }
+ .notion-table_of_contents-block [contenteditable="false"] a
+ > div[style*="margin-left: 48px"],
+ .notion-enhancer--outliner-heading.pl-\\[54px\\] {
+ --guide--color: var(--theme--fg-${colours[1]});
+ ${opacity}
+ }`;
+ }
+ document.head.append(html``);
}
diff --git a/src/extensions/indent-guides/mod.json b/src/extensions/indent-guides/mod.json
index 6d43688..0f5d1cc 100644
--- a/src/extensions/indent-guides/mod.json
+++ b/src/extensions/indent-guides/mod.json
@@ -20,8 +20,8 @@
"options": [
{
"type": "select",
- "key": "lineType",
- "description": "The line style to use for indent guides.",
+ "key": "guideStyle",
+ "description": "The type of line to use for indent guides.",
"values": ["Solid", "Dashed", "Dotted"]
},
{