dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-06 21:49:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

rainbow indentation lines + block dragger bg fix

Browse Source
This commit is contained in:
dragonwocky 2021-10-17 22:17:33 +11:00
parent f9b95ef848
commit 69c3034a8b
3 changed files with 91 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
repo/indentation-lines/client.css
View File

@ -4,6 +4,59 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
[data-block-id],
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
[data-block-id] {
background: var(--theme--bg) !important;
}
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable,
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable {
left: -42px !important;
background: transparent !important;
}
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus,
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus {
border-radius: 3px;
width: 18px !important;
padding: 0 1px !important;
background: var(--theme--bg) !important;
}
.notion-frame
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus:hover,
.notion-peek-renderer
> div
> [style*='position: absolute; top: 0px; left: 0px;']
[style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+ .notion-focusable
> .plus:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.notion-page-content .notion-bulleted_list-block > div > div:last-child,
.notion-page-content .notion-numbered_list-block > div > div:last-child,
.notion-page-content .notion-to_do-block > div > div:last-child,

45
repo/indentation-lines/client.mjs
View File

@ -8,7 +8,8 @@
export default async function ({ web }, db) {
let style = 'solid',
opacity = 1;
opacity = 1,
rainbow = false;
switch (await db.get(['style'])) {
case 'dashed':
style = 'dashed';
@ -19,25 +20,53 @@ export default async function ({ web }, db) {
case 'soft':
opacity = 0.25;
break;
case 'rainbow':
opacity = 0.7;
rainbow = true;
break;
}
let css = '';
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;
document.head.append(web.html`<style>
css += `
.notion-page-content .notion-${listType}-block > div > div:last-child::before {
border-left: 1px ${style};
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]});
}`;
}
</style>`);
}
}
if (db.get(['table_of_contents'])) {
document.head.append(web.html`<style>
css += `
.notion-page-content .notion-table_of_contents-block > div > div > a > div
> div:not([style*='margin-left: 0px']) > div::before {
border-left: 1px ${style};
> div:not([style*='margin-left: 0px']) > div::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-table_of_contents-block `.repeat(i + 1)}
> div > div > a > div > div:not([style*='margin-left: 0px']) > div::before {
--indentation_lines--color: var(--theme--text_${colors[i]});
}`;
}
</style>`);
}
}
document.head.append(web.html`<style>${css}</style>`);
}

2
repo/indentation-lines/mod.json
View File

@ -23,7 +23,7 @@
"type": "select",
"key": "style",
"label": "style",
"values": ["solid", "dashed", "dotted", "soft"]
"values": ["solid", "dashed", "dotted", "soft", "rainbow"]
},
{
"type": "toggle",