From ad040d83eb519929eee91b831646028ca8195342 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sun, 31 May 2020 00:06:56 +1000 Subject: [PATCH] new styles after user feedback --- CHANGELOG.md | 7 ++++ README.md | 92 ++++++++++++++++++++++++++++++++++++++++- cleaner.py | 2 +- customiser.py | 2 +- docs/changelog.html | 14 ++++++- docs/index.html | 97 ++++++++++++++++++++++++++++++++++++++++++-- resources/hotkey.js | 30 +++++++------- resources/preload.js | 8 ++-- resources/store.js | 2 +- resources/user.css | 2 +- 10 files changed, 227 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5090ba2..689586d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,13 @@ if something is ~~crossed out~~, then it is no longer a feature included by default, but can still easily be enabled by following instructions in the [docs](README.md). +### v0.5.1 (wip) + +- new: hide discussions (thanks to [u/Roosmaryn](https://www.reddit.com/user/Roosmaryn/)) +- new: custom colour theming, demonstrated via the dark+ theme. +- new: custom fonts. +- new: font resizing. + ### v0.5.0 (2020-05-23) - new: running from the wsl. diff --git a/README.md b/README.md index a635493..04158b1 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,96 @@ these should also work for the web version, if copied into your css customiser. css below will work for every instance of the element, but if you wish to hide only a specific element (e.g. the '+ new' table row) it is recommended that you prepend each selector with `[data-block-id='ID']` ([video tutorial on fetching IDs](https://www.youtube.com/watch?v=6V7eqShm_4w)). +#### dark+ theme + +```css +/*** dark+ ***/ +.notion-dark-theme .window-buttons { + background: rgb(10, 10, 10); +} +.notion-dark-theme .window-buttons:hover { + background: rgb(23, 23, 23); +} +/* sidebar */ +[style*='background: rgb(55, 60, 63)'], +[style*='background: rgb(80, 85, 88)'] { + background: rgb(0, 0, 0) !important; +} +/* main content */ +.notion-body.dark, +[style*='background: rgb(47, 52, 55)'] { + background: rgb(10, 10, 10) !important; +} +/* hovered buttons */ +[style*='background: rgb(71, 76, 80)'], +[style*='background: rgb(98, 102, 104)'] { + background: rgb(15, 15, 15) !important; + box-shadow: 0 0 0 0.5px rgba(78, 78, 78, 0.7); +} +/* database elements: e.g. view select, calendar event */ +[style*='background: rgb(63, 68, 71)'] { + background: rgb(4, 4, 4) !important; + border: 0.5px solid rgba(59, 59, 59, 0.7); +} +``` + +#### hide discussions (comment threads at the top of each page) + +```css +.notion-page-view-discussion { + display: none !important; +} +``` + +#### custom fonts + +**styles must be added to the top of the `user.css` file, so that nothing (other than comments) is above them @import statement** + +```css +.notion-app-inner { + font-family: 'Oxygen', sans-serif !important; +} +[style*='monospace;'] { + font-family: 'Fira Code', monospace !important; +} +[style*=', serif;'] { + font-family: 'Roboto Slab', serif !important; +} +``` + +### font resizing + +**not recommended:** this can mess up container sizes. +it is suggested to instead use `ctrl+` or `ctrl-` to scale everything up/down. + +```css +/* font sizes */ +:root { + --font-scale: 1; +} +.notion-app-inner { + font-size: calc(var(--font-scale) * 16px) !important; +} +[style*='font-size: 40px'] { + font-size: calc(var(--font-scale) * 40px) !important; +} +[style*='font-size: 16px'] { + font-size: calc(var(--font-scale) * 16px) !important; +} +[style*='font-size: 14px'] { + font-size: calc(var(--font-scale) * 14px) !important; +} +[style*='font-size: 12px'] { + font-size: calc(var(--font-scale) * 12px) !important; +} +[style*='font-size: 11px'] { + font-size: calc(var(--font-scale) * 11px) !important; +} +[style*='font-size: 1.25em'] { + font-size: calc(var(--font-scale) * 1.25em) !important; +} +``` + #### wider page view ```css @@ -233,8 +323,6 @@ as it is a per-table-column style, unlike all others here, it must be prepended ## other details -i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it. - the notion logo belongs entirely to the notion team, and was sourced from their [media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286). diff --git a/cleaner.py b/cleaner.py index 74d12b9..0f93f10 100644 --- a/cleaner.py +++ b/cleaner.py @@ -1,5 +1,5 @@ -# Notion Enhancer +# notion-enhancer # (c) 2020 dragonwocky # (c) 2020 TarasokUA # (https://dragonwocky.me/) under the MIT license diff --git a/customiser.py b/customiser.py index 07f6b6a..4be9538 100644 --- a/customiser.py +++ b/customiser.py @@ -1,5 +1,5 @@ -# Notion Enhancer +# notion-enhancer # (c) 2020 dragonwocky # (c) 2020 TarasokUA # (https://dragonwocky.me/) under the MIT license diff --git a/docs/changelog.html b/docs/changelog.html index 800897d..f577849 100644 --- a/docs/changelog.html +++ b/docs/changelog.html @@ -1,4 +1,4 @@ -changelog | notion enhancer

