From 7cbb744e5f2fd70032d0ea9f37494e89cd9943ef Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 14 Jul 2020 00:23:21 +1000 Subject: [PATCH 001/371] basic mod structure --- repo/core/mod.js | 23 +++++++++++++++++++++++ repo/core/styles.css | 0 2 files changed, 23 insertions(+) create mode 100644 repo/core/mod.js create mode 100644 repo/core/styles.css diff --git a/repo/core/mod.js b/repo/core/mod.js new file mode 100644 index 0000000..fcdee48 --- /dev/null +++ b/repo/core/mod.js @@ -0,0 +1,23 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +module.exports = { + id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', + meta: { + type: 'extension', + name: 'notion-enhancer core', + version: require('../../package.json').version, + author: 'dragonwocky', + thumb: + 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', + }, + options: [], + code: { + styles: 'styles.css', + electron: () => {}, + client: () => {}, + }, +}; diff --git a/repo/core/styles.css b/repo/core/styles.css new file mode 100644 index 0000000..e69de29 From 5c648be5ebb9c051a8513670b06b599cf505cecc Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 14 Jul 2020 13:01:07 +1000 Subject: [PATCH 002/371] document mod.js, prepare to load --- repo/core/mod.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/repo/core/mod.js b/repo/core/mod.js index fcdee48..2d261c8 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -6,18 +6,15 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', - meta: { - type: 'extension', - name: 'notion-enhancer core', - version: require('../../package.json').version, - author: 'dragonwocky', - thumb: - 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', - }, + type: 'core', + name: 'notion-enhancer', + version: require('../../package.json').version, + author: 'dragonwocky', + thumb: + 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', options: [], - code: { - styles: 'styles.css', - electron: () => {}, - client: () => {}, - }, + styles: 'styles.css', + electron: () => {}, + client: () => {}, + hack: () => {}, }; From 2cb52722dd99a3322dc6e90def73c7f22d859893 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 14 Jul 2020 21:28:05 +1000 Subject: [PATCH 003/371] redesign module system after considerations of what is most technologically friendly (both to implement and use) --- repo/core/{mod.js => meta.js} | 4 ---- 1 file changed, 4 deletions(-) rename repo/core/{mod.js => meta.js} (87%) diff --git a/repo/core/mod.js b/repo/core/meta.js similarity index 87% rename from repo/core/mod.js rename to repo/core/meta.js index 2d261c8..135c53e 100644 --- a/repo/core/mod.js +++ b/repo/core/meta.js @@ -13,8 +13,4 @@ module.exports = { thumb: 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', options: [], - styles: 'styles.css', - electron: () => {}, - client: () => {}, - hack: () => {}, }; From 8925234dc5775afbbb8fe3b357f8c9e7c6d4b04d Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 16 Jul 2020 23:14:41 +1000 Subject: [PATCH 004/371] modloader insertion --- repo/core/{meta.js => mod.js} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename repo/core/{meta.js => mod.js} (94%) diff --git a/repo/core/meta.js b/repo/core/mod.js similarity index 94% rename from repo/core/meta.js rename to repo/core/mod.js index 135c53e..61f9573 100644 --- a/repo/core/meta.js +++ b/repo/core/mod.js @@ -7,7 +7,7 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', type: 'core', - name: 'notion-enhancer', + name: 'notion-enhancer core', version: require('../../package.json').version, author: 'dragonwocky', thumb: From 8440a3dcca8ee3147d9391ffab1a601d198ec975 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 16 Jul 2020 23:48:09 +1000 Subject: [PATCH 005/371] add store to loader, bugfix homedir with wsl --- repo/core/mod.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/repo/core/mod.js b/repo/core/mod.js index 61f9573..1b3d9cc 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -8,9 +8,18 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', type: 'core', name: 'notion-enhancer core', + desc: + 'the modloader itself, including: the CLI, the menu, and enabling/disabling/insertion/updating of mods.', version: require('../../package.json').version, author: 'dragonwocky', thumb: 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', options: [], + hacks: { + 'renderer/preload.js': function (store) { + const data = store({ name: 'dragonwocky' }); + console.log(data.name); + data.name = 'tom'; + }, + }, }; From 48fa62d75d902116bcf1114b325d3bc58581908a Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 18 Jul 2020 23:21:55 +1000 Subject: [PATCH 006/371] tray failing: every time something starts working everything else falls apart :/ --- repo/core/mac+linux.png | Bin 0 -> 7192 bytes repo/core/mod.js | 8 ++++ repo/core/tray.js | 81 ++++++++++++++++++++++++++++++++++++++++ repo/core/windows.ico | Bin 0 -> 112696 bytes 4 files changed, 89 insertions(+) create mode 100644 repo/core/mac+linux.png create mode 100644 repo/core/tray.js create mode 100644 repo/core/windows.ico diff --git a/repo/core/mac+linux.png b/repo/core/mac+linux.png new file mode 100644 index 0000000000000000000000000000000000000000..83412d4389f76c295c72992f782dfb3d9f987542 GIT binary patch literal 7192 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 + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +let tray; +const electron = require('electron'), + path = require('path'), + is_mac = process.platform === 'darwin', + is_win = process.platform === 'win32', + settings = {}; + +electron.app.on('ready', () => { + tray = new electron.Tray( + is_win + ? path.resolve(__dirname, 'windows.ico') + : new electron.nativeImage.createFromPath( + path.resolve(__dirname, 'mac+linux.png') + ).resize({ + width: 16, + height: 16, + }) + ); + + const contextMenu = electron.Menu.buildFromTemplate([ + { + type: 'normal', + label: 'Bug Report', + }, + { + type: 'normal', + label: 'Feature Request', + }, + { + type: 'separator', + }, + { + type: 'normal', + label: 'Docs', + }, + { + type: 'normal', + label: 'Enhancements', + }, + { + type: 'separator', + }, + { + label: 'Quit', + role: 'quit', + }, + ]); + tray.setContextMenu(contextMenu); + tray.setToolTip('Notion'); + + function showWindows() { + const windows = electron.BrowserWindow.getAllWindows(); + if (is_mac) electron.app.show(); + if (settings.maximized) windows.forEach((win) => [win.maximize()]); + else windows.forEach((win) => win.show()); + electron.app.focus({ steal: true }); + } + function hideWindows() { + const windows = electron.BrowserWindow.getAllWindows(); + windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]); + if (is_mac) electron.app.hide(); + } + tray.on('click', () => { + const windows = electron.BrowserWindow.getAllWindows(); + if (windows.some((win) => win.isVisible())) hideWindows(); + else showWindows(); + }); + electron.globalShortcut.register(settings.hotkey, () => { + const windows = electron.BrowserWindow.getAllWindows(); + if (windows.some((win) => win.isFocused() && win.isVisible())) + hideWindows(); + else showWindows(); + }); +}); diff --git a/repo/core/windows.ico b/repo/core/windows.ico new file mode 100644 index 0000000000000000000000000000000000000000..b46f68cf8ad88d1dc489d49700ca4da9b7cc473f GIT binary patch literal 112696 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 Date: Sat, 18 Jul 2020 23:50:56 +1000 Subject: [PATCH 007/371] de-async-ifying stuff = tray fixed! --- repo/core/mod.js | 2 +- repo/core/tray.js | 144 ++++++++++++++++++++++++---------------------- 2 files changed, 75 insertions(+), 71 deletions(-) diff --git a/repo/core/mod.js b/repo/core/mod.js index 05a8f88..295e0d7 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -23,7 +23,7 @@ module.exports = { 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', options: [], hacks: { - // 'main/main.js': require('./tray.js')(defaults), + 'main/main.js': require('./tray.js')(defaults), 'renderer/preload.js': function (store) { const data = store({ name: 'dragonwocky' }); console.log(data.name); diff --git a/repo/core/tray.js b/repo/core/tray.js index 729680c..0423260 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -6,76 +6,80 @@ */ let tray; -const electron = require('electron'), - path = require('path'), - is_mac = process.platform === 'darwin', - is_win = process.platform === 'win32', - settings = {}; -electron.app.on('ready', () => { - tray = new electron.Tray( - is_win - ? path.resolve(__dirname, 'windows.ico') - : new electron.nativeImage.createFromPath( - path.resolve(__dirname, 'mac+linux.png') - ).resize({ - width: 16, - height: 16, - }) - ); +module.exports = (defaults) => + function (store) { + const electron = require('electron'), + path = require('path'), + is_mac = process.platform === 'darwin', + is_win = process.platform === 'win32', + settings = store(defaults); - const contextMenu = electron.Menu.buildFromTemplate([ - { - type: 'normal', - label: 'Bug Report', - }, - { - type: 'normal', - label: 'Feature Request', - }, - { - type: 'separator', - }, - { - type: 'normal', - label: 'Docs', - }, - { - type: 'normal', - label: 'Enhancements', - }, - { - type: 'separator', - }, - { - label: 'Quit', - role: 'quit', - }, - ]); - tray.setContextMenu(contextMenu); - tray.setToolTip('Notion'); + electron.app.on('ready', () => { + tray = new electron.Tray( + is_win + ? path.normalize(`${__dirname}/windows.ico`) + : new electron.nativeImage.createFromPath( + path.normalize(`${__dirname}/mac+linux.png`) + ).resize({ + width: 16, + height: 16, + }) + ); - function showWindows() { - const windows = electron.BrowserWindow.getAllWindows(); - if (is_mac) electron.app.show(); - if (settings.maximized) windows.forEach((win) => [win.maximize()]); - else windows.forEach((win) => win.show()); - electron.app.focus({ steal: true }); - } - function hideWindows() { - const windows = electron.BrowserWindow.getAllWindows(); - windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]); - if (is_mac) electron.app.hide(); - } - tray.on('click', () => { - const windows = electron.BrowserWindow.getAllWindows(); - if (windows.some((win) => win.isVisible())) hideWindows(); - else showWindows(); - }); - electron.globalShortcut.register(settings.hotkey, () => { - const windows = electron.BrowserWindow.getAllWindows(); - if (windows.some((win) => win.isFocused() && win.isVisible())) - hideWindows(); - else showWindows(); - }); -}); + const contextMenu = electron.Menu.buildFromTemplate([ + { + type: 'normal', + label: 'Bug Report', + }, + { + type: 'normal', + label: 'Feature Request', + }, + { + type: 'separator', + }, + { + type: 'normal', + label: 'Docs', + }, + { + type: 'normal', + label: 'Enhancements', + }, + { + type: 'separator', + }, + { + label: 'Quit', + role: 'quit', + }, + ]); + tray.setContextMenu(contextMenu); + tray.setToolTip('Notion'); + + function showWindows() { + const windows = electron.BrowserWindow.getAllWindows(); + if (is_mac) electron.app.show(); + if (settings.maximized) windows.forEach((win) => [win.maximize()]); + else windows.forEach((win) => win.show()); + electron.app.focus({ steal: true }); + } + function hideWindows() { + const windows = electron.BrowserWindow.getAllWindows(); + windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]); + if (is_mac) electron.app.hide(); + } + tray.on('click', () => { + const windows = electron.BrowserWindow.getAllWindows(); + if (windows.some((win) => win.isVisible())) hideWindows(); + else showWindows(); + }); + electron.globalShortcut.register(settings.hotkey, () => { + const windows = electron.BrowserWindow.getAllWindows(); + if (windows.some((win) => win.isFocused() && win.isVisible())) + hideWindows(); + else showWindows(); + }); + }); + }; From a3e55c61218123b9514cab9fc44eab87eb0b6087 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 19 Jul 2020 16:24:34 +1000 Subject: [PATCH 008/371] taken control of createWindow --- repo/core/icons/alwaysontop_off.svg | 1 + repo/core/icons/alwaysontop_on.svg | 1 + repo/core/icons/close.svg | 1 + repo/core/{ => icons}/mac+linux.png | Bin repo/core/icons/maximise_off.svg | 1 + repo/core/icons/maximise_on.svg | 1 + repo/core/icons/minimise.svg | 1 + repo/core/{ => icons}/windows.ico | Bin repo/core/mod.js | 14 +++-- repo/core/tray.js | 22 ++++++- repo/core/window.js | 85 ++++++++++++++++++++++++++++ 11 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 repo/core/icons/alwaysontop_off.svg create mode 100644 repo/core/icons/alwaysontop_on.svg create mode 100644 repo/core/icons/close.svg rename repo/core/{ => icons}/mac+linux.png (100%) create mode 100644 repo/core/icons/maximise_off.svg create mode 100644 repo/core/icons/maximise_on.svg create mode 100644 repo/core/icons/minimise.svg rename repo/core/{ => icons}/windows.ico (100%) create mode 100644 repo/core/window.js diff --git a/repo/core/icons/alwaysontop_off.svg b/repo/core/icons/alwaysontop_off.svg new file mode 100644 index 0000000..e731f9b --- /dev/null +++ b/repo/core/icons/alwaysontop_off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/icons/alwaysontop_on.svg b/repo/core/icons/alwaysontop_on.svg new file mode 100644 index 0000000..b9befcd --- /dev/null +++ b/repo/core/icons/alwaysontop_on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/icons/close.svg b/repo/core/icons/close.svg new file mode 100644 index 0000000..7268fb0 --- /dev/null +++ b/repo/core/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/mac+linux.png b/repo/core/icons/mac+linux.png similarity index 100% rename from repo/core/mac+linux.png rename to repo/core/icons/mac+linux.png diff --git a/repo/core/icons/maximise_off.svg b/repo/core/icons/maximise_off.svg new file mode 100644 index 0000000..e79979f --- /dev/null +++ b/repo/core/icons/maximise_off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/icons/maximise_on.svg b/repo/core/icons/maximise_on.svg new file mode 100644 index 0000000..038b21e --- /dev/null +++ b/repo/core/icons/maximise_on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/icons/minimise.svg b/repo/core/icons/minimise.svg new file mode 100644 index 0000000..e40cd84 --- /dev/null +++ b/repo/core/icons/minimise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/windows.ico b/repo/core/icons/windows.ico similarity index 100% rename from repo/core/windows.ico rename to repo/core/icons/windows.ico diff --git a/repo/core/mod.js b/repo/core/mod.js index 295e0d7..d8e90e5 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -7,7 +7,8 @@ const defaults = { openhidden: false, maximized: false, - tray: false, + close_to_tray: false, + frameless: true, hotkey: 'CmdOrCtrl+Shift+A', }; @@ -24,10 +25,13 @@ module.exports = { options: [], hacks: { 'main/main.js': require('./tray.js')(defaults), - 'renderer/preload.js': function (store) { - const data = store({ name: 'dragonwocky' }); - console.log(data.name); - data.name = 'tom'; + 'main/createWindow.js': require('./window.js')(defaults), + 'renderer/preload.js': function (store, __exports) { + const window = require('electron').remote.getCurrentWindow(); + document.defaultView.addEventListener('keyup', (event) => { + if (event.code === 'F5') window.reload(); + // if (event.code === 'F4' && event.altKey) window.close(); + }); }, }, }; diff --git a/repo/core/tray.js b/repo/core/tray.js index 0423260..0a9175d 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -8,7 +8,7 @@ let tray; module.exports = (defaults) => - function (store) { + function (store, __exports) { const electron = require('electron'), path = require('path'), is_mac = process.platform === 'darwin', @@ -18,9 +18,9 @@ module.exports = (defaults) => electron.app.on('ready', () => { tray = new electron.Tray( is_win - ? path.normalize(`${__dirname}/windows.ico`) + ? path.resolve(`${__dirname}/icons/windows.ico`) : new electron.nativeImage.createFromPath( - path.normalize(`${__dirname}/mac+linux.png`) + path.resolve(`${__dirname}/icons/mac+linux.png`) ).resize({ width: 16, height: 16, @@ -31,10 +31,20 @@ module.exports = (defaults) => { type: 'normal', label: 'Bug Report', + click: () => { + electron.shell.openExternal( + 'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md' + ); + }, }, { type: 'normal', label: 'Feature Request', + click: () => { + electron.shell.openExternal( + 'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md' + ); + }, }, { type: 'separator', @@ -42,6 +52,11 @@ module.exports = (defaults) => { type: 'normal', label: 'Docs', + click: () => { + electron.shell.openExternal( + 'https://github.com/dragonwocky/notion-enhancer/tree/js' + ); + }, }, { type: 'normal', @@ -70,6 +85,7 @@ module.exports = (defaults) => windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]); if (is_mac) electron.app.hide(); } + tray.on('click', () => { const windows = electron.BrowserWindow.getAllWindows(); if (windows.some((win) => win.isVisible())) hideWindows(); diff --git a/repo/core/window.js b/repo/core/window.js new file mode 100644 index 0000000..82ddc49 --- /dev/null +++ b/repo/core/window.js @@ -0,0 +1,85 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +module.exports = (defaults) => + function (store, __exports) { + const electron = require('electron'), + allWindows = electron.BrowserWindow.getAllWindows, + createWindow = __exports.createWindow, + path = require('path'), + is_mac = process.platform === 'darwin', + settings = store(defaults), + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(); + + __exports.createWindow = function (relativeUrl) { + if (!relativeUrl) relativeUrl = ''; + const window_state = require(`${__notion.replace( + /\\/g, + '/' + )}/app/node_modules/electron-window-state/index.js`)({ + defaultWidth: 1320, + defaultHeight: 860, + }), + rect = { + x: window_state.x, + y: window_state.y, + width: window_state.width, + height: window_state.height, + }, + focused_window = electron.BrowserWindow.getFocusedWindow(); + if (focused_window && !focused_window.isMaximized()) { + rect.x = focused_window.getPosition()[0] + 20; + rect.y = focused_window.getPosition()[1] + 20; + rect.width = focused_window.getSize()[0]; + rect.height = focused_window.getSize()[1]; + } + const window = new electron.BrowserWindow({ + show: false, + backgroundColor: '#ffffff', + titleBarStyle: 'hiddenInset', + frame: !settings.frameless, + webPreferences: { + preload: path.resolve(`${__notion}/app/renderer/index.js`), + webviewTag: true, + session: electron.session.fromPartition('persist:notion'), + }, + ...rect, + }); + window.once('ready-to-show', function () { + if ( + !settings.openhidden || + allWindows().some((win) => win.isVisible() && win.id != window.id) + ) { + window.show(); + if (settings.maximized) window.maximize(); + if ( + (focused_window && focused_window.isFullScreen()) || + window_state.isFullScreen + ) + window.setFullScreen(true); + } + }); + let intended_quit = false; + window.on('close', (e) => { + if ( + intended_quit || + !settings.close_to_tray || + allWindows().length > 1 + ) { + window_state.saveState(window); + window = null; + } else { + e.preventDefault(); + window.hide(); + } + }); + electron.app.on('before-quit', () => (intended_quit = true)); + window.loadURL(__exports.getIndexUrl(relativeUrl)); + return window; + }; + }; From 35a411b97721c0bcb300e71f0939e355805de5ad Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 19 Jul 2020 22:50:59 +1000 Subject: [PATCH 009/371] titlebar + scrollbars --- .../{maximise_off.svg => maximize_off.svg} | 0 .../{maximise_on.svg => maximize_on.svg} | 0 .../core/icons/{minimise.svg => minimize.svg} | 0 repo/core/mod.js | 13 +- repo/core/scrollbars.css | 34 +++++ repo/core/styles.css | 9 ++ repo/core/titlebar.css | 86 +++++++++++ repo/core/titlebar.js | 137 ++++++++++++++++++ repo/core/tray.js | 1 + repo/core/window.js | 3 +- 10 files changed, 272 insertions(+), 11 deletions(-) rename repo/core/icons/{maximise_off.svg => maximize_off.svg} (100%) rename repo/core/icons/{maximise_on.svg => maximize_on.svg} (100%) rename repo/core/icons/{minimise.svg => minimize.svg} (100%) create mode 100644 repo/core/scrollbars.css create mode 100644 repo/core/titlebar.css create mode 100644 repo/core/titlebar.js diff --git a/repo/core/icons/maximise_off.svg b/repo/core/icons/maximize_off.svg similarity index 100% rename from repo/core/icons/maximise_off.svg rename to repo/core/icons/maximize_off.svg diff --git a/repo/core/icons/maximise_on.svg b/repo/core/icons/maximize_on.svg similarity index 100% rename from repo/core/icons/maximise_on.svg rename to repo/core/icons/maximize_on.svg diff --git a/repo/core/icons/minimise.svg b/repo/core/icons/minimize.svg similarity index 100% rename from repo/core/icons/minimise.svg rename to repo/core/icons/minimize.svg diff --git a/repo/core/mod.js b/repo/core/mod.js index d8e90e5..b951b1f 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -5,10 +5,11 @@ */ const defaults = { - openhidden: false, + openhidden: true, maximized: false, - close_to_tray: false, + close_to_tray: true, frameless: true, + smooth_scrollbars: true, hotkey: 'CmdOrCtrl+Shift+A', }; @@ -26,12 +27,6 @@ module.exports = { hacks: { 'main/main.js': require('./tray.js')(defaults), 'main/createWindow.js': require('./window.js')(defaults), - 'renderer/preload.js': function (store, __exports) { - const window = require('electron').remote.getCurrentWindow(); - document.defaultView.addEventListener('keyup', (event) => { - if (event.code === 'F5') window.reload(); - // if (event.code === 'F4' && event.altKey) window.close(); - }); - }, + 'renderer/preload.js': require('./titlebar.js')(defaults), }, }; diff --git a/repo/core/scrollbars.css b/repo/core/scrollbars.css new file mode 100644 index 0000000..f512b59 --- /dev/null +++ b/repo/core/scrollbars.css @@ -0,0 +1,34 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +.smooth-scrollbars .notion-scroller { + cursor: auto; +} +.smooth-scrollbars ::-webkit-scrollbar { + width: 8px; /* vertical */ + height: 8px; /* horizontal */ +} +.smooth-scrollbars ::-webkit-scrollbar-corner { + background-color: transparent; /* overlap */ +} +.smooth-scrollbars ::-webkit-scrollbar-thumb { + border-radius: 5px; +} + +.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { + background-color: #d9d8d6; + border: 1px solid #cacac8; +} +.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { + background: #cacac8; +} +.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb { + background-color: #505457; +} +.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover { + background: #696d6f; +} diff --git a/repo/core/styles.css b/repo/core/styles.css index e69de29..041fcae 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -0,0 +1,9 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +@import './scrollbars.css'; +@import './titlebar.css'; diff --git a/repo/core/titlebar.css b/repo/core/titlebar.css new file mode 100644 index 0000000..1e91e2d --- /dev/null +++ b/repo/core/titlebar.css @@ -0,0 +1,86 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +.frameless .notion-topbar { + height: 55px !important; +} + +.frameless .window-dragarea { + height: 10px; + width: 100%; +} +.frameless .notion-light-theme .window-dragarea { + background: #e6e6e6; +} +.frameless .notion-dark-theme .window-dragarea { + background: #272d2f; +} + +.window-buttons-area { + display: flex; + align-items: center; + font-size: 14px; +} +@media (max-width: 760px) { + .notion-topbar { + height: 95px !important; + } + .notion-topbar > :nth-child(2) { + display: grid !important; + height: 85px !important; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + } + .window-buttons-area { + grid-row: 1; + grid-column: 9 / span end; + justify-content: flex-end; + } + .notion-topbar-breadcrumb { + grid-row: 2; + grid-column: 1 / span 8; + } + .notion-topbar-actions { + grid-row: 2; + grid-column: 9 / span end; + justify-content: flex-end; + } +} + +.window-button { + background: transparent; + border: 0; + margin: 0px 0px 0px 9px; + width: 32px; + line-height: 26px; + border-radius: 4px; + font-size: 16px; + transition: background 0.2s; + cursor: default; +} +.window-button svg { + margin-top: 8px; + width: 14px; + height: 14px; +} +.window-button svg path { + fill: currentColor; +} +.window-button svg line { + stroke: currentColor; +} +.notion-light-theme .window-button:hover { + background: rgb(239, 239, 239); +} +.notion-dark-theme .window-button:hover { + background: rgb(71, 76, 80); +} +.window-button.btn-close:hover { + background: #e81123; +} +.window-button.btn-close:hover svg line { + stroke: white; +} diff --git a/repo/core/titlebar.js b/repo/core/titlebar.js new file mode 100644 index 0000000..3133026 --- /dev/null +++ b/repo/core/titlebar.js @@ -0,0 +1,137 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +module.exports = (defaults) => + function (store, __exports) { + const electron = require('electron'), + browser = electron.remote.getCurrentWindow(), + path = require('path'), + fs = require('fs-extra'), + is_mac = process.platform === 'darwin', + settings = store(defaults); + + document.defaultView.addEventListener('keyup', (event) => { + if (event.code === 'F5') window.reload(); + // if (event.code === 'F4' && event.altKey) window.close(); + }); + + const attempt = setInterval(enhance, 500); + async function enhance() { + if (!document.querySelector('.notion-frame')) return; + clearInterval(attempt); + + if (settings.smooth_scrollbars) + document.body.classList.add('smooth-scrollbars'); + + if (settings.frameless) { + document.body.classList.add('frameless'); + const dragarea = document.createElement('div'); + dragarea.className = 'window-dragarea'; + document.querySelector('.notion-topbar').prepend(dragarea); + } + + const buttons = { + element: document.createElement('span'), + insert: ['alwaysontop'], + icons: { + raw: { + alwaysontop: { + on: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) + ), + off: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) + ), + }, + minimize: fs.readFile( + path.resolve(`${__dirname}/icons/minimize.svg`) + ), + maximize: { + on: fs.readFile( + path.resolve(`${__dirname}/icons/maximize_on.svg`) + ), + off: fs.readFile( + path.resolve(`${__dirname}/icons/maximize_off.svg`) + ), + }, + close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), + }, + alwaysontop() { + return browser.isAlwaysOnTop() + ? buttons.icons.raw.alwaysontop.on + : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' + }, + minimize() { + return buttons.icons.raw.minimize; // '⚊' + }, + maximize() { + return browser.isMaximized() + ? buttons.icons.raw.maximize.on + : buttons.icons.raw.maximize.off; // '🗗' : '🗖' + }, + close() { + return buttons.icons.raw.close; // '⨉' + }, + }, + actions: { + async alwaysontop() { + browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); + this.innerHTML = await buttons.icons.alwaysontop(); + }, + minimize() { + browser.minimize(); + }, + async maximize() { + browser.isMaximized() ? browser.unmaximize() : browser.maximize(); + this.innerHTML = await buttons.icons.maximize(); + }, + close(event = null) { + if ( + settings.close_to_tray && + electron.remote.BrowserWindow.getAllWindows().length === 1 + ) { + if (event) event.preventDefault(); + browser.hide(); + } else browser.close(); + }, + }, + }; + + if (settings.frameless && !is_mac) + buttons.insert.push('minimize', 'maximize', 'close'); + buttons.element.className = 'window-buttons-area'; + for (let btn of buttons.insert) { + buttons.element.innerHTML += ``; + } + + document + .querySelector('.notion-topbar > div[style*="display: flex"]') + .appendChild(buttons.element); + document + .querySelector('.notion-history-back-button') + .parentElement.nextElementSibling.classList.add( + 'notion-topbar-breadcrumb' + ); + document + .querySelector('.notion-topbar-share-menu') + .parentElement.classList.add('notion-topbar-actions'); + + for (let btn of buttons.insert) { + document.querySelector(`.window-button.btn-${btn}`).onclick = + buttons.actions[btn]; + } + + // if (!isMac) { + // setInterval(() => { + // if (button_elements.maximize.innerHTML != buttons.icons.maximize()) + // button_elements.maximize.innerHTML = buttons.icons.maximize(); + // }, 1000); + // } + } + }; diff --git a/repo/core/tray.js b/repo/core/tray.js index 0a9175d..53525b3 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -61,6 +61,7 @@ module.exports = (defaults) => { type: 'normal', label: 'Enhancements', + // will open menu }, { type: 'separator', diff --git a/repo/core/window.js b/repo/core/window.js index 82ddc49..73c7b4a 100644 --- a/repo/core/window.js +++ b/repo/core/window.js @@ -9,9 +9,8 @@ module.exports = (defaults) => function (store, __exports) { const electron = require('electron'), allWindows = electron.BrowserWindow.getAllWindows, - createWindow = __exports.createWindow, + // createWindow = __exports.createWindow, path = require('path'), - is_mac = process.platform === 'darwin', settings = store(defaults), helpers = require('../../pkg/helpers.js'), __notion = helpers.getNotion(); From 9a012eb3a73c132b794d09921aa0ae3e6c95dd60 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 21 Jul 2020 00:09:24 +1000 Subject: [PATCH 010/371] configurable dragarea size --- repo/core/dragarea.js | 31 +++++++++++++++++++++++++++++++ repo/core/mod.js | 2 ++ repo/core/titlebar.css | 12 ++++++------ repo/core/titlebar.js | 35 +++++++++++++++++++++++++---------- 4 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 repo/core/dragarea.js diff --git a/repo/core/dragarea.js b/repo/core/dragarea.js new file mode 100644 index 0000000..1720035 --- /dev/null +++ b/repo/core/dragarea.js @@ -0,0 +1,31 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +module.exports = (defaults) => + function (store, __exports) { + const __start = window['__start'], + settings = store(defaults); + + window['__start'] = function () { + __start(); + const dragarea = document.querySelector( + '#root [style*="-webkit-app-region: drag"]' + ), + default_styles = dragarea.getAttribute('style'); + + document + .getElementById('notion') + .addEventListener('ipc-message', (event) => { + if (event.channel.startsWith('enhancer:sidebar-width-')) + dragarea.setAttribute( + 'style', + `${default_styles} left: height: ${ + settings.dragarea_height + }px; ${event.channel.slice('enhancer:sidebar-width-'.length)};` + ); + }); + }; + }; diff --git a/repo/core/mod.js b/repo/core/mod.js index b951b1f..813df8d 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -9,6 +9,7 @@ const defaults = { maximized: false, close_to_tray: true, frameless: true, + dragarea_height: 12.5, smooth_scrollbars: true, hotkey: 'CmdOrCtrl+Shift+A', }; @@ -27,6 +28,7 @@ module.exports = { hacks: { 'main/main.js': require('./tray.js')(defaults), 'main/createWindow.js': require('./window.js')(defaults), + 'renderer/index.js': require('./dragarea.js')(defaults), 'renderer/preload.js': require('./titlebar.js')(defaults), }, }; diff --git a/repo/core/titlebar.css b/repo/core/titlebar.css index 1e91e2d..7988bf4 100644 --- a/repo/core/titlebar.css +++ b/repo/core/titlebar.css @@ -6,11 +6,11 @@ */ .frameless .notion-topbar { - height: 55px !important; + height: calc(var(--dragarea-height, 10px) + 45px) !important; } .frameless .window-dragarea { - height: 10px; + height: var(--dragarea-height, 10px); width: 100%; } .frameless .notion-light-theme .window-dragarea { @@ -26,12 +26,12 @@ font-size: 14px; } @media (max-width: 760px) { - .notion-topbar { - height: 95px !important; + .frameless .notion-topbar { + height: calc(var(--dragarea-height, 10px) + 80px) !important; } - .notion-topbar > :nth-child(2) { + .frameless .notion-topbar > :nth-child(2) { + height: 80px !important; display: grid !important; - height: 85px !important; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } .window-buttons-area { diff --git a/repo/core/titlebar.js b/repo/core/titlebar.js index 3133026..44fcb6e 100644 --- a/repo/core/titlebar.js +++ b/repo/core/titlebar.js @@ -14,9 +14,9 @@ module.exports = (defaults) => is_mac = process.platform === 'darwin', settings = store(defaults); + // additional hotkeys document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') window.reload(); - // if (event.code === 'F4' && event.altKey) window.close(); }); const attempt = setInterval(enhance, 500); @@ -24,16 +24,37 @@ module.exports = (defaults) => if (!document.querySelector('.notion-frame')) return; clearInterval(attempt); + // scrollbars if (settings.smooth_scrollbars) document.body.classList.add('smooth-scrollbars'); + // frameless if (settings.frameless) { document.body.classList.add('frameless'); - const dragarea = document.createElement('div'); + + // draggable area + const dragarea = document.createElement('div'), + sidebar = document.querySelector('.notion-sidebar'); dragarea.className = 'window-dragarea'; document.querySelector('.notion-topbar').prepend(dragarea); + document.documentElement.style.setProperty( + '--dragarea-height', + `${settings.dragarea_height}px` + ); + let sidebar_width; + setInterval(() => { + let new_width = + sidebar.style.opacity === '0' ? '0px' : sidebar.style.width; + if (sidebar_width !== new_width) { + sidebar_width = new_width; + electron.ipcRenderer.sendToHost( + `enhancer:sidebar-width-${sidebar_width}` + ); + } + }, 100); } + // window buttons const buttons = { element: document.createElement('span'), insert: ['alwaysontop'], @@ -89,14 +110,8 @@ module.exports = (defaults) => browser.isMaximized() ? browser.unmaximize() : browser.maximize(); this.innerHTML = await buttons.icons.maximize(); }, - close(event = null) { - if ( - settings.close_to_tray && - electron.remote.BrowserWindow.getAllWindows().length === 1 - ) { - if (event) event.preventDefault(); - browser.hide(); - } else browser.close(); + close() { + browser.close(); }, }, }; From 8a1709c559fa0476f9aae45421f3eb72d83970f5 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 21 Jul 2020 09:47:19 +1000 Subject: [PATCH 011/371] maximise icon updates as needed --- repo/core/dragarea.js | 5 ++--- repo/core/titlebar.js | 19 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/repo/core/dragarea.js b/repo/core/dragarea.js index 1720035..b204f4b 100644 --- a/repo/core/dragarea.js +++ b/repo/core/dragarea.js @@ -22,9 +22,8 @@ module.exports = (defaults) => if (event.channel.startsWith('enhancer:sidebar-width-')) dragarea.setAttribute( 'style', - `${default_styles} left: height: ${ - settings.dragarea_height - }px; ${event.channel.slice('enhancer:sidebar-width-'.length)};` + `${default_styles} height: ${settings.dragarea_height}px; left: ${ + event.channel.slice('enhancer:sidebar-width-'.length)};` ); }); }; diff --git a/repo/core/titlebar.js b/repo/core/titlebar.js index 44fcb6e..4c26ca1 100644 --- a/repo/core/titlebar.js +++ b/repo/core/titlebar.js @@ -33,8 +33,7 @@ module.exports = (defaults) => document.body.classList.add('frameless'); // draggable area - const dragarea = document.createElement('div'), - sidebar = document.querySelector('.notion-sidebar'); + const dragarea = document.createElement('div'); dragarea.className = 'window-dragarea'; document.querySelector('.notion-topbar').prepend(dragarea); document.documentElement.style.setProperty( @@ -43,8 +42,9 @@ module.exports = (defaults) => ); let sidebar_width; setInterval(() => { + const sidebar = document.querySelector('.notion-sidebar'); let new_width = - sidebar.style.opacity === '0' ? '0px' : sidebar.style.width; + sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; if (sidebar_width !== new_width) { sidebar_width = new_width; electron.ipcRenderer.sendToHost( @@ -124,6 +124,12 @@ module.exports = (defaults) => btn ]()}`; } + if (settings.frameless && !is_mac) + setInterval(async () => { + const icon = await buttons.icons.maximize(), + el = buttons.element.querySelector('.btn-maximize'); + if (el.innerHTML != icon) el.innerHTML = icon; + }, 100); document .querySelector('.notion-topbar > div[style*="display: flex"]') @@ -141,12 +147,5 @@ module.exports = (defaults) => document.querySelector(`.window-button.btn-${btn}`).onclick = buttons.actions[btn]; } - - // if (!isMac) { - // setInterval(() => { - // if (button_elements.maximize.innerHTML != buttons.icons.maximize()) - // button_elements.maximize.innerHTML = buttons.icons.maximize(); - // }, 1000); - // } } }; From 2d37b807eafb8acf54501a10a439bf5268f1463e Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 22 Jul 2020 23:45:59 +1000 Subject: [PATCH 012/371] collect theme variables: dark colours --- repo/core/scrollbars.css | 20 ++-- repo/core/styles.css | 1 + repo/core/theme.css | 243 +++++++++++++++++++++++++++++++++++++++ repo/core/titlebar.css | 51 ++++---- repo/core/titlebar.js | 2 +- 5 files changed, 286 insertions(+), 31 deletions(-) create mode 100644 repo/core/theme.css diff --git a/repo/core/scrollbars.css b/repo/core/scrollbars.css index f512b59..7402d8c 100644 --- a/repo/core/scrollbars.css +++ b/repo/core/scrollbars.css @@ -19,16 +19,18 @@ border-radius: 5px; } -.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { - background-color: #d9d8d6; - border: 1px solid #cacac8; -} -.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { - background: #cacac8; -} .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb { - background-color: #505457; + background-color: var(--theme_dark-scrollbar); + border: var(--theme_dark-scrollbar-border); } .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover { - background: #696d6f; + background: var(--theme_dark-scrollbar_hover); +} + +.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { + background-color: var(--theme_light-scrollbar); + border: 1px solid var(--theme_light-scrollbar-border); +} +.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { + background: var(--theme_light-scrollbar_hover); } diff --git a/repo/core/styles.css b/repo/core/styles.css index 041fcae..3019d73 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -5,5 +5,6 @@ * (https://dragonwocky.me/) under the MIT license */ +@import './theme.css'; @import './scrollbars.css'; @import './titlebar.css'; diff --git a/repo/core/theme.css b/repo/core/theme.css new file mode 100644 index 0000000..2aa8999 --- /dev/null +++ b/repo/core/theme.css @@ -0,0 +1,243 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +:root { + /** light **/ + + --theme_light-dragarea: #e6e6e6; + --theme_light-button_hover: rgb(239, 239, 239); + --theme_light-button_hover-border: transparent; + --theme_light-button_close: #e81123; + --theme_light-button_close-fill: white; + + --theme_light-scrollbar: #d9d8d6; + --theme_light-scrollbar-border: #cacac8; + --theme_light-scrollbar_hover: #cacac8; + + /** dark **/ + + --theme_dark-main: rgb(47, 52, 55); + --theme_dark-sidebar: rgb(55, 60, 63); + --theme_dark-dragarea: #272d2f; + --theme_dark-primary: rgb(46, 170, 220); + --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-card: rgb(63, 68, 71); + --theme_dark-card_border: rgb(63, 68, 71); + --theme_dark-button_hover: rgb(71, 76, 80); + --theme_dark-button_close: #e81123; + --theme_dark-button_close-fill: white; + --theme_dark-button_hover-border: transparent; + --theme_dark-table_border: rgba(255, 255, 255, 0.1); + + --theme_dark-scrollbar: #505457; + --theme_dark-scrollbar-border: transparent; + --theme_dark-scrollbar_hover: #696d6f; + + --theme_dark-text_gray: rgba(151, 154, 155, 0.95); + --theme_dark-text_brown: rgb(147, 114, 100); + --theme_dark-text_orange: rgb(255, 163, 68); + --theme_dark-text_yellow: rgb(255, 220, 73); + --theme_dark-text_green: rgb(77, 171, 154); + --theme_dark-text_blue: rgb(82, 156, 202); + --theme_dark-text_purple: rgb(154, 109, 215); + --theme_dark-text_pink: rgb(226, 85, 161); + --theme_dark-text_red: rgb(255, 115, 105); + --theme_dark-bg_gray: rgba(151, 154, 155, 0.5); + --theme_dark-bg_brown: rgba(147, 114, 100, 0.5); + --theme_dark-bg_orange: rgba(255, 163, 68, 0.5); + --theme_dark-bg_yellow: rgba(255, 220, 73, 0.5); + --theme_dark-bg_green: rgba(77, 171, 154, 0.5); + --theme_dark-bg_blue: rgba(82, 156, 202, 0.5); + --theme_dark-bg_purple: rgba(154, 109, 215, 0.5); + --theme_dark-bg_pink: rgba(226, 85, 161, 0.5); + --theme_dark-bg_red: rgba(255, 115, 105, 0.5); + --theme_dark-line_gray: rgb(69, 75, 78); + --theme_dark-line_brown: rgb(67, 64, 64); + --theme_dark-line_orange: rgb(89, 74, 58); + --theme_dark-line_yellow: rgb(89, 86, 59); + --theme_dark-line_green: rgb(53, 76, 75); + --theme_dark-line_blue: rgb(54, 73, 84); + --theme_dark-line_purple: rgb(68, 63, 87); + --theme_dark-line_pink: rgb(83, 59, 76); + --theme_dark-line_red: rgb(89, 65, 65); +} + +/** backgrounds **/ + +.notion-dark-theme [style*='background: rgb(55, 60, 63)'], +.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { + background: var(--theme_dark-sidebar) !important; +} +.notion-body.dark, +.notion-dark-theme [style*='background: rgb(47, 52, 55)'] { + background: var(--theme_dark-main) !important; +} + +/** databases **/ + +.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: none !important; +} +.notion-dark-theme .notion-table-view > :first-child > :first-child, +.notion-dark-theme [style*='background: rgb(71, 76, 80)'], +.notion-dark-theme [style*='background: rgb(80, 85, 88)'], +.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { + background: var(--theme_dark-button_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); +} + +.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { + background: var(--theme_dark-card) !important; +} +.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { + border: 0.5px solid var(--theme_dark-card_border); +} + +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] { + border-top: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { + box-shadow: var(--theme_dark-table_border) -1px 0px 0px !important; +} +.notion-dark-theme + [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme + [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] { + border-bottom: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark-table_border) 0px 1px 0px !important; +} +.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme + [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] { + border-right: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { + box-shadow: var(--theme_dark-table_border) 0px -1px 0px !important; +} +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] { + border-left: 1px solid var(--theme_dark-table_border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { + box-shadow: var(--theme_dark-table_border) 0px 1px 0px inset !important; +} + +/** colours **/ + +.notion-dark-theme [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_dark-primary) !important; +} +.notion-dark-theme [style*='background: rgb(6, 156, 205)'] { + background: var(--theme_dark-primary_hover) !important; +} +.notion-dark-theme [style*='background: rgb(0, 141, 190)'] { + background: var(--theme_dark-primary_click) !important; +} +.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { + background: var(--theme_dark-primary_indicator) !important; +} + +.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { + color: var(--theme_dark-text_gray) !important; +} +.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], +.notion-dark-theme [style*='background:rgb(69,75,78)'] { + background: var(--theme_dark-bg_gray) !important; +} +.notion-dark-theme [style*='background: rgb(69, 75, 78)'] { + background: var(--theme_dark-line_gray) !important; +} +.notion-dark-theme [style*='color:rgb(147,114,100)'] { + color: var(--theme_dark-text_brown) !important; +} +.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], +.notion-dark-theme [style*='background:rgb(67,64,64)'] { + background: var(--theme_dark-bg_brown) !important; +} +.notion-dark-theme [style*='background: rgb(67, 64, 64)'] { + background: var(--theme_dark-line_brown) !important; +} +.notion-dark-theme [style*='color:rgb(255,163,68)'] { + color: var(--theme_dark-text_orange) !important; +} +.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], +.notion-dark-theme [style*='background:rgb(89,74,58)'] { + background: var(--theme_dark-bg_orange) !important; +} +.notion-dark-theme [style*='background: rgb(89, 74, 58)'] { + background: var(--theme_dark-line_orange) !important; +} +.notion-dark-theme [style*='color:rgb(255,220,73)'] { + color: var(--theme_dark-text_yellow) !important; +} +.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], +.notion-dark-theme [style*='background:rgb(89,86,59)'] { + background: var(--theme_dark-bg_yellow) !important; +} +.notion-dark-theme [style*='background: rgb(89, 86, 59)'] { + background: var(--theme_dark-line_yellow) !important; +} +.notion-dark-theme [style*='color:rgb(77,171,154)'] { + color: var(--theme_dark-text_green) !important; +} +.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], +.notion-dark-theme [style*='background:rgb(53,76,75)'] { + background: var(--theme_dark-bg_green) !important; +} +.notion-dark-theme [style*='background: rgb(53, 76, 75)'] { + background: var(--theme_dark-line_green) !important; +} +.notion-dark-theme [style*='color:rgb(82,156,202)'] { + color: var(--theme_dark-text_blue) !important; +} +.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], +.notion-dark-theme [style*='background:rgb(54,73,84)'] { + background: var(--theme_dark-bg_blue) !important; +} +.notion-dark-theme [style*='background: rgb(54, 73, 84)'] { + background: var(--theme_dark-line_blue) !important; +} +.notion-dark-theme [style*='color:rgb(154,109,215)'] { + color: var(--theme_dark-text_purple) !important; +} +.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], +.notion-dark-theme [style*='background:rgb(68,63,87)'] { + background: var(--theme_dark-bg_purple) !important; +} +.notion-dark-theme [style*='background: rgb(68, 63, 87)'] { + background: var(--theme_dark-line_purple) !important; +} +.notion-dark-theme [style*='color:rgb(226,85,161)'] { + color: var(--theme_dark-text_pink) !important; +} +.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], +.notion-dark-theme [style*='background:rgb(83,59,76)'] { + background: var(--theme_dark-bg_pink) !important; +} +.notion-dark-theme [style*='background: rgb(83, 59, 76)'] { + background: var(--theme_dark-line_pink) !important; +} +.notion-dark-theme [style*='color:rgb(255,115,105)'] { + color: var(--theme_dark-text_red) !important; +} +.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], +.notion-dark-theme [style*='background:rgb(89,65,65)'] { + background: var(--theme_dark-bg_red) !important; +} +.notion-dark-theme [style*='background: rgb(89, 65, 65)'] { + background: var(--theme_dark-line_red) !important; +} diff --git a/repo/core/titlebar.css b/repo/core/titlebar.css index 7988bf4..83f5810 100644 --- a/repo/core/titlebar.css +++ b/repo/core/titlebar.css @@ -6,28 +6,22 @@ */ .frameless .notion-topbar { - height: calc(var(--dragarea-height, 10px) + 45px) !important; + height: calc(var(--configured-dragarea_height, 10px) + 45px) !important; } - .frameless .window-dragarea { - height: var(--dragarea-height, 10px); + height: var(--configured-dragarea_height, 10px); width: 100%; } -.frameless .notion-light-theme .window-dragarea { - background: #e6e6e6; -} .frameless .notion-dark-theme .window-dragarea { - background: #272d2f; + background: var(--theme_dark-dragarea); +} +.frameless .notion-light-theme .window-dragarea { + background: var(--theme_light-dragarea); } -.window-buttons-area { - display: flex; - align-items: center; - font-size: 14px; -} @media (max-width: 760px) { .frameless .notion-topbar { - height: calc(var(--dragarea-height, 10px) + 80px) !important; + height: calc(var(--configured-dragarea_height, 10px) + 80px) !important; } .frameless .notion-topbar > :nth-child(2) { height: 80px !important; @@ -50,6 +44,11 @@ } } +.window-buttons-area { + display: flex; + align-items: center; + font-size: 14px; +} .window-button { background: transparent; border: 0; @@ -72,15 +71,25 @@ .window-button svg line { stroke: currentColor; } -.notion-light-theme .window-button:hover { - background: rgb(239, 239, 239); -} + .notion-dark-theme .window-button:hover { - background: rgb(71, 76, 80); + background: var(--theme_dark-button_hover); + box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); } -.window-button.btn-close:hover { - background: #e81123; +.notion-dark-theme .window-button.btn-close:hover { + background: var(--theme_dark-button_close); } -.window-button.btn-close:hover svg line { - stroke: white; +.notion-dark-theme .window-button.btn-close:hover svg line { + stroke: var(--theme_dark-button_close-fill); +} + +.notion-light-theme .window-button.btn-close:hover { + background: var(--theme_light-button_close); +} +.notion-light-theme .window-button.btn-close:hover svg line { + stroke: var(--theme_light-button_close-fill); +} +.notion-light-theme .window-button:hover { + background: var(--theme_light-button_hover); + box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border); } diff --git a/repo/core/titlebar.js b/repo/core/titlebar.js index 4c26ca1..aa3e711 100644 --- a/repo/core/titlebar.js +++ b/repo/core/titlebar.js @@ -37,7 +37,7 @@ module.exports = (defaults) => dragarea.className = 'window-dragarea'; document.querySelector('.notion-topbar').prepend(dragarea); document.documentElement.style.setProperty( - '--dragarea-height', + '--configured-dragarea_height', `${settings.dragarea_height}px` ); let sidebar_width; From 830492e181874bbcc6edd73de8def67b49fe1686 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 23 Jul 2020 23:33:09 +1000 Subject: [PATCH 013/371] more dark theme stuff, inc. bugfixes + code higlight --- repo/core/theme.css | 280 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 227 insertions(+), 53 deletions(-) diff --git a/repo/core/theme.css b/repo/core/theme.css index 2aa8999..04dcf82 100644 --- a/repo/core/theme.css +++ b/repo/core/theme.css @@ -8,6 +8,18 @@ :root { /** light **/ + --theme_light-main-height: 100%; + + --theme_light-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --theme_light-font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_light-font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_light-font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; + --theme_light-dragarea: #e6e6e6; --theme_light-button_hover: rgb(239, 239, 239); --theme_light-button_hover-border: transparent; @@ -21,25 +33,42 @@ /** dark **/ --theme_dark-main: rgb(47, 52, 55); + --theme_dark-main-height: 100%; --theme_dark-sidebar: rgb(55, 60, 63); --theme_dark-dragarea: #272d2f; - --theme_dark-primary: rgb(46, 170, 220); - --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-preview-width: 977px; + --theme_dark-preview_banner-height: 20vh; + --theme_dark-page_banner-height: 30vh; - --theme_dark-card: rgb(63, 68, 71); - --theme_dark-card_border: rgb(63, 68, 71); - --theme_dark-button_hover: rgb(71, 76, 80); - --theme_dark-button_close: #e81123; - --theme_dark-button_close-fill: white; - --theme_dark-button_hover-border: transparent; - --theme_dark-table_border: rgba(255, 255, 255, 0.1); + --theme_dark-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --theme_dark-font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_dark-font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_dark-font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; --theme_dark-scrollbar: #505457; --theme_dark-scrollbar-border: transparent; --theme_dark-scrollbar_hover: #696d6f; + --theme_dark-card: rgb(63, 68, 71); + --theme_dark-card-border: rgb(63, 68, 71); + --theme_dark-table-border: rgba(255, 255, 255, 0.1); + --theme_dark-button_hover: rgb(71, 76, 80); + --theme_dark-button_close: #e81123; + --theme_dark-button_close-fill: white; + --theme_dark-button_hover-border: transparent; + + --theme_dark-block-selected: rgba(139, 220, 46, 0.2); + --theme_dark-primary: rgb(46, 170, 220); + --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-text: rgba(255, 255, 255, 0.9); --theme_dark-text_gray: rgba(151, 154, 155, 0.95); --theme_dark-text_brown: rgb(147, 114, 100); --theme_dark-text_orange: rgb(255, 163, 68); @@ -67,9 +96,24 @@ --theme_dark-line_purple: rgb(68, 63, 87); --theme_dark-line_pink: rgb(83, 59, 76); --theme_dark-line_red: rgb(89, 65, 65); + + --theme_dark-text_code: rgba(255, 255, 255, 0.9); + --theme_dark-code-background: rgb(63, 68, 71); + --theme_dark-code_function: rgba(255, 255, 255, 0.9); + --theme_dark-code_keyword: hsl(350, 40%, 70%); + --theme_dark-code_tag: hsl(350, 40%, 70%); + --theme_dark-code_operator: hsl(40, 90%, 60%); + --theme_dark-code_builtin: hsl(75, 70%, 60%); + --theme_dark-code_attr-name: hsl(75, 70%, 60%); + --theme_dark-code_comment: hsl(30, 20%, 50%); + --theme_dark-code_punctuation: rgba(255, 255, 255, 0.9); + --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%); } -/** backgrounds **/ +/** general ui **/ .notion-dark-theme [style*='background: rgb(55, 60, 63)'], .notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { @@ -80,12 +124,108 @@ background: var(--theme_dark-main) !important; } +.notion-dark-theme .notion-frame { + height: var(--theme_dark-main-height) !important; +} +.notion-light-theme .notion-frame { + height: var(--theme_light-main-height) !important; +} + +.notion-peek-renderer > div:nth-child(2) { + max-width: var(--theme_dark-preview-width) !important; +} +.notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], +.notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] + img { + height: var(--theme_dark-preview_banner-height) !important; +} +[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], +[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] + img { + height: var(--theme_dark-page_banner-height) !important; +} + +.notion-dark-theme [style*='Segoe UI'] { + font-family: var(--theme_dark-font_sans) !important; +} +.notion-dark-theme [style*='Georgia'] { + font-family: var(--theme_dark-font_serif) !important; +} +.notion-dark-theme [style*='iawriter-mono'] { + font-family: var(--theme_dark-font_mono) !important; +} +.notion-dark-theme [style*='SFMono-Regular'] { + font-family: var(--theme_dark-font_code) !important; +} + +.notion-light-theme [style*='Segoe UI'] { + font-family: var(--theme_light-font_sans) !important; +} +.notion-light-theme [style*='Georgia'] { + font-family: var(--theme_light-font_serif) !important; +} +.notion-light-theme [style*='iawriter-mono'] { + font-family: var(--theme_light-font_mono) !important; +} +.notion-light-theme [style*='SFMono-Regular'] { + font-family: var(--theme_light-font_code) !important; +} + /** databases **/ -.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { - box-shadow: none !important; +.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { + background: var(--theme_dark-card) !important; } -.notion-dark-theme .notion-table-view > :first-child > :first-child, +.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { + border: 0.5px solid var(--theme_dark-card-border); +} + +.notion-dark-theme + [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark-main) -3px 0px 0px, + var(--theme_dark-table-border) 0px 1px 0px !important; +} + +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] { + border-top: 1px solid var(--theme_dark-table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { + box-shadow: var(--theme_dark-table-border) -1px 0px 0px !important; +} +.notion-dark-theme + [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme + [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] { + border-bottom: 1px solid var(--theme_dark-table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark-table-border) 0px 1px 0px !important; +} +.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme + [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] { + border-right: 1px solid var(--theme_dark-table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { + box-shadow: var(--theme_dark-table-border) 0px -1px 0px !important; +} +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'], +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] { + border-left: 1px solid var(--theme_dark-table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { + box-shadow: var(--theme_dark-table-border) 0px 1px 0px inset !important; +} + .notion-dark-theme [style*='background: rgb(71, 76, 80)'], .notion-dark-theme [style*='background: rgb(80, 85, 88)'], .notion-dark-theme [style*='background: rgb(98, 102, 104)'] { @@ -93,51 +233,39 @@ box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); } -.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { - background: var(--theme_dark-card) !important; +/* fix inline-tables in pages */ +.notion-page-content .notion-collection_view-block { + width: 100% !important; } -.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { - border: 0.5px solid var(--theme_dark-card_border); +.notion-page-content .notion-collection_view-block > div:first-child { + padding-left: 0px !important; + padding-right: 0px !important; } - -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] { - border-top: 1px solid var(--theme_dark-table_border) !important; +.notion-page-content + .notion-collection_view-block + [style*='min-width: calc(100% - 192px);'], +.notion-page-content + .notion-collection_view-block + [style*='min-width: 708px;'] { + min-width: 100% !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { - box-shadow: var(--theme_dark-table_border) -1px 0px 0px !important; -} -.notion-dark-theme - [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme - [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] { - border-bottom: 1px solid var(--theme_dark-table_border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark-table_border) 0px 1px 0px !important; -} -.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme - [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] { - border-right: 1px solid var(--theme_dark-table_border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { - box-shadow: var(--theme_dark-table_border) 0px -1px 0px !important; -} -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] { - border-left: 1px solid var(--theme_dark-table_border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { - box-shadow: var(--theme_dark-table_border) 0px 1px 0px inset !important; +.notion-page-content .notion-collection_view-block .notion-table-view { + padding-left: 0px !important; + padding-right: 0px !important; } /** colours **/ +[style*='background: rgba(46, 170, 220, 0.2)'], +[style*='background-color: rgba(46, 170, 220, 0.2)'] { + background: var(--theme_dark-block-selected) !important; +} + +.notion-dark-theme .notion-page-content [style*='color: inherit;'], +.notion-dark-theme .notion-frame .notion-page-block { + color: var(--theme_dark-text) !important; +} + .notion-dark-theme [style*='background: rgb(46, 170, 220)'] { background: var(--theme_dark-primary) !important; } @@ -241,3 +369,49 @@ .notion-dark-theme [style*='background: rgb(89, 65, 65)'] { background: var(--theme_dark-line_red) !important; } + +/* code */ + +.notion-dark-theme + [style*='flex-grow: 1; border-radius: 3px; text-align: left; position: relative; background: rgb(63, 68, 71); min-width: 0px; width: 100%;'] { + background: var(--theme_dark-code-background) !important; +} +.notion-dark-theme .notion-code-block > div { + color: var(--theme_dark-text_code) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.function { + color: var(--theme_dark-code_function) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.keyword { + color: var(--theme_dark-code_keyword) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.tag { + color: var(--theme_dark-code_tag) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.operator { + color: var(--theme_dark-code_operator) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.builtin { + color: var(--theme_dark-code_builtin) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.attr-name { + color: var(--theme_dark-code_attr-name) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.attr-value { + color: var(--theme_dark-code_attr-value) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.comment { + color: var(--theme_dark-code_comment) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.punctuation { + color: var(--theme_dark-code_punctuation) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.doctype { + color: var(--theme_dark-code_doctype) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.number { + color: var(--theme_dark-code_number) !important; +} +.notion-dark-theme .notion-dark-theme .notion-code-block .token.string { + color: var(--theme_dark-code_string) !important; +} From 2f74449189898d424c39b711a2f4a0e93806ebed Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 24 Jul 2020 23:52:21 +1000 Subject: [PATCH 014/371] dark theme variables complete (?) + scrollbar fix + titlebar tweaks --- repo/bracketed-links/styles.css | 24 +++++ repo/core/{titlebar.js => client.js} | 31 ++++-- repo/core/dragarea.js | 7 +- repo/core/mod.js | 4 +- repo/core/theme.css | 137 ++++++++++++++++++++------- repo/core/titlebar.css | 17 ++++ 6 files changed, 175 insertions(+), 45 deletions(-) create mode 100644 repo/bracketed-links/styles.css rename repo/core/{titlebar.js => client.js} (83%) diff --git a/repo/bracketed-links/styles.css b/repo/bracketed-links/styles.css new file mode 100644 index 0000000..3087e62 --- /dev/null +++ b/repo/bracketed-links/styles.css @@ -0,0 +1,24 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 Arecsu + * (https://dragonwocky.me/) under the MIT license + */ + +.notion-link-token span { + border-bottom: none !important; +} +.notion-link-token:before { + content: '['; + opacity: 0.7; + transition: opacity 100ms ease-in; +} +.notion-link-token:after { + content: ']'; + opacity: 0.7; + transition: opacity 100ms ease-in; +} +.notion-link-token:hover::before, +.notion-link-token:hover::after { + opacity: 1; +} diff --git a/repo/core/titlebar.js b/repo/core/client.js similarity index 83% rename from repo/core/titlebar.js rename to repo/core/client.js index aa3e711..ecdfb4b 100644 --- a/repo/core/titlebar.js +++ b/repo/core/client.js @@ -19,14 +19,29 @@ module.exports = (defaults) => if (event.code === 'F5') window.reload(); }); - const attempt = setInterval(enhance, 500); + const interval_attempts = { + enhance: setInterval(enhance, 500), + }; async function enhance() { if (!document.querySelector('.notion-frame')) return; - clearInterval(attempt); + clearInterval(interval_attempts.enhance); // scrollbars - if (settings.smooth_scrollbars) + if (settings.smooth_scrollbars) { document.body.classList.add('smooth-scrollbars'); + interval_attempts.patchScrollbars = setInterval(patchScrollbars, 50); + function patchScrollbars() { + const sidebar = document.querySelector( + '.notion-scroller.vertical[style*="overflow: hidden auto;"]' + ); + if (!sidebar) return; + clearInterval(interval_attempts.patchScrollbars); + sidebar.style.overflow = ''; + setTimeout(() => { + sidebar.style.overflow = 'hidden auto'; + }, 1); + } + } // frameless if (settings.frameless) { @@ -38,11 +53,14 @@ module.exports = (defaults) => document.querySelector('.notion-topbar').prepend(dragarea); document.documentElement.style.setProperty( '--configured-dragarea_height', - `${settings.dragarea_height}px` + `${settings.dragarea_height + 2}px` ); let sidebar_width; - setInterval(() => { + interval_attempts.patchDragarea = setInterval(patchDragarea, 50); + function patchDragarea() { const sidebar = document.querySelector('.notion-sidebar'); + if (!sidebar) return; + clearInterval(interval_attempts.patchDragarea); let new_width = sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; if (sidebar_width !== new_width) { @@ -51,7 +69,8 @@ module.exports = (defaults) => `enhancer:sidebar-width-${sidebar_width}` ); } - }, 100); + } + setInterval(() => {}, 100); } // window buttons diff --git a/repo/core/dragarea.js b/repo/core/dragarea.js index b204f4b..13656c1 100644 --- a/repo/core/dragarea.js +++ b/repo/core/dragarea.js @@ -22,8 +22,11 @@ module.exports = (defaults) => if (event.channel.startsWith('enhancer:sidebar-width-')) dragarea.setAttribute( 'style', - `${default_styles} height: ${settings.dragarea_height}px; left: ${ - event.channel.slice('enhancer:sidebar-width-'.length)};` + `${default_styles} top: 2px; height: ${ + settings.dragarea_height + }px; left: ${event.channel.slice( + 'enhancer:sidebar-width-'.length + )};` ); }); }; diff --git a/repo/core/mod.js b/repo/core/mod.js index 813df8d..5e6ed8c 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -9,7 +9,7 @@ const defaults = { maximized: false, close_to_tray: true, frameless: true, - dragarea_height: 12.5, + dragarea_height: 15, smooth_scrollbars: true, hotkey: 'CmdOrCtrl+Shift+A', }; @@ -29,6 +29,6 @@ module.exports = { 'main/main.js': require('./tray.js')(defaults), 'main/createWindow.js': require('./window.js')(defaults), 'renderer/index.js': require('./dragarea.js')(defaults), - 'renderer/preload.js': require('./titlebar.js')(defaults), + 'renderer/preload.js': require('./client.js')(defaults), }, }; diff --git a/repo/core/theme.css b/repo/core/theme.css index 04dcf82..97a8854 100644 --- a/repo/core/theme.css +++ b/repo/core/theme.css @@ -2,14 +2,14 @@ * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois * (https://dragonwocky.me/) under the MIT license */ :root { /** light **/ - --theme_light-main-height: 100%; - --theme_light-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; @@ -33,7 +33,6 @@ /** dark **/ --theme_dark-main: rgb(47, 52, 55); - --theme_dark-main-height: 100%; --theme_dark-sidebar: rgb(55, 60, 63); --theme_dark-dragarea: #272d2f; --theme_dark-preview-width: 977px; @@ -62,13 +61,23 @@ --theme_dark-button_close-fill: white; --theme_dark-button_hover-border: transparent; - --theme_dark-block-selected: rgba(139, 220, 46, 0.2); + --theme_dark-selected: rgba(46, 170, 220, 0.2); --theme_dark-primary: rgb(46, 170, 220); --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-todo_empty-border: currentColor; + --theme_dark-todo_ticked: currentColor; + --theme_dark-todo_ticked-background: var(--theme_dark-primary); + --theme_dark-todo_hover-background: rgb(71, 76, 80); + + --theme_dark-danger_text: rgb(235, 87, 87); + --theme_dark-danger_border: rgba(235, 87, 87, 0.5); + --theme_dark-text: rgba(255, 255, 255, 0.9); + --theme_dark-text_ui: rgba(255, 255, 255, 0.6); + --theme_dark-text_ui_dark: rgba(255, 255, 255, 0.4); --theme_dark-text_gray: rgba(151, 154, 155, 0.95); --theme_dark-text_brown: rgb(147, 114, 100); --theme_dark-text_orange: rgb(255, 163, 68); @@ -97,7 +106,9 @@ --theme_dark-line_pink: rgb(83, 59, 76); --theme_dark-line_red: rgb(89, 65, 65); - --theme_dark-text_code: rgba(255, 255, 255, 0.9); + --theme_dark-code_inline-text: #eb5757; + --theme_dark-code_inline-background: rgba(135, 131, 120, 0.15); + --theme_dark-code_text: rgba(255, 255, 255, 0.9); --theme_dark-code-background: rgb(63, 68, 71); --theme_dark-code_function: rgba(255, 255, 255, 0.9); --theme_dark-code_keyword: hsl(350, 40%, 70%); @@ -120,17 +131,11 @@ background: var(--theme_dark-sidebar) !important; } .notion-body.dark, -.notion-dark-theme [style*='background: rgb(47, 52, 55)'] { +.notion-dark-theme [style*='background: rgb(47, 52, 55)'], +.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { background: var(--theme_dark-main) !important; } -.notion-dark-theme .notion-frame { - height: var(--theme_dark-main-height) !important; -} -.notion-light-theme .notion-frame { - height: var(--theme_light-main-height) !important; -} - .notion-peek-renderer > div:nth-child(2) { max-width: var(--theme_dark-preview-width) !important; } @@ -175,6 +180,14 @@ font-family: var(--theme_light-font_code) !important; } +/* prevent block hover options overlaying topbar */ +*:not([style*='z-index']) { + z-index: 1; +} +.notion-dark-theme .notion-topbar { + background: var(--theme_dark-main); +} + /** databases **/ .notion-dark-theme [style*='background: rgb(63, 68, 71)'] { @@ -184,41 +197,37 @@ border: 0.5px solid var(--theme_dark-card-border); } +.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: var(--theme_dark-main) -3px 0px 0px !important; +} .notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { box-shadow: var(--theme_dark-main) -3px 0px 0px, var(--theme_dark-table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { border-top: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { box-shadow: var(--theme_dark-table-border) -1px 0px 0px !important; } -.notion-dark-theme - [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme - [style*='border-bottom: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { border-bottom: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { box-shadow: var(--theme_dark-table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme - [style*='border-right: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] { border-right: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { box-shadow: var(--theme_dark-table-border) 0px -1px 0px !important; } -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.14)'], -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255, 0.07)'] { +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] { border-left: 1px solid var(--theme_dark-table-border) !important; } .notion-dark-theme @@ -233,7 +242,16 @@ box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); } -/* fix inline-tables in pages */ +.notion-calendar-view-day, +.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end), +.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, +.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, +.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) { + transition: all 200ms ease !important; +} + +/* fix inline-tables in pages (?) */ .notion-page-content .notion-collection_view-block { width: 100% !important; } @@ -256,29 +274,68 @@ /** colours **/ -[style*='background: rgba(46, 170, 220, 0.2)'], -[style*='background-color: rgba(46, 170, 220, 0.2)'] { - background: var(--theme_dark-block-selected) !important; +.notion-dark-theme ::selection, +.notion-dark-theme [style*='background: rgba(46, 170, 220,'], +.notion-dark-theme [style*='background-color: rgba(46, 170, 220,'] { + background: var(--theme_dark-selected) !important; } -.notion-dark-theme .notion-page-content [style*='color: inherit;'], -.notion-dark-theme .notion-frame .notion-page-block { - color: var(--theme_dark-text) !important; -} - -.notion-dark-theme [style*='background: rgb(46, 170, 220)'] { +.notion-dark-theme [style*='background: rgb(46, 170, 220)'], +.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_dark-primary) !important; } +.notion-dark-theme + [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme_dark-primary) 0px 0px 0px 2px inset !important; +} .notion-dark-theme [style*='background: rgb(6, 156, 205)'] { background: var(--theme_dark-primary_hover) !important; } .notion-dark-theme [style*='background: rgb(0, 141, 190)'] { background: var(--theme_dark-primary_click) !important; } +.notion-dark-theme + .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, .notion-dark-theme [style*='background: rgb(235, 87, 87)'] { background: var(--theme_dark-primary_indicator) !important; } +.notion-dark-theme .notion-to_do-block .checkboxSquare path { + fill: var(--theme_dark-todo_empty-border) !important; +} +.notion-dark-theme .notion-to_do-block .check polygon { + fill: var(--theme_dark-todo_ticked-fill) !important; +} +.notion-dark-theme + .notion-to_do-block + [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_dark-todo_ticked-background) !important; +} +.notion-to_do-block > div > div > div[style*='background:'] { + transition: background 200ms ease !important; +} +.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] { + background: var(--theme_dark-todo_hover-background) !important; +} + +.notion-dark-theme + [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { + color: var(--theme_dark-danger_text) !important; + border: 1px solid var(--theme_dark-danger_border) !important; +} + +.notion-dark-theme, +.notion-dark-theme .notion-page-content [style*='color: inherit;'], +.notion-dark-theme .notion-frame .notion-page-block { + color: var(--theme_dark-text) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { + color: var(--theme_dark-text_ui) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme_dark-text_ui_dark) !important; +} + .notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { color: var(--theme_dark-text_gray) !important; } @@ -370,14 +427,24 @@ background: var(--theme_dark-line_red) !important; } +/* fix highlight padding: this isn't a typo */ +[style*='background:rgb('] { + padding-bottom: 3px !important; +} + /* code */ +.notion-dark-theme [style*='color:#EB5757'] { + color: var(--theme_dark-code_inline-text) !important; + background: var(--theme_dark-code_inline-background) !important; +} + .notion-dark-theme [style*='flex-grow: 1; border-radius: 3px; text-align: left; position: relative; background: rgb(63, 68, 71); min-width: 0px; width: 100%;'] { background: var(--theme_dark-code-background) !important; } .notion-dark-theme .notion-code-block > div { - color: var(--theme_dark-text_code) !important; + color: var(--theme_dark-code_text) !important; } .notion-dark-theme .notion-dark-theme .notion-code-block .token.function { color: var(--theme_dark-code_function) !important; diff --git a/repo/core/titlebar.css b/repo/core/titlebar.css index 83f5810..2296df4 100644 --- a/repo/core/titlebar.css +++ b/repo/core/titlebar.css @@ -2,6 +2,7 @@ * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA + * (c) 2020 Arecsu * (https://dragonwocky.me/) under the MIT license */ @@ -93,3 +94,19 @@ background: var(--theme_light-button_hover); box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border); } + +/* hide topbar when sidebar is hidden */ +.notion-sidebar-container[style*='width: 0px;'] + .notion-frame { + height: calc( + 100% - (var(--configured-dragarea_height, 10px) + 45px) + ) !important; +} +.notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar { + opacity: 0 !important; + transition: opacity 200ms ease-in-out !important; +} +.notion-sidebar-container[style*='width: 0px;'] + + .notion-frame + .notion-topbar:hover { + opacity: 1 !important; +} From 771aa0b493b3595375b384303d9d33f8a04f471f Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 25 Jul 2020 11:29:39 +1000 Subject: [PATCH 015/371] dark theme bugfixes: focused input borders, weird lines in tables --- repo/core/theme.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/repo/core/theme.css b/repo/core/theme.css index 97a8854..baf2ada 100644 --- a/repo/core/theme.css +++ b/repo/core/theme.css @@ -250,6 +250,9 @@ .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end) { transition: all 200ms ease !important; } +.notion-token-remove-button { + transition: opacity 200ms ease !important; +} /* fix inline-tables in pages (?) */ .notion-page-content .notion-collection_view-block { @@ -275,8 +278,10 @@ /** colours **/ .notion-dark-theme ::selection, -.notion-dark-theme [style*='background: rgba(46, 170, 220,'], -.notion-dark-theme [style*='background-color: rgba(46, 170, 220,'] { +.notion-dark-theme + [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), +.notion-dark-theme + [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { background: var(--theme_dark-selected) !important; } @@ -288,6 +293,10 @@ [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { box-shadow: var(--theme_dark-primary) 0px 0px 0px 2px inset !important; } +.notion-dark-theme .notion-focusable:focus-within { + box-shadow: var(--theme_dark-primary) 0px 0px 0px 1px inset, + var(--theme_dark-primary_hover) 0px 0px 0px 2px !important; +} .notion-dark-theme [style*='background: rgb(6, 156, 205)'] { background: var(--theme_dark-primary_hover) !important; } From 5c84fbebb673848b6a34516d0e1e41dfcc88f91c Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 25 Jul 2020 15:16:15 +1000 Subject: [PATCH 016/371] light 90% + other tweaks --- repo/core/client.js | 1 - repo/core/dark.css | 330 ++++++++++++++++++++++++++ repo/core/light.css | 330 ++++++++++++++++++++++++++ repo/core/scrollbars.css | 12 +- repo/core/shared.css | 50 ++++ repo/core/styles.css | 6 +- repo/core/theme.css | 493 --------------------------------------- repo/core/titlebar.css | 20 +- repo/core/variables.css | 200 ++++++++++++++++ 9 files changed, 930 insertions(+), 512 deletions(-) create mode 100644 repo/core/dark.css create mode 100644 repo/core/light.css create mode 100644 repo/core/shared.css delete mode 100644 repo/core/theme.css create mode 100644 repo/core/variables.css diff --git a/repo/core/client.js b/repo/core/client.js index ecdfb4b..8a9676a 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -70,7 +70,6 @@ module.exports = (defaults) => ); } } - setInterval(() => {}, 100); } // window buttons diff --git a/repo/core/dark.css b/repo/core/dark.css new file mode 100644 index 0000000..9576d08 --- /dev/null +++ b/repo/core/dark.css @@ -0,0 +1,330 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +/** general ui **/ + +.notion-dark-theme [style*='background: rgb(55, 60, 63)'], +.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { + background: var(--theme_dark--sidebar) !important; +} +.notion-body.dark, +.notion-dark-theme [style*='background: rgb(47, 52, 55)'], +.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { + background: var(--theme_dark--main) !important; +} + +.notion-dark-theme .notion-peek-renderer > div:nth-child(2) { + max-width: var(--theme_dark--preview-width) !important; +} +.notion-dark-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], +.notion-dark-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] + img { + height: var(--theme_dark--preview_banner-height) !important; +} +.notion-dark-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], +.notion-dark-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] + img { + height: var(--theme_dark--page_banner-height) !important; +} + +.notion-dark-theme [style*='Segoe UI'] { + font-family: var(--theme_dark--font_sans) !important; +} +.notion-dark-theme [style*='Georgia'] { + font-family: var(--theme_dark--font_serif) !important; +} +.notion-dark-theme [style*='iawriter-mono'] { + font-family: var(--theme_dark--font_mono) !important; +} +.notion-dark-theme [style*='SFMono-Regular'] { + font-family: var(--theme_dark--font_code) !important; +} + +/* prevent block hover options overlaying topbar */ +.notion-dark-theme .notion-topbar { + background: var(--theme_dark--main); +} + +/** databases **/ + +.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { + background: var(--theme_dark--card) !important; +} +.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { + border: 0.5px solid var(--theme_dark--card-border); +} + +.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: var(--theme_dark--main) -3px 0px 0px !important; +} +.notion-dark-theme + [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark--main) -3px 0px 0px, + var(--theme_dark--table-border) 0px 1px 0px !important; +} + +.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { + border-top: 1px solid var(--theme_dark--table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { + box-shadow: var(--theme_dark--table-border) -1px 0px 0px !important; +} +.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { + border-bottom: 1px solid var(--theme_dark--table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme_dark--table-border) 0px 1px 0px !important; +} +.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] { + border-right: 1px solid var(--theme_dark--table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { + box-shadow: var(--theme_dark--table-border) 0px -1px 0px !important; +} +.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] { + border-left: 1px solid var(--theme_dark--table-border) !important; +} +.notion-dark-theme + [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { + box-shadow: var(--theme_dark--table-border) 0px 1px 0px inset !important; +} + +.notion-dark-theme [style*='background: rgb(71, 76, 80)'], +.notion-dark-theme [style*='background: rgb(80, 85, 88)'] { + background: var(--theme_dark--button_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); +} + +/** colours **/ + +.notion-dark-theme ::selection, +.notion-dark-theme + [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), +.notion-dark-theme + [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { + background: var(--theme_dark--selected) !important; +} + +.notion-dark-theme [style*='background: rgb(46, 170, 220)'], +.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme_dark--primary) !important; +} +.notion-dark-theme + [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme_dark--primary) 0px 0px 0px 2px inset !important; +} +.notion-dark-theme .notion-focusable:focus-within { + box-shadow: var(--theme_dark--primary) 0px 0px 0px 1px inset, + var(--theme_dark--primary_hover) 0px 0px 0px 2px !important; +} +.notion-dark-theme [style*='background: rgb(6, 156, 205)'] { + background: var(--theme_dark--primary_hover) !important; +} +.notion-dark-theme [style*='background: rgb(0, 141, 190)'] { + background: var(--theme_dark--primary_click) !important; +} +.notion-dark-theme + .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, +.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { + background: var(--theme_dark--primary_indicator) !important; +} + +.notion-dark-theme .notion-to_do-block .checkboxSquare path { + fill: var(--theme_dark--todo_empty-border) !important; +} +.notion-dark-theme .notion-to_do-block .check polygon { + fill: var(--theme_dark--todo_ticked-fill) !important; +} +.notion-dark-theme + .notion-to_do-block + [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_dark--todo_ticked-background) !important; +} +.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] { + background: var(--theme_dark--todo_hover-background) !important; +} + +.notion-dark-theme + [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { + color: var(--theme_dark--danger_text) !important; + border: 1px solid var(--theme_dark--danger_border) !important; +} + +.notion-dark-theme, +.notion-dark-theme .notion-page-content [style*='color: inherit;'], +.notion-dark-theme .notion-frame .notion-page-block, +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.7)'] { + color: var(--theme_dark--text) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { + color: var(--theme_dark--text_ui) !important; +} +.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme_dark--text_ui_info) !important; +} +.notion-dark-theme [style*='fill: rgba(202, 204, 206,'], +.notion-dark-theme [style*='fill: rgb(202, 204, 206)'] { + fill: var(--theme_dark--text_ui) !important; +} + +.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { + color: var(--theme_dark--text_gray) !important; +} +.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], +.notion-dark-theme [style*='background:rgb(69,75,78)'] { + background: var(--theme_dark--bg_gray) !important; +} +.notion-dark-theme [style*='background: rgb(69, 75, 78)'] { + background: var(--theme_dark--line_gray) !important; +} +.notion-dark-theme [style*='color:rgb(147,114,100)'] { + color: var(--theme_dark--text_brown) !important; +} +.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], +.notion-dark-theme [style*='background:rgb(67,64,64)'] { + background: var(--theme_dark--bg_brown) !important; +} +.notion-dark-theme [style*='background: rgb(67, 64, 64)'] { + background: var(--theme_dark--line_brown) !important; +} +.notion-dark-theme [style*='color:rgb(255,163,68)'] { + color: var(--theme_dark--text_orange) !important; +} +.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], +.notion-dark-theme [style*='background:rgb(89,74,58)'] { + background: var(--theme_dark--bg_orange) !important; +} +.notion-dark-theme [style*='background: rgb(89, 74, 58)'] { + background: var(--theme_dark--line_orange) !important; +} +.notion-dark-theme [style*='color:rgb(255,220,73)'] { + color: var(--theme_dark--text_yellow) !important; +} +.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], +.notion-dark-theme [style*='background:rgb(89,86,59)'] { + background: var(--theme_dark--bg_yellow) !important; +} +.notion-dark-theme [style*='background: rgb(89, 86, 59)'] { + background: var(--theme_dark--line_yellow) !important; +} +.notion-dark-theme [style*='color:rgb(77,171,154)'] { + color: var(--theme_dark--text_green) !important; +} +.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], +.notion-dark-theme [style*='background:rgb(53,76,75)'] { + background: var(--theme_dark--bg_green) !important; +} +.notion-dark-theme [style*='background: rgb(53, 76, 75)'] { + background: var(--theme_dark--line_green) !important; +} +.notion-dark-theme [style*='color:rgb(82,156,202)'] { + color: var(--theme_dark--text_blue) !important; +} +.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], +.notion-dark-theme [style*='background:rgb(54,73,84)'] { + background: var(--theme_dark--bg_blue) !important; +} +.notion-dark-theme [style*='background: rgb(54, 73, 84)'] { + background: var(--theme_dark--line_blue) !important; +} +.notion-dark-theme [style*='color:rgb(154,109,215)'] { + color: var(--theme_dark--text_purple) !important; +} +.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], +.notion-dark-theme [style*='background:rgb(68,63,87)'] { + background: var(--theme_dark--bg_purple) !important; +} +.notion-dark-theme [style*='background: rgb(68, 63, 87)'] { + background: var(--theme_dark--line_purple) !important; +} +.notion-dark-theme [style*='color:rgb(226,85,161)'] { + color: var(--theme_dark--text_pink) !important; +} +.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], +.notion-dark-theme [style*='background:rgb(83,59,76)'] { + background: var(--theme_dark--bg_pink) !important; +} +.notion-dark-theme [style*='background: rgb(83, 59, 76)'] { + background: var(--theme_dark--line_pink) !important; +} +.notion-dark-theme [style*='color:rgb(255,115,105)'] { + color: var(--theme_dark--text_red) !important; +} +.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], +.notion-dark-theme [style*='background:rgb(89,65,65)'] { + background: var(--theme_dark--bg_red) !important; +} +.notion-dark-theme [style*='background: rgb(89, 65, 65)'] { + background: var(--theme_dark--line_red) !important; +} + +/* code */ + +.notion-dark-theme [style*='color:#EB5757'] { + color: var(--theme_dark--code_inline-text) !important; + background: var(--theme_dark--code_inline-background) !important; +} + +.notion-dark-theme .notion-code-block { + background: var(--theme_dark--code-background) !important; +} +.notion-dark-theme .notion-code-block > div { + color: var(--theme_dark--code_text) !important; +} +.notion-dark-theme .notion-code-block .token.function { + color: var(--theme_dark--code_function) !important; +} +.notion-dark-theme .notion-code-block .token.keyword { + color: var(--theme_dark--code_keyword) !important; +} +.notion-dark-theme .notion-code-block .token.tag { + color: var(--theme_dark--code_tag) !important; +} +.notion-dark-theme .notion-code-block .token.operator { + color: var(--theme_dark--code_operator) !important; +} +.notion-dark-theme .notion-code-block .token.property { + color: var(--theme_dark--code_property) !important; +} +.notion-dark-theme .notion-code-block .token.builtin { + color: var(--theme_dark--code_builtin) !important; +} +.notion-dark-theme .notion-code-block .token.attr-name { + color: var(--theme_dark--code_attr-name) !important; +} +.notion-dark-theme .notion-code-block .token.attr-value { + color: var(--theme_dark--code_attr-value) !important; +} +.notion-dark-theme .notion-code-block .token.comment { + color: var(--theme_dark--code_comment) !important; +} +.notion-dark-theme .notion-code-block .token.punctuation { + color: var(--theme_dark--code_punctuation) !important; +} +.notion-dark-theme .notion-code-block .token.doctype { + color: var(--theme_dark--code_doctype) !important; +} +.notion-dark-theme .notion-code-block .token.number { + color: var(--theme_dark--code_number) !important; +} +.notion-dark-theme .notion-code-block .token.string { + color: var(--theme_dark--code_string) !important; +} diff --git a/repo/core/light.css b/repo/core/light.css new file mode 100644 index 0000000..40fd3d0 --- /dev/null +++ b/repo/core/light.css @@ -0,0 +1,330 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +/** general ui **/ + +.notion-light-theme [style*='background: rgb(247, 246, 243)'], +.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'] { + background: var(--theme_light--sidebar) !important; +} +.notion-body.light, +.notion-light-theme [style*='background: white'] { + background: var(--theme_light--main) !important; +} + +.notion-light-theme .notion-peek-renderer > div:nth-child(2) { + max-width: var(--theme_light--preview-width) !important; +} +.notion-light-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], +.notion-light-theme + .notion-peek-renderer + .notion-scroller.vertical + [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] + img { + height: var(--theme_light--preview_banner-height) !important; +} +.notion-light-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], +.notion-light-theme + [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] + img { + height: var(--theme_light--page_banner-height) !important; +} + +.notion-light-theme [style*='Segoe UI'] { + font-family: var(--theme_light--font_sans) !important; +} +.notion-light-theme [style*='Georgia'] { + font-family: var(--theme_light--font_serif) !important; +} +.notion-light-theme [style*='iawriter-mono'] { + font-family: var(--theme_light--font_mono) !important; +} +.notion-light-theme [style*='SFMono-Regular'] { + font-family: var(--theme_light--font_code) !important; +} + +/* prevent block hover options overlaying topbar */ +.notion-light-theme .notion-topbar { + background: var(--theme_light--main); +} + +/** databases **/ + +.notion-light-theme [style*='background: rgb(247, 246, 243)'] { + background: var(--theme_light--card) !important; +} +.notion-light-theme .notion-frame [style*='background: rgb(247, 246, 243)'] { + border: 0.5px solid var(--theme_light--card-border); +} + +.notion-light-theme [style*='box-shadow: white -3px 0px 0px'] { + box-shadow: var(--theme_light--main) -3px 0px 0px !important; +} +.notion-light-theme + [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'] { + box-shadow: var(--theme_light--main) -3px 0px 0px, + var(--theme_light--table-border) 0px 1px 0px !important; +} + +.notion-light-theme [style*='border-top: 1px solid rgba(55, 53, 47,'] { + border-top: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'] { + box-shadow: var(--theme_light--table-border) -1px 0px 0px !important; +} +.notion-light-theme [style*='border-bottom: 1px solid rgba(55, 53, 47,'] { + border-bottom: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] { + box-shadow: var(--theme_light--table-border) 0px 1px 0px !important; +} +.notion-light-theme [style*='border-right: 1px solid rgba(55, 53, 47,'] { + border-right: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] { + box-shadow: var(--theme_light--table-border) 0px -1px 0px !important; +} +.notion-light-theme [style*='border-left: 1px solid rgba(55, 53, 47,'] { + border-left: 1px solid var(--theme_light--table-border) !important; +} +.notion-light-theme + [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] { + box-shadow: var(--theme_light--table-border) 0px 1px 0px inset !important; +} + +.notion-light-theme [style*='background: rgba(55, 53, 47,'] { + background: var(--theme_light--button_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); +} + +/** colours **/ + +.notion-light-theme ::selection, +.notion-light-theme + [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), +.notion-light-theme + [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { + background: var(--theme_light--selected) !important; +} + +.notion-light-theme [style*='background: rgb(46, 170, 220)'], +.notion-light-theme [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme_light--primary) !important; +} +.notion-light-theme + [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme_light--primary) 0px 0px 0px 2px inset !important; +} +.notion-light-theme .notion-focusable:focus-within { + box-shadow: var(--theme_light--primary) 0px 0px 0px 1px inset, + var(--theme_light--primary_hover) 0px 0px 0px 2px !important; +} +.notion-light-theme [style*='background: rgb(6, 156, 205)'] { + background: var(--theme_light--primary_hover) !important; +} +.notion-light-theme [style*='background: rgb(0, 141, 190)'] { + background: var(--theme_light--primary_click) !important; +} +.notion-light-theme + .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, +.notion-light-theme [style*='background: rgb(235, 87, 87)'] { + background: var(--theme_light--primary_indicator) !important; +} + +.notion-light-theme .notion-to_do-block .checkboxSquare path { + fill: var(--theme_light--todo_empty-border) !important; +} +.notion-light-theme .notion-to_do-block .check polygon { + fill: var(--theme_light--todo_ticked-fill) !important; +} +.notion-light-theme + .notion-to_do-block + [style*='background: rgb(46, 170, 220)'] { + background: var(--theme_light--todo_ticked-background) !important; +} +.notion-light-theme + .notion-to_do-block + [style*='background: rgba(55, 53, 47, 0.08)'] { + background: var(--theme_light--todo_hover-background) !important; +} + +.notion-light-theme + [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { + color: var(--theme_light--danger_text) !important; + border: 1px solid var(--theme_light--danger_border) !important; +} + +.notion-light-theme, +.notion-light-theme [style*='color:'] { + color: var(--theme_light--text) !important; +} +.notion-light-theme [style*='color: rgba(255, 255, 255, 0.6)'], +.notion-light-theme [style*='color: rgba(25, 23, 17,'], +.notion-light-theme [style*='color: rgba(55, 53, 47,'], +.notion-light-theme [style*='color: rgb(25, 23, 17)'], +.notion-light-theme [style*='color: rgb(55, 53, 47)'] { + color: var(--theme_light--text_ui) !important; +} +.notion-light-theme .notion-page-content { + color: var(--theme_light--text) !important; +} +.notion-light-theme [style*='fill: rgba(55, 53, 47,'] { + fill: var(--theme_light--text_ui) !important; +} +.notion-light-theme [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme_light--text_ui_info) !important; +} + +.notion-light-theme [style*='color:rgb(155,154,151)'] { + color: var(--theme_light--text_gray) !important; +} +.notion-light-theme [style*='background: rgb(235, 236, 237)'], +.notion-light-theme [style*='background:rgb(235,236,237)'] { + background: var(--theme_light--bg_gray) !important; +} +.notion-light-theme div[style='background: rgb(235, 236, 237)'] { + background: var(--theme_light--line_gray) !important; +} +.notion-light-theme [style*='color:rgb(100,71,58)'] { + color: var(--theme_light--text_brown) !important; +} +.notion-light-theme [style*='background: rgb(233, 229, 227)'], +.notion-light-theme [style*='background:rgb(233,229,227)'] { + background: var(--theme_light--bg_brown) !important; +} +.notion-light-theme div[style='background: rgb(233, 229, 227)'] { + background: var(--theme_light--line_brown) !important; +} +.notion-light-theme [style*='color:rgb(217,115,13)'] { + color: var(--theme_light--text_orange) !important; +} +.notion-light-theme [style*='background: rgb(250, 235, 221)'], +.notion-light-theme [style*='background:rgb(250,235,221)'] { + background: var(--theme_light--bg_orange) !important; +} +.notion-light-theme div[style='background: rgb(250, 235, 221)'] { + background: var(--theme_light--line_orange) !important; +} +.notion-light-theme [style*='color:rgb(223,171,1)'] { + color: var(--theme_light--text_yellow) !important; +} +.notion-light-theme [style*='background: rgb(251, 243, 219)'], +.notion-light-theme [style*='background:rgb(251,243,219)'] { + background: var(--theme_light--bg_yellow) !important; +} +.notion-light-theme div[style='background: rgb(251, 243, 219)'] { + background: var(--theme_light--line_yellow) !important; +} +.notion-light-theme [style*='color:rgb(15,123,108)'] { + color: var(--theme_light--text_green) !important; +} +.notion-light-theme [style*='background: rgb(221, 237, 234)'], +.notion-light-theme [style*='background:rgb(221,237,234)'] { + background: var(--theme_light--bg_green) !important; +} +.notion-light-theme div[style='background: rgb(221, 237, 234)'] { + background: var(--theme_light--line_green) !important; +} +.notion-light-theme [style*='color:rgb(11,110,153)'] { + color: var(--theme_light--text_blue) !important; +} +.notion-light-theme [style*='background: rgb(221, 235, 241)'], +.notion-light-theme [style*='background:rgb(221,235,241)'] { + background: var(--theme_light--bg_blue) !important; +} +.notion-light-theme div[style='background: rgb(221, 235, 241)'] { + background: var(--theme_light--line_blue) !important; +} +.notion-light-theme [style*='color:rgb(105,64,165)'] { + color: var(--theme_light--text_purple) !important; +} +.notion-light-theme [style*='background: rgb(234, 228, 242)'], +.notion-light-theme [style*='background:rgb(234,228,242)'] { + background: var(--theme_light--bg_purple) !important; +} +.notion-light-theme div[style='background: rgb(234, 228, 242)'] { + background: var(--theme_light--line_purple) !important; +} +.notion-light-theme [style*='color:rgb(173,26,114)'] { + color: var(--theme_light--text_pink) !important; +} +.notion-light-theme [style*='background: rgb(244, 223, 235)'], +.notion-light-theme [style*='background:rgb(244,223,235)'] { + background: var(--theme_light--bg_pink) !important; +} +.notion-light-theme div[style='background: rgb(244, 223, 235)'] { + background: var(--theme_light--line_pink) !important; +} +.notion-light-theme [style*='color:rgb(224,62,62)'] { + color: var(--theme_light--text_red) !important; +} +.notion-light-theme [style*='background: rgb(251, 228, 228)'], +.notion-light-theme [style*='background:rgb(251,228,228)'] { + background: var(--theme_light--bg_red) !important; +} +.notion-light-theme div[style='background: rgb(251, 228, 228)'] { + background: var(--theme_light--line_red) !important; +} + +/* code */ + +.notion-light-theme [style*='color:#EB5757'] { + color: var(--theme_light--code_inline-text) !important; + background: var(--theme_light--code_inline-background) !important; +} + +.notion-light-theme .notion-code-block { + background: var(--theme_light--code-background) !important; +} +.notion-light-theme .notion-code-block > div { + color: var(--theme_light--code_text) !important; +} +.notion-light-theme .notion-code-block .token.function { + color: var(--theme_light--code_function) !important; +} +.notion-light-theme .notion-code-block .token.keyword { + color: var(--theme_light--code_keyword) !important; +} +.notion-light-theme .notion-code-block .token.tag { + color: var(--theme_light--code_tag) !important; +} +.notion-light-theme .notion-code-block .token.operator { + color: var(--theme_light--code_operator) !important; +} +.notion-light-theme .notion-code-block .token.property { + color: var(--theme_light--code_property) !important; +} +.notion-light-theme .notion-code-block .token.builtin { + color: var(--theme_light--code_builtin) !important; +} +.notion-light-theme .notion-code-block .token.attr-name { + color: var(--theme_light--code_attr-name) !important; +} +.notion-light-theme .notion-code-block .token.attr-value { + color: var(--theme_light--code_attr-value) !important; +} +.notion-light-theme .notion-code-block .token.comment { + color: var(--theme_light--code_comment) !important; +} +.notion-light-theme .notion-code-block .token.punctuation { + color: var(--theme_light--code_punctuation) !important; +} +.notion-light-theme .notion-code-block .token.doctype { + color: var(--theme_light--code_doctype) !important; +} +.notion-light-theme .notion-code-block .token.number { + color: var(--theme_light--code_number) !important; +} +.notion-light-theme .notion-code-block .token.string { + color: var(--theme_light--code_string) !important; +} diff --git a/repo/core/scrollbars.css b/repo/core/scrollbars.css index 7402d8c..20224ad 100644 --- a/repo/core/scrollbars.css +++ b/repo/core/scrollbars.css @@ -20,17 +20,17 @@ } .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb { - background-color: var(--theme_dark-scrollbar); - border: var(--theme_dark-scrollbar-border); + background-color: var(--theme_dark--scrollbar); + border: var(--theme_dark--scrollbar-border); } .smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover { - background: var(--theme_dark-scrollbar_hover); + background: var(--theme_dark--scrollbar_hover); } .smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb { - background-color: var(--theme_light-scrollbar); - border: 1px solid var(--theme_light-scrollbar-border); + background-color: var(--theme_light--scrollbar); + border: 1px solid var(--theme_light--scrollbar-border); } .smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover { - background: var(--theme_light-scrollbar_hover); + background: var(--theme_light--scrollbar_hover); } diff --git a/repo/core/shared.css b/repo/core/shared.css new file mode 100644 index 0000000..c36f5ce --- /dev/null +++ b/repo/core/shared.css @@ -0,0 +1,50 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +/* prevent block hover options overlaying topbar */ +*:not([style*='z-index']) { + z-index: 1; +} + +/* fix highlight padding: this isn't a typo */ +[style*='background:rgb('] { + padding-bottom: 3px !important; +} + +/* smooth transitions */ +.notion-calendar-view-day, +.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end), +.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, +.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, +.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) { + transition: all 200ms ease !important; +} +.notion-token-remove-button { + transition: opacity 200ms ease !important; +} +.notion-to_do-block > div > div > div[style*='background:'] { + transition: background 200ms ease !important; +} + +/* normalise inline-table size */ +.notion-page-content .notion-collection_view-block { + width: 100% !important; +} +.notion-page-content + .notion-collection_view-block + [style*='min-width: calc(100% - 192px);'], +.notion-page-content + .notion-collection_view-block + [style*='min-width: 708px;'] { + min-width: 100% !important; +} +.notion-page-content .notion-collection_view-block > div { + padding: 0 1px; +} diff --git a/repo/core/styles.css b/repo/core/styles.css index 3019d73..b2a7b88 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -1,10 +1,12 @@ /* * notion-enhancer * (c) 2020 dragonwocky - * (c) 2020 TarasokUA * (https://dragonwocky.me/) under the MIT license */ -@import './theme.css'; +@import './variables.css'; +@import './dark.css'; +@import './light.css'; +@import './shared.css'; @import './scrollbars.css'; @import './titlebar.css'; diff --git a/repo/core/theme.css b/repo/core/theme.css deleted file mode 100644 index baf2ada..0000000 --- a/repo/core/theme.css +++ /dev/null @@ -1,493 +0,0 @@ -/* - * notion-enhancer - * (c) 2020 dragonwocky - * (c) 2020 TarasokUA - * (c) 2020 Arecsu - * (c) 2020 u/zenith_illinois - * (https://dragonwocky.me/) under the MIT license - */ - -:root { - /** light **/ - - --theme_light-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', - Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', - 'Segoe UI Symbol'; - --theme_light-font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', - 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', - SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; - --theme_light-font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; - --theme_light-font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, - Courier, monospace; - - --theme_light-dragarea: #e6e6e6; - --theme_light-button_hover: rgb(239, 239, 239); - --theme_light-button_hover-border: transparent; - --theme_light-button_close: #e81123; - --theme_light-button_close-fill: white; - - --theme_light-scrollbar: #d9d8d6; - --theme_light-scrollbar-border: #cacac8; - --theme_light-scrollbar_hover: #cacac8; - - /** dark **/ - - --theme_dark-main: rgb(47, 52, 55); - --theme_dark-sidebar: rgb(55, 60, 63); - --theme_dark-dragarea: #272d2f; - --theme_dark-preview-width: 977px; - --theme_dark-preview_banner-height: 20vh; - --theme_dark-page_banner-height: 30vh; - - --theme_dark-font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', - Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', - 'Segoe UI Symbol'; - --theme_dark-font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', - 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', - SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; - --theme_dark-font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; - --theme_dark-font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, - Courier, monospace; - - --theme_dark-scrollbar: #505457; - --theme_dark-scrollbar-border: transparent; - --theme_dark-scrollbar_hover: #696d6f; - - --theme_dark-card: rgb(63, 68, 71); - --theme_dark-card-border: rgb(63, 68, 71); - --theme_dark-table-border: rgba(255, 255, 255, 0.1); - --theme_dark-button_hover: rgb(71, 76, 80); - --theme_dark-button_close: #e81123; - --theme_dark-button_close-fill: white; - --theme_dark-button_hover-border: transparent; - - --theme_dark-selected: rgba(46, 170, 220, 0.2); - --theme_dark-primary: rgb(46, 170, 220); - --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-todo_empty-border: currentColor; - --theme_dark-todo_ticked: currentColor; - --theme_dark-todo_ticked-background: var(--theme_dark-primary); - --theme_dark-todo_hover-background: rgb(71, 76, 80); - - --theme_dark-danger_text: rgb(235, 87, 87); - --theme_dark-danger_border: rgba(235, 87, 87, 0.5); - - --theme_dark-text: rgba(255, 255, 255, 0.9); - --theme_dark-text_ui: rgba(255, 255, 255, 0.6); - --theme_dark-text_ui_dark: rgba(255, 255, 255, 0.4); - --theme_dark-text_gray: rgba(151, 154, 155, 0.95); - --theme_dark-text_brown: rgb(147, 114, 100); - --theme_dark-text_orange: rgb(255, 163, 68); - --theme_dark-text_yellow: rgb(255, 220, 73); - --theme_dark-text_green: rgb(77, 171, 154); - --theme_dark-text_blue: rgb(82, 156, 202); - --theme_dark-text_purple: rgb(154, 109, 215); - --theme_dark-text_pink: rgb(226, 85, 161); - --theme_dark-text_red: rgb(255, 115, 105); - --theme_dark-bg_gray: rgba(151, 154, 155, 0.5); - --theme_dark-bg_brown: rgba(147, 114, 100, 0.5); - --theme_dark-bg_orange: rgba(255, 163, 68, 0.5); - --theme_dark-bg_yellow: rgba(255, 220, 73, 0.5); - --theme_dark-bg_green: rgba(77, 171, 154, 0.5); - --theme_dark-bg_blue: rgba(82, 156, 202, 0.5); - --theme_dark-bg_purple: rgba(154, 109, 215, 0.5); - --theme_dark-bg_pink: rgba(226, 85, 161, 0.5); - --theme_dark-bg_red: rgba(255, 115, 105, 0.5); - --theme_dark-line_gray: rgb(69, 75, 78); - --theme_dark-line_brown: rgb(67, 64, 64); - --theme_dark-line_orange: rgb(89, 74, 58); - --theme_dark-line_yellow: rgb(89, 86, 59); - --theme_dark-line_green: rgb(53, 76, 75); - --theme_dark-line_blue: rgb(54, 73, 84); - --theme_dark-line_purple: rgb(68, 63, 87); - --theme_dark-line_pink: rgb(83, 59, 76); - --theme_dark-line_red: rgb(89, 65, 65); - - --theme_dark-code_inline-text: #eb5757; - --theme_dark-code_inline-background: rgba(135, 131, 120, 0.15); - --theme_dark-code_text: rgba(255, 255, 255, 0.9); - --theme_dark-code-background: rgb(63, 68, 71); - --theme_dark-code_function: rgba(255, 255, 255, 0.9); - --theme_dark-code_keyword: hsl(350, 40%, 70%); - --theme_dark-code_tag: hsl(350, 40%, 70%); - --theme_dark-code_operator: hsl(40, 90%, 60%); - --theme_dark-code_builtin: hsl(75, 70%, 60%); - --theme_dark-code_attr-name: hsl(75, 70%, 60%); - --theme_dark-code_comment: hsl(30, 20%, 50%); - --theme_dark-code_punctuation: rgba(255, 255, 255, 0.9); - --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%); -} - -/** general ui **/ - -.notion-dark-theme [style*='background: rgb(55, 60, 63)'], -.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { - background: var(--theme_dark-sidebar) !important; -} -.notion-body.dark, -.notion-dark-theme [style*='background: rgb(47, 52, 55)'], -.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { - background: var(--theme_dark-main) !important; -} - -.notion-peek-renderer > div:nth-child(2) { - max-width: var(--theme_dark-preview-width) !important; -} -.notion-peek-renderer - .notion-scroller.vertical - [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], -.notion-peek-renderer - .notion-scroller.vertical - [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] - img { - height: var(--theme_dark-preview_banner-height) !important; -} -[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], -[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] - img { - height: var(--theme_dark-page_banner-height) !important; -} - -.notion-dark-theme [style*='Segoe UI'] { - font-family: var(--theme_dark-font_sans) !important; -} -.notion-dark-theme [style*='Georgia'] { - font-family: var(--theme_dark-font_serif) !important; -} -.notion-dark-theme [style*='iawriter-mono'] { - font-family: var(--theme_dark-font_mono) !important; -} -.notion-dark-theme [style*='SFMono-Regular'] { - font-family: var(--theme_dark-font_code) !important; -} - -.notion-light-theme [style*='Segoe UI'] { - font-family: var(--theme_light-font_sans) !important; -} -.notion-light-theme [style*='Georgia'] { - font-family: var(--theme_light-font_serif) !important; -} -.notion-light-theme [style*='iawriter-mono'] { - font-family: var(--theme_light-font_mono) !important; -} -.notion-light-theme [style*='SFMono-Regular'] { - font-family: var(--theme_light-font_code) !important; -} - -/* prevent block hover options overlaying topbar */ -*:not([style*='z-index']) { - z-index: 1; -} -.notion-dark-theme .notion-topbar { - background: var(--theme_dark-main); -} - -/** databases **/ - -.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { - background: var(--theme_dark-card) !important; -} -.notion-dark-theme .notion-frame [style*='background: rgb(63, 68, 71)'] { - border: 0.5px solid var(--theme_dark-card-border); -} - -.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { - box-shadow: var(--theme_dark-main) -3px 0px 0px !important; -} -.notion-dark-theme - [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark-main) -3px 0px 0px, - var(--theme_dark-table-border) 0px 1px 0px !important; -} - -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { - border-top: 1px solid var(--theme_dark-table-border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { - box-shadow: var(--theme_dark-table-border) -1px 0px 0px !important; -} -.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { - border-bottom: 1px solid var(--theme_dark-table-border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark-table-border) 0px 1px 0px !important; -} -.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] { - border-right: 1px solid var(--theme_dark-table-border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { - box-shadow: var(--theme_dark-table-border) 0px -1px 0px !important; -} -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] { - border-left: 1px solid var(--theme_dark-table-border) !important; -} -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { - box-shadow: var(--theme_dark-table-border) 0px 1px 0px inset !important; -} - -.notion-dark-theme [style*='background: rgb(71, 76, 80)'], -.notion-dark-theme [style*='background: rgb(80, 85, 88)'], -.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { - background: var(--theme_dark-button_hover) !important; - box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); -} - -.notion-calendar-view-day, -.DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end), -.DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, -.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day--outside:hover, -.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) { - transition: all 200ms ease !important; -} -.notion-token-remove-button { - transition: opacity 200ms ease !important; -} - -/* fix inline-tables in pages (?) */ -.notion-page-content .notion-collection_view-block { - width: 100% !important; -} -.notion-page-content .notion-collection_view-block > div:first-child { - padding-left: 0px !important; - padding-right: 0px !important; -} -.notion-page-content - .notion-collection_view-block - [style*='min-width: calc(100% - 192px);'], -.notion-page-content - .notion-collection_view-block - [style*='min-width: 708px;'] { - min-width: 100% !important; -} -.notion-page-content .notion-collection_view-block .notion-table-view { - padding-left: 0px !important; - padding-right: 0px !important; -} - -/** colours **/ - -.notion-dark-theme ::selection, -.notion-dark-theme - [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), -.notion-dark-theme - [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { - background: var(--theme_dark-selected) !important; -} - -.notion-dark-theme [style*='background: rgb(46, 170, 220)'], -.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { - background: var(--theme_dark-primary) !important; -} -.notion-dark-theme - [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { - box-shadow: var(--theme_dark-primary) 0px 0px 0px 2px inset !important; -} -.notion-dark-theme .notion-focusable:focus-within { - box-shadow: var(--theme_dark-primary) 0px 0px 0px 1px inset, - var(--theme_dark-primary_hover) 0px 0px 0px 2px !important; -} -.notion-dark-theme [style*='background: rgb(6, 156, 205)'] { - background: var(--theme_dark-primary_hover) !important; -} -.notion-dark-theme [style*='background: rgb(0, 141, 190)'] { - background: var(--theme_dark-primary_click) !important; -} -.notion-dark-theme - .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, -.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { - background: var(--theme_dark-primary_indicator) !important; -} - -.notion-dark-theme .notion-to_do-block .checkboxSquare path { - fill: var(--theme_dark-todo_empty-border) !important; -} -.notion-dark-theme .notion-to_do-block .check polygon { - fill: var(--theme_dark-todo_ticked-fill) !important; -} -.notion-dark-theme - .notion-to_do-block - [style*='background: rgb(46, 170, 220)'] { - background: var(--theme_dark-todo_ticked-background) !important; -} -.notion-to_do-block > div > div > div[style*='background:'] { - transition: background 200ms ease !important; -} -.notion-dark-theme .notion-to_do-block [style*='background: rgb(71, 76, 80)'] { - background: var(--theme_dark-todo_hover-background) !important; -} - -.notion-dark-theme - [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { - color: var(--theme_dark-danger_text) !important; - border: 1px solid var(--theme_dark-danger_border) !important; -} - -.notion-dark-theme, -.notion-dark-theme .notion-page-content [style*='color: inherit;'], -.notion-dark-theme .notion-frame .notion-page-block { - color: var(--theme_dark-text) !important; -} -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { - color: var(--theme_dark-text_ui) !important; -} -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { - color: var(--theme_dark-text_ui_dark) !important; -} - -.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { - color: var(--theme_dark-text_gray) !important; -} -.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], -.notion-dark-theme [style*='background:rgb(69,75,78)'] { - background: var(--theme_dark-bg_gray) !important; -} -.notion-dark-theme [style*='background: rgb(69, 75, 78)'] { - background: var(--theme_dark-line_gray) !important; -} -.notion-dark-theme [style*='color:rgb(147,114,100)'] { - color: var(--theme_dark-text_brown) !important; -} -.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], -.notion-dark-theme [style*='background:rgb(67,64,64)'] { - background: var(--theme_dark-bg_brown) !important; -} -.notion-dark-theme [style*='background: rgb(67, 64, 64)'] { - background: var(--theme_dark-line_brown) !important; -} -.notion-dark-theme [style*='color:rgb(255,163,68)'] { - color: var(--theme_dark-text_orange) !important; -} -.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], -.notion-dark-theme [style*='background:rgb(89,74,58)'] { - background: var(--theme_dark-bg_orange) !important; -} -.notion-dark-theme [style*='background: rgb(89, 74, 58)'] { - background: var(--theme_dark-line_orange) !important; -} -.notion-dark-theme [style*='color:rgb(255,220,73)'] { - color: var(--theme_dark-text_yellow) !important; -} -.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], -.notion-dark-theme [style*='background:rgb(89,86,59)'] { - background: var(--theme_dark-bg_yellow) !important; -} -.notion-dark-theme [style*='background: rgb(89, 86, 59)'] { - background: var(--theme_dark-line_yellow) !important; -} -.notion-dark-theme [style*='color:rgb(77,171,154)'] { - color: var(--theme_dark-text_green) !important; -} -.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], -.notion-dark-theme [style*='background:rgb(53,76,75)'] { - background: var(--theme_dark-bg_green) !important; -} -.notion-dark-theme [style*='background: rgb(53, 76, 75)'] { - background: var(--theme_dark-line_green) !important; -} -.notion-dark-theme [style*='color:rgb(82,156,202)'] { - color: var(--theme_dark-text_blue) !important; -} -.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], -.notion-dark-theme [style*='background:rgb(54,73,84)'] { - background: var(--theme_dark-bg_blue) !important; -} -.notion-dark-theme [style*='background: rgb(54, 73, 84)'] { - background: var(--theme_dark-line_blue) !important; -} -.notion-dark-theme [style*='color:rgb(154,109,215)'] { - color: var(--theme_dark-text_purple) !important; -} -.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], -.notion-dark-theme [style*='background:rgb(68,63,87)'] { - background: var(--theme_dark-bg_purple) !important; -} -.notion-dark-theme [style*='background: rgb(68, 63, 87)'] { - background: var(--theme_dark-line_purple) !important; -} -.notion-dark-theme [style*='color:rgb(226,85,161)'] { - color: var(--theme_dark-text_pink) !important; -} -.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], -.notion-dark-theme [style*='background:rgb(83,59,76)'] { - background: var(--theme_dark-bg_pink) !important; -} -.notion-dark-theme [style*='background: rgb(83, 59, 76)'] { - background: var(--theme_dark-line_pink) !important; -} -.notion-dark-theme [style*='color:rgb(255,115,105)'] { - color: var(--theme_dark-text_red) !important; -} -.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], -.notion-dark-theme [style*='background:rgb(89,65,65)'] { - background: var(--theme_dark-bg_red) !important; -} -.notion-dark-theme [style*='background: rgb(89, 65, 65)'] { - background: var(--theme_dark-line_red) !important; -} - -/* fix highlight padding: this isn't a typo */ -[style*='background:rgb('] { - padding-bottom: 3px !important; -} - -/* code */ - -.notion-dark-theme [style*='color:#EB5757'] { - color: var(--theme_dark-code_inline-text) !important; - background: var(--theme_dark-code_inline-background) !important; -} - -.notion-dark-theme - [style*='flex-grow: 1; border-radius: 3px; text-align: left; position: relative; background: rgb(63, 68, 71); min-width: 0px; width: 100%;'] { - background: var(--theme_dark-code-background) !important; -} -.notion-dark-theme .notion-code-block > div { - color: var(--theme_dark-code_text) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.function { - color: var(--theme_dark-code_function) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.keyword { - color: var(--theme_dark-code_keyword) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.tag { - color: var(--theme_dark-code_tag) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.operator { - color: var(--theme_dark-code_operator) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.builtin { - color: var(--theme_dark-code_builtin) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.attr-name { - color: var(--theme_dark-code_attr-name) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.attr-value { - color: var(--theme_dark-code_attr-value) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.comment { - color: var(--theme_dark-code_comment) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.punctuation { - color: var(--theme_dark-code_punctuation) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.doctype { - color: var(--theme_dark-code_doctype) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.number { - color: var(--theme_dark-code_number) !important; -} -.notion-dark-theme .notion-dark-theme .notion-code-block .token.string { - color: var(--theme_dark-code_string) !important; -} diff --git a/repo/core/titlebar.css b/repo/core/titlebar.css index 2296df4..c4d3335 100644 --- a/repo/core/titlebar.css +++ b/repo/core/titlebar.css @@ -14,10 +14,10 @@ width: 100%; } .frameless .notion-dark-theme .window-dragarea { - background: var(--theme_dark-dragarea); + background: var(--theme_dark--dragarea); } .frameless .notion-light-theme .window-dragarea { - background: var(--theme_light-dragarea); + background: var(--theme_light--dragarea); } @media (max-width: 760px) { @@ -74,25 +74,25 @@ } .notion-dark-theme .window-button:hover { - background: var(--theme_dark-button_hover); - box-shadow: 0 0 0 0.5px var(--theme_dark-button_hover-border); + background: var(--theme_dark--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); } .notion-dark-theme .window-button.btn-close:hover { - background: var(--theme_dark-button_close); + background: var(--theme_dark--button_close); } .notion-dark-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_dark-button_close-fill); + stroke: var(--theme_dark--button_close-fill); } .notion-light-theme .window-button.btn-close:hover { - background: var(--theme_light-button_close); + background: var(--theme_light--button_close); } .notion-light-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_light-button_close-fill); + stroke: var(--theme_light--button_close-fill); } .notion-light-theme .window-button:hover { - background: var(--theme_light-button_hover); - box-shadow: 0 0 0 0.5px var(--theme_light-button_hover-border); + background: var(--theme_light--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); } /* hide topbar when sidebar is hidden */ diff --git a/repo/core/variables.css b/repo/core/variables.css new file mode 100644 index 0000000..d13f66a --- /dev/null +++ b/repo/core/variables.css @@ -0,0 +1,200 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (c) 2020 Arecsu + * (c) 2020 u/zenith_illinois + * (https://dragonwocky.me/) under the MIT license + */ + +:root { + /** dark **/ + + --theme_dark--main: rgb(47, 52, 55); + --theme_dark--sidebar: rgb(55, 60, 63); + --theme_dark--dragarea: #272d2f; + --theme_dark--preview-width: 977px; + --theme_dark--preview_banner-height: 20vh; + --theme_dark--page_banner-height: 30vh; + + --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_dark--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; + + --theme_dark--scrollbar: #505457; + --theme_dark--scrollbar-border: transparent; + --theme_dark--scrollbar_hover: #696d6f; + + --theme_dark--card: rgb(63, 68, 71); + --theme_dark--card-border: rgb(63, 68, 71); + --theme_dark--table-border: rgba(255, 255, 255, 0.1); + --theme_dark--button_hover: rgb(71, 76, 80); + --theme_dark--button_hover-border: transparent; + --theme_dark--button_close: #e81123; + --theme_dark--button_close-fill: white; + + --theme_dark--selected: rgba(46, 170, 220, 0.2); + --theme_dark--primary: rgb(46, 170, 220); + --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--todo_empty-border: currentColor; + --theme_dark--todo_ticked: currentColor; + --theme_dark--todo_ticked-background: var(--theme_dark--primary); + --theme_dark--todo_hover-background: rgb(71, 76, 80); + + --theme_dark--danger_text: rgb(235, 87, 87); + --theme_dark--danger_border: rgba(235, 87, 87, 0.5); + + --theme_dark--text: rgba(255, 255, 255, 0.9); + --theme_dark--text_ui: rgba(255, 255, 255, 0.6); + --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4); + + --theme_dark--text_gray: rgba(151, 154, 155, 0.95); + --theme_dark--text_brown: rgb(147, 114, 100); + --theme_dark--text_orange: rgb(255, 163, 68); + --theme_dark--text_yellow: rgb(255, 220, 73); + --theme_dark--text_green: rgb(77, 171, 154); + --theme_dark--text_blue: rgb(82, 156, 202); + --theme_dark--text_purple: rgb(154, 109, 215); + --theme_dark--text_pink: rgb(226, 85, 161); + --theme_dark--text_red: rgb(255, 115, 105); + --theme_dark--bg_gray: rgba(151, 154, 155, 0.5); + --theme_dark--bg_brown: rgba(147, 114, 100, 0.5); + --theme_dark--bg_orange: rgba(255, 163, 68, 0.5); + --theme_dark--bg_yellow: rgba(255, 220, 73, 0.5); + --theme_dark--bg_green: rgba(77, 171, 154, 0.5); + --theme_dark--bg_blue: rgba(82, 156, 202, 0.5); + --theme_dark--bg_purple: rgba(154, 109, 215, 0.5); + --theme_dark--bg_pink: rgba(226, 85, 161, 0.5); + --theme_dark--bg_red: rgba(255, 115, 105, 0.5); + --theme_dark--line_gray: rgb(69, 75, 78); + --theme_dark--line_brown: rgb(67, 64, 64); + --theme_dark--line_orange: rgb(89, 74, 58); + --theme_dark--line_yellow: rgb(89, 86, 59); + --theme_dark--line_green: rgb(53, 76, 75); + --theme_dark--line_blue: rgb(54, 73, 84); + --theme_dark--line_purple: rgb(68, 63, 87); + --theme_dark--line_pink: rgb(83, 59, 76); + --theme_dark--line_red: rgb(89, 65, 65); + + --theme_dark--code_inline-text: #eb5757; + --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15); + --theme_dark--code_text: var(--theme_dark--text); + --theme_dark--code-background: rgb(63, 68, 71); + --theme_dark--code_function: rgba(255, 255, 255, 0.9); + --theme_dark--code_keyword: hsl(350, 40%, 70%); + --theme_dark--code_tag: hsl(350, 40%, 70%); + --theme_dark--code_operator: hsl(40, 90%, 60%); + --theme_dark--code_property: hsl(350, 40%, 70%); + --theme_dark--code_builtin: hsl(75, 70%, 60%); + --theme_dark--code_attr-name: hsl(75, 70%, 60%); + --theme_dark--code_comment: hsl(30, 20%, 50%); + --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9); + --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%); + + /** light **/ + + --theme_light--main: white; + --theme_light--sidebar: rgb(247, 246, 243); + --theme_light--dragarea: rgba(55, 53, 47, 0.04); + --theme_light--preview-width: 977px; + --theme_light--preview_banner-height: 20vh; + --theme_light--page_banner-height: 30vh; + + --theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; + --theme_light--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_light--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_light--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; + + --theme_light--scrollbar: #d9d8d6; + --theme_light--scrollbar-border: #cacac8; + --theme_light--scrollbar_hover: #cacac8; + + --theme_light--card: rgb(247, 246, 243); + --theme_light--card-border: rgb(247, 246, 243); + --theme_light--table-border: rgba(55, 53, 47, 0.16); + --theme_light--button_hover: rgba(55, 53, 47, 0.08); + --theme_light--button_hover-border: transparent; + --theme_light--button_close: #e81123; + --theme_light--button_close-fill: white; + + --theme_light--selected: rgba(46, 170, 220, 0.2); + --theme_light--primary: rgb(46, 170, 220); + --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--todo_empty-border: currentColor; + --theme_light--todo_ticked: currentColor; + --theme_light--todo_ticked-background: var(--theme_light--primary); + --theme_light--todo_hover-background: rgba(55, 53, 47, 0.08); + + --theme_light--danger_text: rgb(235, 87, 87); + --theme_light--danger_border: rgba(235, 87, 87, 0.5); + + --theme_light--text: rgb(55, 53, 47); + --theme_light--text_ui: rgba(55, 53, 47, 0.6); + --theme_light--text_ui_info: rgba(55, 53, 47, 0.4); + + --theme_light--text_gray: rgb(155, 154, 151); + --theme_light--text_brown: rgb(100, 71, 58); + --theme_light--text_orange: rgb(217, 115, 13); + --theme_light--text_yellow: rgb(223, 171, 1); + --theme_light--text_green: rgb(15, 123, 108); + --theme_light--text_blue: rgb(11, 110, 153); + --theme_light--text_purple: rgb(105, 64, 165); + --theme_light--text_pink: rgb(173, 26, 114); + --theme_light--text_red: rgb(224, 62, 62); + --theme_light--bg_gray: rgb(235, 236, 237); + --theme_light--bg_brown: rgb(233, 229, 227); + --theme_light--bg_orange: rgb(250, 235, 221); + --theme_light--bg_yellow: rgb(251, 243, 219); + --theme_light--bg_green: rgb(221, 237, 234); + --theme_light--bg_blue: rgb(221, 235, 241); + --theme_light--bg_purple: rgb(234, 228, 242); + --theme_light--bg_pink: rgb(244, 223, 235); + --theme_light--bg_red: rgb(251, 228, 228); + --theme_light--line_gray: rgb(235, 236, 237); + --theme_light--line_brown: rgb(233, 229, 227); + --theme_light--line_orange: rgb(250, 235, 221); + --theme_light--line_yellow: rgb(251, 243, 219); + --theme_light--line_green: rgb(221, 237, 234); + --theme_light--line_blue: rgb(221, 235, 241); + --theme_light--line_purple: rgb(105, 64, 165); + --theme_light--line_pink: rgb(244, 223, 235); + --theme_light--line_red: rgb(251, 228, 228); + + --theme_light--code_inline-text: #eb5757; + --theme_light--code_inline-background: rgba(135, 131, 120, 0.15); + --theme_light--code_text: var(--theme_light--text); + --theme_light--code-background: rgb(247, 246, 243); + --theme_light--code_function: #dd4a68; + --theme_light--code_keyword: #07a; + --theme_light--code_tag: #905; + --theme_light--code_operator: #9a6e3a; + --theme_light--code_property: #905; + --theme_light--code_builtin: #690; + --theme_light--code_attr-name: #690; + --theme_light--code_comment: slategray; + --theme_light--code_punctuation: #999; + --theme_light--code_doctype: slategray; + --theme_light--code_number: #905; + --theme_light--code_string: #690; + --theme_light--code_attr-value: #07a; +} From 06211688b62e80e2108204c34c8c404e05c2c859 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 25 Jul 2020 22:49:08 +1000 Subject: [PATCH 017/371] light theoretically 100% :) --- repo/core/dark.css | 7 ++++- repo/core/light.css | 65 ++++++++++++++++++++++++-------------------- repo/core/styles.css | 52 +++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 30 deletions(-) diff --git a/repo/core/dark.css b/repo/core/dark.css index 9576d08..fc660d6 100644 --- a/repo/core/dark.css +++ b/repo/core/dark.css @@ -122,6 +122,9 @@ background: var(--theme_dark--selected) !important; } +.notion-dark-theme [style*='color: rgb(46, 170, 220)'] { + color: var(--theme_dark--primary) !important; +} .notion-dark-theme [style*='background: rgb(46, 170, 220)'], .notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_dark--primary) !important; @@ -180,8 +183,10 @@ .notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { color: var(--theme_dark--text_ui_info) !important; } -.notion-dark-theme [style*='fill: rgba(202, 204, 206,'], .notion-dark-theme [style*='fill: rgb(202, 204, 206)'] { + fill: var(--theme_dark--text) !important; +} +.notion-dark-theme [style*='fill: rgba(202, 204, 206,'] { fill: var(--theme_dark--text_ui) !important; } diff --git a/repo/core/light.css b/repo/core/light.css index 40fd3d0..798e63a 100644 --- a/repo/core/light.css +++ b/repo/core/light.css @@ -14,7 +14,9 @@ background: var(--theme_light--sidebar) !important; } .notion-body.light, -.notion-light-theme [style*='background: white'] { +.notion-light-theme [style*='background: white'], +.notion-light-theme [style*='background-color: white'], +.notion-light-theme [style*='background: rgba(206, 205, 202, 0.5)'] { background: var(--theme_light--main) !important; } @@ -106,6 +108,9 @@ background: var(--theme_light--button_hover) !important; box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); } +.notion-light-theme [style*='background: rgba(242, 241, 238, 0.6)'] { + background: var(--theme_light--button) !important; +} /** colours **/ @@ -117,6 +122,9 @@ background: var(--theme_light--selected) !important; } +.notion-light-theme [style*='color: rgb(46, 170, 220)'] { + color: var(--theme_light--primary) !important; +} .notion-light-theme [style*='background: rgb(46, 170, 220)'], .notion-light-theme [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_light--primary) !important; @@ -165,114 +173,113 @@ } .notion-light-theme, -.notion-light-theme [style*='color:'] { +.notion-light-theme .notion-page-content [style*='color: inherit;'], +.notion-light-theme .notion-frame .notion-page-block, +.notion-light-theme [style*='color: rgb(55, 53, 47);'] { color: var(--theme_light--text) !important; } -.notion-light-theme [style*='color: rgba(255, 255, 255, 0.6)'], -.notion-light-theme [style*='color: rgba(25, 23, 17,'], -.notion-light-theme [style*='color: rgba(55, 53, 47,'], -.notion-light-theme [style*='color: rgb(25, 23, 17)'], -.notion-light-theme [style*='color: rgb(55, 53, 47)'] { +.notion-light-theme [style*='color: rgba(55, 53, 47, 0.6)'], +.notion-light-theme [style*='color: rgba(25, 23, 17, 0.6)'] { color: var(--theme_light--text_ui) !important; } -.notion-light-theme .notion-page-content { - color: var(--theme_light--text) !important; +.notion-light-theme [style*='color: rgba(55, 53, 47, 0.4)'] { + color: var(--theme_light--text_ui_info) !important; } .notion-light-theme [style*='fill: rgba(55, 53, 47,'] { fill: var(--theme_light--text_ui) !important; } -.notion-light-theme [style*='color: rgba(255, 255, 255, 0.4)'] { - color: var(--theme_light--text_ui_info) !important; +.notion-light-theme [style*='fill: rgba(55, 53, 47, 0.8)'] { + fill: var(--theme_light--text) !important; } .notion-light-theme [style*='color:rgb(155,154,151)'] { color: var(--theme_light--text_gray) !important; } -.notion-light-theme [style*='background: rgb(235, 236, 237)'], +.notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], .notion-light-theme [style*='background:rgb(235,236,237)'] { background: var(--theme_light--bg_gray) !important; } -.notion-light-theme div[style='background: rgb(235, 236, 237)'] { +.notion-light-theme [style*='background: rgb(235, 236, 237)'] { background: var(--theme_light--line_gray) !important; } .notion-light-theme [style*='color:rgb(100,71,58)'] { color: var(--theme_light--text_brown) !important; } -.notion-light-theme [style*='background: rgb(233, 229, 227)'], +.notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], .notion-light-theme [style*='background:rgb(233,229,227)'] { background: var(--theme_light--bg_brown) !important; } -.notion-light-theme div[style='background: rgb(233, 229, 227)'] { +.notion-light-theme [style*='background: rgb(233, 229, 227)'] { background: var(--theme_light--line_brown) !important; } .notion-light-theme [style*='color:rgb(217,115,13)'] { color: var(--theme_light--text_orange) !important; } -.notion-light-theme [style*='background: rgb(250, 235, 221)'], +.notion-light-theme [style*='background: rgba(245, 93, 0, 0.2)'], .notion-light-theme [style*='background:rgb(250,235,221)'] { background: var(--theme_light--bg_orange) !important; } -.notion-light-theme div[style='background: rgb(250, 235, 221)'] { +.notion-light-theme [style*='background: rgb(250, 235, 221)'] { background: var(--theme_light--line_orange) !important; } .notion-light-theme [style*='color:rgb(223,171,1)'] { color: var(--theme_light--text_yellow) !important; } -.notion-light-theme [style*='background: rgb(251, 243, 219)'], +.notion-light-theme [style*='background: rgba(233, 168, 0, 0.2)'], .notion-light-theme [style*='background:rgb(251,243,219)'] { background: var(--theme_light--bg_yellow) !important; } -.notion-light-theme div[style='background: rgb(251, 243, 219)'] { +.notion-light-theme [style*='background: rgb(251, 243, 219)'] { background: var(--theme_light--line_yellow) !important; } .notion-light-theme [style*='color:rgb(15,123,108)'] { color: var(--theme_light--text_green) !important; } -.notion-light-theme [style*='background: rgb(221, 237, 234)'], +.notion-light-theme [style*='background: rgba(0, 135, 107, 0.2)'], .notion-light-theme [style*='background:rgb(221,237,234)'] { background: var(--theme_light--bg_green) !important; } -.notion-light-theme div[style='background: rgb(221, 237, 234)'] { +.notion-light-theme [style*='background: rgb(221, 237, 234)'] { background: var(--theme_light--line_green) !important; } .notion-light-theme [style*='color:rgb(11,110,153)'] { color: var(--theme_light--text_blue) !important; } -.notion-light-theme [style*='background: rgb(221, 235, 241)'], +.notion-light-theme [style*='background: rgba(0, 120, 223, 0.2)'], .notion-light-theme [style*='background:rgb(221,235,241)'] { background: var(--theme_light--bg_blue) !important; } -.notion-light-theme div[style='background: rgb(221, 235, 241)'] { +.notion-light-theme [style*='background: rgb(221, 235, 241)'] { background: var(--theme_light--line_blue) !important; } .notion-light-theme [style*='color:rgb(105,64,165)'] { color: var(--theme_light--text_purple) !important; } -.notion-light-theme [style*='background: rgb(234, 228, 242)'], +.notion-light-theme [style*='background: rgba(103, 36, 222, 0.2)'], .notion-light-theme [style*='background:rgb(234,228,242)'] { background: var(--theme_light--bg_purple) !important; } -.notion-light-theme div[style='background: rgb(234, 228, 242)'] { +.notion-light-theme [style*='background: rgb(234, 228, 242)'] { background: var(--theme_light--line_purple) !important; } .notion-light-theme [style*='color:rgb(173,26,114)'] { color: var(--theme_light--text_pink) !important; } -.notion-light-theme [style*='background: rgb(244, 223, 235)'], +.notion-light-theme [style*='background: rgba(221, 0, 129, 0.2)'], .notion-light-theme [style*='background:rgb(244,223,235)'] { background: var(--theme_light--bg_pink) !important; } -.notion-light-theme div[style='background: rgb(244, 223, 235)'] { +.notion-light-theme [style*='background: rgb(244, 223, 235)'] { background: var(--theme_light--line_pink) !important; } .notion-light-theme [style*='color:rgb(224,62,62)'] { color: var(--theme_light--text_red) !important; } -.notion-light-theme [style*='background: rgb(251, 228, 228)'], +.notion-light-theme [style*='background: rgba(255, 0, 26, 0.2)'], .notion-light-theme [style*='background:rgb(251,228,228)'] { background: var(--theme_light--bg_red) !important; } -.notion-light-theme div[style='background: rgb(251, 228, 228)'] { +.notion-light-theme [style*='background: rgb(251, 228, 228)'] { background: var(--theme_light--line_red) !important; } diff --git a/repo/core/styles.css b/repo/core/styles.css index b2a7b88..6a57d80 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -10,3 +10,55 @@ @import './shared.css'; @import './scrollbars.css'; @import './titlebar.css'; + +:root { + --theme_light--main: rgb(5, 5, 5); + --theme_light--sidebar: rgb(1, 1, 1); + --theme_light--dragarea: #030303; + --theme_light--primary: rgb(177, 24, 24); + --theme_light--primary_hover: rgb(202, 26, 26); + --theme_light--primary_click: rgb(219, 41, 41); + --theme_light--primary_indicator: rgb(202, 26, 26); + + --theme_light--card: rgb(4, 4, 4); + --theme_light--card_border: rgba(10, 10, 10, 0.7); + --theme_light--button: rgb(15, 15, 15); + --theme_light--button_hover: rgb(32, 32, 32); + --theme_light--button_border: rgba(78, 78, 78, 0.7); + --theme_light--table_border: rgba(255, 255, 255, 0.1); + + --theme_light--scrollbar: #232425; + --theme_light--scrollbar-border: transparent; + --theme_light--scrollbar_hover: #373838; + + --theme_light--text: rgb(228, 228, 228); + --theme_light--text_ui: rgba(211, 211, 211, 0.637); + --theme_light--text_ui_info: rgba(211, 211, 211, 0.466); + --theme_light--text_gray: rgba(151, 154, 155, 0.95); + --theme_light--text_brown: rgb(147, 114, 100); + --theme_light--text_orange: rgb(255, 163, 68); + --theme_light--text_yellow: rgb(255, 220, 73); + --theme_light--text_green: rgb(50, 169, 104); + --theme_light--text_blue: rgb(82, 156, 202); + --theme_light--text_purple: rgb(154, 109, 215); + --theme_light--text_pink: rgb(226, 85, 161); + --theme_light--text_red: rgb(218, 47, 35); + --theme_light--bg_gray: rgba(126, 128, 129, 0.5); + --theme_light--bg_brown: #50331f; + --theme_light--bg_orange: rgba(255, 155, 0, 0.58); + --theme_light--bg_yellow: rgba(183, 155, 0, 1); + --theme_light--bg_green: rgb(50, 129, 47); + --theme_light--bg_blue: rgba(0, 90, 146, 0.71); + --theme_light--bg_purple: rgba(91, 49, 148, 0.74); + --theme_light--bg_pink: rgba(243, 61, 159, 0.5); + --theme_light--bg_red: rgb(122, 20, 20); + --theme_light--line_gray: rgba(126, 128, 129, 0.301); + --theme_light--line_brown: #50331fad; + --theme_light--line_orange: rgba(255, 153, 0, 0.315); + --theme_light--line_yellow: rgba(183, 156, 0, 0.445); + --theme_light--line_green: rgba(50, 129, 47, 0.39); + --theme_light--line_blue: rgba(0, 90, 146, 0.521); + --theme_light--line_purple: rgba(90, 49, 148, 0.349); + --theme_light--line_pink: rgba(243, 61, 158, 0.301); + --theme_light--line_red: rgba(122, 20, 20, 0.623); +} From 9f92ff325da3387e835e05e2f934adea2c231d76 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 26 Jul 2020 16:32:55 +1000 Subject: [PATCH 018/371] refactor some stuff, fix some bugs, apply theme to ctrl+f popup --- repo/core/client.js | 39 +++++++++++++++++++-- repo/core/{window.js => create.js} | 0 repo/core/dark.css | 10 ++++-- repo/core/light.css | 10 ++++-- repo/core/mod.js | 6 ++-- repo/core/{dragarea.js => render.js} | 0 repo/core/styles.css | 52 ---------------------------- repo/core/tray.js | 19 ++++++++++ repo/core/variables.css | 4 +++ 9 files changed, 79 insertions(+), 61 deletions(-) rename repo/core/{window.js => create.js} (100%) rename repo/core/{dragarea.js => render.js} (100%) diff --git a/repo/core/client.js b/repo/core/client.js index 8a9676a..c0b7d21 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -12,7 +12,13 @@ module.exports = (defaults) => path = require('path'), fs = require('fs-extra'), is_mac = process.platform === 'darwin', - settings = store(defaults); + settings = store(defaults), + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(), + notionIpc = require(`${__notion.replace( + /\\/g, + '/' + )}/app/helpers/notionIpc.js`); // additional hotkeys document.defaultView.addEventListener('keyup', (event) => { @@ -39,10 +45,39 @@ module.exports = (defaults) => sidebar.style.overflow = ''; setTimeout(() => { sidebar.style.overflow = 'hidden auto'; - }, 1); + }, 10); } } + // ctrl+f theming + function setTheme() { + const mode = JSON.parse(localStorage.theme).mode, + style = (prop) => + getComputedStyle(document.body).getPropertyValue(prop); + notionIpc.sendNotionToIndex('search:set-theme', { + 'mode': mode, + 'colors': { + 'white': style(`--theme_${mode}--todo_ticked-fill`), + 'blue': style(`--theme_${mode}--primary`), + }, + 'borderRadius': 3, + 'textColor': style(`--theme_${mode}--text`), + 'popoverBackgroundColor': style(`--theme_${mode}--card`), + 'popoverBoxShadow': `0 0 0 1px ${style( + `--theme_${mode}--overlay` + )}, 0 3px 6px ${style(`--theme_${mode}--overlay`)}`, + 'inputBoxShadow': `box-shadow: ${style( + `--theme_${mode}--primary` + )} 0px 0px 0px 1px inset, ${style( + `--theme_${mode}--primary_hover` + )} 0px 0px 0px 2px !important`, + 'inputBackgroundColor': style(`--theme_${mode}--main`), + 'dividerColor': style(`--theme_${mode}--table-border`), + 'shadowOpacity': 0.2, + }); + } + setInterval(setTheme, 100); + // frameless if (settings.frameless) { document.body.classList.add('frameless'); diff --git a/repo/core/window.js b/repo/core/create.js similarity index 100% rename from repo/core/window.js rename to repo/core/create.js diff --git a/repo/core/dark.css b/repo/core/dark.css index fc660d6..f8512f8 100644 --- a/repo/core/dark.css +++ b/repo/core/dark.css @@ -10,7 +10,8 @@ /** general ui **/ .notion-dark-theme [style*='background: rgb(55, 60, 63)'], -.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'] { +.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'], +.notion-dark-theme [style*='background: rgb(120, 123, 123)'] { background: var(--theme_dark--sidebar) !important; } .notion-body.dark, @@ -19,6 +20,10 @@ background: var(--theme_dark--main) !important; } +.notion-dark-theme [style*='background: rgba(15, 15, 15, 0.6)'] { + background: var(--theme_dark--overlay) !important; +} + .notion-dark-theme .notion-peek-renderer > div:nth-child(2) { max-width: var(--theme_dark--preview-width) !important; } @@ -107,7 +112,8 @@ } .notion-dark-theme [style*='background: rgb(71, 76, 80)'], -.notion-dark-theme [style*='background: rgb(80, 85, 88)'] { +.notion-dark-theme [style*='background: rgb(80, 85, 88)'], +.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { background: var(--theme_dark--button_hover) !important; box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); } diff --git a/repo/core/light.css b/repo/core/light.css index 798e63a..7067305 100644 --- a/repo/core/light.css +++ b/repo/core/light.css @@ -10,7 +10,8 @@ /** general ui **/ .notion-light-theme [style*='background: rgb(247, 246, 243)'], -.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'] { +.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'], +.notion-light-theme [style*='background: rgb(223, 223, 222)'] { background: var(--theme_light--sidebar) !important; } .notion-body.light, @@ -20,6 +21,10 @@ background: var(--theme_light--main) !important; } +.notion-light-theme [style*='background: rgba(15, 15, 15, 0.6)'] { + background: var(--theme_light--overlay) !important; +} + .notion-light-theme .notion-peek-renderer > div:nth-child(2) { max-width: var(--theme_light--preview-width) !important; } @@ -104,7 +109,8 @@ box-shadow: var(--theme_light--table-border) 0px 1px 0px inset !important; } -.notion-light-theme [style*='background: rgba(55, 53, 47,'] { +.notion-light-theme [style*='background: rgba(55, 53, 47,'], +.notion-light-theme [style*='background: rgb(239, 239, 238)'] { background: var(--theme_light--button_hover) !important; box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); } diff --git a/repo/core/mod.js b/repo/core/mod.js index 5e6ed8c..0539538 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -5,7 +5,7 @@ */ const defaults = { - openhidden: true, + openhidden: false, maximized: false, close_to_tray: true, frameless: true, @@ -27,8 +27,8 @@ module.exports = { options: [], hacks: { 'main/main.js': require('./tray.js')(defaults), - 'main/createWindow.js': require('./window.js')(defaults), - 'renderer/index.js': require('./dragarea.js')(defaults), + 'main/createWindow.js': require('./create.js')(defaults), + 'renderer/index.js': require('./render.js')(defaults), 'renderer/preload.js': require('./client.js')(defaults), }, }; diff --git a/repo/core/dragarea.js b/repo/core/render.js similarity index 100% rename from repo/core/dragarea.js rename to repo/core/render.js diff --git a/repo/core/styles.css b/repo/core/styles.css index 6a57d80..b2a7b88 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -10,55 +10,3 @@ @import './shared.css'; @import './scrollbars.css'; @import './titlebar.css'; - -:root { - --theme_light--main: rgb(5, 5, 5); - --theme_light--sidebar: rgb(1, 1, 1); - --theme_light--dragarea: #030303; - --theme_light--primary: rgb(177, 24, 24); - --theme_light--primary_hover: rgb(202, 26, 26); - --theme_light--primary_click: rgb(219, 41, 41); - --theme_light--primary_indicator: rgb(202, 26, 26); - - --theme_light--card: rgb(4, 4, 4); - --theme_light--card_border: rgba(10, 10, 10, 0.7); - --theme_light--button: rgb(15, 15, 15); - --theme_light--button_hover: rgb(32, 32, 32); - --theme_light--button_border: rgba(78, 78, 78, 0.7); - --theme_light--table_border: rgba(255, 255, 255, 0.1); - - --theme_light--scrollbar: #232425; - --theme_light--scrollbar-border: transparent; - --theme_light--scrollbar_hover: #373838; - - --theme_light--text: rgb(228, 228, 228); - --theme_light--text_ui: rgba(211, 211, 211, 0.637); - --theme_light--text_ui_info: rgba(211, 211, 211, 0.466); - --theme_light--text_gray: rgba(151, 154, 155, 0.95); - --theme_light--text_brown: rgb(147, 114, 100); - --theme_light--text_orange: rgb(255, 163, 68); - --theme_light--text_yellow: rgb(255, 220, 73); - --theme_light--text_green: rgb(50, 169, 104); - --theme_light--text_blue: rgb(82, 156, 202); - --theme_light--text_purple: rgb(154, 109, 215); - --theme_light--text_pink: rgb(226, 85, 161); - --theme_light--text_red: rgb(218, 47, 35); - --theme_light--bg_gray: rgba(126, 128, 129, 0.5); - --theme_light--bg_brown: #50331f; - --theme_light--bg_orange: rgba(255, 155, 0, 0.58); - --theme_light--bg_yellow: rgba(183, 155, 0, 1); - --theme_light--bg_green: rgb(50, 129, 47); - --theme_light--bg_blue: rgba(0, 90, 146, 0.71); - --theme_light--bg_purple: rgba(91, 49, 148, 0.74); - --theme_light--bg_pink: rgba(243, 61, 159, 0.5); - --theme_light--bg_red: rgb(122, 20, 20); - --theme_light--line_gray: rgba(126, 128, 129, 0.301); - --theme_light--line_brown: #50331fad; - --theme_light--line_orange: rgba(255, 153, 0, 0.315); - --theme_light--line_yellow: rgba(183, 156, 0, 0.445); - --theme_light--line_green: rgba(50, 129, 47, 0.39); - --theme_light--line_blue: rgba(0, 90, 146, 0.521); - --theme_light--line_purple: rgba(90, 49, 148, 0.349); - --theme_light--line_pink: rgba(243, 61, 158, 0.301); - --theme_light--line_red: rgba(122, 20, 20, 0.623); -} diff --git a/repo/core/tray.js b/repo/core/tray.js index 53525b3..c763ae3 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -89,6 +89,25 @@ module.exports = (defaults) => tray.on('click', () => { const windows = electron.BrowserWindow.getAllWindows(); + + for (let browser of windows) { + browser.webContents.sendInputEvent({ + type: 'keyDown', + modifiers: ['control', 'shift'], + key: 'L', + }); + browser.webContents.sendInputEvent({ + type: 'char', + modifiers: ['control', 'shift'], + key: 'L', + }); + browser.webContents.sendInputEvent({ + type: 'keyUp', + modifiers: ['control', 'shift'], + key: 'L', + }); + } + if (windows.some((win) => win.isVisible())) hideWindows(); else showWindows(); }); diff --git a/repo/core/variables.css b/repo/core/variables.css index d13f66a..6415a09 100644 --- a/repo/core/variables.css +++ b/repo/core/variables.css @@ -12,6 +12,7 @@ --theme_dark--main: rgb(47, 52, 55); --theme_dark--sidebar: rgb(55, 60, 63); + --theme_dark--overlay: rgba(15, 15, 15, 0.6); --theme_dark--dragarea: #272d2f; --theme_dark--preview-width: 977px; --theme_dark--preview_banner-height: 20vh; @@ -47,6 +48,7 @@ --theme_dark--todo_empty-border: currentColor; --theme_dark--todo_ticked: currentColor; + --theme_dark--todo_ticked-fill: white; --theme_dark--todo_ticked-background: var(--theme_dark--primary); --theme_dark--todo_hover-background: rgb(71, 76, 80); @@ -107,6 +109,7 @@ --theme_light--main: white; --theme_light--sidebar: rgb(247, 246, 243); + --theme_light--overlay: rgba(15, 15, 15, 0.6); --theme_light--dragarea: rgba(55, 53, 47, 0.04); --theme_light--preview-width: 977px; --theme_light--preview_banner-height: 20vh; @@ -142,6 +145,7 @@ --theme_light--todo_empty-border: currentColor; --theme_light--todo_ticked: currentColor; + --theme_light--todo_ticked-fill: white; --theme_light--todo_ticked-background: var(--theme_light--primary); --theme_light--todo_hover-background: rgba(55, 53, 47, 0.08); From 8dd7d0649cf4af3ff40697b15bf05ec9c5723073 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 28 Jul 2020 19:03:35 +1000 Subject: [PATCH 019/371] menu window creation --- repo/core/{ => css}/dark.css | 0 repo/core/{ => css}/light.css | 0 repo/core/{ => css}/scrollbars.css | 0 repo/core/{ => css}/shared.css | 0 repo/core/{ => css}/titlebar.css | 0 repo/core/{ => css}/variables.css | 0 repo/core/menu.html | 16 ++++++ repo/core/render.js | 2 + repo/core/styles.css | 12 ++-- repo/core/tray.js | 89 ++++++++++++++++++++++-------- 10 files changed, 91 insertions(+), 28 deletions(-) rename repo/core/{ => css}/dark.css (100%) rename repo/core/{ => css}/light.css (100%) rename repo/core/{ => css}/scrollbars.css (100%) rename repo/core/{ => css}/shared.css (100%) rename repo/core/{ => css}/titlebar.css (100%) rename repo/core/{ => css}/variables.css (100%) create mode 100644 repo/core/menu.html diff --git a/repo/core/dark.css b/repo/core/css/dark.css similarity index 100% rename from repo/core/dark.css rename to repo/core/css/dark.css diff --git a/repo/core/light.css b/repo/core/css/light.css similarity index 100% rename from repo/core/light.css rename to repo/core/css/light.css diff --git a/repo/core/scrollbars.css b/repo/core/css/scrollbars.css similarity index 100% rename from repo/core/scrollbars.css rename to repo/core/css/scrollbars.css diff --git a/repo/core/shared.css b/repo/core/css/shared.css similarity index 100% rename from repo/core/shared.css rename to repo/core/css/shared.css diff --git a/repo/core/titlebar.css b/repo/core/css/titlebar.css similarity index 100% rename from repo/core/titlebar.css rename to repo/core/css/titlebar.css diff --git a/repo/core/variables.css b/repo/core/css/variables.css similarity index 100% rename from repo/core/variables.css rename to repo/core/css/variables.css diff --git a/repo/core/menu.html b/repo/core/menu.html new file mode 100644 index 0000000..fcdd055 --- /dev/null +++ b/repo/core/menu.html @@ -0,0 +1,16 @@ + + + + + + Notion Enhancements Menu + + + + yayayay it works! + + diff --git a/repo/core/render.js b/repo/core/render.js index 13656c1..0add42f 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -16,6 +16,8 @@ module.exports = (defaults) => ), default_styles = dragarea.getAttribute('style'); + // document.body.innerText = document.body.innerHTML; + document .getElementById('notion') .addEventListener('ipc-message', (event) => { diff --git a/repo/core/styles.css b/repo/core/styles.css index b2a7b88..e4419e7 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -4,9 +4,9 @@ * (https://dragonwocky.me/) under the MIT license */ -@import './variables.css'; -@import './dark.css'; -@import './light.css'; -@import './shared.css'; -@import './scrollbars.css'; -@import './titlebar.css'; +@import './css/variables.css'; +@import './css/dark.css'; +@import './css/light.css'; +@import './css/shared.css'; +@import './css/scrollbars.css'; +@import './css/titlebar.css'; diff --git a/repo/core/tray.js b/repo/core/tray.js index c763ae3..b3d36a0 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -5,7 +5,7 @@ * (https://dragonwocky.me/) under the MIT license */ -let tray; +let tray, enhancer_menu; module.exports = (defaults) => function (store, __exports) { @@ -13,7 +13,9 @@ module.exports = (defaults) => path = require('path'), is_mac = process.platform === 'darwin', is_win = process.platform === 'win32', - settings = store(defaults); + settings = store(defaults), + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(); electron.app.on('ready', () => { tray = new electron.Tray( @@ -27,6 +29,41 @@ module.exports = (defaults) => }) ); + function calculateWindowPos(width, height) { + const screen = electron.screen.getDisplayNearestPoint({ + x: tray.getBounds().x, + y: tray.getBounds().y, + }); + // left + if (screen.workArea.x > 0) + // The workspace starts more on the right + return { + x: screen.workArea.x, + y: screen.workArea.height - height, + }; + // top + if (screen.workArea.y > 0) + return { + x: Math.round( + tray.getBounds().x + tray.getBounds().width / 2 - width / 2 + ), + y: screen.workArea.y, + }; + // right + if (screen.workArea.width < screen.bounds.width) + return { + x: screen.workArea.width - width, + y: screen.bounds.height - height, + }; + // bottom + return { + x: Math.round( + tray.getBounds().x + tray.getBounds().width / 2 - width / 2 + ), + y: screen.workArea.height - height, + }; + } + const contextMenu = electron.Menu.buildFromTemplate([ { type: 'normal', @@ -61,7 +98,34 @@ module.exports = (defaults) => { type: 'normal', label: 'Enhancements', - // will open menu + click: () => { + const window_state = require(`${__notion.replace( + /\\/g, + '/' + )}/app/node_modules/electron-window-state/index.js`)({ + file: 'menu-windowstate.json', + defaultWidth: 275, + defaultHeight: 600, + }); + electron.shell.openExternal(JSON.stringify(window_state)); + enhancer_menu = new electron.BrowserWindow({ + show: true, + frame: false, + x: + window_state.x || + calculateWindowPos(window_state.width, window_state.height).x, + y: + window_state.y || + calculateWindowPos(window_state.width, window_state.height).y, + width: window_state.width, + height: window_state.height, + webPreferences: { + nodeIntegration: true, + session: electron.session.fromPartition('persist:notion'), + }, + }); + enhancer_menu.loadURL('enhancement://core/menu.html'); + }, }, { type: 'separator', @@ -89,25 +153,6 @@ module.exports = (defaults) => tray.on('click', () => { const windows = electron.BrowserWindow.getAllWindows(); - - for (let browser of windows) { - browser.webContents.sendInputEvent({ - type: 'keyDown', - modifiers: ['control', 'shift'], - key: 'L', - }); - browser.webContents.sendInputEvent({ - type: 'char', - modifiers: ['control', 'shift'], - key: 'L', - }); - browser.webContents.sendInputEvent({ - type: 'keyUp', - modifiers: ['control', 'shift'], - key: 'L', - }); - } - if (windows.some((win) => win.isVisible())) hideWindows(); else showWindows(); }); From f6b52e5c024697372e2b4bb6a4c62bace4bc05b2 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 1 Aug 2020 23:46:43 +1000 Subject: [PATCH 020/371] theme menu window + bunch of other tweaks --- repo/core/buttons.js | 98 +++++++++++++++ repo/core/client.js | 183 +++++++++------------------- repo/core/create.js | 7 +- repo/core/css/buttons.css | 56 +++++++++ repo/core/css/menu.css | 69 +++++++++++ repo/core/css/shared.css | 8 ++ repo/core/css/titlebar.css | 52 +------- repo/core/css/variables.json | 162 ++++++++++++++++++++++++ repo/core/icons/alwaysontop_off.svg | 2 +- repo/core/icons/alwaysontop_on.svg | 2 +- repo/core/icons/close.svg | 2 +- repo/core/icons/maximize_off.svg | 2 +- repo/core/icons/maximize_on.svg | 2 +- repo/core/icons/minimize.svg | 2 +- repo/core/menu.html | 20 +-- repo/core/menu.js | 23 ++++ repo/core/mod.js | 3 + repo/core/render.js | 16 ++- repo/core/tray.js | 17 ++- 19 files changed, 524 insertions(+), 202 deletions(-) create mode 100644 repo/core/buttons.js create mode 100644 repo/core/css/buttons.css create mode 100644 repo/core/css/menu.css create mode 100644 repo/core/css/variables.json create mode 100644 repo/core/menu.js diff --git a/repo/core/buttons.js b/repo/core/buttons.js new file mode 100644 index 0000000..c1c57d2 --- /dev/null +++ b/repo/core/buttons.js @@ -0,0 +1,98 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +'use strict'; + +const __mod = require('./mod.js'), + store = require('../../pkg/store.js'), + settings = store(__mod.id, __mod.defaults), + path = require('path'), + fs = require('fs-extra'), + browser = require('electron').remote.getCurrentWindow(), + is_mac = process.platform === 'darwin', + buttons = { + element: document.createElement('div'), + insert: [ + 'alwaysontop', + ...(settings.frameless && !is_mac + ? ['minimize', 'maximize', 'close'] + : []), + ], + icons: { + raw: { + alwaysontop: { + on: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) + ), + off: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) + ), + }, + minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)), + maximize: { + on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)), + off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)), + }, + close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), + }, + alwaysontop() { + return browser.isAlwaysOnTop() + ? buttons.icons.raw.alwaysontop.on + : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' + }, + minimize() { + return buttons.icons.raw.minimize; // '⚊' + }, + maximize() { + return browser.isMaximized() + ? buttons.icons.raw.maximize.on + : buttons.icons.raw.maximize.off; // '🗗' : '🗖' + }, + close() { + return buttons.icons.raw.close; // '⨉' + }, + }, + actions: { + async alwaysontop() { + browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); + this.innerHTML = await buttons.icons.alwaysontop(); + }, + minimize() { + browser.minimize(); + }, + async maximize() { + browser.isMaximized() ? browser.unmaximize() : browser.maximize(); + this.innerHTML = await buttons.icons.maximize(); + }, + close() { + browser.close(); + }, + }, + }; + +(async () => { + buttons.element.className = 'window-buttons-area'; + for (let btn of buttons.insert) { + buttons.element.innerHTML += ``; + setTimeout( + () => + (document.querySelector(`.window-button#btn-${btn}`).onclick = + buttons.actions[btn]), + 10 + ); + } + if (settings.frameless && !is_mac) { + setInterval(async () => { + const icon = (await buttons.icons.maximize()).toString(), + el = buttons.element.querySelector('#btn-maximize'); + if (el.innerHTML != icon) el.innerHTML = icon; + }, 100); + } +})(); + +module.exports = buttons; diff --git a/repo/core/client.js b/repo/core/client.js index c0b7d21..d0c802b 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -5,13 +5,11 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + module.exports = (defaults) => function (store, __exports) { const electron = require('electron'), - browser = electron.remote.getCurrentWindow(), - path = require('path'), - fs = require('fs-extra'), - is_mac = process.platform === 'darwin', settings = store(defaults), helpers = require('../../pkg/helpers.js'), __notion = helpers.getNotion(), @@ -49,39 +47,9 @@ module.exports = (defaults) => } } - // ctrl+f theming - function setTheme() { - const mode = JSON.parse(localStorage.theme).mode, - style = (prop) => - getComputedStyle(document.body).getPropertyValue(prop); - notionIpc.sendNotionToIndex('search:set-theme', { - 'mode': mode, - 'colors': { - 'white': style(`--theme_${mode}--todo_ticked-fill`), - 'blue': style(`--theme_${mode}--primary`), - }, - 'borderRadius': 3, - 'textColor': style(`--theme_${mode}--text`), - 'popoverBackgroundColor': style(`--theme_${mode}--card`), - 'popoverBoxShadow': `0 0 0 1px ${style( - `--theme_${mode}--overlay` - )}, 0 3px 6px ${style(`--theme_${mode}--overlay`)}`, - 'inputBoxShadow': `box-shadow: ${style( - `--theme_${mode}--primary` - )} 0px 0px 0px 1px inset, ${style( - `--theme_${mode}--primary_hover` - )} 0px 0px 0px 2px !important`, - 'inputBackgroundColor': style(`--theme_${mode}--main`), - 'dividerColor': style(`--theme_${mode}--table-border`), - 'shadowOpacity': 0.2, - }); - } - setInterval(setTheme, 100); - // frameless if (settings.frameless) { document.body.classList.add('frameless'); - // draggable area const dragarea = document.createElement('div'); dragarea.className = 'window-dragarea'; @@ -90,100 +58,10 @@ module.exports = (defaults) => '--configured-dragarea_height', `${settings.dragarea_height + 2}px` ); - let sidebar_width; - interval_attempts.patchDragarea = setInterval(patchDragarea, 50); - function patchDragarea() { - const sidebar = document.querySelector('.notion-sidebar'); - if (!sidebar) return; - clearInterval(interval_attempts.patchDragarea); - let new_width = - sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; - if (sidebar_width !== new_width) { - sidebar_width = new_width; - electron.ipcRenderer.sendToHost( - `enhancer:sidebar-width-${sidebar_width}` - ); - } - } } // window buttons - const buttons = { - element: document.createElement('span'), - insert: ['alwaysontop'], - icons: { - raw: { - alwaysontop: { - on: fs.readFile( - path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) - ), - off: fs.readFile( - path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) - ), - }, - minimize: fs.readFile( - path.resolve(`${__dirname}/icons/minimize.svg`) - ), - maximize: { - on: fs.readFile( - path.resolve(`${__dirname}/icons/maximize_on.svg`) - ), - off: fs.readFile( - path.resolve(`${__dirname}/icons/maximize_off.svg`) - ), - }, - close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), - }, - alwaysontop() { - return browser.isAlwaysOnTop() - ? buttons.icons.raw.alwaysontop.on - : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' - }, - minimize() { - return buttons.icons.raw.minimize; // '⚊' - }, - maximize() { - return browser.isMaximized() - ? buttons.icons.raw.maximize.on - : buttons.icons.raw.maximize.off; // '🗗' : '🗖' - }, - close() { - return buttons.icons.raw.close; // '⨉' - }, - }, - actions: { - async alwaysontop() { - browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); - this.innerHTML = await buttons.icons.alwaysontop(); - }, - minimize() { - browser.minimize(); - }, - async maximize() { - browser.isMaximized() ? browser.unmaximize() : browser.maximize(); - this.innerHTML = await buttons.icons.maximize(); - }, - close() { - browser.close(); - }, - }, - }; - - if (settings.frameless && !is_mac) - buttons.insert.push('minimize', 'maximize', 'close'); - buttons.element.className = 'window-buttons-area'; - for (let btn of buttons.insert) { - buttons.element.innerHTML += ``; - } - if (settings.frameless && !is_mac) - setInterval(async () => { - const icon = await buttons.icons.maximize(), - el = buttons.element.querySelector('.btn-maximize'); - if (el.innerHTML != icon) el.innerHTML = icon; - }, 100); - + const buttons = require('./buttons.js'); document .querySelector('.notion-topbar > div[style*="display: flex"]') .appendChild(buttons.element); @@ -196,9 +74,58 @@ module.exports = (defaults) => .querySelector('.notion-topbar-share-menu') .parentElement.classList.add('notion-topbar-actions'); - for (let btn of buttons.insert) { - document.querySelector(`.window-button.btn-${btn}`).onclick = - buttons.actions[btn]; + let sidebar_width; + function communicationLoop() { + const getStyle = (prop) => + getComputedStyle(document.body).getPropertyValue(prop), + mode = JSON.parse(localStorage.theme).mode; + + // ctrl+f theming + notionIpc.sendNotionToIndex('search:set-theme', { + 'mode': mode, + 'colors': { + 'white': getStyle(`--theme_${mode}--todo_ticked-fill`), + 'blue': getStyle(`--theme_${mode}--primary`), + }, + 'borderRadius': 3, + 'textColor': getStyle(`--theme_${mode}--text`), + 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), + 'popoverBoxShadow': `0 0 0 1px ${getStyle( + `--theme_${mode}--overlay` + )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, + 'inputBoxShadow': `box-shadow: ${getStyle( + `--theme_${mode}--primary` + )} 0px 0px 0px 1px inset, ${getStyle( + `--theme_${mode}--primary_hover` + )} 0px 0px 0px 2px !important`, + 'inputBackgroundColor': getStyle(`--theme_${mode}--main`), + 'dividerColor': getStyle(`--theme_${mode}--table-border`), + 'shadowOpacity': 0.2, + }); + + // enhancer menu + electron.ipcRenderer.send('enhancer:set-theme', { + mode, + rules: require('./css/variables.json').map((rule) => [ + rule, + getStyle(rule), + ]), + }); + + // draggable area resizing + const sidebar = document.querySelector('.notion-sidebar'); + if (settings.frameless && sidebar) { + let new_sidebar_width = + sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; + if (sidebar_width !== new_sidebar_width) { + sidebar_width = new_sidebar_width; + electron.ipcRenderer.sendToHost( + 'enhancer:sidebar-width', + sidebar_width + ); + } + } } + setInterval(communicationLoop, 500); } }; diff --git a/repo/core/create.js b/repo/core/create.js index 73c7b4a..87709cb 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -5,10 +5,15 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + module.exports = (defaults) => function (store, __exports) { const electron = require('electron'), - allWindows = electron.BrowserWindow.getAllWindows, + allWindows = () => + electron.BrowserWindow.getAllWindows().filter( + (win) => win.getTitle() !== 'notion-enhancer menu' + ), // createWindow = __exports.createWindow, path = require('path'), settings = store(defaults), diff --git a/repo/core/css/buttons.css b/repo/core/css/buttons.css new file mode 100644 index 0000000..6e94223 --- /dev/null +++ b/repo/core/css/buttons.css @@ -0,0 +1,56 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (c) 2020 TarasokUA + * (https://dragonwocky.me/) under the MIT license + */ + +.window-buttons-area { + display: flex; + align-items: center; + font-size: 14px; +} +.window-button { + background: transparent; + border: 0; + margin: 0px 0px 0px 9px; + width: 32px; + line-height: 26px; + border-radius: 4px; + font-size: 16px; + transition: background 0.2s; + cursor: default; +} +.window-button svg { + margin-top: 8px; + width: 14px; + height: 14px; +} +.window-button svg path { + fill: currentColor; +} +.window-button svg line { + stroke: currentColor; +} + +.notion-dark-theme .window-button:hover { + background: var(--theme_dark--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); +} +.notion-dark-theme .window-button#btn-close:hover { + background: var(--theme_dark--button_close); +} +.notion-dark-theme .window-button#btn-close:hover svg line { + stroke: var(--theme_dark--button_close-fill); +} + +.notion-light-theme .window-button#btn-close:hover { + background: var(--theme_light--button_close); +} +.notion-light-theme .window-button#btn-close:hover svg line { + stroke: var(--theme_light--button_close-fill); +} +.notion-light-theme .window-button:hover { + background: var(--theme_light--button_hover); + box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); +} diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css new file mode 100644 index 0000000..ee75464 --- /dev/null +++ b/repo/core/css/menu.css @@ -0,0 +1,69 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +@import './buttons.css'; +@import './scrollbars.css'; + +* { + box-sizing: border-box; + word-break: break-word; + text-decoration: none; + text-size-adjust: 100%; +} +html, +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +.notion-dark-theme * { + outline-color: var(--theme_dark--card-border); +} +.notion-light-theme * { + outline-color: var(--theme_light--card-border); +} + +.notion-dark-theme { + background: var(--theme_dark--main); +} +.notion-light-theme { + background: var(--theme_light--main); +} + +.notion-dark-theme, +.notion-dark-theme button { + color: var(--theme_dark--text); + font-family: var(--theme_dark--font_sans); +} +.notion-light-theme, +.notion-light-theme button { + color: var(--theme_light--text); + font-family: var(--theme_light--font_sans); +} + +#menu-titlebar { + display: flex; + padding: 0.4em; + -webkit-app-region: drag; +} +#menu-titlebar button { + -webkit-app-region: no-drag; +} +#menu-titlebar :first-child { + margin-left: auto; +} +.notion-dark-theme #menu-titlebar { + background: var(--theme_dark--dragarea); +} +.notion-light-theme #menu-titlebar { + background: var(--theme_light--dragarea); +} + +main { + padding: 1em; +} diff --git a/repo/core/css/shared.css b/repo/core/css/shared.css index c36f5ce..dffbafe 100644 --- a/repo/core/css/shared.css +++ b/repo/core/css/shared.css @@ -37,6 +37,14 @@ .notion-page-content .notion-collection_view-block { width: 100% !important; } +.notion-page-content + .notion-collection_view-block + [style*='padding-left: 96px'], +.notion-page-content + .notion-collection_view-block + [style*='padding-left: 126px'] { + padding-left: 0 !important; +} .notion-page-content .notion-collection_view-block [style*='min-width: calc(100% - 192px);'], diff --git a/repo/core/css/titlebar.css b/repo/core/css/titlebar.css index c4d3335..2916a7b 100644 --- a/repo/core/css/titlebar.css +++ b/repo/core/css/titlebar.css @@ -6,6 +6,8 @@ * (https://dragonwocky.me/) under the MIT license */ +@import 'buttons.css'; + .frameless .notion-topbar { height: calc(var(--configured-dragarea_height, 10px) + 45px) !important; } @@ -45,56 +47,6 @@ } } -.window-buttons-area { - display: flex; - align-items: center; - font-size: 14px; -} -.window-button { - background: transparent; - border: 0; - margin: 0px 0px 0px 9px; - width: 32px; - line-height: 26px; - border-radius: 4px; - font-size: 16px; - transition: background 0.2s; - cursor: default; -} -.window-button svg { - margin-top: 8px; - width: 14px; - height: 14px; -} -.window-button svg path { - fill: currentColor; -} -.window-button svg line { - stroke: currentColor; -} - -.notion-dark-theme .window-button:hover { - background: var(--theme_dark--button_hover); - box-shadow: 0 0 0 0.5px var(--theme_dark--button_hover-border); -} -.notion-dark-theme .window-button.btn-close:hover { - background: var(--theme_dark--button_close); -} -.notion-dark-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_dark--button_close-fill); -} - -.notion-light-theme .window-button.btn-close:hover { - background: var(--theme_light--button_close); -} -.notion-light-theme .window-button.btn-close:hover svg line { - stroke: var(--theme_light--button_close-fill); -} -.notion-light-theme .window-button:hover { - background: var(--theme_light--button_hover); - box-shadow: 0 0 0 0.5px var(--theme_light--button_hover-border); -} - /* hide topbar when sidebar is hidden */ .notion-sidebar-container[style*='width: 0px;'] + .notion-frame { height: calc( diff --git a/repo/core/css/variables.json b/repo/core/css/variables.json new file mode 100644 index 0000000..491b9f3 --- /dev/null +++ b/repo/core/css/variables.json @@ -0,0 +1,162 @@ +[ + "--theme_dark--main", + "--theme_dark--sidebar", + "--theme_dark--overlay", + "--theme_dark--dragarea", + "--theme_dark--preview-width", + "--theme_dark--preview_banner-height", + "--theme_dark--page_banner-height", + "--theme_dark--font_sans", + "--theme_dark--font_serif", + "--theme_dark--font_mono", + "--theme_dark--font_code", + "--theme_dark--scrollbar", + "--theme_dark--scrollbar-border", + "--theme_dark--scrollbar_hover", + "--theme_dark--card", + "--theme_dark--card-border", + "--theme_dark--table-border", + "--theme_dark--button_hover", + "--theme_dark--button_hover-border", + "--theme_dark--button_close", + "--theme_dark--button_close-fill", + "--theme_dark--selected", + "--theme_dark--primary", + "--theme_dark--primary_hover", + "--theme_dark--primary_click", + "--theme_dark--primary_indicator", + "--theme_dark--todo_empty-border", + "--theme_dark--todo_ticked", + "--theme_dark--todo_ticked-fill", + "--theme_dark--todo_ticked-background", + "--theme_dark--todo_hover-background", + "--theme_dark--danger_text", + "--theme_dark--danger_border", + "--theme_dark--text", + "--theme_dark--text_ui", + "--theme_dark--text_ui_info", + "--theme_dark--text_gray", + "--theme_dark--text_brown", + "--theme_dark--text_orange", + "--theme_dark--text_yellow", + "--theme_dark--text_green", + "--theme_dark--text_blue", + "--theme_dark--text_purple", + "--theme_dark--text_pink", + "--theme_dark--text_red", + "--theme_dark--bg_gray", + "--theme_dark--bg_brown", + "--theme_dark--bg_orange", + "--theme_dark--bg_yellow", + "--theme_dark--bg_green", + "--theme_dark--bg_blue", + "--theme_dark--bg_purple", + "--theme_dark--bg_pink", + "--theme_dark--bg_red", + "--theme_dark--line_gray", + "--theme_dark--line_brown", + "--theme_dark--line_orange", + "--theme_dark--line_yellow", + "--theme_dark--line_green", + "--theme_dark--line_blue", + "--theme_dark--line_purple", + "--theme_dark--line_pink", + "--theme_dark--line_red", + "--theme_dark--code_inline-text", + "--theme_dark--code_inline-background", + "--theme_dark--code_text", + "--theme_dark--code-background", + "--theme_dark--code_function", + "--theme_dark--code_keyword", + "--theme_dark--code_tag", + "--theme_dark--code_operator", + "--theme_dark--code_property", + "--theme_dark--code_builtin", + "--theme_dark--code_attr-name", + "--theme_dark--code_comment", + "--theme_dark--code_punctuation", + "--theme_dark--code_doctype", + "--theme_dark--code_number", + "--theme_dark--code_string", + "--theme_dark--code_attr-value", + "--theme_light--main", + "--theme_light--sidebar", + "--theme_light--overlay", + "--theme_light--dragarea", + "--theme_light--preview-width", + "--theme_light--preview_banner-height", + "--theme_light--page_banner-height", + "--theme_light--font_sans", + "--theme_light--font_serif", + "--theme_light--font_mono", + "--theme_light--font_code", + "--theme_light--scrollbar", + "--theme_light--scrollbar-border", + "--theme_light--scrollbar_hover", + "--theme_light--card", + "--theme_light--card-border", + "--theme_light--table-border", + "--theme_light--button_hover", + "--theme_light--button_hover-border", + "--theme_light--button_close", + "--theme_light--button_close-fill", + "--theme_light--selected", + "--theme_light--primary", + "--theme_light--primary_hover", + "--theme_light--primary_click", + "--theme_light--primary_indicator", + "--theme_light--todo_empty-border", + "--theme_light--todo_ticked", + "--theme_light--todo_ticked-fill", + "--theme_light--todo_ticked-background", + "--theme_light--todo_hover-background", + "--theme_light--danger_text", + "--theme_light--danger_border", + "--theme_light--text", + "--theme_light--text_ui", + "--theme_light--text_ui_info", + "--theme_light--text_gray", + "--theme_light--text_brown", + "--theme_light--text_orange", + "--theme_light--text_yellow", + "--theme_light--text_green", + "--theme_light--text_blue", + "--theme_light--text_purple", + "--theme_light--text_pink", + "--theme_light--text_red", + "--theme_light--bg_gray", + "--theme_light--bg_brown", + "--theme_light--bg_orange", + "--theme_light--bg_yellow", + "--theme_light--bg_green", + "--theme_light--bg_blue", + "--theme_light--bg_purple", + "--theme_light--bg_pink", + "--theme_light--bg_red", + "--theme_light--line_gray", + "--theme_light--line_brown", + "--theme_light--line_orange", + "--theme_light--line_yellow", + "--theme_light--line_green", + "--theme_light--line_blue", + "--theme_light--line_purple", + "--theme_light--line_pink", + "--theme_light--line_red", + "--theme_light--code_inline-text", + "--theme_light--code_inline-background", + "--theme_light--code_text", + "--theme_light--code-background", + "--theme_light--code_function", + "--theme_light--code_keyword", + "--theme_light--code_tag", + "--theme_light--code_operator", + "--theme_light--code_property", + "--theme_light--code_builtin", + "--theme_light--code_attr-name", + "--theme_light--code_comment", + "--theme_light--code_punctuation", + "--theme_light--code_doctype", + "--theme_light--code_number", + "--theme_light--code_string", + "--theme_light--code_attr-value" +] diff --git a/repo/core/icons/alwaysontop_off.svg b/repo/core/icons/alwaysontop_off.svg index e731f9b..648339d 100644 --- a/repo/core/icons/alwaysontop_off.svg +++ b/repo/core/icons/alwaysontop_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/alwaysontop_on.svg b/repo/core/icons/alwaysontop_on.svg index b9befcd..0c2abaf 100644 --- a/repo/core/icons/alwaysontop_on.svg +++ b/repo/core/icons/alwaysontop_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/close.svg b/repo/core/icons/close.svg index 7268fb0..ea9caad 100644 --- a/repo/core/icons/close.svg +++ b/repo/core/icons/close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/maximize_off.svg b/repo/core/icons/maximize_off.svg index e79979f..ebd1c92 100644 --- a/repo/core/icons/maximize_off.svg +++ b/repo/core/icons/maximize_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/maximize_on.svg b/repo/core/icons/maximize_on.svg index 038b21e..c7fdcbd 100644 --- a/repo/core/icons/maximize_on.svg +++ b/repo/core/icons/maximize_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/minimize.svg b/repo/core/icons/minimize.svg index e40cd84..ec85d9d 100644 --- a/repo/core/icons/minimize.svg +++ b/repo/core/icons/minimize.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/menu.html b/repo/core/menu.html index fcdd055..09a0eae 100644 --- a/repo/core/menu.html +++ b/repo/core/menu.html @@ -3,14 +3,20 @@ - Notion Enhancements Menu + notion-enhancer menu + + - - yayayay it works! + +
+ hi +
+ diff --git a/repo/core/menu.js b/repo/core/menu.js new file mode 100644 index 0000000..51a8e06 --- /dev/null +++ b/repo/core/menu.js @@ -0,0 +1,23 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +'use strict'; + +const __mod = require('./mod.js'), + store = require('../../pkg/store.js'), + settings = store(__mod.id, __mod.defaults), + electron = require('electron'); + +window['__start'] = async () => { + const buttons = require('./buttons.js'); + document.querySelector('#menu-titlebar').appendChild(buttons.element); + + electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => { + document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`; + for (const style of theme.rules) + document.body.style.setProperty(style[0], style[1]); + }); +}; diff --git a/repo/core/mod.js b/repo/core/mod.js index 0539538..294000b 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -4,6 +4,8 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + const defaults = { openhidden: false, maximized: false, @@ -31,4 +33,5 @@ module.exports = { 'renderer/index.js': require('./render.js')(defaults), 'renderer/preload.js': require('./client.js')(defaults), }, + defaults, }; diff --git a/repo/core/render.js b/repo/core/render.js index 0add42f..d77e17a 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -4,6 +4,8 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + module.exports = (defaults) => function (store, __exports) { const __start = window['__start'], @@ -21,15 +23,11 @@ module.exports = (defaults) => document .getElementById('notion') .addEventListener('ipc-message', (event) => { - if (event.channel.startsWith('enhancer:sidebar-width-')) - dragarea.setAttribute( - 'style', - `${default_styles} top: 2px; height: ${ - settings.dragarea_height - }px; left: ${event.channel.slice( - 'enhancer:sidebar-width-'.length - )};` - ); + if (event.channel !== 'enhancer:sidebar-width') return; + dragarea.setAttribute( + 'style', + `${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};` + ); }); }; }; diff --git a/repo/core/tray.js b/repo/core/tray.js index b3d36a0..f22eb74 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -5,6 +5,8 @@ * (https://dragonwocky.me/) under the MIT license */ +'use strict'; + let tray, enhancer_menu; module.exports = (defaults) => @@ -29,6 +31,11 @@ module.exports = (defaults) => }) ); + electron.ipcMain.on('enhancer:set-theme', (event, arg) => { + if (!enhancer_menu) return; + enhancer_menu.webContents.send('enhancer:set-theme', arg); + }); + function calculateWindowPos(width, height) { const screen = electron.screen.getDisplayNearestPoint({ x: tray.getBounds().x, @@ -36,7 +43,6 @@ module.exports = (defaults) => }); // left if (screen.workArea.x > 0) - // The workspace starts more on the right return { x: screen.workArea.x, y: screen.workArea.height - height, @@ -99,11 +105,13 @@ module.exports = (defaults) => type: 'normal', label: 'Enhancements', click: () => { + if (enhancer_menu) return enhancer_menu.show(); const window_state = require(`${__notion.replace( /\\/g, '/' )}/app/node_modules/electron-window-state/index.js`)({ file: 'menu-windowstate.json', + path: helpers.data_folder, defaultWidth: 275, defaultHeight: 600, }); @@ -111,6 +119,8 @@ module.exports = (defaults) => enhancer_menu = new electron.BrowserWindow({ show: true, frame: false, + backgroundColor: '#ffffff', + titleBarStyle: 'hiddenInset', x: window_state.x || calculateWindowPos(window_state.width, window_state.height).x, @@ -120,11 +130,16 @@ module.exports = (defaults) => width: window_state.width, height: window_state.height, webPreferences: { + preload: path.resolve(`${__dirname}/menu.js`), nodeIntegration: true, session: electron.session.fromPartition('persist:notion'), }, }); enhancer_menu.loadURL('enhancement://core/menu.html'); + enhancer_menu.on('close', (e) => { + window_state.saveState(enhancer_menu); + enhancer_menu = null; + }); }, }, { From 7d0560228b604ef398e44dd453774d95d2dd497d Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 2 Aug 2020 09:01:12 +1000 Subject: [PATCH 021/371] button spacing bugfix --- repo/core/css/shared.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/repo/core/css/shared.css b/repo/core/css/shared.css index dffbafe..6a15788 100644 --- a/repo/core/css/shared.css +++ b/repo/core/css/shared.css @@ -56,3 +56,9 @@ .notion-page-content .notion-collection_view-block > div { padding: 0 1px; } + +/* fix button resizing */ +.notion-collection_view-block [role='button'], +.notion-collection_view_page-block [role='button'] { + border-width: 0 !important; +} From 19593e1d01871de7cb25d4499f404b34d562fe34 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 2 Aug 2020 16:26:28 +1000 Subject: [PATCH 022/371] add alerts (inc. update checker) to menu --- repo/core/create.js | 1 + repo/core/css/menu.css | 127 +++++++++++++++++++++++++++++++++++++++++ repo/core/menu.html | 9 +-- repo/core/menu.js | 82 +++++++++++++++++++++++++- repo/core/tray.js | 1 - 5 files changed, 212 insertions(+), 8 deletions(-) diff --git a/repo/core/create.js b/repo/core/create.js index 87709cb..4a2a1e9 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -60,6 +60,7 @@ module.exports = (defaults) => allWindows().some((win) => win.isVisible() && win.id != window.id) ) { window.show(); + window.focus(); if (settings.maximized) window.maximize(); if ( (focused_window && focused_window.isFullScreen()) || diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index ee75464..f73b2de 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -7,6 +7,15 @@ @import './buttons.css'; @import './scrollbars.css'; +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + * { box-sizing: border-box; word-break: break-word; @@ -21,12 +30,31 @@ body { padding: 0; } +body:not([style]) > * { + display: none !important; +} +body:not([style])::after { + content: ''; + position: absolute; + left: 44vw; + top: calc(50% - 7.5vw); + width: 10vw; + height: 10vw; + border: 4px solid rgb(34, 34, 34); + border-top-color: transparent; + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + .notion-dark-theme * { outline-color: var(--theme_dark--card-border); } .notion-light-theme * { outline-color: var(--theme_light--card-border); } +*:active { + outline: none; +} .notion-dark-theme { background: var(--theme_dark--main); @@ -67,3 +95,102 @@ body { main { padding: 1em; } + +#alerts [role='alert'] { + padding: 0.25em; + display: flex; + margin-bottom: 0.75em; +} +#alerts [role='alert']::before { + content: '!'; + display: block; + /* margin: auto 0; */ + font-weight: bold; + font-size: 1.2em; + padding: 0.5rem; +} +#alerts [role='alert'] p { + font-size: 1rem; + margin: auto 0; + padding: 0.5em; +} + +.notion-dark-theme #alerts [role='alert'] p { + color: var(--theme_dark--text_ui); +} +.notion-light-theme #alerts [role='alert'] p { + color: var(--theme_light--text_ui); +} + +.notion-light-theme #alerts [role='alert']::before { + color: rgba(0, 0, 0, 0.2); +} +.notion-light-theme #alerts [role='alert'] { + border: 1px solid rgba(0, 0, 0, 0.1); +} + +.notion-dark-theme #alerts .error { + border: 1px solid var(--theme_dark--bg_red); + background: var(--theme_dark--line_red); +} +.notion-dark-theme #alerts .error::before { + color: var(--theme_dark--bg_red); +} +.notion-light-theme #alerts .error { + background: var(--theme_light--line_red); +} + +.notion-dark-theme #alerts .warning { + border: 1px solid var(--theme_dark--bg_yellow); + background: var(--theme_dark--line_yellow); +} +.notion-dark-theme #alerts .warning::before { + color: var(--theme_dark--bg_yellow); +} +.notion-light-theme #alerts .warning { + background: var(--theme_light--line_yellow); +} + +.notion-dark-theme #alerts .info { + border: 1px solid var(--theme_dark--bg_blue); + background: var(--theme_dark--line_blue); +} +.notion-dark-theme #alerts .info::before { + color: var(--theme_dark--bg_blue); +} +.notion-light-theme #alerts .info { + background: var(--theme_light--line_blue); +} + +#alerts .success::before { + content: '✓'; +} +.notion-dark-theme #alerts .success { + border: 1px solid var(--theme_dark--bg_green); + background: var(--theme_dark--line_green); +} +.notion-dark-theme #alerts .success::before { + color: var(--theme_dark--bg_green); +} +.notion-light-theme #alerts .success { + background: var(--theme_light--line_green); +} + +code { + border-radius: 0.1em; + padding: 0.2em 0.4em; +} +.notion-dark-theme code { + font: 0.85em var(--theme_dark--font_code); + /* color: var(--theme_dark--code_inline-text); */ + background: var(--theme_dark--code_inline-background); +} +.notion-light-theme code { + font: 0.85em var(--theme_light--font_code); + /* color: var(--theme_light--code_inline-text); */ + background: var(--theme_light--code_inline-background); +} + +u { + text-decoration: underline; +} diff --git a/repo/core/menu.html b/repo/core/menu.html index 09a0eae..1d1d336 100644 --- a/repo/core/menu.html +++ b/repo/core/menu.html @@ -4,16 +4,13 @@ notion-enhancer menu - - +
- hi +
+
diff --git a/repo/core/menu.js b/repo/core/menu.js index 0f7438b..37ccf5e 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -9,14 +9,23 @@ const __mod = require('./mod.js'), store = require('../../pkg/store.js'), helpers = require('../../pkg/helpers.js'), - electron = require('electron'); + electron = require('electron'), + browser = electron.remote.getCurrentWindow(); window['__start'] = async () => { const buttons = require('./buttons.js'); document.querySelector('#menu-titlebar').appendChild(buttons.element); + document.defaultView.addEventListener('keyup', (event) => { + if (event.code === 'F5') window.reload(); + if (event.key === 'e' && (event.ctrlKey || event.metaKey)) { + electron.remote.BrowserWindow.getAllWindows()[0].show(); + browser.close(); + } + }); + electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => { - document.body.className = `notion-${theme.mode}-theme smooth-scrollbars`; + document.body.className = `notion-${theme.mode}-theme`; for (const style of theme.rules) document.body.style.setProperty(style[0], style[1]); }); @@ -85,6 +94,7 @@ window['__start'] = async () => { ).prepend(); }); + // mod loader const modules = helpers.getEnhancements(); if (modules.loaded.length) console.info( @@ -100,4 +110,44 @@ window['__start'] = async () => { .join(', ')}.` ).append(); } + + // mod options + function markdown(string) { + return snarkdown( + string + .split('\n') + .map((line) => line.trim()) + .join('
') + ).replace(/([^\\])?~~([^\n]*[^\\])~~/g, '$1$2'); + } + const $modules = document.querySelector('#modules'); + for (let mod of modules.loaded.sort((a, b) => + store('mods', { [mod.id]: { pinned: false } }).pinned + ? 1 + : a.name.localeCompare(b.name) + )) { + $modules.append( + createElement(` +
+

${mod.name}

+

${mod.tags + .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) + .join(' ')}

+

${markdown(mod.desc)}

+

+ + + ${mod.author} + + v${mod.version} +

+
+ `) + ); + } }; diff --git a/repo/core/mod.js b/repo/core/mod.js index 294000b..894d854 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -18,10 +18,10 @@ const defaults = { module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', - type: 'core', + tags: ['core', 'extension'], name: 'notion-enhancer core', - desc: - 'the modloader itself, including: the CLI, the menu, and enabling/disabling/insertion/updating of mods.', + desc: `the **modloader** itself, _including_: the [CLI](https://github.com), the menu, and ~~enabling/disabling/insertion/updating of~~ mods. + ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, version: require('../../package.json').version, author: 'dragonwocky', thumb: diff --git a/repo/core/tray.js b/repo/core/tray.js index 6a2acee..91c8a48 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -35,6 +35,7 @@ module.exports = (defaults) => if (!enhancer_menu) return; enhancer_menu.webContents.send('enhancer:set-theme', arg); }); + electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); function calculateWindowPos(width, height) { const screen = electron.screen.getDisplayNearestPoint({ @@ -70,6 +71,43 @@ module.exports = (defaults) => }; } + function openExtensionMenu() { + if (enhancer_menu) return enhancer_menu.show(); + const window_state = require(`${__notion.replace( + /\\/g, + '/' + )}/app/node_modules/electron-window-state/index.js`)({ + file: 'menu-windowstate.json', + path: helpers.data_folder, + defaultWidth: 275, + defaultHeight: 600, + }); + electron.shell.openExternal(JSON.stringify(window_state)); + enhancer_menu = new electron.BrowserWindow({ + show: true, + frame: false, + titleBarStyle: 'hiddenInset', + x: + window_state.x || + calculateWindowPos(window_state.width, window_state.height).x, + y: + window_state.y || + calculateWindowPos(window_state.width, window_state.height).y, + width: window_state.width, + height: window_state.height, + webPreferences: { + preload: path.resolve(`${__dirname}/menu.js`), + nodeIntegration: true, + session: electron.session.fromPartition('persist:notion'), + }, + }); + enhancer_menu.loadURL('enhancement://core/menu.html'); + enhancer_menu.on('close', (e) => { + window_state.saveState(enhancer_menu); + enhancer_menu = null; + }); + } + const contextMenu = electron.Menu.buildFromTemplate([ { type: 'normal', @@ -104,42 +142,8 @@ module.exports = (defaults) => { type: 'normal', label: 'Enhancements', - click: () => { - if (enhancer_menu) return enhancer_menu.show(); - const window_state = require(`${__notion.replace( - /\\/g, - '/' - )}/app/node_modules/electron-window-state/index.js`)({ - file: 'menu-windowstate.json', - path: helpers.data_folder, - defaultWidth: 275, - defaultHeight: 600, - }); - electron.shell.openExternal(JSON.stringify(window_state)); - enhancer_menu = new electron.BrowserWindow({ - show: true, - frame: false, - titleBarStyle: 'hiddenInset', - x: - window_state.x || - calculateWindowPos(window_state.width, window_state.height).x, - y: - window_state.y || - calculateWindowPos(window_state.width, window_state.height).y, - width: window_state.width, - height: window_state.height, - webPreferences: { - preload: path.resolve(`${__dirname}/menu.js`), - nodeIntegration: true, - session: electron.session.fromPartition('persist:notion'), - }, - }); - enhancer_menu.loadURL('enhancement://core/menu.html'); - enhancer_menu.on('close', (e) => { - window_state.saveState(enhancer_menu); - enhancer_menu = null; - }); - }, + accelerator: 'CommandOrControl+E', + click: openExtensionMenu, }, { type: 'separator', From 158ce182df1cd97e09c62d50a1b99dc664417426 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 4 Aug 2020 00:31:27 +1000 Subject: [PATCH 024/371] mod toggling, first extension: bracketed links --- repo/bracketed-links/mod.js | 16 +++ repo/core/css/localised.css | 206 +++++++++++++++++++++++++++++++++++ repo/core/css/menu.css | 211 +++++++++++++++++------------------- repo/core/menu.js | 85 +++++++++++---- repo/core/mod.js | 4 +- 5 files changed, 388 insertions(+), 134 deletions(-) create mode 100644 repo/bracketed-links/mod.js create mode 100644 repo/core/css/localised.css diff --git a/repo/bracketed-links/mod.js b/repo/bracketed-links/mod.js new file mode 100644 index 0000000..c2ad673 --- /dev/null +++ b/repo/bracketed-links/mod.js @@ -0,0 +1,16 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +'use strict'; + +module.exports = { + id: '60e14feb-a81d-4ffb-9b12-7585d346bad8', + tags: ['extension'], + name: 'bracketed links', + desc: 'render links surrounded with [brackets] instead of __underlined__.', + version: '0.0.1', + author: 'arecsu', +}; diff --git a/repo/core/css/localised.css b/repo/core/css/localised.css new file mode 100644 index 0000000..a7e3585 --- /dev/null +++ b/repo/core/css/localised.css @@ -0,0 +1,206 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +@import './variables.css'; + +.notion-dark-theme { + --theme_local--main: var(--theme_dark--main); + --theme_local--sidebar: var(--theme_dark--sidebar); + --theme_local--overlay: var(--theme_dark--overlay); + --theme_local--dragarea: var(--theme_dark--dragarea); + --theme_local--preview-width: var(--theme_dark--preview-width); + --theme_local--preview_banner-height: var( + --theme_dark--preview_banner-height + ); + --theme_local--page_banner-height: var(--theme_dark--page_banner-height); + + --theme_local--font_sans: var(--theme_dark--font_sans); + --theme_local--font_serif: var(--theme_dark--font_serif); + --theme_local--font_mono: var(--theme_dark--font_mono); + --theme_local--font_code: var(--theme_dark--font_code); + + --theme_local--scrollbar: var(--theme_dark--scrollbar); + --theme_local--scrollbar-border: var(--theme_dark--scrollbar-border); + --theme_local--scrollbar_hover: var(--theme_dark--scrollbar_hover); + + --theme_local--card: var(--theme_dark--card); + --theme_local--card-border: var(--theme_dark--card-border); + --theme_local--table-border: var(--theme_dark--table-border); + --theme_local--button_hover: var(--theme_dark--button_hover); + --theme_local--button_hover-border: var(--theme_dark--button_hover-border); + --theme_local--button_close: var(--theme_dark--button_close); + --theme_local--button_close-fill: var(--theme_dark--button_close-fill); + + --theme_local--selected: var(--theme_dark--selected); + --theme_local--primary: var(--theme_dark--primary); + --theme_local--primary_hover: var(--theme_dark--primary_hover); + --theme_local--primary_click: var(--theme_dark--primary_click); + --theme_local--primary_indicator: var(--theme_dark--primary_indicator); + + --theme_local--todo_empty-border: var(--theme_dark--todo_empty-border); + --theme_local--todo_ticked: var(--theme_dark--todo_ticked); + --theme_local--todo_ticked-fill: var(--theme_dark--todo_ticked-fill); + --theme_local--todo_ticked-background: var( + --theme_dark--todo_ticked-background + ); + --theme_local--todo_hover-background: var( + --theme_dark--todo_hover-background + ); + + --theme_local--danger_text: var(--theme_dark--danger_text); + --theme_local--danger_border: var(--theme_dark--danger_border); + + --theme_local--text: var(--theme_dark--text); + --theme_local--text_ui: var(--theme_dark--text_ui); + --theme_local--text_ui_info: var(--theme_dark--text_ui_info); + + --theme_local--text_gray: var(--theme_dark--text_gray); + --theme_local--text_brown: var(--theme_dark--text_brown); + --theme_local--text_orange: var(--theme_dark--text_orange); + --theme_local--text_yellow: var(--theme_dark--text_yellow); + --theme_local--text_green: var(--theme_dark--text_green); + --theme_local--text_blue: var(--theme_dark--text_blue); + --theme_local--text_purple: var(--theme_dark--text_purple); + --theme_local--text_pink: var(--theme_dark--text_pink); + --theme_local--text_red: var(--theme_dark--text_red); + --theme_local--bg_gray: var(--theme_dark--bg_gray); + --theme_local--bg_brown: var(--theme_dark--bg_brown); + --theme_local--bg_orange: var(--theme_dark--bg_orange); + --theme_local--bg_yellow: var(--theme_dark--bg_yellow); + --theme_local--bg_green: var(--theme_dark--bg_green); + --theme_local--bg_blue: var(--theme_dark--bg_blue); + --theme_local--bg_purple: var(--theme_dark--bg_purple); + --theme_local--bg_pink: var(--theme_dark--bg_pink); + --theme_local--bg_red: var(--theme_dark--bg_red); + --theme_local--line_gray: var(--theme_dark--line_gray); + --theme_local--line_brown: var(--theme_dark--line_brown); + --theme_local--line_orange: var(--theme_dark--line_orange); + --theme_local--line_yellow: var(--theme_dark--line_yellow); + --theme_local--line_green: var(--theme_dark--line_green); + --theme_local--line_blue: var(--theme_dark--line_blue); + --theme_local--line_purple: var(--theme_dark--line_purple); + --theme_local--line_pink: var(--theme_dark--line_pink); + --theme_local--line_red: var(--theme_dark--line_red); + + --theme_local--code_inline-text: var(--theme_dark--code_inline-text); + --theme_local--code_inline-background: var( + --theme_dark--code_inline-background + ); + --theme_local--code_text: var(--theme_dark--code_text); + --theme_local--code-background: var(--theme_dark--code-background); + --theme_local--code_function: var(--theme_dark--code_function); + --theme_local--code_keyword: var(--theme_dark--code_keyword); + --theme_local--code_tag: var(--theme_dark--code_tag); + --theme_local--code_operator: var(--theme_dark--code_operator); + --theme_local--code_property: var(--theme_dark--code_property); + --theme_local--code_builtin: var(--theme_dark--code_builtin); + --theme_local--code_attr-name: var(--theme_dark--code_attr-name); + --theme_local--code_comment: var(--theme_dark--code_comment); + --theme_local--code_punctuation: var(--theme_dark--code_punctuation); + --theme_local--code_doctype: var(--theme_dark--code_doctype); + --theme_local--code_number: var(--theme_dark--code_number); + --theme_local--code_string: var(--theme_dark--code_string); + --theme_local--code_attr-value: var(--theme_dark--code_attr-value); +} +.notion-light-theme { + --theme_local--main: var(--theme_light--main); + --theme_local--sidebar: var(--theme_light--sidebar); + --theme_local--overlay: var(--theme_light--overlay); + --theme_local--dragarea: var(--theme_light--dragarea); + --theme_local--preview-width: var(--theme_light--preview-width); + --theme_local--preview_banner-height: var( + --theme_light--preview_banner-height + ); + --theme_local--page_banner-height: var(--theme_light--page_banner-height); + + --theme_local--font_sans: var(--theme_light--font_sans); + --theme_local--font_serif: var(--theme_light--font_serif); + --theme_local--font_mono: var(--theme_light--font_mono); + --theme_local--font_code: var(--theme_light--font_code); + + --theme_local--scrollbar: var(--theme_light--scrollbar); + --theme_local--scrollbar-border: var(--theme_light--scrollbar-border); + --theme_local--scrollbar_hover: var(--theme_light--scrollbar_hover); + + --theme_local--card: var(--theme_light--card); + --theme_local--card-border: var(--theme_light--card-border); + --theme_local--table-border: var(--theme_light--table-border); + --theme_local--button_hover: var(--theme_light--button_hover); + --theme_local--button_hover-border: var(--theme_light--button_hover-border); + --theme_local--button_close: var(--theme_light--button_close); + --theme_local--button_close-fill: var(--theme_light--button_close-fill); + + --theme_local--selected: var(--theme_light--selected); + --theme_local--primary: var(--theme_light--primary); + --theme_local--primary_hover: var(--theme_light--primary_hover); + --theme_local--primary_click: var(--theme_light--primary_click); + --theme_local--primary_indicator: var(--theme_light--primary_indicator); + + --theme_local--todo_empty-border: var(--theme_light--todo_empty-border); + --theme_local--todo_ticked: var(--theme_light--todo_ticked); + --theme_local--todo_ticked-fill: var(--theme_light--todo_ticked-fill); + --theme_local--todo_ticked-background: var( + --theme_light--todo_ticked-background + ); + --theme_local--todo_hover-background: var( + --theme_light--todo_hover-background + ); + + --theme_local--danger_text: var(--theme_light--danger_text); + --theme_local--danger_border: var(--theme_light--danger_border); + + --theme_local--text: var(--theme_light--text); + --theme_local--text_ui: var(--theme_light--text_ui); + --theme_local--text_ui_info: var(--theme_light--text_ui_info); + + --theme_local--text_gray: var(--theme_light--text_gray); + --theme_local--text_brown: var(--theme_light--text_brown); + --theme_local--text_orange: var(--theme_light--text_orange); + --theme_local--text_yellow: var(--theme_light--text_yellow); + --theme_local--text_green: var(--theme_light--text_green); + --theme_local--text_blue: var(--theme_light--text_blue); + --theme_local--text_purple: var(--theme_light--text_purple); + --theme_local--text_pink: var(--theme_light--text_pink); + --theme_local--text_red: var(--theme_light--text_red); + --theme_local--bg_gray: var(--theme_light--bg_gray); + --theme_local--bg_brown: var(--theme_light--bg_brown); + --theme_local--bg_orange: var(--theme_light--bg_orange); + --theme_local--bg_yellow: var(--theme_light--bg_yellow); + --theme_local--bg_green: var(--theme_light--bg_green); + --theme_local--bg_blue: var(--theme_light--bg_blue); + --theme_local--bg_purple: var(--theme_light--bg_purple); + --theme_local--bg_pink: var(--theme_light--bg_pink); + --theme_local--bg_red: var(--theme_light--bg_red); + --theme_local--line_gray: var(--theme_light--line_gray); + --theme_local--line_brown: var(--theme_light--line_brown); + --theme_local--line_orange: var(--theme_light--line_orange); + --theme_local--line_yellow: var(--theme_light--line_yellow); + --theme_local--line_green: var(--theme_light--line_green); + --theme_local--line_blue: var(--theme_light--line_blue); + --theme_local--line_purple: var(--theme_light--line_purple); + --theme_local--line_pink: var(--theme_light--line_pink); + --theme_local--line_red: var(--theme_light--line_red); + + --theme_local--code_inline-text: var(--theme_light--code_inline-text); + --theme_local--code_inline-background: var( + --theme_light--code_inline-background + ); + --theme_local--code_text: var(--theme_light--code_text); + --theme_local--code-background: var(--theme_light--code-background); + --theme_local--code_function: var(--theme_light--code_function); + --theme_local--code_keyword: var(--theme_light--code_keyword); + --theme_local--code_tag: var(--theme_light--code_tag); + --theme_local--code_operator: var(--theme_light--code_operator); + --theme_local--code_property: var(--theme_light--code_property); + --theme_local--code_builtin: var(--theme_light--code_builtin); + --theme_local--code_attr-name: var(--theme_light--code_attr-name); + --theme_local--code_comment: var(--theme_light--code_comment); + --theme_local--code_punctuation: var(--theme_light--code_punctuation); + --theme_local--code_doctype: var(--theme_light--code_doctype); + --theme_local--code_number: var(--theme_light--code_number); + --theme_local--code_string: var(--theme_light--code_string); + --theme_local--code_attr-value: var(--theme_light--code_attr-value); +} diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 65b8afd..8eea81a 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -6,6 +6,7 @@ @import './buttons.css'; @import './scrollbars.css'; +@import './localised.css'; @keyframes spin { from { @@ -21,6 +22,10 @@ word-break: break-word; text-decoration: none; text-size-adjust: 100%; + outline-color: var(--theme_local--card-border); +} +*:active { + outline: none; } html, body { @@ -29,6 +34,7 @@ body { margin: 0; padding: 0; overflow: hidden; + background: var(--theme_local--main); } body:not([style]) > * { @@ -47,29 +53,11 @@ body:not([style])::after { animation: spin 0.8s linear infinite; } -.notion-dark-theme * { - outline-color: var(--theme_dark--card-border); -} -.notion-light-theme * { - outline-color: var(--theme_light--card-border); -} -*:active { - outline: none; -} - -.notion-dark-theme { - background: var(--theme_dark--main); -} -.notion-light-theme { - background: var(--theme_light--main); -} - main { - padding: 1em; + padding: 1em 1em 2.9em 1em; height: 100%; overflow: auto; } - main section { border-radius: 2px; padding: 0.75em; @@ -78,36 +66,24 @@ main section { /* inline formatting */ +body, +button { + color: var(--theme_local--text); + font-family: var(--theme_local--font_sans); +} + code { border-radius: 0.1em; padding: 0.2em 0.4em; -} -.notion-dark-theme code { - font: 0.85em var(--theme_dark--font_code); - /* color: var(--theme_dark--code_inline-text); */ - background: var(--theme_dark--code_inline-background); -} -.notion-light-theme code { - font: 0.85em var(--theme_light--font_code); - /* color: var(--theme_light--code_inline-text); */ - background: var(--theme_light--code_inline-background); + font: 0.85em var(--theme_local--font_code); + /* color: var(--theme_local--code_inline-text); */ + background: var(--theme_local--code_inline-background); } u { text-decoration: underline; } -.notion-dark-theme, -.notion-dark-theme button { - color: var(--theme_dark--text); - font-family: var(--theme_dark--font_sans); -} -.notion-light-theme, -.notion-light-theme button { - color: var(--theme_light--text); - font-family: var(--theme_light--font_sans); -} - /* titlebar */ #menu-titlebar::before { @@ -131,11 +107,8 @@ u { #menu-titlebar :first-child { margin-left: auto; } -.notion-dark-theme #menu-titlebar { - background: var(--theme_dark--dragarea); -} -.notion-light-theme #menu-titlebar { - background: var(--theme_light--dragarea); +#menu-titlebar { + background: var(--theme_local--dragarea); } /* alerts */ @@ -155,13 +128,40 @@ u { font-size: 1rem; margin: auto 0; padding-left: 0.5em; + color: var(--theme_local--text_ui); } -.notion-dark-theme #alerts [role='alert'] p { - color: var(--theme_dark--text_ui); +#alerts .error::before { + color: var(--theme_local--bg_red); } -.notion-light-theme #alerts [role='alert'] p { - color: var(--theme_light--text_ui); +#alerts .error { + border: 1px solid var(--theme_local--bg_red); + background: var(--theme_local--line_red); +} + +#alerts .warning::before { + color: var(--theme_local--bg_yellow); +} +#alerts .warning { + border: 1px solid var(--theme_local--bg_yellow); + background: var(--theme_local--line_yellow); +} + +#alerts .info::before { + color: var(--theme_local--bg_blue); +} +#alerts .info { + border: 1px solid var(--theme_local--bg_blue); + background: var(--theme_local--line_blue); +} + +#alerts .success::before { + content: '✓'; + color: var(--theme_local--bg_green); +} +#alerts .success { + border: 1px solid var(--theme_local--bg_green); + background: var(--theme_local--line_green); } .notion-light-theme #alerts [role='alert']::before { @@ -171,62 +171,11 @@ u { border: 1px solid rgba(0, 0, 0, 0.1); } -.notion-dark-theme #alerts .error { - border: 1px solid var(--theme_dark--bg_red); - background: var(--theme_dark--line_red); -} -.notion-dark-theme #alerts .error::before { - color: var(--theme_dark--bg_red); -} -.notion-light-theme #alerts .error { - background: var(--theme_light--line_red); -} +/* module meta */ -.notion-dark-theme #alerts .warning { - border: 1px solid var(--theme_dark--bg_yellow); - background: var(--theme_dark--line_yellow); -} -.notion-dark-theme #alerts .warning::before { - color: var(--theme_dark--bg_yellow); -} -.notion-light-theme #alerts .warning { - background: var(--theme_light--line_yellow); -} - -.notion-dark-theme #alerts .info { - border: 1px solid var(--theme_dark--bg_blue); - background: var(--theme_dark--line_blue); -} -.notion-dark-theme #alerts .info::before { - color: var(--theme_dark--bg_blue); -} -.notion-light-theme #alerts .info { - background: var(--theme_light--line_blue); -} - -#alerts .success::before { - content: '✓'; -} -.notion-dark-theme #alerts .success { - border: 1px solid var(--theme_dark--bg_green); - background: var(--theme_dark--line_green); -} -.notion-dark-theme #alerts .success::before { - color: var(--theme_dark--bg_green); -} -.notion-light-theme #alerts .success { - background: var(--theme_light--line_green); -} - -/* modules */ - -.notion-dark-theme #modules section { - background: var(--theme_dark--sidebar); - border: 1px solid var(--theme_dark--table-border); -} -.notion-light-theme #modules section { - background: var(--theme_light--sidebar); - border: 1px solid var(--theme_light--card-border); +#modules section { + background: var(--theme_local--sidebar); + border: 1px solid var(--theme_local--table-border); } #modules section h3, @@ -272,12 +221,54 @@ u { #modules section .tags, #modules section .version { font-size: 0.85em; + color: var(--theme_local--text_ui); } -.notion-dark-theme #modules section .tags, -.notion-dark-theme #modules section .version { - color: var(--theme_dark--text_ui); + +/* module options */ + +.toggle * { + cursor: pointer; } -.notion-light-theme #modules section .tags, -.notion-light-theme #modules section .version { - color: var(--theme_light--text_ui); +.toggle input { + display: none; +} +.toggle input + label .switch { + position: relative; + margin-top: 0.5em; + float: right; + height: 0.65em; + width: 2em; + background: var(--theme_local--card); + border-radius: 5px; +} +.toggle input + label .switch:before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + border-radius: inherit; + background: linear-gradient( + 90deg, + var(--theme_local--primary), + var(--theme_local--primary_click) + ); + opacity: var(--menu--toggle_opacity, 0); + transition: opacity 300ms; +} +.toggle input + label .switch .dot { + position: absolute; + width: 1em; + height: 1em; + top: -0.15em; + border-radius: 50%; + transform: translateX(var(--menu--toggle_offset, 0)); + transition: transform 350ms, box-shadow 350ms; + background: var(--theme_local--todo_ticked-fill); + box-shadow: 2px 1px 4px var(--theme_local--table-border); +} +.toggle input:checked + label { + --menu--toggle_offset: 1em; + --menu--toggle_opacity: 1; } diff --git a/repo/core/menu.js b/repo/core/menu.js index 37ccf5e..739f2dc 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -18,10 +18,7 @@ window['__start'] = async () => { document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') window.reload(); - if (event.key === 'e' && (event.ctrlKey || event.metaKey)) { - electron.remote.BrowserWindow.getAllWindows()[0].show(); - browser.close(); - } + if (event.key === 'e' && (event.ctrlKey || event.metaKey)) browser.close(); }); electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => { @@ -113,28 +110,69 @@ window['__start'] = async () => { // mod options function markdown(string) { - return snarkdown( - string - .split('\n') - .map((line) => line.trim()) - .join('
') - ).replace(/([^\\])?~~([^\n]*[^\\])~~/g, '$1$2'); + return string + .split('\n') + .map((line) => + line + // todo: stop e.g. whole chunk of ~~thin~~g~~ being selected + .trim() + // ~~strikethrough~~ + .replace(/([^\\])?~~([^\n]*[^\\])~~/g, '$1$2') + // __underline__ + .replace(/([^\\])?__([^\n]*[^\\])__/g, '$1$2') + // **bold** + .replace(/([^\\])?\*\*([^\n]*[^\\])\*\*/g, '$1$2') + // *italic* + .replace(/([^\\])?\*([^\n]*[^\\])\*/g, '$1$2') + // _italic_ + .replace(/([^\\])?_([^\n]*[^\\])_/g, '$1$2') + // `code` + .replace(/([^\\])?`([^\n]*[^\\])`/g, '$1$2') + // ![image_title](source) + .replace( + /([^\\])?\!\[([^\n]*[^\\]?)\]\(([^\n]*[^\\])\)/g, + '$1$2' + ) + // [link](destination) + .replace( + /([^\\])?\[([^\n]*[^\\])\]\(([^\n]*[^\\])\)/g, + '$1$2' + ) + ) + .join('
'); } const $modules = document.querySelector('#modules'); - for (let mod of modules.loaded.sort((a, b) => - store('mods', { [mod.id]: { pinned: false } }).pinned + for (let mod of modules.loaded.sort((a, b) => { + return a.tags.includes('core') || + store('mods', { [a.id]: { pinned: false } }).pinned + ? -1 + : b.tags.includes('core') || + store('mods', { [b.id]: { pinned: false } }).pinned ? 1 - : a.name.localeCompare(b.name) - )) { - $modules.append( - createElement(` + : a.name.localeCompare(b.name); + })) { + const menuStore = store('mods', { [mod.id]: { enabled: false } }); + mod.store = store(mod.id); + mod.elem = createElement(`
-

${mod.name}

+

${mod.name}` + : `class="toggle"> + + ` + }

${mod.tags .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) .join(' ')}

@@ -147,7 +185,12 @@ window['__start'] = async () => { v${mod.version}

- `) - ); + `); + const $enable = mod.elem.querySelector(`#enable_${mod.id}`); + if ($enable) + $enable.addEventListener('click', (event) => { + menuStore[mod.id].enabled = $enable.checked; + }); + $modules.append(mod.elem); } }; diff --git a/repo/core/mod.js b/repo/core/mod.js index 894d854..66a3c58 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -20,12 +20,10 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', tags: ['core', 'extension'], name: 'notion-enhancer core', - desc: `the **modloader** itself, _including_: the [CLI](https://github.com), the menu, and ~~enabling/disabling/insertion/updating of~~ mods. + desc: `the **modloader** itself, _including_: the [CLI](https://github.com), the \`menu\`, and ~~enabling/disabling/insertion/updating of~~ mods. ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, version: require('../../package.json').version, author: 'dragonwocky', - thumb: - 'https://camo.githubusercontent.com/5c5bca9e987d986b8cc7e51066f90c6f8a84af08/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f3733313634373938343332333931393933332f3733313732373235393239353032333132342f494d475f323137302e6a7067', options: [], hacks: { 'main/main.js': require('./tray.js')(defaults), From 6dacae46b5b5c6c0f147cf10eff4289a8d14f0b4 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 4 Aug 2020 13:13:01 +1000 Subject: [PATCH 025/371] improve markdown regexes --- repo/core/css/menu.css | 20 +++++++++++++++----- repo/core/menu.js | 31 +++++++++++++++++++------------ repo/core/mod.js | 2 +- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 8eea81a..019b43d 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -83,6 +83,9 @@ code { u { text-decoration: underline; } +s { + text-decoration: line-through; +} /* titlebar */ @@ -188,22 +191,29 @@ u { margin: 0.3em 0 0.4em 0; font-size: 0.9em; } +#modules section .desc p { + margin: 0; +} +#modules section .desc blockquote { + margin: 0.3em 0; + border-left: 0.3em solid var(--theme_local--table-border); + padding-left: 0.7em; +} + #modules section .desc a { color: currentColor; text-decoration: underline dotted; } -#modules section .desc s { - text-decoration: line-through; -} + #modules section .desc img { width: 100%; max-width: 20em; margin: 0.5em 0; } -#modules section .desc img:first-child { +#modules section .desc :first-child img:first-child { margin-top: 0; } -#modules section .desc img:last-child { +#modules section .desc :last-child img:last-child { margin-bottom: 0; } diff --git a/repo/core/menu.js b/repo/core/menu.js index 739f2dc..4ad2b65 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -110,36 +110,43 @@ window['__start'] = async () => { // mod options function markdown(string) { - return string + const parsed = string .split('\n') .map((line) => line // todo: stop e.g. whole chunk of ~~thin~~g~~ being selected .trim() + .replace(/\s+/g, ' ') + // > quote + .replace(/^>\s+(.+)$/g, '
$1
') // ~~strikethrough~~ - .replace(/([^\\])?~~([^\n]*[^\\])~~/g, '$1$2') + .replace(/([^\\])?~~((?:(?!~~).)*[^\\])~~/g, '$1$2') // __underline__ - .replace(/([^\\])?__([^\n]*[^\\])__/g, '$1$2') + .replace(/([^\\])?__((?:(?!__).)*[^\\])__/g, '$1$2') // **bold** - .replace(/([^\\])?\*\*([^\n]*[^\\])\*\*/g, '$1$2') + .replace(/([^\\])?\*\*((?:(?!\*\*).)*[^\\])\*\*/g, '$1$2') // *italic* - .replace(/([^\\])?\*([^\n]*[^\\])\*/g, '$1$2') + .replace(/([^\\])?\*([^*]*[^\\*])\*/g, '$1$2') // _italic_ - .replace(/([^\\])?_([^\n]*[^\\])_/g, '$1$2') + .replace(/([^\\])?_([^_]*[^\\_])_/g, '$1$2') // `code` - .replace(/([^\\])?`([^\n]*[^\\])`/g, '$1$2') + .replace(/([^\\])?`([^`]*[^\\`])`/g, '$1$2') // ![image_title](source) .replace( - /([^\\])?\!\[([^\n]*[^\\]?)\]\(([^\n]*[^\\])\)/g, - '$1$2' + /([^\\])?\!\[([^\]]*[^\\\]]?)\]\(([^)]*[^\\)])\)/g, + '$1$2' ) // [link](destination) .replace( - /([^\\])?\[([^\n]*[^\\])\]\(([^\n]*[^\\])\)/g, + /([^\\])?\[([^\]]*[^\\\]]?)\]\(([^)]*[^\\)])\)/g, '$1$2' ) ) - .join('
'); + .map((line) => + line.startsWith('
') ? line : `

${line}

` + ) + .join(''); + return parsed; } const $modules = document.querySelector('#modules'); for (let mod of modules.loaded.sort((a, b) => { @@ -176,7 +183,7 @@ window['__start'] = async () => {

${mod.tags .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) .join(' ')}

-

${markdown(mod.desc)}

+
${markdown(mod.desc)}

diff --git a/repo/core/mod.js b/repo/core/mod.js index 66a3c58..574d4d4 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -20,7 +20,7 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', tags: ['core', 'extension'], name: 'notion-enhancer core', - desc: `the **modloader** itself, _including_: the [CLI](https://github.com), the \`menu\`, and ~~enabling/disabling/insertion/updating of~~ mods. + desc: `> the **modloader** itself, _including_: the [CLI](https://github.com), the \`menu\`, and ~~enabling/disabling/insertion/updating of~~ mods. ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, version: require('../../package.json').version, author: 'dragonwocky', From 92501bd7e1f2c20b5a27ca8f5a8b9bce5e039849 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 4 Aug 2020 15:32:04 +1000 Subject: [PATCH 026/371] menu options: toggles + selects --- repo/core/buttons.js | 169 +++++++++++----------- repo/core/client.js | 218 ++++++++++++++-------------- repo/core/create.js | 150 ++++++++++--------- repo/core/css/menu.css | 49 ++++++- repo/core/menu.js | 146 +++++++++++++------ repo/core/mod.js | 64 ++++++--- repo/core/render.js | 42 +++--- repo/core/tray.js | 320 ++++++++++++++++++++--------------------- 8 files changed, 646 insertions(+), 512 deletions(-) diff --git a/repo/core/buttons.js b/repo/core/buttons.js index c1c57d2..1dcf728 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -6,93 +6,96 @@ 'use strict'; -const __mod = require('./mod.js'), - store = require('../../pkg/store.js'), - settings = store(__mod.id, __mod.defaults), - path = require('path'), - fs = require('fs-extra'), - browser = require('electron').remote.getCurrentWindow(), - is_mac = process.platform === 'darwin', - buttons = { - element: document.createElement('div'), - insert: [ - 'alwaysontop', - ...(settings.frameless && !is_mac - ? ['minimize', 'maximize', 'close'] - : []), - ], - icons: { - raw: { - alwaysontop: { - on: fs.readFile( - path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) - ), - off: fs.readFile( - path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) +module.exports = (store) => { + const path = require('path'), + fs = require('fs-extra'), + browser = require('electron').remote.getCurrentWindow(), + is_mac = process.platform === 'darwin', + buttons = { + element: document.createElement('div'), + insert: [ + 'alwaysontop', + ...(store().frameless && !is_mac + ? ['minimize', 'maximize', 'close'] + : []), + ], + icons: { + raw: { + alwaysontop: { + on: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) + ), + off: fs.readFile( + path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) + ), + }, + minimize: fs.readFile( + path.resolve(`${__dirname}/icons/minimize.svg`) ), + maximize: { + on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)), + off: fs.readFile( + path.resolve(`${__dirname}/icons/maximize_off.svg`) + ), + }, + close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), }, - minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)), - maximize: { - on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)), - off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)), + alwaysontop() { + return browser.isAlwaysOnTop() + ? buttons.icons.raw.alwaysontop.on + : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' + }, + minimize() { + return buttons.icons.raw.minimize; // '⚊' + }, + maximize() { + return browser.isMaximized() + ? buttons.icons.raw.maximize.on + : buttons.icons.raw.maximize.off; // '🗗' : '🗖' + }, + close() { + return buttons.icons.raw.close; // '⨉' }, - close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)), }, - alwaysontop() { - return browser.isAlwaysOnTop() - ? buttons.icons.raw.alwaysontop.on - : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' + actions: { + async alwaysontop() { + browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); + this.innerHTML = await buttons.icons.alwaysontop(); + }, + minimize() { + browser.minimize(); + }, + async maximize() { + browser.isMaximized() ? browser.unmaximize() : browser.maximize(); + this.innerHTML = await buttons.icons.maximize(); + }, + close() { + browser.close(); + }, }, - minimize() { - return buttons.icons.raw.minimize; // '⚊' - }, - maximize() { - return browser.isMaximized() - ? buttons.icons.raw.maximize.on - : buttons.icons.raw.maximize.off; // '🗗' : '🗖' - }, - close() { - return buttons.icons.raw.close; // '⨉' - }, - }, - actions: { - async alwaysontop() { - browser.setAlwaysOnTop(!browser.isAlwaysOnTop()); - this.innerHTML = await buttons.icons.alwaysontop(); - }, - minimize() { - browser.minimize(); - }, - async maximize() { - browser.isMaximized() ? browser.unmaximize() : browser.maximize(); - this.innerHTML = await buttons.icons.maximize(); - }, - close() { - browser.close(); - }, - }, - }; + }; -(async () => { - buttons.element.className = 'window-buttons-area'; - for (let btn of buttons.insert) { - buttons.element.innerHTML += ``; - setTimeout( - () => - (document.querySelector(`.window-button#btn-${btn}`).onclick = - buttons.actions[btn]), - 10 - ); - } - if (settings.frameless && !is_mac) { - setInterval(async () => { - const icon = (await buttons.icons.maximize()).toString(), - el = buttons.element.querySelector('#btn-maximize'); - if (el.innerHTML != icon) el.innerHTML = icon; - }, 100); - } -})(); + (async () => { + buttons.element.className = 'window-buttons-area'; + for (let btn of buttons.insert) { + buttons.element.innerHTML += ``; + setTimeout( + () => + (document.querySelector(`.window-button#btn-${btn}`).onclick = + buttons.actions[btn]), + 10 + ); + } + if (store().frameless && !is_mac) { + setInterval(async () => { + const icon = (await buttons.icons.maximize()).toString(), + el = buttons.element.querySelector('#btn-maximize'); + if (el.innerHTML != icon) el.innerHTML = icon; + }, 100); + } + })(); -module.exports = buttons; + return buttons; +}; diff --git a/repo/core/client.js b/repo/core/client.js index 1c535e9..85b3cfe 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -7,125 +7,123 @@ 'use strict'; -module.exports = (defaults) => - function (store, __exports) { - const electron = require('electron'), - settings = store(defaults), - helpers = require('../../pkg/helpers.js'), - __notion = helpers.getNotion(), - notionIpc = require(`${__notion.replace( - /\\/g, - '/' - )}/app/helpers/notionIpc.js`); +module.exports = (store, __exports) => { + const electron = require('electron'), + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(), + notionIpc = require(`${__notion.replace( + /\\/g, + '/' + )}/app/helpers/notionIpc.js`); - // additional hotkeys - document.defaultView.addEventListener('keyup', (event) => { - if (event.code === 'F5') window.reload(); - if (event.key === 'e' && (event.ctrlKey || event.metaKey)) - electron.ipcRenderer.send('enhancer:open-extension-menu'); - }); + // additional hotkeys + document.defaultView.addEventListener('keyup', (event) => { + if (event.code === 'F5') window.reload(); + if (event.key === 'e' && (event.ctrlKey || event.metaKey)) + electron.ipcRenderer.send('enhancer:open-extension-menu'); + }); - const attempt_interval = setInterval(enhance, 500); - async function enhance() { - if (!document.querySelector('.notion-frame')) return; - clearInterval(attempt_interval); + const attempt_interval = setInterval(enhance, 500); + async function enhance() { + if (!document.querySelector('.notion-frame')) return; + clearInterval(attempt_interval); - // scrollbars - if (settings.smooth_scrollbars) { - document.body.classList.add('smooth-scrollbars'); - // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100); - // function patchScrollbars() { - // const sidebar = document.querySelector( - // '.notion-scroller.vertical[style*="overflow: hidden auto;"]' - // ); - // if (!sidebar) return; - // clearInterval(interval_attempts.patchScrollbars); - // sidebar.style.overflow = ''; - // setTimeout(() => { - // sidebar.style.overflow = 'hidden auto'; - // }, 10); - // } - } + // scrollbars + if (store().smooth_scrollbars) { + document.body.classList.add('smooth-scrollbars'); + // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100); + // function patchScrollbars() { + // const sidebar = document.querySelector( + // '.notion-scroller.vertical[style*="overflow: hidden auto;"]' + // ); + // if (!sidebar) return; + // clearInterval(interval_attempts.patchScrollbars); + // sidebar.style.overflow = ''; + // setTimeout(() => { + // sidebar.style.overflow = 'hidden auto'; + // }, 10); + // } + } - // frameless - if (settings.frameless) { - document.body.classList.add('frameless'); - // draggable area - const dragarea = document.createElement('div'); - dragarea.className = 'window-dragarea'; - document.querySelector('.notion-topbar').prepend(dragarea); - document.documentElement.style.setProperty( - '--configured-dragarea_height', - `${settings.dragarea_height + 2}px` - ); - } + // frameless + if (store().frameless) { + document.body.classList.add('frameless'); + // draggable area + const dragarea = document.createElement('div'); + dragarea.className = 'window-dragarea'; + document.querySelector('.notion-topbar').prepend(dragarea); + document.documentElement.style.setProperty( + '--configured-dragarea_height', + `${store().dragarea_height + 2}px` + ); + } - // window buttons - const buttons = require('./buttons.js'); - document - .querySelector('.notion-topbar > div[style*="display: flex"]') - .appendChild(buttons.element); - document - .querySelector('.notion-history-back-button') - .parentElement.nextElementSibling.classList.add( - 'notion-topbar-breadcrumb' - ); - document - .querySelector('.notion-topbar-share-menu') - .parentElement.classList.add('notion-topbar-actions'); + // window buttons + const buttons = require('./buttons.js')(store); + document + .querySelector('.notion-topbar > div[style*="display: flex"]') + .appendChild(buttons.element); + document + .querySelector('.notion-history-back-button') + .parentElement.nextElementSibling.classList.add( + 'notion-topbar-breadcrumb' + ); + document + .querySelector('.notion-topbar-share-menu') + .parentElement.classList.add('notion-topbar-actions'); - let sidebar_width; - function communicationLoop() { - const getStyle = (prop) => - getComputedStyle(document.body).getPropertyValue(prop), - mode = JSON.parse(localStorage.theme).mode; + let sidebar_width; + function communicationLoop() { + const getStyle = (prop) => + getComputedStyle(document.body).getPropertyValue(prop), + mode = JSON.parse(localStorage.theme).mode; - // ctrl+f theming - notionIpc.sendNotionToIndex('search:set-theme', { - 'mode': mode, - 'colors': { - 'white': getStyle(`--theme_${mode}--todo_ticked-fill`), - 'blue': getStyle(`--theme_${mode}--primary`), - }, - 'borderRadius': 3, - 'textColor': getStyle(`--theme_${mode}--text`), - 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), - 'popoverBoxShadow': `0 0 0 1px ${getStyle( - `--theme_${mode}--overlay` - )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, - 'inputBoxShadow': `box-shadow: ${getStyle( - `--theme_${mode}--primary` - )} 0px 0px 0px 1px inset, ${getStyle( - `--theme_${mode}--primary_hover` - )} 0px 0px 0px 2px !important`, - 'inputBackgroundColor': getStyle(`--theme_${mode}--main`), - 'dividerColor': getStyle(`--theme_${mode}--table-border`), - 'shadowOpacity': 0.2, - }); + // ctrl+f theming + notionIpc.sendNotionToIndex('search:set-theme', { + 'mode': mode, + 'colors': { + 'white': getStyle(`--theme_${mode}--todo_ticked-fill`), + 'blue': getStyle(`--theme_${mode}--primary`), + }, + 'borderRadius': 3, + 'textColor': getStyle(`--theme_${mode}--text`), + 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), + 'popoverBoxShadow': `0 0 0 1px ${getStyle( + `--theme_${mode}--overlay` + )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, + 'inputBoxShadow': `box-shadow: ${getStyle( + `--theme_${mode}--primary` + )} 0px 0px 0px 1px inset, ${getStyle( + `--theme_${mode}--primary_hover` + )} 0px 0px 0px 2px !important`, + 'inputBackgroundColor': getStyle(`--theme_${mode}--main`), + 'dividerColor': getStyle(`--theme_${mode}--table-border`), + 'shadowOpacity': 0.2, + }); - // enhancer menu - electron.ipcRenderer.send('enhancer:set-theme', { - mode, - rules: require('./css/variables.json').map((rule) => [ - rule, - getStyle(rule), - ]), - }); + // enhancer menu + electron.ipcRenderer.send('enhancer:set-theme', { + mode, + rules: require('./css/variables.json').map((rule) => [ + rule, + getStyle(rule), + ]), + }); - // draggable area resizing - const sidebar = document.querySelector('.notion-sidebar'); - if (settings.frameless && sidebar) { - let new_sidebar_width = - sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; - if (sidebar_width !== new_sidebar_width) { - sidebar_width = new_sidebar_width; - electron.ipcRenderer.sendToHost( - 'enhancer:sidebar-width', - sidebar_width - ); - } + // draggable area resizing + const sidebar = document.querySelector('.notion-sidebar'); + if (store().frameless && sidebar) { + let new_sidebar_width = + sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; + if (sidebar_width !== new_sidebar_width) { + sidebar_width = new_sidebar_width; + electron.ipcRenderer.sendToHost( + 'enhancer:sidebar-width', + sidebar_width + ); } } - setInterval(communicationLoop, 500); } - }; + setInterval(communicationLoop, 500); + } +}; diff --git a/repo/core/create.js b/repo/core/create.js index 4a2a1e9..1343670 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -7,84 +7,78 @@ 'use strict'; -module.exports = (defaults) => - function (store, __exports) { - const electron = require('electron'), - allWindows = () => - electron.BrowserWindow.getAllWindows().filter( - (win) => win.getTitle() !== 'notion-enhancer menu' - ), - // createWindow = __exports.createWindow, - path = require('path'), - settings = store(defaults), - helpers = require('../../pkg/helpers.js'), - __notion = helpers.getNotion(); +module.exports = (store, __exports) => { + const electron = require('electron'), + allWindows = () => + electron.BrowserWindow.getAllWindows().filter( + (win) => win.getTitle() !== 'notion-enhancer menu' + ), + // createWindow = __exports.createWindow, + path = require('path'), + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(); - __exports.createWindow = function (relativeUrl) { - if (!relativeUrl) relativeUrl = ''; - const window_state = require(`${__notion.replace( - /\\/g, - '/' - )}/app/node_modules/electron-window-state/index.js`)({ - defaultWidth: 1320, - defaultHeight: 860, - }), - rect = { - x: window_state.x, - y: window_state.y, - width: window_state.width, - height: window_state.height, - }, - focused_window = electron.BrowserWindow.getFocusedWindow(); - if (focused_window && !focused_window.isMaximized()) { - rect.x = focused_window.getPosition()[0] + 20; - rect.y = focused_window.getPosition()[1] + 20; - rect.width = focused_window.getSize()[0]; - rect.height = focused_window.getSize()[1]; + __exports.createWindow = function (relativeUrl) { + if (!relativeUrl) relativeUrl = ''; + const window_state = require(`${__notion.replace( + /\\/g, + '/' + )}/app/node_modules/electron-window-state/index.js`)({ + defaultWidth: 1320, + defaultHeight: 860, + }), + rect = { + x: window_state.x, + y: window_state.y, + width: window_state.width, + height: window_state.height, + }, + focused_window = electron.BrowserWindow.getFocusedWindow(); + if (focused_window && !focused_window.isMaximized()) { + rect.x = focused_window.getPosition()[0] + 20; + rect.y = focused_window.getPosition()[1] + 20; + rect.width = focused_window.getSize()[0]; + rect.height = focused_window.getSize()[1]; + } + const window = new electron.BrowserWindow({ + show: false, + backgroundColor: '#ffffff', + titleBarStyle: 'hiddenInset', + frame: !store().frameless, + webPreferences: { + preload: path.resolve(`${__notion}/app/renderer/index.js`), + webviewTag: true, + session: electron.session.fromPartition('persist:notion'), + }, + ...rect, + }); + window.once('ready-to-show', function () { + if ( + !store().openhidden || + allWindows().some((win) => win.isVisible() && win.id != window.id) + ) { + window.show(); + window.focus(); + if (store().maximized) window.maximize(); + if ( + (focused_window && focused_window.isFullScreen()) || + window_state.isFullScreen + ) + window.setFullScreen(true); } - const window = new electron.BrowserWindow({ - show: false, - backgroundColor: '#ffffff', - titleBarStyle: 'hiddenInset', - frame: !settings.frameless, - webPreferences: { - preload: path.resolve(`${__notion}/app/renderer/index.js`), - webviewTag: true, - session: electron.session.fromPartition('persist:notion'), - }, - ...rect, - }); - window.once('ready-to-show', function () { - if ( - !settings.openhidden || - allWindows().some((win) => win.isVisible() && win.id != window.id) - ) { - window.show(); - window.focus(); - if (settings.maximized) window.maximize(); - if ( - (focused_window && focused_window.isFullScreen()) || - window_state.isFullScreen - ) - window.setFullScreen(true); - } - }); - let intended_quit = false; - window.on('close', (e) => { - if ( - intended_quit || - !settings.close_to_tray || - allWindows().length > 1 - ) { - window_state.saveState(window); - window = null; - } else { - e.preventDefault(); - window.hide(); - } - }); - electron.app.on('before-quit', () => (intended_quit = true)); - window.loadURL(__exports.getIndexUrl(relativeUrl)); - return window; - }; + }); + let intended_quit = false; + window.on('close', (e) => { + if (intended_quit || !store().close_to_tray || allWindows().length > 1) { + window_state.saveState(window); + window = null; + } else { + e.preventDefault(); + window.hide(); + } + }); + electron.app.on('before-quit', () => (intended_quit = true)); + window.loadURL(__exports.getIndexUrl(relativeUrl)); + return window; }; +}; diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 019b43d..58ee971 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -60,7 +60,6 @@ main { } main section { border-radius: 2px; - padding: 0.75em; margin-bottom: 0.75em; } @@ -118,6 +117,7 @@ s { #alerts [role='alert'] { display: flex; + padding: 0.75em; } #alerts [role='alert']::before { content: '!'; @@ -180,6 +180,12 @@ s { background: var(--theme_local--sidebar); border: 1px solid var(--theme_local--table-border); } +#modules section > div { + padding: 0.75em; +} +.notion-light-theme #modules section { + background: var(--theme_local--main); +} #modules section h3, #modules section p { @@ -187,6 +193,13 @@ s { font-size: 1rem; } +/* #modules section .meta .toggle input + label .switch:before { + background: linear-gradient( + 90deg, + var(--theme_local--text_green), + var(--theme_local--bg_green) + ); +} */ #modules section .desc { margin: 0.3em 0 0.4em 0; font-size: 0.9em; @@ -236,19 +249,51 @@ s { /* module options */ +#modules .disabled .options { + display: none; +} +#modules section .options { + border-top: 1px solid var(--theme_local--table-border); + background: var(--theme_local--card); +} +#modules section .options p { + font-size: 0.9em; +} +#modules section .options p:not(:last-child) { + padding-bottom: 0.5em; + border-bottom: 0.5px solid var(--theme_local--table-border); + margin-bottom: 0.5em; +} + +select { + width: 100%; + margin: 0.25em 0; + font-size: 0.9rem; + padding: 0.4rem 0.2rem; + border: none; + color: var(--theme_local--text); + background: var(--theme_local--main); +} + .toggle * { cursor: pointer; } .toggle input { display: none; } +.toggle input + label { + display: flex; +} +.toggle input + label .name { + flex-basis: calc(100% - 2.25em); +} .toggle input + label .switch { position: relative; margin-top: 0.5em; float: right; height: 0.65em; width: 2em; - background: var(--theme_local--card); + background: var(--theme_local--main); border-radius: 5px; } .toggle input + label .switch:before { diff --git a/repo/core/menu.js b/repo/core/menu.js index 4ad2b65..f5cea1f 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -6,14 +6,13 @@ 'use strict'; -const __mod = require('./mod.js'), - store = require('../../pkg/store.js'), +const store = require('../../pkg/store.js'), helpers = require('../../pkg/helpers.js'), electron = require('electron'), browser = electron.remote.getCurrentWindow(); window['__start'] = async () => { - const buttons = require('./buttons.js'); + const buttons = require('./buttons.js')(() => ({ frameless: true })); document.querySelector('#menu-titlebar').appendChild(buttons.element); document.defaultView.addEventListener('keyup', (event) => { @@ -61,10 +60,11 @@ window['__start'] = async () => { ) .then((res) => res.json()) .then((res) => { - const version = { - local: __mod.version.split(/[~-]/g)[0], - repo: res.tag_name.slice(1), - }; + const raw_v = require('./mod.js').version, + version = { + local: raw_v.split(/[~-]/g)[0], + repo: res.tag_name.slice(1), + }; if (version.local == version.repo) return; // compare func from https://github.com/substack/semver-compare version.sorted = [version.local, version.repo].sort((a, b) => { @@ -87,7 +87,7 @@ window['__start'] = async () => { run npm i -g notion-enhancer
(or yarn global add notion-enhancer),
and notion-enhancer apply.` - : `local build v${__mod.version} is unstable.` + : `local build v${raw_v} is unstable.` ).prepend(); }); @@ -108,13 +108,12 @@ window['__start'] = async () => { ).append(); } - // mod options + // mod info + options function markdown(string) { const parsed = string .split('\n') .map((line) => line - // todo: stop e.g. whole chunk of ~~thin~~g~~ being selected .trim() .replace(/\s+/g, ' ') // > quote @@ -148,56 +147,121 @@ window['__start'] = async () => { .join(''); return parsed; } + + let modified_notice; + function modified() { + if (modified_notice) return; + modified_notice = createAlert( + 'info', + `changes may not apply until app restart.` + ); + modified_notice.append(); + } + const $modules = document.querySelector('#modules'); - for (let mod of modules.loaded.sort((a, b) => { - return a.tags.includes('core') || - store('mods', { [a.id]: { pinned: false } }).pinned + for (let mod of modules.loaded.sort((a, b) => + a.tags.includes('core') || + store('mods', { [a.id]: { pinned: false } }).pinned ? -1 : b.tags.includes('core') || store('mods', { [b.id]: { pinned: false } }).pinned ? 1 - : a.name.localeCompare(b.name); - })) { + : a.name.localeCompare(b.name) + )) { const menuStore = store('mods', { [mod.id]: { enabled: false } }); - mod.store = store(mod.id); mod.elem = createElement(`

-

${mod.name}` - : `class="toggle"> - - ` - }

-

${mod.tags - .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) - .join(' ')}

-
${markdown(mod.desc)}
-

- - - ${mod.author} - - v${mod.version} -

+
+

${mod.name}` + : `class="toggle"> + + ` + }

+

${mod.tags + .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) + .join(' ')}

+
${markdown(mod.desc)}
+

+ + + ${mod.author} + + v${mod.version} +

+
+ ${ + mod.options && mod.options.length ? '
' : '' + }
`); const $enable = mod.elem.querySelector(`#enable_${mod.id}`); if ($enable) $enable.addEventListener('click', (event) => { menuStore[mod.id].enabled = $enable.checked; + mod.elem.className = menuStore[mod.id].enabled ? 'enabled' : 'disabled'; }); + const $options = mod.elem.querySelector('.options'); + if ($options) + for (const opt of mod.options) { + let $opt; + switch (opt.type) { + case 'toggle': + $opt = createElement(` +

+ + +

+ `); + const $opt_checkbox = $opt.querySelector( + `#toggle_${mod.id}--${opt.key}` + ); + $opt_checkbox.addEventListener('change', (event) => { + store(mod.id)[opt.key] = $opt_checkbox.checked; + modified(); + }); + $options.appendChild($opt); + break; + case 'select': + $opt = createElement(` +

+ + +

+ `); + const $opt_select = $opt.querySelector( + `#select_${mod.id}--${opt.key}` + ); + $opt_select.value = store(mod.id)[opt.key]; + $opt_select.addEventListener('change', (event) => { + store(mod.id)[opt.key] = $opt_select.value; + modified(); + }); + $options.appendChild($opt); + break; + case 'input': + break; + case 'file': + break; + } + } $modules.append(mod.elem); } }; diff --git a/repo/core/mod.js b/repo/core/mod.js index 574d4d4..6d02054 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -6,16 +6,6 @@ 'use strict'; -const defaults = { - openhidden: false, - maximized: false, - close_to_tray: true, - frameless: true, - dragarea_height: 15, - smooth_scrollbars: true, - hotkey: 'CmdOrCtrl+Shift+A', -}; - module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', tags: ['core', 'extension'], @@ -24,12 +14,54 @@ module.exports = { ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, version: require('../../package.json').version, author: 'dragonwocky', - options: [], + options: [ + { + key: 'openhidden', + label: 'hide app on open', + type: 'toggle', + value: false, + }, + { + key: 'maximized', + label: 'auto-maximise windows', + type: 'toggle', + value: false, + }, + { + key: 'close_to_tray', + label: 'close window to the tray', + type: 'toggle', + value: true, + }, + { + key: 'frameless', + label: 'integrate titlebar into notion', + type: 'toggle', + value: true, + }, + { + key: 'dragarea_height', + label: 'height of frameless dragarea', + type: 'input', + value: 15, + }, + { + key: 'smooth_scrollbars', + label: 'integrate scrollbars into notion', + type: 'toggle', + value: true, + }, + { + key: 'hotkey', + label: 'window display hotkey', + type: 'input', + value: 'CmdOrCtrl+Shift+A', + }, + ], hacks: { - 'main/main.js': require('./tray.js')(defaults), - 'main/createWindow.js': require('./create.js')(defaults), - 'renderer/index.js': require('./render.js')(defaults), - 'renderer/preload.js': require('./client.js')(defaults), + 'main/main.js': require('./tray.js'), + 'main/createWindow.js': require('./create.js'), + 'renderer/index.js': require('./render.js'), + 'renderer/preload.js': require('./client.js'), }, - defaults, }; diff --git a/repo/core/render.js b/repo/core/render.js index d77e17a..f9eb7f8 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -6,28 +6,28 @@ 'use strict'; -module.exports = (defaults) => - function (store, __exports) { - const __start = window['__start'], - settings = store(defaults); +module.exports = (store, __exports) => { + const __start = window['__start']; - window['__start'] = function () { - __start(); - const dragarea = document.querySelector( - '#root [style*="-webkit-app-region: drag"]' - ), - default_styles = dragarea.getAttribute('style'); + window['__start'] = function () { + __start(); + const dragarea = document.querySelector( + '#root [style*="-webkit-app-region: drag"]' + ), + default_styles = dragarea.getAttribute('style'); - // document.body.innerText = document.body.innerHTML; + // document.body.innerText = document.body.innerHTML; - document - .getElementById('notion') - .addEventListener('ipc-message', (event) => { - if (event.channel !== 'enhancer:sidebar-width') return; - dragarea.setAttribute( - 'style', - `${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};` - ); - }); - }; + document + .getElementById('notion') + .addEventListener('ipc-message', (event) => { + if (event.channel !== 'enhancer:sidebar-width') return; + dragarea.setAttribute( + 'style', + `${default_styles} top: 2px; height: ${ + store().dragarea_height + }px; left: ${event.args[0]};` + ); + }); }; +}; diff --git a/repo/core/tray.js b/repo/core/tray.js index 91c8a48..cc7ddcf 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -9,176 +9,174 @@ let tray, enhancer_menu; -module.exports = (defaults) => - function (store, __exports) { - const electron = require('electron'), - path = require('path'), - is_mac = process.platform === 'darwin', - is_win = process.platform === 'win32', - settings = store(defaults), - helpers = require('../../pkg/helpers.js'), - __notion = helpers.getNotion(); +module.exports = (store, __exports) => { + const electron = require('electron'), + path = require('path'), + is_mac = process.platform === 'darwin', + is_win = process.platform === 'win32', + helpers = require('../../pkg/helpers.js'), + __notion = helpers.getNotion(); - electron.app.on('ready', () => { - tray = new electron.Tray( - is_win - ? path.resolve(`${__dirname}/icons/windows.ico`) - : new electron.nativeImage.createFromPath( - path.resolve(`${__dirname}/icons/mac+linux.png`) - ).resize({ - width: 16, - height: 16, - }) - ); + electron.app.on('ready', () => { + tray = new electron.Tray( + is_win + ? path.resolve(`${__dirname}/icons/windows.ico`) + : new electron.nativeImage.createFromPath( + path.resolve(`${__dirname}/icons/mac+linux.png`) + ).resize({ + width: 16, + height: 16, + }) + ); - electron.ipcMain.on('enhancer:set-theme', (event, arg) => { - if (!enhancer_menu) return; - enhancer_menu.webContents.send('enhancer:set-theme', arg); + electron.ipcMain.on('enhancer:set-theme', (event, arg) => { + if (!enhancer_menu) return; + enhancer_menu.webContents.send('enhancer:set-theme', arg); + }); + electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); + + function calculateWindowPos(width, height) { + const screen = electron.screen.getDisplayNearestPoint({ + x: tray.getBounds().x, + y: tray.getBounds().y, }); - electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); - - function calculateWindowPos(width, height) { - const screen = electron.screen.getDisplayNearestPoint({ - x: tray.getBounds().x, - y: tray.getBounds().y, - }); - // left - if (screen.workArea.x > 0) - return { - x: screen.workArea.x, - y: screen.workArea.height - height, - }; - // top - if (screen.workArea.y > 0) - return { - x: Math.round( - tray.getBounds().x + tray.getBounds().width / 2 - width / 2 - ), - y: screen.workArea.y, - }; - // right - if (screen.workArea.width < screen.bounds.width) - return { - x: screen.workArea.width - width, - y: screen.bounds.height - height, - }; - // bottom + // left + if (screen.workArea.x > 0) + return { + x: screen.workArea.x, + y: screen.workArea.height - height, + }; + // top + if (screen.workArea.y > 0) return { x: Math.round( tray.getBounds().x + tray.getBounds().width / 2 - width / 2 ), - y: screen.workArea.height - height, + y: screen.workArea.y, }; - } + // right + if (screen.workArea.width < screen.bounds.width) + return { + x: screen.workArea.width - width, + y: screen.bounds.height - height, + }; + // bottom + return { + x: Math.round( + tray.getBounds().x + tray.getBounds().width / 2 - width / 2 + ), + y: screen.workArea.height - height, + }; + } - function openExtensionMenu() { - if (enhancer_menu) return enhancer_menu.show(); - const window_state = require(`${__notion.replace( - /\\/g, - '/' - )}/app/node_modules/electron-window-state/index.js`)({ - file: 'menu-windowstate.json', - path: helpers.data_folder, - defaultWidth: 275, - defaultHeight: 600, - }); - electron.shell.openExternal(JSON.stringify(window_state)); - enhancer_menu = new electron.BrowserWindow({ - show: true, - frame: false, - titleBarStyle: 'hiddenInset', - x: - window_state.x || - calculateWindowPos(window_state.width, window_state.height).x, - y: - window_state.y || - calculateWindowPos(window_state.width, window_state.height).y, - width: window_state.width, - height: window_state.height, - webPreferences: { - preload: path.resolve(`${__dirname}/menu.js`), - nodeIntegration: true, - session: electron.session.fromPartition('persist:notion'), - }, - }); - enhancer_menu.loadURL('enhancement://core/menu.html'); - enhancer_menu.on('close', (e) => { - window_state.saveState(enhancer_menu); - enhancer_menu = null; - }); - } - - const contextMenu = electron.Menu.buildFromTemplate([ - { - type: 'normal', - label: 'Bug Report', - click: () => { - electron.shell.openExternal( - 'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md' - ); - }, - }, - { - type: 'normal', - label: 'Feature Request', - click: () => { - electron.shell.openExternal( - 'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md' - ); - }, - }, - { - type: 'separator', - }, - { - type: 'normal', - label: 'Docs', - click: () => { - electron.shell.openExternal( - 'https://github.com/dragonwocky/notion-enhancer/tree/js' - ); - }, - }, - { - type: 'normal', - label: 'Enhancements', - accelerator: 'CommandOrControl+E', - click: openExtensionMenu, - }, - { - type: 'separator', - }, - { - label: 'Quit', - role: 'quit', - }, - ]); - tray.setContextMenu(contextMenu); - tray.setToolTip('Notion'); - - function showWindows() { - const windows = electron.BrowserWindow.getAllWindows(); - if (is_mac) electron.app.show(); - if (settings.maximized) windows.forEach((win) => [win.maximize()]); - else windows.forEach((win) => win.show()); - electron.app.focus({ steal: true }); - } - function hideWindows() { - const windows = electron.BrowserWindow.getAllWindows(); - windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]); - if (is_mac) electron.app.hide(); - } - - tray.on('click', () => { - const windows = electron.BrowserWindow.getAllWindows(); - if (windows.some((win) => win.isVisible())) hideWindows(); - else showWindows(); + function openExtensionMenu() { + if (enhancer_menu) return enhancer_menu.show(); + const window_state = require(`${__notion.replace( + /\\/g, + '/' + )}/app/node_modules/electron-window-state/index.js`)({ + file: 'menu-windowstate.json', + path: helpers.data_folder, + defaultWidth: 275, + defaultHeight: 600, }); - electron.globalShortcut.register(settings.hotkey, () => { - const windows = electron.BrowserWindow.getAllWindows(); - if (windows.some((win) => win.isFocused() && win.isVisible())) - hideWindows(); - else showWindows(); + electron.shell.openExternal(JSON.stringify(window_state)); + enhancer_menu = new electron.BrowserWindow({ + show: true, + frame: false, + titleBarStyle: 'hiddenInset', + x: + window_state.x || + calculateWindowPos(window_state.width, window_state.height).x, + y: + window_state.y || + calculateWindowPos(window_state.width, window_state.height).y, + width: window_state.width, + height: window_state.height, + webPreferences: { + preload: path.resolve(`${__dirname}/menu.js`), + nodeIntegration: true, + session: electron.session.fromPartition('persist:notion'), + }, }); + enhancer_menu.loadURL('enhancement://core/menu.html'); + enhancer_menu.on('close', (e) => { + window_state.saveState(enhancer_menu); + enhancer_menu = null; + }); + } + + const contextMenu = electron.Menu.buildFromTemplate([ + { + type: 'normal', + label: 'Bug Report', + click: () => { + electron.shell.openExternal( + 'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md' + ); + }, + }, + { + type: 'normal', + label: 'Feature Request', + click: () => { + electron.shell.openExternal( + 'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md' + ); + }, + }, + { + type: 'separator', + }, + { + type: 'normal', + label: 'Docs', + click: () => { + electron.shell.openExternal( + 'https://github.com/dragonwocky/notion-enhancer/tree/js' + ); + }, + }, + { + type: 'normal', + label: 'Enhancements', + accelerator: 'CommandOrControl+E', + click: openExtensionMenu, + }, + { + type: 'separator', + }, + { + label: 'Quit', + role: 'quit', + }, + ]); + tray.setContextMenu(contextMenu); + tray.setToolTip('Notion'); + + function showWindows() { + const windows = electron.BrowserWindow.getAllWindows(); + if (is_mac) electron.app.show(); + if (store().maximized) windows.forEach((win) => [win.maximize()]); + else windows.forEach((win) => win.show()); + electron.app.focus({ steal: true }); + } + function hideWindows() { + const windows = electron.BrowserWindow.getAllWindows(); + windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]); + if (is_mac) electron.app.hide(); + } + + tray.on('click', () => { + const windows = electron.BrowserWindow.getAllWindows(); + if (windows.some((win) => win.isVisible())) hideWindows(); + else showWindows(); }); - }; + electron.globalShortcut.register(store().hotkey, () => { + const windows = electron.BrowserWindow.getAllWindows(); + if (windows.some((win) => win.isFocused() && win.isVisible())) + hideWindows(); + else showWindows(); + }); + }); +}; From 0a6a540a41243ab9bc9149736fd948b4275bcb85 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 4 Aug 2020 23:02:20 +1000 Subject: [PATCH 027/371] menu options: input + files --- repo/bracketed-links/mod.js | 2 +- repo/bracketed-links/styles.css | 4 +- repo/core/create.js | 8 +- repo/core/css/menu.css | 71 ++++++++++++++--- repo/core/icons/alwaysontop_off.svg | 2 +- repo/core/icons/alwaysontop_on.svg | 2 +- repo/core/icons/file.svg | 1 + repo/core/icons/maximize_off.svg | 2 +- repo/core/icons/maximize_on.svg | 2 +- repo/core/icons/minimize.svg | 2 +- repo/core/menu.js | 116 +++++++++++++++++++++------- repo/core/mod.js | 13 ++-- repo/core/tray.js | 16 ++++ repo/custom-inserts/mod.js | 30 +++++++ 14 files changed, 215 insertions(+), 56 deletions(-) create mode 100644 repo/core/icons/file.svg create mode 100644 repo/custom-inserts/mod.js diff --git a/repo/bracketed-links/mod.js b/repo/bracketed-links/mod.js index c2ad673..981df61 100644 --- a/repo/bracketed-links/mod.js +++ b/repo/bracketed-links/mod.js @@ -10,7 +10,7 @@ module.exports = { id: '60e14feb-a81d-4ffb-9b12-7585d346bad8', tags: ['extension'], name: 'bracketed links', - desc: 'render links surrounded with [brackets] instead of __underlined__.', + desc: 'render links surrounded with [[brackets]] instead of __underlined__.', version: '0.0.1', author: 'arecsu', }; diff --git a/repo/bracketed-links/styles.css b/repo/bracketed-links/styles.css index 3087e62..8bc3f9d 100644 --- a/repo/bracketed-links/styles.css +++ b/repo/bracketed-links/styles.css @@ -9,12 +9,12 @@ border-bottom: none !important; } .notion-link-token:before { - content: '['; + content: '[['; opacity: 0.7; transition: opacity 100ms ease-in; } .notion-link-token:after { - content: ']'; + content: ']]'; opacity: 0.7; transition: opacity 100ms ease-in; } diff --git a/repo/core/create.js b/repo/core/create.js index 1343670..9cee6e8 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -18,7 +18,7 @@ module.exports = (store, __exports) => { helpers = require('../../pkg/helpers.js'), __notion = helpers.getNotion(); - __exports.createWindow = function (relativeUrl) { + __exports.createWindow = function (relativeUrl, focused_window) { if (!relativeUrl) relativeUrl = ''; const window_state = require(`${__notion.replace( /\\/g, @@ -32,8 +32,9 @@ module.exports = (store, __exports) => { y: window_state.y, width: window_state.width, height: window_state.height, - }, - focused_window = electron.BrowserWindow.getFocusedWindow(); + }; + focused_window = + focused_window || electron.BrowserWindow.getFocusedWindow(); if (focused_window && !focused_window.isMaximized()) { rect.x = focused_window.getPosition()[0] + 20; rect.y = focused_window.getPosition()[1] + 20; @@ -81,4 +82,5 @@ module.exports = (store, __exports) => { window.loadURL(__exports.getIndexUrl(relativeUrl)); return window; }; + return __exports.createWindow; }; diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 58ee971..a7f8e86 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -205,6 +205,7 @@ s { font-size: 0.9em; } #modules section .desc p { + font-size: inherit; margin: 0; } #modules section .desc blockquote { @@ -265,7 +266,16 @@ s { margin-bottom: 0.5em; } -select { +.toggle *, +.input *, +.select *, +.file * { + cursor: pointer; +} +.select select, +.input input[type='text'], +.input input[type='number'], +.file input[type='file'] + label .choose { width: 100%; margin: 0.25em 0; font-size: 0.9rem; @@ -274,20 +284,59 @@ select { color: var(--theme_local--text); background: var(--theme_local--main); } - -.toggle * { - cursor: pointer; +.select select:focus, +.input input[type='text']:focus, +.input input[type='number']:focus, +.file input[type='file']:focus + label .choose, +.file input[type='file'] + label .choose:hover { + outline: var(--theme_local--table-border) solid 2px; } -.toggle input { +.file input[type='file'], +.toggle input[type='checkbox'] { display: none; } -.toggle input + label { + +.input input[type='text'], +.input input[type='number'] { + padding: 0.4rem; + cursor: text; +} + +.file input[type='file'] + label .label { + position: relative; display: flex; } -.toggle input + label .name { +.file input[type='file'] + label .label .name { + flex-basis: calc(100% - 1.5rem); +} +.file input[type='file'] + label .label .clear { + font-size: 1rem; + position: absolute; + top: 0.4em; + right: 0; + width: 1em; + height: 0.1em; + border: 0.35em solid var(--theme_local--card); + background: currentColor; +} +.file input[type='file'] + label .choose { + display: block; + white-space: nowrap; + overflow: hidden; +} +.file input[type='file'] + label .choose svg { + padding-top: 0.5em; + height: 1.25em; + width: 1.25em; +} + +.toggle input[type='checkbox'] + label { + display: flex; +} +.toggle input[type='checkbox'] + label .name { flex-basis: calc(100% - 2.25em); } -.toggle input + label .switch { +.toggle input[type='checkbox'] + label .switch { position: relative; margin-top: 0.5em; float: right; @@ -296,7 +345,7 @@ select { background: var(--theme_local--main); border-radius: 5px; } -.toggle input + label .switch:before { +.toggle input[type='checkbox'] + label .switch::before { content: ''; position: absolute; left: 0; @@ -312,7 +361,7 @@ select { opacity: var(--menu--toggle_opacity, 0); transition: opacity 300ms; } -.toggle input + label .switch .dot { +.toggle input[type='checkbox'] + label .switch .dot { position: absolute; width: 1em; height: 1em; @@ -323,7 +372,7 @@ select { background: var(--theme_local--todo_ticked-fill); box-shadow: 2px 1px 4px var(--theme_local--table-border); } -.toggle input:checked + label { +.toggle input[type='checkbox']:checked + label { --menu--toggle_offset: 1em; --menu--toggle_opacity: 1; } diff --git a/repo/core/icons/alwaysontop_off.svg b/repo/core/icons/alwaysontop_off.svg index 648339d..e8711d6 100644 --- a/repo/core/icons/alwaysontop_off.svg +++ b/repo/core/icons/alwaysontop_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/alwaysontop_on.svg b/repo/core/icons/alwaysontop_on.svg index 0c2abaf..4b700e3 100644 --- a/repo/core/icons/alwaysontop_on.svg +++ b/repo/core/icons/alwaysontop_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/file.svg b/repo/core/icons/file.svg new file mode 100644 index 0000000..159a961 --- /dev/null +++ b/repo/core/icons/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/repo/core/icons/maximize_off.svg b/repo/core/icons/maximize_off.svg index ebd1c92..378e3d2 100644 --- a/repo/core/icons/maximize_off.svg +++ b/repo/core/icons/maximize_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/maximize_on.svg b/repo/core/icons/maximize_on.svg index c7fdcbd..6f19bf5 100644 --- a/repo/core/icons/maximize_on.svg +++ b/repo/core/icons/maximize_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/minimize.svg b/repo/core/icons/minimize.svg index ec85d9d..3ea3cc9 100644 --- a/repo/core/icons/minimize.svg +++ b/repo/core/icons/minimize.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/menu.js b/repo/core/menu.js index f5cea1f..013cf9a 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -8,6 +8,8 @@ const store = require('../../pkg/store.js'), helpers = require('../../pkg/helpers.js'), + fs = require('fs-extra'), + path = require('path'), electron = require('electron'), browser = electron.remote.getCurrentWindow(); @@ -17,7 +19,7 @@ window['__start'] = async () => { document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') window.reload(); - if (event.key === 'e' && (event.ctrlKey || event.metaKey)) browser.close(); + if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close(); }); electron.ipcRenderer.on('enhancer:set-theme', (event, theme) => { @@ -68,11 +70,11 @@ window['__start'] = async () => { if (version.local == version.repo) return; // compare func from https://github.com/substack/semver-compare version.sorted = [version.local, version.repo].sort((a, b) => { - var pa = a.split('.'); - var pb = b.split('.'); - for (var i = 0; i < 3; i++) { - var na = Number(pa[i]); - var nb = Number(pb[i]); + const pa = a.split('.'), + pb = b.split('.'); + for (let i = 0; i < 3; i++) { + let na = Number(pa[i]), + nb = Number(pb[i]); if (na > nb) return 1; if (nb > na) return -1; if (!isNaN(na) && isNaN(nb)) return 1; @@ -133,7 +135,7 @@ window['__start'] = async () => { // ![image_title](source) .replace( /([^\\])?\!\[([^\]]*[^\\\]]?)\]\(([^)]*[^\\)])\)/g, - '$1$2' + '$1$2' ) // [link](destination) .replace( @@ -153,7 +155,7 @@ window['__start'] = async () => { if (modified_notice) return; modified_notice = createAlert( 'info', - `changes may not apply until app restart.` + `changes may not fully apply until app restart.` ); modified_notice.append(); } @@ -193,7 +195,7 @@ window['__start'] = async () => {
${markdown(mod.desc)}

- + ${mod.author} v${mod.version} @@ -210,7 +212,9 @@ window['__start'] = async () => { menuStore[mod.id].enabled = $enable.checked; mod.elem.className = menuStore[mod.id].enabled ? 'enabled' : 'disabled'; }); + const $options = mod.elem.querySelector('.options'); + let file_icon; if ($options) for (const opt of mod.options) { let $opt; @@ -219,21 +223,17 @@ window['__start'] = async () => { $opt = createElement(`

+ ${ + store(mod.id, { [opt.key]: opt.value })[opt.key] + ? 'checked' + : '' + } />

`); - const $opt_checkbox = $opt.querySelector( - `#toggle_${mod.id}--${opt.key}` - ); - $opt_checkbox.addEventListener('change', (event) => { - store(mod.id)[opt.key] = $opt_checkbox.checked; - modified(); - }); - $options.appendChild($opt); break; case 'select': $opt = createElement(` @@ -246,21 +246,83 @@ window['__start'] = async () => {

`); - const $opt_select = $opt.querySelector( - `#select_${mod.id}--${opt.key}` - ); - $opt_select.value = store(mod.id)[opt.key]; - $opt_select.addEventListener('change', (event) => { - store(mod.id)[opt.key] = $opt_select.value; - modified(); - }); - $options.appendChild($opt); break; case 'input': + $opt = createElement(` +

+ + +

+ `); break; case 'file': + if (!file_icon) + file_icon = await fs.readFile( + path.resolve(`${__dirname}/icons/file.svg`) + ); + $opt = createElement(` +

+ + +

+ `); + $opt.querySelector('.clear').addEventListener('click', (event) => { + store(mod.id)[opt.key] = ''; + $opt.querySelector('.path').innerText = store(mod.id)[opt.key] + ? store(mod.id)[opt.key].split(path.sep).reverse()[0] + : 'choose a file...'; + }); break; } + + if (opt.type !== 'file') { + $opt.querySelector( + `#${opt.type}_${mod.id}--${opt.key}` + ).value = store(mod.id, { + [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value, + })[opt.key]; + } + $opt + .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) + .addEventListener('change', (event) => { + if (opt.type === 'toggle') { + store(mod.id)[opt.key] = event.target.checked; + } else if (opt.type === 'file') { + if (event.target.files.length) + store(mod.id)[opt.key] = event.target.files[0].path; + $opt.querySelector('.path').innerText = store(mod.id)[opt.key] + ? store(mod.id)[opt.key].split(path.sep).reverse()[0] + : 'choose a file...'; + } else + store(mod.id)[opt.key] = + typeof opt.value === 'number' + ? Number(event.target.value) + : event.target.value; + modified(); + }); + $options.appendChild($opt); } $modules.append(mod.elem); } diff --git a/repo/core/mod.js b/repo/core/mod.js index 6d02054..feca362 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -10,8 +10,7 @@ module.exports = { id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', tags: ['core', 'extension'], name: 'notion-enhancer core', - desc: `> the **modloader** itself, _including_: the [CLI](https://github.com), the \`menu\`, and ~~enabling/disabling/insertion/updating of~~ mods. - ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, + desc: 'what makes this whole thing possible: cli, modloader, menu, & tray.', version: require('../../package.json').version, author: 'dragonwocky', options: [ @@ -35,27 +34,27 @@ module.exports = { }, { key: 'frameless', - label: 'integrate titlebar into notion', + label: 'integrated titlebar', type: 'toggle', value: true, }, { key: 'dragarea_height', - label: 'height of frameless dragarea', + label: 'height of frameless dragarea:', type: 'input', value: 15, }, { key: 'smooth_scrollbars', - label: 'integrate scrollbars into notion', + label: 'integrated scrollbars', type: 'toggle', value: true, }, { key: 'hotkey', - label: 'window display hotkey', + label: 'window display hotkey:', type: 'input', - value: 'CmdOrCtrl+Shift+A', + value: 'CommandOrControl+Shift+A', }, ], hacks: { diff --git a/repo/core/tray.js b/repo/core/tray.js index cc7ddcf..4e98c60 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -143,6 +143,22 @@ module.exports = (store, __exports) => { accelerator: 'CommandOrControl+E', click: openExtensionMenu, }, + { + type: 'normal', + label: 'New Window', + click: () => { + require('./create.js')( + store, + require(path.resolve(`${__notion}/app/main/createWindow.js`)) + )( + '', + electron.BrowserWindow.getAllWindows().find( + (win) => win !== enhancer_menu + ) + ); + }, + accelerator: 'CommandOrControl+Shift+N', + }, { type: 'separator', }, diff --git a/repo/custom-inserts/mod.js b/repo/custom-inserts/mod.js new file mode 100644 index 0000000..54ca1ff --- /dev/null +++ b/repo/custom-inserts/mod.js @@ -0,0 +1,30 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky + * (https://dragonwocky.me/) under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb', + tags: ['extension'], + name: 'custom inserts', + desc: 'directly link files for small client-side tweaks.', + version: '0.0.2', + author: 'dragonwocky', + options: [ + { + key: 'css', + label: 'css insert', + type: 'file', + extensions: ['css'], + }, + { + key: 'js', + label: 'client-side js insert', + type: 'file', + extensions: ['js'], + }, + ], +}; From 7f779e35e501e9b075f6c929a781ca0761f050fb Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 5 Aug 2020 21:48:11 +1000 Subject: [PATCH 028/371] working menu search --- repo/core/css/menu.css | 90 ++++++++++++++++++++++++++++----- repo/core/icons/user.png | Bin 0 -> 45426 bytes repo/core/menu.html | 9 ++++ repo/core/menu.js | 99 +++++++++++++++++++++++++++++++++++-- repo/core/mod.js | 4 +- repo/custom-inserts/mod.js | 29 ++++++++++- 6 files changed, 214 insertions(+), 17 deletions(-) create mode 100644 repo/core/icons/user.png diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index a7f8e86..29ad6d7 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -22,11 +22,10 @@ word-break: break-word; text-decoration: none; text-size-adjust: 100%; + color: var(--theme_local--text); + font-family: var(--theme_local--font_sans); outline-color: var(--theme_local--card-border); } -*:active { - outline: none; -} html, body { width: 100%; @@ -65,12 +64,6 @@ main section { /* inline formatting */ -body, -button { - color: var(--theme_local--text); - font-family: var(--theme_local--font_sans); -} - code { border-radius: 0.1em; padding: 0.2em 0.4em; @@ -174,6 +167,62 @@ s { border: 1px solid rgba(0, 0, 0, 0.1); } +/* search */ + +#search { + position: relative; + margin-bottom: 0.75em; +} + +#search > svg { + position: absolute; + width: 1em; + height: 1em; + top: 1.3em; + left: 1em; +} +#search > svg path { + fill: var(--theme_local--text_ui_info); +} +#search > input { + width: 100%; + padding: 1em 1.4em 1em 2.8em; + font: 1em var(--font); + background: var(--theme_local--card); + border: 1px solid var(--theme_local--table-border); + color: var(--theme_local--text); + border-radius: 2px; +} +#search > input::placeholder { + font-weight: bold; + color: var(--theme_local--text_ui_info); +} +#search > input:focus { + box-shadow: var(--theme_local--table-border) 0.04em 0.04em, + var(--theme_local--table-border) -0.04em -0.04em, + var(--theme_local--table-border) -0.04em 0.04em, + var(--theme_local--table-border) 0.04em -0.04em; + outline: none; +} + +#search #tags > span { + cursor: pointer; + display: inline-block; + font-size: 0.8em; + padding: 0.2em 0.5em; + margin-top: 0.5em; + background: var(--theme_local--card); + border-radius: 2px; + transition: background 200ms; + user-select: none; +} +#search #tags > span:not(:last-child) { + margin-right: 0.5em; +} +#search #tags > .selected { + background: var(--tag_colour, var(--theme_local--primary_click)); +} + /* module meta */ #modules section { @@ -193,13 +242,21 @@ s { font-size: 1rem; } -/* #modules section .meta .toggle input + label .switch:before { +/* #modules section .meta .toggle input + label .switch::before { background: linear-gradient( 90deg, var(--theme_local--text_green), var(--theme_local--bg_green) ); +} +#modules section .meta .toggle input + label .switch { + background: linear-gradient( + 90deg, + var(--theme_local--text_red), + var(--theme_local--bg_red) + ); } */ + #modules section .desc { margin: 0.3em 0 0.4em 0; font-size: 0.9em; @@ -293,7 +350,10 @@ s { } .file input[type='file'], .toggle input[type='checkbox'] { - display: none; + opacity: 0; + width: 0.1px; + height: 0.1px; + position: fixed; } .input input[type='text'], @@ -344,6 +404,7 @@ s { width: 2em; background: var(--theme_local--main); border-radius: 5px; + transition: background 300ms; } .toggle input[type='checkbox'] + label .switch::before { content: ''; @@ -372,6 +433,13 @@ s { background: var(--theme_local--todo_ticked-fill); box-shadow: 2px 1px 4px var(--theme_local--table-border); } +.toggle input[type='checkbox']:checked:focus + label .switch { + background: none !important; +} +.toggle input[type='checkbox']:focus + label .switch::before, +.toggle input[type='checkbox']:focus + label .switch .dot { + border: 1px solid var(--theme_local--card-border); +} .toggle input[type='checkbox']:checked + label { --menu--toggle_offset: 1em; --menu--toggle_opacity: 1; diff --git a/repo/core/icons/user.png b/repo/core/icons/user.png new file mode 100644 index 0000000000000000000000000000000000000000..06feff7fe0f98dad6ae05def4ef5108e5b494e79 GIT binary patch literal 45426 zcmeI1F;0|G7)9TNh7f5f>}=hGg=7d0F%yC;z|PKCm|!ijFfnl@(7ORcO##LoxCV>g znTA;2`{fIF2xk((nET#;{&R>8UyqlEyE{*J#u&ScSM!tA_v`ha?XA_;I^Cn*5nmVI-QebJCm|*pJ6R&VhozXlgury6fu=>1-SGcCmXr2^UnkFV#ecr?? zTvKN>PYNte6BDdHZ{iiMsWX}<1(v3X309vs@e0?}8O@UdOVh*ztIwNwg=^}J=1GC2 zX<~xa=S{rAHFZYwq`<-i0~o*n1~7mD3}65Q7{CAqFn|FJU;qOczyJm?fB_6(00S7n z00!<12)~rQ+dh!L@JbIM6qTqHF~ARAM7#M=Dw)C}b1Fr&n-8UuDJ(LlQbfD?P%4?i zB6BK5w3`p5k|``Qr&2__`A{mE!Xk4jMYNj_rIINuGN)2RyZKNmnZhFTjjANTY|=yt zwn@AK3$G+dichE%PaptLNsttuP$`~30HBf}DL$c6Jb?f}B|%brLZx^D0f0(^r1*qN z@dN?@l>|xg36
+
+ - @@ -22,6 +23,10 @@
+ diff --git a/repo/core/menu.js b/repo/core/menu.js index 389d513..542fc11 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -130,6 +130,37 @@ window['__start'] = async () => { ).append(); } + // further-configuration popup + const $popup = document.querySelector('#popup'); + document.addEventListener('keyup', (event) => { + if ( + $popup.classList.contains('visible') && + [13, 27].includes(event.keyCode) + ) + $popup.classList.remove('visible'); + }); + let colorpicker_target = null; + const $colorpicker = colorjoe + .rgb('colorpicker') + .on('change', function (color) { + if (!colorpicker_target) return; + colorpicker_target.elem.style.setProperty( + '--configured--color-value', + color.css() + ); + store(colorpicker_target.id)[colorpicker_target.key] = color.css(); + }) + .update(); + + document + .querySelector('#colorpicker') + .appendChild(createElement('')); + document.querySelectorAll('#popup .close-modal').forEach((el) => + el.addEventListener('click', (event) => { + $popup.classList.remove('visible'); + }) + ); + // search const search_query = { enabled: true, @@ -244,6 +275,94 @@ window['__start'] = async () => { modified_notice.append(); } + const file_icon = await fs.readFile( + path.resolve(`${__dirname}/icons/file.svg`) + ); + function createOption(opt, id) { + let $opt; + switch (opt.type) { + case 'toggle': + $opt = ` + + + `; + break; + case 'select': + $opt = ` + + + `; + break; + case 'input': + $opt = ` + + + `; + break; + case 'color': + $opt = ` + + + `; + break; + case 'file': + $opt = ` + + + `; + } + $opt = createElement(`

${$opt}

`); + if (opt.type === 'color') { + $opt + .querySelector(`#${opt.type}_${id}--${opt.key}`) + .style.setProperty( + '--configured--color-value', + store(id, { [opt.key]: opt.value })[opt.key] + ); + } else if (opt.type === 'file') { + $opt.querySelector('.clear').addEventListener('click', (event) => { + store(id)[opt.key] = ''; + $opt.querySelector('.path').innerText = 'choose a file...'; + }); + } else { + $opt.querySelector(`#${opt.type}_${id}--${opt.key}`).value = store(id, { + [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value, + })[opt.key]; + } + + return $opt; + } + const $modules = document.querySelector('#modules'); for (let mod of modules.loaded.sort((a, b) => a.tags.includes('core') || @@ -302,114 +421,40 @@ window['__start'] = async () => { }); const $options = mod.elem.querySelector('.options'); - let file_icon; if ($options) for (const opt of mod.options) { - let $opt; - switch (opt.type) { - case 'toggle': - $opt = createElement(` -

- - -

- `); - break; - case 'select': - $opt = createElement(` -

- - -

- `); - break; - case 'input': - $opt = createElement(` -

- - -

- `); - break; - case 'file': - if (!file_icon) - file_icon = await fs.readFile( - path.resolve(`${__dirname}/icons/file.svg`) - ); - $opt = createElement(` -

- - -

- `); - $opt.querySelector('.clear').addEventListener('click', (event) => { - store(mod.id)[opt.key] = ''; - $opt.querySelector('.path').innerText = store(mod.id)[opt.key] - ? store(mod.id)[opt.key].split(path.sep).reverse()[0] - : 'choose a file...'; - }); - break; - } - - if (opt.type !== 'file') { - $opt.querySelector( - `#${opt.type}_${mod.id}--${opt.key}` - ).value = store(mod.id, { - [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value, - })[opt.key]; - } - $opt - .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) - .addEventListener('change', (event) => { - if (opt.type === 'toggle') { - store(mod.id)[opt.key] = event.target.checked; - } else if (opt.type === 'file') { - if (event.target.files.length) - store(mod.id)[opt.key] = event.target.files[0].path; - $opt.querySelector('.path').innerText = store(mod.id)[opt.key] - ? store(mod.id)[opt.key].split(path.sep).reverse()[0] - : 'choose a file...'; - } else - store(mod.id)[opt.key] = - typeof opt.value === 'number' - ? Number(event.target.value) - : event.target.value; - modified(); + const $opt = createOption(opt, mod.id); + if (opt.type === 'color') { + const $preview = $opt.querySelector('input'); + $opt.addEventListener('click', (event) => { + colorpicker_target = { + id: mod.id, + key: opt.key, + elem: $preview, + }; + $colorpicker.set(store(mod.id)[opt.key]); + $popup.classList.add('visible'); }); + } else { + $opt + .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) + .addEventListener('change', (event) => { + if (opt.type === 'toggle') { + store(mod.id)[opt.key] = event.target.checked; + } else if (opt.type === 'file') { + if (event.target.files.length) + store(mod.id)[opt.key] = event.target.files[0].path; + $opt.querySelector('.path').innerText = store(mod.id)[opt.key] + ? store(mod.id)[opt.key].split(path.sep).reverse()[0] + : 'choose a file...'; + } else + store(mod.id)[opt.key] = + typeof opt.value === 'number' + ? Number(event.target.value) + : event.target.value; + modified(); + }); + } $options.appendChild($opt); } $modules.append(mod.elem); diff --git a/repo/dark+/mod.js b/repo/dark+/mod.js index 3448f2b..56d4d99 100644 --- a/repo/dark+/mod.js +++ b/repo/dark+/mod.js @@ -13,4 +13,40 @@ module.exports = { desc: 'a vivid-colour near-black theme.', version: '0.1.0', author: 'dragonwocky', + options: [ + { + key: 'primary', + label: 'primary colour', + type: 'color', + value: 'rgb(177, 24, 24)', + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + const color = require('./one-color.js')(store().primary); + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + document.documentElement.style.setProperty( + '--theme_dark--selected', + color.lightness(0.35).alpha(0.2).cssa() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary', + color.hex() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary_hover', + color.lightness(0.5).hex() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary_click', + color.lightness(0.6).hex() + ); + document.documentElement.style.setProperty( + '--theme_dark--primary_indicator', + color.lightness(0.4).hex() + ); + }); + }, + }, }; diff --git a/repo/dark+/one-color.js b/repo/dark+/one-color.js new file mode 100644 index 0000000..b602090 --- /dev/null +++ b/repo/dark+/one-color.js @@ -0,0 +1,2 @@ +!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):((t=t||self).one=t.one||{},t.one.color=r())}(this,(function(){"use strict";var t=[],r=function(t){return void 0===t},e=/\s*(\.\d+|\d+(?:\.\d+)?)(%)?\s*/,n=/\s*(\.\d+|100|\d?\d(?:\.\d+)?)%\s*/,a=new RegExp("^(rgb|hsl|hsv)a?\\("+e.source+","+e.source+","+e.source+"(?:,"+/\s*(\.\d+|\d+(?:\.\d+)?)\s*/.source+")?\\)$","i");function o(t){if(Array.isArray(t)){if("string"==typeof t[0]&&"function"==typeof o[t[0]])return new o[t[0]](t.slice(1,t.length));if(4===t.length)return new o.RGB(t[0]/255,t[1]/255,t[2]/255,t[3]/255)}else if("string"==typeof t){var e=t.toLowerCase();o.namedColors[e]&&(t="#"+o.namedColors[e]),"transparent"===e&&(t="rgba(0,0,0,0)");var s=t.match(a);if(s){var i=s[1].toUpperCase(),u=r(s[8])?s[8]:parseFloat(s[8]),h="H"===i[0],c=s[3]?100:h?360:255,f=s[5]||h?100:255,l=s[7]||h?100:255;if(r(o[i]))throw new Error("color."+i+" is not installed.");return new o[i](parseFloat(s[2])/c,parseFloat(s[4])/f,parseFloat(s[6])/l,u)}t.length<6&&(t=t.replace(/^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i,"$1$1$2$2$3$3"));var p=t.match(/^#?([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])$/i);if(p)return new o.RGB(parseInt(p[1],16)/255,parseInt(p[2],16)/255,parseInt(p[3],16)/255);if(o.CMYK){var d=t.match(new RegExp("^cmyk\\("+n.source+","+n.source+","+n.source+","+n.source+"\\)$","i"));if(d)return new o.CMYK(parseFloat(d[1])/100,parseFloat(d[2])/100,parseFloat(d[3])/100,parseFloat(d[4])/100)}}else if("object"==typeof t&&t.isColor)return t;return!1}o.namedColors={},o.installColorSpace=function(e,n,a){o[e]=function(t){var r=Array.isArray(t)?t:arguments;n.forEach((function(t,a){var o=r[a];if("alpha"===t)this._alpha=isNaN(o)||o>1?1:o<0?0:o;else{if(isNaN(o))throw new Error("["+e+"]: Invalid color: ("+n.join(",")+")");"hue"===t?this._hue=o<0?o-Math.floor(o):o%1:this["_"+t]=o<0?0:o>1?1:o}}),this)},o[e].propertyNames=n;var s=o[e].prototype;for(var i in["valueOf","hex","hexa","css","cssa"].forEach((function(t){s[t]=s[t]||("RGB"===e?s.hex:function(){return this.rgb()[t]()})})),s.isColor=!0,s.equals=function(t,a){r(a)&&(a=1e-10),t=t[e.toLowerCase()]();for(var o=0;oa)return!1;return!0},s.toJSON=function(){return[e].concat(n.map((function(t){return this["_"+t]}),this))},a)if(Object.prototype.hasOwnProperty.call(a,i)){var u=i.match(/^from(.*)$/);u?o[u[1].toUpperCase()].prototype[e.toLowerCase()]=a[i]:s[i]=a[i]}function h(t,r){var e={};for(var n in e[r.toLowerCase()]=function(){return this.rgb()[r.toLowerCase()]()},o[r].propertyNames.forEach((function(t){var n="black"===t?"k":t.charAt(0);e[t]=e[n]=function(e,n){return this[r.toLowerCase()]()[t](e,n)}})),e)Object.prototype.hasOwnProperty.call(e,n)&&void 0===o[t].prototype[n]&&(o[t].prototype[n]=e[n])}return s[e.toLowerCase()]=function(){return this},s.toString=function(){return"["+e+" "+n.map((function(t){return this["_"+t]}),this).join(", ")+"]"},n.forEach((function(t){var r="black"===t?"k":t.charAt(0);s[t]=s[r]=function(r,e){return void 0===r?this["_"+t]:e?new this.constructor(n.map((function(e){return this["_"+e]+(t===e?r:0)}),this)):new this.constructor(n.map((function(e){return t===e?r:this["_"+e]}),this))}})),t.forEach((function(t){h(e,t),h(t,e)})),t.push(e),o},o.pluginList=[],o.use=function(t){return-1===o.pluginList.indexOf(t)&&(this.pluginList.push(t),t(o)),o},o.installMethod=function(r,e){return t.forEach((function(t){o[t].prototype[r]=e})),this},o.installColorSpace("RGB",["red","green","blue","alpha"],{hex:function(){var t=(65536*Math.round(255*this._red)+256*Math.round(255*this._green)+Math.round(255*this._blue)).toString(16);return"#"+"00000".substr(0,6-t.length)+t},hexa:function(){var t=Math.round(255*this._alpha).toString(16);return"#"+"00".substr(0,2-t.length)+t+this.hex().substr(1,6)},css:function(){return"rgb("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+")"},cssa:function(){return"rgba("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+","+this._alpha+")"}});var s=function(t){t.installColorSpace("HSV",["hue","saturation","value","alpha"],{rgb:function(){var r,e,n,a=this._hue,o=this._saturation,s=this._value,i=Math.min(5,Math.floor(6*a)),u=6*a-i,h=s*(1-o),c=s*(1-u*o),f=s*(1-(1-u)*o);switch(i){case 0:r=s,e=f,n=h;break;case 1:r=c,e=s,n=h;break;case 2:r=h,e=s,n=f;break;case 3:r=h,e=c,n=s;break;case 4:r=f,e=h,n=s;break;case 5:r=s,e=h,n=c}return new t.RGB(r,e,n,this._alpha)},hsl:function(){var r,e=(2-this._saturation)*this._value,n=this._saturation*this._value,a=e<=1?e:2-e;return r=a<1e-9?0:n/a,new t.HSL(this._hue,r,e/2,this._alpha)},fromRgb:function(){var r,e=this._red,n=this._green,a=this._blue,o=Math.max(e,n,a),s=o-Math.min(e,n,a),i=0===o?0:s/o,u=o;if(0===s)r=0;else switch(o){case e:r=(n-a)/s/6+(n Date: Thu, 13 Aug 2020 23:24:45 +1000 Subject: [PATCH 038/371] purple gameish theme... need to link to reddit account --- repo/core/css/dark.css | 3 + repo/core/css/light.css | 3 + repo/gameish/mod.js | 17 ++++++ repo/gameish/styles.css | 125 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 148 insertions(+) create mode 100644 repo/gameish/mod.js create mode 100644 repo/gameish/styles.css diff --git a/repo/core/css/dark.css b/repo/core/css/dark.css index d671ee6..5dc1df7 100644 --- a/repo/core/css/dark.css +++ b/repo/core/css/dark.css @@ -109,6 +109,9 @@ .notion-dark-theme [style*='color: rgb(46, 170, 220)'] { color: var(--theme_dark--primary) !important; } +.notion-dark-theme [style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme_dark--primary) !important; +} .notion-dark-theme [style*='background: rgb(46, 170, 220)'], .notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_dark--primary) !important; diff --git a/repo/core/css/light.css b/repo/core/css/light.css index 0588137..4cc43ea 100644 --- a/repo/core/css/light.css +++ b/repo/core/css/light.css @@ -110,6 +110,9 @@ .notion-light-theme [style*='color: rgb(46, 170, 220)'] { color: var(--theme_light--primary) !important; } +.notion-light-theme [style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme_light--primary) !important; +} .notion-light-theme [style*='background: rgb(46, 170, 220)'], .notion-light-theme [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_light--primary) !important; diff --git a/repo/gameish/mod.js b/repo/gameish/mod.js new file mode 100644 index 0000000..1289918 --- /dev/null +++ b/repo/gameish/mod.js @@ -0,0 +1,17 @@ +/* + * gameish + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 alizarin + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'ad923617-e76e-408e-9f23-490738a3223f', + tags: ['theme', 'dark'], + name: 'gameish', + desc: 'a purple, "gamer-styled" theme with a blocky-font.', + version: '0.0.3', + author: 'alizarin', +}; diff --git a/repo/gameish/styles.css b/repo/gameish/styles.css new file mode 100644 index 0000000..2257aeb --- /dev/null +++ b/repo/gameish/styles.css @@ -0,0 +1,125 @@ +/* + * gameish + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 alizarin + * under the MIT license + */ + +@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap'); + +:root { + --theme_dark--main: #1e1c26; + --theme_dark--sidebar: #24222c; + /* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */ + --theme_dark--dragarea: #19181f; + /* --theme_dark--preview-width: 977px; + --theme_dark--preview-padding: 8em; + --theme_dark--preview_banner-height: 20vh; + --theme_dark--page_banner-height: 30vh; */ + + --theme_dark--font_sans: 'Offside', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, + 'Segoe UI Emoji', 'Segoe UI Symbol'; + /* --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; */ + --theme_dark--font_mono: 'DM Mono', iawriter-mono, Nitti, Menlo, Courier, + monospace; + --theme_dark--font_code: 'DM Mono', SFMono-Regular, Consolas, + 'Liberation Mono', Menlo, Courier, monospace; + + /* --theme_dark--font_title-size: 40px; + --theme_dark--font_heading1-size: 30px; + --theme_dark--font_heading2-size: 24px; + --theme_dark--font_heading3-size: 20px; + --theme_dark--font_label-size: 14px; + --theme_dark--font_body-size: 16px; + --theme_dark--font_code-size: 12.75px; + --theme_dark--font_sidebar-size: 14px; */ + + --theme_dark--scrollbar: #221f29; + /* --theme_dark--scrollbar-border: transparent; */ + --theme_dark--scrollbar_hover: #312d3c; + + /* --theme_dark--card: rgb(53, 51, 58); */ + --theme_dark--gallery: rgba(162, 162, 162, 0.01); + --theme_dark--table-border: rgba(148, 148, 184, 0.5); + --theme_dark--interactive_hover: #282632; + /* --theme_dark--interactive_hover-border: transparent; + --theme_dark--button_close: #e81123; + --theme_dark--button_close-fill: white; */ + + --theme_dark--selected: rgba(85, 68, 156, 0.3); + --theme_dark--primary: rgb(106, 47, 200); + --theme_dark--primary_hover: rgb(110, 48, 211); + --theme_dark--primary_click: rgb(117, 65, 200); + --theme_dark--primary_indicator: rgb(150, 84, 226); + + /* --theme_dark--option-color: white; + --theme_dark--option-background: transparent; + --theme_dark--option_active-color: white; + --theme_dark--option_active-background: var(--theme_dark--primary); + --theme_dark--option_hover-color: white; */ + --theme_dark--option_hover-background: rgb(20, 0, 51); + + --theme_dark--danger_text: rgb(235, 87, 87); + --theme_dark--danger_border: rgba(235, 87, 87, 0.5); + + --theme_dark--text: rgba(255, 255, 255, 0.9); + --theme_dark--text_ui: rgba(255, 255, 255, 0.6); + --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4); + + --theme_dark--text_gray: rgba(151, 154, 155, 0.95); + --theme_dark--text_brown: rgb(112, 87, 77); + /* --theme_dark--text_orange: rgb(255, 163, 68); */ + --theme_dark--text_yellow: #ffe529; + --theme_dark--text_green: #64d97b; + /* --theme_dark--text_blue: rgb(82, 156, 202); */ + --theme_dark--text_purple: #d43cc7; + /* --theme_dark--text_pink: rgb(226, 85, 161); */ + --theme_dark--text_red: #d93939; + /* --theme_dark--bg_gray: rgba(151, 154, 155, 0.5); + --theme_dark--bg_brown: rgba(147, 114, 100, 0.5); + --theme_dark--bg_orange: rgba(255, 163, 68, 0.5); + --theme_dark--bg_yellow: rgba(255, 220, 73, 0.5); + --theme_dark--bg_green: rgba(77, 171, 154, 0.5); + --theme_dark--bg_blue: rgba(82, 156, 202, 0.5); + --theme_dark--bg_purple: rgba(154, 109, 215, 0.5); + --theme_dark--bg_pink: rgba(226, 85, 161, 0.5); */ + --theme_dark--bg_red: rgba(216, 57, 46, 0.5); + /* --theme_dark--line_gray: rgb(69, 75, 78); */ + --theme_dark--line_brown: rgb(78, 57, 48); + --theme_dark--line_orange: rgb(136, 80, 48); + --theme_dark--line_yellow: #fbe2287c; + /* --theme_dark--line_green: rgb(53, 76, 75); + --theme_dark--line_blue: rgb(54, 73, 84); + --theme_dark--line_purple: rgb(68, 63, 87); + --theme_dark--line_pink: rgb(83, 59, 76); */ + --theme_dark--line_red: rgb(151, 62, 62); + + --theme_dark--code_inline-text: #d9cbec; + --theme_dark--code_inline-background: #24222c; + /* --theme_dark--code_text: var(--theme_dark--text); */ + --theme_dark--code-background: #24222c; + /* --theme_dark--code_function: rgba(255, 255, 255, 0.9); + --theme_dark--code_keyword: 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_property: hsl(350, 40%, 70%); + --theme_dark--code_builtin: hsl(75, 70%, 60%); + --theme_dark--code_attr-name: hsl(75, 70%, 60%); + --theme_dark--code_comment: hsl(30, 20%, 50%); + --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9); + --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%); */ +} + +.notion-scroller.vertical.horizontal + .notion-table-view + .notion-selectable.notion-collection_view-block + > :first-child { + background: var(--theme_dark--card) !important; +} From a9a6fc5929539975a432dfeb1ca30a7621bef0a3 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 14 Aug 2020 23:18:38 +1000 Subject: [PATCH 039/371] pastel dark theme + custom author definitions --- repo/bracketed-links/mod.js | 2 +- repo/core/css/dark.css | 39 ++++++++++ repo/core/css/light.css | 39 ++++++++++ repo/core/css/localised.css | 4 + repo/core/css/menu.css | 4 +- repo/core/css/variables.css | 10 ++- repo/core/css/variables.json | 4 + repo/core/menu.js | 18 +++-- repo/custom-inserts/mod.js | 2 +- repo/dark+/mod.js | 2 +- repo/dark+/styles.css | 4 + repo/focus-mode/mod.js | 2 +- repo/gameish/mod.js | 11 ++- repo/gameish/styles.css | 10 ++- repo/neutral/mod.js | 2 +- repo/neutral/styles.css | 8 +- repo/pastel-dark/mod.js | 22 ++++++ repo/pastel-dark/styles.css | 138 +++++++++++++++++++++++++++++++++++ 18 files changed, 299 insertions(+), 22 deletions(-) create mode 100644 repo/pastel-dark/mod.js create mode 100644 repo/pastel-dark/styles.css diff --git a/repo/bracketed-links/mod.js b/repo/bracketed-links/mod.js index a92597d..551e979 100644 --- a/repo/bracketed-links/mod.js +++ b/repo/bracketed-links/mod.js @@ -11,6 +11,6 @@ module.exports = { tags: ['extension'], name: 'bracketed links', desc: 'render links surrounded with [[brackets]] instead of __underlined__.', - version: '0.0.1', + version: '0.1.0', author: 'arecsu', }; diff --git a/repo/core/css/dark.css b/repo/core/css/dark.css index 5dc1df7..edea597 100644 --- a/repo/core/css/dark.css +++ b/repo/core/css/dark.css @@ -170,6 +170,7 @@ .notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], .notion-dark-theme [style*='background:rgb(69,75,78)'] { background: var(--theme_dark--bg_gray) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(69, 75, 78)'] { background: var(--theme_dark--line_gray) !important; @@ -180,6 +181,7 @@ .notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], .notion-dark-theme [style*='background:rgb(67,64,64)'] { background: var(--theme_dark--bg_brown) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(67, 64, 64)'] { background: var(--theme_dark--line_brown) !important; @@ -190,6 +192,7 @@ .notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], .notion-dark-theme [style*='background:rgb(89,74,58)'] { background: var(--theme_dark--bg_orange) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(89, 74, 58)'] { background: var(--theme_dark--line_orange) !important; @@ -200,6 +203,7 @@ .notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], .notion-dark-theme [style*='background:rgb(89,86,59)'] { background: var(--theme_dark--bg_yellow) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(89, 86, 59)'] { background: var(--theme_dark--line_yellow) !important; @@ -210,6 +214,7 @@ .notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], .notion-dark-theme [style*='background:rgb(53,76,75)'] { background: var(--theme_dark--bg_green) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(53, 76, 75)'] { background: var(--theme_dark--line_green) !important; @@ -220,6 +225,7 @@ .notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], .notion-dark-theme [style*='background:rgb(54,73,84)'] { background: var(--theme_dark--bg_blue) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(54, 73, 84)'] { background: var(--theme_dark--line_blue) !important; @@ -230,6 +236,7 @@ .notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], .notion-dark-theme [style*='background:rgb(68,63,87)'] { background: var(--theme_dark--bg_purple) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(68, 63, 87)'] { background: var(--theme_dark--line_purple) !important; @@ -240,6 +247,7 @@ .notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], .notion-dark-theme [style*='background:rgb(83,59,76)'] { background: var(--theme_dark--bg_pink) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(83, 59, 76)'] { background: var(--theme_dark--line_pink) !important; @@ -250,11 +258,42 @@ .notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], .notion-dark-theme [style*='background:rgb(89,65,65)'] { background: var(--theme_dark--bg_red) !important; + color: var(--theme_dark--bg_text) !important; } .notion-dark-theme [style*='background: rgb(89, 65, 65)'] { background: var(--theme_dark--line_red) !important; } +.notion-dark-theme + [style*='background: rgb(69, 75, 78)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(67, 64, 64)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(89, 74, 58)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(89, 86, 59)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(53, 76, 75)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(54, 73, 84)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(68, 63, 87)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(83, 59, 76)'] + [style*='color: rgba(255, 255, 255, 0.9)'], +.notion-dark-theme + [style*='background: rgb(89, 65, 65)'] + [style*='color: rgba(255, 255, 255, 0.9)'] { + color: var(--theme_dark--line_text) !important; +} + /* code */ .notion-dark-theme [style*='color:#EB5757'] { diff --git a/repo/core/css/light.css b/repo/core/css/light.css index 4cc43ea..b72ab69 100644 --- a/repo/core/css/light.css +++ b/repo/core/css/light.css @@ -178,6 +178,7 @@ .notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], .notion-light-theme [style*='background:rgb(235,236,237)'] { background: var(--theme_light--bg_gray) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(235, 236, 237)'] { background: var(--theme_light--line_gray) !important; @@ -188,6 +189,7 @@ .notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], .notion-light-theme [style*='background:rgb(233,229,227)'] { background: var(--theme_light--bg_brown) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(233, 229, 227)'] { background: var(--theme_light--line_brown) !important; @@ -198,6 +200,7 @@ .notion-light-theme [style*='background: rgba(245, 93, 0, 0.2)'], .notion-light-theme [style*='background:rgb(250,235,221)'] { background: var(--theme_light--bg_orange) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(250, 235, 221)'] { background: var(--theme_light--line_orange) !important; @@ -208,6 +211,7 @@ .notion-light-theme [style*='background: rgba(233, 168, 0, 0.2)'], .notion-light-theme [style*='background:rgb(251,243,219)'] { background: var(--theme_light--bg_yellow) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(251, 243, 219)'] { background: var(--theme_light--line_yellow) !important; @@ -218,6 +222,7 @@ .notion-light-theme [style*='background: rgba(0, 135, 107, 0.2)'], .notion-light-theme [style*='background:rgb(221,237,234)'] { background: var(--theme_light--bg_green) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(221, 237, 234)'] { background: var(--theme_light--line_green) !important; @@ -228,6 +233,7 @@ .notion-light-theme [style*='background: rgba(0, 120, 223, 0.2)'], .notion-light-theme [style*='background:rgb(221,235,241)'] { background: var(--theme_light--bg_blue) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(221, 235, 241)'] { background: var(--theme_light--line_blue) !important; @@ -238,6 +244,7 @@ .notion-light-theme [style*='background: rgba(103, 36, 222, 0.2)'], .notion-light-theme [style*='background:rgb(234,228,242)'] { background: var(--theme_light--bg_purple) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(234, 228, 242)'] { background: var(--theme_light--line_purple) !important; @@ -248,6 +255,7 @@ .notion-light-theme [style*='background: rgba(221, 0, 129, 0.2)'], .notion-light-theme [style*='background:rgb(244,223,235)'] { background: var(--theme_light--bg_pink) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(244, 223, 235)'] { background: var(--theme_light--line_pink) !important; @@ -258,11 +266,42 @@ .notion-light-theme [style*='background: rgba(255, 0, 26, 0.2)'], .notion-light-theme [style*='background:rgb(251,228,228)'] { background: var(--theme_light--bg_red) !important; + color: var(--theme_light--bg_text) !important; } .notion-light-theme [style*='background: rgb(251, 228, 228)'] { background: var(--theme_light--line_red) !important; } +.notion-light-theme + [style*='background: rgb(235, 236, 237)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(233, 229, 227)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(250, 235, 221)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(251, 243, 219)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(221, 237, 234)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(221, 235, 241)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(234, 228, 242)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(244, 223, 235)'] + [style*='color: rgb(55, 53, 47);'], +.notion-light-theme + [style*='background: rgb(251, 228, 228)'] + [style*='color: rgb(55, 53, 47);'] { + color: var(--theme_light--line_text) !important; +} + /* code */ .notion-light-theme [style*='color:#EB5757'] { diff --git a/repo/core/css/localised.css b/repo/core/css/localised.css index 16709b9..160603e 100644 --- a/repo/core/css/localised.css +++ b/repo/core/css/localised.css @@ -66,6 +66,7 @@ --theme--text_purple: var(--theme_dark--text_purple); --theme--text_pink: var(--theme_dark--text_pink); --theme--text_red: var(--theme_dark--text_red); + --theme--bg_text: var(--theme_dark--bg_text); --theme--bg_gray: var(--theme_dark--bg_gray); --theme--bg_brown: var(--theme_dark--bg_brown); --theme--bg_orange: var(--theme_dark--bg_orange); @@ -75,6 +76,7 @@ --theme--bg_purple: var(--theme_dark--bg_purple); --theme--bg_pink: var(--theme_dark--bg_pink); --theme--bg_red: var(--theme_dark--bg_red); + --theme--line_text: var(--theme_dark--line_text); --theme--line_gray: var(--theme_dark--line_gray); --theme--line_brown: var(--theme_dark--line_brown); --theme--line_orange: var(--theme_dark--line_orange); @@ -164,6 +166,7 @@ --theme--text_purple: var(--theme_light--text_purple); --theme--text_pink: var(--theme_light--text_pink); --theme--text_red: var(--theme_light--text_red); + --theme--bg_text: var(--theme_light--bg_text); --theme--bg_gray: var(--theme_light--bg_gray); --theme--bg_brown: var(--theme_light--bg_brown); --theme--bg_orange: var(--theme_light--bg_orange); @@ -173,6 +176,7 @@ --theme--bg_purple: var(--theme_light--bg_purple); --theme--bg_pink: var(--theme_light--bg_pink); --theme--bg_red: var(--theme_light--bg_red); + --theme--line_text: var(--theme_light--line_text); --theme--line_gray: var(--theme_light--line_gray); --theme--line_brown: var(--theme_light--line_brown); --theme--line_orange: var(--theme_light--line_orange); diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 7583cf8..bcd6713 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -133,13 +133,13 @@ s { font-weight: bold; font-size: 1.2em; padding-right: 0.5rem; - color: var(--theme--text_ui_info); + color: var(--theme--bg_text); } #alerts [role='alert'] p { font-size: 1rem; margin: auto 0; padding-left: 0.5em; - color: var(--theme--text_ui); + color: var(--theme--bg_text); } #alerts .error { diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index f21f4a9..7854438 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -79,6 +79,8 @@ --theme_dark--text_purple: rgb(154, 109, 215); --theme_dark--text_pink: rgb(226, 85, 161); --theme_dark--text_red: rgb(255, 115, 105); + + --theme_dark--bg_text: var(--theme_dark--text); --theme_dark--bg_gray: rgba(151, 154, 155, 0.5); --theme_dark--bg_brown: rgba(147, 114, 100, 0.5); --theme_dark--bg_orange: rgba(255, 163, 68, 0.5); @@ -88,6 +90,8 @@ --theme_dark--bg_purple: rgba(154, 109, 215, 0.5); --theme_dark--bg_pink: rgba(226, 85, 161, 0.5); --theme_dark--bg_red: rgba(255, 115, 105, 0.5); + + --theme_dark--line_text: var(--theme_dark--text); --theme_dark--line_gray: rgb(69, 75, 78); --theme_dark--line_brown: rgb(67, 64, 64); --theme_dark--line_orange: rgb(89, 74, 58); @@ -188,6 +192,8 @@ --theme_light--text_purple: rgb(105, 64, 165); --theme_light--text_pink: rgb(173, 26, 114); --theme_light--text_red: rgb(224, 62, 62); + + --theme_light--bg_text: var(--theme_light--text); --theme_light--bg_gray: rgb(235, 236, 237); --theme_light--bg_brown: rgb(233, 229, 227); --theme_light--bg_orange: rgb(250, 235, 221); @@ -197,13 +203,15 @@ --theme_light--bg_purple: rgb(234, 228, 242); --theme_light--bg_pink: rgb(244, 223, 235); --theme_light--bg_red: rgb(251, 228, 228); + + --theme_light--line_text: var(--theme_light--text); --theme_light--line_gray: rgb(235, 236, 237); --theme_light--line_brown: rgb(233, 229, 227); --theme_light--line_orange: rgb(250, 235, 221); --theme_light--line_yellow: rgb(251, 243, 219); --theme_light--line_green: rgb(221, 237, 234); --theme_light--line_blue: rgb(221, 235, 241); - --theme_light--line_purple: rgb(105, 64, 165); + --theme_light--line_purple: rgb(234, 228, 242); --theme_light--line_pink: rgb(244, 223, 235); --theme_light--line_red: rgb(251, 228, 228); diff --git a/repo/core/css/variables.json b/repo/core/css/variables.json index 19e7fd4..da593b8 100644 --- a/repo/core/css/variables.json +++ b/repo/core/css/variables.json @@ -54,6 +54,7 @@ "--theme_dark--text_purple", "--theme_dark--text_pink", "--theme_dark--text_red", + "--theme_dark--bg_text", "--theme_dark--bg_gray", "--theme_dark--bg_brown", "--theme_dark--bg_orange", @@ -63,6 +64,7 @@ "--theme_dark--bg_purple", "--theme_dark--bg_pink", "--theme_dark--bg_red", + "--theme_dark--line_text", "--theme_dark--line_gray", "--theme_dark--line_brown", "--theme_dark--line_orange", @@ -145,6 +147,7 @@ "--theme_light--text_purple", "--theme_light--text_pink", "--theme_light--text_red", + "--theme_light--bg_text", "--theme_light--bg_gray", "--theme_light--bg_brown", "--theme_light--bg_orange", @@ -154,6 +157,7 @@ "--theme_light--bg_purple", "--theme_light--bg_pink", "--theme_light--bg_red", + "--theme_light--line_text", "--theme_light--line_gray", "--theme_light--line_brown", "--theme_light--line_orange", diff --git a/repo/core/menu.js b/repo/core/menu.js index 542fc11..4f0f3e1 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -373,7 +373,15 @@ window['__start'] = async () => { ? 1 : a.name.localeCompare(b.name) )) { - const menuStore = store('mods', { [mod.id]: { enabled: false } }); + const menuStore = store('mods', { [mod.id]: { enabled: false } }), + author = + typeof mod.author === 'object' + ? mod.author + : { + name: mod.author, + link: `https://github.com/${mod.author}`, + avatar: `https://github.com/${mod.author}.png`, + }; mod.elem = createElement(`
${markdown(mod.desc)}

- - - ${mod.author} + + + ${author.name} v${mod.version}

diff --git a/repo/custom-inserts/mod.js b/repo/custom-inserts/mod.js index 89a6b17..0879d36 100644 --- a/repo/custom-inserts/mod.js +++ b/repo/custom-inserts/mod.js @@ -11,7 +11,7 @@ module.exports = { tags: ['extension'], name: 'custom inserts', desc: 'link files for small client-side tweaks.', - version: '0.0.2', + version: '0.1.1', author: 'dragonwocky', options: [ { diff --git a/repo/dark+/mod.js b/repo/dark+/mod.js index 56d4d99..c0bac84 100644 --- a/repo/dark+/mod.js +++ b/repo/dark+/mod.js @@ -11,7 +11,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'dark+', desc: 'a vivid-colour near-black theme.', - version: '0.1.0', + version: '0.1.3', author: 'dragonwocky', options: [ { diff --git a/repo/dark+/styles.css b/repo/dark+/styles.css index 2628758..3bc37dc 100644 --- a/repo/dark+/styles.css +++ b/repo/dark+/styles.css @@ -72,6 +72,8 @@ --theme_dark--text_purple: rgb(154, 109, 215); --theme_dark--text_pink: rgb(226, 85, 161); --theme_dark--text_red: rgb(218, 47, 35); + + /* --theme_dark--bg_text: var(--theme_dark--text); */ --theme_dark--bg_gray: rgba(126, 128, 129, 0.5); --theme_dark--bg_brown: #50331f; --theme_dark--bg_orange: rgba(255, 155, 0, 0.58); @@ -81,6 +83,8 @@ --theme_dark--bg_purple: rgba(91, 49, 148, 0.74); --theme_dark--bg_pink: rgba(243, 61, 159, 0.5); --theme_dark--bg_red: rgb(122, 20, 20); + + /* --theme_dark--line_text: var(--theme_dark--text); */ --theme_dark--line_gray: rgba(126, 128, 129, 0.301); --theme_dark--line_brown: #50331fad; --theme_dark--line_orange: rgba(255, 153, 0, 0.315); diff --git a/repo/focus-mode/mod.js b/repo/focus-mode/mod.js index d5eee7f..3f61241 100644 --- a/repo/focus-mode/mod.js +++ b/repo/focus-mode/mod.js @@ -13,6 +13,6 @@ module.exports = { name: 'focus mode', desc: 'hide the titlebar/menubar if the sidebar is closed (will be shown on hover).', - version: '0.0.1', + version: '0.1.0', author: 'arecsu', }; diff --git a/repo/gameish/mod.js b/repo/gameish/mod.js index 1289918..7fac8f9 100644 --- a/repo/gameish/mod.js +++ b/repo/gameish/mod.js @@ -1,7 +1,7 @@ /* * gameish * (c) 2020 dragonwocky (https://dragonwocky.me/) - * (c) 2020 alizarin + * (c) 2020 u/LVL100ShrekCultist * under the MIT license */ @@ -12,6 +12,11 @@ module.exports = { tags: ['theme', 'dark'], name: 'gameish', desc: 'a purple, "gamer-styled" theme with a blocky-font.', - version: '0.0.3', - author: 'alizarin', + version: '0.1.1', + author: { + name: 'LVL100ShrekCultist', + link: 'https://www.reddit.com/user/LVL100ShrekCultist/', + avatar: + 'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg', + }, }; diff --git a/repo/gameish/styles.css b/repo/gameish/styles.css index 2257aeb..08e4274 100644 --- a/repo/gameish/styles.css +++ b/repo/gameish/styles.css @@ -1,7 +1,7 @@ /* * gameish * (c) 2020 dragonwocky (https://dragonwocky.me/) - * (c) 2020 alizarin + * (c) 2020 u/LVL100ShrekCultist * under the MIT license */ @@ -78,7 +78,9 @@ --theme_dark--text_purple: #d43cc7; /* --theme_dark--text_pink: rgb(226, 85, 161); */ --theme_dark--text_red: #d93939; - /* --theme_dark--bg_gray: rgba(151, 154, 155, 0.5); + + /* --theme_dark--bg_text: var(--theme_dark--text); + --theme_dark--bg_gray: rgba(151, 154, 155, 0.5); --theme_dark--bg_brown: rgba(147, 114, 100, 0.5); --theme_dark--bg_orange: rgba(255, 163, 68, 0.5); --theme_dark--bg_yellow: rgba(255, 220, 73, 0.5); @@ -87,7 +89,9 @@ --theme_dark--bg_purple: rgba(154, 109, 215, 0.5); --theme_dark--bg_pink: rgba(226, 85, 161, 0.5); */ --theme_dark--bg_red: rgba(216, 57, 46, 0.5); - /* --theme_dark--line_gray: rgb(69, 75, 78); */ + + /* --theme_dark--line_text: var(--theme_dark--text); + --theme_dark--line_gray: rgb(69, 75, 78); */ --theme_dark--line_brown: rgb(78, 57, 48); --theme_dark--line_orange: rgb(136, 80, 48); --theme_dark--line_yellow: #fbe2287c; diff --git a/repo/neutral/mod.js b/repo/neutral/mod.js index 500d734..ba1dfc2 100644 --- a/repo/neutral/mod.js +++ b/repo/neutral/mod.js @@ -12,6 +12,6 @@ module.exports = { tags: ['theme', 'dark'], name: 'neutral', desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', - version: '0.0.2', + version: '0.1.0', author: 'arecsu', }; diff --git a/repo/neutral/styles.css b/repo/neutral/styles.css index 78fce15..d57f3c8 100644 --- a/repo/neutral/styles.css +++ b/repo/neutral/styles.css @@ -55,8 +55,8 @@ --theme_dark--selected: #52525244; --theme_dark--primary: #404040; - --theme_dark--primary_hover: #f3f3f3; - --theme_dark--primary_click: #f3f3f3; + --theme_dark--primary_hover: #6d6d6d; + --theme_dark--primary_click: #cacaca; --theme_dark--primary_indicator: #6d6d6d; /* --theme_dark--option-color: white; @@ -82,6 +82,8 @@ --theme_dark--text_purple: #ab82bb; --theme_dark--text_pink: #d285aa; --theme_dark--text_red: #ce535f; + + /* --theme_dark--bg_text: var(--theme_dark--text); */ --theme_dark--bg_gray: #585858; --theme_dark--bg_brown: #333333; --theme_dark--bg_orange: #9a5a3f; @@ -91,6 +93,8 @@ --theme_dark--bg_purple: #775186; --theme_dark--bg_pink: #8e4b63; --theme_dark--bg_red: #8c3d3d; + + /* --theme_dark--line_text: var(--theme_dark--text); */ --theme_dark--line_gray: #585858; --theme_dark--line_brown: #333333; --theme_dark--line_orange: #9a5a3f; diff --git a/repo/pastel-dark/mod.js b/repo/pastel-dark/mod.js new file mode 100644 index 0000000..6ed006d --- /dev/null +++ b/repo/pastel-dark/mod.js @@ -0,0 +1,22 @@ +/* + * pastel dark + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 u/zenith_illinois + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: '033bff54-50ba-4cec-bdc0-b2ca7e307085', + tags: ['theme', 'dark'], + name: 'pastel dark', + desc: 'a true dark theme with a hint of pastel.', + version: '0.1.0', + author: { + name: 'zenith_illinois', + link: 'https://www.reddit.com/user/zenith_illinois/', + avatar: + 'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128', + }, +}; diff --git a/repo/pastel-dark/styles.css b/repo/pastel-dark/styles.css new file mode 100644 index 0000000..a37d7e9 --- /dev/null +++ b/repo/pastel-dark/styles.css @@ -0,0 +1,138 @@ +/* + * pastel dark + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 u/zenith_illinois + * under the MIT license + */ + +@import url('https://rsms.me/inter/inter.css'); + +:root { + --theme_dark--main: #0b0b0b; + --theme_dark--sidebar: #0f0f0f; + --theme_dark--overlay: rgba(15, 15, 15, 0.6); + --theme_dark--dragarea: #0d0d0d; + /* --theme_dark--preview-width: 977px; + --theme_dark--preview-padding: 8em; + --theme_dark--preview_banner-height: 20vh; + --theme_dark--page_banner-height: 30vh; */ + + --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, + 'Segoe UI Emoji', 'Segoe UI Symbol'; + /* --theme_dark--font_serif: Lyon-Text, Georgia, YuMincho, 'Yu Mincho', + 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Songti TC', 'Songti SC', + SimSun, 'Nanum Myeongjo', NanumMyeongjo, Batang, serif; + --theme_dark--font_mono: iawriter-mono, Nitti, Menlo, Courier, monospace; + --theme_dark--font_code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, + Courier, monospace; */ + + /* --theme_dark--font_title-size: 40px; + --theme_dark--font_heading1-size: 30px; + --theme_dark--font_heading2-size: 24px; + --theme_dark--font_heading3-size: 20px; + --theme_dark--font_label-size: 14px; + --theme_dark--font_body-size: 16px; + --theme_dark--font_code-size: 12.75px; + --theme_dark--font_sidebar-size: 14px; */ + + --theme_dark--scrollbar: #141414; + /* --theme_dark--scrollbar-border: transparent; */ + --theme_dark--scrollbar_hover: #1b1b1b; + + --theme_dark--card: #0f0f0f; + --theme_dark--gallery: rgba(8, 8, 8, 0.05); + --theme_dark--table-border: rgba(255, 255, 255, 0.1); + --theme_dark--interactive_hover: #1e1e1e5c; + /* --theme_dark--interactive_hover-border: transparent; */ + --theme_dark--button_close: #eb5757; + /* --theme_dark--button_close-fill: white; */ + + --theme_dark--selected: rgba(184, 135, 247, 0.3); + --theme_dark--primary: #b887f7; + --theme_dark--primary_hover: #08d7c2; + --theme_dark--primary_click: #b887f7; + --theme_dark--primary_indicator: #08d7c2; + + /* --theme_dark--option-color: white; + --theme_dark--option-background: transparent; + --theme_dark--option_active-color: white; */ + --theme_dark--option_active-background: var(--theme_dark--primary); + /* --theme_dark--option_hover-color: white; */ + --theme_dark--option_hover-background: var(--theme_dark--primary_hover); + + --theme_dark--danger_text: #eb5757; + --theme_dark--danger_border: rgba(235, 87, 87, 0.5); + + --theme_dark--text: #ffffff; + --theme_dark--text_ui: #909090; + --theme_dark--text_ui_info: #464646; + + --theme_dark--text_gray: #b1aeab; + --theme_dark--text_brown: #d8b6a6; + --theme_dark--text_orange: #fde3c0; + --theme_dark--text_yellow: #fcde93; + --theme_dark--text_green: #b3f5c8; + --theme_dark--text_blue: #bfe0fd; + --theme_dark--text_purple: #dac7fa; + --theme_dark--text_pink: #f7b8dc; + --theme_dark--text_red: #f8acb4; + + --theme_dark--bg_text: rgb(55, 53, 47); + --theme_dark--bg_gray: #b1aeab; + --theme_dark--bg_brown: #d8b6a6; + --theme_dark--bg_orange: #fde3c0; + --theme_dark--bg_yellow: #fcde93; + --theme_dark--bg_green: #b3f5c8; + --theme_dark--bg_blue: #bfe0fd; + --theme_dark--bg_purple: #dac7fa; + --theme_dark--bg_pink: #f7b8dc; + --theme_dark--bg_red: #f8acb4; + + --theme_dark--line_text: rgb(55, 53, 47); + --theme_dark--line_gray: #c2c1c089; + --theme_dark--line_brown: #dacec992; + --theme_dark--line_orange: #fff0dc9f; + --theme_dark--line_yellow: #ffe6a6ad; + --theme_dark--line_green: #c8fdd9a3; + --theme_dark--line_blue: #d1e9ffa3; + --theme_dark--line_purple: #e3d3ffa8; + --theme_dark--line_pink: #fdcce8b1; + --theme_dark--line_red: #ffc8ce9e; + + --theme_dark--code_inline-text: #b3f5c8; + --theme_dark--code_inline-background: rgb(8, 8, 8); + --theme_dark--code_text: var(--theme_dark--text); + --theme_dark--code-background: #0f0f0f; + --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_gray); + --theme_dark--code_punctuation: var(--theme_dark--text_gray); + --theme_dark--code_doctype: var(--theme_dark--text_gray); + --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); +} + +img[src*='/images/onboarding/use-case-note.png'], +img[src*='/images/onboarding/team-features-illustration.png'] { + filter: invert(1) !important; +} +img[src*='/images/onboarding/checked.svg'] { + filter: hue-rotate(45deg) !important; +} + +img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover, +img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover { + filter: brightness(1.2); +} + +[style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] { + filter: hue-rotate(170deg) !important; +} From 3aa5cdef183f1dba90e029d133e1dd69a86fd8d8 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 14 Aug 2020 23:58:21 +1000 Subject: [PATCH 040/371] emoji sets extension --- repo/emoji-sets/mod.js | 85 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 repo/emoji-sets/mod.js diff --git a/repo/emoji-sets/mod.js b/repo/emoji-sets/mod.js new file mode 100644 index 0000000..120b563 --- /dev/null +++ b/repo/emoji-sets/mod.js @@ -0,0 +1,85 @@ +/* + * emoji sets + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +let tweaked = false; + +module.exports = { + id: 'a2401ee1-93ba-4b8c-9781-7f570bf5d71e', + tags: ['extension'], + name: 'emoji sets', + desc: 'pick from a variety of emoji styles to use.', + version: '0.1.3', + author: 'dragonwocky', + options: [ + { + key: 'style', + label: '', + type: 'select', + value: [ + 'twitter', + 'apple', + 'google', + 'microsoft', + 'samsung', + 'whatsapp', + 'facebook', + 'joypixels', + 'openmoji', + 'emojidex', + 'messenger', + 'lg', + 'htc', + 'mozilla', + ], + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + const observer = new MutationObserver((list, observer) => { + document + .querySelectorAll( + '[src*="notion-emojis.s3-us-west-2.amazonaws.com"]:not(.notion-emoji)' + ) + .forEach((el) => (el.outerHTML = '')); + if ( + (store().style === 'microsoft' && process.platform === 'win32') || + (store().style === 'apple' && process.platform === 'darwin') + ) { + document + .querySelectorAll('.notion-record-icon .notion-emoji') + .forEach((el) => { + el.outerHTML = ` + ${el.getAttribute('alt')} + `; + }); + document.querySelectorAll('.notion-emoji').forEach((el) => { + el.outerHTML = `${el.getAttribute('alt')}`; + }); + tweaked = true; + } else if (store().style !== 'twitter' || tweaked) { + document.querySelectorAll('.notion-emoji').forEach((el) => { + el.style.setProperty( + 'background', + `url(https://emojicdn.elk.sh/${el.getAttribute('alt')}?style=${ + store().style + })` + ); + el.style.setProperty('background-size', 'contain'); + }); + tweaked = true; + } + }); + observer.observe(document, { + childList: true, + subtree: true, + }); + }); + }, + }, +}; From cf0d5162343d3279bb234e1dd8a8deddf9e95183 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 15 Aug 2020 21:58:39 +1000 Subject: [PATCH 041/371] night shift extension --- repo/core/client.js | 24 +-- repo/core/css/dark.css | 347 ++++++++++++++++----------------- repo/core/css/light.css | 363 ++++++++++++++++++----------------- repo/core/css/menu.css | 1 - repo/core/css/titlebar.css | 2 +- repo/core/css/variables.css | 2 +- repo/core/css/variables.json | 279 +++++++++------------------ repo/core/styles.css | 2 +- repo/emoji-sets/mod.js | 1 + repo/night-shift/mod.js | 41 ++++ 10 files changed, 513 insertions(+), 549 deletions(-) create mode 100644 repo/night-shift/mod.js diff --git a/repo/core/client.js b/repo/core/client.js index b8d92c5..6631d17 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -75,29 +75,31 @@ module.exports = (store, __exports) => { let sidebar_width; function communicationLoop() { const getStyle = (prop) => - getComputedStyle(document.body).getPropertyValue(prop), + getComputedStyle( + document.querySelector('.notion-app-inner') + ).getPropertyValue(prop), mode = JSON.parse(localStorage.theme).mode; // ctrl+f theming notionIpc.sendNotionToIndex('search:set-theme', { 'mode': mode, 'colors': { - 'white': getStyle(`--theme_${mode}--todo_ticked-fill`), - 'blue': getStyle(`--theme_${mode}--primary`), + 'white': getStyle(`--theme--option_active-color`), + 'blue': getStyle(`--theme--option_active-background`), }, 'borderRadius': 3, - 'textColor': getStyle(`--theme_${mode}--text`), - 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), + 'textColor': getStyle(`--theme--text`), + 'popoverBackgroundColor': getStyle(`--theme--card`), 'popoverBoxShadow': `0 0 0 1px ${getStyle( - `--theme_${mode}--overlay` - )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, + `--theme--overlay` + )}, 0 3px 6px ${getStyle(`--theme--overlay`)}`, 'inputBoxShadow': `box-shadow: ${getStyle( - `--theme_${mode}--primary` + `--theme--primary` )} 0px 0px 0px 1px inset, ${getStyle( - `--theme_${mode}--primary_hover` + `--theme--primary_hover` )} 0px 0px 0px 2px !important`, - 'inputBackgroundColor': getStyle(`--theme_${mode}--main`), - 'dividerColor': getStyle(`--theme_${mode}--table-border`), + 'inputBackgroundColor': getStyle(`--theme--main`), + 'dividerColor': getStyle(`--theme--table-border`), 'shadowOpacity': 0.2, }); diff --git a/repo/core/css/dark.css b/repo/core/css/dark.css index edea597..cf0c7a3 100644 --- a/repo/core/css/dark.css +++ b/repo/core/css/dark.css @@ -9,294 +9,295 @@ /** general ui **/ -.notion-dark-theme [style*='background: rgb(55, 60, 63)'], -.notion-dark-theme [style*='background: rgba(69, 75, 78, 0.3)'], -.notion-dark-theme [style*='background: rgb(120, 123, 123)'] { - background: var(--theme_dark--sidebar) !important; +.dark [style*='background: rgb(55, 60, 63)'], +.dark [style*='background: rgba(69, 75, 78, 0.3)'], +.dark [style*='background: rgb(120, 123, 123)'] { + background: var(--theme--sidebar) !important; } .notion-body.dark, -.notion-dark-theme [style*='background: rgb(47, 52, 55)'], -.notion-dark-theme [style*='background-color: rgb(47, 52, 55)'] { - background: var(--theme_dark--main) !important; +.dark [style*='background: rgb(47, 52, 55)'], +.dark [style*='background-color: rgb(47, 52, 55)'] { + background: var(--theme--main) !important; } -.notion-dark-theme +.dark .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], -.notion-dark-theme +.dark .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] img { - height: var(--theme_dark--preview_banner-height) !important; + height: var(--theme--preview_banner-height) !important; } -.notion-dark-theme +.dark [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], -.notion-dark-theme +.dark [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] img { - height: var(--theme_dark--page_banner-height) !important; + height: var(--theme--page_banner-height) !important; } /** databases **/ -.notion-dark-theme [style*='background: rgb(63, 68, 71)'] { - background: var(--theme_dark--card) !important; +.dark [style*='background: rgb(63, 68, 71)'] { + background: var(--theme--card) !important; } -.notion-dark-theme +.dark .notion-page-content .notion-page-block.notion-collection-item [style*='background: rgba(255, 255, 255, 0.05)'] { - background: var(--theme_dark--gallery) !important; + background: var(--theme--gallery) !important; } -.notion-dark-theme [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { - box-shadow: var(--theme_dark--main) -3px 0px 0px !important; +.dark + [style*='box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 2px 4px'] { + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, + rgba(15, 15, 15, 0.1) 0px 2px 4px !important; } -.notion-dark-theme + +.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px'] { + box-shadow: var(--theme--main) -3px 0px 0px !important; +} +.dark [style*='box-shadow: rgb(47, 52, 55) -3px 0px 0px, rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark--main) -3px 0px 0px, - var(--theme_dark--table-border) 0px 1px 0px !important; + box-shadow: var(--theme--main) -3px 0px 0px, + var(--theme--table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-top: 1px solid rgba(255, 255, 255,'] { - border-top: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-top: 1px solid rgba(255, 255, 255,'] { + border-top: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { - box-shadow: var(--theme_dark--table-border) -1px 0px 0px !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) -1px 0px 0px'] { + box-shadow: var(--theme--table-border) -1px 0px 0px !important; } -.notion-dark-theme [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { - border-bottom: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-bottom: 1px solid rgba(255, 255, 255,'] { + border-bottom: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { - box-shadow: var(--theme_dark--table-border) 0px 1px 0px !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px'] { + box-shadow: var(--theme--table-border) 0px 1px 0px !important; } -.notion-dark-theme [style*='border-right: 1px solid rgba(255, 255, 255,'] { - border-right: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-right: 1px solid rgba(255, 255, 255,'] { + border-right: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { - box-shadow: var(--theme_dark--table-border) 0px -1px 0px !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.07) 0px -1px 0px'] { + box-shadow: var(--theme--table-border) 0px -1px 0px !important; } -.notion-dark-theme [style*='border-left: 1px solid rgba(255, 255, 255,'] { - border-left: 1px solid var(--theme_dark--table-border) !important; +.dark [style*='border-left: 1px solid rgba(255, 255, 255,'] { + border-left: 1px solid var(--theme--table-border) !important; } -.notion-dark-theme - [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { - box-shadow: var(--theme_dark--table-border) 0px 1px 0px inset !important; +.dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { + box-shadow: var(--theme--table-border) 0px 1px 0px inset !important; } -.notion-dark-theme [style*='background: rgb(71, 76, 80)'], -.notion-dark-theme [style*='background: rgb(80, 85, 88)'], -.notion-dark-theme [style*='background: rgb(98, 102, 104)'] { - background: var(--theme_dark--interactive_hover) !important; - box-shadow: 0 0 0 0.5px var(--theme_dark--interactive_hover-border); +.dark [style*='background: rgb(71, 76, 80)'], +.dark [style*='background: rgb(80, 85, 88)'], +.dark [style*='background: rgb(98, 102, 104)'] { + background: var(--theme--interactive_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border); } /** ui colours **/ -.notion-dark-theme ::selection, -.notion-dark-theme +.dark ::selection, +.dark [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), -.notion-dark-theme +.dark [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { - background: var(--theme_dark--selected) !important; + background: var(--theme--selected) !important; } -.notion-dark-theme [style*='color: rgb(46, 170, 220)'] { - color: var(--theme_dark--primary) !important; +.dark [style*='color: rgb(46, 170, 220)'] { + color: var(--theme--primary) !important; } -.notion-dark-theme [style*='fill: rgb(46, 170, 220)'] { - fill: var(--theme_dark--primary) !important; +.dark [style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme--primary) !important; } -.notion-dark-theme [style*='background: rgb(46, 170, 220)'], -.notion-dark-theme [style*='background-color: rgb(46, 170, 220)'] { - background: var(--theme_dark--primary) !important; +.dark [style*='background: rgb(46, 170, 220)'], +.dark [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme--primary) !important; } -.notion-dark-theme - [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { - box-shadow: var(--theme_dark--primary) 0px 0px 0px 2px inset !important; +.dark [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { + box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important; } -.notion-dark-theme .notion-focusable:focus-within { - box-shadow: var(--theme_dark--primary) 0px 0px 0px 1px inset, - var(--theme_dark--primary_hover) 0px 0px 0px 2px !important; +.dark .notion-focusable:focus-within { + box-shadow: var(--theme--primary) 0px 0px 0px 1px inset, + var(--theme--primary_hover) 0px 0px 0px 2px !important; } -.notion-dark-theme [style*='background: rgb(6, 156, 205)'] { - background: var(--theme_dark--primary_hover) !important; +.dark [style*='background: rgb(6, 156, 205)'] { + background: var(--theme--primary_hover) !important; } -.notion-dark-theme [style*='background: rgb(0, 141, 190)'] { - background: var(--theme_dark--primary_click) !important; +.dark [style*='background: rgb(0, 141, 190)'] { + background: var(--theme--primary_click) !important; } -.notion-dark-theme +.dark .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, -.notion-dark-theme [style*='background: rgb(235, 87, 87)'] { - background: var(--theme_dark--primary_indicator) !important; +.dark [style*='background: rgb(235, 87, 87)'] { + background: var(--theme--primary_indicator) !important; } -.notion-dark-theme +.dark [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { - color: var(--theme_dark--danger_text) !important; - border: 1px solid var(--theme_dark--danger_border) !important; + color: var(--theme--danger_text) !important; + border: 1px solid var(--theme--danger_border) !important; } /* content colours */ -.notion-dark-theme, -.notion-dark-theme .notion-page-content [style*='color: inherit;'], -.notion-dark-theme .notion-frame .notion-page-block, -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.7)'] { - color: var(--theme_dark--text) !important; +.dark, +.dark .notion-page-content [style*='color: inherit;'], +.dark .notion-frame .notion-page-block, +.dark [style*='color: rgba(255, 255, 255, 0.9)'], +.dark [style*='color: rgba(255, 255, 255, 0.7)'] { + color: var(--theme--text) !important; } -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.6)'] { - color: var(--theme_dark--text_ui) !important; +.dark [style*='color: rgba(255, 255, 255, 0.6)'] { + color: var(--theme--text_ui) !important; } -.notion-dark-theme [style*='color: rgba(255, 255, 255, 0.4)'] { - color: var(--theme_dark--text_ui_info) !important; +.dark [style*='color: rgba(255, 255, 255, 0.4)'] { + color: var(--theme--text_ui_info) !important; } -.notion-dark-theme [style*='fill: rgb(202, 204, 206)'] { - fill: var(--theme_dark--text) !important; +.dark [style*='fill: rgb(202, 204, 206)'] { + fill: var(--theme--text) !important; } -.notion-dark-theme [style*='fill: rgba(202, 204, 206,'] { - fill: var(--theme_dark--text_ui) !important; +.dark [style*='fill: rgba(202, 204, 206,'] { + fill: var(--theme--text_ui) !important; } -.notion-dark-theme [style*='color:rgba(151,154,155,0.95)'] { - color: var(--theme_dark--text_gray) !important; +.dark [style*='color:rgba(151,154,155,0.95)'] { + color: var(--theme--text_gray) !important; } -.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5)'], -.notion-dark-theme [style*='background:rgb(69,75,78)'] { - background: var(--theme_dark--bg_gray) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(151, 154, 155, 0.5)'], +.dark [style*='background:rgb(69,75,78)'] { + background: var(--theme--bg_gray) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(69, 75, 78)'] { - background: var(--theme_dark--line_gray) !important; +.dark [style*='background: rgb(69, 75, 78)'] { + background: var(--theme--line_gray) !important; } -.notion-dark-theme [style*='color:rgb(147,114,100)'] { - color: var(--theme_dark--text_brown) !important; +.dark [style*='color:rgb(147,114,100)'] { + color: var(--theme--text_brown) !important; } -.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], -.notion-dark-theme [style*='background:rgb(67,64,64)'] { - background: var(--theme_dark--bg_brown) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(147, 114, 100, 0.5)'], +.dark [style*='background:rgb(67,64,64)'] { + background: var(--theme--bg_brown) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(67, 64, 64)'] { - background: var(--theme_dark--line_brown) !important; +.dark [style*='background: rgb(67, 64, 64)'] { + background: var(--theme--line_brown) !important; } -.notion-dark-theme [style*='color:rgb(255,163,68)'] { - color: var(--theme_dark--text_orange) !important; +.dark [style*='color:rgb(255,163,68)'] { + color: var(--theme--text_orange) !important; } -.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], -.notion-dark-theme [style*='background:rgb(89,74,58)'] { - background: var(--theme_dark--bg_orange) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(255, 163, 68, 0.5)'], +.dark [style*='background:rgb(89,74,58)'] { + background: var(--theme--bg_orange) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(89, 74, 58)'] { - background: var(--theme_dark--line_orange) !important; +.dark [style*='background: rgb(89, 74, 58)'] { + background: var(--theme--line_orange) !important; } -.notion-dark-theme [style*='color:rgb(255,220,73)'] { - color: var(--theme_dark--text_yellow) !important; +.dark [style*='color:rgb(255,220,73)'] { + color: var(--theme--text_yellow) !important; } -.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], -.notion-dark-theme [style*='background:rgb(89,86,59)'] { - background: var(--theme_dark--bg_yellow) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(255, 220, 73, 0.5)'], +.dark [style*='background:rgb(89,86,59)'] { + background: var(--theme--bg_yellow) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(89, 86, 59)'] { - background: var(--theme_dark--line_yellow) !important; +.dark [style*='background: rgb(89, 86, 59)'] { + background: var(--theme--line_yellow) !important; } -.notion-dark-theme [style*='color:rgb(77,171,154)'] { - color: var(--theme_dark--text_green) !important; +.dark [style*='color:rgb(77,171,154)'] { + color: var(--theme--text_green) !important; } -.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], -.notion-dark-theme [style*='background:rgb(53,76,75)'] { - background: var(--theme_dark--bg_green) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(77, 171, 154, 0.5)'], +.dark [style*='background:rgb(53,76,75)'] { + background: var(--theme--bg_green) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(53, 76, 75)'] { - background: var(--theme_dark--line_green) !important; +.dark [style*='background: rgb(53, 76, 75)'] { + background: var(--theme--line_green) !important; } -.notion-dark-theme [style*='color:rgb(82,156,202)'] { - color: var(--theme_dark--text_blue) !important; +.dark [style*='color:rgb(82,156,202)'] { + color: var(--theme--text_blue) !important; } -.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], -.notion-dark-theme [style*='background:rgb(54,73,84)'] { - background: var(--theme_dark--bg_blue) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(82, 156, 202, 0.5)'], +.dark [style*='background:rgb(54,73,84)'] { + background: var(--theme--bg_blue) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(54, 73, 84)'] { - background: var(--theme_dark--line_blue) !important; +.dark [style*='background: rgb(54, 73, 84)'] { + background: var(--theme--line_blue) !important; } -.notion-dark-theme [style*='color:rgb(154,109,215)'] { - color: var(--theme_dark--text_purple) !important; +.dark [style*='color:rgb(154,109,215)'] { + color: var(--theme--text_purple) !important; } -.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], -.notion-dark-theme [style*='background:rgb(68,63,87)'] { - background: var(--theme_dark--bg_purple) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(154, 109, 215, 0.5)'], +.dark [style*='background:rgb(68,63,87)'] { + background: var(--theme--bg_purple) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(68, 63, 87)'] { - background: var(--theme_dark--line_purple) !important; +.dark [style*='background: rgb(68, 63, 87)'] { + background: var(--theme--line_purple) !important; } -.notion-dark-theme [style*='color:rgb(226,85,161)'] { - color: var(--theme_dark--text_pink) !important; +.dark [style*='color:rgb(226,85,161)'] { + color: var(--theme--text_pink) !important; } -.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], -.notion-dark-theme [style*='background:rgb(83,59,76)'] { - background: var(--theme_dark--bg_pink) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(226, 85, 161, 0.5)'], +.dark [style*='background:rgb(83,59,76)'] { + background: var(--theme--bg_pink) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(83, 59, 76)'] { - background: var(--theme_dark--line_pink) !important; +.dark [style*='background: rgb(83, 59, 76)'] { + background: var(--theme--line_pink) !important; } -.notion-dark-theme [style*='color:rgb(255,115,105)'] { - color: var(--theme_dark--text_red) !important; +.dark [style*='color:rgb(255,115,105)'] { + color: var(--theme--text_red) !important; } -.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5);'], -.notion-dark-theme [style*='background:rgb(89,65,65)'] { - background: var(--theme_dark--bg_red) !important; - color: var(--theme_dark--bg_text) !important; +.dark [style*='background: rgba(255, 115, 105, 0.5);'], +.dark [style*='background:rgb(89,65,65)'] { + background: var(--theme--bg_red) !important; + color: var(--theme--bg_text) !important; } -.notion-dark-theme [style*='background: rgb(89, 65, 65)'] { - background: var(--theme_dark--line_red) !important; +.dark [style*='background: rgb(89, 65, 65)'] { + background: var(--theme--line_red) !important; } -.notion-dark-theme +.dark [style*='background: rgb(69, 75, 78)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(67, 64, 64)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(89, 74, 58)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(89, 86, 59)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(53, 76, 75)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(54, 73, 84)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(68, 63, 87)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(83, 59, 76)'] [style*='color: rgba(255, 255, 255, 0.9)'], -.notion-dark-theme +.dark [style*='background: rgb(89, 65, 65)'] [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--line_text) !important; + color: var(--theme--line_text) !important; } /* code */ -.notion-dark-theme [style*='color:#EB5757'] { - color: var(--theme_dark--code_inline-text) !important; - background: var(--theme_dark--code_inline-background) !important; +.dark [style*='color:#EB5757'] { + color: var(--theme--code_inline-text) !important; + background: var(--theme--code_inline-background) !important; } diff --git a/repo/core/css/light.css b/repo/core/css/light.css index b72ab69..0fdf6d6 100644 --- a/repo/core/css/light.css +++ b/repo/core/css/light.css @@ -9,302 +9,315 @@ /** general ui **/ -.notion-light-theme [style*='background: rgb(247, 246, 243)'], -.notion-light-theme [style*='background: rgba(235, 236, 237, 0.3)'], -.notion-light-theme [style*='background: rgb(223, 223, 222)'] { - background: var(--theme_light--sidebar) !important; +.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'], +.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'], +.notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] { + background: var(--theme--sidebar) !important; } -.notion-body.light, -.notion-light-theme [style*='background: white'], -.notion-light-theme [style*='background-color: white'], -.notion-light-theme [style*='background: rgba(206, 205, 202, 0.5)'] { - background: var(--theme_light--main) !important; +.notion-body:not(.dark), +.notion-body:not(.dark) [style*='background: white'], +.notion-body:not(.dark) [style*='background-color: white'] { + background: var(--theme--main) !important; } -.notion-light-theme [style*='background: rgba(15, 15, 15, 0.6)'] { - background: var(--theme_light--overlay) !important; +.notion-body:not(.dark) [style*='background: rgba(15, 15, 15, 0.6)'] { + background: var(--theme--overlay) !important; } -.notion-light-theme +.notion-body:not(.dark) .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], -.notion-light-theme +.notion-body:not(.dark) .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'] img { - height: var(--theme_light--preview_banner-height) !important; + height: var(--theme--preview_banner-height) !important; } -.notion-light-theme +.notion-body:not(.dark) [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'], -.notion-light-theme +.notion-body:not(.dark) [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] img { - height: var(--theme_light--page_banner-height) !important; + height: var(--theme--page_banner-height) !important; } /** databases **/ -.notion-light-theme [style*='background: rgb(247, 246, 243)'] { - background: var(--theme_light--card) !important; +.notion-body:not(.dark) + .notion-scroller.horizontal.vertical + .notion-selectable + > a[style*='background: white'], +.notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'] { + background: var(--theme--card) !important; } -.notion-light-theme +.notion-body:not(.dark) .notion-page-content .notion-page-block.notion-collection-item [style*='background: rgba(55, 53, 47, 0.024)'] { - background: var(--theme_light--gallery) !important; + background: var(--theme--gallery) !important; } -.notion-light-theme [style*='box-shadow: white -3px 0px 0px'] { - box-shadow: var(--theme_light--main) -3px 0px 0px !important; +.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px'] { + box-shadow: var(--theme--main) -3px 0px 0px !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='box-shadow: white -3px 0px 0px, rgba(55, 53, 47, 0.16) 0px 1px 0px'] { - box-shadow: var(--theme_light--main) -3px 0px 0px, - var(--theme_light--table-border) 0px 1px 0px !important; + box-shadow: var(--theme--main) -3px 0px 0px, + var(--theme--table-border) 0px 1px 0px !important; } -.notion-light-theme [style*='border-top: 1px solid rgba(55, 53, 47,'] { - border-top: 1px solid var(--theme_light--table-border) !important; +.notion-body:not(.dark) [style*='border-top: 1px solid rgba(55, 53, 47,'] { + border-top: 1px solid var(--theme--table-border) !important; } -.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'] { - box-shadow: var(--theme_light--table-border) -1px 0px 0px !important; +.notion-body:not(.dark) + [style*='box-shadow: rgba(55, 53, 47, 0.09) -1px 0px 0px'], +.notion-body:not(.dark) + [style*='box-shadow: rgba(55, 53, 47, 0.16) -1px 0px 0px'] { + box-shadow: -1px -1px 0 var(--theme--table-border) !important; } -.notion-light-theme [style*='border-bottom: 1px solid rgba(55, 53, 47,'] { - border-bottom: 1px solid var(--theme_light--table-border) !important; +.notion-body:not(.dark) + [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px'] { + box-shadow: 0px 1px 0 var(--theme--table-border) !important; } -.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] { - box-shadow: var(--theme_light--table-border) 0px 1px 0px !important; +.notion-body:not(.dark) [style*='border-bottom: 1px solid rgba(55, 53, 47,'] { + border-bottom: 1px solid var(--theme--table-border) !important; } -.notion-light-theme [style*='border-right: 1px solid rgba(55, 53, 47,'] { - border-right: 1px solid var(--theme_light--table-border) !important; +.notion-body:not(.dark) + [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px 1px 0px'] { + box-shadow: var(--theme--table-border) 0px 1px 0px !important; } -.notion-light-theme [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] { - box-shadow: var(--theme_light--table-border) 0px -1px 0px !important; +.notion-body:not(.dark) [style*='border-right: 1px solid rgba(55, 53, 47,'] { + border-right: 1px solid var(--theme--table-border) !important; } -.notion-light-theme [style*='border-left: 1px solid rgba(55, 53, 47,'] { - border-left: 1px solid var(--theme_light--table-border) !important; +.notion-body:not(.dark) + [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] { + box-shadow: var(--theme--table-border) 0px -1px 0px !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='border-left: 1px solid rgba(55, 53, 47,'] { + border-left: 1px solid var(--theme--table-border) !important; +} +.notion-body:not(.dark) [style*='box-shadow: rgba(55, 53, 47, 0.16) 0px 1px 0px inset'] { - box-shadow: var(--theme_light--table-border) 0px 1px 0px inset !important; + box-shadow: var(--theme--table-border) 0px 1px 0px inset !important; } -.notion-light-theme [style*='background: rgba(55, 53, 47,'], -.notion-light-theme [style*='background: rgb(239, 239, 238)'] { - background: var(--theme_light--interactive_hover) !important; - box-shadow: 0 0 0 0.5px var(--theme_light--interactive_hover-border); +.notion-body:not(.dark) [style*='background: rgba(55, 53, 47,'], +.notion-body:not(.dark) [style*='background: rgb(239, 239, 238)'], +.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)'] { + background: var(--theme--interactive_hover) !important; + box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border); } /** ui colours **/ -.notion-light-theme ::selection, -.notion-light-theme +.notion-body:not(.dark) ::selection, +.notion-body:not(.dark) [style*='background: rgba(46, 170, 220,']:not([style*='background: rgba(46, 170, 220, 0)']), -.notion-light-theme +.notion-body:not(.dark) [style*='background-color: rgba(46, 170, 220,']:not([style*='background-color: rgba(46, 170, 220, 0)']) { - background: var(--theme_light--selected) !important; + background: var(--theme--selected) !important; } -.notion-light-theme [style*='color: rgb(46, 170, 220)'] { - color: var(--theme_light--primary) !important; +.notion-body:not(.dark) [style*='color: rgb(46, 170, 220)'] { + color: var(--theme--primary) !important; } -.notion-light-theme [style*='fill: rgb(46, 170, 220)'] { - fill: var(--theme_light--primary) !important; +.notion-body:not(.dark) [style*='fill: rgb(46, 170, 220)'] { + fill: var(--theme--primary) !important; } -.notion-light-theme [style*='background: rgb(46, 170, 220)'], -.notion-light-theme [style*='background-color: rgb(46, 170, 220)'] { - background: var(--theme_light--primary) !important; +.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'], +.notion-body:not(.dark) [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme--primary) !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { - box-shadow: var(--theme_light--primary) 0px 0px 0px 2px inset !important; + box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important; } -.notion-light-theme .notion-focusable:focus-within { - box-shadow: var(--theme_light--primary) 0px 0px 0px 1px inset, - var(--theme_light--primary_hover) 0px 0px 0px 2px !important; +.notion-body:not(.dark) .notion-focusable:focus-within { + box-shadow: var(--theme--primary) 0px 0px 0px 1px inset, + var(--theme--primary_hover) 0px 0px 0px 2px !important; } -.notion-light-theme [style*='background: rgb(6, 156, 205)'] { - background: var(--theme_light--primary_hover) !important; +.notion-body:not(.dark) [style*='background: rgb(6, 156, 205)'] { + background: var(--theme--primary_hover) !important; } -.notion-light-theme [style*='background: rgb(0, 141, 190)'] { - background: var(--theme_light--primary_click) !important; +.notion-body:not(.dark) [style*='background: rgb(0, 141, 190)'] { + background: var(--theme--primary_click) !important; } -.notion-light-theme +.notion-body:not(.dark) .DayPicker-Day--today:not(.DayPicker-Day--selected):not(.DayPicker-Day--value):not(.DayPicker-Day--start):not(.DayPicker-Day--end)::after, -.notion-light-theme [style*='background: rgb(235, 87, 87)'] { - background: var(--theme_light--primary_indicator) !important; +.notion-body:not(.dark) [style*='background: rgb(235, 87, 87)'] { + background: var(--theme--primary_indicator) !important; } -.notion-light-theme .notion-to_do-block .checkboxSquare { - background: var(--theme_light--option-background) !important; +.notion-body:not(.dark) .notion-to_do-block .checkboxSquare { + background: var(--theme--option-background) !important; } -.notion-light-theme .notion-to_do-block .checkboxSquare path { - fill: var(--theme_light--option-color) !important; +.notion-body:not(.dark) .notion-to_do-block .checkboxSquare path { + fill: var(--theme--option-color) !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='color: rgb(235, 87, 87); border: 1px solid rgba(235, 87, 87, 0.5);'] { - color: var(--theme_light--danger_text) !important; - border: 1px solid var(--theme_light--danger_border) !important; + color: var(--theme--danger_text) !important; + border: 1px solid var(--theme--danger_border) !important; } /* content colours */ -.notion-light-theme, -.notion-light-theme .notion-page-content [style*='color: inherit;'], -.notion-light-theme .notion-frame .notion-page-block, -.notion-light-theme [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--text) !important; +.notion-body:not(.dark), +.notion-body:not(.dark) .notion-page-content [style*='color: inherit;'], +.notion-body:not(.dark) .notion-frame .notion-page-block, +.notion-body:not(.dark) [style*='color: rgb(55, 53, 47);'] { + color: var(--theme--text) !important; } -.notion-light-theme [style*='color: rgba(55, 53, 47, 0.6)'], -.notion-light-theme [style*='color: rgba(25, 23, 17, 0.6)'] { - color: var(--theme_light--text_ui) !important; +.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.6)'], +.notion-body:not(.dark) [style*='color: rgba(25, 23, 17, 0.6)'] { + color: var(--theme--text_ui) !important; } -.notion-light-theme [style*='color: rgba(55, 53, 47, 0.4)'] { - color: var(--theme_light--text_ui_info) !important; +.notion-body:not(.dark) [style*='color: rgba(55, 53, 47, 0.4)'] { + color: var(--theme--text_ui_info) !important; } -.notion-light-theme [style*='fill: rgba(55, 53, 47,'] { - fill: var(--theme_light--text_ui) !important; +.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47,'] { + fill: var(--theme--text_ui) !important; } -.notion-light-theme [style*='fill: rgba(55, 53, 47, 0.8)'] { - fill: var(--theme_light--text) !important; +.notion-body:not(.dark) [style*='fill: rgba(55, 53, 47, 0.8)'] { + fill: var(--theme--text) !important; } -.notion-light-theme [style*='color:rgb(155,154,151)'] { - color: var(--theme_light--text_gray) !important; +.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] { + color: var(--theme--text_gray) !important; } -.notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(235,236,237)'] { - background: var(--theme_light--bg_gray) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { + background: var(--theme--bg_gray) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(235, 236, 237)'] { - background: var(--theme_light--line_gray) !important; +.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] { + background: var(--theme--line_gray) !important; } -.notion-light-theme [style*='color:rgb(100,71,58)'] { - color: var(--theme_light--text_brown) !important; +.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] { + color: var(--theme--text_brown) !important; } -.notion-light-theme [style*='background: rgba(140, 46, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(233,229,227)'] { - background: var(--theme_light--bg_brown) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] { + background: var(--theme--bg_brown) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(233, 229, 227)'] { - background: var(--theme_light--line_brown) !important; +.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] { + background: var(--theme--line_brown) !important; } -.notion-light-theme [style*='color:rgb(217,115,13)'] { - color: var(--theme_light--text_orange) !important; +.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] { + color: var(--theme--text_orange) !important; } -.notion-light-theme [style*='background: rgba(245, 93, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(250,235,221)'] { - background: var(--theme_light--bg_orange) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] { + background: var(--theme--bg_orange) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(250, 235, 221)'] { - background: var(--theme_light--line_orange) !important; +.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] { + background: var(--theme--line_orange) !important; } -.notion-light-theme [style*='color:rgb(223,171,1)'] { - color: var(--theme_light--text_yellow) !important; +.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] { + color: var(--theme--text_yellow) !important; } -.notion-light-theme [style*='background: rgba(233, 168, 0, 0.2)'], -.notion-light-theme [style*='background:rgb(251,243,219)'] { - background: var(--theme_light--bg_yellow) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] { + background: var(--theme--bg_yellow) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(251, 243, 219)'] { - background: var(--theme_light--line_yellow) !important; +.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] { + background: var(--theme--line_yellow) !important; } -.notion-light-theme [style*='color:rgb(15,123,108)'] { - color: var(--theme_light--text_green) !important; +.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] { + color: var(--theme--text_green) !important; } -.notion-light-theme [style*='background: rgba(0, 135, 107, 0.2)'], -.notion-light-theme [style*='background:rgb(221,237,234)'] { - background: var(--theme_light--bg_green) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] { + background: var(--theme--bg_green) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(221, 237, 234)'] { - background: var(--theme_light--line_green) !important; +.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] { + background: var(--theme--line_green) !important; } -.notion-light-theme [style*='color:rgb(11,110,153)'] { - color: var(--theme_light--text_blue) !important; +.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] { + color: var(--theme--text_blue) !important; } -.notion-light-theme [style*='background: rgba(0, 120, 223, 0.2)'], -.notion-light-theme [style*='background:rgb(221,235,241)'] { - background: var(--theme_light--bg_blue) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] { + background: var(--theme--bg_blue) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(221, 235, 241)'] { - background: var(--theme_light--line_blue) !important; +.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] { + background: var(--theme--line_blue) !important; } -.notion-light-theme [style*='color:rgb(105,64,165)'] { - color: var(--theme_light--text_purple) !important; +.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] { + color: var(--theme--text_purple) !important; } -.notion-light-theme [style*='background: rgba(103, 36, 222, 0.2)'], -.notion-light-theme [style*='background:rgb(234,228,242)'] { - background: var(--theme_light--bg_purple) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] { + background: var(--theme--bg_purple) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(234, 228, 242)'] { - background: var(--theme_light--line_purple) !important; +.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] { + background: var(--theme--line_purple) !important; } -.notion-light-theme [style*='color:rgb(173,26,114)'] { - color: var(--theme_light--text_pink) !important; +.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] { + color: var(--theme--text_pink) !important; } -.notion-light-theme [style*='background: rgba(221, 0, 129, 0.2)'], -.notion-light-theme [style*='background:rgb(244,223,235)'] { - background: var(--theme_light--bg_pink) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] { + background: var(--theme--bg_pink) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(244, 223, 235)'] { - background: var(--theme_light--line_pink) !important; +.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] { + background: var(--theme--line_pink) !important; } -.notion-light-theme [style*='color:rgb(224,62,62)'] { - color: var(--theme_light--text_red) !important; +.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] { + color: var(--theme--text_red) !important; } -.notion-light-theme [style*='background: rgba(255, 0, 26, 0.2)'], -.notion-light-theme [style*='background:rgb(251,228,228)'] { - background: var(--theme_light--bg_red) !important; - color: var(--theme_light--bg_text) !important; +.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'], +.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] { + background: var(--theme--bg_red) !important; + color: var(--theme--bg_text) !important; } -.notion-light-theme [style*='background: rgb(251, 228, 228)'] { - background: var(--theme_light--line_red) !important; +.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] { + background: var(--theme--line_red) !important; } -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] [style*='color: rgb(55, 53, 47);'], -.notion-light-theme +.notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--line_text) !important; + color: var(--theme--line_text) !important; } /* code */ -.notion-light-theme [style*='color:#EB5757'] { - color: var(--theme_light--code_inline-text) !important; - background: var(--theme_light--code_inline-background) !important; +.notion-body:not(.dark) [style*='color:#EB5757'] { + color: var(--theme--code_inline-text) !important; + background: var(--theme--code_inline-background) !important; } diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index bcd6713..1f62680 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -6,7 +6,6 @@ @import './buttons.css'; @import './scrollbars.css'; -@import './localised.css'; @keyframes spin { from { diff --git a/repo/core/css/titlebar.css b/repo/core/css/titlebar.css index 8f49bba..0fd160f 100644 --- a/repo/core/css/titlebar.css +++ b/repo/core/css/titlebar.css @@ -5,7 +5,7 @@ * under the MIT license */ -@import 'buttons.css'; +@import './buttons.css'; .frameless .notion-topbar { height: calc(var(--configured--dragarea_height, 10px) + 45px) !important; diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index 7854438..2747f9d 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -155,7 +155,7 @@ --theme_light--scrollbar-border: #cacac8; --theme_light--scrollbar_hover: #cacac8; - --theme_light--card: rgb(247, 246, 243); + --theme_light--card: rgb(247, 247, 247); --theme_light--gallery: rgba(55, 53, 47, 0.024); --theme_light--table-border: rgba(55, 53, 47, 0.16); --theme_light--interactive_hover: rgba(55, 53, 47, 0.08); diff --git a/repo/core/css/variables.json b/repo/core/css/variables.json index da593b8..c1dc5c8 100644 --- a/repo/core/css/variables.json +++ b/repo/core/css/variables.json @@ -1,188 +1,95 @@ [ - "--theme_dark--main", - "--theme_dark--sidebar", - "--theme_dark--overlay", - "--theme_dark--dragarea", - "--theme_dark--preview-width", - "--theme_dark--preview-padding", - "--theme_dark--preview_banner-height", - "--theme_dark--page_banner-height", - "--theme_dark--font_sans", - "--theme_dark--font_serif", - "--theme_dark--font_mono", - "--theme_dark--font_code", - "--theme_dark--font_title-size", - "--theme_dark--font_heading1-size", - "--theme_dark--font_heading2-size", - "--theme_dark--font_heading3-size", - "--theme_dark--font_label-size", - "--theme_dark--font_body-size", - "--theme_dark--font_code-size", - "--theme_dark--font_sidebar-size", - "--theme_dark--scrollbar", - "--theme_dark--scrollbar-border", - "--theme_dark--scrollbar_hover", - "--theme_dark--card", - "--theme_dark--gallery", - "--theme_dark--table-border", - "--theme_dark--interactive_hover", - "--theme_dark--interactive_hover-border", - "--theme_dark--button_close", - "--theme_dark--button_close-fill", - "--theme_dark--selected", - "--theme_dark--primary", - "--theme_dark--primary_hover", - "--theme_dark--primary_click", - "--theme_dark--primary_indicator", - "--theme_dark--option-color", - "--theme_dark--option-background", - "--theme_dark--option_active-color", - "--theme_dark--option_active-background", - "--theme_dark--option_hover-color", - "--theme_dark--option_hover-background", - "--theme_dark--danger_text", - "--theme_dark--danger_border", - "--theme_dark--text", - "--theme_dark--text_ui", - "--theme_dark--text_ui_info", - "--theme_dark--text_gray", - "--theme_dark--text_brown", - "--theme_dark--text_orange", - "--theme_dark--text_yellow", - "--theme_dark--text_green", - "--theme_dark--text_blue", - "--theme_dark--text_purple", - "--theme_dark--text_pink", - "--theme_dark--text_red", - "--theme_dark--bg_text", - "--theme_dark--bg_gray", - "--theme_dark--bg_brown", - "--theme_dark--bg_orange", - "--theme_dark--bg_yellow", - "--theme_dark--bg_green", - "--theme_dark--bg_blue", - "--theme_dark--bg_purple", - "--theme_dark--bg_pink", - "--theme_dark--bg_red", - "--theme_dark--line_text", - "--theme_dark--line_gray", - "--theme_dark--line_brown", - "--theme_dark--line_orange", - "--theme_dark--line_yellow", - "--theme_dark--line_green", - "--theme_dark--line_blue", - "--theme_dark--line_purple", - "--theme_dark--line_pink", - "--theme_dark--line_red", - "--theme_dark--code_inline-text", - "--theme_dark--code_inline-background", - "--theme_dark--code_text", - "--theme_dark--code-background", - "--theme_dark--code_function", - "--theme_dark--code_keyword", - "--theme_dark--code_tag", - "--theme_dark--code_operator", - "--theme_dark--code_important", - "--theme_dark--code_property", - "--theme_dark--code_builtin", - "--theme_dark--code_attr-name", - "--theme_dark--code_comment", - "--theme_dark--code_punctuation", - "--theme_dark--code_doctype", - "--theme_dark--code_number", - "--theme_dark--code_string", - "--theme_dark--code_attr-value", - "--theme_light--main", - "--theme_light--sidebar", - "--theme_light--overlay", - "--theme_light--dragarea", - "--theme_light--preview-width", - "--theme_light--preview-padding", - "--theme_light--preview_banner-height", - "--theme_light--page_banner-height", - "--theme_light--font_sans", - "--theme_light--font_serif", - "--theme_light--font_mono", - "--theme_light--font_code", - "--theme_light--font_title-size", - "--theme_light--font_heading1-size", - "--theme_light--font_heading2-size", - "--theme_light--font_heading3-size", - "--theme_light--font_label-size", - "--theme_light--font_body-size", - "--theme_light--font_code-size", - "--theme_light--font_sidebar-size", - "--theme_light--scrollbar", - "--theme_light--scrollbar-border", - "--theme_light--scrollbar_hover", - "--theme_light--card", - "--theme_light--gallery", - "--theme_light--table-border", - "--theme_light--interactive_hover", - "--theme_light--interactive_hover-border", - "--theme_light--button_close", - "--theme_light--button_close-fill", - "--theme_light--selected", - "--theme_light--primary", - "--theme_light--primary_hover", - "--theme_light--primary_click", - "--theme_light--primary_indicator", - "--theme_light--option-color", - "--theme_light--option-background", - "--theme_light--option_hover-color", - "--theme_light--option_hover-background", - "--theme_light--option_active-color", - "--theme_light--option_active-background", - "--theme_light--danger_text", - "--theme_light--danger_border", - "--theme_light--text", - "--theme_light--text_ui", - "--theme_light--text_ui_info", - "--theme_light--text_gray", - "--theme_light--text_brown", - "--theme_light--text_orange", - "--theme_light--text_yellow", - "--theme_light--text_green", - "--theme_light--text_blue", - "--theme_light--text_purple", - "--theme_light--text_pink", - "--theme_light--text_red", - "--theme_light--bg_text", - "--theme_light--bg_gray", - "--theme_light--bg_brown", - "--theme_light--bg_orange", - "--theme_light--bg_yellow", - "--theme_light--bg_green", - "--theme_light--bg_blue", - "--theme_light--bg_purple", - "--theme_light--bg_pink", - "--theme_light--bg_red", - "--theme_light--line_text", - "--theme_light--line_gray", - "--theme_light--line_brown", - "--theme_light--line_orange", - "--theme_light--line_yellow", - "--theme_light--line_green", - "--theme_light--line_blue", - "--theme_light--line_purple", - "--theme_light--line_pink", - "--theme_light--line_red", - "--theme_light--code_inline-text", - "--theme_light--code_inline-background", - "--theme_light--code_text", - "--theme_light--code-background", - "--theme_light--code_function", - "--theme_light--code_keyword", - "--theme_light--code_tag", - "--theme_light--code_operator", - "--theme_light--code_important", - "--theme_light--code_property", - "--theme_light--code_builtin", - "--theme_light--code_attr-name", - "--theme_light--code_comment", - "--theme_light--code_punctuation", - "--theme_light--code_doctype", - "--theme_light--code_number", - "--theme_light--code_string", - "--theme_light--code_attr-value" + "--theme--main", + "--theme--sidebar", + "--theme--overlay", + "--theme--dragarea", + "--theme--preview-width", + "--theme--preview-padding", + "--theme--preview_banner-height", + "--theme--page_banner-height", + "--theme--font_sans", + "--theme--font_serif", + "--theme--font_mono", + "--theme--font_code", + "--theme--font_title-size", + "--theme--font_heading1-size", + "--theme--font_heading2-size", + "--theme--font_heading3-size", + "--theme--font_label-size", + "--theme--font_body-size", + "--theme--font_code-size", + "--theme--font_sidebar-size", + "--theme--scrollbar", + "--theme--scrollbar-border", + "--theme--scrollbar_hover", + "--theme--card", + "--theme--gallery", + "--theme--table-border", + "--theme--interactive_hover", + "--theme--interactive_hover-border", + "--theme--button_close", + "--theme--button_close-fill", + "--theme--selected", + "--theme--primary", + "--theme--primary_hover", + "--theme--primary_click", + "--theme--primary_indicator", + "--theme--option-color", + "--theme--option-background", + "--theme--option_active-color", + "--theme--option_active-background", + "--theme--option_hover-color", + "--theme--option_hover-background", + "--theme--danger_text", + "--theme--danger_border", + "--theme--text", + "--theme--text_ui", + "--theme--text_ui_info", + "--theme--text_gray", + "--theme--text_brown", + "--theme--text_orange", + "--theme--text_yellow", + "--theme--text_green", + "--theme--text_blue", + "--theme--text_purple", + "--theme--text_pink", + "--theme--text_red", + "--theme--bg_text", + "--theme--bg_gray", + "--theme--bg_brown", + "--theme--bg_orange", + "--theme--bg_yellow", + "--theme--bg_green", + "--theme--bg_blue", + "--theme--bg_purple", + "--theme--bg_pink", + "--theme--bg_red", + "--theme--line_text", + "--theme--line_gray", + "--theme--line_brown", + "--theme--line_orange", + "--theme--line_yellow", + "--theme--line_green", + "--theme--line_blue", + "--theme--line_purple", + "--theme--line_pink", + "--theme--line_red", + "--theme--code_inline-text", + "--theme--code_inline-background", + "--theme--code_text", + "--theme--code-background", + "--theme--code_function", + "--theme--code_keyword", + "--theme--code_tag", + "--theme--code_operator", + "--theme--code_important", + "--theme--code_property", + "--theme--code_builtin", + "--theme--code_attr-name", + "--theme--code_comment", + "--theme--code_punctuation", + "--theme--code_doctype", + "--theme--code_number", + "--theme--code_string", + "--theme--code_attr-value" ] diff --git a/repo/core/styles.css b/repo/core/styles.css index 428dadd..968415c 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -4,7 +4,7 @@ * under the MIT license */ -@import './css/variables.css'; +@import './css/localised.css'; @import './css/dark.css'; @import './css/light.css'; @import './css/shared.css'; diff --git a/repo/emoji-sets/mod.js b/repo/emoji-sets/mod.js index 120b563..966e916 100644 --- a/repo/emoji-sets/mod.js +++ b/repo/emoji-sets/mod.js @@ -41,6 +41,7 @@ module.exports = { hacks: { 'renderer/preload.js'(store, __exports) { document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; const observer = new MutationObserver((list, observer) => { document .querySelectorAll( diff --git a/repo/night-shift/mod.js b/repo/night-shift/mod.js new file mode 100644 index 0000000..02dfb4e --- /dev/null +++ b/repo/night-shift/mod.js @@ -0,0 +1,41 @@ +/* + * night shift + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: '9a71bbff-e87d-4a0b-8a2c-a93473113c30', + tags: ['extension', 'theme'], + name: 'night shift', + desc: + 'sync dark/light theme with the system (overrides normal theme setting)', + version: '0.1.0', + author: 'dragonwocky', + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const observer = new MutationObserver((list, observer) => { + const mode = window.matchMedia('(prefers-color-scheme: dark)') + .matches; + if ( + document.querySelector(`.notion-${mode ? 'light' : 'dark'}-theme`) + ) + document.querySelector( + '.notion-app-inner' + ).className = `notion-app-inner notion-${ + mode ? 'dark' : 'light' + }-theme`; + }); + observer.observe(document, { + childList: true, + subtree: true, + attributes: true, + }); + }); + }, + }, +}; From 3c14f1e85d0c2c4b59bf7974fcf9893f4f0f8247 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 15 Aug 2020 22:20:20 +1000 Subject: [PATCH 042/371] right-to-left extension --- repo/right-to-left/mod.js | 40 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 repo/right-to-left/mod.js diff --git a/repo/right-to-left/mod.js b/repo/right-to-left/mod.js new file mode 100644 index 0000000..18066ee --- /dev/null +++ b/repo/right-to-left/mod.js @@ -0,0 +1,40 @@ +/* + * right-to-left + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 Omar Bahareth + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'b28ee2b9-4d34-4e36-be8a-ab5be3d79f51', + tags: ['extension'], + name: 'right-to-left', + desc: 'enables auto rtl/ltr text direction detection.', + version: '1.3.0', + author: 'obahareth', + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const observer = new MutationObserver((list, observer) => { + document + .querySelectorAll( + '.notion-page-content > div[data-block-id]:not([dir])' + ) + .forEach((block) => block.setAttribute('dir', 'auto')); + document + .querySelectorAll("div[placeholder='List']") + .forEach((item) => { + item.style['text-align'] = 'start'; + }); + }); + observer.observe(document, { + childList: true, + subtree: true, + }); + }); + }, + }, +}; From 94830b5da5f878a4413e363b507feeaf7adac12e Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 15 Aug 2020 22:44:31 +1000 Subject: [PATCH 043/371] make it possible to enabled/disable multiple extensions --- repo/core/menu.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/repo/core/menu.js b/repo/core/menu.js index 4f0f3e1..831d44c 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -373,7 +373,8 @@ window['__start'] = async () => { ? 1 : a.name.localeCompare(b.name) )) { - const menuStore = store('mods', { [mod.id]: { enabled: false } }), + const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id] + .enabled, author = typeof mod.author === 'object' ? mod.author @@ -384,9 +385,7 @@ window['__start'] = async () => { }; mod.elem = createElement(`

{ ? `>${mod.name}` : `class="toggle"> + ${enabled ? 'checked' : ''} /> `; } - $opt = createElement(`

${$opt}

`); + $opt = helpers.createElement(`

${$opt}

`); if (opt.type === 'color') { $opt .querySelector(`#${opt.type}_${id}--${opt.key}`) @@ -377,18 +374,13 @@ window['__start'] = async () => { ? 1 : a.name.localeCompare(b.name) )) { - // mod styling - necessary for fonts - // if ( - // fs.pathExistsSync(path.resolve(`${__dirname}/../${mod.dir}/styles.css`)) - // ) { - // document - // .querySelector('head') - // .appendChild( - // createElement( - // `` - // ) - // ); - // } + for (let fonts of mod.fonts || []) { + document + .querySelector('head') + .appendChild( + helpers.createElement(``) + ); + } const enabled = store('mods', { [mod.id]: { enabled: false } })[mod.id] .enabled, @@ -400,7 +392,7 @@ window['__start'] = async () => { link: `https://github.com/${mod.author}`, avatar: `https://github.com/${mod.author}.png`, }; - mod.elem = createElement(` + mod.elem = helpers.createElement(`
diff --git a/repo/font-chooser/mod.js b/repo/font-chooser/mod.js index 60b5cec..03cd2ca 100644 --- a/repo/font-chooser/mod.js +++ b/repo/font-chooser/mod.js @@ -1,95 +1,59 @@ /* * font chooser * (c) 2020 torchatlas (https://bit.ly/torchatlas) + * (c) 2020 dragonwocky (https://dragonwocky.me/) * under the MIT license */ 'use strict'; module.exports = { - id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16', - tags: ['extension'], - name: 'font chooser', - desc: 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.', - version: '0.1.0', - author: 'torchatlas', - options: [ - { - key: 'sansSerif', - label: 'Sans Serif and UI', - type: 'input', - value: '', - }, - { - key: 'serif', - label: 'Serif', - type: 'input', - value: '' - }, - { - key: 'mono', - label: 'Monospace', - type: 'input', - value: '' - }, - { - key: 'code', - label: 'Code', - type: 'input', - value: '' - } - ], - hacks: { - 'renderer/preload.js'(store, __exports) { - document.addEventListener('readystatechange', (event) => { - - if (document.readyState !== 'complete') return false; - - if (store().sansSerif != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_sans', - store().sansSerif - ); - document.documentElement.style.setProperty( - '--theme_light--font_sans', - store().sansSerif - ); - } - - if (store().serif != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_serif', - store().serif - ); - document.documentElement.style.setProperty( - '--theme_light--font_serif', - store().serif - ); - } - - if (store().mono != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_mono', - store().mono - ); - document.documentElement.style.setProperty( - '--theme_light--font_mono', - store().mono - ); - } - - if (store().code != '') { - document.documentElement.style.setProperty( - '--theme_dark--font_code', - store().code - ); - document.documentElement.style.setProperty( - '--theme_light--font_code', - store().code - ); - } - - }); - } - } -} \ No newline at end of file + id: 'e0d8d148-45e7-4d79-8313-e7b2ad8abe16', + tags: ['extension'], + name: 'font chooser', + desc: + 'customize fonts. for each option, type in the name of the font you would like to use, or leave it blank to not change anything.', + version: '0.1.1', + author: 'torchatlas', + options: [ + { + key: 'sans', + label: 'sans-serif (inc. ui):', + type: 'input', + value: '', + }, + { + key: 'serif', + label: 'serif:', + type: 'input', + value: '', + }, + { + key: 'mono', + label: 'monospace:', + type: 'input', + value: '', + }, + { + key: 'code', + label: 'code:', + type: 'input', + value: '', + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + const attempt_interval = setInterval(enhance, 500); + async function enhance() { + if (!document.querySelector('.notion-app-inner')) return; + clearInterval(attempt_interval); + for (let style of ['sans', 'serif', 'mono', 'code']) { + if (!store()[style]) return; + document + .querySelector('.notion-app-inner') + .style.setProperty(`--theme--font_${style}`, store()[style]); + } + } + }, + }, +}; diff --git a/repo/gameish/mod.js b/repo/gameish/mod.js index 405aabe..66a5bf6 100644 --- a/repo/gameish/mod.js +++ b/repo/gameish/mod.js @@ -12,11 +12,14 @@ module.exports = { tags: ['theme', 'dark'], name: 'gameish', desc: 'a purple, "gamer-styled" theme with a blocky-font.', - version: '0.1.2', + version: '0.1.3', author: { name: 'LVL100ShrekCultist', link: 'https://www.reddit.com/user/LVL100ShrekCultist/', avatar: 'https://styles.redditmedia.com/t5_2js69j/styles/profileIcon_jvnzmo30fyq41.jpg', }, + fonts: [ + 'https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap', + ], }; diff --git a/repo/gameish/styles.css b/repo/gameish/styles.css index b0c914b..62500b1 100644 --- a/repo/gameish/styles.css +++ b/repo/gameish/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://fonts.googleapis.com/css2?family=Baumans&family=Comfortaa&family=DM+Mono&family=Gruppo&family=Nova+Mono&family=Offside&family=Press+Start+2P&family=Righteous&display=swap'); - :root { --theme_dark--main: #1e1c26; --theme_dark--sidebar: #24222c; diff --git a/repo/littilepig-dark/mod.js b/repo/littilepig-dark/mod.js index 1720a8e..a655447 100644 --- a/repo/littilepig-dark/mod.js +++ b/repo/littilepig-dark/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'dark'], name: 'littlepig dark', desc: 'a purple monospaced theme using emojis and colourful text.', - version: '0.1.0', + version: '0.1.1', author: { name: 'Lizishan', link: 'https://www.reddit.com/user/Lizishan/', avatar: 'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg', }, + fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'], }; diff --git a/repo/littilepig-dark/styles.css b/repo/littilepig-dark/styles.css index 4c752e1..fbc0efe 100644 --- a/repo/littilepig-dark/styles.css +++ b/repo/littilepig-dark/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css'); - :root { --theme_dark--main: #1e1c26; --theme_dark--sidebar: #24222c; diff --git a/repo/littlepig-light/mod.js b/repo/littlepig-light/mod.js index fbeb9f7..319d127 100644 --- a/repo/littlepig-light/mod.js +++ b/repo/littlepig-light/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'light'], name: 'littlepig light', desc: 'a bright monospaced theme using emojis and colourful text.', - version: '0.1.0', + version: '0.1.1', author: { name: 'Lizishan', link: 'https://www.reddit.com/user/Lizishan/', avatar: 'https://styles.redditmedia.com/t5_110nz4/styles/profileIcon_h1m3b16exoi51.jpg', }, + fonts: ['https://dev-cats.github.io/code-snippets/JetBrainsMono.css'], }; diff --git a/repo/littlepig-light/styles.css b/repo/littlepig-light/styles.css index 5414d6f..334b27c 100644 --- a/repo/littlepig-light/styles.css +++ b/repo/littlepig-light/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://dev-cats.github.io/code-snippets/JetBrainsMono.css'); - :root { --theme_light--font_sans: 'JetBrains Mono'; --theme_light--font_mono: 'JetBrains Mono'; diff --git a/repo/neutral/mod.js b/repo/neutral/mod.js index 23a352e..51c13a3 100644 --- a/repo/neutral/mod.js +++ b/repo/neutral/mod.js @@ -12,6 +12,10 @@ module.exports = { tags: ['theme', 'dark'], name: 'neutral', desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', - version: '0.1.1', + version: '0.1.2', author: 'arecsu', + fonts: [ + 'https://rsms.me/inter/inter.css', + 'https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap', + ], }; diff --git a/repo/neutral/styles.css b/repo/neutral/styles.css index c814737..2a7b441 100644 --- a/repo/neutral/styles.css +++ b/repo/neutral/styles.css @@ -5,9 +5,6 @@ * under the MIT license */ -@import url('https://rsms.me/inter/inter.css'); -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap'); - :root { /** dark **/ diff --git a/repo/pastel-dark/mod.js b/repo/pastel-dark/mod.js index a69ff80..31e9358 100644 --- a/repo/pastel-dark/mod.js +++ b/repo/pastel-dark/mod.js @@ -12,11 +12,12 @@ module.exports = { tags: ['theme', 'dark'], name: 'pastel dark', desc: 'a smooth-transition true dark theme with a hint of pastel.', - version: '0.1.1', + version: '0.1.2', author: { name: 'zenith_illinois', link: 'https://www.reddit.com/user/zenith_illinois/', avatar: 'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128', }, + fonts: ['https://rsms.me/inter/inter.css'], }; diff --git a/repo/pastel-dark/styles.css b/repo/pastel-dark/styles.css index 49c44bc..5ba0826 100644 --- a/repo/pastel-dark/styles.css +++ b/repo/pastel-dark/styles.css @@ -5,8 +5,6 @@ * under the MIT license */ -@import url('https://rsms.me/inter/inter.css'); - :root { --theme_dark--main: #0b0b0b; --theme_dark--sidebar: #0f0f0f; From 3a608f8aff0e9c0674e8cb7da87c94e7196ec6c2 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 11:33:18 +1000 Subject: [PATCH 068/371] page titles now respond to small-text mode --- repo/core/css/theme.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 96f1efc..dac7b68 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -107,7 +107,9 @@ font-family: var(--theme--font_code) !important; } .notion-frame .notion-page-block div[placeholder='Untitled'] { - font-size: var(--theme--font_title-size) !important; + font-size: calc( + var(--theme--font_body-size) * (var(--theme--font_heading1-size) / 1em) + ) !important; } [placeholder='Heading 1'] { font-size: calc( From 0355c7d34456852041977c58432dba287931feb2 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 15:39:53 +1000 Subject: [PATCH 069/371] fix #76, height of weekly calendar view --- repo/weekly-view/mod.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/repo/weekly-view/mod.js b/repo/weekly-view/mod.js index 17437a5..2e66179 100644 --- a/repo/weekly-view/mod.js +++ b/repo/weekly-view/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['extension'], name: 'weekly view', desc: 'calendar views named "weekly" will show only the 7 days of this week.', - version: '0.5.0', + version: '0.5.1', author: 'adihd', hacks: { 'renderer/preload.js'(store, __exports) { @@ -36,15 +36,17 @@ module.exports = { if (!collection_view || collection_view.innerText != 'weekly') return; const days = collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName( - 'notion-calendar-view-day' - ); + 'notion-calendar-view-day' + ), + today = [...days].find((day) => day.style.background), + height = today + ? getComputedStyle( + today.parentElement.parentElement + ).getPropertyValue('height') + : 0; for (let day of days) day.parentElement.parentElement.style.height = 0; - if (days.length) { - const today = [...days].find((day) => day.style.background); - if (today) - today.parentElement.parentElement.style.height = '124px'; - } + today.parentElement.parentElement.style.height = height; } } }); From 513b5f4cab5f967a287bfdd749d887e18d46ecf6 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 20:40:35 +1000 Subject: [PATCH 070/371] remove extension menu hotkey conflict + make configurable --- repo/core/client.js | 2 -- repo/core/menu.js | 5 ++--- repo/core/mod.js | 6 ++++++ repo/core/tray.js | 14 ++++++++++++-- repo/weekly-view/mod.js | 2 +- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/repo/core/client.js b/repo/core/client.js index 6951260..e30b2a3 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -19,8 +19,6 @@ module.exports = (store, __exports) => { // additional hotkeys document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') location.reload(); - if (event.key === 'e' && (event.ctrlKey || event.metaKey)) - electron.ipcRenderer.send('enhancer:open-extension-menu'); }); const attempt_interval = setInterval(enhance, 500); diff --git a/repo/core/menu.js b/repo/core/menu.js index 94435ee..9d3ae39 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -19,7 +19,6 @@ window['__start'] = async () => { document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') location.reload(); - if ((event.ctrlKey || event.metaKey) && event.key === 'e') browser.close(); if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) { if ( document.activeElement.parentElement.id === 'tags' && @@ -458,6 +457,7 @@ window['__start'] = async () => { $opt .querySelector(`#${opt.type}_${mod.id}--${opt.key}`) .addEventListener('change', (event) => { + modified(); if (opt.type === 'toggle') { store(mod.id)[opt.key] = event.target.checked; } else if (opt.type === 'file') { @@ -469,9 +469,8 @@ window['__start'] = async () => { } else store(mod.id)[opt.key] = typeof opt.value === 'number' - ? Number(event.target.value) + ? +event.target.value : event.target.value; - modified(); }); } $options.appendChild($opt); diff --git a/repo/core/mod.js b/repo/core/mod.js index 1f56beb..25a4d27 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -56,6 +56,12 @@ module.exports = { type: 'input', value: 'CommandOrControl+Shift+A', }, + { + key: 'menu_toggle', + label: 'open enhancements menu hotkey:', + type: 'input', + value: 'Alt+E', + }, ], hacks: { 'main/main.js': require('./tray.js'), diff --git a/repo/core/tray.js b/repo/core/tray.js index 489452e..0c004e9 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -40,7 +40,6 @@ module.exports = (store, __exports) => { webContents.send('enhancer:get-theme-vars', arg) ); }); - electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); function calculateWindowPos(width, height) { const screen = electron.screen.getDisplayNearestPoint({ @@ -157,7 +156,7 @@ module.exports = (store, __exports) => { { type: 'normal', label: 'Enhancements', - accelerator: 'CommandOrControl+E', + accelerator: store().menu_toggle, click: openExtensionMenu, }, { @@ -193,6 +192,17 @@ module.exports = (store, __exports) => { tray.setContextMenu(contextMenu); tray.setToolTip('Notion'); + electron.globalShortcut.register(store().menu_toggle, () => { + if ( + electron.BrowserWindow.getAllWindows() + .filter((win) => win.getTitle() !== 'notion-enhancer menu') + .some((win) => win.isFocused()) + ) { + openExtensionMenu(); + } else if (enhancer_menu && enhancer_menu.isFocused()) + enhancer_menu.close(); + }); + function showWindows() { const windows = electron.BrowserWindow.getAllWindows(); if (is_mac) electron.app.show(); diff --git a/repo/weekly-view/mod.js b/repo/weekly-view/mod.js index 2e66179..e18bede 100644 --- a/repo/weekly-view/mod.js +++ b/repo/weekly-view/mod.js @@ -46,7 +46,7 @@ module.exports = { : 0; for (let day of days) day.parentElement.parentElement.style.height = 0; - today.parentElement.parentElement.style.height = height; + if (today) today.parentElement.parentElement.style.height = height; } } }); From 6ff3a96d8116f832fefcd0f605b9c31c14acae13 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 21:16:51 +1000 Subject: [PATCH 071/371] fix #69 - option to completely hide window buttons --- repo/core/buttons.js | 4 ++-- repo/core/client.js | 4 ++-- repo/core/css/menu.css | 3 +++ repo/core/menu.js | 7 +++++-- repo/core/mod.js | 6 ++++++ repo/core/render.js | 26 +++++++++++++++----------- 6 files changed, 33 insertions(+), 17 deletions(-) diff --git a/repo/core/buttons.js b/repo/core/buttons.js index 9b6cafd..e0cd54c 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -16,7 +16,7 @@ module.exports = (store) => { element: helpers.createElement('
'), insert: [ 'alwaysontop', - ...(store().frameless && !is_mac + ...(store().frameless && !store().tiling_mode && !is_mac ? ['minimize', 'maximize', 'close'] : []), ], @@ -86,7 +86,7 @@ module.exports = (store) => { document.querySelector(`.window-button#btn-${btn}`).onclick = buttons.actions[btn]; } - if (store().frameless && !is_mac) { + if (store().frameless && !store().tiling_mode && !is_mac) { window.addEventListener('resize', (event) => { Promise.resolve(buttons.icons.maximize()).then((icon) => { icon = icon.toString(); diff --git a/repo/core/client.js b/repo/core/client.js index e30b2a3..8aad84b 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -35,7 +35,7 @@ module.exports = (store, __exports) => { document.body.classList.add('smooth-scrollbars'); // frameless - if (store().frameless) { + if (store().frameless && !store().tiling_mode) { document.body.classList.add('frameless'); // draggable area const dragarea = helpers.createElement( @@ -154,7 +154,7 @@ module.exports = (store, __exports) => { }); let sidebar_width; function setSidebarWidth(list) { - if (!store().frameless) return; + if (!store().frameless && store().tiling_mode) return; const new_sidebar_width = list[0].target.style.height === 'auto' ? '0px' diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 59c1a3d..8138f92 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -117,6 +117,9 @@ s { #menu-titlebar { background: var(--theme--dragarea); } +#menu-titlebar:empty { + display: none; +} /* alerts */ diff --git a/repo/core/menu.js b/repo/core/menu.js index 9d3ae39..95aae9c 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -7,6 +7,7 @@ 'use strict'; const store = require('../../pkg/store.js'), + { id } = require('./mod.js'), helpers = require('../../pkg/helpers.js'), fs = require('fs-extra'), path = require('path'), @@ -14,8 +15,10 @@ const store = require('../../pkg/store.js'), browser = electron.remote.getCurrentWindow(); window['__start'] = async () => { - const buttons = require('./buttons.js')(() => ({ frameless: true })); - document.querySelector('#menu-titlebar').appendChild(buttons.element); + if (!store(id).tiling_mode) { + const buttons = require('./buttons.js')(() => ({ frameless: true })); + document.querySelector('#menu-titlebar').appendChild(buttons.element); + } document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') location.reload(); diff --git a/repo/core/mod.js b/repo/core/mod.js index 25a4d27..2294d0a 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -44,6 +44,12 @@ module.exports = { type: 'input', value: 15, }, + { + key: 'tiling_mode', + label: 'tiling window manager mode', + type: 'toggle', + value: false, + }, { key: 'smooth_scrollbars', label: 'integrated scrollbars', diff --git a/repo/core/render.js b/repo/core/render.js index a6c7d58..9b17f03 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -16,16 +16,20 @@ module.exports = (store, __exports) => { ), default_styles = dragarea.getAttribute('style'); - document - .getElementById('notion') - .addEventListener('ipc-message', (event) => { - if (event.channel !== 'enhancer:sidebar-width') return; - dragarea.setAttribute( - 'style', - `${default_styles} top: 2px; height: ${ - store().dragarea_height - }px; left: ${event.args[0]};` - ); - }); + if (store().tiling_mode) { + dragarea.style.display = 'none'; + } else { + document + .getElementById('notion') + .addEventListener('ipc-message', (event) => { + if (event.channel !== 'enhancer:sidebar-width') return; + dragarea.setAttribute( + 'style', + `${default_styles} top: 2px; height: ${ + store().dragarea_height + }px; left: ${event.args[0]};` + ); + }); + } }; }; From 63e4b574a99bcaa30c1127606744e11d08dc6fb3 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 21:46:17 +1000 Subject: [PATCH 072/371] separate always-on-top into separate mod --- repo/alwaysontop/mod.js | 20 +++++++++++++++ repo/core/buttons.js | 5 +++- repo/core/css/menu.css | 9 +++---- repo/core/menu.js | 54 +++++++++++++++++++++++++---------------- 4 files changed, 61 insertions(+), 27 deletions(-) create mode 100644 repo/alwaysontop/mod.js diff --git a/repo/alwaysontop/mod.js b/repo/alwaysontop/mod.js new file mode 100644 index 0000000..6972b63 --- /dev/null +++ b/repo/alwaysontop/mod.js @@ -0,0 +1,20 @@ +/* + * always on top + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +// this is actually just a pseudo mod to "separate" the button +// from the core module, but the core still handles actually +// making it work. +module.exports = { + id: '72886371-dada-49a7-9afc-9f275ecf29d3', + tags: ['extension'], + name: 'always on top', + desc: + "add an arrow/button to show the notion window on top of other windows even if it's not focused.", + version: '0.1.1', + author: 'dragonwocky', +}; diff --git a/repo/core/buttons.js b/repo/core/buttons.js index e0cd54c..376f1b4 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -15,7 +15,10 @@ module.exports = (store) => { buttons = { element: helpers.createElement('
'), insert: [ - 'alwaysontop', + ...((store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {}) + .enabled + ? ['alwaysontop'] + : []), ...(store().frameless && !store().tiling_mode && !is_mac ? ['minimize', 'maximize', 'close'] : []), diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 8138f92..805bb72 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -105,19 +105,18 @@ s { #menu-titlebar { display: flex; - padding: 0.4em; -webkit-app-region: drag; } #menu-titlebar button { -webkit-app-region: no-drag; } -#menu-titlebar :first-child { - margin-left: auto; -} #menu-titlebar { background: var(--theme--dragarea); } -#menu-titlebar:empty { +#menu-titlebar > .window-buttons-area { + margin: 0.4em 0.4em 0.4em auto; +} +#menu-titlebar > .window-buttons-area:empty { display: none; } diff --git a/repo/core/menu.js b/repo/core/menu.js index 95aae9c..2577e9c 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -15,32 +15,44 @@ const store = require('../../pkg/store.js'), browser = electron.remote.getCurrentWindow(); window['__start'] = async () => { - if (!store(id).tiling_mode) { - const buttons = require('./buttons.js')(() => ({ frameless: true })); - document.querySelector('#menu-titlebar').appendChild(buttons.element); - } + const buttons = require('./buttons.js')(() => ({ + '72886371-dada-49a7-9afc-9f275ecf29d3': { + enabled: (store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {}) + .enabled, + }, + tiling_mode: store('0f0bf8b6-eae6-4273-b307-8fc43f2ee082').tiling_mode, + frameless: true, + })); + document.querySelector('#menu-titlebar').appendChild(buttons.element); document.defaultView.addEventListener('keyup', (event) => { if (event.code === 'F5') location.reload(); - if (!(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey) { + const meta = + !(event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey; + if ( + meta && + document.activeElement.parentElement.id === 'tags' && + event.key === 'Enter' + ) + document.activeElement.click(); + if (document.activeElement.tagName.toLowerCase() === 'input') { + if (document.activeElement.type === 'checkbox' && event.key === 'Enter') + document.activeElement.checked = !document.activeElement.checked; if ( - document.activeElement.parentElement.id === 'tags' && - event.key === 'Enter' + ['Escape', 'Enter'].includes(event.key) && + document.activeElement.type !== 'checkbox' && + (document.activeElement.parentElement.id !== 'search' || + event.key === 'Escape') ) - document.activeElement.click(); - if (document.activeElement.tagName.toLowerCase() === 'input') { - if (document.activeElement.type === 'checkbox' && event.key === 'Enter') - document.activeElement.checked = !document.activeElement.checked; - if ( - ['Escape', 'Enter'].includes(event.key) && - document.activeElement.type !== 'checkbox' && - (document.activeElement.parentElement.id !== 'search' || - event.key === 'Escape') - ) - document.activeElement.blur(); - } else if (event.key === '/') - document.querySelector('#search > input').focus(); - } + document.activeElement.blur(); + } else if ( + (meta && event.key === '/') || + ((event.ctrlKey || event.metaKey) && + event.key === 'f' && + !event.altKey && + !event.shiftKey) + ) + document.querySelector('#search > input').focus(); }); electron.ipcRenderer.send('enhancer:get-theme-vars'); From c5f5ce30e50547d1de13125cafd19bf3dc6422e5 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 22:21:17 +1000 Subject: [PATCH 073/371] ext. menu search upgrades (more stuff is searchable + case insensitive + cmd/ctrl f) --- repo/core/menu.js | 48 ++++++++++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/repo/core/menu.js b/repo/core/menu.js index 2577e9c..682cd98 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -45,12 +45,13 @@ window['__start'] = async () => { event.key === 'Escape') ) document.activeElement.blur(); - } else if ( - (meta && event.key === '/') || - ((event.ctrlKey || event.metaKey) && - event.key === 'f' && - !event.altKey && - !event.shiftKey) + } else if (meta && event.key === '/') + document.querySelector('#search > input').focus(); + if ( + (event.ctrlKey || event.metaKey) && + event.key === 'f' && + !event.altKey && + !event.shiftKey ) document.querySelector('#search > input').focus(); }); @@ -171,7 +172,7 @@ window['__start'] = async () => { ); // search - const search_query = { + const search_filters = { enabled: true, disabled: true, tags: new Set( @@ -181,19 +182,28 @@ window['__start'] = async () => { .sort() ), }; + function innerText(elem) { + let text = ''; + for (let node of elem.childNodes) { + if (node.nodeType === 3) text += node.textContent; + if (node.nodeType === 1) + text += ['text', 'number'].includes(node.type) + ? node.value + : innerText(node); + } + return text; + } function search() { modules.loaded.forEach((mod) => { const $search_input = document.querySelector('#search > input'); if ( - (mod.elem.classList.contains('enabled') && !search_query.enabled) || - (mod.elem.classList.contains('disabled') && !search_query.disabled) || - !mod.tags.some((tag) => search_query.tags.has(tag)) || + (mod.elem.classList.contains('enabled') && !search_filters.enabled) || + (mod.elem.classList.contains('disabled') && !search_filters.disabled) || + !mod.tags.some((tag) => search_filters.tags.has(tag)) || ($search_input.value && - !( - mod.name + - mod.tags.map((tag) => `#${tag}`).join(' ') + - mod.desc - ).includes($search_input.value)) + !innerText(mod.elem) + .toLowerCase() + .includes($search_input.value.toLowerCase())) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; @@ -220,17 +230,17 @@ window['__start'] = async () => { } createTag( 'enabled', - (state) => [(search_query.enabled = state), search()] + (state) => [(search_filters.enabled = state), search()] // 'var(--theme--bg_green)' ); createTag( 'disabled', - (state) => [(search_query.disabled = state), search()] + (state) => [(search_filters.disabled = state), search()] // 'var(--theme--bg_red)' ); - for (let tag of search_query.tags) + for (let tag of search_filters.tags) createTag(`#${tag}`, (state) => [ - state ? search_query.tags.add(tag) : search_query.tags.delete(tag), + state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag), search(), ]); From 666925c0819f56f1721a09d23d529ba949a71b3a Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 22:33:47 +1000 Subject: [PATCH 074/371] fix property-layout again --- repo/custom-inserts/mod.js | 17 ++++++++++++----- repo/property-layout/mod.js | 26 +++++++++++++------------- repo/property-layout/styles.css | 3 +++ 3 files changed, 28 insertions(+), 18 deletions(-) diff --git a/repo/custom-inserts/mod.js b/repo/custom-inserts/mod.js index 0879d36..59c0ba0 100644 --- a/repo/custom-inserts/mod.js +++ b/repo/custom-inserts/mod.js @@ -6,12 +6,14 @@ 'use strict'; +const helpers = require('../../pkg/helpers.js'); + module.exports = { id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb', tags: ['extension'], name: 'custom inserts', desc: 'link files for small client-side tweaks.', - version: '0.1.1', + version: '0.1.2', author: 'dragonwocky', options: [ { @@ -34,10 +36,15 @@ module.exports = { if (document.readyState !== 'complete') return false; if (store().css) { try { - const style = document.createElement('style'); - style.type = 'text/css'; - style.innerHTML = fs.readFileSync(store().css); - document.querySelector('head').appendChild(style); + document + .querySelector('head') + .appendChild( + helpers.createElement( + `` + ) + ); } catch (err) { console.warn(' invalid css file... unsetting.'); store().css = ''; diff --git a/repo/property-layout/mod.js b/repo/property-layout/mod.js index ab3c16b..a6957d8 100644 --- a/repo/property-layout/mod.js +++ b/repo/property-layout/mod.js @@ -7,12 +7,14 @@ 'use strict'; +const helpers = require('../../pkg/helpers.js'); + module.exports = { id: '4034a578-7dd3-4633-80c6-f47ac5b7b160', tags: ['extension'], name: 'property layout', desc: 'auto-collapse page properties that usually push down page content.', - version: '0.2.3', + version: '0.2.4', author: 'alexander-kazakov', hacks: { 'renderer/preload.js'(store, __exports) { @@ -30,7 +32,7 @@ module.exports = { function process(list) { queue = []; let properties = document.querySelector( - '.notion-scroller.vertical > :first-child [style="width: 100%; font-size: 14px;"]' + '.notion-scroller.vertical [style*="env(safe-area-inset-left)"] > [style="width: 100%; font-size: 14px;"]' ); if ( properties && @@ -40,19 +42,17 @@ module.exports = { 'propertylayout-enhanced', 'propertylayout-hidden' ); - const toggle = document.createElement('button'); - toggle.classList.add('propertylayout-toggle'); - toggle.setAttribute('data-action', 'show'); - toggle.innerText = '→ show properties'; + const toggle = helpers.createElement( + '' + ); toggle.addEventListener('click', (event) => { properties.classList.toggle('propertylayout-hidden'); - const action = properties.classList.contains( - 'propertylayout-hidden' - ) - ? 'show' - : 'hide'; - toggle.innerText = `→ ${action} properties`; - toggle.setAttribute('data-action', action); + toggle.setAttribute( + 'data-action', + properties.classList.contains('propertylayout-hidden') + ? 'show' + : 'hide' + ); }); if (properties.previousElementSibling) { properties.previousElementSibling.append(toggle); diff --git a/repo/property-layout/styles.css b/repo/property-layout/styles.css index e058aa5..8ebf4c1 100644 --- a/repo/property-layout/styles.css +++ b/repo/property-layout/styles.css @@ -26,6 +26,9 @@ .propertylayout-toggle[data-action='show'] { margin-bottom: 1em; } +.propertylayout-toggle::before { + content: '→ ' attr(data-action) ' '; +} .propertylayout-toggle:hover { background: var(--theme--interactive_hover); } From 988b78085a82d1240d0aed5c6eb8a3293bc1aaa5 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 2 Sep 2020 22:56:40 +1000 Subject: [PATCH 075/371] calendar scroll extension - #74 --- repo/calendar-scroll/mod.js | 79 +++++++++++++++++++++++++++++++++ repo/calendar-scroll/styles.css | 20 +++++++++ 2 files changed, 99 insertions(+) create mode 100644 repo/calendar-scroll/mod.js create mode 100644 repo/calendar-scroll/styles.css diff --git a/repo/calendar-scroll/mod.js b/repo/calendar-scroll/mod.js new file mode 100644 index 0000000..44cf64f --- /dev/null +++ b/repo/calendar-scroll/mod.js @@ -0,0 +1,79 @@ +/* + * calendar scroll + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +const helpers = require('../../pkg/helpers.js'); + +module.exports = { + id: 'b1c7db33-dfee-489a-a76c-0dd66f7ed29a', + tags: ['extension'], + name: 'calendar scroll', + desc: + 'add a button to scroll down to the current week of a calendar for you.', + version: '0.1.0', + author: 'dragonwocky', + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const attempt_interval = setInterval(enhance, 500); + function enhance() { + const notion_elem = document.querySelector('.notion-frame'); + if (!notion_elem) return; + clearInterval(attempt_interval); + + const button = helpers.createElement( + '' + ); + button.addEventListener('click', (event) => { + const collection_view = document.querySelector( + '.notion-collection-view-select' + ); + if (!collection_view) return; + const day = [ + ...collection_view.parentElement.parentElement.parentElement.parentElement.getElementsByClassName( + 'notion-calendar-view-day' + ), + ].find((day) => day.style.background); + if (!day) return; + const scroller = document.querySelector( + '.notion-frame .notion-scroller' + ); + scroller.scroll({ + top: day.offsetParent.offsetParent.offsetTop + 70, + }); + setTimeout( + () => + scroller.scroll({ + top: day.offsetParent.offsetParent.offsetTop + 70, + }), + 100 + ); + }); + + process(); + const observer = new MutationObserver(process); + observer.observe(notion_elem, { + childList: true, + subtree: true, + }); + function process(list, observer) { + if (document.querySelector('#calendar-scroll-to-week')) return; + const arrow = document.querySelector( + '.notion-selectable.notion-collection_view_page-block .chevronLeft' + ); + if (arrow) + arrow.parentElement.parentElement.insertBefore( + button, + arrow.parentElement + ); + } + } + }); + }, + }, +}; diff --git a/repo/calendar-scroll/styles.css b/repo/calendar-scroll/styles.css new file mode 100644 index 0000000..ed41f12 --- /dev/null +++ b/repo/calendar-scroll/styles.css @@ -0,0 +1,20 @@ +/* + * calendar scroll + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +#calendar-scroll-to-week { + background: var(--theme--interactive_hover); + border: 1px solid transparent; + font-size: var(--theme--font_label-size); + color: var(--theme--text); + height: 24px; + border-radius: 3px; + line-height: 1.2; + padding: 0 0.5em; +} +#calendar-scroll-to-week:hover { + background: transparent; + border: 1px solid var(--theme--interactive_hover); +} From 72551c5f671989aaadb7d26225eef3a40466cddc Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 3 Sep 2020 12:11:25 +1000 Subject: [PATCH 076/371] fix #73 - block-level text colours are now changed properly, add tick/cross to search filters --- repo/core/css/menu.css | 6 +++++ repo/core/css/theme.css | 58 ++++++++++++++++++++++++++++++++++------- 2 files changed, 55 insertions(+), 9 deletions(-) diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 805bb72..9bb5c5d 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -241,10 +241,16 @@ s { background: var(--theme--option_hover-background); color: var(--theme--option_hover-color); } +#search #tags > span::before { + content: '× '; +} #search #tags > .selected { background: var(--tag_color, var(--theme--option_active-background)); color: var(--theme--option_active-color); } +#search #tags > .selected::before { + content: '✓ '; +} /* module meta */ diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index dac7b68..428388b 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -417,8 +417,13 @@ } .notion-body.dark [style*='color:rgba(151,154,155,0.95)'], -.notion-body:not(.dark) [style*='color:rgb(155,154,151)'] { +.notion-body.dark + [style*='color: rgba(255, 255, 255, 0.6); fill: rgba(255, 255, 255, 0.6);'], +.notion-body:not(.dark) [style*='color:rgb(155,154,151)'], +.notion-body:not(.dark) + [style*='color: rgba(55, 53, 47, 0.6); fill: rgba(55, 53, 47, 0.6);'] { color: var(--theme--text_gray) !important; + fill: var(--theme--text_gray) !important; } .notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { @@ -435,8 +440,13 @@ background: var(--theme--line_gray) !important; } .notion-body.dark [style*='color:rgb(147,114,100)'], -.notion-body:not(.dark) [style*='color:rgb(100,71,58)'] { +.notion-body.dark + [style*='color: rgb(147, 114, 100); fill: rgb(147, 114, 100);'], +.notion-body:not(.dark) [style*='color:rgb(100,71,58)'], +.notion-body:not(.dark) + [style*='color: rgb(100, 71, 58); fill: rgb(100, 71, 58);'] { color: var(--theme--text_brown) !important; + fill: var(--theme--text_brown) !important; } .notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { @@ -453,8 +463,12 @@ background: var(--theme--line_brown) !important; } .notion-body.dark [style*='color:rgb(255,163,68)'], -.notion-body:not(.dark) [style*='color:rgb(217,115,13)'] { +.notion-body.dark [style*='color: rgb(255, 163, 68); fill: rgb(255, 163, 68);'], +.notion-body:not(.dark) [style*='color:rgb(217,115,13)'], +.notion-body:not(.dark) + [style*='color: rgb(217, 115, 13); fill: rgb(217, 115, 13);'] { color: var(--theme--text_orange) !important; + fill: var(--theme--text_orange) !important; } .notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] { @@ -471,8 +485,12 @@ background: var(--theme--line_orange) !important; } .notion-body.dark [style*='color:rgb(255,220,73)'], -.notion-body:not(.dark) [style*='color:rgb(223,171,1)'] { +.notion-body.dark [style*='color: rgb(255, 220, 73); fill: rgb(255, 220, 73);'], +.notion-body:not(.dark) [style*='color:rgb(223,171,1)'], +.notion-body:not(.dark) + [style*='color: rgb(223, 171, 1); fill: rgb(223, 171, 1);'] { color: var(--theme--text_yellow) !important; + fill: var(--theme--text_yellow) !important; } .notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] { @@ -489,8 +507,12 @@ background: var(--theme--line_yellow) !important; } .notion-body.dark [style*='color:rgb(77,171,154)'], -.notion-body:not(.dark) [style*='color:rgb(15,123,108)'] { +.notion-body.dark [style*='color: rgb(77, 171, 154); fill: rgb(77, 171, 154);'], +.notion-body:not(.dark) [style*='color:rgb(15,123,108)'], +.notion-body:not(.dark) + [style*='color: rgb(15, 123, 108); fill: rgb(15, 123, 108);'] { color: var(--theme--text_green) !important; + fill: var(--theme--text_green) !important; } .notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] { @@ -507,8 +529,12 @@ background: var(--theme--line_green) !important; } .notion-body.dark [style*='color:rgb(82,156,202)'], -.notion-body:not(.dark) [style*='color:rgb(11,110,153)'] { +.notion-body.dark [style*='color: rgb(82, 156, 202); fill: rgb(82, 156, 202);'], +.notion-body:not(.dark) [style*='color:rgb(11,110,153)'], +.notion-body:not(.dark) + [style*='color: rgb(11, 110, 153); fill: rgb(11, 110, 153);'] { color: var(--theme--text_blue) !important; + fill: var(--theme--text_blue) !important; } .notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] { @@ -525,8 +551,13 @@ background: var(--theme--line_blue) !important; } .notion-body.dark [style*='color:rgb(154,109,215)'], -.notion-body:not(.dark) [style*='color:rgb(105,64,165)'] { +.notion-body.dark + [style*='color: rgb(154, 109, 215); fill: rgb(154, 109, 215);'], +.notion-body:not(.dark) [style*='color:rgb(105,64,165)'], +.notion-body:not(.dark) + [style*='color: rgb(105, 64, 165); fill: rgb(105, 64, 165);'] { color: var(--theme--text_purple) !important; + fill: var(--theme--text_purple) !important; } .notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] { @@ -543,8 +574,12 @@ background: var(--theme--line_purple) !important; } .notion-body.dark [style*='color:rgb(226,85,161)'], -.notion-body:not(.dark) [style*='color:rgb(173,26,114)'] { +.notion-body.dark [style*='color: rgb(226, 85, 161); fill: rgb(226, 85, 161);'], +.notion-body:not(.dark) [style*='color:rgb(173,26,114)'], +.notion-body:not(.dark) + [style*='color: rgb(173, 26, 114); fill: rgb(173, 26, 114);'] { color: var(--theme--text_pink) !important; + fill: var(--theme--text_pink) !important; } .notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] { @@ -561,8 +596,13 @@ background: var(--theme--line_pink) !important; } .notion-body.dark [style*='color:rgb(255,115,105)'], -.notion-body:not(.dark) [style*='color:rgb(224,62,62)'] { +.notion-body.dark + [style*='color: rgb(255, 115, 105); fill: rgb(255, 115, 105);'], +.notion-body:not(.dark) [style*='color:rgb(224,62,62)'], +.notion-body:not(.dark) + [style*='color: rgb(224, 62, 62); fill: rgb(224, 62, 62);'] { color: var(--theme--text_red) !important; + fill: var(--theme--text_red) !important; } .notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'], .notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] { From d66ff14e2c9fb3cd959d151b9f4064030d098bac Mon Sep 17 00:00:00 2001 From: Cory Zibell Date: Sun, 6 Sep 2020 18:11:23 -0400 Subject: [PATCH 077/371] Add module to hide help button --- repo/hide-help/mod.js | 0 repo/hide-help/styles.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 repo/hide-help/mod.js create mode 100644 repo/hide-help/styles.css diff --git a/repo/hide-help/mod.js b/repo/hide-help/mod.js new file mode 100644 index 0000000..e69de29 diff --git a/repo/hide-help/styles.css b/repo/hide-help/styles.css new file mode 100644 index 0000000..e69de29 From b48cecf54db2c082922373e5a72e728a54ce9282 Mon Sep 17 00:00:00 2001 From: Cory Zibell Date: Sun, 6 Sep 2020 18:17:41 -0400 Subject: [PATCH 078/371] Add hide-help module content --- repo/hide-help/mod.js | 16 ++++++++++++++++ repo/hide-help/styles.css | 3 +++ 2 files changed, 19 insertions(+) diff --git a/repo/hide-help/mod.js b/repo/hide-help/mod.js index e69de29..3d5a69e 100644 --- a/repo/hide-help/mod.js +++ b/repo/hide-help/mod.js @@ -0,0 +1,16 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'd4ebe9f3-974a-4c01-a6a9-94bc4296851d', + tags: ['extension'], + name: 'hide help button', + desc: 'hide help button if you don\'t need it.', + version: '1.0.0', + author: 'coryzibell', +}; diff --git a/repo/hide-help/styles.css b/repo/hide-help/styles.css index e69de29..26defb3 100644 --- a/repo/hide-help/styles.css +++ b/repo/hide-help/styles.css @@ -0,0 +1,3 @@ +.notion-help-button { + display: none !important; +} \ No newline at end of file From 9147eb06e4f0c23b47d34074d48360b82e30faec Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 8 Sep 2020 22:24:02 +1000 Subject: [PATCH 079/371] callout theming + more text colour variables --- repo/core/css/theme.css | 97 ++++-- repo/core/css/variables.css | 222 +++++++++++-- repo/dark+/mod.js | 2 +- repo/dark+/styles.css | 10 + repo/gameish/mod.js | 2 +- repo/gameish/styles.css | 5 + repo/hide-help/mod.js | 8 +- repo/hide-help/styles.css | 10 +- repo/littilepig-dark/styles.css | 552 ++++---------------------------- repo/littlepig-light/styles.css | 538 ++++--------------------------- repo/neutral/mod.js | 2 +- repo/neutral/styles.css | 12 +- repo/pastel-dark/mod.js | 2 +- repo/pastel-dark/styles.css | 19 +- 14 files changed, 462 insertions(+), 1019 deletions(-) diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 428388b..7b8976e 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -10,10 +10,8 @@ /** app **/ .notion-body.dark [style*='background: rgb(55, 60, 63)'], -.notion-body.dark [style*='background: rgba(69, 75, 78, 0.3)'], .notion-body.dark [style*='background: rgb(120, 123, 123)'], .notion-body:not(.dark) [style*='background: rgb(247, 246, 243)'], -.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'], .notion-body:not(.dark) [style*='background: rgb(223, 223, 222)'] { background: var(--theme--sidebar) !important; } @@ -428,16 +426,22 @@ .notion-body.dark [style*='background: rgba(151, 154, 155, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { background: var(--theme--select_gray) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_gray-text) !important; } .notion-body.dark [style*='background:rgb(69,75,78)'], .notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { background: var(--theme--bg_gray) !important; + color: var(--theme--bg_gray-text) !important; } .notion-body.dark [style*='background: rgb(69, 75, 78)'], .notion-body:not(.dark) [style*='background: rgb(235, 236, 237)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_gray) !important; + color: var(--theme--line_gray-text) !important; +} +.notion-body.dark [style*='background: rgba(69, 75, 78, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(235, 236, 237, 0.3)'] { + background: var(--theme--callout_gray) !important; + color: var(--theme--callout_gray-text) !important; } .notion-body.dark [style*='color:rgb(147,114,100)'], .notion-body.dark @@ -445,22 +449,28 @@ .notion-body:not(.dark) [style*='color:rgb(100,71,58)'], .notion-body:not(.dark) [style*='color: rgb(100, 71, 58); fill: rgb(100, 71, 58);'] { - color: var(--theme--text_brown) !important; fill: var(--theme--text_brown) !important; + color: var(--theme--text_brown-text) !important; } .notion-body.dark [style*='background: rgba(147, 114, 100, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { background: var(--theme--select_brown) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_brown-text) !important; } .notion-body.dark [style*='background:rgb(67,64,64)'], .notion-body:not(.dark) [style*='background:rgb(233,229,227)'] { background: var(--theme--bg_brown) !important; + color: var(--theme--bg_brown-text) !important; } .notion-body.dark [style*='background: rgb(67, 64, 64)'], .notion-body:not(.dark) [style*='background: rgb(233, 229, 227)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_brown) !important; + color: var(--theme--line_brown-text) !important; +} +.notion-body.dark [style*='background: rgba(67, 64, 64, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(233, 229, 227, 0.3)'] { + background: var(--theme--callout_brown) !important; + color: var(--theme--callout_brown-text) !important; } .notion-body.dark [style*='color:rgb(255,163,68)'], .notion-body.dark [style*='color: rgb(255, 163, 68); fill: rgb(255, 163, 68);'], @@ -473,16 +483,22 @@ .notion-body.dark [style*='background: rgba(255, 163, 68, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] { background: var(--theme--select_orange) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_orange-text) !important; } .notion-body.dark [style*='background:rgb(89,74,58)'], .notion-body:not(.dark) [style*='background:rgb(250,235,221)'] { background: var(--theme--bg_orange) !important; + color: var(--theme--bg_orange-text) !important; } .notion-body.dark [style*='background: rgb(89, 74, 58)'], .notion-body:not(.dark) [style*='background: rgb(250, 235, 221)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_orange) !important; + color: var(--theme--line_orange-text) !important; +} +.notion-body.dark [style*='background: rgba(89, 74, 58, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(250, 235, 221, 0.3)'] { + background: var(--theme--callout_orange) !important; + color: var(--theme--callout_orange-text) !important; } .notion-body.dark [style*='color:rgb(255,220,73)'], .notion-body.dark [style*='color: rgb(255, 220, 73); fill: rgb(255, 220, 73);'], @@ -495,16 +511,22 @@ .notion-body.dark [style*='background: rgba(255, 220, 73, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] { background: var(--theme--select_yellow) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_yellow-text) !important; } .notion-body.dark [style*='background:rgb(89,86,59)'], .notion-body:not(.dark) [style*='background:rgb(251,243,219)'] { background: var(--theme--bg_yellow) !important; + color: var(--theme--bg_yellow-text) !important; } .notion-body.dark [style*='background: rgb(89, 86, 59)'], .notion-body:not(.dark) [style*='background: rgb(251, 243, 219)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_yellow) !important; + color: var(--theme--line_yellow-text) !important; +} +.notion-body.dark [style*='background: rgba(89, 86, 59, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(251, 243, 219, 0.3)'] { + background: var(--theme--callout_yellow) !important; + color: var(--theme--callout_yellow-text) !important; } .notion-body.dark [style*='color:rgb(77,171,154)'], .notion-body.dark [style*='color: rgb(77, 171, 154); fill: rgb(77, 171, 154);'], @@ -517,16 +539,22 @@ .notion-body.dark [style*='background: rgba(77, 171, 154, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] { background: var(--theme--select_green) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_green-text) !important; } .notion-body.dark [style*='background:rgb(53,76,75)'], .notion-body:not(.dark) [style*='background:rgb(221,237,234)'] { background: var(--theme--bg_green) !important; + color: var(--theme--bg_green-text) !important; } .notion-body.dark [style*='background: rgb(53, 76, 75)'], .notion-body:not(.dark) [style*='background: rgb(221, 237, 234)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_green) !important; + color: var(--theme--line_green-text) !important; +} +.notion-body.dark [style*='background: rgba(53, 76, 75, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(221, 237, 234, 0.3)'] { + background: var(--theme--callout_green) !important; + color: var(--theme--callout_green-text) !important; } .notion-body.dark [style*='color:rgb(82,156,202)'], .notion-body.dark [style*='color: rgb(82, 156, 202); fill: rgb(82, 156, 202);'], @@ -539,16 +567,22 @@ .notion-body.dark [style*='background: rgba(82, 156, 202, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] { background: var(--theme--select_blue) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_blue-text) !important; } .notion-body.dark [style*='background:rgb(54,73,84)'], .notion-body:not(.dark) [style*='background:rgb(221,235,241)'] { background: var(--theme--bg_blue) !important; + color: var(--theme--bg_blue-text) !important; } .notion-body.dark [style*='background: rgb(54, 73, 84)'], .notion-body:not(.dark) [style*='background: rgb(221, 235, 241)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_blue) !important; + color: var(--theme--line_blue-text) !important; +} +.notion-body.dark [style*='background: rgba(54, 73, 84, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(221, 235, 241, 0.3)'] { + background: var(--theme--callout_blue) !important; + color: var(--theme--callout_blue-text) !important; } .notion-body.dark [style*='color:rgb(154,109,215)'], .notion-body.dark @@ -562,16 +596,22 @@ .notion-body.dark [style*='background: rgba(154, 109, 215, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] { background: var(--theme--select_purple) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_purple-text) !important; } .notion-body.dark [style*='background:rgb(68,63,87)'], .notion-body:not(.dark) [style*='background:rgb(234,228,242)'] { background: var(--theme--bg_purple) !important; + color: var(--theme--bg_purple-text) !important; } .notion-body.dark [style*='background: rgb(68, 63, 87)'], .notion-body:not(.dark) [style*='background: rgb(234, 228, 242)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_purple) !important; + color: var(--theme--line_purple-text) !important; +} +.notion-body.dark [style*='background: rgba(68, 63, 87, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(234, 228, 242, 0.3)'] { + background: var(--theme--callout_purple) !important; + color: var(--theme--callout_purple-text) !important; } .notion-body.dark [style*='color:rgb(226,85,161)'], .notion-body.dark [style*='color: rgb(226, 85, 161); fill: rgb(226, 85, 161);'], @@ -584,16 +624,22 @@ .notion-body.dark [style*='background: rgba(226, 85, 161, 0.5)'], .notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] { background: var(--theme--select_pink) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_pink-text) !important; } .notion-body.dark [style*='background:rgb(83,59,76)'], .notion-body:not(.dark) [style*='background:rgb(244,223,235)'] { background: var(--theme--bg_pink) !important; + color: var(--theme--bg_pink-text) !important; } .notion-body.dark [style*='background: rgb(83, 59, 76)'], .notion-body:not(.dark) [style*='background: rgb(244, 223, 235)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_pink) !important; + color: var(--theme--line_pink-text) !important; +} +.notion-body.dark [style*='background: rgba(83, 59, 76, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(244, 223, 235, 0.3)'] { + background: var(--theme--callout_pink) !important; + color: var(--theme--callout_pink-text) !important; } .notion-body.dark [style*='color:rgb(255,115,105)'], .notion-body.dark @@ -607,22 +653,27 @@ .notion-body.dark [style*='background: rgba(255, 115, 105, 0.5);'], .notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] { background: var(--theme--select_red) !important; - color: var(--theme--select_text) !important; + color: var(--theme--select_red-text) !important; } .notion-body.dark [style*='background:rgb(89,65,65)'], .notion-body:not(.dark) [style*='background:rgb(251,228,228)'] { background: var(--theme--bg_red) !important; + color: var(--theme--bg_red-text) !important; } .notion-body.dark [style*='background: rgb(89, 65, 65)'], .notion-body:not(.dark) [style*='background: rgb(251, 228, 228)'] { - color: var(--theme--line_text) !important; background: var(--theme--line_red) !important; + color: var(--theme--line_red-text) !important; +} +.notion-body.dark [style*='background: rgba(89, 65, 65, 0.3)'], +.notion-body:not(.dark) [style*='background: rgba(251, 228, 228, 0.3)'] { + background: var(--theme--callout_red) !important; + color: var(--theme--callout_red-text) !important; } /* fix highlight padding: this isn't a typo */ [style*='background:rgb('] { padding-bottom: 3px !important; - color: var(--theme--bg_text) !important; } /** code **/ @@ -636,7 +687,7 @@ background: var(--theme--code-background) !important; } .notion-code-block > div { - color: var(--theme--code_text) !important; + color: var(--theme--code-text) !important; } .notion-code-block .token.function { color: var(--theme--code_function) !important; diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index f68ad02..1fe78f9 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -81,43 +81,90 @@ --theme_dark--text_pink: rgb(226, 85, 161); --theme_dark--text_red: rgb(255, 115, 105); - --theme_dark--select_text: var(--theme_dark--text); + --theme_dark--select-text: var(--theme_dark--text); --theme_dark--select_gray: rgba(151, 154, 155, 0.5); + --theme_dark--select_gray-text: var(--theme_dark--select-text); --theme_dark--select_brown: rgba(147, 114, 100, 0.5); + --theme_dark--select_brown-text: var(--theme_dark--select-text); --theme_dark--select_orange: rgba(255, 163, 68, 0.5); + --theme_dark--select_orange-text: var(--theme_dark--select-text); --theme_dark--select_yellow: rgba(255, 220, 73, 0.5); + --theme_dark--select_yellow-text: var(--theme_dark--select-text); --theme_dark--select_green: rgba(77, 171, 154, 0.5); + --theme_dark--select_green-text: var(--theme_dark--select-text); --theme_dark--select_blue: rgba(82, 156, 202, 0.5); + --theme_dark--select_blue-text: var(--theme_dark--select-text); --theme_dark--select_purple: rgba(154, 109, 215, 0.5); + --theme_dark--select_purple-text: var(--theme_dark--select-text); --theme_dark--select_pink: rgba(226, 85, 161, 0.5); + --theme_dark--select_pink-text: var(--theme_dark--select-text); --theme_dark--select_red: rgba(255, 115, 105, 0.5); + --theme_dark--select_red-text: var(--theme_dark--select-text); - --theme_dark--bg_text: var(--theme_dark--text); + --theme_dark--bg-text: var(--theme_dark--text); --theme_dark--bg_gray: rgb(69, 75, 78); + --theme_dark--bg_gray-text: var(--theme_dark--bg-text); --theme_dark--bg_brown: rgb(67, 64, 64); + --theme_dark--bg_brown-text: var(--theme_dark--bg-text); --theme_dark--bg_orange: rgb(89, 74, 58); + --theme_dark--bg_orange-text: var(--theme_dark--bg-text); --theme_dark--bg_yellow: rgb(89, 86, 59); + --theme_dark--bg_yellow-text: var(--theme_dark--bg-text); --theme_dark--bg_green: rgb(53, 76, 75); + --theme_dark--bg_green-text: var(--theme_dark--bg-text); --theme_dark--bg_blue: rgb(54, 73, 84); + --theme_dark--bg_blue-text: var(--theme_dark--bg-text); --theme_dark--bg_purple: rgb(68, 63, 87); + --theme_dark--bg_purple-text: var(--theme_dark--bg-text); --theme_dark--bg_pink: rgb(83, 59, 76); + --theme_dark--bg_pink-text: var(--theme_dark--bg-text); --theme_dark--bg_red: rgb(89, 65, 65); + --theme_dark--bg_red-text: var(--theme_dark--bg-text); - --theme_dark--line_text: var(--theme_dark--text); + --theme_dark--line-text: var(--theme_dark--text); --theme_dark--line_gray: rgb(69, 75, 78); + --theme_dark--line_gray-text: var(--theme_dark--line-text); --theme_dark--line_brown: rgb(67, 64, 64); + --theme_dark--line_brown-text: var(--theme_dark--line-text); --theme_dark--line_orange: rgb(89, 74, 58); + --theme_dark--line_orange-text: var(--theme_dark--line-text); --theme_dark--line_yellow: rgb(89, 86, 59); + --theme_dark--line_yellow-text: var(--theme_dark--line-text); --theme_dark--line_green: rgb(53, 76, 75); + --theme_dark--line_green-text: var(--theme_dark--line-text); --theme_dark--line_blue: rgb(54, 73, 84); + --theme_dark--line_blue-text: var(--theme_dark--line-text); --theme_dark--line_purple: rgb(68, 63, 87); + --theme_dark--line_purple-text: var(--theme_dark--line-text); --theme_dark--line_pink: rgb(83, 59, 76); + --theme_dark--line_pink-text: var(--theme_dark--line-text); --theme_dark--line_red: rgb(89, 65, 65); + --theme_dark--line_red-text: var(--theme_dark--line-text); + + --theme_dark--callout-text: var(--theme_dark--text); + --theme_dark--callout_gray: rgba(69, 75, 78, 0.3); + --theme_dark--callout_gray-text: var(--theme_dark--callout-text); + --theme_dark--callout_brown: rgba(67, 64, 64, 0.3); + --theme_dark--callout_brown-text: var(--theme_dark--callout-text); + --theme_dark--callout_orange: rgba(89, 74, 58, 0.3); + --theme_dark--callout_orange-text: var(--theme_dark--callout-text); + --theme_dark--callout_yellow: rgba(89, 86, 59, 0.3); + --theme_dark--callout_yellow-text: var(--theme_dark--callout-text); + --theme_dark--callout_green: rgba(53, 76, 75, 0.3); + --theme_dark--callout_green-text: var(--theme_dark--callout-text); + --theme_dark--callout_blue: rgba(54, 73, 84, 0.3); + --theme_dark--callout_blue-text: var(--theme_dark--callout-text); + --theme_dark--callout_purple: rgba(68, 63, 87, 0.3); + --theme_dark--callout_purple-text: var(--theme_dark--callout-text); + --theme_dark--callout_pink: rgba(83, 59, 76, 0.3); + --theme_dark--callout_pink-text: var(--theme_dark--callout-text); + --theme_dark--callout_red: rgba(89, 65, 65, 0.3); + --theme_dark--callout_red-text: var(--theme_dark--callout-text); --theme_dark--code_inline-text: #eb5757; --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15); - --theme_dark--code_text: var(--theme_dark--text); - --theme_dark--code-background: rgb(63, 68, 71); + --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_keyword: hsl(350, 40%, 70%); --theme_dark--code_tag: hsl(350, 40%, 70%); @@ -206,43 +253,90 @@ --theme_light--text_pink: rgb(173, 26, 114); --theme_light--text_red: rgb(224, 62, 62); - --theme_light--select_text: var(--theme_light--text); + --theme_light--select-text: var(--theme_light--text); --theme_light--select_gray: rgba(140, 46, 0, 0.2); + --theme_light--select_gray-text: var(--theme_light--select-text); --theme_light--select_brown: rgba(140, 46, 0, 0.2); + --theme_light--select_brown-text: var(--theme_light--select-text); --theme_light--select_orange: rgba(245, 93, 0, 0.2); + --theme_light--select_orange-text: var(--theme_light--select-text); --theme_light--select_yellow: rgba(233, 168, 0, 0.2); + --theme_light--select_yellow-text: var(--theme_light--select-text); --theme_light--select_green: rgba(0, 135, 107, 0.2); + --theme_light--select_green-text: var(--theme_light--select-text); --theme_light--select_blue: rgba(0, 120, 223, 0.2); + --theme_light--select_blue-text: var(--theme_light--select-text); --theme_light--select_purple: rgba(103, 36, 222, 0.2); + --theme_light--select_purple-text: var(--theme_light--select-text); --theme_light--select_pink: rgba(221, 0, 129, 0.2); + --theme_light--select_pink-text: var(--theme_light--select-text); --theme_light--select_red: rgba(255, 0, 26, 0.2); + --theme_light--select_red-text: var(--theme_light--select-text); - --theme_light--bg_text: var(--theme_light--text); + --theme_light--bg-text: var(--theme_light--text); --theme_light--bg_gray: rgb(235, 236, 237); + --theme_light--bg_gray-text: var(--theme_light--bg-text); --theme_light--bg_brown: rgb(233, 229, 227); + --theme_light--bg_brown-text: var(--theme_light--bg-text); --theme_light--bg_orange: rgb(250, 235, 221); + --theme_light--bg_orange-text: var(--theme_light--bg-text); --theme_light--bg_yellow: rgb(251, 243, 219); + --theme_light--bg_yellow-text: var(--theme_light--bg-text); --theme_light--bg_green: rgb(221, 237, 234); + --theme_light--bg_green-text: var(--theme_light--bg-text); --theme_light--bg_blue: rgb(221, 235, 241); + --theme_light--bg_blue-text: var(--theme_light--bg-text); --theme_light--bg_purple: rgb(234, 228, 242); + --theme_light--bg_purple-text: var(--theme_light--bg-text); --theme_light--bg_pink: rgb(244, 223, 235); + --theme_light--bg_pink-text: var(--theme_light--bg-text); --theme_light--bg_red: rgb(251, 228, 228); + --theme_light--bg_red-text: var(--theme_light--bg-text); - --theme_light--line_text: var(--theme_light--text); + --theme_light--line-text: var(--theme_light--text); --theme_light--line_gray: rgb(235, 236, 237); + --theme_light--line_gray-text: var(--theme_light--line-text); --theme_light--line_brown: rgb(233, 229, 227); + --theme_light--line_brown-text: var(--theme_light--line-text); --theme_light--line_orange: rgb(250, 235, 221); + --theme_light--line_orange-text: var(--theme_light--line-text); --theme_light--line_yellow: rgb(251, 243, 219); + --theme_light--line_yellow-text: var(--theme_light--line-text); --theme_light--line_green: rgb(221, 237, 234); + --theme_light--line_green-text: var(--theme_light--line-text); --theme_light--line_blue: rgb(221, 235, 241); + --theme_light--line_blue-text: var(--theme_light--line-text); --theme_light--line_purple: rgb(234, 228, 242); + --theme_light--line_purple-text: var(--theme_light--line-text); --theme_light--line_pink: rgb(244, 223, 235); + --theme_light--line_pink-text: var(--theme_light--line-text); --theme_light--line_red: rgb(251, 228, 228); + --theme_light--line_red-text: var(--theme_light--line-text); + + --theme_light--callout-text: var(--theme_light--text); + --theme_light--callout_gray: rgba(235, 236, 237, 0.3); + --theme_light--callout_gray-text: var(--theme_light--callout-text); + --theme_light--callout_brown: rgba(233, 229, 227, 0.3); + --theme_light--callout_brown-text: var(--theme_light--callout-text); + --theme_light--callout_orange: rgba(250, 235, 221, 0.3); + --theme_light--callout_orange-text: var(--theme_light--callout-text); + --theme_light--callout_yellow: rgba(251, 243, 219, 0.3); + --theme_light--callout_yellow-text: var(--theme_light--callout-text); + --theme_light--callout_green: rgba(221, 237, 234, 0.3); + --theme_light--callout_green-text: var(--theme_light--callout-text); + --theme_light--callout_blue: rgba(221, 235, 241, 0.3); + --theme_light--callout_blue-text: var(--theme_light--callout-text); + --theme_light--callout_purple: rgba(234, 228, 242, 0.3); + --theme_light--callout_purple-text: var(--theme_light--callout-text); + --theme_light--callout_pink: rgba(244, 223, 235, 0.3); + --theme_light--callout_pink-text: var(--theme_light--callout-text); + --theme_light--callout_red: rgba(251, 228, 228, 0.3); + --theme_light--callout_red-text: var(--theme_light--callout-text); --theme_light--code_inline-text: #eb5757; --theme_light--code_inline-background: rgba(135, 131, 120, 0.15); - --theme_light--code_text: var(--theme_light--text); - --theme_light--code-background: rgb(247, 246, 243); + --theme_light--code-text: var(--theme_light--text); + --theme_light--code-background: var(--theme_light--card); --theme_light--code_function: #dd4a68; --theme_light--code_keyword: #07a; --theme_light--code_tag: #905; @@ -320,39 +414,85 @@ --theme--text_purple: var(--theme_dark--text_purple); --theme--text_pink: var(--theme_dark--text_pink); --theme--text_red: var(--theme_dark--text_red); - --theme--select_text: var(--theme_dark--select_text); + --theme--select-text: var(--theme_dark--select-text); --theme--select_gray: var(--theme_dark--select_gray); + --theme--select_gray-text: var(--theme_dark--select_gray-text); --theme--select_brown: var(--theme_dark--select_brown); + --theme--select_brown-text: var(--theme_dark--select_brown-text); --theme--select_orange: var(--theme_dark--select_orange); + --theme--select_orange-text: var(--theme_dark--select_orange-text); --theme--select_yellow: var(--theme_dark--select_yellow); + --theme--select_yellow-text: var(--theme_dark--select_yellow-text); --theme--select_green: var(--theme_dark--select_green); + --theme--select_green-text: var(--theme_dark--select_green-text); --theme--select_blue: var(--theme_dark--select_blue); + --theme--select_blue-text: var(--theme_dark--select_blue-text); --theme--select_purple: var(--theme_dark--select_purple); + --theme--select_purple-text: var(--theme_dark--select_purple-text); --theme--select_pink: var(--theme_dark--select_pink); + --theme--select_pink-text: var(--theme_dark--select_pink-text); --theme--select_red: var(--theme_dark--select_red); - --theme--bg_text: var(--theme_dark--bg_text); + --theme--select_red-text: var(--theme_dark--select_red-text); + --theme--bg-text: var(--theme_dark--bg-text); --theme--bg_gray: var(--theme_dark--bg_gray); + --theme--bg_gray-text: var(--theme_dark--bg_gray-text); --theme--bg_brown: var(--theme_dark--bg_brown); + --theme--bg_brown-text: var(--theme_dark--bg_brown-text); --theme--bg_orange: var(--theme_dark--bg_orange); + --theme--bg_orange-text: var(--theme_dark--bg_orange-text); --theme--bg_yellow: var(--theme_dark--bg_yellow); + --theme--bg_yellow-text: var(--theme_dark--bg_yellow-text); --theme--bg_green: var(--theme_dark--bg_green); + --theme--bg_green-text: var(--theme_dark--bg_green-text); --theme--bg_blue: var(--theme_dark--bg_blue); + --theme--bg_blue-text: var(--theme_dark--bg_blue-text); --theme--bg_purple: var(--theme_dark--bg_purple); + --theme--bg_purple-text: var(--theme_dark--bg_purple-text); --theme--bg_pink: var(--theme_dark--bg_pink); + --theme--bg_pink-text: var(--theme_dark--bg_pink-text); --theme--bg_red: var(--theme_dark--bg_red); - --theme--line_text: var(--theme_dark--line_text); + --theme--bg_red-text: var(--theme_dark--bg_red-text); + --theme--line-text: var(--theme_dark--line-text); --theme--line_gray: var(--theme_dark--line_gray); + --theme--line_gray-text: var(--theme_dark--line_gray-text); --theme--line_brown: var(--theme_dark--line_brown); + --theme--line_brown-text: var(--theme_dark--line_brown-text); --theme--line_orange: var(--theme_dark--line_orange); + --theme--line_orange-text: var(--theme_dark--line_orange-text); --theme--line_yellow: var(--theme_dark--line_yellow); + --theme--line_yellow-text: var(--theme_dark--line_yellow-text); --theme--line_green: var(--theme_dark--line_green); + --theme--line_green-text: var(--theme_dark--line_green-text); --theme--line_blue: var(--theme_dark--line_blue); + --theme--line_blue-text: var(--theme_dark--line_blue-text); --theme--line_purple: var(--theme_dark--line_purple); + --theme--line_purple-text: var(--theme_dark--line_purple-text); --theme--line_pink: var(--theme_dark--line_pink); + --theme--line_pink-text: var(--theme_dark--line_pink-text); --theme--line_red: var(--theme_dark--line_red); + --theme--line_red-text: var(--theme_dark--line_red-text); + --theme--callout-text: var(--theme_dark--callout-text); + --theme--callout_gray: var(--theme_dark--callout_gray); + --theme--callout_gray-text: var(--theme_dark--callout_gray-text); + --theme--callout_brown: var(--theme_dark--callout_brown); + --theme--callout_brown-text: var(--theme_dark--callout_brown-text); + --theme--callout_orange: var(--theme_dark--callout_orange); + --theme--callout_orange-text: var(--theme_dark--callout_orange-text); + --theme--callout_yellow: var(--theme_dark--callout_yellow); + --theme--callout_yellow-text: var(--theme_dark--callout_yellow-text); + --theme--callout_green: var(--theme_dark--callout_green); + --theme--callout_green-text: var(--theme_dark--callout_green-text); + --theme--callout_blue: var(--theme_dark--callout_blue); + --theme--callout_blue-text: var(--theme_dark--callout_blue-text); + --theme--callout_purple: var(--theme_dark--callout_purple); + --theme--callout_purple-text: var(--theme_dark--callout_purple-text); + --theme--callout_pink: var(--theme_dark--callout_pink); + --theme--callout_pink-text: var(--theme_dark--callout_pink-text); + --theme--callout_red: var(--theme_dark--callout_red); + --theme--callout_red-text: var(--theme_dark--callout_red-text); --theme--code_inline-text: var(--theme_dark--code_inline-text); --theme--code_inline-background: var(--theme_dark--code_inline-background); - --theme--code_text: var(--theme_dark--code_text); + --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_keyword: var(--theme_dark--code_keyword); @@ -431,39 +571,85 @@ --theme--text_purple: var(--theme_light--text_purple); --theme--text_pink: var(--theme_light--text_pink); --theme--text_red: var(--theme_light--text_red); - --theme--select_text: var(--theme_light--select_text); + --theme--select-text: var(--theme_light--select-text); --theme--select_gray: var(--theme_light--select_gray); + --theme--select_gray-text: var(--theme_light--select_gray-text); --theme--select_brown: var(--theme_light--select_brown); + --theme--select_brown-text: var(--theme_light--select_brown-text); --theme--select_orange: var(--theme_light--select_orange); + --theme--select_orange-text: var(--theme_light--select_orange-text); --theme--select_yellow: var(--theme_light--select_yellow); + --theme--select_yellow-text: var(--theme_light--select_yellow-text); --theme--select_green: var(--theme_light--select_green); + --theme--select_green-text: var(--theme_light--select_green-text); --theme--select_blue: var(--theme_light--select_blue); + --theme--select_blue-text: var(--theme_light--select_blue-text); --theme--select_purple: var(--theme_light--select_purple); + --theme--select_purple-text: var(--theme_light--select_purple-text); --theme--select_pink: var(--theme_light--select_pink); + --theme--select_pink-text: var(--theme_light--select_pink-text); --theme--select_red: var(--theme_light--select_red); - --theme--bg_text: var(--theme_light--bg_text); + --theme--select_red-text: var(--theme_light--select_red-text); + --theme--bg-text: var(--theme_light--bg-text); --theme--bg_gray: var(--theme_light--bg_gray); + --theme--bg_gray-text: var(--theme_light--bg_gray-text); --theme--bg_brown: var(--theme_light--bg_brown); + --theme--bg_brown-text: var(--theme_light--bg_brown-text); --theme--bg_orange: var(--theme_light--bg_orange); + --theme--bg_orange-text: var(--theme_light--bg_orange-text); --theme--bg_yellow: var(--theme_light--bg_yellow); + --theme--bg_yellow-text: var(--theme_light--bg_yellow-text); --theme--bg_green: var(--theme_light--bg_green); + --theme--bg_green-text: var(--theme_light--bg_green-text); --theme--bg_blue: var(--theme_light--bg_blue); + --theme--bg_blue-text: var(--theme_light--bg_blue-text); --theme--bg_purple: var(--theme_light--bg_purple); + --theme--bg_purple-text: var(--theme_light--bg_purple-text); --theme--bg_pink: var(--theme_light--bg_pink); + --theme--bg_pink-text: var(--theme_light--bg_pink-text); --theme--bg_red: var(--theme_light--bg_red); - --theme--line_text: var(--theme_light--line_text); + --theme--bg_red-text: var(--theme_light--bg_red-text); + --theme--line-text: var(--theme_light--line-text); --theme--line_gray: var(--theme_light--line_gray); + --theme--line_gray-text: var(--theme_light--line_gray-text); --theme--line_brown: var(--theme_light--line_brown); + --theme--line_brown-text: var(--theme_light--line_brown-text); --theme--line_orange: var(--theme_light--line_orange); + --theme--line_orange-text: var(--theme_light--line_orange-text); --theme--line_yellow: var(--theme_light--line_yellow); + --theme--line_yellow-text: var(--theme_light--line_yellow-text); --theme--line_green: var(--theme_light--line_green); + --theme--line_green-text: var(--theme_light--line_green-text); --theme--line_blue: var(--theme_light--line_blue); + --theme--line_blue-text: var(--theme_light--line_blue-text); --theme--line_purple: var(--theme_light--line_purple); + --theme--line_purple-text: var(--theme_light--line_purple-text); --theme--line_pink: var(--theme_light--line_pink); + --theme--line_pink-text: var(--theme_light--line_pink-text); --theme--line_red: var(--theme_light--line_red); + --theme--line_red-text: var(--theme_light--line_red-text); + --theme--callout-text: var(--theme_light--callout-text); + --theme--callout_gray: var(--theme_light--callout_gray); + --theme--callout_gray-text: var(--theme_light--callout_gray-text); + --theme--callout_brown: var(--theme_light--callout_brown); + --theme--callout_brown-text: var(--theme_light--callout_brown-text); + --theme--callout_orange: var(--theme_light--callout_orange); + --theme--callout_orange-text: var(--theme_light--callout_orange-text); + --theme--callout_yellow: var(--theme_light--callout_yellow); + --theme--callout_yellow-text: var(--theme_light--callout_yellow-text); + --theme--callout_green: var(--theme_light--callout_green); + --theme--callout_green-text: var(--theme_light--callout_green-text); + --theme--callout_blue: var(--theme_light--callout_blue); + --theme--callout_blue-text: var(--theme_light--callout_blue-text); + --theme--callout_purple: var(--theme_light--callout_purple); + --theme--callout_purple-text: var(--theme_light--callout_purple-text); + --theme--callout_pink: var(--theme_light--callout_pink); + --theme--callout_pink-text: var(--theme_light--callout_pink-text); + --theme--callout_red: var(--theme_light--callout_red); + --theme--callout_red-text: var(--theme_light--callout_red-text); --theme--code_inline-text: var(--theme_light--code_inline-text); --theme--code_inline-background: var(--theme_light--code_inline-background); - --theme--code_text: var(--theme_light--code_text); + --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_keyword: var(--theme_light--code_keyword); diff --git a/repo/dark+/mod.js b/repo/dark+/mod.js index 6f2487a..3fbd819 100644 --- a/repo/dark+/mod.js +++ b/repo/dark+/mod.js @@ -11,7 +11,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'dark+', desc: 'a vivid-colour near-black theme.', - version: '0.1.4', + version: '0.1.5', author: 'dragonwocky', options: [ { diff --git a/repo/dark+/styles.css b/repo/dark+/styles.css index d9afdc2..5308330 100644 --- a/repo/dark+/styles.css +++ b/repo/dark+/styles.css @@ -64,6 +64,16 @@ --theme_dark--line_pink: rgba(243, 61, 158, 0.301); --theme_dark--line_red: rgba(122, 20, 20, 0.623); + --theme_dark--callout_gray: rgba(126, 128, 129, 0.089); + --theme_dark--callout_brown: #50331f59; + --theme_dark--callout_orange: rgba(255, 153, 0, 0.164); + --theme_dark--callout_yellow: rgba(183, 156, 0, 0.274); + --theme_dark--callout_green: rgba(50, 129, 47, 0.191); + --theme_dark--callout_blue: rgba(0, 90, 146, 0.294); + --theme_dark--callout_purple: rgba(90, 49, 148, 0.219); + --theme_dark--callout_pink: rgba(243, 61, 158, 0.191); + --theme_dark--callout_red: rgba(122, 20, 20, 0.376); + --theme_dark--code_inline-text: #7dc582; --theme_dark--code_inline-background: rgb(8, 8, 8); --theme_dark--code-background: rgb(8, 8, 8); diff --git a/repo/gameish/mod.js b/repo/gameish/mod.js index 66a5bf6..793f678 100644 --- a/repo/gameish/mod.js +++ b/repo/gameish/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'gameish', desc: 'a purple, "gamer-styled" theme with a blocky-font.', - version: '0.1.3', + version: '0.1.4', author: { name: 'LVL100ShrekCultist', link: 'https://www.reddit.com/user/LVL100ShrekCultist/', diff --git a/repo/gameish/styles.css b/repo/gameish/styles.css index 62500b1..95a9167 100644 --- a/repo/gameish/styles.css +++ b/repo/gameish/styles.css @@ -59,6 +59,11 @@ --theme_dark--line_yellow: var(--theme_dark--bg_yellow); --theme_dark--line_red: var(--theme_dark--bg_red); + --theme_dark--callout_brown: var(--theme_dark--bg_brown); + --theme_dark--callout_orange: var(--theme_dark--bg_orange); + --theme_dark--callout_yellow: var(--theme_dark--bg_yellow); + --theme_dark--callout_red: var(--theme_dark--bg_red); + --theme_dark--code_inline-text: #d9cbec; --theme_dark--code_inline-background: #24222c; } diff --git a/repo/hide-help/mod.js b/repo/hide-help/mod.js index 3d5a69e..76e17e8 100644 --- a/repo/hide-help/mod.js +++ b/repo/hide-help/mod.js @@ -1,6 +1,6 @@ /* - * notion-enhancer - * (c) 2020 dragonwocky (https://dragonwocky.me/) + * hide help button + * (c) 2020 coryzibell * under the MIT license */ @@ -9,8 +9,8 @@ module.exports = { id: 'd4ebe9f3-974a-4c01-a6a9-94bc4296851d', tags: ['extension'], - name: 'hide help button', - desc: 'hide help button if you don\'t need it.', + name: 'hide help', + desc: "hide the help button if you don't need it.", version: '1.0.0', author: 'coryzibell', }; diff --git a/repo/hide-help/styles.css b/repo/hide-help/styles.css index 26defb3..8fc7b8b 100644 --- a/repo/hide-help/styles.css +++ b/repo/hide-help/styles.css @@ -1,3 +1,9 @@ +/* + * hide help button + * (c) 2020 coryzibell + * under the MIT license + */ + .notion-help-button { - display: none !important; -} \ No newline at end of file + display: none !important; +} diff --git a/repo/littilepig-dark/styles.css b/repo/littilepig-dark/styles.css index fbc0efe..af8c8a1 100644 --- a/repo/littilepig-dark/styles.css +++ b/repo/littilepig-dark/styles.css @@ -10,32 +10,18 @@ --theme_dark--sidebar: #24222c; --theme_dark--dragarea: #19181f; - --theme_dark--font_sans: 'JetBrains Mono'; - --theme_dark--font_mono: 'JetBrains Mono', iawriter-mono, Nitti, Menlo, - Courier, monospace; - --theme_dark--font_code: 'JetBrains Mono', SFMono-Regular, Consolas, - 'Liberation Mono', Menlo, Courier, monospace; + --theme_light--font_sans: 'JetBrains Mono'; + --theme_light--font_serif: 'JetBrains Mono'; + --theme_light--font_mono: 'JetBrains Mono'; + --theme_light--font_code: 'JetBrains Mono'; --theme_dark--scrollbar: #221f29; - /* --theme_dark--scrollbar-border: transparent; */ --theme_dark--scrollbar_hover: #312d3c; - --theme_dark--font_title-size: 40px; - --theme_dark--font_heading1-size: 30px; - --theme_dark--font_heading2-size: 24px; - --theme_dark--font_heading3-size: 20px; - --theme_dark--font_label-size: 14px; - --theme_dark--font_body-size: 17px; - --theme_dark--font_code-size: 16px; - --theme_dark--font_sidebar-size: 14px; - - /* --theme_dark--card: rgb(53, 51, 58); */ + --theme_dark--card: #24222c; --theme_dark--gallery: rgba(162, 162, 162, 0.01); --theme_dark--table-border: rgba(148, 148, 184, 0.5); --theme_dark--interactive_hover: #282632; - /* --theme_dark--interactive_hover-border: transparent; - --theme_dark--button_close: #e81123; - --theme_dark--button_close-fill: white; */ --theme_dark--selected: #9500ff6b; --theme_dark--primary: rgb(106, 47, 200); @@ -45,91 +31,26 @@ --theme_dark--option_hover-background: rgb(20, 0, 51); - --theme_dark--danger_text: rgb(235, 87, 87); - --theme_dark--danger_border: rgba(235, 87, 87, 0.5); - --theme_dark--text: rgba(200, 200, 200, 0.8); - --theme_dark--text_ui: rgba(255, 255, 255, 0.6); - --theme_dark--text_ui_info: rgba(255, 255, 255, 0.4); /* 文本颜色 */ - --theme_dark--text_gray: rgba(151, 154, 155, 0.95); --theme_dark--text_brown: rgb(177, 144, 131); - --theme_dark--text_orange: rgb(255, 163, 68); - --theme_dark--text_yellow: rgb(255, 220, 73); --theme_dark--text_green: rgb(66, 222, 137); --theme_dark--text_blue: rgb(0, 157, 255); --theme_dark--text_purple: rgb(162, 94, 255); - --theme_dark--text_pink: rgb(226, 85, 161); --theme_dark--text_red: rgb(240, 52, 38); /* 文本背景色 */ - --theme_dark--bg_gray: rgb(234, 234, 234); - --theme_dark--bg_gray_text: rgb(17, 17, 17); - - --theme_dark--bg_brown: rgb(130, 118, 111); - --theme_dark--bg_brown_text: rgb(85, 35, 1); - - --theme_dark--bg_orange: rgb(254, 214, 155); - --theme_dark--bg_yellow_text: rgb(199, 110, 0); - - --theme_dark--bg_yellow: rgb(235, 227, 178); - --theme_dark--bg_yellow_text: rgb(138, 118, 2); - - --theme_dark--bg_green: rgb(212, 237, 218); - --theme_dark--bg_green_text: rgb(21, 87, 36); - - --theme_dark--bg_blue: rgb(204, 229, 255); - --theme_dark--bg_blue_text: rgb(0, 64, 133); - - --theme_dark--bg_purple: rgb(199, 178, 230); - --theme_dark--bg_purple_text: rgb(90, 49, 148); - - --theme_dark--bg_pink: rgb(255, 206, 228); - --theme_dark--bg_pink_text: rgb(255, 0, 127); - - --theme_dark--bg_red: rgb(248, 215, 218); - --theme_dark--bg_red_text: rgb(138, 0, 10); - - --theme_dark--select_gray: var(--theme_dark--bg_gray); - --theme_dark--select_brown: var(--theme_dark--bg_brown); - --theme_dark--select_orange: var(--theme_dark--bg_orange); - --theme_dark--select_yellow: var(--theme_dark--bg_yellow); - --theme_dark--select_green: var(--theme_dark--bg_green); - --theme_dark--select_blue: var(--theme_dark--bg_blue); - --theme_dark--select_purple: var(--theme_dark--bg_purple); - --theme_dark--select_pink: var(--theme_dark--bg_pink); - --theme_dark--select_red: var(--theme_dark--bg_red); - --theme_dark--line_gray: rgb(69, 75, 78); --theme_dark--line_brown: rgb(78, 57, 48); --theme_dark--line_orange: rgb(136, 80, 48); --theme_dark--line_yellow: #fbe2287c; --theme_dark--line_red: rgb(151, 62, 62); - --theme_dark--code_inline-text: #d9cbec; - --theme_dark--code_inline-background: rgba(135, 131, 120, 0.15); - --theme_dark--code_text: var(--theme_dark--text); - --theme_dark--code-background: rgb(63, 68, 71); - --theme_dark--code_function: rgb(179, 146, 240); - --theme_dark--code_keyword: hsl(350, 100%, 69%); - --theme_dark--code_tag: hsl(350, 40%, 70%); - --theme_dark--code_operator: hsl(40, 90%, 60%); - --theme_dark--code_important: #e90; - --theme_dark--code_property: hsl(350, 40%, 70%); - --theme_dark--code_builtin: hsl(75, 70%, 60%); - --theme_dark--code_attr-name: hsl(75, 70%, 60%); - --theme_dark--code_comment: hsl(30, 20%, 50%); - --theme_dark--code_punctuation: rgba(255, 255, 255, 0.9); - --theme_dark--code_doctype: hsl(30, 20%, 50%); - --theme_dark--code_number: hsl(159, 69%, 39%); - --theme_dark--code_string: hsl(75, 95%, 48%); - --theme_dark--code_attr-value: hsl(350, 40%, 70%); - /* 标题色 */ - --theme_dark--h1_text: #c264fe; - --theme_dark--h2_text: #e2bafe; - --theme_dark--h3_text: #7b08fa; + --littlepig_dark--h1_text: #c264fe; + --littlepig_dark--h2_text: #e2bafe; + --littlepig_dark--h3_text: #7b08fa; /* todo */ --theme_dark--option_active-color: #7b08fa; @@ -138,423 +59,91 @@ /* inline code */ --theme_dark--code_inline-text: #e0dfe2; --theme_dark--code_inline-background: rgb(179, 39, 39); + --theme_dark--code_function: rgb(179, 146, 240); + --theme_dark--code_number: hsl(159, 69%, 39%); /* 标签颜色 + 文本背景色 */ --theme_dark--bg_gray: rgb(234, 234, 234); - --theme_dark--bg_gray_text: rgb(17, 17, 17); - + --theme_dark--bg_gray-text: rgb(17, 17, 17); --theme_dark--bg_brown: rgb(206, 206, 206); - --theme_dark--bg_brown_text: rgb(85, 35, 1); - + --theme_dark--bg_brown-text: rgb(85, 35, 1); --theme_dark--bg_orange: rgb(254, 214, 155); - --theme_dark--bg_orange_text: rgb(199, 110, 0); - + --theme_dark--bg_orange-text: rgb(199, 110, 0); --theme_dark--bg_yellow: #fcffd8; - --theme_dark--bg_yellow_text: #ff8c22; - + --theme_dark--bg_yellow-text: #ff8c22; --theme_dark--bg_green: #d5fded; - --theme_dark--bg_green_text: #006a00; - + --theme_dark--bg_green-text: #006a00; --theme_dark--bg_blue: #e2f5ff; - --theme_dark--bg_blue_text: #00b2ff; - + --theme_dark--bg_blue-text: #00b2ff; --theme_dark--bg_purple: #efe6ff; - --theme_dark--bg_purple_text: #8334ff; - + --theme_dark--bg_purple-text: #8334ff; --theme_dark--bg_pink: #ffe9f1; - --theme_dark--bg_pink_text: rgb(255, 0, 127); - + --theme_dark--bg_pink-text: rgb(255, 0, 127); --theme_dark--bg_red: rgb(251, 228, 228); - --theme_dark--bg_red_text: rgb(138, 0, 10); + --theme_dark--bg_red-text: rgb(138, 0, 10); + + --theme_dark--select_gray: rgb(234, 234, 234); + --theme_dark--select_gray-text: rgb(17, 17, 17); + --theme_dark--select_brown: rgb(206, 206, 206); + --theme_dark--select_brown-text: rgb(85, 35, 1); + --theme_dark--select_orange: rgb(254, 214, 155); + --theme_dark--select_orange-text: rgb(199, 110, 0); + --theme_dark--select_yellow: #fcffd8; + --theme_dark--select_yellow-text: #ff8c22; + --theme_dark--select_green: #d5fded; + --theme_dark--select_green-text: #006a00; + --theme_dark--select_blue: #e2f5ff; + --theme_dark--select_blue-text: #00b2ff; + --theme_dark--select_purple: #efe6ff; + --theme_dark--select_purple-text: #8334ff; + --theme_dark--select_pink: #ffe9f1; + --theme_dark--select_pink-text: rgb(255, 0, 127); + --theme_dark--select_red: rgb(251, 228, 228); + --theme_dark--select_red-text: rgb(138, 0, 10); /* callout 颜色 */ - - --theme_dark--callout_bg_gray: #e2e3e5; - --theme_dark--callout_text_gray: #383d41; - - --theme_dark--callout_bg_brown: rgb(130, 118, 111); - --theme_dark--callout_text_brown: rgb(85, 35, 1); - - --theme_dark--callout_bg_orange: rgb(254, 214, 155); - --theme_dark--callout_text_orange: rgb(255, 140, 0); - - --theme_dark--callout_bg_yellow: #fcffd8; - --theme_dark--callout_text_yellow: #c76e00; - - --theme_dark--callout_bg_green: #d4edda; - --theme_dark--callout_text_green: #155724; - - --theme_dark--callout_bg_blue: #cce5ff; - --theme_dark--callout_text_blue: #004085; - - --theme_dark--callout_bg_purple: rgb(199, 178, 230); - --theme_dark--callout_text_purple: rgb(90, 49, 148); - - --theme_dark--callout_bg_pink: rgb(255, 206, 228); - --theme_dark--callout_text_pink: rgb(255, 0, 127); - - --theme_dark--callout_bg_red: #f8d7da; - --theme_dark--callout_text_red: #721c24; -} - -.notion-dark-theme - .notion-scroller.vertical.horizontal - .notion-table-view - .notion-selectable.notion-collection_view-block - > :first-child { - background: var(--theme--card) !important; + --theme_dark--callout_gray: #e2e3e5; + --theme_dark--callout_gray-text: #383d41; + --theme_dark--callout_brown: rgb(130, 118, 111); + --theme_dark--callout_brown-text: rgb(85, 35, 1); + --theme_dark--callout_orange: rgb(254, 214, 155); + --theme_dark--callout_orange-text: rgb(255, 140, 0); + --theme_dark--callout_yellow: #fcffd8; + --theme_dark--callout_yellow-text: #c76e00; + --theme_dark--callout_green: #d4edda; + --theme_dark--callout_green-text: #155724; + --theme_dark--callout_blue: #cce5ff; + --theme_dark--callout_blue-text: #004085; + --theme_dark--callout_purple: rgb(199, 178, 230); + --theme_dark--callout_purple-text: rgb(90, 49, 148); + --theme_dark--callout_pink: rgb(255, 206, 228); + --theme_dark--callout_pink-text: rgb(255, 0, 127); + --theme_dark--callout_red: #f8d7da; + --theme_dark--callout_red-text: #721c24; } /* todo 颜色 */ -.dark [style*='background: rgb(46, 170, 220)'], -.dark [style*='background-color: rgb(46, 170, 220)'] { +.notion-body.dark .notion-dark-theme [style*='background: rgb(46, 170, 220)'], +.notion-body.dark + .notion-dark-theme + [style*='background-color: rgb(46, 170, 220)'] { background: var(--theme_dark--option_active-background) !important; } -.notion-to_do-block > div [role='button']:not(:hover) .check { - background: var(--theme_dark--option_active-background) !important; -} - -.notion-to_do-block > div [role='button']:not(:hover) .check polygon { - fill: var(--theme_dark--option_active-color) !important; -} - -/*================================= 标签颜色 + 文本背景色 ===============================**/ - -/* 灰色 */ -.dark [style*='background: rgba(151, 154, 155, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_gray) !important; - color: var(--theme_dark--bg_gray_text) !important; -} -.dark [style*='background:rgb(69,75,78)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_gray) !important; - color: var(--theme_dark--bg_gray_text) !important; -} - -/* 棕色 */ -.dark [style*='background: rgba(147, 114, 100, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_brown) !important; - color: var(--theme_dark--bg_brown_text) !important; -} -.dark [style*='background:rgb(67,64,64)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_brown) !important; - color: var(--theme_dark--bg_brown_text) !important; -} - -/* 橘黄色 */ -.dark [style*='background: rgba(255, 163, 68, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_orange) !important; - color: var(--theme_dark--bg_orange_text) !important; -} - -.dark [style*='background:rgb(89,74,58)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_orange) !important; - color: var(--theme_dark--bg_orange_text) !important; -} - -/* 黄色 */ -.dark [style*='background: rgba(255, 220, 73, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_yellow) !important; - color: var(--theme_dark--bg_yellow_text) !important; -} -.dark [style*='background:rgb(89,86,59)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_yellow) !important; - color: var(--theme_dark--bg_yellow_text) !important; -} - -/* 绿色 */ -.dark [style*='background: rgba(77, 171, 154, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_green) !important; - color: var(--theme_dark--bg_green_text) !important; -} -.dark [style*='background:rgb(53,76,75)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_green) !important; - color: var(--theme_dark--bg_green_text) !important; -} - -/* 蓝色 */ -.dark [style*='background: rgba(82, 156, 202, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_blue) !important; - color: var(--theme_dark--bg_blue_text) !important; -} -.dark [style*='background:rgb(54,73,84)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_blue) !important; - color: var(--theme_dark--bg_blue_text) !important; -} - -/* 紫色 */ -.dark [style*='background: rgba(154, 109, 215, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_purple) !important; - color: var(--theme_dark--bg_purple_text) !important; -} -.dark [style*='background:rgb(68,63,87)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_purple) !important; - color: var(--theme_dark--bg_purple_text) !important; -} - -/* 粉红色 */ -.dark [style*='background: rgba(226, 85, 161, 0.5)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_pink) !important; - color: var(--theme_dark--bg_pink_text) !important; -} -.dark [style*='background:rgb(83,59,76)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_pink) !important; - color: var(--theme_dark--bg_pink_text) !important; -} - -/* 红色 */ -.dark [style*='background: rgba(255, 115, 105, 0.5);'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_red) !important; - color: var(--theme_dark--bg_red_text) !important; -} -.dark [style*='background:rgb(89,65,65)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_dark--bg_red) !important; - color: var(--theme_dark--bg_red_text) !important; -} - -/* -----------------------------callout 样式 start------------------------ */ - -/* notion-callout-block gray */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(69, 75, 78, 0.3)'] { - /* color: var(--theme_dark--callout_text_gray) !important; */ - background: var(--theme_dark--callout_bg_gray) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(69, 75, 78, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_gray) !important; -} - -/* notion-callout-block brown */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(67, 64, 64, 0.3)'] { - /* color: var(--theme_dark--callout_text_brown) !important; */ - background: var(--theme_dark--callout_bg_brown) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(67, 64, 64, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_brown) !important; -} - -/* notion-callout-block orange */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(89, 74, 58, 0.3)'] { - /* color: var(--theme_dark--callout_text_orange) !important; */ - background: var(--theme_dark--callout_bg_orange) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(89, 74, 58, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_orange) !important; -} - -/* notion-callout-block yellow */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(89, 86, 59, 0.3)'] { - /* color: var(--theme_dark--callout_text_yellow) !important; */ - background: var(--theme_dark--callout_bg_yellow) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(89, 86, 59, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_yellow) !important; -} - -/* notion-callout-block green */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(53, 76, 75, 0.3)'] { - /* color: var(--theme_dark--callout_text_green) !important; */ - background: var(--theme_dark--callout_bg_green) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(53, 76, 75, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_green) !important; -} - -/* notion-callout-block blue */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(54, 73, 84, 0.3)'] { - /* color: var(--theme_dark--callout_text_blue) !important; */ - background: var(--theme_dark--callout_bg_blue) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(54, 73, 84, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_blue) !important; -} - -/* notion-callout-block purple */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(68, 63, 87, 0.3)'] { - /* color: var(--theme_dark--callout_text_purple) !important; */ - background: var(--theme_dark--callout_bg_purple) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(68, 63, 87, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_purple) !important; -} - -/* notion-callout-block pink */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(83, 59, 76, 0.3)'] { - /* color: var(--theme_dark--callout_text_pink) !important; */ - background: var(--theme_dark--callout_bg_pink) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(83, 59, 76, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_pink) !important; -} - -/* notion-callout-block red */ -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(89, 65, 65, 0.3)'] { - /* color: var(--theme_dark--callout_text_red) !important; */ - background: var(--theme_dark--callout_bg_red) !important; - border-radius: 3px !important; -} - -.notion-dark-theme - .notion-callout-block - [style*='background: rgba(89, 65, 65, 0.3)'] - [style*='color: rgba(255, 255, 255, 0.9)'] { - color: var(--theme_dark--callout_text_red) !important; -} - -/* -----------------------------callout 样式 end---------------------------- */ /* ===================== header =========================== */ .notion-dark-theme [placeholder*='Heading 1'] { - color: var(--theme_dark--h1_text) !important; + color: var(--littlepig_dark--h1_text) !important; } .notion-dark-theme [placeholder*='Heading 2'] { margin-bottom: 16px; - border-bottom: 4px solid var(--theme_dark--h2_text); + border-bottom: 4px solid var(--littlepig_dark--h2_text); display: inline-block; - color: var(--theme_dark--h2_text) !important; + color: var(--littlepig_dark--h2_text) !important; width: auto !important; padding: 6px 12px 6px 0 !important; position: relative; } - .notion-dark-theme [placeholder*='Heading 2']::before { content: '🔥 '; } @@ -563,13 +152,12 @@ width: fit-content !important; padding: 4px 10px !important; border-radius: 10px; - border: 2px solid var(--theme_dark--h3_text); - color: var(--theme_dark--h3_text) !important; + border: 2px solid var(--littlepig_dark--h3_text); + color: var(--littlepig_dark--h3_text) !important; background-color: #fbf8e7; display: inline-block; margin-bottom: 14px; } - .notion-dark-theme [placeholder*='Heading 3']::before { content: '📌 '; } @@ -589,10 +177,9 @@ padding: 0.5em 0.5em 0.5em 1.9em !important; position: relative; margin: 10px 0; - background: #9494942e; + background: var(--theme_dark--card); border-radius: 3px; } - .notion-dark-theme .notion-quote-block [style*='caret-color: rgba(255, 255, 255, 0.9);']::before { @@ -613,13 +200,6 @@ border-width: 3px !important; opacity: 1 !important; } - .notion-dark-theme .notion-link-token span:hover { color: rgb(233, 51, 38) !important; } - -/* code */ -.dark [style*='color:#EB5757'] { - color: var(--theme_dark--code_inline-text) !important; - background: var(--theme_dark--code_inline-background) !important; -} diff --git a/repo/littlepig-light/styles.css b/repo/littlepig-light/styles.css index 334b27c..cc69dc0 100644 --- a/repo/littlepig-light/styles.css +++ b/repo/littlepig-light/styles.css @@ -7,57 +7,16 @@ :root { --theme_light--font_sans: 'JetBrains Mono'; + --theme_light--font_serif: 'JetBrains Mono'; --theme_light--font_mono: 'JetBrains Mono'; --theme_light--font_code: 'JetBrains Mono'; - --theme_light--main: white; - --theme_light--sidebar: rgb(247, 246, 243); - --theme_light--overlay: rgba(15, 15, 15, 0.6); - --theme_light--dragarea: rgba(55, 53, 47, 0.04); - --theme_light--preview-width: 977px; - --theme_light--preview-padding: 8rem; - --theme_light--preview_banner-height: 20vh; - --theme_light--page_banner-height: 30vh; - - --theme_light--font_title-size: 40px; - --theme_light--font_heading1-size: 30px; - --theme_light--font_heading2-size: 24px; - --theme_light--font_heading3-size: 20px; - --theme_light--font_label-size: 14px; - --theme_light--font_body-size: 17px; - --theme_light--font_code-size: 16px; - --theme_light--font_sidebar-size: 14px; - - --theme_light--scrollbar: #d9d8d6; - --theme_light--scrollbar-border: #cacac8; - --theme_light--scrollbar_hover: #cacac8; - - --theme_light--card: rgb(247, 247, 247); - --theme_light--gallery: rgba(55, 53, 47, 0.024); - --theme_light--table-border: rgba(55, 53, 47, 0.16); - --theme_light--interactive_hover: rgba(55, 53, 47, 0.08); - --theme_light--interactive_hover-border: transparent; - --theme_light--button_close: #e81123; - --theme_light--button_close-fill: white; - --theme_light--selected: rgba(177, 24, 24, 0.22); --theme_light--primary: rgb(177, 24, 24); --theme_light--primary_hover: rgb(202, 26, 26); --theme_light--primary_click: rgb(219, 41, 41); --theme_light--primary_indicator: rgb(202, 26, 26); - --theme_light--option-color: black; - --theme_light--option-background: transparent; - --theme_light--option_hover-color: black; - --theme_light--option_hover-background: rgba(55, 53, 47, 0.08); - - --theme_light--danger_text: rgb(235, 87, 87); - --theme_light--danger_border: rgba(235, 87, 87, 0.5); - - --theme_light--text: rgb(55, 53, 47); - --theme_light--text_ui: rgba(55, 53, 47, 0.6); - --theme_light--text_ui_info: rgba(55, 53, 47, 0.4); - /* 文本颜色 */ --theme_light--text_gray: rgba(151, 154, 155, 0.95); --theme_light--text_brown: rgb(167, 126, 100); @@ -71,67 +30,47 @@ /* 文本背景色 */ --theme_light--bg_gray: rgb(234, 234, 234); - --theme_light--bg_gray_text: rgb(17, 17, 17); - + --theme_light--bg_gray-text: rgb(17, 17, 17); --theme_light--bg_brown: rgb(206, 206, 206); - --theme_light--bg_brown_text: rgb(85, 35, 1); - + --theme_light--bg_brown-text: rgb(85, 35, 1); --theme_light--bg_orange: rgb(254, 214, 155); - --theme_light--bg_orange_text: rgb(199, 110, 0); - + --theme_light--bg_orange-text: rgb(199, 110, 0); --theme_light--bg_yellow: #fcffd8; - --theme_light--bg_yellow_text: #ff8c22; - + --theme_light--bg_yellow-text: #ff8c22; --theme_light--bg_green: #d5fded; - --theme_light--bg_green_text: #006a00; - + --theme_light--bg_green-text: #006a00; --theme_light--bg_blue: #e2f5ff; - --theme_light--bg_blue_text: #00b2ff; - + --theme_light--bg_blue-text: #00b2ff; --theme_light--bg_purple: #efe6ff; - --theme_light--bg_purple_text: #8334ff; - + --theme_light--bg_purple-text: #8334ff; --theme_light--bg_pink: #ffe9f1; - --theme_light--bg_pink_text: rgb(255, 0, 127); - + --theme_light--bg_pink-text: rgb(255, 0, 127); --theme_light--bg_red: rgb(248, 215, 218); - --theme_light--bg_red_text: rgb(138, 0, 10); + --theme_light--bg_red-text: rgb(138, 0, 10); - --theme_light--select_gray: var(--theme_light--bg_gray); - --theme_light--select_brown: var(--theme_light--bg_brown); - --theme_light--select_orange: var(--theme_light--bg_orange); - --theme_light--select_yellow: var(--theme_light--bg_yellow); - --theme_light--select_green: var(--theme_light--bg_green); - --theme_light--select_blue: var(--theme_light--bg_blue); - --theme_light--select_purple: var(--theme_light--bg_purple); - --theme_light--select_pink: var(--theme_light--bg_pink); - --theme_light--select_red: var(--theme_light--bg_red); - - /* inline code */ - --theme_light--code_inline-text: #ffffff; - --theme_light--code_inline-background: rgb(179, 39, 39); - - --theme_light--code_text: var(--theme_light--text); - --theme_light--code-background: rgb(247, 246, 243); - --theme_light--code_function: #dd4a68; - --theme_light--code_keyword: #07a; - --theme_light--code_tag: #905; - --theme_light--code_operator: #9a6e3a; - --theme_light--code_important: #e90; - --theme_light--code_property: #905; - --theme_light--code_builtin: #690; - --theme_light--code_attr-name: #690; - --theme_light--code_comment: slategray; - --theme_light--code_punctuation: #999; - --theme_light--code_doctype: slategray; - --theme_light--code_number: #905; - --theme_light--code_string: #690; - --theme_light--code_attr-value: #07a; + --theme_light--select_gray: rgb(234, 234, 234); + --theme_light--select_gray-text: rgb(17, 17, 17); + --theme_light--select_brown: rgb(206, 206, 206); + --theme_light--select_brown-text: rgb(85, 35, 1); + --theme_light--select_orange: rgb(254, 214, 155); + --theme_light--select_orange-text: rgb(199, 110, 0); + --theme_light--select_yellow: #fcffd8; + --theme_light--select_yellow-text: #ff8c22; + --theme_light--select_green: #d5fded; + --theme_light--select_green-text: #006a00; + --theme_light--select_blue: #e2f5ff; + --theme_light--select_blue-text: #00b2ff; + --theme_light--select_purple: #efe6ff; + --theme_light--select_purple-text: #8334ff; + --theme_light--select_pink: #ffe9f1; + --theme_light--select_pink-text: rgb(255, 0, 127); + --theme_light--select_red: rgb(248, 215, 218); + --theme_light--select_red-text: rgb(138, 0, 10); /* 标题色 */ - --theme_light--h1_text: #008800; - --theme_light--h2_text: #006a00; - --theme_light--h3_text: #003e00; + --littlepig_light--h1_text: #008800; + --littlepig_light--h2_text: #006a00; + --littlepig_light--h3_text: #003e00; /* todo */ --theme_light--option_active-color: #008800; @@ -142,401 +81,55 @@ --theme_light--code_inline-background: rgb(179, 39, 39); /* callout 颜色 */ - --theme_light--callout_bg_gray: #e2e3e5; - --theme_light--callout_text_gray: #383d41; - - --theme_light--callout_bg_brown: rgb(130, 118, 111); - --theme_light--callout_text_brown: rgb(85, 35, 1); - - --theme_light--callout_bg_orange: rgb(254, 214, 155); - --theme_light--callout_text_orange: rgb(255, 140, 0); - - --theme_light--callout_bg_yellow: #fcffd8; - --theme_light--callout_text_yellow: #c76e00; - - --theme_light--callout_bg_green: #d4edda; - --theme_light--callout_text_green: #155724; - - --theme_light--callout_bg_blue: #cce5ff; - --theme_light--callout_text_blue: #004085; - - --theme_light--callout_bg_purple: rgb(199, 178, 230); - --theme_light--callout_text_purple: rgb(90, 49, 148); - - --theme_light--callout_bg_pink: rgb(255, 206, 228); - --theme_light--callout_text_pink: rgb(255, 0, 127); - - --theme_light--callout_bg_red: #f8d7da; - --theme_light--callout_text_red: #721c24; + --theme_light--callout_gray: #e2e3e5; + --theme_light--callout_gray-text: #383d41; + --theme_light--callout_brown: rgb(130, 118, 111); + --theme_light--callout_brown-text: rgb(85, 35, 1); + --theme_light--callout_orange: rgb(254, 214, 155); + --theme_light--callout_orange-text: rgb(255, 140, 0); + --theme_light--callout_yellow: #fcffd8; + --theme_light--callout_yellow-text: #c76e00; + --theme_light--callout_green: #d4edda; + --theme_light--callout_green-text: #155724; + --theme_light--callout_blue: #cce5ff; + --theme_light--callout_blue-text: #004085; + --theme_light--callout_purple: rgb(199, 178, 230); + --theme_light--callout_purple-text: rgb(90, 49, 148); + --theme_light--callout_pink: rgb(255, 206, 228); + --theme_light--callout_pink-text: rgb(255, 0, 127); + --theme_light--callout_red: #f8d7da; + --theme_light--callout_red-text: #721c24; } /* todo 颜色 */ -.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'] { - background: var(--theme_light--option_active-background) !important; -} .notion-body:not(.dark) - [style*='background: rgb(46, 170, 220)'][role='button'] { - background: var(--theme_light--primary) !important; + .notion-light-theme + [style*='background: rgb(46, 170, 220)'], +.notion-body:not(.dark) + .notion-light-theme + [style*='background-color: rgb(46, 170, 220)'] { + background: var(--theme_dark--option_active-background) !important; } - +.notion-body:not(.dark) [style*='background: rgb(46, 170, 220)'][role='button'], .notion-body:not(.dark) [style*='background: rgb(46, 170, 220);'][style*='width: 26px'] { background: var(--theme_light--primary) !important; } -.notion-body:not(.dark) - .notion-to_do-block - > div - [role='button']:not(:hover) - .check { - background: var(--theme_light--option_active-background) !important; -} - -.notion-body:not(.dark) - .notion-to_do-block - > div - [role='button']:not(:hover) - .check - polygon { - fill: var(--theme_light--option_active-color) !important; -} - -/*================================= 标签颜色 + 文本背景色 ===============================**/ - -/* 灰色 */ -.notion-body:not(.dark) [style*='background: rgba(155, 154, 151, 0.4)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_gray) !important; - color: var(--theme_light--bg_gray_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(235,236,237)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_gray) !important; - color: var(--theme_light--bg_gray_text) !important; -} - -/* 棕色 */ -.notion-body:not(.dark) [style*='background: rgba(140, 46, 0, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_brown) !important; - color: var(--theme_light--bg_brown_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(233,229,227)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_brown) !important; - color: var(--theme_light--bg_brown_text) !important; -} - -/* 橘黄色 */ -.notion-body:not(.dark) [style*='background: rgba(245, 93, 0, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_orange) !important; - color: var(--theme_light--bg_orange_text) !important; -} - -.notion-body:not(.dark) [style*='background:rgb(250,235,221)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_orange) !important; - color: var(--theme_light--bg_orange_text) !important; -} - -/* 黄色 */ -.notion-body:not(.dark) [style*='background: rgba(233, 168, 0, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_yellow) !important; - color: var(--theme_light--bg_yellow_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(251,243,219)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_yellow) !important; - color: var(--theme_light--bg_yellow_text) !important; -} - -/* 绿色 */ -.notion-body:not(.dark) [style*='background: rgba(0, 135, 107, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_green) !important; - color: var(--theme_light--bg_green_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(221,237,234)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_green) !important; - color: var(--theme_light--bg_green_text) !important; -} - -/* 蓝色 */ -.notion-body:not(.dark) [style*='background: rgba(0, 120, 223, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_blue) !important; - color: var(--theme_light--bg_blue_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(221,235,241)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_blue) !important; - color: var(--theme_light--bg_blue_text) !important; -} - -/* 紫色 */ -.notion-body:not(.dark) [style*='background: rgba(103, 36, 222, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_purple) !important; - color: var(--theme_light--bg_purple_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(234,228,242)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_purple) !important; - color: var(--theme_light--bg_purple_text) !important; -} - -/* 粉红色 */ -.notion-body:not(.dark) [style*='background: rgba(221, 0, 129, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_pink) !important; - color: var(--theme_light--bg_pink_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(244,223,235)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_pink) !important; - color: var(--theme_light--bg_pink_text) !important; -} - -/* 红色 */ -.notion-body:not(.dark) [style*='background: rgba(255, 0, 26, 0.2)'] { - display: inline-block; - border-radius: 4px !important; - padding: 10px 0.4em !important; - font-weight: 500 !important; - background: var(--theme_light--bg_red) !important; - color: var(--theme_light--bg_red_text) !important; -} -.notion-body:not(.dark) [style*='background:rgb(251,228,228)'] { - display: inline-block; - border-radius: 4px !important; - padding: 0 0.4em !important; - margin: 2px 0 !important; - font-weight: 500 !important; - background: var(--theme_light--bg_red) !important; - color: var(--theme_light--bg_red_text) !important; -} - -/* -----------------------------callout 样式 start------------------------ */ - -/* notion-callout-block gray */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(235, 236, 237, 0.3);'] { - /* color: var(--theme_light--callout_text_gray) !important; */ - background: var(--theme_light--callout_bg_gray) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(235, 236, 237, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_gray) !important; -} - -/* notion-callout-block brown */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(233, 229, 227, 0.3);'] { - /* color: var(--theme_light--callout_text_brown) !important; */ - background: var(--theme_light--callout_bg_brown) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(233, 229, 227, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_brown) !important; -} - -/* notion-callout-block orange */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(250, 235, 221, 0.3);'] { - /* color: var(--theme_light--callout_text_orange) !important; */ - background: var(--theme_light--callout_bg_orange) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(250, 235, 221, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_orange) !important; -} - -/* notion-callout-block yellow */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(251, 243, 219, 0.3);'] { - /* color: var(--theme_light--callout_text_yellow) !important; */ - background: var(--theme_light--callout_bg_yellow) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(251, 243, 219, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_yellow) !important; -} - -/* notion-callout-block green */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(221, 237, 234, 0.3);'] { - /* color: var(--theme_light--callout_text_green) !important; */ - background: var(--theme_light--callout_bg_green) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(221, 237, 234, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_green) !important; -} - -/* notion-callout-block blue */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(221, 235, 241, 0.3);'] { - /* color: var(--theme_light--callout_text_blue) !important; */ - background: var(--theme_light--callout_bg_blue) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(221, 235, 241, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_blue) !important; -} - -/* notion-callout-block purple */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(234, 228, 242, 0.3);'] { - /* color: var(--theme_light--callout_text_purple) !important; */ - background: var(--theme_light--callout_bg_purple) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(234, 228, 242, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_purple) !important; -} - -/* notion-callout-block pink */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(244, 223, 235, 0.3);'] { - /* color: var(--theme_light--callout_text_pink) !important; */ - background: var(--theme_light--callout_bg_pink) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(244, 223, 235, 0.3);'][style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_pink) !important; -} - -/* notion-callout-block red */ -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(251, 228, 228, 0.3);'] { - /* color: var(--theme_light--callout_text_red) !important; */ - background: var(--theme_light--callout_bg_red) !important; - border-radius: 3px !important; -} - -.notion-body:not(.dark) - .notion-callout-block - [style*='background: rgba(251, 228, 228, 0.3);'] - [style*='color: rgb(55, 53, 47);'] { - color: var(--theme_light--callout_text_red) !important; -} - -/* -----------------------------callout 样式 end---------------------------- */ - /* ===================== header =========================== */ .notion-body:not(.dark) [placeholder*='Heading 1'] { - color: var(--theme_light--h1_text) !important; + color: var(--littlepig_light--h1_text) !important; } .notion-body:not(.dark) [placeholder*='Heading 2'] { margin-bottom: 16px; - border-bottom: 4px solid var(--theme_light--h2_text); + border-bottom: 4px solid var(--littlepig_light--h2_text); display: inline-block; - color: var(--theme_light--h2_text) !important; + color: var(--littlepig_light--h2_text) !important; width: auto !important; padding: 6px 12px 6px 0 !important; position: relative; } - .notion-body:not(.dark) [placeholder*='Heading 2']::before { content: '🔥 '; } @@ -546,12 +139,11 @@ padding: 4px 10px !important; border-radius: 10px; border: 2px solid #42b983; - color: var(--theme_light--h3_text) !important; + color: var(--littlepig_light--h3_text) !important; background-color: #fbf8e7; display: inline-block; margin-bottom: 14px; } - .notion-body:not(.dark) [placeholder*='Heading 3']::before { content: '📌 '; } @@ -569,10 +161,9 @@ padding: 0.5em 0.5em 0.5em 1.9em !important; position: relative; margin: 10px 0; - background: #9494942e; + background: var(--theme_light--card); border-radius: 3px; } - .notion-body:not(.dark) .notion-quote-block [style*='caret-color: rgb(55, 53, 47);']::before { @@ -593,13 +184,6 @@ border-width: 3px !important; opacity: 1 !important; } - .notion-body:not(.dark) .notion-link-token span:hover { color: rgb(233, 51, 38) !important; } - -/* code */ -.dark [style*='color:#EB5757'] { - color: var(--theme_light--code_inline-text) !important; - background: var(--theme_light--code_inline-background) !important; -} diff --git a/repo/neutral/mod.js b/repo/neutral/mod.js index 51c13a3..8f1533a 100644 --- a/repo/neutral/mod.js +++ b/repo/neutral/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'neutral', desc: 'smoother colours and fonts, designed to be more pleasing to the eye.', - version: '0.1.2', + version: '0.1.3', author: 'arecsu', fonts: [ 'https://rsms.me/inter/inter.css', diff --git a/repo/neutral/styles.css b/repo/neutral/styles.css index 2a7b441..ac59b4a 100644 --- a/repo/neutral/styles.css +++ b/repo/neutral/styles.css @@ -96,9 +96,19 @@ --theme_dark--line_pink: #8e4b63; --theme_dark--line_red: #8c3d3d; + --theme_dark--callout_gray: rgba(88, 88, 88, 0.175); + --theme_dark--callout_brown: rgb(51, 51, 51, 0.175); + --theme_dark--callout_orange: rgb(154, 90, 63, 0.175); + --theme_dark--callout_yellow: rgb(181, 138, 70, 0.175); + --theme_dark--callout_green: rgb(101, 121, 83, 0.175); + --theme_dark--callout_blue: rgb(53, 84, 117, 0.175); + --theme_dark--callout_purple: rgb(119, 81, 134, 0.175); + --theme_dark--callout_pink: rgb(142, 75, 99, 0.175); + --theme_dark--callout_red: rgb(140, 61, 61, 0.175); + --theme_dark--code_inline-text: var(--theme_dark--text); --theme_dark--code_inline-background: #333333; - --theme_dark--code_text: var(--theme_dark--text); + --theme_dark--code-text: var(--theme_dark--text); --theme_dark--code-background: #0e0e0e; --theme_dark--code_function: var(--theme_dark--text_blue); --theme_dark--code_keyword: var(--theme_dark--text_pink); diff --git a/repo/pastel-dark/mod.js b/repo/pastel-dark/mod.js index 31e9358..37de889 100644 --- a/repo/pastel-dark/mod.js +++ b/repo/pastel-dark/mod.js @@ -12,7 +12,7 @@ module.exports = { tags: ['theme', 'dark'], name: 'pastel dark', desc: 'a smooth-transition true dark theme with a hint of pastel.', - version: '0.1.2', + version: '0.1.3', author: { name: 'zenith_illinois', link: 'https://www.reddit.com/user/zenith_illinois/', diff --git a/repo/pastel-dark/styles.css b/repo/pastel-dark/styles.css index 5ba0826..0137242 100644 --- a/repo/pastel-dark/styles.css +++ b/repo/pastel-dark/styles.css @@ -50,7 +50,7 @@ --theme_dark--text_pink: #f7b8dc; --theme_dark--text_red: #f8acb4; - --theme_dark--select_text: rgb(55, 53, 47); + --theme_dark--select-text: rgb(55, 53, 47); --theme_dark--select_gray: #b1aeab; --theme_dark--select_brown: #d8b6a6; --theme_dark--select_orange: #fde3c0; @@ -61,7 +61,7 @@ --theme_dark--select_pink: #f7b8dc; --theme_dark--select_red: #f8acb4; - --theme_dark--bg_text: var(--theme_darl--select_text); + --theme_dark--bg-text: var(--theme_dark--select-text); --theme_dark--bg_gray: var(--theme_dark--select_gray); --theme_dark--bg_brown: var(--theme_dark--select_brown); --theme_dark--bg_orange: var(--theme_dark--select_orange); @@ -72,7 +72,7 @@ --theme_dark--bg_pink: var(--theme_dark--select_pink); --theme_dark--bg_red: var(--theme_dark--select_red); - --theme_dark--line_text: rgb(55, 53, 47); + --theme_dark--line-text: rgb(34, 34, 34); --theme_dark--line_gray: #c2c1c089; --theme_dark--line_brown: #dacec992; --theme_dark--line_orange: #fff0dc9f; @@ -83,9 +83,20 @@ --theme_dark--line_pink: #fdcce8b1; --theme_dark--line_red: #ffc8ce9e; + --theme_dark--callout-text: var(--theme_dark--line-text); + --theme_dark--callout_gray: var(--theme_dark--line_gray); + --theme_dark--callout_brown: var(--theme_dark--line_brown); + --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--code_inline-text: #b3f5c8; --theme_dark--code_inline-background: rgb(8, 8, 8); - --theme_dark--code_text: var(--theme_dark--text); + --theme_dark--code-text: var(--theme_dark--text); --theme_dark--code-background: #0f0f0f; --theme_dark--code_function: var(--theme_dark--text_blue); --theme_dark--code_keyword: var(--theme_dark--text_pink); From 76ff3bd101fbf26fb024ee31f633e9861ef34c71 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 8 Sep 2020 22:44:51 +1000 Subject: [PATCH 080/371] bypass preview extension - #81 --- repo/bypass-preview/mod.js | 44 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 repo/bypass-preview/mod.js diff --git a/repo/bypass-preview/mod.js b/repo/bypass-preview/mod.js new file mode 100644 index 0000000..4047275 --- /dev/null +++ b/repo/bypass-preview/mod.js @@ -0,0 +1,44 @@ +/* + * bypass preview + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +module.exports = { + id: 'cb6fd684-f113-4a7a-9423-8f0f0cff069f', + tags: ['extension'], + name: 'bypass preview', + desc: 'go straight to the normal full view when opening a page.', + version: '0.1.0', + author: 'dragonwocky', + hacks: { + 'renderer/preload.js'(store, __exports) { + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const attempt_interval = setInterval(enhance, 500); + function enhance() { + const notion_elem = document.querySelector( + '.notion-default-overlay-container' + ); + if (!notion_elem) return; + clearInterval(attempt_interval); + + process(); + const observer = new MutationObserver(process); + observer.observe(notion_elem, { + childList: true, + subtree: true, + }); + function process(list, observer) { + let preview = document.querySelector( + '.notion-peek-renderer [style*="height: 45px;"] a' + ); + if (preview) preview.click(); + } + } + }); + }, + }, +}; From 6299ce4b811b0f4de57df6f15370aa969e257ef8 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 17 Sep 2020 13:06:49 +1000 Subject: [PATCH 081/371] #97, #98, and small alterations. (removed platform support requests, replaced getNotion() with __notion) --- repo/calendar-scroll/mod.js | 2 +- repo/core/client.js | 3 +-- repo/core/create.js | 7 +++---- repo/core/tray.js | 11 ++++++----- repo/pastel-dark/mod.js | 3 +-- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/repo/calendar-scroll/mod.js b/repo/calendar-scroll/mod.js index 44cf64f..0e296d9 100644 --- a/repo/calendar-scroll/mod.js +++ b/repo/calendar-scroll/mod.js @@ -13,7 +13,7 @@ module.exports = { tags: ['extension'], name: 'calendar scroll', desc: - 'add a button to scroll down to the current week of a calendar for you.', + 'add a button to scroll down to the current week in fullpage/infinite-scroll calendars', version: '0.1.0', author: 'dragonwocky', hacks: { diff --git a/repo/core/client.js b/repo/core/client.js index 8aad84b..0aca69c 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -10,8 +10,7 @@ module.exports = (store, __exports) => { const electron = require('electron'), helpers = require('../../pkg/helpers.js'), - __notion = helpers.getNotion(), - notionIpc = require(`${__notion.replace( + notionIpc = require(`${helpers.__notion.replace( /\\/g, '/' )}/app/helpers/notionIpc.js`); diff --git a/repo/core/create.js b/repo/core/create.js index 14334a6..47165d0 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -15,12 +15,11 @@ module.exports = (store, __exports) => { ), // createWindow = __exports.createWindow, path = require('path'), - helpers = require('../../pkg/helpers.js'), - __notion = helpers.getNotion(); + helpers = require('../../pkg/helpers.js'); __exports.createWindow = function (relativeUrl, focused_window) { if (!relativeUrl) relativeUrl = ''; - const window_state = require(`${__notion.replace( + const window_state = require(`${helpers.__notion.replace( /\\/g, '/' )}/app/node_modules/electron-window-state/index.js`)({ @@ -47,7 +46,7 @@ module.exports = (store, __exports) => { titleBarStyle: 'hiddenInset', frame: !store().frameless, webPreferences: { - preload: path.resolve(`${__notion}/app/renderer/index.js`), + preload: path.resolve(`${helpers.__notion}/app/renderer/index.js`), webviewTag: true, session: electron.session.fromPartition('persist:notion'), }, diff --git a/repo/core/tray.js b/repo/core/tray.js index 0c004e9..871cbdb 100644 --- a/repo/core/tray.js +++ b/repo/core/tray.js @@ -14,8 +14,7 @@ module.exports = (store, __exports) => { path = require('path'), is_mac = process.platform === 'darwin', is_win = process.platform === 'win32', - helpers = require('../../pkg/helpers.js'), - __notion = helpers.getNotion(); + helpers = require('../../pkg/helpers.js'); electron.app.on('ready', () => { tray = new electron.Tray( @@ -77,12 +76,12 @@ module.exports = (store, __exports) => { function openExtensionMenu() { if (enhancer_menu) return enhancer_menu.show(); - const window_state = require(`${__notion.replace( + const window_state = require(`${helpers.__notion.replace( /\\/g, '/' )}/app/node_modules/electron-window-state/index.js`)({ file: 'menu-windowstate.json', - path: helpers.data_folder, + path: helpers.__data, defaultWidth: 275, defaultHeight: 600, }); @@ -165,7 +164,9 @@ module.exports = (store, __exports) => { click: () => { require('./create.js')( store, - require(path.resolve(`${__notion}/app/main/createWindow.js`)) + require(path.resolve( + `${helpers.__notion}/app/main/createWindow.js` + )) )( '', electron.BrowserWindow.getAllWindows().find( diff --git a/repo/pastel-dark/mod.js b/repo/pastel-dark/mod.js index 37de889..c5a5f14 100644 --- a/repo/pastel-dark/mod.js +++ b/repo/pastel-dark/mod.js @@ -16,8 +16,7 @@ module.exports = { author: { name: 'zenith_illinois', link: 'https://www.reddit.com/user/zenith_illinois/', - avatar: - 'https://cdn.discordapp.com/avatars/565182533940150283/54f36546ab586298a5df5c238cbaaa4b.png?size=128', + avatar: 'https://www.redditstatic.com/avatars/avatar_default_18_46A508.png', }, fonts: ['https://rsms.me/inter/inter.css'], }; From 525ff40bb38ceba25efcda9fc21906fc44a088b6 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 17 Sep 2020 13:44:16 +1000 Subject: [PATCH 082/371] page width variables - #81 --- repo/alwaysontop/mod.js | 4 ++-- repo/core/css/theme.css | 19 +++++++++++++++++++ repo/core/css/variables.css | 8 ++++++++ repo/neutral/styles.css | 6 +----- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/repo/alwaysontop/mod.js b/repo/alwaysontop/mod.js index 6972b63..69c5e3f 100644 --- a/repo/alwaysontop/mod.js +++ b/repo/alwaysontop/mod.js @@ -6,8 +6,8 @@ 'use strict'; -// this is actually just a pseudo mod to "separate" the button -// from the core module, but the core still handles actually +// this is just a pseudo mod to "separate" the button +// from the core module - the core still handles actually // making it work. module.exports = { id: '72886371-dada-49a7-9afc-9f275ecf29d3', diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 7b8976e..0b81eeb 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -27,6 +27,25 @@ background: var(--theme--overlay) !important; } +.notion-frame + .notion-scroller + [style*='env(safe-area-inset-'][style*=' width: 900px'], +.notion-frame + .notion-scroller + [style*='height: 30vh'] + [style*='pointer-events:'][style*='max-width: 100%; width: 900px'] { + width: var(--theme--page_normal-width) !important; +} +.notion-frame + .notion-scroller + [style*='env(safe-area-inset-'][style*=' width: 100%'], +.notion-frame + .notion-scroller + [style*='height: 30vh'] + [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] { + width: var(--theme--page_full-width) !important; +} + .notion-peek-renderer .notion-scroller.vertical [style*='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 20vh;'], diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index 1fe78f9..9f515e5 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -14,6 +14,8 @@ --theme_dark--sidebar: rgb(55, 60, 63); --theme_dark--overlay: rgba(15, 15, 15, 0.6); --theme_dark--dragarea: #272d2f; + --theme_dark--page_normal-width: 900px; + --theme_dark--page_full-width: 100%; --theme_dark--preview-width: 977px; --theme_dark--preview-padding: 8rem; --theme_dark--preview_banner-height: 20vh; @@ -186,6 +188,8 @@ --theme_light--sidebar: rgb(247, 246, 243); --theme_light--overlay: rgba(15, 15, 15, 0.6); --theme_light--dragarea: rgba(55, 53, 47, 0.04); + --theme_light--page_normal-width: 900px; + --theme_light--page_full-width: 100%; --theme_light--preview-width: 977px; --theme_light--preview-padding: 8rem; --theme_light--preview_banner-height: 20vh; @@ -358,6 +362,8 @@ --theme--sidebar: var(--theme_dark--sidebar); --theme--overlay: var(--theme_dark--overlay); --theme--dragarea: var(--theme_dark--dragarea); + --theme--page_normal-width: var(--theme_dark--page_normal-width); + --theme--page_full-width: var(--theme_dark--page_full-width); --theme--preview-width: var(--theme_dark--preview-width); --theme--preview-padding: var(--theme_dark--preview-padding); --theme--preview_banner-height: var(--theme_dark--preview_banner-height); @@ -515,6 +521,8 @@ --theme--sidebar: var(--theme_light--sidebar); --theme--overlay: var(--theme_light--overlay); --theme--dragarea: var(--theme_light--dragarea); + --theme--page_normal-width: var(--theme_dark--page_normal-width); + --theme--page_full-width: var(--theme_dark--page_full-width); --theme--preview-width: var(--theme_light--preview-width); --theme--preview-padding: var(--theme_light--preview-padding); --theme--preview_banner-height: var(--theme_light--preview_banner-height); diff --git a/repo/neutral/styles.css b/repo/neutral/styles.css index ac59b4a..1627c2c 100644 --- a/repo/neutral/styles.css +++ b/repo/neutral/styles.css @@ -12,6 +12,7 @@ --theme_dark--sidebar: #171717; --theme_dark--overlay: rgba(15, 15, 15, 0.6); --theme_dark--dragarea: #111111; + --theme_dark--page_normal-width: 100%; --theme_dark--font_sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, @@ -143,11 +144,6 @@ padding-top: 5px !important; } */ -/* increase page width */ -.notion-dark-theme .notion-frame .notion-scroller [style*='width: 900px;'] { - width: 1000px !important; -} - /* add space at the bottom of the main frame when sidebar is hidden * -- matches space at top for titlebar */ .notion-dark-theme .notion-frame { From bb3439429fe2e4c5e7f3cd3e27b2857437e7ae4e Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 17 Sep 2020 14:37:04 +1000 Subject: [PATCH 083/371] properly align rtl bullet points/checkboxes #55 though more performant, this also limits rtl to page content --- repo/core/css/theme.css | 6 +++++ repo/right-to-left/mod.js | 52 ++++++++++++++++++++++++++++----------- 2 files changed, 43 insertions(+), 15 deletions(-) diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 0b81eeb..8eb13b8 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -45,6 +45,12 @@ [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] { width: var(--theme--page_full-width) !important; } +.notion-frame .notion-scroller [style*='padding-left: 136.5px;'] { + padding-left: 0 !important; +} +.notion-frame .notion-scroller [style*='padding-right: 136.5px;'] { + padding-right: 0 !important; +} .notion-peek-renderer .notion-scroller.vertical diff --git a/repo/right-to-left/mod.js b/repo/right-to-left/mod.js index 21205fa..ccab48d 100644 --- a/repo/right-to-left/mod.js +++ b/repo/right-to-left/mod.js @@ -12,33 +12,55 @@ module.exports = { tags: ['extension'], name: 'right-to-left', desc: 'enables auto rtl/ltr text direction detection.', - version: '1.3.0', + version: '1.4.0', author: 'obahareth', hacks: { 'renderer/preload.js'(store, __exports) { + function alignPageContentToRight() { + document + .querySelectorAll( + '.notion-page-content > div[data-block-id]:not([dir])' + ) + .forEach((block) => block.setAttribute('dir', 'auto')); + document + .querySelectorAll("div[placeholder='List'], div[placeholder='To-do']") + .forEach((item) => { + item.style['text-align'] = '-webkit-auto'; + }); + } + document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; let queue = []; - const observer = new MutationObserver((list, observer) => { - if (!queue.length) requestAnimationFrame(() => process(queue)); - queue.push(...list); - }); - observer.observe(document.body, { + const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => { + if (!queue.length) requestIdleCallback(() => process(queue)); + queue.push(...list); + }), + PAGE_OBSERVER = new MutationObserver(alignPageContentToRight); + DOCUMENT_OBSERVER.observe(document.body, { childList: true, subtree: true, - characterData: true, }); function process(list) { queue = []; - for (let { target } of list) { - if (!target.innerText) continue; - if (target.getAttribute('dir') !== 'auto') - target.setAttribute('dir', 'auto'); + for (let { addedNodes } of list) { if ( - getComputedStyle(target).getPropertyValue('text-align') !== - 'start' - ) - target.style.setProperty('text-align', 'start'); + addedNodes[0] && + addedNodes[0].className === 'notion-page-content' + ) { + alignPageContentToRight(); + + const $page = document.getElementsByClassName( + 'notion-page-content' + )[0]; + if ($page) { + PAGE_OBSERVER.disconnect(); + PAGE_OBSERVER.observe($page, { + childList: true, + subtree: false, + }); + } + } } } }); From cc4e2fb807daf6a17b0508e3d2b59a79c45297da Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 18 Sep 2020 14:21:09 +1000 Subject: [PATCH 084/371] word counter extension (#88) + bugfixes --- repo/core/css/theme.css | 6 ++ repo/core/css/variables.css | 2 +- repo/core/menu.js | 2 +- repo/right-to-left/mod.js | 46 +++++----- repo/word-counter/mod.js | 150 +++++++++++++++++++++++++++++++++ repo/word-counter/question.svg | 2 + repo/word-counter/styles.css | 59 +++++++++++++ 7 files changed, 240 insertions(+), 27 deletions(-) create mode 100644 repo/word-counter/mod.js create mode 100644 repo/word-counter/question.svg create mode 100644 repo/word-counter/styles.css diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 8eb13b8..ff53d7a 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -30,12 +30,18 @@ .notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=' width: 900px'], +.notion-frame + .notion-scroller + [style*='env(safe-area-inset-'][style*=';width: 900px'], .notion-frame .notion-scroller [style*='height: 30vh'] [style*='pointer-events:'][style*='max-width: 100%; width: 900px'] { width: var(--theme--page_normal-width) !important; } +.notion-page-content [style*='max-width: 696px'] { + max-width: 100% !important; +} .notion-frame .notion-scroller [style*='env(safe-area-inset-'][style*=' width: 100%'], diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index 9f515e5..225fdd3 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -222,7 +222,7 @@ --theme_light--card: rgb(247, 247, 247); --theme_light--gallery: rgba(55, 53, 47, 0.024); --theme_light--table-border: rgba(55, 53, 47, 0.16); - --theme_light--interactive_hover: rgba(55, 53, 47, 0.08); + --theme_light--interactive_hover: rgb(239, 239, 239); --theme_light--interactive_hover-border: transparent; --theme_light--button_close: #e81123; --theme_light--button_close-fill: white; diff --git a/repo/core/menu.js b/repo/core/menu.js index 682cd98..d839720 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -203,7 +203,7 @@ window['__start'] = async () => { ($search_input.value && !innerText(mod.elem) .toLowerCase() - .includes($search_input.value.toLowerCase())) + .includes($search_input.value.toLowerCase().trim())) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; diff --git a/repo/right-to-left/mod.js b/repo/right-to-left/mod.js index ccab48d..a9592fe 100644 --- a/repo/right-to-left/mod.js +++ b/repo/right-to-left/mod.js @@ -16,19 +16,6 @@ module.exports = { author: 'obahareth', hacks: { 'renderer/preload.js'(store, __exports) { - function alignPageContentToRight() { - document - .querySelectorAll( - '.notion-page-content > div[data-block-id]:not([dir])' - ) - .forEach((block) => block.setAttribute('dir', 'auto')); - document - .querySelectorAll("div[placeholder='List'], div[placeholder='To-do']") - .forEach((item) => { - item.style['text-align'] = '-webkit-auto'; - }); - } - document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; let queue = []; @@ -36,7 +23,7 @@ module.exports = { if (!queue.length) requestIdleCallback(() => process(queue)); queue.push(...list); }), - PAGE_OBSERVER = new MutationObserver(alignPageContentToRight); + PAGE_OBSERVER = new MutationObserver(autoAlignPageContent); DOCUMENT_OBSERVER.observe(document.body, { childList: true, subtree: true, @@ -48,21 +35,30 @@ module.exports = { addedNodes[0] && addedNodes[0].className === 'notion-page-content' ) { - alignPageContentToRight(); + autoAlignPageContent(); - const $page = document.getElementsByClassName( - 'notion-page-content' - )[0]; - if ($page) { - PAGE_OBSERVER.disconnect(); - PAGE_OBSERVER.observe($page, { - childList: true, - subtree: false, - }); - } + PAGE_OBSERVER.disconnect(); + PAGE_OBSERVER.observe(addedNodes[0], { + childList: true, + subtree: false, + }); } } } + function autoAlignPageContent() { + document + .querySelectorAll( + '.notion-page-content > div[data-block-id]:not([dir])' + ) + .forEach((block) => block.setAttribute('dir', 'auto')); + document + .querySelectorAll( + "div[placeholder='List'], div[placeholder='To-do']" + ) + .forEach((item) => { + item.style['text-align'] = '-webkit-auto'; + }); + } }); }, }, diff --git a/repo/word-counter/mod.js b/repo/word-counter/mod.js new file mode 100644 index 0000000..b6ace83 --- /dev/null +++ b/repo/word-counter/mod.js @@ -0,0 +1,150 @@ +/* + * word counter + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +'use strict'; + +const { createElement } = require('../../pkg/helpers.js'), + fs = require('fs-extra'), + path = require('path'); + +module.exports = { + id: 'b99deb52-6955-43d2-a53b-a31540cd19a5', + tags: ['extension'], + name: 'word counter', + desc: + 'add page details: word/character/sentence/block count & speaking/reading times.', + version: '0.1.0', + author: 'dragonwocky', + hacks: { + 'renderer/preload.js'(store, __exports) { + const copyToClipboard = (str) => { + const el = document.createElement('textarea'); + el.value = str; + el.setAttribute('readonly', ''); + el.style.position = 'absolute'; + el.style.left = '-9999px'; + document.body.appendChild(el); + el.select(); + document.execCommand('copy'); + document.body.removeChild(el); + }, + humanTime = (mins) => { + let readable = ''; + if (1 <= mins) { + readable += `${Math.floor(mins)} min`; + if (2 <= mins) readable += 's'; + } + const secs = Math.round((mins % 1) * 60); + if (1 <= secs) { + if (1 <= mins) readable += ' '; + readable += `${secs} sec`; + if (2 <= secs) readable += 's'; + } + return readable; + }, + questionBubble = fs + .readFileSync(path.resolve(`${__dirname}/question.svg`)) + .toString(); + + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + let queue = [], + $page = document.getElementsByClassName('notion-page-content')[0]; + const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => { + if (!queue.length) requestIdleCallback(() => process(queue)); + queue.push(...list); + }), + PAGE_OBSERVER = new MutationObserver(showPageWordDetails); + DOCUMENT_OBSERVER.observe(document.body, { + childList: true, + subtree: true, + }); + function process(list) { + queue = []; + for (let { addedNodes } of list) { + if ( + addedNodes[0] && + addedNodes[0].className === 'notion-page-content' + ) { + $page = addedNodes[0]; + showPageWordDetails(); + + PAGE_OBSERVER.disconnect(); + PAGE_OBSERVER.observe($page, { + childList: true, + subtree: true, + characterData: true, + }); + } + } + } + const $container = createElement( + `
` + ), + $tooltip = createElement( + `` + ); + function showPageWordDetails() { + const details = { + words: $page.innerText.replace(/\s+/g, ' ').split(' ').length, + characters: $page.innerText.length, + sentences: $page.innerText.split('.').length, + blocks: $page.querySelectorAll('[data-block-id]').length, + }; + details['reading time'] = [ + humanTime(details.words / 275), + '~275 wpm', + ]; + details['speaking time'] = [ + humanTime(details.words / 180), + '~180 wpm', + ]; + + $container.children[0].innerHTML = ` + page details
 (click to copy) + ${Object.keys(details).reduce( + (prev, key) => + prev + + (Array.isArray(details[key]) + ? `

${ + details[key][0] + } ${key} ${questionBubble.replace( + '` + : `

${details[key]} ${key}

`), + '' + )}`; + $page.previousElementSibling.children[0].appendChild($container); + $container.offsetParent.appendChild($tooltip); + $container + .querySelectorAll('p') + .forEach((p) => + p.addEventListener('click', (e) => + copyToClipboard(e.target.innerText) + ) + ); + $container.querySelectorAll('[data-tooltip]').forEach((el) => { + el.addEventListener('mouseenter', (e) => { + $tooltip.innerText = el.getAttribute('data-tooltip'); + console.log(e.target); + $tooltip.style.top = el.parentElement.offsetTop + 2.5 + 'px'; + $tooltip.style.left = + el.parentElement.offsetLeft + + el.parentElement.offsetWidth - + 5 + + 'px'; + $tooltip.classList.add('active'); + }); + el.addEventListener('mouseleave', (e) => + $tooltip.classList.remove('active') + ); + }); + } + }); + }, + }, +}; diff --git a/repo/word-counter/question.svg b/repo/word-counter/question.svg new file mode 100644 index 0000000..798e620 --- /dev/null +++ b/repo/word-counter/question.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/repo/word-counter/styles.css b/repo/word-counter/styles.css new file mode 100644 index 0000000..434642e --- /dev/null +++ b/repo/word-counter/styles.css @@ -0,0 +1,59 @@ +/* + * word counter + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +#word-counter-details { + width: 100%; + margin-bottom: 2em; +} +#word-counter-details > div { + display: flex; + flex-wrap: wrap; + margin: -0.5em; +} +#word-counter-details > div > p { + margin: 0.5em; + font-size: var(--theme--font_label-size); + color: var(--theme--text); + border-radius: 3px; + padding: 0.25rem 0.5rem; + background: var(--theme--interactive_hover); + border: 1px solid transparent; +} +#word-counter-details > div > p:hover { + background: transparent; + border: 1px solid var(--theme--interactive_hover); +} + +#word-counter-details > div > span { + max-width: 10em; + padding: 0.4rem 0.5rem 0.25rem 0.5rem; + font-size: calc(var(--theme--font_label-size) * 0.8); + color: var(--theme--text_ui_info); +} + +#word-counter-details > div > p > svg { + height: 1em; + width: 1em; + margin: 0 0 -2px 0.3em; + color: var(--theme--text_ui_info); +} + +#word-counter-details-tooltip { + pointer-events: none; + position: absolute; + padding: 0.25em 0.5em; + border-radius: 3px; + box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, + rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; + border-right-width: 1px; + font-size: calc(var(--theme--font_label-size) * 0.8); + background: var(--theme--interactive_hover); + opacity: 0; + transition: opacity 120ms ease-in; +} +#word-counter-details-tooltip.active { + opacity: 1; +} From d3b444827a3b818b827a6d3b65146b5c3916b460 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 19 Sep 2020 23:05:43 +1000 Subject: [PATCH 085/371] new theme screenshots + bugfixes --- repo/calendar-scroll/mod.js | 2 +- repo/core/buttons.js | 2 +- repo/core/css/theme.css | 9 ++++++++- repo/right-to-left/mod.js | 2 +- repo/word-counter/styles.css | 1 + 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/repo/calendar-scroll/mod.js b/repo/calendar-scroll/mod.js index 0e296d9..9925117 100644 --- a/repo/calendar-scroll/mod.js +++ b/repo/calendar-scroll/mod.js @@ -13,7 +13,7 @@ module.exports = { tags: ['extension'], name: 'calendar scroll', desc: - 'add a button to scroll down to the current week in fullpage/infinite-scroll calendars', + 'add a button to scroll down to the current week in fullpage/infinite-scroll calendars.', version: '0.1.0', author: 'dragonwocky', hacks: { diff --git a/repo/core/buttons.js b/repo/core/buttons.js index 376f1b4..b32f84c 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -15,7 +15,7 @@ module.exports = (store) => { buttons = { element: helpers.createElement('
'), insert: [ - ...((store('mods')['72886371-dada-49a7-9afc-9f275ecf29d3'] || {}) + ...((store('mods', {})['72886371-dada-49a7-9afc-9f275ecf29d3'] || {}) .enabled ? ['alwaysontop'] : []), diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index ff53d7a..ff38b69 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -39,7 +39,8 @@ [style*='pointer-events:'][style*='max-width: 100%; width: 900px'] { width: var(--theme--page_normal-width) !important; } -.notion-page-content [style*='max-width: 696px'] { + +.notion-page-content [data-block-id][style*='max-width'] { max-width: 100% !important; } .notion-frame @@ -51,12 +52,18 @@ [style*='pointer-events:'][style*='max-width: 100%; width: 100%'] { width: var(--theme--page_full-width) !important; } +.notion-text-block [style*='padding-left: 1.5em'], .notion-frame .notion-scroller [style*='padding-left: 136.5px;'] { padding-left: 0 !important; } .notion-frame .notion-scroller [style*='padding-right: 136.5px;'] { padding-right: 0 !important; } +.notion-collection_view-block > :first-child, +.notion-collection_view-block .notion-scroller > :first-child { + padding-left: 0 !important; + padding-right: 0 !important; +} .notion-peek-renderer .notion-scroller.vertical diff --git a/repo/right-to-left/mod.js b/repo/right-to-left/mod.js index a9592fe..270669a 100644 --- a/repo/right-to-left/mod.js +++ b/repo/right-to-left/mod.js @@ -48,7 +48,7 @@ module.exports = { function autoAlignPageContent() { document .querySelectorAll( - '.notion-page-content > div[data-block-id]:not([dir])' + '.notion-page-content > div[data-block-id]:not([dir]), [placeholder="Untitled"]:not([dir])' ) .forEach((block) => block.setAttribute('dir', 'auto')); document diff --git a/repo/word-counter/styles.css b/repo/word-counter/styles.css index 434642e..c7b7700 100644 --- a/repo/word-counter/styles.css +++ b/repo/word-counter/styles.css @@ -15,6 +15,7 @@ } #word-counter-details > div > p { margin: 0.5em; + cursor: pointer; font-size: var(--theme--font_label-size); color: var(--theme--text); border-radius: 3px; From 0c18f19dac8b01f90072ad396c210a240fb1765b Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 20 Sep 2020 12:43:27 +1000 Subject: [PATCH 086/371] extension screenshots --- repo/core/buttons.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/repo/core/buttons.js b/repo/core/buttons.js index b32f84c..e93dddd 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -79,6 +79,8 @@ module.exports = (store) => { }, }; + if (!buttons.insert.includes('alwaysontop')) browser.setAlwaysOnTop(false); + (async () => { for (let btn of buttons.insert) { buttons.element.innerHTML += `

diff --git a/repo/core/menu.js b/repo/core/menu.js index d839720..22e79c6 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -184,12 +184,12 @@ window['__start'] = async () => { }; function innerText(elem) { let text = ''; - for (let node of elem.childNodes) { - if (node.nodeType === 3) text += node.textContent; - if (node.nodeType === 1) - text += ['text', 'number'].includes(node.type) - ? node.value - : innerText(node); + for (let $node of elem.childNodes) { + if ($node.nodeType === 3) text += $node.textContent; + if ($node.nodeType === 1) + text += ['text', 'number'].includes($node.type) + ? $node.value + : innerText($node); } return text; } @@ -284,20 +284,20 @@ window['__start'] = async () => { return parsed; } - let modified_notice; + let $modified_notice; function modified() { - if (modified_notice) return; - modified_notice = createAlert( + if ($modified_notice) return; + $modified_notice = createAlert( 'info', `changes may not fully apply until app relaunch.` ); - modified_notice.el + $modified_notice.el .querySelector('[data-relaunch]') .addEventListener('click', (event) => { electron.remote.app.relaunch(); electron.remote.app.quit(); }); - modified_notice.append(); + $modified_notice.append(); } const file_icon = await fs.readFile( @@ -389,15 +389,8 @@ window['__start'] = async () => { } const $modules = document.querySelector('#modules'); - for (let mod of modules.loaded.sort((a, b) => - a.tags.includes('core') || - store('mods', { [a.id]: { pinned: false } }).pinned - ? -1 - : b.tags.includes('core') || - store('mods', { [b.id]: { pinned: false } }).pinned - ? 1 - : a.name.localeCompare(b.name) - )) { + + for (let mod of modules.loaded) { for (let fonts of mod.fonts || []) { document .querySelector('head') @@ -417,37 +410,39 @@ window['__start'] = async () => { avatar: `https://github.com/${mod.author}.png`, }; mod.elem = helpers.createElement(` -
+
-

${mod.name}` - : `class="toggle"> - ${mod.name}` + : `class="toggle"> + ` - }

-

${mod.tags - .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) - .join(' ')}

-
${markdown(mod.desc)}
-

- + ` + } +

${mod.tags + .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) + .join(' ')}

+
${markdown(mod.desc)}
+

+ ${author.name} - + v${mod.version} -

-
- ${ - mod.options && mod.options.length ? '
' : '' - } -
+

+ + ${ + mod.options && mod.options.length + ? '
' + : '' + } +
`); const $enable = mod.elem.querySelector(`#enable_${mod.id}`); if ($enable) @@ -500,12 +495,96 @@ window['__start'] = async () => { } $options.appendChild($opt); } - $modules.append(mod.elem); + if (mod.tags.includes('core')) $modules.append(mod.elem); } - document .querySelectorAll('input[type="checkbox"]') .forEach((checkbox) => checkbox.addEventListener('click', (event) => event.target.blur()) ); + + // draggable re-ordering + const draggable = { + state: 0, + tags: ['b', 'span'], + $toggle: document.querySelector('#draggable-toggle'), + list: modules.loaded + .filter((m) => !m.tags.includes('core')) + .map((m) => m.elem), + target: null, + render() { + draggable.target = null; + for (let $node of draggable.list) { + $node.draggable = false; + $modules.append($node); + } + }, + mouseover(event) { + if (!draggable.target && event.target.innerText) { + for (let $node of draggable.list) $node.draggable = false; + const $node = draggable.list.find( + (node) => node.innerText === event.target.innerText + ); + if ($node) $node.draggable = draggable.state; + } + }, + }; + document.addEventListener('dragstart', (event) => { + draggable.target = event.target; + event.target.style.opacity = 0.5; + }); + document.addEventListener('dragend', (event) => { + event.target.style.opacity = ''; + }); + document.addEventListener('dragover', (event) => { + event.preventDefault(); + document + .querySelectorAll('.dragged-over') + .forEach((el) => el.classList.remove('dragged-over')); + const $node = draggable.list.find( + (node) => node.innerText === event.target.innerText + ); + if ($node) $node.classList.add('dragged-over'); + }); + document.addEventListener('drop', (event) => { + event.preventDefault(); + document + .querySelectorAll('.dragged-over') + .forEach((el) => el.classList.remove('dragged-over')); + if ( + draggable.target && + draggable.target.innerText !== event.target.innerText + ) { + const from = draggable.list.findIndex( + (node) => node.innerText === draggable.target.innerText + ), + to = draggable.list.findIndex( + (node) => node.innerText === event.target.innerText + ); + // [draggable.list[from], draggable.list[to]] = [ + // draggable.list[to], + // draggable.list[from], + // ]; -- swap + if (to >= draggable.list.length) { + let k = to - draggable.list.length; + while (k--) draggable.list.push(undefined); + } + draggable.list.splice(to, 0, draggable.list.splice(from, 1)[0]); + } + draggable.render(); + }); + document.addEventListener('mouseover', draggable.mouseover); + draggable.render(); + draggable.$toggle.addEventListener('click', (event) => { + draggable.state = !draggable.state; + draggable.tags = draggable.tags.reverse(); + draggable.$toggle.innerHTML = ` + <${draggable.tags[0]} data-bolded="configure">configure | + <${draggable.tags[1]} data-bolded="reorder">reorder + `; + $modules.classList[draggable.state ? 'add' : 'remove']('reorder'); + $modules + .querySelectorAll('input') + .forEach((input) => (input.disabled = draggable.state)); + }); }; From f0b62d8df36b8a4d71f08606f9d7a9f5e81b5792 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Thu, 1 Oct 2020 23:11:31 +1000 Subject: [PATCH 097/371] re-orderable mods: order is saved + mods are loaded according to priority --- repo/core/css/menu.css | 39 ++++++++--------- repo/core/menu.js | 76 ++++++++++++++++++---------------- repo/custom-inserts/mod.js | 5 ++- repo/material-ocean/mod.js | 18 ++++---- repo/material-ocean/styles.css | 8 ++-- repo/night-shift/mod.js | 2 +- 6 files changed, 78 insertions(+), 70 deletions(-) diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 43a26fd..17992b8 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -231,7 +231,7 @@ s { background: var(--theme--option-background); color: var(--theme--option-color); border-radius: 2px; - transition: color 200ms, background 200ms; + transition: color 200ms, background 200ms, opacity 200ms; user-select: none; } #search #tags > span:not(:last-child) { @@ -618,37 +618,38 @@ s { font-weight: bold; } -#modules.reorder section { - margin-bottom: 0.4em; +.reorder #search #tags > span, +.reorder #search #tags > span:hover { + opacity: 0.7; + background: var(--theme--option-background); } -#modules.reorder [draggable] { - margin-bottom: 1.15em; +.reorder #search #tags > .selected, +.reorder #search #tags > .selected:hover { + background: var(--tag_color, var(--theme--option_active-background)); } -#modules.reorder [draggable]::after { + +.reorder #modules .dragged-over::after { content: ''; - height: 0.3em; + height: 0.25em; width: 99%; position: absolute; - margin: 0.5em 0; + margin: 0.3em 0; opacity: 0.7; - background: var(--theme--table-border); -} -#modules.reorder [draggable].dragged-over::after { background: var(--theme--selected); } -#modules.reorder .switch, -#modules.reorder .tags, -#modules.reorder .desc, -#modules.reorder .options, -#modules.reorder .author, -#modules.reorder .version { +.reorder #modules .switch, +.reorder #modules .tags, +.reorder #modules .desc, +.reorder #modules .options, +.reorder #modules .author, +.reorder #modules .version { display: none; } -#modules.reorder label { +.reorder #modules label { cursor: pointer; } -#modules.reorder label::before { +.reorder #modules label::before { content: '::'; margin-right: 0.4em; color: var(--theme--text_ui); diff --git a/repo/core/menu.js b/repo/core/menu.js index 22e79c6..533f009 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -7,12 +7,10 @@ 'use strict'; const store = require('../../pkg/store.js'), - { id } = require('./mod.js'), helpers = require('../../pkg/helpers.js'), fs = require('fs-extra'), path = require('path'), - electron = require('electron'), - browser = electron.remote.getCurrentWindow(); + electron = require('electron'); window['__start'] = async () => { const buttons = require('./buttons.js')(() => ({ @@ -197,13 +195,15 @@ window['__start'] = async () => { modules.loaded.forEach((mod) => { const $search_input = document.querySelector('#search > input'); if ( - (mod.elem.classList.contains('enabled') && !search_filters.enabled) || - (mod.elem.classList.contains('disabled') && !search_filters.disabled) || - !mod.tags.some((tag) => search_filters.tags.has(tag)) || - ($search_input.value && - !innerText(mod.elem) - .toLowerCase() - .includes($search_input.value.toLowerCase().trim())) + !document.body.classList.contains('reorder') && + ((mod.elem.classList.contains('enabled') && !search_filters.enabled) || + (mod.elem.classList.contains('disabled') && + !search_filters.disabled) || + !mod.tags.some((tag) => search_filters.tags.has(tag)) || + ($search_input.value && + !innerText(mod.elem) + .toLowerCase() + .includes($search_input.value.toLowerCase().trim()))) ) return (mod.elem.style.display = 'none'); mod.elem.style.display = 'block'; @@ -223,21 +223,20 @@ window['__start'] = async () => { ); document.querySelector('#tags').append(el); el.addEventListener('click', (event) => { - el.className = el.className === 'selected' ? '' : 'selected'; - onclick(el.className === 'selected'); + if (!document.body.classList.contains('reorder')) { + el.className = el.className === 'selected' ? '' : 'selected'; + onclick(el.className === 'selected'); + } }); return el; } - createTag( - 'enabled', - (state) => [(search_filters.enabled = state), search()] - // 'var(--theme--bg_green)' - ); - createTag( - 'disabled', - (state) => [(search_filters.disabled = state), search()] - // 'var(--theme--bg_red)' - ); + createTag('enabled', (state) => [ + ((search_filters.enabled = state), search()), + ]); + createTag('disabled', (state) => [ + (search_filters.disabled = state), + search(), + ]); for (let tag of search_filters.tags) createTag(`#${tag}`, (state) => [ state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag), @@ -541,9 +540,10 @@ window['__start'] = async () => { document .querySelectorAll('.dragged-over') .forEach((el) => el.classList.remove('dragged-over')); - const $node = draggable.list.find( - (node) => node.innerText === event.target.innerText - ); + const $node = [ + draggable.list[0].previousElementSibling, + ...draggable.list, + ].find((node) => node.innerText === event.target.innerText); if ($node) $node.classList.add('dragged-over'); }); document.addEventListener('drop', (event) => { @@ -558,18 +558,21 @@ window['__start'] = async () => { const from = draggable.list.findIndex( (node) => node.innerText === draggable.target.innerText ), - to = draggable.list.findIndex( - (node) => node.innerText === event.target.innerText + to = + event.target.innerText === + draggable.list[0].previousElementSibling.innerText + ? 0 + : draggable.list.findIndex( + (node) => node.innerText === event.target.innerText + ) + 1; + if (to >= 0) { + draggable.list.splice( + to > from ? to - 1 : to, + 0, + draggable.list.splice(from, 1)[0] ); - // [draggable.list[from], draggable.list[to]] = [ - // draggable.list[to], - // draggable.list[from], - // ]; -- swap - if (to >= draggable.list.length) { - let k = to - draggable.list.length; - while (k--) draggable.list.push(undefined); + store('mods').priority = draggable.list.map((m) => m.id); } - draggable.list.splice(to, 0, draggable.list.splice(from, 1)[0]); } draggable.render(); }); @@ -582,9 +585,10 @@ window['__start'] = async () => { <${draggable.tags[0]} data-bolded="configure">configure | <${draggable.tags[1]} data-bolded="reorder">reorder `; - $modules.classList[draggable.state ? 'add' : 'remove']('reorder'); + document.body.classList[draggable.state ? 'add' : 'remove']('reorder'); $modules .querySelectorAll('input') .forEach((input) => (input.disabled = draggable.state)); + search(); }); }; diff --git a/repo/custom-inserts/mod.js b/repo/custom-inserts/mod.js index 59c0ba0..8ae3aa4 100644 --- a/repo/custom-inserts/mod.js +++ b/repo/custom-inserts/mod.js @@ -12,8 +12,9 @@ module.exports = { id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb', tags: ['extension'], name: 'custom inserts', - desc: 'link files for small client-side tweaks.', - version: '0.1.2', + desc: `link files for small client-side tweaks. (not sure how to do something? check out the + [tweaks](https://github.com/dragonwocky/notion-enhancer/blob/master/TWEAKS.md) collection.)`, + version: '0.1.3', author: 'dragonwocky', options: [ { diff --git a/repo/material-ocean/mod.js b/repo/material-ocean/mod.js index e4a8b42..19b6752 100644 --- a/repo/material-ocean/mod.js +++ b/repo/material-ocean/mod.js @@ -1,16 +1,16 @@ /* - * Material Ocean + * material ocean * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) - * under GNU's GPL3 license + * under the MIT license */ -"use strict"; +'use strict'; module.exports = { - id: "69e7ccb2-4aef-484c-876d-3de1b433d2b9", - tags: ["theme", "dark"], - name: "Material Ocean", - desc: "a Material theme with oceanic colors", - version: "0.1", - author: "blacksuan19", + id: '69e7ccb2-4aef-484c-876d-3de1b433d2b9', + tags: ['theme', 'dark'], + name: 'material ocean', + desc: 'an oceanic colour palette.', + version: '0.1', + author: 'blacksuan19', }; diff --git a/repo/material-ocean/styles.css b/repo/material-ocean/styles.css index 02bc6f0..cb6bc4f 100644 --- a/repo/material-ocean/styles.css +++ b/repo/material-ocean/styles.css @@ -1,8 +1,10 @@ -/* Copyright © Blacksuan19 @ 2020 */ -/* part of Material Ocean Color Scheme */ +/* + * material ocean + * (c) 2020 Abubakar Yagoub (https://blacksuan19.tk) + * under the MIT license + */ :root { - /* material ocean colors */ --ocean-main: #0f111a; --ocean-sec: #00010a; --ocean-accent: #ff4151; diff --git a/repo/night-shift/mod.js b/repo/night-shift/mod.js index 8014918..0c29d7c 100644 --- a/repo/night-shift/mod.js +++ b/repo/night-shift/mod.js @@ -12,7 +12,7 @@ module.exports = { name: 'night shift', desc: 'sync dark/light theme with the system (overrides normal theme setting).', - version: '0.1.0', + version: '0.1.1', author: 'dragonwocky', hacks: { 'renderer/preload.js'(store, __exports) { From a2f23a850ed814a64c320f9204f58d39b38887a7 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 2 Oct 2020 10:43:47 +1000 Subject: [PATCH 098/371] bugfix: toc blocks can have text colours --- repo/core/css/theme.css | 1 - repo/core/menu.js | 1 + repo/material-ocean/mod.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 4cfc448..0608b2f 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -424,7 +424,6 @@ /** content colours **/ .notion-body, -.notion-page-content [style*='color: inherit;'], .notion-frame .notion-page-block, .notion-body.dark [style*=' color: rgba(255, 255, 255, 0.9)'], .notion-body.dark [style^='color: rgba(255, 255, 255, 0.9)'], diff --git a/repo/core/menu.js b/repo/core/menu.js index 533f009..d5e72b4 100644 --- a/repo/core/menu.js +++ b/repo/core/menu.js @@ -575,6 +575,7 @@ window['__start'] = async () => { } } draggable.render(); + modified(); }); document.addEventListener('mouseover', draggable.mouseover); draggable.render(); diff --git a/repo/material-ocean/mod.js b/repo/material-ocean/mod.js index 19b6752..dd3eab5 100644 --- a/repo/material-ocean/mod.js +++ b/repo/material-ocean/mod.js @@ -11,6 +11,6 @@ module.exports = { tags: ['theme', 'dark'], name: 'material ocean', desc: 'an oceanic colour palette.', - version: '0.1', + version: '0.1.0', author: 'blacksuan19', }; From dbf12400344e349ad59e660fd1ff45f1168fcd33 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 2 Oct 2020 13:44:16 +1000 Subject: [PATCH 099/371] improved responsiveness + snappier transitions mode --- repo/core/client.js | 4 +++- repo/core/css/responsive.css | 26 ++++++++++++++++++++++++++ repo/core/css/theme.css | 6 ++++++ repo/core/css/variables.css | 16 ++++++++++------ repo/core/mod.js | 6 ++++++ repo/core/styles.css | 1 + 6 files changed, 52 insertions(+), 7 deletions(-) create mode 100644 repo/core/css/responsive.css diff --git a/repo/core/client.js b/repo/core/client.js index 396c8bd..592a2ce 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -29,9 +29,11 @@ module.exports = (store, __exports) => { return; clearInterval(attempt_interval); - // scrollbars + // toggleable styles if (store().smooth_scrollbars) document.body.classList.add('smooth-scrollbars'); + if (store().snappy_transitions) + document.body.classList.add('snappy-transitions'); // frameless if (store().frameless && !store().tiling_mode) { diff --git a/repo/core/css/responsive.css b/repo/core/css/responsive.css new file mode 100644 index 0000000..0b92c03 --- /dev/null +++ b/repo/core/css/responsive.css @@ -0,0 +1,26 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +@media (max-width: 600px) { + .notion-column_list-block [style='display: flex;'] > div { + width: 100% !important; + } + .notion-column_list-block [style='display: flex;'] { + flex-direction: column !important; + } + + .notion-app-inner { + --theme_dark--page_normal-width: 100%; + --theme_dark--page-padding: calc(48px + env(safe-area-inset-left)); + --theme_light--page_normal-width: 100%; + --theme_light--page-padding: calc(48px + env(safe-area-inset-left)); + } +} + +.snappy-transitions * { + animation-duration: 0s !important; + transition-duration: 0s !important; +} diff --git a/repo/core/css/theme.css b/repo/core/css/theme.css index 0608b2f..7778954 100644 --- a/repo/core/css/theme.css +++ b/repo/core/css/theme.css @@ -40,6 +40,12 @@ width: var(--theme--page_normal-width) !important; } +.notion-frame + [style*='padding-left: calc(96px + env(safe-area-inset-left)); padding-right: calc(96px + env(safe-area-inset-right));'] { + padding-left: var(--theme--page-padding) !important; + padding-right: var(--theme--page-padding) !important; +} + .notion-page-content [data-block-id][style*='max-width'] { max-width: 100% !important; } diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index 225fdd3..76e4bbd 100644 --- a/repo/core/css/variables.css +++ b/repo/core/css/variables.css @@ -16,10 +16,11 @@ --theme_dark--dragarea: #272d2f; --theme_dark--page_normal-width: 900px; --theme_dark--page_full-width: 100%; + --theme_dark--page-padding: calc(96px + env(safe-area-inset-left)); + --theme_dark--page_banner-height: 30vh; --theme_dark--preview-width: 977px; --theme_dark--preview-padding: 8rem; --theme_dark--preview_banner-height: 20vh; - --theme_dark--page_banner-height: 30vh; --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', @@ -190,10 +191,11 @@ --theme_light--dragarea: rgba(55, 53, 47, 0.04); --theme_light--page_normal-width: 900px; --theme_light--page_full-width: 100%; + --theme_light--page-padding: calc(96px + env(safe-area-inset-left)); + --theme_light--page_banner-height: 30vh; --theme_light--preview-width: 977px; --theme_light--preview-padding: 8rem; --theme_light--preview_banner-height: 20vh; - --theme_light--page_banner-height: 30vh; --theme_light--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', @@ -364,10 +366,11 @@ --theme--dragarea: var(--theme_dark--dragarea); --theme--page_normal-width: var(--theme_dark--page_normal-width); --theme--page_full-width: var(--theme_dark--page_full-width); + --theme--page-padding: var(--theme_dark--page-padding); + --theme--page_banner-height: var(--theme_dark--page_banner-height); --theme--preview-width: var(--theme_dark--preview-width); --theme--preview-padding: var(--theme_dark--preview-padding); --theme--preview_banner-height: var(--theme_dark--preview_banner-height); - --theme--page_banner-height: var(--theme_dark--page_banner-height); --theme--font_sans: var(--theme_dark--font_sans); --theme--font_serif: var(--theme_dark--font_serif); --theme--font_mono: var(--theme_dark--font_mono); @@ -521,12 +524,13 @@ --theme--sidebar: var(--theme_light--sidebar); --theme--overlay: var(--theme_light--overlay); --theme--dragarea: var(--theme_light--dragarea); - --theme--page_normal-width: var(--theme_dark--page_normal-width); - --theme--page_full-width: var(--theme_dark--page_full-width); + --theme--page_normal-width: var(--theme_light--page_normal-width); + --theme--page_full-width: var(--theme_light--page_full-width); + --theme--page-padding: var(--theme_light--page-padding); + --theme--page_banner-height: var(--theme_light--page_banner-height); --theme--preview-width: var(--theme_light--preview-width); --theme--preview-padding: var(--theme_light--preview-padding); --theme--preview_banner-height: var(--theme_light--preview_banner-height); - --theme--page_banner-height: var(--theme_light--page_banner-height); --theme--font_sans: var(--theme_light--font_sans); --theme--font_serif: var(--theme_light--font_serif); --theme--font_mono: var(--theme_light--font_mono); diff --git a/repo/core/mod.js b/repo/core/mod.js index 2294d0a..70bbd29 100644 --- a/repo/core/mod.js +++ b/repo/core/mod.js @@ -56,6 +56,12 @@ module.exports = { type: 'toggle', value: true, }, + { + key: 'snappy_transitions', + label: 'snappy transitions', + type: 'toggle', + value: false, + }, { key: 'hotkey', label: 'window display hotkey:', diff --git a/repo/core/styles.css b/repo/core/styles.css index da69ff5..fbfe5be 100644 --- a/repo/core/styles.css +++ b/repo/core/styles.css @@ -8,3 +8,4 @@ @import './css/variables.css'; @import './css/scrollbars.css'; @import './css/titlebar.css'; +@import './css/responsive.css'; From 45c2ebf34046371953f1d731a589f6005ba2e6f5 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 2 Oct 2020 15:46:11 +1000 Subject: [PATCH 100/371] #134 bypass preview operates more reliably when keyboard shortcuts are used --- repo/bypass-preview/mod.js | 76 ++++++++++++++-------------------- repo/bypass-preview/styles.css | 2 +- repo/core/css/titlebar.css | 10 +++-- repo/word-counter/mod.js | 4 +- 4 files changed, 41 insertions(+), 51 deletions(-) diff --git a/repo/bypass-preview/mod.js b/repo/bypass-preview/mod.js index 0a12995..2fe9f02 100644 --- a/repo/bypass-preview/mod.js +++ b/repo/bypass-preview/mod.js @@ -11,57 +11,43 @@ module.exports = { tags: ['extension'], name: 'bypass preview', desc: 'go straight to the normal full view when opening a page.', - version: '0.1.0', + version: '0.1.2', author: 'dragonwocky', hacks: { 'renderer/preload.js'(store, __exports) { document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; - const attempt_interval = setInterval(enhance, 500); - function enhance() { - const notion_elem = document.querySelector('.notion-app-inner'); - if (!notion_elem) return; - clearInterval(attempt_interval); - const observer = new MutationObserver(handle); - observer.observe(notion_elem, { - childList: true, - subtree: true, - }); + let queue = []; + const observer = new MutationObserver((list, observer) => { + if (!queue.length) requestIdleCallback(() => handle(queue)); + queue.push(...list); + }); + observer.observe(document.body, { + childList: true, + subtree: true, + attributes: true, + }); - let pageHistory = []; - handle(); - function handle(list, observer) { - const pageID = (location.search - .slice(1) - .split('&') - .map((opt) => opt.split('=')) - .find((opt) => opt[0] === 'p') || [ - '', - ...location.pathname.split(/(-|\/)/g).reverse(), - ])[1], - preview = document.querySelector( - '.notion-peek-renderer [style*="height: 45px;"] a' - ); - if ( - pageID && - (!pageHistory[0] || - pageHistory[0][0] !== pageID || - pageHistory[0][1] !== !!preview) - ) { - if (preview) { - if ( - pageHistory[1] && - pageHistory[0][0] === pageID && - pageHistory[1][0] === pageID && - pageHistory[1][1] - ) { - document.querySelector('.notion-history-back-button').click(); - } else preview.click(); - } - // most recent is at start for easier access - pageHistory.unshift([pageID, !!preview]); - } - } + let lastPageID; + function handle(list) { + queue = []; + const pageID = (location.search + .slice(1) + .split('&') + .map((opt) => opt.split('=')) + .find((opt) => opt[0] === 'p') || [ + '', + ...location.pathname.split(/(-|\/)/g).reverse(), + ])[1], + preview = document.querySelector( + '.notion-peek-renderer [style*="height: 45px;"] a' + ); + if (!pageID) return; + if (preview) { + if (pageID === lastPageID) { + history.back(); + } else preview.click(); + } else lastPageID = pageID; } }); }, diff --git a/repo/bypass-preview/styles.css b/repo/bypass-preview/styles.css index 95f2308..176a1b9 100644 --- a/repo/bypass-preview/styles.css +++ b/repo/bypass-preview/styles.css @@ -5,5 +5,5 @@ */ .notion-peek-renderer { - opacity: 0; + display: none; } diff --git a/repo/core/css/titlebar.css b/repo/core/css/titlebar.css index 0fd160f..9ab225c 100644 --- a/repo/core/css/titlebar.css +++ b/repo/core/css/titlebar.css @@ -8,19 +8,23 @@ @import './buttons.css'; .frameless .notion-topbar { - height: calc(var(--configured--dragarea_height, 10px) + 45px) !important; + height: calc(var(--configured--dragarea_height, 15px) + 45px) !important; } .frameless .window-dragarea { - height: var(--configured--dragarea_height, 10px); + height: var(--configured--dragarea_height, 15px); width: 100%; } .frameless .window-dragarea { background: var(--theme--dragarea); } +.frameless [style*='top: 10.4972px'] { + top: calc(10.4972px + var(--configured--dragarea_height, 15px)) !important; +} + @media (max-width: 760px) { .frameless .notion-topbar { - height: calc(var(--configured--dragarea_height, 10px) + 80px) !important; + height: calc(var(--configured--dragarea_height, 15px) + 80px) !important; } .frameless .notion-topbar > :nth-child(2) { height: 80px !important; diff --git a/repo/word-counter/mod.js b/repo/word-counter/mod.js index 19edd55..ea183c1 100644 --- a/repo/word-counter/mod.js +++ b/repo/word-counter/mod.js @@ -54,7 +54,7 @@ module.exports = { let queue = [], $page = document.getElementsByClassName('notion-page-content')[0]; const DOCUMENT_OBSERVER = new MutationObserver((list, observer) => { - if (!queue.length) requestIdleCallback(() => process(queue)); + if (!queue.length) requestIdleCallback(() => handle(queue)); queue.push(...list); }), PAGE_OBSERVER = new MutationObserver(showPageWordDetails); @@ -62,7 +62,7 @@ module.exports = { childList: true, subtree: true, }); - function process(list) { + function handle(list) { queue = []; for (let { addedNodes } of list) { if ( From ecdae521b4ccc403712d0427219b93b1b9417b96 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 2 Oct 2020 23:06:44 +1000 Subject: [PATCH 101/371] tabs proof-of-concept (unusable) --- repo/core/create.js | 1 + repo/core/render.js | 550 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 529 insertions(+), 22 deletions(-) diff --git a/repo/core/create.js b/repo/core/create.js index 47165d0..fb37b5a 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -79,6 +79,7 @@ module.exports = (store, __exports) => { }); electron.app.on('before-quit', () => (intended_quit = true)); window.loadURL(__exports.getIndexUrl(relativeUrl)); + window.webContents.openDevTools(); return window; }; return __exports.createWindow; diff --git a/repo/core/render.js b/repo/core/render.js index 9b17f03..dc94206 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -6,30 +6,536 @@ 'use strict'; +const url = require('url'), + path = require('path'), + { __notion } = require('../../pkg/helpers.js'), + config = require(`${__notion}/app/config.js`), + constants = require(`${__notion}/app/shared/constants.js`), + notion_intl = require(`${__notion}/app/shared/notion-intl/index.js`), + notionIpc = require(`${__notion}/app/helpers/notionIpc.js`), + localizationHelper = require(`${__notion}/app/helpers/localizationHelper.js`), + koMessages = require(`${__notion}/app/i18n/ko_KR/messages.json`), + schemeHelpers = require(`${__notion}/app/shared/schemeHelpers.js`), + React = require(`${__notion}/app/node_modules/react/index.js`), + ReactDOM = require(`${__notion}/app/node_modules/react-dom/index.js`); + module.exports = (store, __exports) => { - const __start = window['__start']; + if (store().tabs) { + class Index extends React.PureComponent { + constructor() { + super(...arguments); + this.state = { + error: false, + searching: false, + searchingPeekView: false, + zoomFactor: 1, + tabs: 2, + }; + this.notionElm = []; + this.loadedElms = []; + this.reactTabs = []; + this.handleNotionRef = (notionElm) => { + this.notionElm.push(notionElm); + }; + this.searchElm = null; + this.handleSearchRef = (searchElm) => { + this.searchElm = searchElm; + }; + this.handleReload = () => { + this.setState({ error: false }); + setTimeout(() => { + if (this.notionElm.length) { + this.notionElm.forEach(($notion) => { + if ($notion.isWaitingForResponse()) $notion.reload(); + }); + } + }, 50); + }; + window['newtab'] = () => { + this.setState({ tabs: this.state.tabs + 1 }); + setTimeout(() => this.addListeners(), 100); + }; + } + componentDidMount() { + this.addListeners(); + } + addListeners() { + const searchElm = this.searchElm; + const notionElm = this.notionElm; + if (!searchElm || !notionElm.length) { + return; + } - window['__start'] = function () { - __start(); - const dragarea = document.querySelector( - '#root [style*="-webkit-app-region: drag"]' - ), - default_styles = dragarea.getAttribute('style'); - - if (store().tiling_mode) { - dragarea.style.display = 'none'; - } else { - document - .getElementById('notion') - .addEventListener('ipc-message', (event) => { - if (event.channel !== 'enhancer:sidebar-width') return; - dragarea.setAttribute( - 'style', - `${default_styles} top: 2px; height: ${ - store().dragarea_height - }px; left: ${event.args[0]};` + notionElm + .filter(($notion) => !this.loadedElms.includes($notion)) + .forEach(($notion) => { + this.loadedElms.push($notion); + $notion.addEventListener('did-fail-load', (error) => { + // logger.info('Failed to load:', error); + if (error.errorCode === -3) { + return; + } + if ( + !error.validatedURL.startsWith( + schemeHelpers.getSchemeUrl({ + httpUrl: config.default.baseURL, + protocol: config.default.protocol, + }) + ) + ) { + return; + } + this.setState({ error: true }); + }); + notionIpc.receiveIndexFromNotion.addListener( + $notion, + 'search:start', + (isPeekView) => { + this.setState({ + searching: true, + searchingPeekView: isPeekView, + }); + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + searchElm.focus(); + notionIpc.sendIndexToSearch(searchElm, 'search:start'); + notionIpc.sendIndexToNotion(searchElm, 'search:started'); + } + ); + notionIpc.receiveIndexFromNotion.addListener( + $notion, + 'search:stop', + () => { + notionIpc.sendIndexToSearch(searchElm, 'search:reset'); + this.setState({ + searching: false, + }); + this.lastSearchQuery = undefined; + $notion.getWebContents().stopFindInPage('clearSelection'); + notionIpc.sendIndexToNotion($notion, 'search:stopped'); + } + ); + notionIpc.receiveIndexFromSearch.addListener( + searchElm, + 'search:next', + (query) => { + $notion.getWebContents().findInPage(query, { + forward: true, + findNext: query === this.lastSearchQuery, + }); + this.lastSearchQuery = query; + } + ); + notionIpc.receiveIndexFromSearch.addListener( + searchElm, + 'search:prev', + (query) => { + $notion.getWebContents().findInPage(query, { + forward: false, + findNext: query === this.lastSearchQuery, + }); + this.lastSearchQuery = query; + } + ); + notionIpc.receiveIndexFromSearch.addListener( + searchElm, + 'search:clear', + () => { + this.lastSearchQuery = undefined; + $notion.getWebContents().stopFindInPage('clearSelection'); + } + ); + notionIpc.receiveIndexFromSearch.addListener( + searchElm, + 'search:stop', + () => { + this.lastSearchQuery = undefined; + $notion.getWebContents().stopFindInPage('clearSelection'); + this.setState({ searching: false }); + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + $notion.focus(); + notionIpc.sendIndexToNotion($notion, 'search:stopped'); + } + ); + $notion.addEventListener('dom-ready', () => { + $notion + .getWebContents() + .addListener('found-in-page', (event, result) => { + const matches = result + ? { + count: result.matches, + index: result.activeMatchOrdinal, + } + : { count: 0, index: 0 }; + notionIpc.sendIndexToSearch( + searchElm, + 'search:result', + matches + ); + }); + notionIpc.proxyAllMainToNotion($notion); + }); + notionIpc.receiveIndexFromNotion.addListener( + $notion, + 'search:set-theme', + (theme) => { + notionIpc.sendIndexToSearch( + searchElm, + 'search:set-theme', + theme + ); + } + ); + notionIpc.receiveIndexFromNotion.addListener( + $notion, + 'zoom', + (zoomFactor) => { + $notion.getWebContents().setZoomFactor(zoomFactor); + searchElm.getWebContents().setZoomFactor(zoomFactor); + this.setState({ zoomFactor }); + } + ); + let electronWindow; + try { + electronWindow = electron.remote.getCurrentWindow(); + } catch (error) { + notionIpc.sendToMain('notion:log-error', { + level: 'error', + from: 'index', + type: 'GetCurrentWindowError', + error: error.message, + }); + } + if (!electronWindow) { + this.setState({ error: true }); + this.handleReload(); + return; + } + electronWindow.on('focus', (e) => { + $notion.focus(); + }); + $notion.addEventListener('dom-ready', function () { + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + $notion.blur(); + $notion.focus(); + }); + electronWindow.addListener('app-command', (e, cmd) => { + const webContents = $notion.getWebContents(); + if (cmd === 'browser-backward' && webContents.canGoBack()) { + webContents.goBack(); + } else if ( + cmd === 'browser-forward' && + webContents.canGoForward() + ) { + webContents.goForward(); + } + }); + electronWindow.addListener('swipe', (e, dir) => { + const webContents = $notion.getWebContents(); + if (dir === 'left' && webContents.canGoBack()) { + webContents.goBack(); + } else if (dir === 'right' && webContents.canGoForward()) { + webContents.goForward(); + } + }); + const sendFullScreenChangeEvent = () => { + notionIpc.sendIndexToNotion( + $notion, + 'notion:full-screen-changed' + ); + }; + electronWindow.addListener( + 'enter-full-screen', + sendFullScreenChangeEvent + ); + electronWindow.addListener( + 'leave-full-screen', + sendFullScreenChangeEvent + ); + electronWindow.addListener( + 'enter-html-full-screen', + sendFullScreenChangeEvent + ); + electronWindow.addListener( + 'leave-html-full-screen', + sendFullScreenChangeEvent + ); + }); + } + renderSearchContainer() { + return React.createElement( + 'div', + { style: this.getSearchContainerStyle() }, + React.createElement('webview', { + id: 'search', + style: this.getSearchWebviewStyle(), + ref: this.handleSearchRef, + partition: constants.electronSessionPartition, + preload: `file://${path.resolve( + `${__notion}/app/renderer/search.js` + )}`, + src: `file://${path.resolve( + `${__notion}/app/renderer/search.html` + )}`, + }) + ); + } + renderNotionContainer() { + this.reactTabs = [ + ...this.reactTabs, + ...new Array(this.state.tabs - this.reactTabs.length) + .fill(0) + .map((i) => + React.createElement('webview', { + className: 'notion', + style: Index.notionWebviewStyle, + ref: this.handleNotionRef, + partition: constants.electronSessionPartition, + preload: path.resolve(`${__notion}/app/renderer/preload.js`), + src: this.props.notionUrl, + }) + ), + ]; + return React.createElement( + 'div', + { style: this.getNotionContainerStyle() }, + ...this.reactTabs + ); + } + renderErrorContainer() { + return React.createElement( + 'div', + { style: this.getErrorContainerStyle() }, + React.createElement('img', { + style: Index.frontImageStyle, + src: './onboarding-offline.png', + }), + React.createElement( + 'div', + { style: Index.frontMessageStyle }, + React.createElement( + 'div', + null, + React.createElement(notion_intl.FormattedMessage, { + id: 'desktopLogin.offline.title', + defaultMessage: 'Welcome to Notion!', + values: { + strong: (...chunks) => + React.createElement('strong', null, chunks), + }, + }) + ), + React.createElement( + 'div', + null, + React.createElement(notion_intl.FormattedMessage, { + id: 'desktopLogin.offline.message', + defaultMessage: 'Connect to the internet to get started.', + }) + ) + ), + React.createElement( + 'div', + null, + React.createElement( + 'button', + { style: Index.reloadButtonStyle, onClick: this.handleReload }, + React.createElement(notion_intl.FormattedMessage, { + id: + 'desktopLogin.offline.retryConnectingToInternetButton.label', + defaultMessage: 'Try again', + }) + ) + ) + ); + } + renderDragRegion() { + return React.createElement('div', { style: Index.dragRegionStyle }); + } + render() { + const notionLocale = localizationHelper.getNotionLocaleFromElectronLocale( + window.navigator.language + ), + result = React.createElement( + notion_intl.IntlProvider, + { + locale: notionLocale, + messages: notionLocale === 'ko-KR' ? koMessages : {}, + }, + this.renderDragRegion(), + this.renderNotionContainer(), + this.renderSearchContainer(), + this.renderErrorContainer() ); - }); + this.addListeners(); + return result; + } + getNotionContainerStyle() { + const style = { + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + display: this.state.error ? 'none' : 'flex', + }; + return style; + } + getErrorContainerStyle() { + const style = { + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + display: this.state.error ? 'flex' : 'none', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: 24, + paddingBottom: '8vh', + }; + return style; + } + getSearchWebviewStyle() { + const style = { + width: '100%', + height: '100%', + transition: 'transform 70ms ease-in', + transform: 'translateY(-100%)', + pointerEvents: 'none', + }; + if (this.state.searching) { + style.transition = 'transform 70ms ease-out'; + style.transform = 'translateY(0%)'; + style.pointerEvents = 'auto'; + } + return style; + } + getSearchContainerStyle() { + const style = { + position: 'fixed', + overflow: 'hidden', + pointerEvents: 'none', + padding: '0 20px', + top: + (this.state.searchingPeekView + ? 0 + : process.platform === 'darwin' + ? 37 + : 45) * this.state.zoomFactor, + right: (48 - 24) * this.state.zoomFactor, + width: 440 * this.state.zoomFactor, + height: 72 * this.state.zoomFactor, + }; + return style; + } } - }; + Index.frontMessageStyle = { + paddingTop: 16, + paddingBottom: 16, + textAlign: 'center', + lineHeight: 1.4, + fontSize: 17, + letterSpacing: '-0.01em', + color: '#424241', + fontWeight: 500, + }; + Index.reloadButtonStyle = { + background: '#fefaf8', + border: '1px solid #f1cbca', + boxSizing: 'border-box', + boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)', + borderRadius: 3, + lineHeight: 'normal', + fontSize: 14, + fontWeight: 600, + letterSpacing: '-0.03em', + color: '#d8615c', + paddingLeft: 12, + paddingRight: 12, + height: 36, + }; + Index.frontImageStyle = { + width: 300, + maxWidth: '100%', + }; + Index.notionWebviewStyle = { + width: '100%', + height: '100%', + }; + Index.dragRegionStyle = { + position: 'absolute', + zIndex: 9999, + top: 0, + left: 0, + right: 0, + height: 2, + pointerEvents: 'none', + WebkitAppRegion: 'drag', + }; + + window['__start'] = () => { + const parsed = url.parse(window.location.href, true), + notionUrl = + parsed.query.path || + schemeHelpers.getSchemeUrl({ + httpUrl: config.default.baseURL, + protocol: config.default.protocol, + }); + delete parsed.search; + delete parsed.query; + const plainUrl = url.format(parsed); + window.history.replaceState(undefined, undefined, plainUrl); + document.title = localizationHelper + .createIntlShape( + localizationHelper.getNotionLocaleFromElectronLocale( + window.navigator.language + ) + ) + .formatMessage( + notion_intl.defineMessages({ + documentTitle: { + id: 'desktop.documentTitle', + defaultMessage: 'Notion Desktop', + }, + }).documentTitle + ); + const rootElm = document.getElementById('root'); + ReactDOM.render( + React.createElement(Index, { notionUrl: notionUrl }), + rootElm + ); + }; + } else { + const __start = window['__start']; + + window['__start'] = () => { + __start(); + const dragarea = document.querySelector( + '#root [style*="-webkit-app-region: drag"]' + ), + default_styles = dragarea.getAttribute('style'); + if (store().tiling_mode) { + dragarea.style.display = 'none'; + } else { + document + .getElementById('notion') + .addEventListener('ipc-message', (event) => { + if (event.channel !== 'enhancer:sidebar-width') return; + dragarea.setAttribute( + 'style', + `${default_styles} top: 2px; height: ${ + store().dragarea_height + }px; left: ${event.args[0]};` + ); + }); + } + }; + } }; From 7a6411ad23ab8b92f129f49e7a766b63e4a2ee53 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 6 Oct 2020 10:15:30 +1100 Subject: [PATCH 102/371] catch EBUSY, potential csp fix for #66 --- repo/core/create.js | 14 +++++++++++ repo/core/render.js | 61 +++++++++++++++++++++++++++------------------ 2 files changed, 51 insertions(+), 24 deletions(-) diff --git a/repo/core/create.js b/repo/core/create.js index fb37b5a..9daff2c 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -52,6 +52,20 @@ module.exports = (store, __exports) => { }, ...rect, }); + electron.session + .fromPartition('persist:notion') + .webRequest.onHeadersReceived((details, callback) => { + callback({ + responseHeaders: Object.assign( + { + 'Content-Security-Policy': [ + "script-src 'self' 'unsafe-inline' 'unsafe-eval' enhancement: https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://checkout.stripe.com https://embed.typeform.com https://admin.typeform.com https://platform.twitter.com https://cdn.syndication.twimg.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://checkout.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com; style-src 'self' 'unsafe-inline' enhancement: https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:", + ], + }, + details.responseHeaders + ), + }); + }); window.once('ready-to-show', function () { if ( !store().openhidden || diff --git a/repo/core/render.js b/repo/core/render.js index dc94206..3b0b494 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -21,6 +21,7 @@ const url = require('url'), module.exports = (store, __exports) => { if (store().tabs) { + let $currentTab; class Index extends React.PureComponent { constructor() { super(...arguments); @@ -29,11 +30,11 @@ module.exports = (store, __exports) => { searching: false, searchingPeekView: false, zoomFactor: 1, - tabs: 2, + tabs: [], }; this.notionElm = []; this.loadedElms = []; - this.reactTabs = []; + this.reactTabs = {}; this.handleNotionRef = (notionElm) => { this.notionElm.push(notionElm); }; @@ -51,13 +52,26 @@ module.exports = (store, __exports) => { } }, 50); }; - window['newtab'] = () => { - this.setState({ tabs: this.state.tabs + 1 }); - setTimeout(() => this.addListeners(), 100); + window['tab'] = (id) => { + if (!id) return; + this.setState({ tabs: [...new Set([...this.state.tabs, id])] }); + setTimeout(() => { + this.addListeners(); + if (document.querySelector(`#tab-${id}`)) { + $currentTab = document.querySelector(`#tab-${id}`); + $currentTab.focus(); + } + }, 100); }; } componentDidMount() { this.addListeners(); + + try { + electron.remote.getCurrentWindow().on('focus', (e) => { + $notion.focus(); + }); + } catch {} } addListeners() { const searchElm = this.searchElm; @@ -214,10 +228,8 @@ module.exports = (store, __exports) => { this.handleReload(); return; } - electronWindow.on('focus', (e) => { - $notion.focus(); - }); $notion.addEventListener('dom-ready', function () { + if ($notion !== $currentTab) return; if (document.activeElement instanceof HTMLElement) { document.activeElement.blur(); } @@ -286,25 +298,26 @@ module.exports = (store, __exports) => { ); } renderNotionContainer() { - this.reactTabs = [ - ...this.reactTabs, - ...new Array(this.state.tabs - this.reactTabs.length) - .fill(0) - .map((i) => - React.createElement('webview', { - className: 'notion', - style: Index.notionWebviewStyle, - ref: this.handleNotionRef, - partition: constants.electronSessionPartition, - preload: path.resolve(`${__notion}/app/renderer/preload.js`), - src: this.props.notionUrl, - }) - ), - ]; + this.reactTabs = Object.fromEntries( + this.state.tabs.map((id) => { + return [ + id, + this.reactTabs[id] || + React.createElement('webview', { + className: 'notion', + style: Index.notionWebviewStyle, + ref: this.handleNotionRef, + partition: constants.electronSessionPartition, + preload: path.resolve(`${__notion}/app/renderer/preload.js`), + src: this.props.notionUrl, + }), + ]; + }) + ); return React.createElement( 'div', { style: this.getNotionContainerStyle() }, - ...this.reactTabs + ...Object.values(this.reactTabs) ); } renderErrorContainer() { From 9ef63175292961b95d712f3e73f85ea39465b6fd Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 6 Oct 2020 11:47:33 +1100 Subject: [PATCH 103/371] attempt 3 at #66 --- repo/core/create.js | 15 +++++++-------- repo/core/render.js | 29 ++++++++++++++++++++--------- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/repo/core/create.js b/repo/core/create.js index 9daff2c..f428013 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -55,15 +55,14 @@ module.exports = (store, __exports) => { electron.session .fromPartition('persist:notion') .webRequest.onHeadersReceived((details, callback) => { + alert(1); callback({ - responseHeaders: Object.assign( - { - 'Content-Security-Policy': [ - "script-src 'self' 'unsafe-inline' 'unsafe-eval' enhancement: https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://checkout.stripe.com https://embed.typeform.com https://admin.typeform.com https://platform.twitter.com https://cdn.syndication.twimg.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://checkout.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com; style-src 'self' 'unsafe-inline' enhancement: https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:", - ], - }, - details.responseHeaders - ), + responseHeaders: { + ...details.responseHeaders, + 'Content-Security-Policy': [ + "script-src 'self' 'unsafe-inline' 'unsafe-eval' enhancement: https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://checkout.stripe.com https://embed.typeform.com https://admin.typeform.com https://platform.twitter.com https://cdn.syndication.twimg.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://checkout.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com; style-src 'self' 'unsafe-inline' enhancement: https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:", + ], + }, }); }); window.once('ready-to-show', function () { diff --git a/repo/core/render.js b/repo/core/render.js index 3b0b494..8b26f1a 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -19,6 +19,13 @@ const url = require('url'), React = require(`${__notion}/app/node_modules/react/index.js`), ReactDOM = require(`${__notion}/app/node_modules/react-dom/index.js`); +const insertCSP = ` + const csp = document.createElement('meta'); + csp.httpEquiv = 'Content-Security-Policy'; + csp.content = "script-src 'self' 'unsafe-inline' 'unsafe-eval' enhancement: https://gist.github.com https://apis.google.com https://api.amplitude.com https://widget.intercom.io https://js.intercomcdn.com https://logs-01.loggly.com https://cdn.segment.com https://analytics.pgncs.notion.so https://checkout.stripe.com https://embed.typeform.com https://admin.typeform.com https://platform.twitter.com https://cdn.syndication.twimg.com; connect-src 'self' https://msgstore.www.notion.so wss://msgstore.www.notion.so https://notion-emojis.s3-us-west-2.amazonaws.com https://s3-us-west-2.amazonaws.com https://s3.us-west-2.amazonaws.com https://notion-production-snapshots-2.s3.us-west-2.amazonaws.com https: http: https://api.amplitude.com https://api.embed.ly https://js.intercomcdn.com https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io https://logs-01.loggly.com https://api.segment.io https://api.pgncs.notion.so https://checkout.stripe.com https://cdn.contentful.com https://preview.contentful.com https://images.ctfassets.net https://api.unsplash.com https://boards-api.greenhouse.io; font-src 'self' data: https://cdnjs.cloudflare.com https://js.intercomcdn.com; img-src 'self' data: blob: https: https://platform.twitter.com https://syndication.twitter.com https://pbs.twimg.com https://ton.twimg.com; style-src 'self' 'unsafe-inline' enhancement: https://cdnjs.cloudflare.com https://github.githubassets.com https://platform.twitter.com https://ton.twimg.com; frame-src https: http:; media-src https: http:"; + document.head.appendChild(csp); +`; + module.exports = (store, __exports) => { if (store().tabs) { let $currentTab; @@ -53,7 +60,7 @@ module.exports = (store, __exports) => { }, 50); }; window['tab'] = (id) => { - if (!id) return; + if (!id && id !== 0) return; this.setState({ tabs: [...new Set([...this.state.tabs, id])] }); setTimeout(() => { this.addListeners(); @@ -175,6 +182,7 @@ module.exports = (store, __exports) => { } ); $notion.addEventListener('dom-ready', () => { + $notion.executeJavaScript(insertCSP); $notion .getWebContents() .addListener('found-in-page', (event, result) => { @@ -191,6 +199,12 @@ module.exports = (store, __exports) => { ); }); notionIpc.proxyAllMainToNotion($notion); + if ($notion !== $currentTab) return; + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + $notion.blur(); + $notion.focus(); }); notionIpc.receiveIndexFromNotion.addListener( $notion, @@ -228,14 +242,6 @@ module.exports = (store, __exports) => { this.handleReload(); return; } - $notion.addEventListener('dom-ready', function () { - if ($notion !== $currentTab) return; - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } - $notion.blur(); - $notion.focus(); - }); electronWindow.addListener('app-command', (e, cmd) => { const webContents = $notion.getWebContents(); if (cmd === 'browser-backward' && webContents.canGoBack()) { @@ -524,6 +530,7 @@ module.exports = (store, __exports) => { React.createElement(Index, { notionUrl: notionUrl }), rootElm ); + tab(0); }; } else { const __start = window['__start']; @@ -548,6 +555,10 @@ module.exports = (store, __exports) => { }px; left: ${event.args[0]};` ); }); + + document.getElementById('notion').addEventListener('dom-ready', () => { + document.getElementById('notion').executeJavaScript(insertCSP); + }); } }; } From 50b2ff180db1245443f15cae8b37c14e30c25b2e Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 6 Oct 2020 22:12:25 +1100 Subject: [PATCH 104/371] separate search working for tabs --- repo/core/create.js | 1 - repo/core/render.js | 277 ++++++++++++++++++++++++++------------------ 2 files changed, 162 insertions(+), 116 deletions(-) diff --git a/repo/core/create.js b/repo/core/create.js index f428013..58437c8 100644 --- a/repo/core/create.js +++ b/repo/core/create.js @@ -55,7 +55,6 @@ module.exports = (store, __exports) => { electron.session .fromPartition('persist:notion') .webRequest.onHeadersReceived((details, callback) => { - alert(1); callback({ responseHeaders: { ...details.responseHeaders, diff --git a/repo/core/render.js b/repo/core/render.js index 8b26f1a..1e3f4a1 100644 --- a/repo/core/render.js +++ b/repo/core/render.js @@ -27,8 +27,7 @@ const insertCSP = ` `; module.exports = (store, __exports) => { - if (store().tabs) { - let $currentTab; + if (!store().tabs) { class Index extends React.PureComponent { constructor() { super(...arguments); @@ -39,64 +38,186 @@ module.exports = (store, __exports) => { zoomFactor: 1, tabs: [], }; + this.$currentTab; + this.tabCache = { + react: {}, + active: [], + loading: [], + }; this.notionElm = []; this.loadedElms = []; this.reactTabs = {}; - this.handleNotionRef = (notionElm) => { - this.notionElm.push(notionElm); + this.handleNotionRef = ($notion) => { + this.tabCache.loading.push($notion); }; - this.searchElm = null; + this.$search = null; this.handleSearchRef = (searchElm) => { - this.searchElm = searchElm; + this.$search = searchElm; }; this.handleReload = () => { this.setState({ error: false }); setTimeout(() => { - if (this.notionElm.length) { - this.notionElm.forEach(($notion) => { - if ($notion.isWaitingForResponse()) $notion.reload(); - }); - } + this.tabCache.loading.forEach(($notion) => { + if ($notion.isWaitingForResponse()) $notion.reload(); + }); }, 50); }; + this.startSearch = this.startSearch.bind(this); + this.stopSearch = this.stopSearch.bind(this); + this.nextSearch = this.nextSearch.bind(this); + this.prevSearch = this.prevSearch.bind(this); + this.clearSearch = this.clearSearch.bind(this); + this.doneSearch = this.doneSearch.bind(this); window['tab'] = (id) => { if (!id && id !== 0) return; this.setState({ tabs: [...new Set([...this.state.tabs, id])] }); setTimeout(() => { - this.addListeners(); + this.loadListeners(); + this.blurListeners(); if (document.querySelector(`#tab-${id}`)) { - $currentTab = document.querySelector(`#tab-${id}`); - $currentTab.focus(); + this.tabCache.active.forEach(($notion) => { + $notion.style.display = 'none'; + }); + this.$currentTab = document.querySelector(`#tab-${id}`); + this.$currentTab.style.display = 'flex'; + this.focusListeners(); } - }, 100); + }, 1000); }; } componentDidMount() { - this.addListeners(); + this.loadListeners(); try { electron.remote.getCurrentWindow().on('focus', (e) => { - $notion.focus(); + this.$currentTab.focus(); }); } catch {} } - addListeners() { - const searchElm = this.searchElm; - const notionElm = this.notionElm; - if (!searchElm || !notionElm.length) { - return; + startSearch(isPeekView) { + this.setState({ + searching: true, + searchingPeekView: isPeekView, + }); + if (document.activeElement instanceof HTMLElement) + document.activeElement.blur(); + this.$search.focus(); + notionIpc.sendIndexToSearch(this.$search, 'search:start'); + notionIpc.sendIndexToNotion(this.$search, 'search:started'); + } + stopSearch() { + notionIpc.sendIndexToSearch(this.$search, 'search:reset'); + this.setState({ + searching: false, + }); + this.lastSearchQuery = undefined; + this.$currentTab.getWebContents().stopFindInPage('clearSelection'); + notionIpc.sendIndexToNotion(this.$currentTab, 'search:stopped'); + } + nextSearch(query) { + this.$currentTab.getWebContents().findInPage(query, { + forward: true, + findNext: query === this.lastSearchQuery, + }); + this.lastSearchQuery = query; + } + prevSearch(query) { + this.$currentTab.getWebContents().findInPage(query, { + forward: false, + findNext: query === this.lastSearchQuery, + }); + this.lastSearchQuery = query; + } + clearSearch() { + this.lastSearchQuery = undefined; + this.$currentTab.getWebContents().stopFindInPage('clearSelection'); + } + doneSearch() { + this.lastSearchQuery = undefined; + this.$currentTab.getWebContents().stopFindInPage('clearSelection'); + this.setState({ searching: false }); + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); } - - notionElm - .filter(($notion) => !this.loadedElms.includes($notion)) + this.$currentTab.focus(); + notionIpc.sendIndexToNotion(this.$currentTab, 'search:stopped'); + } + blurListeners() { + if (!this.$currentTab) return; + if (this.state.searching) this.stopSearch(); + notionIpc.receiveIndexFromNotion.removeListener( + this.$currentTab, + 'search:start', + this.startSearch + ); + notionIpc.receiveIndexFromNotion.removeListener( + this.$currentTab, + 'search:stop', + this.stopSearch + ); + notionIpc.receiveIndexFromSearch.removeListener( + this.$search, + 'search:next', + this.nextSearch + ); + notionIpc.receiveIndexFromSearch.removeListener( + this.$search, + 'search:prev', + this.prevSearch + ); + notionIpc.receiveIndexFromSearch.removeListener( + this.$search, + 'search:clear', + this.clearSearch + ); + notionIpc.receiveIndexFromSearch.removeListener( + this.$search, + 'search:stop', + this.doneSearch + ); + } + focusListeners() { + notionIpc.receiveIndexFromNotion.addListener( + this.$currentTab, + 'search:start', + this.startSearch + ); + notionIpc.receiveIndexFromNotion.addListener( + this.$currentTab, + 'search:stop', + this.stopSearch + ); + notionIpc.receiveIndexFromSearch.addListener( + this.$search, + 'search:next', + this.nextSearch + ); + notionIpc.receiveIndexFromSearch.addListener( + this.$search, + 'search:prev', + this.prevSearch + ); + notionIpc.receiveIndexFromSearch.addListener( + this.$search, + 'search:clear', + this.clearSearch + ); + notionIpc.receiveIndexFromSearch.addListener( + this.$search, + 'search:stop', + this.doneSearch + ); + } + loadListeners() { + if (!this.$search) return; + this.tabCache.loading + .filter(($notion) => !this.tabCache.active.includes($notion)) .forEach(($notion) => { - this.loadedElms.push($notion); + this.tabCache.active.push($notion); $notion.addEventListener('did-fail-load', (error) => { // logger.info('Failed to load:', error); - if (error.errorCode === -3) { - return; - } if ( + error.errorCode === -3 || !error.validatedURL.startsWith( schemeHelpers.getSchemeUrl({ httpUrl: config.default.baseURL, @@ -108,81 +229,8 @@ module.exports = (store, __exports) => { } this.setState({ error: true }); }); - notionIpc.receiveIndexFromNotion.addListener( - $notion, - 'search:start', - (isPeekView) => { - this.setState({ - searching: true, - searchingPeekView: isPeekView, - }); - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } - searchElm.focus(); - notionIpc.sendIndexToSearch(searchElm, 'search:start'); - notionIpc.sendIndexToNotion(searchElm, 'search:started'); - } - ); - notionIpc.receiveIndexFromNotion.addListener( - $notion, - 'search:stop', - () => { - notionIpc.sendIndexToSearch(searchElm, 'search:reset'); - this.setState({ - searching: false, - }); - this.lastSearchQuery = undefined; - $notion.getWebContents().stopFindInPage('clearSelection'); - notionIpc.sendIndexToNotion($notion, 'search:stopped'); - } - ); - notionIpc.receiveIndexFromSearch.addListener( - searchElm, - 'search:next', - (query) => { - $notion.getWebContents().findInPage(query, { - forward: true, - findNext: query === this.lastSearchQuery, - }); - this.lastSearchQuery = query; - } - ); - notionIpc.receiveIndexFromSearch.addListener( - searchElm, - 'search:prev', - (query) => { - $notion.getWebContents().findInPage(query, { - forward: false, - findNext: query === this.lastSearchQuery, - }); - this.lastSearchQuery = query; - } - ); - notionIpc.receiveIndexFromSearch.addListener( - searchElm, - 'search:clear', - () => { - this.lastSearchQuery = undefined; - $notion.getWebContents().stopFindInPage('clearSelection'); - } - ); - notionIpc.receiveIndexFromSearch.addListener( - searchElm, - 'search:stop', - () => { - this.lastSearchQuery = undefined; - $notion.getWebContents().stopFindInPage('clearSelection'); - this.setState({ searching: false }); - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } - $notion.focus(); - notionIpc.sendIndexToNotion($notion, 'search:stopped'); - } - ); $notion.addEventListener('dom-ready', () => { - $notion.executeJavaScript(insertCSP); + $notion.getWebContents().executeJavaScript(insertCSP); $notion .getWebContents() .addListener('found-in-page', (event, result) => { @@ -193,25 +241,19 @@ module.exports = (store, __exports) => { } : { count: 0, index: 0 }; notionIpc.sendIndexToSearch( - searchElm, + this.$search, 'search:result', matches ); }); notionIpc.proxyAllMainToNotion($notion); - if ($notion !== $currentTab) return; - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } - $notion.blur(); - $notion.focus(); }); notionIpc.receiveIndexFromNotion.addListener( $notion, 'search:set-theme', (theme) => { notionIpc.sendIndexToSearch( - searchElm, + this.$search, 'search:set-theme', theme ); @@ -222,7 +264,7 @@ module.exports = (store, __exports) => { 'zoom', (zoomFactor) => { $notion.getWebContents().setZoomFactor(zoomFactor); - searchElm.getWebContents().setZoomFactor(zoomFactor); + this.$search.getWebContents().setZoomFactor(zoomFactor); this.setState({ zoomFactor }); } ); @@ -284,6 +326,7 @@ module.exports = (store, __exports) => { sendFullScreenChangeEvent ); }); + this.tabCache.loading = []; } renderSearchContainer() { return React.createElement( @@ -311,6 +354,7 @@ module.exports = (store, __exports) => { this.reactTabs[id] || React.createElement('webview', { className: 'notion', + id: `tab-${id}`, style: Index.notionWebviewStyle, ref: this.handleNotionRef, partition: constants.electronSessionPartition, @@ -391,7 +435,7 @@ module.exports = (store, __exports) => { this.renderSearchContainer(), this.renderErrorContainer() ); - this.addListeners(); + this.loadListeners(); return result; } getNotionContainerStyle() { @@ -487,6 +531,7 @@ module.exports = (store, __exports) => { Index.notionWebviewStyle = { width: '100%', height: '100%', + display: 'none', }; Index.dragRegionStyle = { position: 'absolute', @@ -534,7 +579,6 @@ module.exports = (store, __exports) => { }; } else { const __start = window['__start']; - window['__start'] = () => { __start(); const dragarea = document.querySelector( @@ -557,7 +601,10 @@ module.exports = (store, __exports) => { }); document.getElementById('notion').addEventListener('dom-ready', () => { - document.getElementById('notion').executeJavaScript(insertCSP); + document + .getElementById('notion') + .getWebContents() + .executeJavaScript(insertCSP); }); } }; From c0d7d5170b00225c8f7d8f21f91bf65c4671daa4 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 7 Oct 2020 23:58:22 +1100 Subject: [PATCH 105/371] replace dragarea with titlebar in tabbable mode --- repo/core/buttons.js | 2 +- repo/core/client.js | 65 +++-- repo/core/css/menu.css | 24 +- repo/core/css/tabs.css | 80 ++++++ repo/core/icons/alwaysontop_off.svg | 2 +- repo/core/icons/alwaysontop_on.svg | 2 +- repo/core/icons/maximize_off.svg | 2 +- repo/core/icons/maximize_on.svg | 2 +- repo/core/icons/minimize.svg | 2 +- repo/core/menu.html | 2 +- repo/core/menu.js | 6 +- repo/core/mod.js | 6 + repo/core/render.js | 399 ++++++++++++++-------------- repo/core/tray.js | 8 +- 14 files changed, 351 insertions(+), 251 deletions(-) create mode 100644 repo/core/css/tabs.css diff --git a/repo/core/buttons.js b/repo/core/buttons.js index e93dddd..e50de06 100644 --- a/repo/core/buttons.js +++ b/repo/core/buttons.js @@ -88,7 +88,7 @@ module.exports = (store) => { ]()}`; } for (let btn of buttons.insert) { - document.querySelector(`.window-button#btn-${btn}`).onclick = + buttons.element.querySelector(`.window-button#btn-${btn}`).onclick = buttons.actions[btn]; } if (store().frameless && !store().tiling_mode && !is_mac) { diff --git a/repo/core/client.js b/repo/core/client.js index 592a2ce..aa1f1bf 100644 --- a/repo/core/client.js +++ b/repo/core/client.js @@ -36,7 +36,7 @@ module.exports = (store, __exports) => { document.body.classList.add('snappy-transitions'); // frameless - if (store().frameless && !store().tiling_mode) { + if (store().frameless && !store().tiling_mode && !store().tabs) { document.body.classList.add('frameless'); // draggable area const dragarea = helpers.createElement( @@ -50,10 +50,12 @@ module.exports = (store, __exports) => { } // window buttons - const buttons = require('./buttons.js')(store); - document - .querySelector('.notion-topbar > div[style*="display: flex"]') - .appendChild(buttons.element); + if (!store().tabs) { + const buttons = require('./buttons.js')(store); + document + .querySelector('.notion-topbar > div[style*="display: flex"]') + .appendChild(buttons.element); + } document .querySelector('.notion-history-back-button') .parentElement.nextElementSibling.classList.add( @@ -100,7 +102,7 @@ module.exports = (store, __exports) => { // enhancer menu function setThemeVars() { electron.ipcRenderer.send( - 'enhancer:set-theme-vars', + 'enhancer:set-menu-theme', [ '--theme--main', '--theme--sidebar', @@ -142,31 +144,46 @@ module.exports = (store, __exports) => { '--theme--code_inline-background', ].map((rule) => [rule, getStyle(rule)]) ); + electron.ipcRenderer.sendToHost( + 'enhancer:set-tab-theme', + [ + '--theme--dragarea', + '--theme--font_sans', + '--theme--table-border', + '--theme--interactive_hover', + '--theme--interactive_hover-border', + '--theme--button_close', + '--theme--button_close-fill', + '--theme--text', + ].map((rule) => [rule, getStyle(rule)]) + ); } setThemeVars(); const theme_observer = new MutationObserver(setThemeVars); theme_observer.observe(document.querySelector('.notion-app-inner'), { attributes: true, }); - electron.ipcRenderer.on('enhancer:get-theme-vars', setThemeVars); + electron.ipcRenderer.on('enhancer:get-menu-theme', setThemeVars); - const sidebar_observer = new MutationObserver(setSidebarWidth); - sidebar_observer.observe(document.querySelector('.notion-sidebar'), { - attributes: true, - }); - let sidebar_width; - function setSidebarWidth(list) { - if (!store().frameless && store().tiling_mode) return; - const new_sidebar_width = - list[0].target.style.height === 'auto' - ? '0px' - : list[0].target.style.width; - if (new_sidebar_width !== sidebar_width) { - sidebar_width = new_sidebar_width; - electron.ipcRenderer.sendToHost( - 'enhancer:sidebar-width', - sidebar_width - ); + if (!store().tabs) { + const sidebar_observer = new MutationObserver(setSidebarWidth); + sidebar_observer.observe(document.querySelector('.notion-sidebar'), { + attributes: true, + }); + let sidebar_width; + function setSidebarWidth(list) { + if (!store().frameless && store().tiling_mode) return; + const new_sidebar_width = + list[0].target.style.height === 'auto' + ? '0px' + : list[0].target.style.width; + if (new_sidebar_width !== sidebar_width) { + sidebar_width = new_sidebar_width; + electron.ipcRenderer.sendToHost( + 'enhancer:sidebar-width', + sidebar_width + ); + } } } setSidebarWidth([{ target: document.querySelector('.notion-sidebar') }]); diff --git a/repo/core/css/menu.css b/repo/core/css/menu.css index 17992b8..2c393c8 100644 --- a/repo/core/css/menu.css +++ b/repo/core/css/menu.css @@ -50,10 +50,10 @@ body:not([style]) > * { body:not([style])::after { content: ''; position: absolute; - left: 44vw; - top: calc(50% - 7.5vw); - width: 10vw; - height: 10vw; + left: calc(50vw - 15px); + top: calc(50vh - 15px); + width: 30px; + height: 30px; border: 4px solid rgb(34, 34, 34); border-top-color: transparent; border-radius: 50%; @@ -93,7 +93,7 @@ s { /* titlebar */ -#menu-titlebar::before { +#titlebar::before { content: ''; position: absolute; width: 100%; @@ -103,20 +103,18 @@ s { height: 2px; } -#menu-titlebar { +#titlebar { display: flex; -webkit-app-region: drag; -} -#menu-titlebar button { - -webkit-app-region: no-drag; -} -#menu-titlebar { background: var(--theme--dragarea); } -#menu-titlebar > .window-buttons-area { +#titlebar button { + -webkit-app-region: no-drag; +} +#titlebar .window-buttons-area { margin: 0.4em 0.4em 0.4em auto; } -#menu-titlebar > .window-buttons-area:empty { +#titlebar .window-buttons-area:empty { display: none; } diff --git a/repo/core/css/tabs.css b/repo/core/css/tabs.css new file mode 100644 index 0000000..2e30eb1 --- /dev/null +++ b/repo/core/css/tabs.css @@ -0,0 +1,80 @@ +/* + * notion-enhancer + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * under the MIT license + */ + +@import './buttons.css'; + +* { + box-sizing: border-box; + word-break: break-word; + text-decoration: none; + text-size-adjust: 100%; + font-family: var(--theme--font_sans); + outline-color: var(--theme--table-border); +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +body:not([style*='--theme']) > * { + opacity: 0; +} +body:not([style*='--theme'])::after { + content: ''; + position: absolute; + left: calc(50vw - 25px); + top: calc(50vh - 25px); + width: 50px; + height: 50px; + border: 4px solid rgb(34, 34, 34); + border-top-color: transparent; + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +html, +body, +#root { + height: 100%; + margin: 0; +} +#root { + display: flex; + flex-direction: column; +} + +#titlebar::before { + content: ''; + position: absolute; + width: 100%; + -webkit-app-region: no-drag; + top: 0; + left: 0; + height: 2px; +} +#titlebar { + display: flex; + flex-shrink: 1; + padding: 0.5em 0.15em; + user-select: none; + -webkit-app-region: drag; + background: var(--theme--dragarea); +} +#titlebar button { + color: var(--theme--text); + -webkit-app-region: no-drag; +} +#titlebar .window-buttons-area { + margin: auto 0.4em auto auto; +} +#titlebar .window-buttons-area:empty { + display: none; +} diff --git a/repo/core/icons/alwaysontop_off.svg b/repo/core/icons/alwaysontop_off.svg index 9fa0fb5..96afcf0 100644 --- a/repo/core/icons/alwaysontop_off.svg +++ b/repo/core/icons/alwaysontop_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/alwaysontop_on.svg b/repo/core/icons/alwaysontop_on.svg index 1c344f8..3fec5d5 100644 --- a/repo/core/icons/alwaysontop_on.svg +++ b/repo/core/icons/alwaysontop_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/maximize_off.svg b/repo/core/icons/maximize_off.svg index 7241f63..0bf56b0 100644 --- a/repo/core/icons/maximize_off.svg +++ b/repo/core/icons/maximize_off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/maximize_on.svg b/repo/core/icons/maximize_on.svg index 681fdc9..af77a3e 100644 --- a/repo/core/icons/maximize_on.svg +++ b/repo/core/icons/maximize_on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/icons/minimize.svg b/repo/core/icons/minimize.svg index abcebb7..d179e14 100644 --- a/repo/core/icons/minimize.svg +++ b/repo/core/icons/minimize.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/repo/core/menu.html b/repo/core/menu.html index 3b3f91a..56da84e 100644 --- a/repo/core/menu.html +++ b/repo/core/menu.html @@ -9,7 +9,7 @@ - +