diff --git a/mods/admiraldus-global-linking-blocks/app.css b/mods/admiraldus-global-linking-blocks/app.css
new file mode 100644
index 0000000..6fd9857
--- /dev/null
+++ b/mods/admiraldus-global-linking-blocks/app.css
@@ -0,0 +1,101 @@
+/*
+ * global linking blocks
+ * (c) 2020 admiraldus (https://github.com/admiraldus)
+ * under the MIT license
+ */
+
+/* ========== THE PAGE BUTTON ========== */
+.admiraldus-glb-page-button
+{
+ display: inline-flex;
+ align-items: center;
+ flex-shrink: 0;
+ border-radius: 3px;
+ height: 28px;
+ min-width: 0px;
+ padding-right: 8px;
+ padding-left: 6px;
+ white-space: nowrap;
+ font-size: 14px;
+ line-height: 1.2;
+ color: var(--theme--text);
+ cursor: pointer;
+ transition: background 20ms ease-in 0s;
+ user-select: none;
+}
+
+.admiraldus-glb-page-button:hover
+{
+ background: var(--theme--interactive_hover);
+ box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+
+.admiraldus-glb-page-button > svg
+{
+ backface-visibility: hidden;
+ display: block;
+ flex-shrink: 0;
+ margin-right: 6px;
+ height: 14px;
+ width: 14px;
+ fill: var(--theme--text);
+}
+
+.admiraldus-glb-page-button > span {
+ opacity: 1;
+ transition: opacity .4s ease;
+}
+
+.admiraldus-glb-span-hide {
+ position: absolute;
+ top: -9999px;
+ opacity: 0 !important;
+}
+
+/* ========== THE BLOCK BUTTON ========== */
+.admiraldus-glb-block-button {
+ display: flex;
+ align-items: center;
+ min-height: 28px;
+ width: 100%;
+ font-size: var(--theme--font_label-size);
+ line-height: 120%;
+ cursor: pointer;
+ transition: background 20ms ease-in 0s;
+ user-select: none;
+}
+
+.admiraldus-glb-block-button:hover
+{
+ background: var(--theme--interactive_hover);
+ box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+
+.admiraldus-glb-block-button > svg {
+ backface-visibility: hidden;
+ display: flex;
+ display: block;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ margin-left: 14px;
+ height: 17px;
+ width: 17px;
+ fill: inherit;
+}
+
+.admiraldus-glb-block-button > span {
+ margin-right: 14px;
+ margin-left: 8px;
+ min-width: 0px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1 1 auto;
+}
+
+/* ========== THE MENU ========== */
+.--on-hover div[role="button"]:not(.admiraldus-glb-block-button) {
+ background: transparent !important;
+ box-shadow: none !important;
+}
diff --git a/mods/admiraldus-global-linking-blocks/helper.js b/mods/admiraldus-global-linking-blocks/helper.js
new file mode 100644
index 0000000..02b6c61
--- /dev/null
+++ b/mods/admiraldus-global-linking-blocks/helper.js
@@ -0,0 +1,82 @@
+/*
+ * helper.js from admiraldus
+ * (c) 2020 admiraldus (https://github.com/admiraldus)
+ * use for your own modules but you have to attribute to me.
+ * under the MIT license
+ */
+
+'use strict';
+
+const PATH = require('path');
+const FS = require('fs-extra');
+
+var x$ = {
+ sel: function(els, mode = false, base = null) {
+ base = base === null ? document : base;
+ return mode ? base.querySelectorAll(els) : base.querySelector(els);
+ },
+
+ cls: {
+ r: function(els, cls, mode = false, base = null) {
+ base = base === null ? document : base;
+ mode ? x$.sel(els, true).forEach((el) =>
+ el.classList.remove(cls)) : els.classList.remove(cls);
+ },
+
+ a: function(els, cls, mode = false, base = null) {
+ base = base === null ? document : base;
+ mode ? x$.sel(els, true).forEach((el) =>
+ el.classList.add(cls)) : els.classList.add(cls);
+ },
+
+ c: function(els, cls, mode = false, base = null) {
+ base = base === null ? document : base;
+ return mode ? x$.sel(els, true).forEach((el) =>
+ el.classList.contains(cls)) : els.classList.contains(cls);
+ },
+ },
+
+ svg: function(path) {
+ return FS.readFile(PATH.resolve(__dirname + path));
+ },
+
+ on: function(base, event, fn, flag = false) {
+ base.addEventListener(event, fn, flag);
+ },
+
+ sim: function(events, els) {
+ events.forEach((event) => els.dispatchEvent(
+ new MouseEvent(event, {
+ view: window,
+ bubbles: true,
+ cancelable: true,
+ buttons: 1,
+ })));
+ },
+
+ obs: function(fn, els, config) {
+ const observer = new MutationObserver(fn);
+ observer.observe(els, config);
+ },
+
+ clp: function(mode = true, value) {
+ switch (mode) {
+ case false:
+ navigator.clipboard.writeText(value);
+ break;
+ case true:
+ return navigator.clipboard.readText();
+ break;
+ }
+ },
+
+ el: function(html) {
+ const temp = document.createElement('template');
+ temp.innerHTML = html.trim();
+ return temp.content.firstElementChild;
+ },
+};
+
+module.exports = {
+ x$,
+};
diff --git a/mods/admiraldus-global-linking-blocks/icons/link.svg b/mods/admiraldus-global-linking-blocks/icons/link.svg
new file mode 100644
index 0000000..b88b775
--- /dev/null
+++ b/mods/admiraldus-global-linking-blocks/icons/link.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+ <g>
+ <path d="M256,0C114.516,0,0,114.497,0,256c0,141.483,114.497,256,256,256c141.484,0,256-114.497,256-256
+ C512,114.517,397.503,0,256,0z M179.672,43.154c-18.976,24.15-32.411,54.72-41.322,84.252
+ c-14.826-9.037-28.655-19.814-41.172-32.171C120.97,71.723,149.058,54.11,179.672,43.154z M30,256
+ c0-50.725,16.604-98.895,47.232-138.315c16.079,15.678,34.043,29.063,53.365,39.92C123.981,188.356,120.5,221.677,120.5,256
+ s3.481,67.644,10.097,98.395c-19.322,10.857-37.286,24.242-53.365,39.92C46.604,354.895,30,306.725,30,256z M97.177,416.765
+ c12.517-12.357,26.346-23.134,41.172-32.171c8.908,29.518,22.341,60.094,41.322,84.252
+ C149.057,457.891,120.969,440.278,97.177,416.765z M241,479.476c-39.328-13.125-64.166-68.866-75.544-108.983
+ c23.765-10.401,49.312-16.72,75.544-18.472V479.476z M241,256v65.957c-28.585,1.685-56.481,8.155-82.582,18.927
+ c-5.195-26.628-7.918-55.305-7.918-84.884s2.723-58.256,7.918-84.884c26.1,10.772,53.996,17.242,82.582,18.927V256z M241,159.979
+ c-26.232-1.753-51.779-8.071-75.544-18.472c11.347-40.006,36.17-95.843,75.544-108.983V159.979z M414.823,95.235
+ c-12.517,12.357-26.346,23.134-41.172,32.171c-8.908-29.517-22.341-60.094-41.322-84.252
+ C362.943,54.109,391.031,71.722,414.823,95.235z M271,32.524c39.328,13.125,64.166,68.866,75.544,108.983
+ c-23.765,10.401-49.312,16.72-75.544,18.472V32.524z M271,256v-65.957c28.585-1.685,56.481-8.155,82.582-18.927
+ c5.195,26.628,7.918,55.305,7.918,84.884s-2.723,58.256-7.918,84.884c-26.1-10.772-53.996-17.242-82.582-18.927V256z M271,479.476
+ V352.021c26.232,1.753,51.779,8.071,75.544,18.472C335.197,410.499,310.374,466.336,271,479.476z M332.329,468.846
+ c18.974-24.15,32.41-54.72,41.322-84.252c14.826,9.037,28.656,19.814,41.172,32.171
+ C391.031,440.278,362.943,457.891,332.329,468.846z M434.769,394.314c-16.079-15.678-34.043-29.063-53.366-39.92
+ c6.616-30.75,10.097-64.071,10.097-98.395c0-34.324-3.481-67.644-10.097-98.395c19.322-10.856,37.286-24.241,53.366-39.92
+ C465.396,157.105,482,205.275,482,256C482,306.725,465.396,354.895,434.769,394.314z"/>
+ </g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/mods/admiraldus-global-linking-blocks/mod.js b/mods/admiraldus-global-linking-blocks/mod.js
new file mode 100644
index 0000000..40d57b1
--- /dev/null
+++ b/mods/admiraldus-global-linking-blocks/mod.js
@@ -0,0 +1,213 @@
+/*
+ * global linking blocks
+ * (c) 2020 admiraldus (https://github.com/admiraldus)
+ * under the MIT license
+ */
+
+'use strict';
+
+const {x$} = require('./helper.js');
+
+module.exports = {
+ id: '74856af4-6970-455d-bd86-0a385a402dd1',
+ name: 'global linking blocks',
+ tags: ['extension'],
+ desc: 'easily copy the global link of the page or the desired block.',
+ version: '0.1.0',
+ author: {
+ name: 'admiraldus',
+ link: 'https://github.com/admiraldus',
+ avatar: 'https://raw.githubusercontent.com/admiraldus/admiraldus/main/module.gif',
+ },
+ hacks: {
+ 'renderer/preload.js'(store, __exports) {
+ document.addEventListener('readystatechange', () => {
+ if (document.readyState !== 'complete') return false;
+
+ /**
+ * Prevent selectors from failing.
+ *
+ * @return {Function} Returns "wait()" until "main()" returns.
+ */
+ const wait = !function wait() {
+ const els = [x$.sel('.notion-frame'), x$.sel('.notion-topbar')];
+ if (els.some((el) => el !== null)) return main();
+ setTimeout(() => wait(), 500);
+ }();
+
+ /**
+ * Everything happens here. ¯\_(ツ)_/¯
+ */
+ async function main() {
+ const icon = await x$.svg('/icons/link.svg');
+ const pageClass = 'admiraldus-glb-page-button';
+ const blockClass = 'admiraldus-glb-block-button';
+ const spanClass = 'admiraldus-glb-span-hide';
+ /**
+ * Create the page link button and append it to the topbar.
+ *
+ * @return {create} Returns "create()" if not appended.
+ */
+ const pageButton = !function create() {
+ const target = x$.sel('.notion-topbar-share-menu');
+ const attr = [
+ `class="${pageClass}" role="button" tabindex="0"`,
+ `class="${spanClass}"`,
+ ];
+ const html = x$.el(
+ `<div ${attr[0]}>
+ ${icon}
+ <span>Global Link</span>
+ <span ${attr[1]}>Link copied!</span
+ </div>`);
+
+ target.before(html);
+ if (html === null) return create();
+ }();
+
+ /**
+ * Create the block link button and append it to the block menu.
+ *
+ * @param {HTMLDivElement} el The copy link button.
+ *
+ * @return {create} Returns "create()" if not appended.
+ */
+ const blockButton = function create(el) {
+ const target = el;
+ const attr = `class="${blockClass}" role="button" tabindex="0"`;
+ const html = x$.el(
+ `<div ${attr}>
+ ${icon}
+ <span>Global link</span>
+ </div>`);
+
+ target.before(html);
+ if (html === null) return create();
+ };
+
+ let buttonDelay;
+ let link;
+ /**
+ * Copy the link to the clipboard.
+ *
+ * @param {boolean} page If the link is the link of the page.
+ */
+ function copyLink(page) {
+ /**
+ * Change the button text to provide the copied feedback.
+ */
+ const changeButtonText = function create() {
+ const span = x$.sel('span', true, x$.sel(`.${pageClass}`));
+ /**
+ * Set the classes of the button's div elements.
+ *
+ * @param {number} first A specific array items.
+ * @param {number} second A specific array items.
+ */
+ function setClasses(first, second) {
+ x$.cls.a(span[first], spanClass);
+ x$.cls.r(span[second], spanClass);
+ }
+
+ clearTimeout(buttonDelay);
+ setClasses(0, 1);
+ buttonDelay = setTimeout(() => {
+ setClasses(1, 0);
+ }, 700);
+ };
+
+ switch (page) {
+ case true:
+ link = `https://${window.location.href}/`.replace(/notion:\/\//, '');
+ changeButtonText();
+ x$.clp(false, link);
+ break;
+ case false:
+ const events = ['mousedown', 'mouseup', 'click'];
+ x$.sim(events, x$.sel(`.${blockClass}`).nextSibling);
+ x$.clp().then((text) => {
+ x$.clp(false, `${text.replace(/(?<=so[\/]).*#/, '')}/`);
+ });
+ break;
+ }
+ }
+
+ /**
+ * Observer for the overlay container.
+ */
+ x$.obs(() => {
+ /**
+ * Get the copy link button.
+ *
+ * @return {HTMLDivElement} Returns the copy link button.
+ */
+ function getLinkButton() {
+ const lang = ['Copy link', '링크 복사'];
+ const overlay = x$.sel('.notion-overlay-container');
+ const record = x$.sel(
+ '[style*="text-overflow: ellipsis;"]', true, overlay);
+
+ return Array.from(record).find(
+ (div) => lang.some((text) => div.textContent === text));
+ }
+ if (x$.sel(`.${blockClass}`) !== null ||
+ getLinkButton() === undefined) return;
+ blockButton(getLinkButton().closest('[role="button"]'));
+ }, x$.sel('.notion-overlay-container'), {
+ subtree: true, childList: true,
+ });
+
+ /**
+ * Listen for click events to call "copyLink()"".
+ *
+ * @type {HTMLElement}
+ * @listens document.body#click
+ */
+ x$.on(document.body, 'click', (event) => {
+ const target = event.target;
+
+ if (x$.cls.c(target, pageClass) ||
+ target.closest(`.${pageClass}`)) {
+ copyLink(/* page= */ true);
+ } else if (x$.cls.c(target, blockClass) ||
+ target.closest(`.${blockClass}`)) {
+ copyLink(/* page= */ false);
+ }
+ });
+
+ /**
+ * Listen for mouseenter events to add class.
+ *
+ * @type {HTMLElement}
+ * @listens document.body#mouseenter
+ */
+ x$.on(document.body, 'mouseenter', (event) => {
+ const target = event.target;
+
+ if (x$.cls.c(target, 'admiraldus-glb-block-button')) {
+ const menu = target.closest('.notion-scroller.vertical');
+
+ x$.cls.a(menu, '--on-hover');
+ }
+ }, true);
+
+ /**
+ * Listen for mouseleave events to remove class.
+ *
+ * @type {HTMLElement}
+ * @listens document.body#mouseleave
+ */
+ x$.on(document.body, 'mouseleave', (event) => {
+ const target = event.target;
+
+ if (x$.cls.c(target, 'admiraldus-glb-block-button')) {
+ const menu = target.closest('.notion-scroller.vertical');
+
+ x$.cls.r(menu, '--on-hover');
+ }
+ }, true);
+ }
+ });
+ },
+ },
+};
diff --git a/mods/code-line-numbers/app.css b/mods/code-line-numbers/app.css
index 7e67f48..9a1bb3a 100644
--- a/mods/code-line-numbers/app.css
+++ b/mods/code-line-numbers/app.css
@@ -13,12 +13,15 @@
padding-left: 48px !important;
}
#code-line-numbers {
- font-size: var(--theme--font_code-size) !important;
- font-family: var(--theme--font_code) !important;
+ font-size: var(--theme--font_code-size);
+ font-family: var(--theme--font_code);
color: var(--theme--text_ui_info);
+ background: var(--theme--code-background);
text-align: right;
position: absolute;
- right: calc(100% - 30px);
+ left: 0;
+ right: calc(100% - 48px);
+ padding-right: 18px;
overflow: hidden;
pointer-events: none;
}
diff --git a/mods/code-line-numbers/mod.js b/mods/code-line-numbers/mod.js
index f6e3dd1..3d19aa5 100644
--- a/mods/code-line-numbers/mod.js
+++ b/mods/code-line-numbers/mod.js
@@ -14,7 +14,7 @@ module.exports = {
tags: ['extension'],
name: 'code line numbers',
desc: 'adds line numbers to code blocks.',
- version: '1.1.0',
+ version: '1.1.1',
author: 'CloudHill',
options: [
{
diff --git a/mods/core/css/theme.css b/mods/core/css/theme.css
index 2b97ba0..8bbf38b 100644
--- a/mods/core/css/theme.css
+++ b/mods/core/css/theme.css
@@ -249,11 +249,9 @@
box-shadow: var(--theme--table-border) 0px 1px 0px inset !important;
}
-.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] {
- box-shadow: var(--theme--main) -3px 0px 0px !important;
-}
+.notion-body.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px;'],
.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px;'] {
- box-shadow: none !important;
+ box-shadow: var(--theme--main) -3px 0px 0px !important;
}
.notion-body.dark
[style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'],
@@ -312,10 +310,66 @@
box-shadow: -1px -1px 0 var(--theme--table-border) !important;
}
+.notion-body.dark
+ [style*='border-top: 1px solid rgb(77, 81, 83)'],
+.notion-body:not(.dark)
+ [style*='border-top: 1px solid rgb(223, 223, 222)'] {
+ border-top: 1px solid var(--theme--table-border_row) !important;
+}
+.notion-body.dark
+ [style*='border-bottom: 1px solid rgb(77, 81, 83)'],
+.notion-body:not(.dark)
+ [style*='border-bottom: 1px solid rgb(223, 223, 222)'] {
+ border-bottom: 1px solid var(--theme--table-border_row) !important;
+}
+.notion-body.dark
+ [style*='border-right: 1px solid rgb(77, 81, 83)'],
+.notion-body:not(.dark)
+ [style*='border-right: 1px solid rgb(223, 223, 222)'] {
+ border-right: 1px solid var(--theme--table-border_row) !important;
+}
+
+.notion-body.dark
+ [style*='border-right: 1px solid rgb(63, 66, 69)'],
+.notion-body:not(.dark)
+ [style*='border-right: 1px solid rgb(237, 237, 236)'] {
+ border-right: 1px solid var(--theme--table-border_column) !important;
+}
+
+.notion-body.dark
+ [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgb(77, 81, 83) 0px 1px 0px'],
+.notion-body:not(.dark)
+ [style*='box-shadow: white -3px 0px 0px, rgb(223, 223, 222) 0px 1px 0px'] {
+ box-shadow: var(--theme--main) -3px 0px 0px,
+ var(--theme--table-border_row) 0px 1px 0px !important;
+}
+.notion-body.dark
+ [style*='box-shadow: rgb(77, 81, 83) -1px 0px 0px'],
+.notion-body:not(.dark)
+ [style*='box-shadow: rgb(223, 223, 222) -1px 0px 0px'] {
+ box-shadow: var(--theme--table-border_row) -1px 0px 0px !important;
+}
+.notion-body.dark
+ [style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px'],
+.notion-body:not(.dark)
+ [style*='box-shadow: rgb(223, 223, 222) 0px 1px 0px'] {
+ box-shadow: var(--theme--table-border_row) 0 1px 0px !important;
+}
+.notion-body.dark
+ [style*='box-shadow: rgb(77, 81, 83) 0px 1px 0px inset'],
+.notion-body:not(.dark)
+ [style*='box-shadow: rgb(223, 223, 222) 0px 1px 0px inset'] {
+ box-shadow: var(--theme--table-border_row) 0 1px 0px inset !important;
+}
+
+[style*='border: 1px solid rgba(46, 170, 220, 0.6)'] {
+ border: 1px solid var(--theme--table-border_selected) !important;
+}
+
.notion-body.dark
[style*='background-image: linear-gradient(to right, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.14) 100%);'],
.notion-body:not(.dark)
- [style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)'] {
+ [style*='background-image: linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%);'] {
background-image: linear-gradient(
to right,
var(--theme--bg_gray) 0%,
@@ -423,10 +477,28 @@
[style*='background: rgb(0, 141, 190)'] {
background: var(--theme--primary_click) !important;
}
+[style*='background: rgb(46, 170, 220)'][style*='color: white'],
+[style*='background-color: rgb(46, 170, 220)'][style*='color: white'],
+[style*='background: rgb(6, 156, 205)'][style*='color: white'],
+[style*='background: rgb(0, 141, 190)'][style*='color: white'] {
+ color: var(--theme--primary_text) !important;
+}
+[style*='background: rgb(46, 170, 220)'] [style*='fill: white'],
+[style*='background-color: rgb(46, 170, 220)'] [style*='fill: white'],
+[style*='background: rgb(6, 156, 205)'] [style*='fill: white'],
+[style*='background: rgb(0, 141, 190)'] [style*='fill: white'] {
+ fill: var(--theme--primary_text) !important;
+}
.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after,
[style*='background: rgb(235, 87, 87)'] {
background: var(--theme--primary_indicator) !important;
}
+[style*='background: rgb(235, 87, 87)'][style*='color: white'] {
+ color: var(--theme--primary_indicator_text) !important;
+}
+#notion-app .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, #notion-app .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end):hover {
+ background: var(--theme--primary_indicator_hover) !important;
+}
.notion-body.dark
[style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px'],
@@ -468,6 +540,14 @@
color: var(--theme--danger_text) !important;
border: 1px solid var(--theme--danger_border) !important;
}
+
+/* divider */
+
+.notion-body.dark .notion-divider-block [style*='border-bottom: 1px solid rgba(255, 255, 255,'],
+.notion-body:not(.dark) .notion-divider-block [style*='border-bottom: 1px solid rgba(55, 53, 47,'] {
+ border-bottom: 1px solid var(--theme--divider) !important;
+}
+
/* inputs */
.notion-focusable:focus-within {
box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important;
@@ -957,9 +1037,15 @@
.notion-code-block .token.function {
color: var(--theme--code_function) !important;
}
+.notion-code-block .token.parameter {
+ color: var(--theme--code_parameter) !important;
+}
.notion-code-block .token.keyword {
color: var(--theme--code_keyword) !important;
}
+.notion-code-block .token.constant {
+ color: var(--theme--code_constant) !important;
+}
.notion-code-block .token.tag {
color: var(--theme--code_tag) !important;
}
@@ -969,24 +1055,60 @@
.notion-code-block .token.important {
color: var(--theme--code_important) !important;
}
+.notion-code-block .token.regex {
+ color: var(--theme--code_regex) !important;
+}
.notion-code-block .token.property {
color: var(--theme--code_property) !important;
}
.notion-code-block .token.builtin {
color: var(--theme--code_builtin) !important;
}
+.notion-code-block .token.class-name {
+ color: var(--theme--code_class-name) !important;
+}
.notion-code-block .token.attr-name {
color: var(--theme--code_attr-name) !important;
}
.notion-code-block .token.attr-value {
color: var(--theme--code_attr-value) !important;
}
+.notion-code-block .token.selector {
+ color: var(--theme--code_selector) !important;
+}
+.notion-code-block .token.id {
+ color: var(--theme--code_id) !important;
+}
+.notion-code-block .token.class {
+ color: var(--theme--code_class) !important;
+}
+.notion-code-block .token.pseudo-element {
+ color: var(--theme--code_pseudo-element) !important;
+}
+.notion-code-block .token.pseudo-class {
+ color: var(--theme--code_pseudo-class) !important;
+}
+.notion-code-block .token.attribute {
+ color: var(--theme--code_attribute) !important;
+}
+.notion-code-block .token.value {
+ color: var(--theme--code_value) !important;
+}
+.notion-code-block .token.unit {
+ color: var(--theme--code_unit) !important;
+}
.notion-code-block .token.comment {
color: var(--theme--code_comment) !important;
}
.notion-code-block .token.punctuation {
color: var(--theme--code_punctuation) !important;
}
+.notion-code-block .token.annotation {
+ color: var(--theme--code_annotation) !important;
+}
+.notion-code-block .token.decorator {
+ color: var(--theme--code_decorator) !important;
+}
.notion-code-block .token.doctype {
color: var(--theme--code_doctype) !important;
}
@@ -996,3 +1118,6 @@
.notion-code-block .token.string {
color: var(--theme--code_string) !important;
}
+.notion-code-block .token.boolean {
+ color: var(--theme--code_boolean) !important;
+}
diff --git a/mods/core/variables.css b/mods/core/variables.css
index f2a7881..63d2f9d 100644
--- a/mods/core/variables.css
+++ b/mods/core/variables.css
@@ -60,6 +60,9 @@
--theme_dark--gallery: rgba(255, 255, 255, 0.05);
--theme_dark--select_input: rgb(55, 60, 63);
--theme_dark--table-border: rgba(255, 255, 255, 0.1);
+ --theme_dark--table-border_row: rgb(77, 81, 83);
+ --theme_dark--table-border_column: rgb(63, 66, 69);
+ --theme_dark--table-border_selected: rgba(46, 170, 220, 0.6);
--theme_dark--ui-border: rgba(255, 255, 255, 0.07);
--theme_dark--interactive_hover: rgb(71, 76, 80);
--theme_dark--interactive_hover-border: transparent;
@@ -68,9 +71,12 @@
--theme_dark--selected: rgba(46, 170, 220, 0.2);
--theme_dark--primary: rgb(46, 170, 220);
+ --theme_dark--primary_text: white;
--theme_dark--primary_hover: rgb(6, 156, 205);
--theme_dark--primary_click: rgb(0, 141, 190);
--theme_dark--primary_indicator: rgb(235, 87, 87);
+ --theme_dark--primary_indicator_text: var(--theme_dark--primary_text);
+ --theme_dark--primary_indicator_hover: rgba(45, 156, 219, 0.2);
--theme_dark--option-color: white;
--theme_dark--option-background: transparent;
@@ -81,6 +87,8 @@
--theme_dark--danger_text: rgb(235, 87, 87);
--theme_dark--danger_border: rgba(235, 87, 87, 0.5);
+
+ --theme_dark--divider: var(--theme_dark--table-border);
--theme_dark--text: rgba(255, 255, 255, 0.9);
--theme_dark--text_ui: rgba(255, 255, 255, 0.6);
@@ -180,20 +188,35 @@
--theme_dark--code_inline-background: rgba(135, 131, 120, 0.15);
--theme_dark--code-text: var(--theme_dark--text);
--theme_dark--code-background: var(--theme_dark--card);
- --theme_dark--code_function: rgba(255, 255, 255, 0.9);
+ --theme_dark--code_function: var(--theme_dark--code-text);
+ --theme_dark--code_parameter: var(--theme_dark--code-text);
--theme_dark--code_keyword: hsl(350, 40%, 70%);
+ --theme_dark--code_constant: hsl(350, 40%, 70%);
--theme_dark--code_tag: hsl(350, 40%, 70%);
--theme_dark--code_operator: hsl(40, 90%, 60%);
--theme_dark--code_important: #e90;
+ --theme_dark--code_regex: #e90;
--theme_dark--code_property: hsl(350, 40%, 70%);
--theme_dark--code_builtin: hsl(75, 70%, 60%);
+ --theme_dark--code_class-name: var(--theme_dark--code-text);
--theme_dark--code_attr-name: hsl(75, 70%, 60%);
+ --theme_dark--code_attr-value: hsl(350, 40%, 70%);
+ --theme_dark--code_selector: hsl(75, 70%, 60%);
+ --theme_dark--code_id: var(--theme_dark--code-text);
+ --theme_dark--code_class: var(--theme_dark--code-text);
+ --theme_dark--code_pseudo-element: var(--theme_dark--code-text);
+ --theme_dark--code_pseudo-class: var(--theme_dark--code-text);
+ --theme_dark--code_attribute: var(--theme_dark--code-text);
+ --theme_dark--code_value: var(--theme_dark--code-text);
+ --theme_dark--code_unit: var(--theme_dark--code-text);
--theme_dark--code_comment: hsl(30, 20%, 50%);
- --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9);
+ --theme_dark--code_punctuation: var(--theme_dark--code-text);
+ --theme_dark--code_annotation: var(--theme_dark--code_punctuation);
+ --theme_dark--code_decorator: var(--theme_dark--code_punctuation);
--theme_dark--code_doctype: hsl(30, 20%, 50%);
--theme_dark--code_number: hsl(350, 40%, 70%);
--theme_dark--code_string: hsl(75, 70%, 60%);
- --theme_dark--code_attr-value: hsl(350, 40%, 70%);
+ --theme_dark--code_boolean: hsl(350, 40%, 70%);
/** light **/
@@ -246,6 +269,9 @@
--theme_light--gallery: rgba(55, 53, 47, 0.024);
--theme_light--select_input: rgba(242, 241, 238, 0.6);
--theme_light--table-border: rgba(55, 53, 47, 0.16);
+ --theme_light--table-border_row: rgb(223, 223, 222);
+ --theme_light--table-border_column: rgb(237, 237, 236);
+ --theme_light--table-border_selected: rgba(46, 170, 220, 0.6);
--theme_light--ui-border: rgba(55, 53, 47, 0.09);
--theme_light--interactive_hover: rgb(239, 239, 239);
--theme_light--interactive_hover-border: transparent;
@@ -254,9 +280,12 @@
--theme_light--selected: rgba(46, 170, 220, 0.2);
--theme_light--primary: rgb(46, 170, 220);
+ --theme_light--primary_text: white;
--theme_light--primary_hover: rgb(6, 156, 205);
--theme_light--primary_click: rgb(0, 141, 190);
--theme_light--primary_indicator: rgb(235, 87, 87);
+ --theme_light--primary_indicator_text: var(--theme_light--primary_text);
+ --theme_light--primary_indicator_hover: rgba(45, 156, 219, 0.2);
--theme_light--option-color: black;
--theme_light--option-background: transparent;
@@ -268,6 +297,8 @@
--theme_light--danger_text: rgb(235, 87, 87);
--theme_light--danger_border: rgba(235, 87, 87, 0.5);
+ --theme_light--divider: var(--theme_light--table-border);
+
--theme_light--text: rgb(55, 53, 47);
--theme_light--text_ui: rgba(55, 53, 47, 0.6);
--theme_light--text_ui: rgba(55, 53, 47, 0.6);
@@ -368,19 +399,34 @@
--theme_light--code-text: var(--theme_light--text);
--theme_light--code-background: var(--theme_light--card);
--theme_light--code_function: #dd4a68;
+ --theme_light--code_parameter: var(--theme_light--code-text);
--theme_light--code_keyword: #07a;
+ --theme_light--code_constant: #905;
--theme_light--code_tag: #905;
--theme_light--code_operator: #9a6e3a;
--theme_light--code_important: #e90;
+ --theme_light--code_regex: #e90;
--theme_light--code_property: #905;
--theme_light--code_builtin: #690;
+ --theme_light--code_class-name: #dd4a68;
--theme_light--code_attr-name: #690;
+ --theme_light--code_attr-value: #07a;
+ --theme_light--code_selector: #690;
+ --theme_light--code_id: var(--theme_light--code-text);
+ --theme_light--code_class: var(--theme_light--code-text);
+ --theme_light--code_pseudo-element: var(--theme_light--code-text);
+ --theme_light--code_pseudo-class: var(--theme_light--code-text);
+ --theme_light--code_attribute: var(--theme_light--code-text);
+ --theme_light--code_value: var(--theme_light--code-text);
+ --theme_light--code_unit: var(--theme_light--code-text);
--theme_light--code_comment: slategray;
--theme_light--code_punctuation: #999;
+ --theme_light--code_annotation: var(--theme_light--code_punctuation);
+ --theme_light--code_decorator: var(--theme_light--code_punctuation);
--theme_light--code_doctype: slategray;
--theme_light--code_number: #905;
--theme_light--code_string: #690;
- --theme_light--code_attr-value: #07a;
+ --theme_light--code_boolean: #905;
}
.notion-dark-theme {
@@ -421,6 +467,9 @@
--theme--gallery: var(--theme_dark--gallery);
--theme--select_input: var(--theme_dark--select_input);
--theme--table-border: var(--theme_dark--table-border);
+ --theme--table-border_row: var(--theme_dark--table-border_row);
+ --theme--table-border_column: var(--theme_dark--table-border_column);
+ --theme--table-border_selected: var(--theme_dark--table-border_selected);
--theme--ui-border: var(--theme_dark--ui-border);
--theme--interactive_hover: var(--theme_dark--interactive_hover);
--theme--interactive_hover-border: var(
@@ -430,9 +479,12 @@
--theme--button_close-fill: var(--theme_dark--button_close-fill);
--theme--selected: var(--theme_dark--selected);
--theme--primary: var(--theme_dark--primary);
+ --theme--primary_text: var(--theme_dark--primary_text);
--theme--primary_hover: var(--theme_dark--primary_hover);
--theme--primary_click: var(--theme_dark--primary_click);
--theme--primary_indicator: var(--theme_dark--primary_indicator);
+ --theme--primary_indicator_text: var(--theme_dark--primary_indicator_text);
+ --theme--primary_indicator_hover: var(--theme_dark--primary_indicator_hover);
--theme--option-color: var(--theme_dark--option-color);
--theme--option-background: var(--theme_dark--option-background);
--theme--option_active-color: var(--theme_dark--option_active-color);
@@ -443,6 +495,7 @@
--theme--option_hover-background: var(--theme_dark--option_hover-background);
--theme--danger_text: var(--theme_dark--danger_text);
--theme--danger_border: var(--theme_dark--danger_border);
+ --theme--divider: var(--theme_dark--divider);
--theme--text: var(--theme_dark--text);
--theme--text_ui: var(--theme_dark--text_ui);
--theme--text_ui_info: var(--theme_dark--text_ui_info);
@@ -536,19 +589,34 @@
--theme--code-text: var(--theme_dark--code-text);
--theme--code-background: var(--theme_dark--code-background);
--theme--code_function: var(--theme_dark--code_function);
+ --theme--code_parameter: var(--theme_dark--code_parameter);
--theme--code_keyword: var(--theme_dark--code_keyword);
+ --theme--code_constant: var(--theme_dark--code_constant);
--theme--code_tag: var(--theme_dark--code_tag);
--theme--code_operator: var(--theme_dark--code_operator);
--theme--code_important: var(--theme_dark--code_important);
+ --theme--code_regex: var(--theme_dark--code_regex);
--theme--code_property: var(--theme_dark--code_property);
--theme--code_builtin: var(--theme_dark--code_builtin);
+ --theme--code_class-name: var(--theme_dark--code_class-name);
--theme--code_attr-name: var(--theme_dark--code_attr-name);
+ --theme--code_attr-value: var(--theme_dark--code_attr-value);
+ --theme--code_selector: var(--theme_dark--code_selector);
+ --theme--code_id: var(--theme_dark--code_id);
+ --theme--code_class: var(--theme_dark--code_class);
+ --theme--code_pseudo-element: var(--theme_dark--code_pseudo-element);
+ --theme--code_pseudo-class: var(--theme_dark--code_pseudo-class);
+ --theme--code_attribute: var(--theme_dark--code_attribute);
+ --theme--code_value: var(--theme_dark--code_value);
+ --theme--code_unit: var(--theme_dark--code_unit);
--theme--code_comment: var(--theme_dark--code_comment);
--theme--code_punctuation: var(--theme_dark--code_punctuation);
+ --theme--code_annotation: var(--theme_dark--code_annotation);
+ --theme--code_decorator: var(--theme_dark--code_decorator);
--theme--code_doctype: var(--theme_dark--code_doctype);
--theme--code_number: var(--theme_dark--code_number);
--theme--code_string: var(--theme_dark--code_string);
- --theme--code_attr-value: var(--theme_dark--code_attr-value);
+ --theme--code_boolean: var(--theme_dark--code_boolean);
}
.notion-light-theme {
@@ -589,6 +657,9 @@
--theme--gallery: var(--theme_light--gallery);
--theme--select_input: var(--theme_light--select_input);
--theme--table-border: var(--theme_light--table-border);
+ --theme--table-border_row: var(--theme_light--table-border_row);
+ --theme--table-border_column: var(--theme_light--table-border_column);
+ --theme--table-border_selected: var(--theme_light--table-border_selected);
--theme--ui-border: var(--theme_light--ui-border);
--theme--interactive_hover: var(--theme_light--interactive_hover);
--theme--interactive_hover-border: var(
@@ -598,9 +669,12 @@
--theme--button_close-fill: var(--theme_light--button_close-fill);
--theme--selected: var(--theme_light--selected);
--theme--primary: var(--theme_light--primary);
+ --theme--primary_text: var(--theme_light--primary_text);
--theme--primary_hover: var(--theme_light--primary_hover);
--theme--primary_click: var(--theme_light--primary_click);
--theme--primary_indicator: var(--theme_light--primary_indicator);
+ --theme--primary_indicator_text: var(--theme_light--primary_indicator_text);
+ --theme--primary_indicator_hover: var(--theme_light--primary_indicator_hover);
--theme--option-color: var(--theme_light--option-color);
--theme--option-background: var(--theme_light--option-background);
--theme--option_hover-color: var(--theme_light--option_hover-color);
@@ -611,6 +685,7 @@
);
--theme--danger_text: var(--theme_light--danger_text);
--theme--danger_border: var(--theme_light--danger_border);
+ --theme--divider: var(--theme_light--divider);
--theme--text: var(--theme_light--text);
--theme--text_ui: var(--theme_light--text_ui);
--theme--text_ui_info: var(--theme_light--text_ui_info);
@@ -704,17 +779,32 @@
--theme--code-text: var(--theme_light--code-text);
--theme--code-background: var(--theme_light--code-background);
--theme--code_function: var(--theme_light--code_function);
+ --theme--code_parameter: var(--theme_light--code_parameter);
--theme--code_keyword: var(--theme_light--code_keyword);
+ --theme--code_constant: var(--theme_light--code_constant);
--theme--code_tag: var(--theme_light--code_tag);
--theme--code_operator: var(--theme_light--code_operator);
--theme--code_important: var(--theme_light--code_important);
+ --theme--code_regex: var(--theme_light--code_regex);
--theme--code_property: var(--theme_light--code_property);
--theme--code_builtin: var(--theme_light--code_builtin);
+ --theme--code_class-name: var(--theme_light--code_class-name);
--theme--code_attr-name: var(--theme_light--code_attr-name);
+ --theme--code_attr-value: var(--theme_light--code_attr-value);
+ --theme--code_selector: var(--theme_light--code_selector);
+ --theme--code_id: var(--theme_light--code_id);
+ --theme--code_class: var(--theme_light--code_class);
+ --theme--code_pseudo-element: var(--theme_light--code_pseudo-element);
+ --theme--code_pseudo-class: var(--theme_light--code_pseudo-class);
+ --theme--code_attribute: var(--theme_light--code_attribute);
+ --theme--code_value: var(--theme_light--code_value);
+ --theme--code_unit: var(--theme_light--code_unit);
--theme--code_comment: var(--theme_light--code_comment);
--theme--code_punctuation: var(--theme_light--code_punctuation);
+ --theme--code_annotation: var(--theme_light--code_annotation);
+ --theme--code_decorator: var(--theme_light--code_decorator);
--theme--code_doctype: var(--theme_light--code_doctype);
--theme--code_number: var(--theme_light--code_number);
--theme--code_string: var(--theme_light--code_string);
- --theme--code_attr-value: var(--theme_light--code_attr-value);
+ --theme--code_boolean: var(--theme_light--code_boolean);
}
diff --git a/mods/dracula/app.css b/mods/dracula/app.css
index c92c34f..bc81138 100644
--- a/mods/dracula/app.css
+++ b/mods/dracula/app.css
@@ -2,6 +2,7 @@
* dracula
* (c) 2020 @mimishahzad386#5651
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
* under the MIT license
*/
@@ -75,3 +76,22 @@
.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] {
box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important;
}
+
+.notion-dark-theme .notion-code-block .token.parameter,
+.notion-dark-theme .notion-code-block .token.decorator,
+.notion-dark-theme .notion-code-block .token.id,
+.notion-dark-theme .notion-code-block .token.class,
+.notion-dark-theme .notion-code-block .token.pseudo-element,
+.notion-dark-theme .notion-code-block .token.pseudo-class,
+.notion-dark-theme .notion-code-block .token.attribute {
+ font-style: italic;
+}
+
+.notion-dark-theme .notion-code-block .token.punctuation {
+ opacity: 1;
+}
+
+
+.notion-dark-theme [class^="notion-outliner"] [style*="background: rgb(71, 76, 80);"] .triangle[fill] {
+ fill: var(--theme--text)
+}
\ No newline at end of file
diff --git a/mods/dracula/mod.js b/mods/dracula/mod.js
index c5d7f40..24ce175 100644
--- a/mods/dracula/mod.js
+++ b/mods/dracula/mod.js
@@ -13,6 +13,6 @@ module.exports = {
name: 'dracula',
desc:
'a theme based on the popular dracula color palette originally by zeno rocha and friends. ',
- version: '0.1.0',
+ version: '0.2.0',
author: 'dracula',
};
diff --git a/mods/dracula/variables.css b/mods/dracula/variables.css
index ccf17c3..f217218 100644
--- a/mods/dracula/variables.css
+++ b/mods/dracula/variables.css
@@ -4,128 +4,192 @@
* (c) 2020 dracula
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2020 CloudHill
* under the MIT license
*/
:root {
- --theme_dark--main: #282a36;
- --theme_dark--sidebar: #21232c;
- --theme_dark--overlay: rgba(13, 13, 14, 0.5);
- --theme_dark--dragarea: #20222b;
+
+ /* PALETTE */
+
+ --theme_dracula--bg: #282a36;
+ --theme_dracula--bg_lighter: #424450;
+ --theme_dracula--bg_light: #343746;
+ --theme_dracula--bg_dark: #21222c;
+ --theme_dracula--bg_darker: #191a21;
+
+ --theme_dracula--fg: #f8f8f2;
+ --theme_dracula--fg_dark: #babbba;
+
+ --theme_dracula--comment: #6272a4;
+ --theme_dracula--selection: #44475a;
+ --theme_dracula--line_highlight: #44475a75;
+
+ --theme_dracula--gray: var(--theme_dracula--fg_dark);
+ --theme_dracula--brown: #6272a4;
+ --theme_dracula--orange: #ffb86c;
+ --theme_dracula--yellow: #f1fa8c;
+ --theme_dracula--green: #50fa7b;
+ --theme_dracula--blue: #8be9fd;
+ --theme_dracula--purple: #bd93f9;
+ --theme_dracula--pink: #ff79c6;
+ --theme_dracula--red: #ff5555;
+
+ --theme_dracula--bg_gray: var(--theme_dracula--bg_light);
+ --theme_dracula--bg_brown: #465079;
+ --theme_dracula--bg_orange: #8a6345;
+ --theme_dracula--bg_yellow: #8e9656;
+ --theme_dracula--bg_green: #3f945f;
+ --theme_dracula--bg_blue: #498096;
+ --theme_dracula--bg_purple: #6a549b;
+ --theme_dracula--bg_pink: #8d4a7c;
+ --theme_dracula--bg_red: #943844;
+
+ /* MAIN */
+
+ --theme_dark--main: var(--theme_dracula--bg);
+ --theme_dark--sidebar: var(--theme_dracula--bg_dark);
+ --theme_dark--overlay: #0d0d0e80;
+ --theme_dark--dragarea: var(--theme_dracula--bg_dark);
--theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji',
'Segoe UI Symbol';
- --theme_dark--scrollbar: #393c4d;
- --theme_dark--scrollbar_hover: #576591;
+ --theme_dark--scrollbar: var(--theme_dracula--selection);
+ --theme_dark--scrollbar_hover: var(--theme_dracula--comment);
+
+ --theme_dark--card: var(--theme_dracula--bg_light);
+ --theme_dark--gallery: var(--theme_dracula--bg_dark);
+ --theme_dark--select_input: var(--theme_dracula--selection);
+
+ --theme_dark--table-border: var(--theme_dracula--bg_lighter);
+ --theme_dark--table-border_row: var(--theme_dark--table-border);
+ --theme_dark--table-border_column: var(--theme_dark--table-border);
+ --theme_dark--table-border_selected: var(--theme_dracula--purple);
- --theme_dark--card: #3c3f50;
- --theme_dark--gallery: #323546;
- --theme_dark--select_input: #474a5c;
- --theme_dark--table-border: #484b59;
--theme_dark--ui-border: var(--theme_dark--table-border);
- --theme_dark--interactive_hover: rgba(64, 73, 105, 0.7);
- --theme_dark--button_close: #ff5555;
+ --theme_dark--interactive_hover: var(--theme_dracula--line_highlight);
+ --theme_dark--button_close: var(--theme_dracula--red);
- --theme_dark--selected: rgba(189, 147, 249, 0.3);
- --theme_dark--primary: #bd93f9;
- --theme_dark--primary_hover: #8be9fd;
- --theme_dark--primary_click: #bd93f9;
- --theme_dark--primary_indicator: #8be9fd;
+ --theme_dark--selected: #bb8dfd3d;
+ --theme_dark--primary: var(--theme_dracula--purple);
+ --theme_dark--primary_hover: #b179ff;
+ --theme_dark--primary_click: #9f5ff8;
+ --theme_dark--primary_indicator: var(--theme_dracula--comment);
+ --theme_dark--primary_indicator_hover: var(--theme_dracula--bg_purple);
--theme_dark--option_active-background: var(--theme_dark--primary);
- --theme_dark--option_hover-background: var(--theme_dark--primary_hover);
+ --theme_dark--option_hover-background: var(--theme_dark--bg_purple);
- --theme_dark--danger_text: #ff5555;
- --theme_dark--danger_border: #ffb86c;
+ --theme_dark--danger_text: var(--theme_dracula--red);
+ --theme_dark--danger_border: var(--theme_dracula--bg_red);
+
+ /* TEXT */
+
+ --theme_dark--text: var(--theme_dracula--fg);
+ --theme_dark--text_ui: var(--theme_dracula--fg_dark);
+ --theme_dark--text_ui_info: var(--theme_dracula--comment);
- --theme_dark--text: #f8f8f2;
- --theme_dark--text_ui: #f8f8f2;
- --theme_dark--text_ui_info: #f8f8f2;
+ --theme_dark--text_gray: var(--theme_dracula--gray);
+ --theme_dark--text_brown: var(--theme_dracula--brown);
+ --theme_dark--text_orange: var(--theme_dracula--orange);
+ --theme_dark--text_yellow: var(--theme_dracula--yellow);
+ --theme_dark--text_green: var(--theme_dracula--green);
+ --theme_dark--text_blue: var(--theme_dracula--blue);
+ --theme_dark--text_purple: var(--theme_dracula--purple);
+ --theme_dark--text_pink: var(--theme_dracula--pink);
+ --theme_dark--text_red: var(--theme_dracula--red);
- --theme_dark--text_gray: #807e8d;
- --theme_dark--text_brown: #6272a4;
- --theme_dark--text_orange: #ffb86c;
- --theme_dark--text_yellow: #f1fa8c;
- --theme_dark--text_green: #50fa7b;
- --theme_dark--text_blue: #8be9fd;
- --theme_dark--text_purple: #bd93f9;
- --theme_dark--text_pink: #ff79c6;
- --theme_dark--text_red: #ff5555;
+ /* SELECT */
- --theme_dark--select-text: #000000;
- --theme_dark--select_gray: #454158;
- --theme_dark--select_gray-text: #f5f5f5;
- --theme_dark--select_brown: #6272a4;
- --theme_dark--select_brown-text: #f5f5f5;
- --theme_dark--select_orange: #ffb86c;
- --theme_dark--select_yellow: #f1fa8c;
- --theme_dark--select_green: #50fa7b;
- --theme_dark--select_blue: #8be9fd;
- --theme_dark--select_purple: #bd93f9;
- --theme_dark--select_pink: #ff79c6;
- --theme_dark--select_red: #ff5555;
- --theme_dark--select_red-text: #f5f5f5;
+ --theme_dark--select-text: var(--theme_dracula--bg);
+ --theme_dark--select_gray: var(--theme_dracula--gray);
+ --theme_dark--select_brown: var(--theme_dracula--brown);
+ --theme_dark--select_brown-text: var(--theme_dracula--fg);
+ --theme_dark--select_orange: var(--theme_dracula--orange);
+ --theme_dark--select_yellow: var(--theme_dracula--yellow);
+ --theme_dark--select_green: var(--theme_dracula--green);
+ --theme_dark--select_blue: var(--theme_dracula--blue);
+ --theme_dark--select_purple: var(--theme_dracula--purple);
+ --theme_dark--select_pink: var(--theme_dracula--pink);
+ --theme_dark--select_red: var(--theme_dracula--red);
+ --theme_dark--select_red-text: var(--theme_dracula--fg);
- --theme_dark--bg-text: var(--theme_dark--select-text);
- --theme_dark--bg_gray: var(--theme_dark--select_gray);
- --theme_dark--bg_gray-text: #f5f5f5;
- --theme_dark--bg_brown: var(--theme_dark--select_brown);
- --theme_dark--bg_brown-text: #f5f5f5;
- --theme_dark--bg_orange: var(--theme_dark--select_orange);
- --theme_dark--bg_yellow: var(--theme_dark--select_yellow);
- --theme_dark--bg_green: var(--theme_dark--select_green);
- --theme_dark--bg_blue: var(--theme_dark--select_blue);
- --theme_dark--bg_purple: var(--theme_dark--select_purple);
- --theme_dark--bg_pink: var(--theme_dark--select_pink);
- --theme_dark--bg_red: var(--theme_dark--select_red);
- --theme_dark--bg_red-text: #f5f5f5;
+ /* BG */
- --theme_dark--line-text: #000000;
- --theme_dark--line_gray: #3c3f50;
- --theme_dark--line_gray-text: #f5f5f5;
- --theme_dark--line_brown: #6272a4;
- --theme_dark--line_brown-text: #f5f5f5;
- --theme_dark--line_orange: #ffb86c;
- --theme_dark--line_yellow: #f1fa8c;
- --theme_dark--line_green: #50fa7b;
- --theme_dark--line_blue: #8be9fd;
- --theme_dark--line_purple: #bd93f9;
- --theme_dark--line_pink: #ff79c6;
- --theme_dark--line_red: #ff5555;
- --theme_dark--line_red-text: #f5f5f5;
+ --theme_dark--bg-text: var(--theme_dracula--fg);
+ --theme_dark--bg_gray: var(--theme_dracula--bg_gray);
+ --theme_dark--bg_brown: var(--theme_dracula--bg_brown);
+ --theme_dark--bg_orange: var(--theme_dracula--bg_orange);
+ --theme_dark--bg_yellow: var(--theme_dracula--bg_yellow);
+ --theme_dark--bg_green: var(--theme_dracula--bg_green);
+ --theme_dark--bg_blue: var(--theme_dracula--bg_blue);
+ --theme_dark--bg_purple: var(--theme_dracula--bg_purple);
+ --theme_dark--bg_pink: var(--theme_dracula--bg_pink);
+ --theme_dark--bg_red: var(--theme_dracula--bg_red);
+
+ /* LINE */
- --theme_dark--callout-text: var(--theme_dark--line-text);
- --theme_dark--callout_gray: var(--theme_dark--line_gray);
- --theme_dark--callout_gray-text: #f5f5f5;
- --theme_dark--callout_brown: var(--theme_dark--line_brown);
- --theme_dark--callout_brown-text: #f5f5f5;
- --theme_dark--callout_orange: var(--theme_dark--line_orange);
- --theme_dark--callout_yellow: var(--theme_dark--line_yellow);
- --theme_dark--callout_green: var(--theme_dark--line_green);
- --theme_dark--callout_blue: var(--theme_dark--line_blue);
- --theme_dark--callout_purple: var(--theme_dark--line_purple);
- --theme_dark--callout_pink: var(--theme_dark--line_pink);
- --theme_dark--callout_red: var(--theme_dark--line_red);
- --theme_dark--callout_red-text: #f5f5f5;
+ --theme_dark--line-text: var(--theme_dracula--fg);
+ --theme_dark--line_gray: var(--theme_dracula--bg_gray);
+ --theme_dark--line_brown: var(--theme_dracula--bg_brown);
+ --theme_dark--line_orange: var(--theme_dracula--bg_orange);
+ --theme_dark--line_yellow: var(--theme_dracula--bg_yellow);
+ --theme_dark--line_green: var(--theme_dracula--bg_green);
+ --theme_dark--line_blue: var(--theme_dracula--bg_blue);
+ --theme_dark--line_purple: var(--theme_dracula--bg_purple);
+ --theme_dark--line_pink: var(--theme_dracula--bg_pink);
+ --theme_dark--line_red: var(--theme_dracula--bg_red);
- --theme_dark--code_inline-text: #50fa7b;
- --theme_dark--code_inline-background: #3c3f50;
- --theme_dark--code-text: var(--theme_dark--text);
- --theme_dark--code-background: #3c3f50;
- --theme_dark--code_function: var(--theme_dark--text_blue);
- --theme_dark--code_keyword: var(--theme_dark--text_pink);
- --theme_dark--code_tag: var(--theme_dark--text_pink);
- --theme_dark--code_operator: var(--theme_dark--text_yellow);
- --theme_dark--code_important: var(--theme_dark--text_yellow);
- --theme_dark--code_property: var(--theme_dark--text_pink);
- --theme_dark--code_builtin: var(--theme_dark--text_yellow);
- --theme_dark--code_attr-name: var(--theme_dark--text_yellow);
- --theme_dark--code_comment: var(--theme_dark--text_ui);
- --theme_dark--code_punctuation: #d2d0dc;
- --theme_dark--code_doctype: #d2d0dc;
- --theme_dark--code_number: var(--theme_dark--text_purple);
- --theme_dark--code_string: var(--theme_dark--text_orange);
- --theme_dark--code_attr-value: var(--theme_dark--text_orange);
-}
\ No newline at end of file
+ /* CALLOUT */
+
+ --theme_dark--callout-text: var(--theme_dracula--fg);
+ --theme_dark--callout_gray: var(--theme_dracula--bg_gray);
+ --theme_dark--callout_brown: var(--theme_dracula--bg_brown);
+ --theme_dark--callout_orange: var(--theme_dracula--bg_orange);
+ --theme_dark--callout_yellow: var(--theme_dracula--bg_yellow);
+ --theme_dark--callout_green: var(--theme_dracula--bg_green);
+ --theme_dark--callout_blue: var(--theme_dracula--bg_blue);
+ --theme_dark--callout_purple: var(--theme_dracula--bg_purple);
+ --theme_dark--callout_pink: var(--theme_dracula--bg_pink);
+ --theme_dark--callout_red: var(--theme_dracula--bg_red);
+
+ /* CODE */
+
+ --theme_dark--code_inline-text: var(--theme_dracula--green);
+ --theme_dark--code_inline-background: var(--theme_dracula--bg_light);
+
+ --theme_dark--code-text: var(--theme_dracula--fg);
+ --theme_dark--code-background: var(--theme_dracula--bg_light);
+
+ --theme_dark--code_function: var(--theme_dracula--green);
+ --theme_dark--code_parameter: var(--theme_dracula--orange);
+ --theme_dark--code_keyword: var(--theme_dracula--pink);
+ --theme_dark--code_constant: var(--theme_dracula--purple);
+ --theme_dark--code_tag: var(--theme_dracula--pink);
+ --theme_dark--code_operator: var(--theme_dracula--pink);
+ --theme_dark--code_important: var(--theme_dracula--pink);
+ --theme_dark--code_regex: var(--theme_dracula--red);
+ --theme_dark--code_property: var(--theme_dracula--blue);
+ --theme_dark--code_builtin: var(--theme_dracula--blue);
+ --theme_dark--code_class-name: var(--theme_dracula--blue);
+ --theme_dark--code_attr-name: var(--theme_dracula--green);
+ --theme_dark--code_attr-value: var(--theme_dracula--yellow);
+ --theme_dark--code_selector: var(--theme_dracula--pink);
+ --theme_dark--code_id: var(--theme_dracula--green);
+ --theme_dark--code_class: var(--theme_dracula--green);
+ --theme_dark--code_pseudo-element: var(--theme_dracula--green);
+ --theme_dark--code_pseudo-class: var(--theme_dracula--green);
+ --theme_dark--code_attribute: var(--theme_dracula--green);
+ --theme_dark--code_value: var(--theme_dracula--yellow);
+ --theme_dark--code_unit: var(--theme_dracula--pink);
+ --theme_dark--code_comment: var(--theme_dracula--comment);
+ --theme_dark--code_punctuation: var(--theme_dracula--text);
+ --theme_dark--code_annotation: var(--theme_dark--code_punctuation);
+ --theme_dark--code_decorator: var(--theme_dracula--green);
+ --theme_dark--code_doctype: var(--theme_dracula--fg_dark);
+ --theme_dark--code_number: var(--theme_dracula--purple);
+ --theme_dark--code_string: var(--theme_dracula--yellow);
+ --theme_dark--code_boolean: var(--theme_dracula--purple);
+}
diff --git a/mods/outliner/mod.js b/mods/outliner/mod.js
index 87b28af..094b362 100644
--- a/mods/outliner/mod.js
+++ b/mods/outliner/mod.js
@@ -14,7 +14,7 @@ module.exports = {
tags: ['extension', 'panel'],
name: 'outliner',
desc: 'table of contents.',
- version: '1.2.0',
+ version: '1.2.1',
author: 'CloudHill',
options: [
{
@@ -35,6 +35,6 @@ module.exports = {
name: "Outline",
icon: "icon.svg",
js: "panel.js",
- fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight
+ fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight,
}
};
diff --git a/mods/outliner/panel.js b/mods/outliner/panel.js
index a6e1d66..5ae4442 100644
--- a/mods/outliner/panel.js
+++ b/mods/outliner/panel.js
@@ -82,15 +82,15 @@ module.exports = (store, __exports) => {
const outline = document.querySelector('.outliner');
if (!outline) return;
outline.textContent = '';
- if (store().lined) outline.setAttribute('lined', '');
- const pageContent = document.querySelector('.notion-page-content');
- const headerBlocks = pageContent.querySelectorAll('[class*="header-block"]');
-
+ const pageContent = document.querySelector('.notion-page-content'),
+ headerBlocks = pageContent.querySelectorAll('[class*="header-block"]'),
+ fragment = new DocumentFragment();
+
headerBlocks.forEach(header => {
- const blockId = header.dataset.blockId.replace(/-/g, '');
- const headerEl = header.querySelector('[placeholder]');
- const placeholder = headerEl.getAttribute('placeholder');
+ const blockId = header.dataset.blockId.replace(/-/g, ''),
+ headerEl = header.querySelector('[placeholder]'),
+ placeholder = headerEl.getAttribute('placeholder');
const outlineHeader = createElement(`
<div class="outline-header" header-level="${placeholder.slice(-1)}">
@@ -100,23 +100,25 @@ module.exports = (store, __exports) => {
`);
header.outline = outlineHeader;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
- outline.append(outlineHeader);
+
+ fragment.appendChild(outlineHeader);
})
+
+ outline.appendChild(fragment);
}
function updateOutlineHeader(header) {
- const headerEl = header.querySelector('[placeholder]') || header;
+ const headerEl = header.querySelector('[placeholder]');
if (!(
headerEl &&
- header.outline &&
- header.outline.parentElement
+ header.outline?.parentElement
)) return findHeaders();
const outlineHeader = header.outline;
outlineHeader.firstElementChild.innerHTML = headerEl.innerHTML;
- updateOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
+ setOutlineLevel(outlineHeader, headerEl.getAttribute('placeholder').slice(-1));
}
- function updateOutlineLevel(outlineHeader, level) {
+ function setOutlineLevel(outlineHeader, level) {
outlineHeader.setAttribute('header-level', level);
outlineHeader.firstElementChild.setAttribute('outline-placeholder', `Header ${level}`)
}
@@ -137,6 +139,11 @@ module.exports = (store, __exports) => {
return {
onLoad() {
+ if (store().lined) {
+ const outline = document.querySelector('.outliner');
+ outline?.setAttribute('lined', '');
+ }
+
// Find headers when switching panels
if (document.querySelector('.notion-page-content')) {
startContentObserver();
@@ -152,6 +159,3 @@ module.exports = (store, __exports) => {
}
}
}
-
-
-
diff --git a/mods/tweaks/app.css b/mods/tweaks/app.css
index 3f2ccfe..6811304 100644
--- a/mods/tweaks/app.css
+++ b/mods/tweaks/app.css
@@ -54,11 +54,9 @@
margin-bottom: -1.5px !important;
}
-[data-tweaks*='[scroll_db_toolbars]'] .notion-frame > .notion-scroller > [style*="overflow: visible;"],
-[data-tweaks*='[scroll_db_toolbars]'] .notion-page-content .notion-collection_view-block > :first-child {
- overflow-x: auto !important;
+[data-tweaks*='[scroll_db_toolbars]'] .notion-collection_view-block > [style*=" height: 42px"] {
+ overflow-x: auto !important;
}
-[data-tweaks*='[scroll_db_toolbars]'] .notion-frame > .notion-scroller > [style*="overflow: visible;"]::-webkit-scrollbar,
-[data-tweaks*='[scroll_db_toolbars]'] .notion-page-content .notion-collection_view-block > :first-child::-webkit-scrollbar {
- display: none;
+[data-tweaks*='[scroll_db_toolbars]'] .notion-collection_view-block > [style*=" height: 42px"]::-webkit-scrollbar {
+ display: none;
}