notion enhancer

+changelog | notion enhancer

notion enhancer

@@ -7,6 +7,18 @@

if something is crossed out, then it is no longer a feature included by default, but can still easily be enabled by following instructions in the docs.

+

+
+

+ v0.5.1 (wip) +

+
    +
  • new: hide discussions (thanks to u/Roosmaryn)
    • +
  • new: custom colour theming, demonstrated via the dark+ theme.
    • +
  • new: custom fonts.
    • +
  • new: font resizing.
    • +
+

diff --git a/docs/index.html b/docs/index.html index b36303e..49119a1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -notion enhancer

notion enhancer

+notion enhancer

notion enhancer

@@ -113,6 +113,98 @@ changes will be applied instantly on notion reload

css below will work for every instance of the element, but if you wish to hide only a specific element (e.g. the '+ new' table row) it is recommended that you prepend each selector with [data-block-id='ID'] (video tutorial on fetching IDs).

+

+
+

+ dark+ theme +

+ 
/*** dark+ ***/
+.notion-dark-theme .window-buttons {
+  background: rgb(10, 10, 10);
+}
+.notion-dark-theme .window-buttons:hover {
+  background: rgb(23, 23, 23);
+}
+/* sidebar */
+[style*='background: rgb(55, 60, 63)'],
+[style*='background: rgb(80, 85, 88)'] {
+  background: rgb(0, 0, 0) !important;
+}
+/* main content */
+.notion-body.dark,
+[style*='background: rgb(47, 52, 55)'] {
+  background: rgb(10, 10, 10) !important;
+}
+/* hovered buttons */
+[style*='background: rgb(71, 76, 80)'],
+[style*='background: rgb(98, 102, 104)'] {
+  background: rgb(15, 15, 15) !important;
+  box-shadow: 0 0 0 0.5px rgba(78, 78, 78, 0.7);
+}
+/* database elements: e.g. view select, calendar event */
+[style*='background: rgb(63, 68, 71)'] {
+  background: rgb(4, 4, 4) !important;
+  border: 0.5px solid rgba(59, 59, 59, 0.7);
+}
+ +
+
+

+ hide discussions (comment threads at the top of each page) +

+ 
.notion-page-view-discussion {
+  display: none !important;
+}
+ +
+
+

+ custom fonts +

+

styles must be added to the top of the user.css file, so that nothing (other than comments) is above them @import statement

+
.notion-app-inner {
+  font-family: 'Oxygen', sans-serif !important;
+}
+[style*='monospace;'] {
+  font-family: 'Fira Code', monospace !important;
+}
+[style*=', serif;'] {
+  font-family: 'Roboto Slab', serif !important;
+}
+ +
+
+

+ font resizing +

+

not recommended: this can mess up container sizes. +it is suggested to instead use ctrl+ or ctrl- to scale everything up/down.

+
/* font sizes */
+:root {
+  --font-scale: 1;
+}
+.notion-app-inner {
+  font-size: calc(var(--font-scale) * 16px) !important;
+}
+[style*='font-size: 40px'] {
+  font-size: calc(var(--font-scale) * 40px) !important;
+}
+[style*='font-size: 16px'] {
+  font-size: calc(var(--font-scale) * 16px) !important;
+}
+[style*='font-size: 14px'] {
+  font-size: calc(var(--font-scale) * 14px) !important;
+}
+[style*='font-size: 12px'] {
+  font-size: calc(var(--font-scale) * 12px) !important;
+}
+[style*='font-size: 11px'] {
+  font-size: calc(var(--font-scale) * 11px) !important;
+}
+[style*='font-size: 1.25em'] {
+  font-size: calc(var(--font-scale) * 1.25em) !important;
+}
+

@@ -273,8 +365,7 @@ as it is a per-table-column style, unlike all others here, it must be prepended

other details

-

i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.

-

the notion logo belongs entirely to the notion team, and was sourced from their +

the notion logo belongs entirely to the notion team, and was sourced from their media kit.

if you have any questions, check my website for contact details.

diff --git a/resources/hotkey.js b/resources/hotkey.js index cb18b2a..519da91 100644 --- a/resources/hotkey.js +++ b/resources/hotkey.js @@ -1,7 +1,7 @@ /* === INJECTION MARKER === */ /* - * Notion Enhancer + * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA * (https://dragonwocky.me/) under the MIT license @@ -22,14 +22,14 @@ function enhancements() { defaults: { openhidden: false, maximised: false, - tray: false - } + tray: false, + }, }), states = { startup: electron_1.app.getLoginItemSettings().openAtLogin, openhidden: store.get('openhidden'), maximised: store.get('maximised'), - tray: store.get('tray') + tray: store.get('tray'), }; tray = new Tray(path.join(__dirname, './notion.ico')); @@ -42,7 +42,7 @@ function enhancements() { click: () => contextMenu.getMenuItemById('startup').checked ? electron_1.app.setLoginItemSettings({ openAtLogin: true }) - : electron_1.app.setLoginItemSettings({ openAtLogin: false }) + : electron_1.app.setLoginItemSettings({ openAtLogin: false }), }, { id: 'openhidden', @@ -52,7 +52,7 @@ function enhancements() { click: () => contextMenu.getMenuItemById('openhidden').checked ? store.set('openhidden', true) - : store.set('openhidden', false) + : store.set('openhidden', false), }, { id: 'maximised', @@ -62,7 +62,7 @@ function enhancements() { click: () => contextMenu.getMenuItemById('maximised').checked ? store.set('maximised', true) - : store.set('maximised', false) + : store.set('maximised', false), }, { id: 'tray', @@ -72,15 +72,15 @@ function enhancements() { click: () => contextMenu.getMenuItemById('tray').checked ? store.set('tray', true) - : store.set('tray', false) + : store.set('tray', false), }, { - type: 'separator' + type: 'separator', }, { label: '(x) quit', - role: 'quit' - } + role: 'quit', + }, ]); tray.setContextMenu(contextMenu); @@ -100,10 +100,10 @@ function enhancements() { const hotkey = '___hotkey___'; // will be set by python script electron_1.globalShortcut.register(hotkey, () => { const windows = electron_1.BrowserWindow.getAllWindows(); - if (windows.some(win => !win.isVisible())) { + if (windows.some((win) => !win.isVisible())) { if (contextMenu.getMenuItemById('maximised').checked) { - windows.forEach(win => win.maximize()); - } else windows.forEach(win => win.show()); - } else windows.forEach(win => win.hide()); + windows.forEach((win) => win.maximize()); + } else windows.forEach((win) => win.show()); + } else windows.forEach((win) => win.hide()); }); } diff --git a/resources/preload.js b/resources/preload.js index 52b58aa..455e8bc 100644 --- a/resources/preload.js +++ b/resources/preload.js @@ -1,7 +1,7 @@ /* === INJECTION MARKER === */ /* - * Notion Enhancer + * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA * (https://dragonwocky.me/) under the MIT license @@ -70,8 +70,8 @@ require('electron').remote.getGlobal('setTimeout')(() => { const store = new (require(path.join(__dirname, '..', 'store.js')))({ config: 'user-preferences', defaults: { - tray: false - } + tray: false, + }, }); if ( store.get('tray') && @@ -87,7 +87,7 @@ require('electron').remote.getGlobal('setTimeout')(() => { /* reload window */ document.defaultView.addEventListener( 'keyup', - ev => void (ev.code === 'F5' ? appwindow.reload() : 0), + (ev) => void (ev.code === 'F5' ? appwindow.reload() : 0), true ); } diff --git a/resources/store.js b/resources/store.js index b2238c4..f2bb378 100644 --- a/resources/store.js +++ b/resources/store.js @@ -1,5 +1,5 @@ /* - * Notion Enhancer + * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA * (https://dragonwocky.me/) under the MIT license diff --git a/resources/user.css b/resources/user.css index 90551d5..3fe5a69 100644 --- a/resources/user.css +++ b/resources/user.css @@ -1,5 +1,5 @@ /* - * Notion Enhancer + * notion-enhancer * (c) 2020 dragonwocky * (c) 2020 TarasokUA * (https://dragonwocky.me/) under the MIT license